/* ========================================================================== base.css — reset, base typography, layout primitives, focus + skip link ========================================================================== */ *{box-sizing:border-box;} /* Horizontal clipping lives on (the viewport scroller, and the IntersectionObserver root). Putting overflow-x on would turn the body into its own scroll container, which breaks IO reveal geometry and position:sticky for descendants. */ html{scroll-behavior:smooth;overflow-x:hidden;} body{margin:0;background:var(--sugar);color:var(--cacao);font-family:var(--body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} ::selection{background:var(--rose);color:var(--cacao);} img{max-width:100%;display:block;} a{color:inherit;} button{font:inherit;} /* ---- focus + cursor affordance ---- */ :focus{outline:none;} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible, select:focus-visible,[tabindex]:focus-visible,.proj-card:focus-visible,.filter:focus-visible{ outline:2px solid var(--rose-ink);outline-offset:2px;border-radius:var(--r-sm);} a,button,.proj-card,.filter,summary{cursor:pointer;} input,textarea{cursor:text;} /* Programmatic focus targets (the
landmark and the page heading we move focus to after an in-site navigation, for screen-reader announcement) must NOT paint a focus ring — they are not interactive controls. This is what was drawing a rose frame around the heading on load. */ [tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none;} [data-cursor]{cursor:none;} /* only gallery zones hide the native cursor */ @media (pointer:coarse){[data-cursor]{cursor:auto;}} /* ---- skip link + screen-reader utility ---- */ .skip{position:fixed;left:12px;top:-60px;z-index:var(--z-skip);background:var(--cacao);color:var(--sugar); padding:10px 16px;border-radius:var(--r);font-family:var(--mono);font-size:12px;text-decoration:none; transition:top .2s;} .skip:focus{top:12px;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ---- generic layout primitives ---- */ .section{padding:clamp(80px,12vh,170px) var(--pad);position:relative;} .section--tight{padding-top:clamp(48px,7vh,90px);padding-bottom:clamp(48px,7vh,90px);} .wrap{max-width:var(--maxw);margin:0 auto;width:100%;} .pagehead{padding-top:calc(var(--nav-h) + clamp(50px,9vh,120px));} /* a little extra breathing room at the foot of each page's final section (the element just before the footer), so it clears the overlapping strip. !important so it also wins over the inline margin on the detail page's next-commission link — it only touches margin-bottom, not the centering. */ main > :nth-last-child(2){margin-bottom:3rem !important;} /* ---- type scale ---- */ .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--cacao);opacity:.75; display:flex;align-items:center;gap:12px;margin:0 0 clamp(26px,5vh,52px);} .eyebrow::after{content:'';flex:1;height:1px;background:var(--cacao);opacity:.22;} .h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,7vw,104px);line-height:.98; letter-spacing:-.03em;margin:0;text-wrap:balance;font-variation-settings:'opsz' 144;} .h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,62px);line-height:1.03; letter-spacing:-.025em;margin:0;text-wrap:balance;font-variation-settings:'opsz' 90;} .h3{font-family:var(--display);font-weight:400;font-size:clamp(23px,3vw,38px);line-height:1.05; letter-spacing:-.02em;margin:0;font-variation-settings:'opsz' 72;} .lede{font-size:clamp(18px,2.1vw,27px);line-height:1.5;letter-spacing:-.01em;max-width:32ch;} .body{font-size:16px;line-height:1.7;max-width:62ch;} .body p{margin:0 0 1.1em;} .label{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--cacao);opacity:.8;}