/* ============================================================ Fabian Biedermann ยท shared stylesheet House rules: rem for container measures (never ch on a wrapper), one italic serif accent per headline, one accent color. ============================================================ */ :root{ --bg:#FAFAF8; --bg-2:#F2F1ED; --ink:#0A0A0A; --ink-60:#5A5A56; --ink-30:#A8A8A2; --line:#E2E1DB; --accent:#E8461E; --dark:#0A0A0A; --dark-line:#232320; --dark-txt:#9C9C96; --pad:clamp(20px,5vw,72px); --maxw:1320px; --ease-out:cubic-bezier(.23,1,.32,1); } /* ---------- press feedback ---------- Touch devices have no hover, so :active is the only signal that a tap registered. Compact controls scale; wide rows dim instead, because a 3% scale on a 1320px row is a visible 40px of shrink and reads as a glitch. .case presses its image, not the card: the card also carries .rv, whose transform would fight a transform here. */ .btn:active{transform:scale(.97)} .burger{transition:transform .16s var(--ease-out)} .burger:active{transform:scale(.92)} .case:active .case-img img{transform:scale(.99)} .art:active,.lnk:active,.crow a.v:active{opacity:.55} .mmenu-in a:active{color:var(--accent)} .lnk,.crow a.v{transition:opacity .16s var(--ease-out)} /* Fonts come from Google Fonts, linked in the of each page. The privacy policy discloses this. If it is ever self-hosted instead, drop the woff2 files in assets/fonts/, add @font-face here, and rewrite the "Fonts" section of privacy.html. */ *{margin:0;padding:0;box-sizing:border-box} /* Deliberately auto. The anchor scroll on the work page is animated in JS so its duration can be controlled; the browser's own smooth scroll offers no timing control and would fight the animation frame by frame. */ html{scroll-behavior:auto} body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif; font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} em,.ac{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em} a{color:inherit;text-decoration:none} img,video,svg{max-width:100%} /* ---------- type ---------- */ h1{font-size:clamp(2.9rem,7.4vw,6.6rem);line-height:.94;letter-spacing:-.045em;font-weight:500} h2{font-size:clamp(2rem,4.4vw,3.9rem);line-height:1.02;letter-spacing:-.037em;font-weight:500} h3{font-size:clamp(1.05rem,1.5vw,1.28rem);letter-spacing:-.02em;font-weight:600} /* The serif accent in headlines carries the accent color. Scoped to h1 and h2 on purpose: also appears in body copy, which must stay ink. The .dark variants are listed because `.dark h2` outranks a bare `h2 em`. */ h1 em,h2 em,.dark h1 em,.dark h2 em{color:var(--accent)} /* Emphasis inside body copy: full ink weight, no serif italic, no accent. Body copy sits at --ink-60, so the jump to --ink plus 500 does the work. */ .hi{color:var(--ink);font-weight:500} .dark .hi{color:var(--bg)} .eyebrow{font-size:.685rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-60);font-weight:500} .lead{font-size:clamp(1.02rem,1.42vw,1.24rem);line-height:1.55;color:var(--ink-60);max-width:56ch} .body-txt{color:var(--ink-60);max-width:68ch} .body-txt p+p{margin-top:1.15em} .small{font-size:.82rem;color:var(--ink-60)} /* ---------- nav ---------- */ nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:20px 0; transition:background .35s,border-color .35s,padding .35s;border-bottom:1px solid transparent} nav.solid{background:rgba(250,250,248,.88);backdrop-filter:blur(14px);border-color:var(--line);padding:13px 0} /* The menu overlay is a sibling of .nav-in inside