/* ═══════════════════════════════════════════════════════════════════════ Atrics Inc Warm paper, deep espresso ink, brass that reads as hardware rather than a marketing colour. Light serif display for the craft, clean sans for everything that has to be read quickly. Reference the client gave: Eské Studio. We borrow the quality bar, not the identity. Eské sells 20,000 sq ft and a showroom, Atrics sells work made one at a time by hand. LAYOUT MODEL: one sticky viewport, seven absolutely-positioned cards stacked first-on-top. Scrolling lifts each card off to reveal the next. Cards use svh, never vh or dvh: svh is the only viewport unit that does not change when a mobile address bar collapses, and a full-screen card stack is exactly where that resize would cause a visible jump. ═══════════════════════════════════════════════════════════════════════ */ :root{ --paper:#f7f4ef; --paper2:#efe9e0; --ink:#1f1a15; --ink-soft:#3a322a; --muted:#6b6157; --dim:#9a9084; --line:#ded6c9; --line2:#cec4b4; --brass:#9c7430; --on-dark:#f2ece2; --black:#121110; /* nav bar: warm near-black, not a cold #000 */ --display:'Cormorant Garamond', 'Palatino Linotype', Palatino, Georgia, serif; --body:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pad:clamp(20px, 5vw, 76px); --maxw:1280px; --cardh:100svh; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--ink); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; /* NO overflow-x:hidden here. Setting one axis to hidden computes the other to auto, which turns into a scroll container, and position:sticky on a descendant then anchors to that container instead of the viewport. iOS Safari breaks on this specifically, which killed the card stack on phones. .stack-viewport already clips horizontally, so it was redundant anyway. If horizontal overflow ever appears, fix it at the source. */ } img{display:block;max-width:100%} a{color:inherit} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:300} .skip:focus{left:12px;top:12px} :focus-visible{outline:2px solid var(--brass);outline-offset:3px} h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.05;letter-spacing:-.018em} .eyebrow,.sec-label{ font-family:var(--body);font-size:11.5px;font-weight:500; letter-spacing:.17em;text-transform:uppercase;color:var(--brass); } .sec-label{display:flex;align-items:center;gap:12px;margin-bottom:22px} .sec-label span{ font-variant-numeric:tabular-nums;color:var(--dim); border:1px solid var(--line2);border-radius:99px;padding:3px 9px;letter-spacing:.08em; } .btn{ display:inline-block;text-decoration:none; background:var(--brass);color:#1a1510; padding:15px 30px;border-radius:2px; font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase; transition:background .25s; } .btn:hover{background:#b0853a} .btn-light{background:var(--on-dark);color:var(--ink)} .btn-light:hover{background:#fff} /* ── header ───────────────────────────────────────────────────────── */ /* Solid black, always. This replaces the old transparent-then-solid toggle and its scrim, which existed only to keep the nav legible while cards lifted through it. A permanent bar makes that whole problem disappear. */ .site-head{ position:fixed;inset:0 0 auto 0;z-index:200; display:flex;align-items:center;justify-content:space-between;gap:24px; padding:20px var(--pad); background:var(--black); color:var(--on-dark); } .wordmark{font-family:var(--display);font-size:25px;text-decoration:none} .wordmark span{color:var(--brass);margin-left:.18em} .nav-links{display:flex;gap:32px} .nav-links a{font-size:13.5px;text-decoration:none;opacity:.8;transition:opacity .25s} .nav-links a:hover{opacity:1} .nav-cta{ font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none; padding:10px 18px;border:1px solid currentColor;border-radius:2px;opacity:.9; transition:opacity .25s; } .nav-cta:hover{opacity:1} /* ── the stack ────────────────────────────────────────────────────── */ /* .stack height is set by main.js to (cards * 100svh); that height IS the scroll distance driving the lift. The fallback below keeps the page usable if JS never runs. */ .stack{position:relative} .stack-viewport{ position:sticky;top:0; height:var(--cardh); overflow:hidden; } .card{ position:absolute;inset:0; height:var(--cardh); overflow:hidden; will-change:transform; background:var(--paper); box-shadow:0 -18px 50px -24px rgba(20,14,8,.45); /* reads as a lifted card edge */ } /* ── card 01 · hero ───────────────────────────────────────────────── */ /* No photograph. Warm paper, ink type, centred. The type is the hero. */ .card-hero{background:var(--paper);display:grid;place-items:center;text-align:center} .hero-inner{ max-width:min(980px,88vw); padding:0 var(--pad); display:flex;flex-direction:column;align-items:center; } .card-hero .eyebrow{margin-bottom:24px} /* Two-clause headline scale. The old 8.6vw/124px was sized for a four-word line; at that size this headline renders five lines, clips under the nav and pushes the eyebrow off screen. Measured, not guessed. */ .card-hero h1{ font-size:clamp(34px,5.6vw,76px);margin-bottom:26px; text-wrap:balance;color:var(--ink); } .card-hero .lede{ max-width:52ch;font-size:clamp(15px,1.4vw,18.5px); color:var(--muted);margin-bottom:34px; } /* A hairline above the eyebrow gives the centred block something to sit against, so it reads as composed rather than merely floating. */ .hero-inner:before{ content:"";width:52px;height:1px;background:var(--brass); margin-bottom:26px;opacity:.8; } .scroll-cue{ position:absolute;z-index:2;bottom:26px;left:50%;transform:translateX(-50%); width:1px;height:48px;background:var(--line2);overflow:hidden; } .scroll-cue span{display:block;width:100%;height:40%;background:var(--brass);animation:cue 2.4s cubic-bezier(.7,0,.3,1) infinite} @keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}} /* ── cards 02-04 · split ──────────────────────────────────────────── */ .card-split{display:grid;grid-template-columns:1fr 1fr} .card-split.reverse .split-media{order:2} .split-media{position:relative;overflow:hidden;background:var(--ink)} .split-media img{width:100%;height:100%;object-fit:cover} .split-copy{ display:flex;flex-direction:column;justify-content:center; padding:clamp(32px,5.4vw,86px);background:var(--paper2); } .split-copy h2{font-size:clamp(28px,3.7vw,52px);margin-bottom:18px} .split-copy p{max-width:44ch;color:var(--muted);font-size:clamp(14.5px,1.1vw,17px)} /* ── cards 05-06 · plain ──────────────────────────────────────────── */ .card-plain{display:grid;place-items:center;background:var(--paper)} .card-plain.alt{background:var(--paper2)} .card-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(28px,5svh,64px) var(--pad)} .card-plain h2{font-size:clamp(28px,4vw,54px);margin-bottom:clamp(28px,4.5svh,56px)} .svc-list{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;background:var(--line);border-block:1px solid var(--line); } .svc{background:var(--paper);padding:clamp(20px,2.6vw,34px)} .card-plain.alt .svc{background:var(--paper2)} .svc h3{font-size:clamp(21px,2.2vw,30px);margin-bottom:9px} .svc p{color:var(--muted);max-width:40ch;font-size:14.5px;line-height:1.55} .area{margin-top:24px;color:var(--muted);font-size:14.5px} .area strong{color:var(--ink);font-weight:500} .work-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} /* Each slot is a real