/* ========================================================================== AF WoodWorker — homepage Concept: The Shop Drawing. Plan: PLAN.md Mobile-first; every breakpoint is min-width. Motion primitives M1–M8 live in §5. Nothing animates outside them (C2). The whole palette lives in §1, including an rgb triplet for every translucent value. Re-theming is that one block and nothing else. ========================================================================== */ /* ─── §1 TOKENS ─────────────────────────────────────────────────────────── */ :root{ /* The page ships its own dark treatment. Declaring it stops Chrome and Samsung Internet from force-inverting the page when the phone is in dark mode — which is what was turning the bone logo black. */ color-scheme:dark; /* the mark is always white, on every ground, in every colour scheme */ --logo-fg:#EFEAE1; /* raw palette — WALNUT & BONE */ --basalt:#14120F; --ink:#1D1A15; --sunk:#100E0C; --bone:#EFEAE1; --bone-deep:#E2DACD; --bone-sunk:#E7DFD2; --oak:#B08A5E; --oak-lt:#C9A87E; --walnut:#73593D; --walnut-dk:#523F29; --greige:#C3B6AB; --muted:#9A9186; --muted-ink:#5A5348; /* semantic — dark ground is the default */ --bg:var(--basalt); --bg-up:var(--ink); --bg-dn:var(--sunk); --fg:var(--bone); --fg-2:var(--greige); --fg-3:var(--muted); --acc:var(--oak); --acc-2:var(--oak-lt); --on-acc:var(--basalt); --rule:rgba(185,196,192,.16); --rule-2:rgba(185,196,192,.34); --grid:rgba(185,196,192,.07); --draw-1:rgba(236,232,224,.80); --draw-2:rgba(185,196,192,.30); --draw-3:var(--oak); --veil-1:rgba(16,14,12,.95); --veil-2:rgba(16,14,12,.76); --veil-3:rgba(16,14,12,.30); --veil-4:rgba(16,14,12,.62); --menu-bg:rgba(16,14,12,.985); --img-filter:saturate(.92) contrast(1.03); /* rgb triplets, so every translucent value in the sheet is themeable too */ --shade-rgb:16,14,12; --up-rgb:20,18,15; --acc-rgb:176,138,94; --fg-rgb:239,234,225; --line-rgb:185,196,192; --f-d:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --f-t:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif; /* The annotation face. Not a monospace: monospace is a CODE convention, while a real shop drawing is lettered in condensed gothic. This is the same Archivo already loaded for the headlines, at a narrow width — so the site carries two font families, not three. */ --f-m:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --a-w:72; /* wdth axis, via font-stretch */ --ls:.03em; /* tracking — measured floor before glyphs collide */ --ls-sm:.02em; /* the tighter labels */ --fs-hero:clamp(2.55rem,9.4vw,6.6rem); --fs-h2:clamp(1.85rem,4.6vw,3.5rem); --fs-h3:clamp(1.06rem,2.6vw,1.42rem); --fs-lead:clamp(1rem,2.4vw,1.16rem); --fs-lab:.6875rem; --wrap:min(1400px,calc(100% - 2.4rem)); --pad:clamp(4.5rem,10vw,8.5rem); --e-out:cubic-bezier(.16,1,.30,1); --e-in:cubic-bezier(.7,0,.84,0); --t1:200ms; --t2:380ms; --t3:900ms; --hdr:64px; } @media(min-width:768px){ :root{ --wrap:min(1400px,calc(100% - 7vw)); --hdr:76px; } } [data-surface="paper"]{ --bg:var(--bone); --bg-up:var(--bone-deep); --bg-dn:var(--bone-sunk); --fg:var(--basalt); --fg-2:var(--muted-ink); --fg-3:var(--muted-ink); --acc:var(--walnut); --acc-2:var(--walnut-dk); --on-acc:var(--bone); --rule:rgba(20,18,15,.16); --rule-2:rgba(20,18,15,.30); --grid:rgba(20,18,15,.06); --draw-1:rgba(20,18,15,.78); --draw-2:rgba(20,18,15,.26); --draw-3:var(--walnut); } /* ─── §2 BASE ───────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 12px);-webkit-text-size-adjust:100%;} body{ margin:0;background:var(--basalt);color:var(--bone); font-family:var(--f-t);font-size:1rem;line-height:1.68;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; } body.is-locked{overflow:hidden;} img,svg,video{display:block;max-width:100%;} img{height:auto;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;} h1,h2,h3,p,dl,dd,figure,ol,ul{margin:0;padding:0;} ol,ul{list-style:none;} .sprite{position:absolute;width:0;height:0;overflow:hidden;} .wrap{width:var(--wrap);margin-inline:auto;} .sec{position:relative;background:var(--bg);color:var(--fg);padding:var(--pad) 0;} .skip{position:absolute;left:-9999px;z-index:400;background:var(--acc);color:var(--on-acc);padding:.8rem 1.1rem;min-height:44px;display:flex;align-items:center;font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.75rem;} .skip:focus{left:1rem;top:1rem;} :where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--acc);outline-offset:3px;} /* ─── §3 TYPE ───────────────────────────────────────────────────────────── */ .t-hero{font-family:var(--f-d);font-size:var(--fs-hero);font-variation-settings:"wdth" 80,"wght" 700; letter-spacing:-.045em;line-height:.94;margin:0;} .t-h2{font-family:var(--f-d);font-size:var(--fs-h2);font-variation-settings:"wdth" 92,"wght" 650; letter-spacing:-.03em;line-height:1.04;text-wrap:balance;} .t-h3{font-family:var(--f-t);font-size:var(--fs-h3);font-weight:600;letter-spacing:-.012em;line-height:1.3;text-wrap:balance;} .t-lead{font-size:var(--fs-lead);line-height:1.66;color:var(--fg-2);max-width:56ch;text-wrap:pretty;} p{text-wrap:pretty;} .lab{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:var(--fs-lab);font-weight:500;text-transform:uppercase; letter-spacing:var(--ls);color:var(--fg-3);} .kick{display:flex;align-items:center;gap:.85rem;font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:var(--fs-lab); font-weight:500;text-transform:uppercase;letter-spacing:var(--ls);color:var(--fg-2);margin-bottom:1.3rem;} .kick__l{display:block;width:clamp(24px,6vw,58px);height:1px;background:var(--acc);flex:none;} /* ─── §4 DRAWING VOCABULARY ─────────────────────────────────────────────── */ .plan-grid{background-image: repeating-linear-gradient(to right,var(--grid) 0 1px,transparent 1px 84px), repeating-linear-gradient(to bottom,var(--grid) 0 1px,transparent 1px 84px);} .e-thin,.e-body,.e-dim{fill:none;stroke-linecap:square;stroke-linejoin:miter;} .e-thin{stroke:var(--draw-2);stroke-width:2;} .e-body{stroke:var(--draw-1);stroke-width:3;} .e-dim{stroke:var(--draw-3);stroke-width:1.5;} .e-txt{stroke:none;} .e-txt text{fill:var(--draw-3);font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:26px;letter-spacing:1px;} .e-fill{stroke:none;} .e-grp{transition:opacity var(--t2);} .e-grp .e-body{transition:stroke var(--t2);} .elev.has-focus .e-grp{opacity:.55;} .elev.has-focus .e-grp.is-lit{opacity:1;} .elev .e-grp.is-lit .e-body{stroke:var(--acc);} /* the brand mark is a mask so one file serves every colour on every ground */ .lockup__m,.ftr__badge{ display:block;background:var(--logo-fg); forced-color-adjust:none; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; } .lockup__m{width:38px;height:38px;flex:none; -webkit-mask-image:url("../brand/af-arc.svg");mask-image:url("../brand/af-arc.svg");} .ftr__badge{width:clamp(52px,7vw,68px);height:clamp(52px,7vw,68px); -webkit-mask-image:url("../brand/af-badge.svg");mask-image:url("../brand/af-badge.svg");} @supports not ((-webkit-mask-image:url("#m")) or (mask-image:url("#m"))){ .lockup__m,.ftr__badge{background:none;} .lockup__m{background:url("../logo-white.png") center/contain no-repeat;} .ftr__badge{background:url("../logo-white.png") center/contain no-repeat;} } /* section mark */ .mark{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;margin-bottom:2rem;} .mark__n{position:relative;display:grid;place-items:center;width:48px;height:48px;flex:none;} .mark__n svg{position:absolute;inset:0;width:100%;height:100%;} .mark__n b{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.72rem;font-weight:500;letter-spacing:var(--ls-sm);color:var(--acc);} .nbox{fill:none;stroke:var(--rule-2);stroke-width:1;} .mark__t b{display:block;font-family:var(--f-t);font-size:.86rem;font-weight:600;letter-spacing:.02em;} .mark__t i{display:block;font-style:normal;font-size:.8rem;color:var(--fg-3);margin-top:.1rem;} /* title block */ .tblk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--rule-2);} .tblk > div{padding:.6rem .75rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);} .tblk > div:nth-child(2n){border-right:0;} .tblk > div:nth-last-child(-n+2){border-bottom:0;} .tblk > div:last-child:nth-child(odd){grid-column:1/-1;border-right:0;} .tblk dt{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.55rem;letter-spacing:var(--ls);text-transform:uppercase;color:var(--fg-3);} .tblk dd{margin:.25rem 0 0;font-size:.82rem;font-weight:500;} @media(min-width:640px){ .tblk{grid-template-columns:repeat(3,minmax(0,1fr));} .tblk > div{border-bottom:0;} .tblk > div:nth-child(2n){border-right:1px solid var(--rule);} .tblk > div:last-child{border-right:0;} .tblk > div:last-child:nth-child(odd){grid-column:auto;} .tblk--4,.tblk--row{grid-template-columns:repeat(4,minmax(0,1fr));} } .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.4rem;min-height:48px; font-family:var(--f-t);font-size:.82rem;font-weight:600;letter-spacing:.02em; border:1px solid var(--rule-2);transition:border-color var(--t1),color var(--t1),background var(--t1);} .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none;} .btn--line:hover{border-color:var(--acc);color:var(--acc-2);} /* ─── §4b SHEET BREAK — the divider between sections ──────────────────── Each section opens with the top edge of a new drawing sheet: a hairline that draws out from the centre, the sheet number on the left, the sheet title on the right, and a corner tick at each end. It carries the incoming section's own surface tokens, so the two grounds meet on a drawn line rather than a raw colour change. */ .brk{position:absolute;inset:0 0 auto;height:var(--pad); display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem; width:var(--wrap);margin-inline:auto;padding-top:clamp(1.1rem,2.4vw,1.9rem); align-content:start;pointer-events:none;} .brk__n,.brk__t{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.58rem;font-weight:500;text-transform:uppercase; letter-spacing:var(--ls);color:var(--fg-3);opacity:0;transition:opacity 700ms var(--e-out) 260ms;} .brk__t{text-align:right;color:var(--acc);} .brk__r{position:relative;display:block;height:9px;} .brk__r::before,.brk__r::after{content:"";position:absolute;top:0;width:1px;height:9px;background:var(--rule-2); transform:scaleY(0);transition:transform 420ms var(--e-out) 620ms;} .brk__r::before{left:0;transform-origin:top;} .brk__r::after{right:0;transform-origin:top;} .brk__r i{position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule-2); transform:scaleX(0);transform-origin:center;transition:transform 1100ms var(--e-out);} .brk.is-in .brk__r i{transform:scaleX(1);} .brk.is-in .brk__r::before,.brk.is-in .brk__r::after{transform:scaleY(1);} .brk.is-in .brk__n,.brk.is-in .brk__t{opacity:1;} @media(max-width:560px){.brk__t{display:none;}.brk{grid-template-columns:auto 1fr;}} /* ─── §5 MOTION PRIMITIVES M1–M8 ──────────────────────────────────────── */ /* M1 rule-draw */ .m1{transform:scaleX(0);transform-origin:left center;} .m1.is-in{transform:scaleX(1);transition:transform 900ms var(--e-out);} /* M2 box-draw */ .nbox{stroke-dasharray:200;stroke-dashoffset:200;} .is-in .nbox,.mark.is-in .nbox,.pn.is-in .nbox{stroke-dashoffset:0;transition:stroke-dashoffset 950ms var(--e-out);} .mark__n b,.pn b{opacity:0;transition:opacity 420ms var(--e-out) 620ms;} .mark.is-in .mark__n b,.pn.is-in b{opacity:1;} /* M3 mask-rise */ .mask{display:block;} .mask > span{display:block;overflow:hidden;} .mask > span > span{display:block;transform:translateY(106%);} .mask.is-in > span > span{transform:translateY(0);transition:transform 1050ms var(--e-out);} .mask.is-in > span:nth-child(2) > span{transition-delay:100ms;} .mask.is-in > span:nth-child(3) > span{transition-delay:200ms;} /* M4 plate-in */ .m4{clip-path:inset(0 100% 0 0);} .m4 img,.m4 video{transform:scale(1.06);transition:transform 1800ms var(--e-out);} .m4.is-in,.is-in .m4{clip-path:inset(0 0 0 0);transition:clip-path 1300ms var(--e-out);} .m4.is-in img,.m4.is-in video,.is-in .m4 img,.is-in .m4 video{transform:scale(1);} /* M5 glide-underline */ .uline{position:relative;padding-bottom:.7rem;} .uline::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:min(190px,44%); background:linear-gradient(90deg,var(--acc),currentColor 60%,transparent); transform:scaleX(0);transform-origin:left center;} .uline::before{content:"";position:absolute;left:0;bottom:-1.5px;width:16px;height:4px;background:var(--acc);opacity:0;} .is-in .uline::after,.uline.is-in::after{transform:scaleX(1);transition:transform 1200ms var(--e-out) 220ms;} .is-in .uline::before,.uline.is-in::before{animation:glide 1.8s var(--e-out) .5s both;} @keyframes glide{0%{opacity:1;transform:translateX(0)}92%{opacity:1}100%{opacity:0;transform:translateX(180px)}} /* generic reveal */ [data-rv]{opacity:0;transform:translateY(22px);} [data-rv].is-in{opacity:1;transform:none;transition:opacity var(--t3) var(--e-out),transform var(--t3) var(--e-out);} [data-rv].is-out{opacity:.55;transform:translateY(10px);transition:opacity 300ms var(--e-in),transform 300ms var(--e-in);} .no-gsap [data-rv]{opacity:1;transform:none;} /* ─── §6 HEADER ─────────────────────────────────────────────────────────── */ .hdr{position:fixed;inset:0 0 auto;z-index:200;border-bottom:1px solid transparent; transition:background var(--t2),border-color var(--t2),backdrop-filter var(--t2),transform 500ms var(--e-out);} /* Inner pages carry a veil rather than a panel until you scroll: enough to keep the bone logo legible over a photograph, light enough that the banner still reads as the top of the page. */ .hdr.is-solid{background:rgba(var(--up-rgb),.34);backdrop-filter:blur(7px) saturate(1.05);} .hdr.is-stuck{background:rgba(var(--up-rgb),.90);border-bottom-color:var(--rule);backdrop-filter:blur(14px) saturate(1.1);} .hdr.is-away{transform:translateY(-102%);} .hdr__in{width:var(--wrap);margin-inline:auto;min-height:var(--hdr); display:flex;align-items:center;justify-content:space-between;gap:1rem;} /* The bar splits in two: .hdr__row is everything the search takes over, .hdr__end is the controls that stay put while it does. */ .hdr__row{display:flex;align-items:center;gap:clamp(1.2rem,4vw,3rem);min-width:0; transition:opacity 260ms var(--e-out),transform 380ms var(--e-out),visibility 0s linear 0s;} .hdr__end{display:flex;align-items:center;gap:.35rem;flex:none;} @media(min-width:1080px){.hdr__end{gap:.9rem;}} .hdr.is-searching .hdr__row{opacity:0;visibility:hidden;transform:translateX(-14px); transition:opacity 200ms var(--e-in),transform 320ms var(--e-out),visibility 0s linear 200ms;} .hdr.is-searching .hdr__cta,.hdr.is-searching .burger{opacity:0;visibility:hidden; transition:opacity 180ms var(--e-in),visibility 0s linear 180ms;} .lockup{display:flex;align-items:center;gap:.7rem;color:var(--bone);min-height:44px;} .lockup__t b{display:block;font-family:var(--f-d);font-size:.78rem; font-variation-settings:"wdth" 105,"wght" 650;letter-spacing:.11em;text-transform:uppercase;line-height:1.2;} .lockup__t i{display:none;font-style:normal;font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.55rem; letter-spacing:var(--ls-sm);text-transform:uppercase;color:var(--muted);margin-top:.15rem;} @media(min-width:560px){.lockup__t i{display:block;}} /* desktop nav — index + label, with a rule that draws on hover */ .nav{display:none;align-items:center;gap:2rem;} /* Centred on the bar itself, not in the space left over beside the lockup. It is absolute against .hdr__in, so the lockup and the right-hand controls can be any width without pushing the nav off centre — and it still lives inside .hdr__row, so the search takeover hides it with everything else. */ @media(min-width:1080px){ .nav{display:flex;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); white-space:nowrap;} } /* Each item is a group now: the label navigates, the chevron drops the panel. Hover opens it on a fine pointer; the chevron covers keyboard and touch, so there is no interaction here that a finger cannot reach (C4). */ .nav__i{position:relative;display:flex;align-items:baseline;gap:.25rem;} .nav a{position:relative;display:flex;align-items:baseline;gap:.45rem;padding-bottom:.3rem;color:var(--greige); transition:color var(--t1);} .nav__c{display:none;align-items:center;justify-content:center;width:22px;height:22px; align-self:center;background:none;border:0;padding:0;cursor:pointer;color:var(--muted); transition:color var(--t1),transform 320ms var(--e-out);} @media(min-width:1080px){.nav__c{display:flex;}} .nav__c svg{width:11px;height:11px;} .nav__i:hover .nav__c,.nav__c:hover,.nav__c:focus-visible{color:var(--oak);} .nav__c[aria-expanded="true"]{color:var(--acc);transform:rotate(180deg);} /* The panel is always dark — it can open over a paper page, so it carries its own tokens rather than inheriting that surface's near-black text. */ .nav__d{ --fg:var(--bone); --fg-2:var(--greige); --fg-3:var(--muted); --acc:var(--oak); --acc-2:var(--oak-lt); --rule:rgba(185,196,192,.16); --rule-2:rgba(185,196,192,.34); position:absolute;top:calc(100% + .85rem);left:-1.1rem;z-index:210; min-width:236px;padding:1rem 1.1rem .75rem; background:rgba(var(--shade-rgb),.985);backdrop-filter:blur(18px) saturate(1.1); border:1px solid var(--rule-2); display:grid;gap:.1rem; opacity:0;transform:translateY(-7px);pointer-events:none; transition:opacity 240ms var(--e-out),transform 300ms var(--e-out);} .nav__d[hidden]{display:none;} /* Never taller than the space under the bar; a long list scrolls inside itself rather than running off the screen on a short window. */ .nav__d{max-height:calc(100dvh - var(--hdr) - 2.5rem);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;} /* A list this long reads better in two columns than as one tall ribbon. */ .nav__d--wide{min-width:430px;grid-template-columns:1fr 1fr;column-gap:1.4rem;} .nav__d--wide .nav__dk{grid-column:1/-1;} .nav__d.is-open{opacity:1;transform:none;pointer-events:auto;} /* a hairline gap-bridge, so the pointer can travel from label to panel */ .nav__d::before{content:"";position:absolute;left:0;right:0;top:-.85rem;height:.85rem;} /* Ticks sit ON the edge, not 1px outside it — hanging them over the border box pushed scrollHeight past clientHeight by exactly 1px, which was enough to raise both scrollbars on a panel whose content fits comfortably. */ .nav__fr b{position:absolute;width:9px;height:9px;border:0 solid var(--acc);opacity:.85;} .nav__fr b:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px;} .nav__fr b:nth-child(2){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px;} .nav__dk{display:block;color:var(--acc);margin-bottom:.5rem;} .nav__d a{position:relative;display:flex;align-items:center;min-height:40px; padding:.3rem 0 .3rem 1.15rem;color:var(--fg-2); font-family:var(--f-t);font-size:.88rem;font-weight:500;letter-spacing:0; transition:color var(--t1),padding-left var(--t1);} .nav__d a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px; background:var(--rule-2);transition:width var(--t1),background var(--t1);} .nav__d a:hover,.nav__d a:focus-visible{color:var(--oak-lt);padding-left:1.4rem;} .nav__d a:hover::before,.nav__d a:focus-visible::before{width:13px;background:var(--acc);} .nav__d a[aria-current="page"]{color:var(--acc-2);} .nav__d a[aria-current="page"]::before{width:13px;background:var(--acc);} .nav__d a::after{display:none;} /* the .nav a underline must not follow it in */ @media(prefers-reduced-motion:reduce){.nav__d{transition:opacity 1ms;transform:none;}} .nav a em{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-style:normal;font-size:.56rem;letter-spacing:var(--ls-sm);color:var(--muted); transition:color var(--t1);} .nav a span{font-family:var(--f-t);font-size:.85rem;font-weight:500;} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--acc); transform:scaleX(0);transform-origin:right;transition:transform 420ms var(--e-out);} .nav a:hover{color:var(--bone);} .nav a:hover em{color:var(--oak);} .nav a[aria-current="page"]{color:var(--acc-2);} .nav a[aria-current="page"] span{font-weight:700;} .nav a[aria-current="page"] em{color:var(--acc);} .nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;background:var(--acc);} .nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left;} .hdr__cta{display:none;align-items:center;gap:.5rem;border:1px solid var(--rule-2);padding:.62rem 1.05rem; font-family:var(--f-t);font-size:.82rem;font-weight:600;color:var(--bone); transition:border-color var(--t1),background var(--t1);} @media(min-width:1080px){.hdr__cta{display:inline-flex;}} .hdr__cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform var(--t1);} .hdr__cta:hover{border-color:var(--acc);background:rgba(var(--acc-rgb),.14);} .hdr__cta:hover svg{transform:translateX(3px);} /* burger — label + two rules that become an X */ .burger{display:flex;align-items:center;gap:.6rem;padding:10px 2px;min-height:44px;color:var(--bone);} @media(min-width:1080px){.burger{display:none;}} .burger__l{display:grid;gap:6px;width:26px;} .burger__l i{display:block;height:1.5px;background:currentColor;transform-origin:center; transition:transform 460ms var(--e-out),width 460ms var(--e-out);} .burger__l i:last-child{width:17px;margin-left:auto;} .burger__t{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls);} .burger[aria-expanded="true"] .burger__l i:first-child{transform:translateY(3.75px) rotate(45deg);} .burger[aria-expanded="true"] .burger__l i:last-child{width:26px;transform:translateY(-3.75px) rotate(-45deg);} /* ─── §6b FULL-SCREEN MENU ──────────────────────────────────────────────── */ .menu{position:fixed;inset:0;z-index:190;background:var(--menu-bg);backdrop-filter:blur(20px) saturate(1.1); clip-path:inset(0 0 100% 0);transition:clip-path 720ms var(--e-out); display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;} .menu[hidden]{display:none;} .menu.is-open{clip-path:inset(0 0 0 0);} .menu__grid{position:absolute;inset:0;pointer-events:none;--grid:rgba(var(--line-rgb),.06);} .menu__in{position:relative;width:var(--wrap);margin-inline:auto; padding:calc(var(--hdr) + 2rem) 0 2.5rem;display:flex;flex-direction:column;gap:2rem;min-height:100%;} .menu__k{opacity:0;transform:translateY(10px);} .menu.is-open .menu__k{opacity:1;transform:none;transition:opacity 500ms var(--e-out) 220ms,transform 500ms var(--e-out) 220ms;} .menu__nav{display:grid;} /* A row is a group now, not a bare link: the label navigates, the toggle opens the children. Two targets, so tapping the word never expands something the reader wanted to go to. */ .menu__grp{position:relative;} .menu__hd{position:relative;display:flex;align-items:baseline;gap:1rem;} .menu__a{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:1rem; padding:.75rem 0;color:var(--bone);flex:1;min-width:0;} .menu__nav em{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-style:normal;font-size:.6rem;letter-spacing:var(--ls);color:var(--muted); transition:color var(--t1);} .menu__w{display:block;overflow:hidden;} .menu__w b{display:block;font-family:var(--f-d);font-size:clamp(1.5rem,6.6vw,2.5rem); font-variation-settings:"wdth" 88,"wght" 650;letter-spacing:-.03em;line-height:1.08; transform:translateY(108%);transition:transform 760ms var(--e-out),color var(--t1);} .menu__r{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule); transform:scaleX(0);transform-origin:left;transition:transform 700ms var(--e-out);} .menu.is-open .menu__w b{transform:translateY(0);} .menu.is-open .menu__r{transform:scaleX(1);} .menu.is-open .menu__grp:nth-child(1) .menu__w b,.menu.is-open .menu__grp:nth-child(1) .menu__r{transition-delay:200ms} .menu.is-open .menu__grp:nth-child(2) .menu__w b,.menu.is-open .menu__grp:nth-child(2) .menu__r{transition-delay:265ms} .menu.is-open .menu__grp:nth-child(3) .menu__w b,.menu.is-open .menu__grp:nth-child(3) .menu__r{transition-delay:330ms} .menu.is-open .menu__grp:nth-child(4) .menu__w b,.menu.is-open .menu__grp:nth-child(4) .menu__r{transition-delay:395ms} .menu.is-open .menu__grp:nth-child(5) .menu__w b,.menu.is-open .menu__grp:nth-child(5) .menu__r{transition-delay:460ms} .menu.is-open .menu__grp:nth-child(6) .menu__w b,.menu.is-open .menu__grp:nth-child(6) .menu__r{transition-delay:525ms} .menu.is-open .menu__grp:nth-child(7) .menu__w b,.menu.is-open .menu__grp:nth-child(7) .menu__r{transition-delay:590ms} .menu.is-open .menu__grp:nth-child(8) .menu__w b,.menu.is-open .menu__grp:nth-child(8) .menu__r{transition-delay:655ms} /* the toggle: a plus that becomes a minus (M2's square, halved) */ /* Revealed with opacity only. A scale-in shrank the box to 35px for the first second the panel was open — a 44px control that is briefly 35px is still a 35px target for anyone who reaches it in that second (R3). */ .menu__t{flex:none;width:44px;height:44px;display:grid;place-items:center;align-self:center; border:1px solid var(--rule);color:var(--greige);background:none;cursor:pointer; transition:border-color var(--t1),color var(--t1),background var(--t1); opacity:0;} .menu.is-open .menu__t{opacity:1; transition:opacity 420ms var(--e-out) 560ms, border-color var(--t1),color var(--t1),background var(--t1);} .menu__t i{grid-area:1/1;display:block;width:13px;height:1.5px;background:currentColor; transition:transform 380ms var(--e-out);} .menu__t i:last-child{transform:rotate(90deg);} .menu__t[aria-expanded="true"]{border-color:var(--acc);color:var(--acc);background:rgba(var(--acc-rgb),.10);} .menu__t[aria-expanded="true"] i:last-child{transform:rotate(0);} .menu__t:hover,.menu__t:focus-visible{border-color:var(--acc);color:var(--acc);} /* Children. The 0fr→1fr grid trick collapsed the drawer to a single line here: .menu__sub's block size is indefinite, so the 1fr track resolved against zero free space instead of the content. Height is measured in JS and set in pixels — not a guessed max-height, the real scrollHeight — then released to auto. */ .menu__sub{display:block;overflow:hidden;height:0; transition:height 440ms var(--e-out);} .menu__sub[hidden]{display:none;} .menu__subin{display:grid;padding-block:.3rem .9rem;} @media(prefers-reduced-motion:reduce){.menu__sub{transition:none;}} .menu__sub a{display:flex;align-items:center;gap:.7rem;min-height:44px;padding:.35rem 0 .35rem 2.1rem; color:var(--fg-2);font-family:var(--f-t);font-size:clamp(.94rem,2.4vw,1.05rem);font-weight:500; position:relative;transition:color var(--t1),padding-left var(--t1);} .menu__sub a::before{content:"";position:absolute;left:.55rem;top:50%;width:10px;height:1px; background:var(--rule-2);transition:width var(--t1),background var(--t1);} .menu__sub a:hover,.menu__sub a:focus-visible{color:var(--oak-lt);padding-left:2.4rem;} .menu__sub a:hover::before,.menu__sub a:focus-visible::before{width:16px;background:var(--acc);} .menu__sub a[aria-current="page"]{color:var(--acc-2);} .menu__sub a[aria-current="page"]::before{background:var(--acc);width:16px;} .menu__a:hover .menu__w b,.menu__a:focus-visible .menu__w b{color:var(--oak-lt);} .menu__a:hover em{color:var(--oak);} .menu__a[aria-current="page"] .menu__w b{color:var(--acc-2);} .menu__a[aria-current="page"] em{color:var(--acc);} /* The call to action, in the panel. It rides the same staggered reveal as the rows above it, one beat later, so it arrives as the last thing you read rather than sitting there while the list is still drawing itself in. */ .menu__cta{display:flex;align-items:center;justify-content:space-between;gap:1rem; margin-top:clamp(1.4rem,3vw,2.2rem);padding:1.05rem 1.2rem;min-height:60px; border:1px solid var(--acc);background:rgba(var(--acc-rgb),.12);color:var(--oak-lt); opacity:0;transform:translateY(14px); transition:opacity 520ms var(--e-out),transform 520ms var(--e-out), background var(--t1),border-color var(--t1);} .menu.is-open .menu__cta{opacity:1;transform:none;transition-delay:600ms;} .menu__cta__t{font-family:var(--f-d);font-variation-settings:"wdth" 92,"wght" 650; font-size:clamp(1.05rem,3.4vw,1.3rem);letter-spacing:-.02em;} .menu__cta svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor; stroke-width:1.6;transition:transform var(--t1);} .menu__cta:hover,.menu__cta:focus-visible{background:rgba(var(--acc-rgb),.2); border-color:var(--acc-2);color:var(--bone);} .menu__cta:hover svg,.menu__cta:focus-visible svg{transform:translateX(4px);} /* Above 1080px the bar already carries this control, so the panel does not need a second copy of it. */ @media(min-width:1080px){.menu__cta{display:none;}} @media(prefers-reduced-motion:reduce){ .menu__cta{opacity:1;transform:none;transition:background var(--t1),border-color var(--t1);} } .menu__foot{margin-top:auto;padding-top:1.8rem;border-top:1px solid var(--rule); display:grid;gap:1.1rem;opacity:0;transform:translateY(14px);} .menu.is-open .menu__foot{opacity:1;transform:none;transition:opacity 620ms var(--e-out) 720ms,transform 620ms var(--e-out) 720ms;} @media(min-width:700px){.menu__foot{grid-template-columns:repeat(3,auto);gap:2.5rem;align-items:end;} .menu__addr{grid-column:1/-1;}} .menu__c{display:grid;gap:.2rem;min-height:44px;} .menu__c b{font-family:var(--f-t);font-size:.94rem;font-weight:600;color:var(--oak-lt);} .menu__addr{margin:0;} /* ─── §7 HERO ───────────────────────────────────────────────────────────── */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end; padding:calc(var(--hdr) + 2.5rem) 0 5.5rem;overflow:hidden;} @media(min-width:768px){.hero{padding-bottom:4.5rem;}} .hero__stage{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 50%;} .hslide{position:absolute;inset:0;opacity:0;transition:opacity 1000ms var(--e-out);} .hslide.is-on{opacity:1;} /* outer layer: pointer parallax (JS-set). inner layer: the automatic 3D drift. */ .hslide__m{position:absolute;inset:-4%;overflow:hidden;transform-style:preserve-3d; transform:translate3d(calc(var(--px,0) * 1%),calc(var(--py,0) * .6%),0); transition:transform 900ms cubic-bezier(.22,.61,.36,1);} .hslide__m img{width:100%;height:100%;object-fit:cover;object-position:center 58%; filter:var(--img-filter);transform:scale(1.14);will-change:transform;} .hslide.is-on .hslide__m img{animation:drift 13s var(--e-out) forwards;} .hslide.is-on:nth-child(2n) .hslide__m img{animation-name:driftAlt;} @keyframes drift{ 0% {transform:perspective(1400px) rotateY(2.2deg) translate3d(3.4%,-.6%,0) scale(1.17)} 100% {transform:perspective(1400px) rotateY(-1.8deg) translate3d(-3%,.6%,0) scale(1.045)} } @keyframes driftAlt{ 0% {transform:perspective(1400px) rotateY(-2.2deg) translate3d(-3.4%,.6%,0) scale(1.17)} 100% {transform:perspective(1400px) rotateY(1.8deg) translate3d(3%,-.6%,0) scale(1.045)} } .hero__grid{position:absolute;inset:0;} .hero__veil{position:absolute;inset:0;background: linear-gradient(to top,var(--veil-1) 0%,var(--veil-2) 32%,var(--veil-3) 64%,var(--veil-4) 100%), radial-gradient(130% 80% at 18% 92%,var(--veil-4),transparent 62%);} .hero__body{position:relative;z-index:2;display:grid;} .hcopy{grid-area:1/1;opacity:0;pointer-events:none;visibility:hidden; transition:opacity 600ms var(--e-out),visibility 0s 600ms;} .hcopy.is-on{opacity:1;pointer-events:auto;visibility:visible;transition:opacity 700ms var(--e-out) 220ms,visibility 0s;} .hcopy .t-lead{color:var(--greige);margin-top:1.4rem;max-width:46ch;} .hcopy .tblk{margin-top:1.8rem;max-width:520px;} @media(min-width:980px){ .hcopy{display:grid;grid-template-columns:1.45fr auto;grid-template-areas:"k k" "h h" "l t"; gap:0 3.5rem;align-items:end;} .hcopy .kick{grid-area:k;} .hcopy .t-hero{grid-area:h;} .hcopy .t-lead{grid-area:l;padding-top:1.8rem;border-top:1px solid var(--rule);margin-top:2.2rem;} .hcopy .tblk{grid-area:t;margin-top:2.2rem;min-width:340px;} } .hnav{position:absolute;z-index:3;right:1.2rem;bottom:1.2rem;display:flex;gap:.6rem;} @media(min-width:980px){ .hnav{left:0;right:0;bottom:auto;top:50%;transform:translateY(-50%); justify-content:space-between;padding:0 1.4rem;pointer-events:none;} .hnav > *{pointer-events:auto;} } .harw{position:relative;width:56px;height:56px;display:grid;place-items:center; border:1px solid var(--rule-2);color:var(--bone);overflow:hidden; background:rgba(var(--shade-rgb),.42);backdrop-filter:blur(4px);transition:border-color var(--t2);} @media(min-width:980px){.harw{width:72px;height:72px;}} .harw svg{position:relative;z-index:2;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;} .harw__f{position:absolute;inset:0;background-size:cover;background-position:center; opacity:.55;clip-path:inset(0 0 0 0);transition:opacity var(--t2),clip-path 620ms var(--e-out);} @media(min-width:980px){ #hPrev .harw__f{clip-path:inset(0 100% 0 0);} #hNext .harw__f{clip-path:inset(0 0 0 100%);} .harw__f{opacity:0;} .harw:hover .harw__f,.harw:focus-visible .harw__f{opacity:.72;clip-path:inset(0 0 0 0);} .harw:hover{border-color:var(--acc);} } .hprog{position:absolute;z-index:3;left:1.2rem;bottom:1.6rem;display:flex;gap:.5rem;width:120px;} @media(min-width:768px){.hprog{left:3.5vw;width:180px;}} .hprog i{flex:1;height:2px;background:rgba(var(--fg-rgb),.24);overflow:hidden;} .hprog i::after{content:"";display:block;height:100%;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;} .hprog i.is-done::after{transform:scaleX(1);} .hprog i.is-live::after{animation:prog 9s linear forwards;} @keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ─── §8 RIBBON — desktop only ──────────────────────────────────────────── */ .ribbon{display:none;background:var(--ink);border-block:1px solid var(--rule);padding:1rem 0;} @media(min-width:900px){.ribbon{display:block;}} .ribbon__in{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;justify-content:space-between; font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.63rem;text-transform:uppercase;letter-spacing:var(--ls);color:var(--muted);} .ribbon__in b{color:var(--oak-lt);font-weight:500;} /* ─── §9 APPROACH + RAIL ────────────────────────────────────────────────── */ .approach__top{display:grid;gap:1.5rem;} @media(min-width:980px){.approach__top{grid-template-columns:1.05fr 1fr;gap:4rem;align-items:start;}} .rail{position:relative;display:grid;gap:2.6rem;margin-top:clamp(3rem,7vw,5.5rem);padding-top:2.5rem;} .rail::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule-2); transform:scaleX(0);transform-origin:left;} .rail.is-in::before{transform:scaleX(1);transition:transform 1300ms var(--e-out);} @media(min-width:820px){.rail{grid-template-columns:repeat(3,1fr);gap:2.4rem;}} .stn{position:relative;padding-top:.4rem;} .stn::before{content:"";position:absolute;left:0;top:-2.5rem;width:9px;height:9px; border:1px solid var(--acc);background:var(--bg);transform:translateY(-4px) scale(0);} .stn.is-in::before{transform:translateY(-4px) scale(1);transition:transform 520ms var(--e-out) 420ms;} .stn__g{width:96px;margin-bottom:1.2rem;} .stn__g svg{width:100%;height:auto;overflow:visible;} .stn__g .dr path{fill:none;stroke:var(--draw-1);stroke-width:2;stroke-linecap:square;} .stn__g .dr path:last-child{stroke:var(--draw-2);} .stn h3{margin-bottom:.55rem;} .stn p{font-size:.9rem;color:var(--fg-2);max-width:38ch;} /* ─── §10 ONE RESOLVED SPACE ────────────────────────────────────────────── */ .resolve__grid{display:grid;gap:clamp(2.2rem,5vw,4rem);} @media(min-width:980px){.resolve__grid{grid-template-columns:.85fr 1.15fr;align-items:center;}} .resolve__bar{margin-top:2.2rem;height:1px;background:var(--rule);position:relative;overflow:hidden;} .resolve__bar i{position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left;} /* The tiles start far outside the frame and are clipped by it, so they read as arriving from off-sheet. An earlier version used an oversized clip box pulled back with negative margins — that pushed the page 52px wide. */ .mosaic{position:relative;} .mosaic__frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-dn);} .mt{position:absolute;left:calc(var(--c) * 25%);top:calc(var(--r) * 33.3333%); width:25.4%;height:33.7%; background-image:var(--mosaic); background-size:400% 300%; background-position:calc(var(--c) * 33.3333%) calc(var(--r) * 50%); will-change:transform,opacity;backface-visibility:hidden;} .mosaic__cap{position:absolute;left:0;bottom:-1.9rem;} /* ─── §11 INSIDE THE BUILD ──────────────────────────────────────────────── */ .build__head{display:grid;gap:1.4rem;margin-bottom:clamp(2rem,4vw,3.2rem);} @media(min-width:980px){.build__head{grid-template-columns:1fr 1fr;gap:4rem;align-items:end;}} .build__grid{display:grid;gap:1.2rem;} @media(min-width:1080px){.build__grid{grid-template-columns:1.6fr 1fr;align-items:start;}} .sheet{border:1px solid var(--rule);background:var(--bg-dn);} .sheet__scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none;} .sheet__scroll::-webkit-scrollbar{display:none;} .sheet__frame{position:relative;width:190%;padding:1rem;} @media(min-width:700px){.sheet__frame{width:130%;}} @media(min-width:1080px){.sheet__frame{width:100%;padding:clamp(1rem,2vw,1.8rem);}} .sheet__frame::before{content:"";position:absolute;inset:0;pointer-events:none;background-image: repeating-linear-gradient(to right,var(--grid) 0 1px,transparent 1px 44px), repeating-linear-gradient(to bottom,var(--grid) 0 1px,transparent 1px 44px);} .elev{width:100%;height:auto;position:relative;} .dr path{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);} .dr.is-drawn path,.is-drawn .dr path,.is-in .dr path,.is-in.dr path{ stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--e-out);} .stn.is-in .dr path:nth-child(2){transition-delay:110ms} .stn.is-in .dr path:nth-child(3){transition-delay:220ms} .stn.is-in .dr path:nth-child(4){transition-delay:330ms} .stn.is-in .dr path:nth-child(5){transition-delay:440ms} .stn.is-in .dr path:nth-child(6){transition-delay:550ms} .cal{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%); width:34px;height:34px;min-width:34px;display:grid;place-items:center;z-index:3; border:1px solid var(--acc);background:var(--bg-dn);color:var(--acc); font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.7rem;scroll-snap-align:center;opacity:0; transition:background var(--t1),color var(--t1),opacity 400ms var(--e-out),transform var(--t1);} .sheet.is-drawn .cal{opacity:1;} .cal::after{content:"";position:absolute;inset:-7px;border:1px solid var(--acc);opacity:0;transform:scale(.8); transition:opacity var(--t2),transform var(--t2);} .cal:hover{transform:translate(-50%,-50%) scale(1.08);} .cal.is-on{background:var(--acc);color:var(--on-acc);} .cal.is-on::after{opacity:.5;transform:scale(1);} .sheet__cap{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between; padding:.8rem 1rem;border-top:1px solid var(--rule);} .sheet__hint{color:var(--acc);} @media(min-width:1080px){.sheet__hint{display:none;}} .spec{border:1px solid var(--rule);background:var(--bg-up);padding:clamp(1.3rem,2.4vw,2rem); display:flex;flex-direction:column;gap:1rem;} .spec__top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding-bottom:.9rem;border-bottom:1px solid var(--rule);} .spec__n{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:1.45rem;font-weight:400;color:var(--acc);line-height:1;} .spec__vis{aspect-ratio:16/10;background:var(--bg-dn);border:1px solid var(--rule);display:grid;place-items:center;padding:.9rem;} .spec__vis svg{width:100%;height:100%;} .spec p{font-size:.9rem;color:var(--fg-2);} .spec__nav{display:flex;align-items:center;justify-content:space-between;gap:1rem; margin-top:auto;padding-top:1rem;border-top:1px solid var(--rule);} .spec__nav button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule-2); transition:border-color var(--t1),color var(--t1);} .spec__nav button:hover{border-color:var(--acc);color:var(--acc);} .spec__nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;} .spec__nav b{color:var(--fg);} .spec__vis,.spec h3,.spec p,.spec__n,.spec__top .lab{transition:opacity var(--t2) var(--e-out);} .spec.is-swap .spec__vis,.spec.is-swap h3,.spec.is-swap p,.spec.is-swap .spec__n,.spec.is-swap .spec__top .lab{opacity:0;} /* ─── §12 SEAM ──────────────────────────────────────────────────────────── */ .seam{background:var(--sunk);position:relative;height:auto;} @media(min-width:901px){.seam{height:280vh;}} .seam__pin{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-top:3rem;} @media(min-width:901px){.seam__pin{position:sticky;top:0;height:100svh;padding-top:0;}} .seam__stage{position:relative;aspect-ratio:4/3;} @media(min-width:901px){.seam__stage{position:absolute;inset:0;aspect-ratio:auto;}} .seam__photo{position:absolute;inset:0;} .seam__photo img{width:100%;height:100%;object-fit:cover;object-position:center 58%;filter:var(--img-filter);} .seam__draw{position:absolute;inset:0;background:var(--sunk);display:grid;place-items:center; padding:clamp(.8rem,4vw,3.5rem);clip-path:inset(0 0 0 0);} .seam__draw svg{width:100%;height:auto;max-height:100%;} .seam__dim{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(.8rem,4vw,3.5rem);pointer-events:none;} .seam__dim svg{width:100%;height:auto;max-height:100%; filter:drop-shadow(0 1px 3px rgba(var(--shade-rgb),.9)) drop-shadow(0 0 12px rgba(var(--shade-rgb),.7));} .seam__dim .e-dim{stroke:var(--oak-lt);} .seam__dim .e-txt text{fill:var(--oak-lt);} .seam__line{position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--acc);opacity:0;z-index:4; box-shadow:0 0 18px 2px rgba(var(--acc-rgb),.55);} .seam__copy{position:relative;z-index:3;padding:clamp(4rem,12vw,9rem) 0 clamp(2rem,6vw,4rem); background:linear-gradient(to top,rgba(var(--shade-rgb),.96) 12%,rgba(var(--shade-rgb),.72) 52%,transparent);} .seam__ar{color:var(--oak);} .t-seam{font-family:var(--f-d);font-size:clamp(1.75rem,5.2vw,3.9rem); font-variation-settings:"wdth" 78,"wght" 700;letter-spacing:-.038em;line-height:1.02; display:grid;gap:.08em;margin:0;text-wrap:balance;} .t-seam span{display:block;} .t-seam__a{color:var(--greige);} .t-seam__b{color:var(--bone);} @media(min-width:901px){ .t-seam__a,.t-seam__b{opacity:.26;transition:opacity 520ms var(--e-out);} .t-seam__a.is-lit,.t-seam__b.is-lit{opacity:1;} } .seam__note{margin-top:1.2rem;} /* ─── §13 PROJECTS ──────────────────────────────────────────────────────── */ .work__head{display:grid;gap:1.4rem;margin-bottom:2.2rem;} @media(min-width:980px){.work__head{grid-template-columns:1.05fr 1fr;gap:4rem;align-items:end;}} .work__rule{height:1px;background:var(--rule);position:relative;overflow:hidden;margin-bottom:clamp(2.4rem,5vw,4rem);} .work__rule i{position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left;} .projects{display:grid;gap:clamp(3rem,7vw,6rem);} .prj__hd{display:grid;gap:.8rem;padding-bottom:1rem;margin-bottom:1.2rem;border-bottom:1px solid var(--rule);} .prj__no{color:var(--acc);} .prj__plate{position:relative;overflow:hidden;background:var(--bg-dn);} .prj__plate img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:var(--img-filter); transition:transform 2800ms var(--e-out);} @media(min-width:820px){.prj__plate img{aspect-ratio:16/9;}} .prj__dim{position:absolute;left:6%;right:6%;bottom:7%;display:flex;align-items:center;gap:.7rem; font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.62rem;letter-spacing:var(--ls);color:var(--bone); opacity:0;transform:translateY(6px);transition:opacity 620ms var(--e-out),transform 620ms var(--e-out);} .prj__dim i{flex:1;height:1px;background:var(--oak);transform:scaleX(0);transition:transform 1400ms var(--e-out) 180ms;} .prj__dim i:first-child{transform-origin:right;} .prj__dim i:last-child{transform-origin:left;} .prj__dim b{font-weight:500;color:var(--oak-lt);text-shadow:0 1px 8px rgba(var(--shade-rgb),.8);} .prj.is-lit .prj__dim{opacity:1;transform:none;} .prj.is-lit .prj__dim i{transform:scaleX(1);} .prj.is-lit .prj__plate img{transform:scale(1.05);} .prj__cap{margin-top:1.4rem;display:grid;gap:.9rem;} @media(min-width:820px){.prj__cap{grid-template-columns:1fr 1.15fr;gap:3rem;align-items:start;}} .prj__cap p{font-size:.92rem;color:var(--fg-2);max-width:56ch;} .more{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.4rem;border-top:1px solid var(--rule);} .more a{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--f-t);font-size:.88rem;font-weight:600;color:var(--acc);} .more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform var(--t1);} .more a:hover svg{transform:translateX(4px);} /* ─── §14 CAPABILITIES ──────────────────────────────────────────────────── */ .caps__head{display:grid;gap:1.4rem;margin-bottom:clamp(2rem,4vw,3.2rem);} @media(min-width:980px){.caps__head{grid-template-columns:1fr 1fr;gap:4rem;align-items:end;}} /* Below 900px the reels become a horizontal rail of large cards. A 2-up grid made each card too small to read the motion in it, which is the whole point of the section. 80% width leaves the next card peeking so the row reads as scrollable without needing an affordance drawn on top of it. */ .reels{display:flex;gap:.9rem;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding-bottom:.2rem;} .reels::-webkit-scrollbar{display:none;} .reels > .reel{flex:0 0 min(80%,360px);scroll-snap-align:start;aspect-ratio:9/13;} @media(min-width:900px){ .reels{display:grid;gap:1.2rem;grid-template-columns:repeat(3,1fr);overflow:visible;} .reels > .reel{flex:initial;aspect-ratio:9/14;} } /* The rail reveals as one unit. Revealing card by card left the peeking card invisible — it sits outside the viewport horizontally, so the IntersectionObserver never released it and the affordance was a blank sliver. Per-item scroll reveal does not belong inside a horizontal scroller. */ .reels .reel{opacity:0;transform:translateY(22px);} .reels.is-in .reel{opacity:1;transform:none; transition:opacity var(--t3) var(--e-out),transform var(--t3) var(--e-out);} .reels.is-in .reel:nth-child(2){transition-delay:80ms} .reels.is-in .reel:nth-child(3){transition-delay:160ms} .reels.is-in .reel:nth-child(4){transition-delay:240ms} .reels.is-in .reel:nth-child(5){transition-delay:320ms} .reels.is-in .reel:nth-child(6){transition-delay:400ms} /* rail + counter, mobile only */ .reels__nav{display:flex;align-items:center;gap:1.2rem;margin-top:1.4rem;} @media(min-width:900px){.reels__nav{display:none;}} .reels__rail{position:relative;flex:1;height:2px;background:rgba(var(--fg-rgb),.20);overflow:hidden;} .reels__rail b{position:absolute;inset:0;display:block;background:var(--acc); transform-origin:left;transform:scaleX(.17);transition:transform 320ms var(--e-out);} .reels__idx{flex:none;} .reels__idx b{color:var(--acc);} .reel{position:relative;overflow:hidden;background:var(--bg-dn);border:1px solid var(--rule);aspect-ratio:9/14;} .reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--img-filter);} .reel__v{position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--shade-rgb),.94) 10%,rgba(var(--shade-rgb),.24) 52%,rgba(var(--shade-rgb),.40) 100%);} .reel__m{position:absolute;inset:auto 0 0;padding:clamp(.8rem,1.6vw,1.3rem);} .reel__m .lab{color:var(--oak-lt);display:block;margin-bottom:.45rem;} .reel__m h3{color:var(--bone);} .reel__m p{font-size:.8rem;color:var(--greige);margin-top:.45rem;} /* The plate variant. It shares the card frame with the films so the rail reads as one set — a still and a film are both "the work", just at different speeds. The slow zoom is the only motion; it stops for reduced-motion below. */ .reel__i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:var(--img-filter);transform:scale(1.02); transition:transform 1400ms var(--e-out);} .reel--ph:hover .reel__i,.reel--ph:focus-within .reel__i{transform:scale(1.075);} /* C4 — touch has no hover, so the in-view state carries the same emphasis */ @media(hover:none){.reels.is-in .reel--ph .reel__i{transform:scale(1.05);}} .reel--ph .reel__v{background:linear-gradient(to top, rgba(var(--shade-rgb),.95) 8%,rgba(var(--shade-rgb),.30) 55%,rgba(var(--shade-rgb),.46) 100%);} /* a hairline corner tick, so a still card still reads as a drawing sheet */ .reel--ph::after{content:"";position:absolute;top:10px;left:10px;width:11px;height:11px; border-top:1px solid var(--acc);border-left:1px solid var(--acc);opacity:.75;z-index:2;} /* ─── §15 PROCESS ───────────────────────────────────────────────────────── */ .proc__head{display:grid;gap:1.4rem;margin-bottom:clamp(2.4rem,5vw,4rem);} @media(min-width:980px){.proc__head{grid-template-columns:1fr 1fr;gap:4rem;align-items:end;}} .proc__line{position:relative;} .proc__rule{position:absolute;left:23px;top:0;bottom:0;width:1px;background:var(--rule);overflow:hidden;} .proc__rule b{position:absolute;inset:0;background:var(--acc);transform:scaleY(0);transform-origin:top;display:block;} .proc__stns{display:grid;gap:2.6rem;} .proc__stns li{position:relative;padding-left:4.4rem;} .pn{position:absolute;left:0;top:0;width:48px;height:48px;display:grid;place-items:center;background:var(--bg);} .pn svg{position:absolute;inset:0;width:100%;height:100%;} .pn b{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.72rem;font-weight:500;color:var(--acc);} .pg{display:block;width:56px;margin-bottom:.9rem;} .pg svg{width:100%;height:auto;overflow:visible;} .pg .dr path{fill:none;stroke:var(--draw-1);stroke-width:2.4;stroke-linecap:square;} .proc__stns li.is-in .pg .dr path{stroke:var(--acc);transition:stroke-dashoffset 1.4s var(--e-out),stroke 600ms var(--e-out);} .proc__stns li.is-in .dr path:nth-child(2){transition-delay:120ms} .proc__stns li.is-in .dr path:nth-child(3){transition-delay:240ms} .proc__stns li.is-in .dr path:nth-child(4){transition-delay:360ms} .proc__stns li.is-in .dr path:nth-child(5){transition-delay:480ms} .proc__stns h3{margin-bottom:.4rem;} .proc__stns p{font-size:.88rem;color:var(--fg-2);max-width:46ch;} @media(min-width:900px){ .proc__rule{left:0;right:0;top:23px;bottom:auto;width:auto;height:1px;} .proc__rule b{transform:scaleX(0);transform-origin:left;} .proc__stns{grid-template-columns:repeat(3,1fr);gap:3.4rem 2.2rem;} .proc__stns li{padding-left:0;padding-top:4.6rem;} } @media(min-width:1240px){.proc__stns{grid-template-columns:repeat(6,1fr);gap:1.6rem;} .pg{width:48px;}} /* ─── §16 WORKSHOP ──────────────────────────────────────────────────────── */ .shop__comp{position:relative;display:grid;gap:2rem;} .shop__plan{opacity:.55;} .shop__plan svg{width:100%;height:auto;} .shop__plan .e-txt text{font-size:15px;letter-spacing:.6px;} .shop__plate{position:relative;} .ph{position:relative;border:1px solid var(--rule);background:var(--bg-dn);} .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:var(--img-filter);} .ph__lab{position:absolute;left:0;top:0;transform:translateY(-140%);white-space:nowrap;color:var(--acc);z-index:2;} .stamp{position:absolute;right:0;bottom:0;transform:translate(12%,32%); background:var(--bg);border:1px solid var(--rule-2);padding:.6rem .85rem;text-align:right;} .stamp b{display:block;font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.62rem;letter-spacing:var(--ls);text-transform:uppercase;color:var(--acc);} .stamp i{display:block;font-style:normal;font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.53rem;letter-spacing:var(--ls-sm); text-transform:uppercase;color:var(--fg-3);margin-top:.1rem;} .shop__copy .t-lead{margin-top:1.4rem;} .shop__copy .tblk{margin-top:2rem;} @media(min-width:900px){ .shop__comp{grid-template-columns:1fr 1fr;gap:0;align-items:center;} .shop__plan{grid-area:1/1/2/2;padding-right:14%;} .shop__plate{grid-area:1/1/2/2;align-self:end;justify-self:end;width:76%;transform:translate(18%,14%);z-index:2;} .shop__copy{grid-area:1/2/2/3;padding-left:clamp(2rem,5vw,4.5rem);z-index:3;} } /* ─── §17 MATERIALS ─────────────────────────────────────────────────────── */ .mats__head{display:grid;gap:1.4rem;margin-bottom:clamp(2rem,4vw,3.4rem);} @media(min-width:980px){.mats__head{grid-template-columns:1fr 1fr;gap:4rem;align-items:end;}} .mats__list{border-top:1px solid var(--rule);} /* the homepage names the palette; /materials and /studio carry it further */ .mats__out{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem; margin-top:clamp(1.6rem,3vw,2.4rem);} .mats__note{flex-basis:100%;} @media(min-width:720px){.mats__note{flex-basis:auto;margin-left:.4rem;}} .mat{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.1rem;align-items:center; padding:1.15rem 0;border-bottom:1px solid var(--rule);} .mat__sw{width:42px;height:42px;flex:none;grid-row:span 2; background:linear-gradient(150deg,var(--sw),var(--sw2));border:1px solid var(--rule-2); transition:transform 700ms var(--e-out),box-shadow 700ms var(--e-out);} .mat__sw--ply{background:repeating-linear-gradient(to bottom,var(--sw) 0 3px,var(--sw2) 3px 5px);} .mat__n b{display:block;font-family:var(--f-t);font-size:1.02rem;font-weight:600;} .mat__n i{display:block;font-style:normal;margin-top:.15rem;} .mat__d{grid-column:2;font-size:.86rem;color:var(--fg-2);max-width:62ch;max-height:0;opacity:0;overflow:hidden; transition:max-height 700ms var(--e-out),opacity 420ms var(--e-out),margin 700ms var(--e-out);} .mat__t{position:absolute;right:0;top:1.3rem;} .mat.is-lit .mat__sw{transform:scale(1.16);box-shadow:0 8px 26px rgba(var(--shade-rgb),.42);} .mat.is-lit .mat__d{max-height:11em;opacity:1;margin-top:.6rem;} @media(min-width:768px){ .mat{grid-template-columns:auto minmax(210px,1fr) 2fr auto;align-items:start;gap:1.4rem;padding:1.3rem 0;} .mat__sw{grid-row:auto;width:52px;height:52px;} .mat__d{grid-column:auto;max-height:none;opacity:.55;overflow:visible;} .mat.is-lit .mat__d{opacity:1;margin-top:0;} .mat__t{position:static;text-align:right;} } /* ─── §18 TRADE ─────────────────────────────────────────────────────────── */ .trade{background:var(--ink);border-block:1px solid var(--rule);padding:clamp(2.4rem,5vw,3.8rem) 0;} .trade__in{display:grid;gap:1.6rem;align-items:center;} @media(min-width:860px){.trade__in{grid-template-columns:1fr auto;gap:4rem;}} .trade h2{margin-bottom:.7rem;} .trade p{font-size:.9rem;color:var(--greige);max-width:64ch;} /* ─── §19 START ─────────────────────────────────────────────────────────── */ .start__head{display:grid;gap:1.4rem;margin-bottom:clamp(2.2rem,4.5vw,3.4rem);} @media(min-width:980px){.start__head{grid-template-columns:1fr 1fr;gap:4rem;align-items:end;}} .start__grid{display:grid;gap:1.2rem;} @media(min-width:980px){.start__grid{grid-template-columns:1.25fr 1fr;gap:2rem;align-items:start;}} .chans{display:grid;gap:.9rem;} .chan{position:relative;border:1px solid var(--rule-2);background:var(--bg-up); transition:border-color var(--t2),background var(--t2);} .chan:hover{border-color:var(--acc);background:rgba(var(--acc-rgb),.07);} .chan__l{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2rem 1rem; padding:1.15rem 3.6rem 1.15rem 1.2rem;min-height:88px;} .chan__k{grid-column:1;color:var(--acc);} .chan__t{grid-column:1;font-family:var(--f-d);font-size:clamp(1.25rem,3.4vw,1.7rem); font-variation-settings:"wdth" 92,"wght" 650;letter-spacing:-.02em;line-height:1.1;margin-top:.15rem;} .chan__v{grid-column:1;font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.76rem;letter-spacing:var(--ls-sm);color:var(--fg-2);margin-top:.3rem;} .chan__i{grid-column:2;grid-row:1/4;width:18px;height:18px;fill:none;stroke:var(--acc);stroke-width:1.6; transition:transform var(--t2);} .chan:hover .chan__i{transform:translate(3px,-3px);} .chan__c{position:absolute;right:.55rem;bottom:.55rem;width:44px;height:44px;display:grid;place-items:center; border:1px solid var(--rule);color:var(--fg-3);transition:border-color var(--t1),color var(--t1);} .chan__c:hover{border-color:var(--acc);color:var(--acc);} .chan__c svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;} .brief{border:1px solid var(--rule);background:var(--bg-up);padding:clamp(1.3rem,2.6vw,1.9rem);} .brief__h{color:var(--acc);display:block;margin-bottom:1.2rem;} .brief__l{display:grid;gap:.95rem;} .brief__l li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;} .brief__l b{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.66rem;font-weight:500;color:var(--acc);letter-spacing:var(--ls-sm);} .brief__l span{font-size:.9rem;color:var(--fg-2);} .brief__n{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--rule);font-size:.84rem;color:var(--fg-3);} .start__foot{display:grid;gap:1.2rem;margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:1.6rem;border-top:1px solid var(--rule);} @media(min-width:768px){.start__foot{grid-template-columns:auto 1fr;gap:3rem;align-items:center;}} .soc{display:grid;gap:.25rem;} .soc b{font-family:var(--f-t);font-size:1.05rem;font-weight:600;color:var(--acc-2);} .visit{display:grid;gap:.3rem;} @media(min-width:768px){.visit{justify-items:end;text-align:right;}} .visit a{display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;} .visit a:hover{color:var(--acc-2);} .visit svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;} /* ─── §20 FOOTER — small, quiet, no links ───────────────────────────────── */ .ftr{background:var(--sunk);border-top:1px solid var(--rule);padding:clamp(2.8rem,6vw,4.4rem) 0 clamp(1.6rem,3vw,2.2rem);} /* One column, full width. An earlier pass made this an auto-auto grid to sit the badge beside the line — which shrank every track to its content and dragged the licence and the credit into the middle. The badge/line pairing belongs in its own row, not in the outer grid. */ .ftr__in{display:grid;justify-items:center;text-align:center;gap:1.1rem;} .ftr__id{display:grid;justify-items:center;gap:.7rem;} @media(min-width:560px){ .ftr__id{grid-auto-flow:column;align-items:center;gap:1.1rem;text-align:left;} } .ftr__badge{color:var(--acc);opacity:.9;} .ftr__line{font-family:var(--f-d);font-size:clamp(.8rem,1.5vw,.92rem); font-variation-settings:"wdth" 96,"wght" 500;letter-spacing:.01em;line-height:1.45;color:var(--greige);} /* a full-width hairline, then the two credits sit at either end of it */ .ftr__rule{width:100%;height:1px;background:var(--rule);margin-top:clamp(1.4rem,3vw,2.2rem);} .ftr__foot{width:100%;display:grid;justify-items:center;gap:1.1rem; padding-top:clamp(1.1rem,2.4vw,1.5rem);} @media(min-width:760px){ .ftr__foot{grid-template-columns:1fr auto;align-items:end;} .ftr__legal{justify-self:start;} .ftr__by{justify-self:end;justify-items:end;text-align:right;} } .ftr__legal{margin:0;} /* Design and build credit. The partner's mark keeps its own colours. */ .ftr__by{display:grid;gap:.5rem;justify-items:center;opacity:.72; transition:opacity var(--t1);} .ftr__by:hover,.ftr__by:focus-visible{opacity:1;} .ftr__by img{width:clamp(118px,15vw,150px);height:auto;} .toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,180%);z-index:300; background:var(--acc);color:var(--on-acc);padding:.7rem 1.2rem; opacity:0;visibility:hidden;pointer-events:none; transition:transform 420ms var(--e-out),opacity 240ms,visibility 0s 420ms;} .toast.is-on{transform:translate(-50%,0);opacity:1;visibility:visible; transition:transform 420ms var(--e-out),opacity 240ms,visibility 0s;} /* ─── §19b INNER PAGES ────────────────────────────────────────────────── Everything below is assembled from the same vocabulary as the homepage — sheet break, section mark, title block, rule, plate. No new primitives. */ .phead{display:grid;gap:1.4rem;margin-bottom:clamp(2rem,4vw,3.2rem);} @media(min-width:980px){.phead{grid-template-columns:1.05fr 1fr;gap:4rem;align-items:end;}} .prose{max-width:68ch;} .prose--narrow{max-width:60ch;} .prose p{margin-bottom:1rem;color:var(--fg-2);} .prose p:last-child{margin-bottom:0;} .prose strong{color:var(--fg);font-weight:600;} .note{margin-top:clamp(2.4rem,5vw,3.6rem);padding:clamp(1.3rem,2.6vw,1.9rem); border:1px solid var(--rule);background:var(--bg-up);max-width:72ch;} .note h2{margin-bottom:.6rem;} .note p{font-size:.9rem;color:var(--fg-2);} .closer{margin-top:clamp(3rem,6vw,5rem);padding-top:1.8rem;border-top:1px solid var(--rule); display:grid;gap:.7rem;justify-items:start;max-width:64ch;} .closer p{font-size:.94rem;color:var(--fg-2);} .closer .btn{margin-top:.6rem;} /* work filters — real links, so they work with no JavaScript and are indexable */ .filters{display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;scrollbar-width:none; margin-bottom:clamp(1.6rem,3vw,2.4rem);padding-bottom:.3rem;} .filters::-webkit-scrollbar{display:none;} .filters__b{flex:none;padding:.6rem 1rem;min-height:44px;display:inline-flex;align-items:center; border:1px solid var(--rule-2);font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;font-size:.68rem;text-transform:uppercase; letter-spacing:var(--ls);color:var(--fg-2);transition:border-color var(--t1),color var(--t1),background var(--t1);} .filters__b:hover{border-color:var(--acc);color:var(--fg);} .filters__b.is-on{background:var(--acc);border-color:var(--acc);color:var(--on-acc);} /* project detail */ .prjh__plate{margin-top:clamp(1.8rem,4vw,3rem);overflow:hidden;background:var(--bg-dn);} .prjh__plate img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:var(--img-filter);} .prjh__brief{display:grid;gap:2rem;margin-top:clamp(2.2rem,4.5vw,3.4rem);} @media(min-width:860px){.prjh__brief{grid-template-columns:1fr 1fr;gap:4rem;}} .prjh__brief h2{margin-bottom:1rem;} .prjh__brief p{color:var(--fg-2);} .gal{display:grid;gap:clamp(1.2rem,2.6vw,2rem);margin-top:clamp(2rem,4vw,3rem);} @media(min-width:860px){.gal{grid-template-columns:1fr 1fr;}} .gal__p{overflow:hidden;background:var(--bg-dn);} .gal__p img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:var(--img-filter);} .gal__c{margin-top:.7rem;} .slist{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--rule);} .slist > div{display:flex;flex-wrap:wrap;gap:.3rem 2rem;justify-content:space-between; padding:.95rem 0;border-bottom:1px solid var(--rule);} .slist dd{margin:0;font-size:.95rem;font-weight:500;} .nextp{background:var(--bg);color:var(--fg);border-top:1px solid var(--rule);} .nextp__l{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.3rem 1.5rem; padding:clamp(2.4rem,5vw,4rem) 0;} .nextp__l .lab{grid-column:1;} .nextp__l b{grid-column:1;font-weight:inherit;} .nextp__l svg{grid-column:2;grid-row:1/3;width:26px;height:26px;fill:none;stroke:var(--acc); stroke-width:1.5;transition:transform var(--t2);} .nextp__l:hover svg{transform:translateX(6px);} .nextp__l:hover b{color:var(--acc-2);} /* services */ .svc{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule);} .svc__i{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;background:var(--bg); padding:clamp(1.5rem,3vw,2.4rem) 0;} @media(min-width:760px){.svc__i{grid-template-columns:5rem 1fr;gap:2rem;}} .svc__n{padding-top:.35rem;color:var(--acc);} .svc__k{display:block;margin-bottom:.5rem;} .svc__b h2{margin-bottom:.7rem;} .svc__b p{font-size:.94rem;color:var(--fg-2);max-width:60ch;} .svc__l{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem;} .svc__l li{padding:.4rem .75rem;border:1px solid var(--rule-2);font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums; font-size:.64rem;text-transform:uppercase;letter-spacing:var(--ls-sm);color:var(--fg-2);} .svc__sec{margin-top:clamp(2.4rem,5vw,3.6rem);padding:clamp(1.3rem,2.6vw,1.9rem); border:1px solid var(--rule);background:var(--bg-up);} .svc__sec h2{margin-bottom:.6rem;} .svc__sec p{font-size:.9rem;color:var(--fg-3);max-width:64ch;} /* two-column lists with a drawn tick */ .cols{display:grid;gap:clamp(2rem,4vw,3.4rem);} @media(min-width:820px){.cols{grid-template-columns:1fr 1fr;gap:4rem;}} .cols__c h2{margin-bottom:1.2rem;} .ticks{display:grid;gap:.85rem;} .ticks li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline; font-size:.94rem;color:var(--fg-2);} .ticks__m{width:10px;height:10px;border-left:1px solid var(--acc);border-bottom:1px solid var(--acc); transform:translateY(-2px);} /* faq — native details, so it works with no script */ .faq{border-top:1px solid var(--rule);} .faq li{border-bottom:1px solid var(--rule);} .faq summary{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:baseline; padding:1.15rem 0;min-height:44px;cursor:pointer;list-style:none;} .faq summary::-webkit-details-marker{display:none;} .faq__n{color:var(--acc);} .faq__q{font-family:var(--f-t);font-size:clamp(1rem,2.2vw,1.18rem);font-weight:600; letter-spacing:-.01em;color:var(--fg);} .faq__i{position:relative;width:14px;height:14px;align-self:center;} .faq__i::before,.faq__i::after{content:"";position:absolute;background:var(--acc); transition:transform var(--t2) var(--e-out);} .faq__i::before{left:0;right:0;top:6px;height:1px;} .faq__i::after{top:0;bottom:0;left:6px;width:1px;} details[open] .faq__i::after{transform:scaleY(0);} .faq__a{padding:0 0 1.4rem;max-width:66ch;} .faq__a p{font-size:.95rem;color:var(--fg-2);} .faq summary:hover .faq__q{color:var(--acc-2);} /* testimonials — a sheet each */ .says__grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule); margin-top:clamp(2rem,4vw,3rem);} @media(min-width:760px){.says__grid{grid-template-columns:1fr 1fr;}} .say{background:var(--bg);padding:clamp(1.5rem,3vw,2.2rem);display:flex;flex-direction:column; justify-content:space-between;gap:1.6rem;} .say__q{font-family:var(--f-t);font-size:clamp(.98rem,2vw,1.1rem);line-height:1.6; color:var(--fg);max-width:46ch;} .say__q::before{content:"“";color:var(--acc);} .say__q::after{content:"”";color:var(--acc);} .say__f{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between; gap:.4rem 1.5rem;padding-top:1.1rem;border-top:1px solid var(--rule);} .say__f cite{font-style:normal;font-weight:600;font-size:.95rem;} /* ─── §20b TOUCH TARGETS (R3 / C8) ────────────────────────────────────── Sized by input type, not viewport: 34px is fine under a mouse and too small under a thumb, and some tablets are both. */ @media(pointer:coarse){ .cal{width:44px;height:44px;min-width:44px;font-size:.76rem;} .lockup,.menu__nav a,.menu__c{min-height:44px;} .more a,.visit a,.soc{min-height:44px;} } /* ─── §21 REDUCED MOTION (C8) ───────────────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} [data-rv],[data-rv].is-out{opacity:1!important;transform:none!important;} .reels .reel{opacity:1!important;transform:none!important;} .mask > span > span{transform:none!important;} .nbox{stroke-dashoffset:0!important;} .mark__n b,.pn b,.brk__n,.brk__t{opacity:1!important;} .dr path{stroke-dashoffset:0!important;} .cal{opacity:1!important;} .hslide__m img{animation:none!important;transform:scale(1.04)!important;} .hslide__m{transform:none!important;} .rail::before,.m1,.uline::after,.brk__r i{transform:scaleX(1)!important;} .brk__r::before,.brk__r::after{transform:scaleY(1)!important;} .uline::before{display:none;} .hprog i::after{transform:scaleX(1);animation:none!important;} .menu{clip-path:none!important;} .menu__w b{transform:none!important;} .menu__r{transform:scaleX(1)!important;} .menu__k,.menu__foot{opacity:1!important;transform:none!important;} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;} } /* ─── §20 VIDEO-LED WORK ──────────────────────────────────────────────── Some work is filmed rather than photographed. It lives in the same projects collection and uses the same sheet — only the plate differs. */ .prj__plate--v{position:relative;} .prj__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:clamp(46px,6vw,62px);height:clamp(46px,6vw,62px);border-radius:50%; display:grid;place-items:center;background:rgba(16,14,12,.62); border:1px solid rgba(239,234,225,.5);backdrop-filter:blur(3px); transition:background var(--t1),border-color var(--t1),transform var(--t1);} .prj__play svg{width:42%;height:42%;fill:var(--bone);margin-left:2px;} .prj__vlab{position:absolute;left:.9rem;top:.9rem;padding:.25rem .5rem; background:rgba(16,14,12,.72);color:var(--bone);border:1px solid var(--rule-2);} .prj:hover .prj__play,.prj__l:focus-visible .prj__play{ background:rgba(176,138,94,.85);border-color:var(--acc);transform:translate(-50%,-50%) scale(1.06);} /* These clips are shot vertically for Instagram. Stretching one across a wide container just paints black bars, so the frame is capped to the video's own proportions and centred. */ .prjh__plate--v{display:grid;justify-items:center;} .prjh__plate--v video{display:block;background:var(--sunk); width:auto;max-width:min(100%,460px);max-height:78vh;height:auto; border:1px solid var(--rule);} @media(min-width:900px){.prjh__plate--v video{max-width:min(100%,520px);}} /* a linked reel on the homepage */ .reel--l .reel__a{display:block;height:100%;color:inherit;} .reel__go{display:inline-flex;align-items:center;gap:.45rem;margin-top:.7rem;color:var(--acc); opacity:0;transform:translateY(4px); transition:opacity var(--t2) var(--e-out),transform var(--t2) var(--e-out);} .reel__go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;} .reel--l:hover .reel__go,.reel--l:focus-within .reel__go{opacity:1;transform:none;} /* hover has no meaning on touch — R-parity: show it there always */ @media(hover:none){.reel__go{opacity:1;transform:none;}} .lab--acc{color:var(--acc);} /* ═══ §21 THE INNER-PAGE BANNER ═════════════════════════════════════════ One anatomy, four interiors. Always dark, so the fixed bone header always has a dark ground at scroll zero. Short by rule — this is never a hero. */ .bn{ /* The banner is always a dark ground, even inside a paper-surface section. Without re-declaring these, the labels inherit the paper palette and render near-black on black — the title block was invisible. */ --fg:var(--bone); --fg-2:var(--greige); --fg-3:var(--muted); --acc:var(--oak); --acc-2:var(--oak-lt); --on-acc:var(--basalt); --rule:rgba(185,196,192,.16); --rule-2:rgba(185,196,192,.34); --grid:rgba(185,196,192,.07); --draw-1:rgba(236,232,224,.80); --draw-2:rgba(185,196,192,.30); --draw-3:var(--oak); position:relative;overflow:hidden;background:var(--sunk);color:var(--bone); min-height:clamp(250px,38vh,390px);display:grid;align-items:end; border-bottom:1px solid var(--rule); /* the fixed top bar floats over this, so every piece of the banner's own furniture starts below it rather than behind it */ padding-top:var(--hdr);} .bn--tall{min-height:clamp(330px,52vh,480px);} .bn__in{position:relative;z-index:3;display:grid;gap:1.6rem; padding:clamp(2.2rem,5vw,3.2rem) 0 clamp(1.5rem,3vw,2.2rem);} @media(min-width:900px){.bn__in{grid-template-columns:1fr auto;align-items:end;gap:3rem;}} .bn__fr{position:absolute;z-index:2; inset:calc(var(--hdr) + clamp(12px,1.6vw,20px)) clamp(12px,1.6vw,20px) clamp(12px,1.6vw,20px); border:1px solid var(--rule);pointer-events:none;} .bn__fr i{position:absolute;width:9px;height:9px;border:0 solid var(--acc);opacity:.85;} .bn__fr i:nth-child(1){top:-1px;left:-1px;border-top-width:1px;border-left-width:1px;} .bn__fr i:nth-child(2){top:-1px;right:-1px;border-top-width:1px;border-right-width:1px;} .bn__fr i:nth-child(3){bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px;} .bn__fr i:nth-child(4){bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px;} .bn__hd{position:absolute;z-index:3;top:calc(var(--hdr) + clamp(12px,1.6vw,20px)); left:0;right:0;width:var(--wrap);margin-inline:auto; display:flex;justify-content:space-between;gap:1rem;padding-top:.85rem;pointer-events:none;} /* the photo fill is bright on the right, where the running head lives, so these carry their own scrim instead of trusting the gradient underneath */ .bn--photo .bn__hd .lab{background:rgba(16,14,12,.62);padding:.2rem .45rem; backdrop-filter:blur(2px);} .bn__ttl{display:grid;gap:.9rem;} .bn__sub{display:flex;align-items:center;gap:.7rem;} .bn__sub i{width:26px;height:1px;background:var(--acc);flex:none;} .bn__h{font-size:clamp(2.1rem,6vw,4.2rem);} /* Cells carry their own rules rather than showing a grid background through the gaps — otherwise a project with an odd number of fields leaves a phantom empty cell where the container shows through. */ .bn__tblk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--rule);backdrop-filter:blur(3px);} @media(min-width:900px){.bn__tblk{grid-template-columns:repeat(2,118px);}} .bn__tblk div{background:rgba(16,14,12,.88);padding:.5rem .7rem; border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);} @media(min-width:900px){ .bn__tblk div:nth-child(2n){border-right:0;} } @media(max-width:899px){ .bn__tblk div:last-child,.bn__tblk div:nth-child(4n){border-right:0;} .bn__tblk div{border-bottom:0;} } .bn__tblk dt{font-size:.53rem;margin-bottom:.15rem;} .bn__tblk dd{font-family:var(--f-t);font-size:.8rem;font-weight:600;color:var(--fg);} .bn__dim{position:absolute;z-index:3;left:0;right:0;bottom:clamp(12px,1.6vw,20px); width:var(--wrap);margin-inline:auto;height:14px;pointer-events:none;} .bn__dim svg{width:100%;height:100%;overflow:visible;} .bn__dim path{stroke:var(--draw-2);stroke-width:1;fill:none;} /* ── interiors ─────────────────────────────────────────────────────────── */ .bn__fill{position:absolute;inset:0;z-index:1;overflow:hidden;} .bn__fill--grid{background-image:linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px;} .bn__fill--grid::after{content:"";position:absolute;inset:0; background:radial-gradient(115% 88% at 22% 100%,transparent 30%,rgba(16,14,12,.86) 100%);} /* The photograph is the reason the banner is a photograph. brightness(.72) plus a .95 scrim underneath left it reading as texture rather than as a room — lifted here, with the scrim below tuned to match so the title keeps its ground. Measured against the title, not guessed. */ .bn__fill--ph img{width:100%;height:100%;object-fit:cover; filter:saturate(.92) contrast(1.04) brightness(.86); transform:scale(1.06);animation:bn-pan 26s var(--e-out) infinite alternate;} .bn__fill--ph::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(16,14,12,.90) 0%,rgba(16,14,12,.68) 42%,rgba(16,14,12,.34) 100%);} /* R4 — the elevation pans, it never shrinks */ @keyframes bn-pan{from{transform:scale(1.06) translate3d(-1.6%,0,0)} to{transform:scale(1.06) translate3d(1.6%,0,0)}} .bn__fill--cut{display:grid;place-items:center;} /* The section cut, laid over a photograph instead of standing on its own. Hairlines only — it has to read as draughting on top of the image, not as a second picture competing with it. */ .bn__cutover{position:absolute;inset:0;display:grid;place-items:center; opacity:.30;mix-blend-mode:screen;pointer-events:none;} .bn__cutover > *{width:100%;} /* The project banner lifts its veil: the point of putting the work behind the title is that you can see the work. The general photo fill stays darker because those pages carry no photograph of their own to show off. Measured against the title, not guessed — text stays over 7:1. */ /* THE PROJECT HERO Tall, carrying the project's own photograph, with a veil that lifts as you scroll. At the top the title has a dark ground to sit on; by the time the title has passed, the photograph is clean — one image doing both jobs, which is what let the separate plate block go. */ .bn--hero{min-height:100svh;} /* ONE veil, not three. The fill's own gradient is switched off here — stacking it under this one plus a brightness filter is what made the photograph read as black. This is the only thing darkening the image, and it is the thing that lifts. */ .bn--hero .bn__fill--ph::after{display:none;} .bn--hero .bn__fill--ph img{filter:saturate(.94) contrast(1.03) brightness(.94);} .bn__veil{position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(to top,rgba(16,14,12,.86) 0%,rgba(16,14,12,.40) 42%,rgba(16,14,12,.10) 100%); opacity:1;will-change:opacity;} /* The slow drift. R4 holds: it pans, it never converges on the reader. */ .bn--hero .bn__fill--ph img{transform:scale(1.07); animation:bn-drift 34s var(--e-out) infinite alternate;} @keyframes bn-drift{ from{transform:scale(1.07) translate3d(-1.5%,0.8%,0)} to {transform:scale(1.12) translate3d(1.5%,-0.8%,0)}} @media(prefers-reduced-motion:reduce){ .bn--hero .bn__fill--ph img{animation:none;transform:scale(1.04);} } /* The film, once asked for. It covers the ground rather than replacing it, so the poster is still there underneath if the file fails. */ .bn__vid{position:absolute;inset:0;z-index:3;width:100%;height:100%; object-fit:cover;background:var(--sunk); opacity:0;visibility:hidden;transition:opacity 420ms var(--e-out);} .bn.is-playing .bn__vid{opacity:1;visibility:visible;} .bn.is-playing .bn__veil,.bn.is-playing .bn__cutover, .bn.is-playing .bn__seal,.bn.is-playing .bn__in, .bn.is-playing .bn__hd,.bn.is-playing .bn__dim{opacity:0;pointer-events:none; transition:opacity 300ms var(--e-in);} /* The play control. A ring that draws, a triangle inside it, a label beneath — the same circular stamp language the seal uses, so the two belong together. */ .bn__play{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%); display:grid;place-items:center;width:clamp(78px,9vw,104px);aspect-ratio:1; background:none;border:0;cursor:pointer;color:var(--bone); transition:transform 420ms var(--e-out),opacity 300ms var(--e-out);} .bn__play__r{grid-area:1/1;width:100%;height:100%;border-radius:50%; border:1px solid rgba(239,234,225,.55);background:rgba(16,14,12,.42); backdrop-filter:blur(3px); transition:border-color var(--t1),background var(--t1),transform 420ms var(--e-out);} .bn__play svg{grid-area:1/1;width:100%;height:100%;overflow:visible;} /* The triangle is the button now, not a glyph parked inside it. */ .bn__play__p{fill:currentColor;} .bn__play__t path{stroke:currentColor;stroke-width:1.4;opacity:.5;} .bn__play:hover .bn__play__t path,.bn__play:focus-visible .bn__play__t path{stroke:var(--acc);opacity:1;} .bn__play__l{grid-area:1/1;place-self:end center;transform:translateY(190%); white-space:nowrap;color:var(--greige);transition:color var(--t1);} .bn__play:hover .bn__play__r,.bn__play:focus-visible .bn__play__r{ border-color:var(--acc);background:rgba(176,138,94,.28);transform:scale(1.06);} .bn__play:hover .bn__play__l,.bn__play:focus-visible .bn__play__l{color:var(--oak-lt);} .bn__play:focus-visible{outline:2px solid var(--acc);outline-offset:6px;border-radius:50%;} /* ── close the film ───────────────────────────────────────────────────────── Only present while it plays. Bottom-left of the plate, clear of the native controls, which sit along the bottom edge centred. */ .bn__stop{position:absolute;z-index:7;inset-inline-end:clamp(12px,2vw,22px);top:clamp(12px,2vw,22px); display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.4rem .8rem; background:rgba(16,14,12,.72);border:1px solid rgba(239,234,225,.4);color:var(--bone); cursor:pointer;backdrop-filter:blur(3px);transition:border-color var(--t1),background var(--t1);} .bn__stop svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;} .bn__stop:hover,.bn__stop:focus-visible{border-color:var(--acc);background:rgba(176,138,94,.3);} .bn__stop:focus-visible{outline:2px solid var(--acc);outline-offset:3px;} .bn.is-playing .bn__play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.9);} /* a ring that keeps pulsing, so the control reads as live rather than painted */ @media(prefers-reduced-motion:no-preference){ .bn__play::after{content:"";position:absolute;inset:0;border-radius:50%; border:1px solid rgba(239,234,225,.32);animation:bn-ping 3.4s var(--e-out) infinite;} @keyframes bn-ping{0%{transform:scale(1);opacity:.6} 70%{transform:scale(1.34);opacity:0} 100%{transform:scale(1.34);opacity:0}} } .bn--hero .bn__in{padding-bottom:clamp(2rem,5vw,3.6rem);} /* it fills the screen, so the title block can breathe against the bottom */ @media(min-width:900px){.bn--hero .bn__in{align-items:end;}} /* No JavaScript: the veil simply stays. The page is legible, which is the floor C10 asks for — the lift is an enhancement, not the thing that makes it work. */ .bn--plate .bn__fill--ph img{filter:saturate(.90) contrast(1.04) brightness(.86);} .bn--plate .bn__fill--ph::after{ background:linear-gradient(103deg,rgba(16,14,12,.90) 0%,rgba(16,14,12,.62) 46%,rgba(16,14,12,.30) 100%);} /* One scrim, not two. Adding a second vertical gradient on top of the diagonal compounded to 98.8% opacity at the bottom — darker than the veil it was meant to lift. The diagonal alone already puts .90 under the title and leaves .30 at the top right, where the photograph can be seen. */ /* ── THE STAMP ──────────────────────────────────────────────────────────── A drawing sheet carries a circular stamp; this one holds the project's own frame. It sits crisp over a ground that is deliberately veiled, which is what lets the banner be atmospheric and still show the work. */ .bn__seal{position:absolute;z-index:4;display:grid;place-items:center; right:clamp(14px,3vw,34px);top:calc(var(--hdr) + clamp(18px,3vw,34px)); width:clamp(76px,10vw,124px);aspect-ratio:1;border-radius:50%; background:rgba(var(--shade-rgb),.55);backdrop-filter:blur(2px);} /* Revealed by the site's own observer via [data-rv]; an earlier :has() hook depended on a sibling's state and simply never matched. */ .bn__seal[data-rv]{transform:translateY(14px);} .bn__seal[data-rv].is-in{transform:none;} .bn__seal__i{grid-area:1/1;width:calc(100% - 12px);aspect-ratio:1;border-radius:50%; overflow:hidden;} .bn__seal__i img{width:100%;height:100%;object-fit:cover; filter:saturate(.92) contrast(1.04);} /* two rings, the outer one broken by the number — a stamp, not a badge */ .bn__seal__r{grid-area:1/1;width:100%;height:100%;border-radius:50%; border:1px solid var(--acc);opacity:.85;} .bn__seal__r::after{content:"";position:absolute;inset:5px;border-radius:50%; border:1px solid rgba(var(--fg-rgb),.34);} .bn__seal__n{grid-area:1/1;place-self:start center;transform:translateY(-52%); padding:.1rem .42rem;background:var(--sunk);border:1px solid var(--acc); font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums; font-size:.58rem;font-weight:600;letter-spacing:var(--ls);color:var(--acc);} .bn__seal__l{grid-area:1/1;place-self:end center;transform:translateY(58%); white-space:nowrap;padding:.08rem .4rem;background:rgba(var(--shade-rgb),.8);} /* Below 640px it would crowd the title, and the title is what matters */ @media(max-width:639px){.bn__seal{display:none;}} @media(prefers-reduced-motion:reduce){.bn__seal{opacity:1;transform:none;}} .bn__fill--cut svg{width:100%;height:100%;} .cut__l{stroke:var(--draw-2);stroke-width:1;fill:none;} .cut__l--h{stroke:var(--draw-1);stroke-width:1.2;} .cut__h{fill:url(#cut-hatch);stroke:var(--draw-2);stroke-width:1;} .bn__fill--cut::after{content:"";position:absolute;inset:0; background:linear-gradient(92deg,rgba(16,14,12,.94) 6%,rgba(16,14,12,.34) 46%,rgba(16,14,12,.55) 100%);} .bn__fill--bands{display:grid;grid-template-rows:1.4fr .5fr 2.2fr .7fr 1.1fr .4fr 1.8fr;} .bn__fill--bands i:nth-child(1){background:linear-gradient(180deg,#2A2019,#1E1712);} .bn__fill--bands i:nth-child(2){background:var(--walnut-dk);} .bn__fill--bands i:nth-child(3){background:linear-gradient(180deg,#241C15,#171310);} .bn__fill--bands i:nth-child(4){background:var(--walnut);} .bn__fill--bands i:nth-child(5){background:linear-gradient(180deg,#1F1913,#15110E);} .bn__fill--bands i:nth-child(6){background:var(--oak);opacity:.85;} .bn__fill--bands i:nth-child(7){background:linear-gradient(180deg,#1B1611,#100E0C);} .bn__fill--bands::after{content:"";position:absolute;inset:0; background:linear-gradient(96deg,rgba(16,14,12,.93) 12%,rgba(16,14,12,.55) 70%,rgba(16,14,12,.3) 100%);} /* ── below the banner: lead + the ledger strip ─────────────────────────── */ .bnf{display:grid;gap:1.6rem;padding-top:clamp(1.6rem,3.4vw,2.4rem);} @media(min-width:900px){.bnf{grid-template-columns:1.15fr 1fr;gap:3.4rem;align-items:start;}} .bnf__lead{max-width:56ch;} .ledx{display:grid;gap:.1rem;align-content:start;} .ledx a{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:baseline; padding:.42rem 0;border-bottom:1px solid var(--rule);color:var(--fg-2); transition:border-color var(--t1),color var(--t1);} .ledx a:hover,.ledx a:focus-visible{border-color:var(--acc);color:var(--fg);} .ledx a > span:last-child{font-family:var(--f-t);font-size:.86rem;font-weight:500;} /* mobile: shorter, and the title block runs as one row of four */ @media(max-width:899px){ .bn{min-height:clamp(230px,32vh,310px);} .bn--tall{min-height:clamp(270px,38vh,360px);} /* The hero keeps its full screen here too. This block sits after the .bn--hero rule and matches on one class, so without restating it the mobile .bn--tall value simply won and the hero collapsed to 38vh. */ .bn--hero{min-height:100svh;} .bn__tblk dd{font-size:.72rem;} /* the veil is weighted left for the desktop composition; on a narrow screen the running head on the right would land on a bright part of the photo */ .bn__fill--ph::after{background:linear-gradient(160deg,rgba(16,14,12,.90) 0%, rgba(16,14,12,.72) 55%,rgba(16,14,12,.80) 100%);} } /* ═══ §22 INNER-PAGE RHYTHM — R10–R13 ══════════════════════════════════ The banner alone will not stop an inner page feeling like the homepage repeated. The homepage is spacious because it has seven sections; an inner page carries ten times the information per screen and must be denser. */ /* R10 — inner sections run at about 60% of the homepage's padding */ .sec--in{padding:clamp(2.6rem,5.5vw,4.4rem) 0;} /* a section that opens with the banner has no space above it — the banner is the top of the page and must sit hard against the header */ .sec:has(> .bn){padding-top:0;} .sec > .bn:first-child{margin-top:0;} /* R12 — a measure cap, which the homepage never needed having no long-form text */ .prose{max-width:68ch;} .prose--narrow{max-width:60ch;} /* R13 — every inner page ends the same way, so no page is a dead end */ .closer{margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:clamp(1.8rem,3.6vw,2.6rem); border-top:1px solid var(--rule);display:grid;gap:.7rem;justify-items:start;} .closer p{color:var(--fg-2);max-width:56ch;} /* ═══ §23 THE ARRIVAL LOADER ════════════════════════════════════════════ Runs once, on first visit. The mark fills as real progress arrives; when it completes the sheet breaks into vertical panels that lift away in sequence, like boards coming off a stack. */ .ldr{position:fixed;inset:0;z-index:900;display:grid;place-items:center;} .ldr[hidden]{display:none;} /* the panels ARE the ground — nothing else paints the overlay */ .ldr__pan{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(7,1fr);} .ldr__pan i{display:block;background:var(--basalt);transform:translateY(0); transition:transform 900ms var(--e-out);} .ldr.is-done .ldr__pan i{transform:translateY(-101%);} .ldr__pan i:nth-child(1){transition-delay:0ms} .ldr__pan i:nth-child(2){transition-delay:62ms} .ldr__pan i:nth-child(3){transition-delay:124ms} .ldr__pan i:nth-child(4){transition-delay:186ms} .ldr__pan i:nth-child(5){transition-delay:248ms} .ldr__pan i:nth-child(6){transition-delay:310ms} .ldr__pan i:nth-child(7){transition-delay:372ms} /* a hairline down each seam, so the break reads as drawn rather than torn */ .ldr__pan i + i{box-shadow:inset 1px 0 0 rgba(185,196,192,.10);} .ldr__in{position:relative;z-index:2;display:grid;justify-items:center;gap:1.3rem;width:min(300px,70vw);} .ldr__m{position:relative;width:78px;height:78px;} .ldr__mb,.ldr__mf{position:absolute;inset:0;display:block; -webkit-mask:url("../brand/af-arc.svg") center/contain no-repeat; mask:url("../brand/af-arc.svg") center/contain no-repeat;} .ldr__mb{background:rgba(239,234,225,.16);} .ldr__mf{background:var(--logo-fg);clip-path:inset(100% 0 0 0); transition:clip-path 460ms var(--e-out);} .ldr__w{font-family:var(--f-d);font-variation-settings:"wdth" 100,"wght" 650; font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;color:var(--bone);margin-top:-.3rem;} .ldr__bar{position:relative;width:100%;height:1px;background:rgba(239,234,225,.14);} .ldr__bar i{position:absolute;inset:0 auto 0 0;width:0%;background:var(--acc); transition:width 340ms var(--e-out);} .ldr__ft{display:flex;justify-content:space-between;width:100%;gap:1rem;} .ldr.is-done .ldr__in{transform:translateY(-10px);opacity:0; transition:transform 380ms var(--e-in),opacity 260ms var(--e-in);} @media(prefers-reduced-motion:reduce){ .ldr__pan i,.ldr__mf,.ldr__bar i,.ldr.is-done .ldr__in{transition-duration:1ms;} .ldr__pan i{transition-delay:0ms!important;} .bn__fill--ph img{animation:none;} } /* ═══ §24 PAGE-TO-PAGE TRANSITION ═══════════════════════════════════════ Cross-document view transitions. No router, no single-page app, no JavaScript — four CSS rules. Browsers without support (Firefox today) get an ordinary instant navigation, which is the correct fallback. */ @view-transition{ navigation:auto; } @media(prefers-reduced-motion:reduce){ @view-transition{ navigation:none; } } ::view-transition-old(root){ animation:vt-out 260ms var(--e-in) both; } ::view-transition-new(root){ animation:vt-in 420ms var(--e-out) both; } @keyframes vt-out{ to{ opacity:0; transform:translateY(8px); } } @keyframes vt-in { from{ opacity:0; transform:translateY(-8px); } } /* the banner morphs across the navigation, so the frame appears to hold still while its contents change underneath */ .bn{ view-transition-name:banner; } ::view-transition-group(banner){ animation-duration:520ms; } /* ═══ §25 HEADER SEARCH ═════════════════════════════════════════════════ Expands in place beside the call to action. No modal, no navigation: the header simply makes room. Closed it is a 44px target. */ /* Opening search hides the bar's contents and runs the field across the whole width. The icon itself never moves — it becomes the close control in place, so the target does not slide out from under the pointer. */ .srch{position:relative;display:flex;align-items:center;flex:none;} .srch__b{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none; background:none;border:0;cursor:pointer;color:var(--greige);transition:color var(--t1);} .srch__b:hover,.srch__b:focus-visible{color:var(--bone);} .srch__b svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6; transition:opacity 200ms var(--e-out),transform 320ms var(--e-out);} .srch__xc{opacity:0;transform:rotate(-45deg) scale(.7);} .hdr.is-searching .srch__b{color:var(--acc);} .hdr.is-searching .srch__ic{opacity:0;transform:rotate(45deg) scale(.7);} .hdr.is-searching .srch__xc{opacity:1;transform:none;} /* The field spans from the left edge of the bar to just before the icon. */ .srch__f{position:absolute;left:0;right:calc(44px + .35rem);top:50%;transform:translateY(-50%); display:flex;align-items:center;overflow:hidden; clip-path:inset(0 100% 0 0);opacity:0;pointer-events:none; transition:clip-path 460ms var(--e-out),opacity 200ms var(--e-out);} .hdr.is-searching .srch__f{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto;} /* min-height keeps it a real touch target once the field is open; the padding alone left it at 29px. */ .srch__i{width:100%;min-height:44px;background:none;border:0;border-bottom:1px solid var(--rule-2); color:var(--bone);font-family:var(--f-d);font-variation-settings:"wdth" 92,"wght" 500; font-size:clamp(1rem,2.6vw,1.5rem);letter-spacing:-.02em; padding:.35rem 0;outline:none;transition:border-color var(--t1);} .srch__i::placeholder{color:var(--muted);font-variation-settings:"wdth" 92,"wght" 400;} .srch__i:focus{border-bottom-color:var(--acc);} .srch__i::-webkit-search-cancel-button{display:none;} .srch__r{position:absolute;top:calc(100% + .55rem);right:0;width:min(460px,calc(100vw - 2.4rem)); z-index:220;display:none;background:rgba(var(--up-rgb),.98);backdrop-filter:blur(16px); border:1px solid var(--rule);padding:.45rem;} .hdr.is-searching .srch__r[data-has]{display:block;} .srch__r a{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:baseline; padding:.55rem .6rem;min-height:44px;color:var(--fg-2);transition:background var(--t1),color var(--t1);} .srch__r a:hover,.srch__r a:focus-visible{background:rgba(var(--acc-rgb),.12);color:var(--bone);} .srch__r b{font-family:var(--f-t);font-size:.88rem;font-weight:600;} .srch__none{padding:.7rem .6rem;} /* ═══ §26 WORK INDEX ════════════════════════════════════════════════════ */ /* When the header hides on scroll-down the sticky offset has to follow it, or the filter floats with a band of page showing above it. */ /* The bar paints a dark ground with a raw triplet, so inside a data-surface="paper" section it was dark text on a dark bar — the same trap the banner hit (HANDOVER §7.3). It re-declares its own tokens, like .bn. */ .wtabs{position:sticky;top:var(--hdr);z-index:60; --fg:var(--bone); --fg-2:var(--greige); --fg-3:var(--muted); --acc:var(--oak); --acc-2:var(--oak-lt); --on-acc:var(--basalt); --rule:rgba(185,196,192,.16); --rule-2:rgba(185,196,192,.34); color:var(--fg); transition:top 500ms var(--e-out); background:rgba(var(--up-rgb),.94);backdrop-filter:blur(14px); border-bottom:1px solid var(--rule);} .wtabs__in{width:var(--wrap);margin-inline:auto;display:flex;gap:.4rem; overflow-x:auto;padding:.7rem 0;scrollbar-width:none;} .wtabs__in::-webkit-scrollbar{display:none;} /* Desktop only. Below 760px the bar is fixed to the BOTTOM of the screen, and this selector outranks the mobile `top:auto` on specificity — so a hidden header gave the bar top:0 AND bottom:0 at once and stretched it over the whole viewport. Scoping it is the fix; raising the mobile specificity would just have been a second rule fighting the first. */ @media(min-width:761px){ body:has(.hdr.is-away) .wtabs{top:0;} } .wtab{flex:none;padding:.6rem 1rem;min-height:44px;border:1px solid var(--rule-2);background:none; cursor:pointer;font-family:var(--f-m);font-stretch:76%;font-size:.78rem;font-weight:550; text-transform:uppercase;letter-spacing:var(--ls);color:var(--bone); font-variant-numeric:tabular-nums; transition:border-color var(--t1),color var(--t1),background var(--t1);} .wtab:hover,.wtab:focus-visible{border-color:var(--acc);color:var(--oak-lt); background:rgba(var(--acc-rgb),.10);} .wtab[aria-selected="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc);} .wtab i{font-style:normal;opacity:.55;margin-left:.4rem;} @media(max-width:760px){ .wtabs{position:fixed;top:auto;bottom:0;border-bottom:0;border-top:1px solid var(--rule-2);} .wtabs__in{padding:.6rem 1.2rem;} body{padding-bottom:64px;} } .wlist{display:grid;gap:clamp(2.6rem,6vw,5rem);list-style:none;margin:0;padding:0;} .wcard{position:relative;display:grid;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;} /* An explicit display value beats the user-agent's [hidden]{display:none}, so the filter set the attribute and nothing disappeared. */ .wcard[hidden]{display:none;} @media(min-width:900px){ .wcard{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);} .wcard:nth-child(even) .wcard__m{order:2;} .wcard:nth-child(even) .wcard__c{order:1;} } /* the whole card is the link; the title carries its own so the target reads */ .wcard__hit{position:absolute;inset:0;z-index:2;} .wcard__m{position:relative;overflow:hidden;background:var(--bg-dn);aspect-ratio:4/3;} .wcard__m img,.wcard__m video{width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.001);transition:transform 1200ms var(--e-out);} @media(hover:hover){.wcard:hover .wcard__m img,.wcard:hover .wcard__m video{transform:scale(1.06);}} .wcard__veil{position:absolute;inset:0;z-index:1;display:grid;place-items:center; background:rgba(16,14,12,.38);transition:opacity 520ms var(--e-out);} .wcard__veil b{font-family:var(--f-m);font-stretch:72%;font-size:.68rem;text-transform:uppercase; letter-spacing:var(--ls);color:var(--bone);padding:.5rem .9rem; border:1px solid rgba(239,234,225,.5);background:rgba(16,14,12,.35);backdrop-filter:blur(3px); transition:opacity 420ms var(--e-out),transform 520ms var(--e-out);} @media(hover:hover){ .wcard:hover .wcard__veil{opacity:0;} .wcard:hover .wcard__veil b{opacity:0;transform:translateY(-8px);} } @media(hover:none){.wcard.is-in .wcard__veil{opacity:0;transition-delay:220ms;}} .wcard__film{position:absolute;left:.7rem;top:.7rem;z-index:3;padding:.24rem .5rem; background:rgba(16,14,12,.7);border:1px solid var(--rule-2);} .wcard__tools{position:absolute;top:.7rem;right:.7rem;z-index:4;display:flex;gap:.4rem;} .wic{display:grid;place-items:center;width:38px;height:38px;cursor:pointer; background:rgba(16,14,12,.62);border:1px solid var(--rule-2);color:var(--bone); backdrop-filter:blur(3px);transition:background var(--t1),border-color var(--t1);} .wic:hover{background:rgba(var(--acc-rgb),.85);border-color:var(--acc);} .wic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;} .wcard__c{display:grid;gap:.7rem;align-content:center;} .wcard__k{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;} .wcard__k span + span::before{content:"·";margin-right:.5rem;color:var(--fg-3);} .wcard__t{font-family:var(--f-d);font-variation-settings:"wdth" 88,"wght" 650; font-size:clamp(1.6rem,3.6vw,2.6rem);letter-spacing:-.035em;line-height:1.04;color:var(--fg);} .wcard__t a{position:relative;z-index:3;} .wcard__t a::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:1px; background:var(--acc);transform:scaleX(0);transform-origin:right; transition:transform 460ms var(--e-out);} .wcard:hover .wcard__t a::after,.wcard__t a:focus-visible::after{transform:scaleX(1);transform-origin:left;} .wcard__d{color:var(--fg-2);max-width:46ch;font-size:.94rem;} .wcard__go{display:inline-flex;align-items:center;gap:.6rem;justify-self:start;margin-top:.4rem; padding-bottom:.25rem;border-bottom:1px solid var(--rule-2);font-family:var(--f-t); font-size:.88rem;font-weight:600;color:var(--acc); transition:border-color var(--t1),gap var(--t1);} .wcard:hover .wcard__go{border-color:var(--acc);gap:.9rem;} .wcard__go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;} /* fullscreen film */ .wfs{position:fixed;inset:0;z-index:500;background:rgba(10,9,7,.97);display:grid; place-items:center;padding:clamp(1rem,4vw,3rem);opacity:0;visibility:hidden; transition:opacity 320ms var(--e-out),visibility 0s 320ms;} .wfs.is-on{opacity:1;visibility:visible;transition:opacity 320ms var(--e-out);} .wfs video{max-width:min(100%,520px);max-height:86vh;border:1px solid var(--rule);background:#000;} .wfs__x{position:absolute;top:clamp(.8rem,2vw,1.6rem);right:clamp(.8rem,2vw,1.6rem); width:46px;height:46px;} .wfs__cap{position:absolute;left:clamp(.8rem,2vw,1.6rem);bottom:clamp(.8rem,2vw,1.6rem);} /* ═══ §27 PROJECT PAGE ══════════════════════════════════════════════════ */ /* the overlap: photograph, then the headline straddling its lower edge */ /* The frame is pulled up so its head tucks behind the banner and reads as the banner's own ground, rather than starting as a separate block below it. */ /* The plate is inset on every side now rather than running full bleed, and it still rides up over the banner's lower edge — so it reads as a drawing pasted onto the sheet, with the sheet visible around it. */ .ovl{position:relative;z-index:2;width:var(--wrap);margin-inline:auto; margin-top:clamp(-4.5rem,-7vw,-2rem);} .ovl__img{position:relative;width:100%;overflow:hidden;background:var(--bg-dn); border:1px solid var(--rule-2);} .ovl__img img{width:100%;height:auto;display:block;} /* corner ticks, sitting on the edge so they never add a scrollbar */ .ovl__fr{position:absolute;inset:0;z-index:2;pointer-events:none;} .ovl__fr b{position:absolute;width:11px;height:11px;border:0 solid var(--acc);opacity:.9;} .ovl__fr b:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px;} .ovl__fr b:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px;} .ovl__fr b:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px;} .ovl__fr b:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px;} .ovl__img::after{content:"";position:absolute;left:0;right:0;bottom:0; height:clamp(90px,14vw,190px);pointer-events:none; background:linear-gradient(180deg,transparent,var(--bg) 92%);} .ovl__t{position:relative;z-index:3;width:100%; font-family:var(--f-d);font-variation-settings:"wdth" 80,"wght" 700; font-size:clamp(2rem,6.4vw,4.8rem);line-height:.94;letter-spacing:-.045em;color:var(--fg); margin-top:clamp(-3.6rem,-6.4vw,-1.8rem); transform:translateY(22px);opacity:0; transition:transform 900ms var(--e-out),opacity 700ms var(--e-out);} .ovl.is-in .ovl__t,.is-in .ovl__t{transform:translateY(0);opacity:1;} .ovl__m{position:relative;width:100%;display:flex; justify-content:space-between;gap:1rem;flex-wrap:wrap; padding:1rem 0 1.1rem;border-bottom:1px solid var(--rule);} /* ── THE SHEET OPENING ──────────────────────────────────────────────────── A meta rail, the headline, the brief and an index of what is on the sheet. This replaced three stacked title blocks: the banner's project name, then a headline, then the project name again. */ .popen{padding:clamp(1.8rem,4vw,3rem) 0 clamp(2rem,4.5vw,3.4rem);} .popen__rail{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:baseline; padding:.75rem 0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule);} .popen__rail .lab:nth-child(2){margin-inline-end:auto;} .popen__body{display:grid;gap:clamp(1.6rem,3.4vw,2.6rem); padding-top:clamp(1.6rem,3.4vw,2.6rem);} @media(min-width:900px){ .popen__body{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(2.4rem,6vw,5.5rem);align-items:start;} } .popen__t{font-family:var(--f-d);font-variation-settings:"wdth" 82,"wght" 680; font-size:clamp(1.85rem,5vw,3.5rem);line-height:1.0;letter-spacing:-.04em; color:var(--fg);max-width:15ch;text-wrap:balance;} .popen__side{display:grid;gap:clamp(1.4rem,3vw,2.2rem);} .popen__d{color:var(--fg-2);max-width:56ch;} .popen__d p + p{margin-top:.85rem;} /* the sheet index — a drawing set carries one, and it gives the page its own internal navigation instead of a wall of scrolling */ .popen__ix{display:grid;border-top:1px solid var(--rule);} .popen__ix__k{padding:.9rem 0 .3rem;color:var(--acc);} .popen__ix a{position:relative;display:grid;grid-template-columns:auto 1fr auto; align-items:baseline;gap:.9rem;min-height:44px;padding:.6rem 0; border-bottom:1px solid var(--rule);color:var(--fg); transition:color var(--t1),padding-left var(--t1);} .popen__ix a em{font-style:normal;font-family:var(--f-m);font-stretch:72%; font-variant-numeric:tabular-nums;font-size:.6rem;letter-spacing:var(--ls);color:var(--fg-3); transition:color var(--t1);} .popen__ix a span{font-family:var(--f-t);font-size:.98rem;font-weight:500;} .popen__ix a i{width:16px;height:1px;background:var(--rule-2);align-self:center; transition:width var(--t1),background var(--t1);} .popen__ix a:hover,.popen__ix a:focus-visible{color:var(--acc-2);padding-left:.45rem;} .popen__ix a:hover em,.popen__ix a:focus-visible em{color:var(--acc);} .popen__ix a:hover i,.popen__ix a:focus-visible i{width:26px;background:var(--acc);} /* .pintro removed — merged into .popen, the sheet opening. */ /* the remaining frames, one at a time */ .pslide{position:relative;} .pslide__v{position:relative;overflow:hidden;background:var(--bg-dn); aspect-ratio:16/10;border:1px solid var(--rule);} .pslide__v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transition:opacity 620ms var(--e-out);} .pslide__v img.is-on{opacity:1;} .pslide__nav{position:absolute;inset:0;display:flex;align-items:center; justify-content:space-between;padding:0 clamp(.6rem,1.6vw,1.1rem);pointer-events:none;} .pslide__nav .wic{pointer-events:auto;width:44px;height:44px;} .pslide__f{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.8rem;} .pslide__dots{display:flex;gap:5px;} .pslide__dots i{width:22px;height:2px;background:var(--rule-2);cursor:pointer; transition:background var(--t1);} .pslide__dots i.is-on{background:var(--acc);} /* what the run is made of */ .pspec{display:grid;gap:clamp(1.4rem,3vw,2.4rem);padding:clamp(2.4rem,5vw,3.6rem) 0; border-top:1px solid var(--rule);} @media(min-width:820px){ .pspec{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem); align-items:start;} /* No materials recorded, so no aside: the title block takes the row rather than sitting in half of it beside nothing. Capped at a reading measure — a field list stretched to the full gutter is harder to scan, not easier. */ .pspec--solo{grid-template-columns:minmax(0,1fr);} .pspec--solo > div{max-width:54rem;} } /* The specification, drawn as an actual title block: a caption bar, then field rows. It is the most literal use of the drawing vocabulary on the site, and the one place it should be literal — this is the data. */ .pspec__l{border:1px solid var(--rule-2);} .pspec__cap{display:flex;justify-content:space-between;gap:1rem;align-items:baseline; padding:.6rem .8rem;background:var(--bg-up);border-bottom:1px solid var(--rule-2);} .pspec__l > div{display:grid;grid-template-columns:8.5rem 1fr; border-bottom:1px solid var(--rule);transition:background var(--t1);} .pspec__l > div:last-child{border-bottom:0;} .pspec__l > div:hover{background:rgba(var(--acc-rgb),.06);} .pspec__l dt{padding:.66rem .8rem;border-right:1px solid var(--rule);} .pspec__l dd{padding:.66rem .8rem;margin:0;font-family:var(--f-t);font-size:.9rem; font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums;} .pmats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.8rem;} .pmat{display:grid;gap:.5rem;border:1px solid var(--rule);padding:.5rem; transition:border-color var(--t1);} .pmat:hover{border-color:var(--acc);} .pmat i{display:block;aspect-ratio:4/3; background-image:linear-gradient(140deg,var(--sw),var(--sw2)); position:relative;} /* a corner tick, so a swatch reads as a specimen on a sheet, not a colour chip */ .pmat i::after{content:"";position:absolute;top:0;left:0;width:9px;height:9px; border-top:1px solid rgba(239,234,225,.6);border-left:1px solid rgba(239,234,225,.6);} .pmat b{font-family:var(--f-t);font-size:.84rem;font-weight:600;color:var(--fg); line-height:1.25;} /* the next project, its own photograph as the ground */ .pnext{--fg:var(--bone);--fg-2:var(--greige);--fg-3:var(--muted); --acc:var(--oak);--acc-2:var(--oak-lt);--rule:rgba(185,196,192,.16); position:relative;overflow:hidden;display:grid;align-items:end;color:var(--bone); min-height:clamp(260px,42vh,420px);border-top:1px solid var(--rule);} .pnext__bg{position:absolute;inset:0;z-index:1;} .pnext__bg img{width:100%;height:100%;object-fit:cover; filter:saturate(.82) brightness(.6);transform:scale(1.04); transition:transform 1400ms var(--e-out),filter 700ms var(--e-out);} .pnext:hover .pnext__bg img{transform:scale(1.09);filter:saturate(.9) brightness(.68);} .pnext__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(16,14,12,.9),rgba(16,14,12,.35) 60%,rgba(16,14,12,.5));} .pnext__in{position:relative;z-index:2;width:var(--wrap);margin-inline:auto; padding:clamp(1.6rem,4vw,2.6rem) 0;display:grid;gap:.6rem;} .pnext__t{font-family:var(--f-d);font-variation-settings:"wdth" 86,"wght" 650; font-size:clamp(1.8rem,4.6vw,3.2rem);letter-spacing:-.035em;line-height:1.02;} .pnext__go{display:inline-flex;align-items:center;gap:.6rem;justify-self:start; color:var(--acc-2);font-family:var(--f-t);font-weight:600;font-size:.9rem; transition:gap var(--t1);} .pnext:hover .pnext__go{gap:.95rem;} .pnext__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;} /* the band is the last thing before the footer — nothing trails after it */ .sec:has(> .pnext){padding-bottom:0;} /* ═══ §28 THE FILLING NUMERAL ═══════════════════════════════════════════ An outline numeral that fills from the bottom as its block is read, each in a different tone from the material palette. background-clip:text paints the fill; the stroke stays, so the number is legible from 0% to 100%. */ .fnum{font-family:var(--f-d);font-variation-settings:"wdth" 78,"wght" 700; line-height:.78;letter-spacing:-.05em; -webkit-text-stroke:1px var(--acc); color:transparent; background-image:linear-gradient(to top, var(--fc,var(--oak)) 0%, var(--fc,var(--oak)) calc(var(--fill,0) * 100%), transparent calc(var(--fill,0) * 100%)); -webkit-background-clip:text;background-clip:text;} @media(prefers-reduced-motion:reduce){ .fnum{background-image:linear-gradient(to top,var(--fc,var(--oak)) 0%,var(--fc,var(--oak)) 100%);} } /* ═══ §29 SERVICES — alternating specification sheets ═══════════════════ */ /* the sheet index — same convention as the project page, so the two read as pages from one document rather than two different layouts */ .sidx{margin-bottom:clamp(1.6rem,3.4vw,2.6rem);} .sidx__k{display:block;color:var(--acc);padding-bottom:.55rem; border-bottom:1px solid var(--rule-2);} .sidx__l{list-style:none;margin:0;padding:0;display:grid;} @media(min-width:760px){.sidx__l{grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,4vw,3.5rem);}} .sidx__l a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:.85rem; min-height:44px;padding:.55rem 0;border-bottom:1px solid var(--rule);color:var(--fg); transition:color var(--t1),padding-left var(--t1);} .sidx__l em{font-style:normal;font-family:var(--f-m);font-stretch:72%; font-variant-numeric:tabular-nums;font-size:.6rem;letter-spacing:var(--ls); color:var(--fg-3);transition:color var(--t1);} .sidx__l span{font-family:var(--f-t);font-size:.95rem;font-weight:500;} .sidx__l i{width:14px;height:1px;background:var(--rule-2);align-self:center; transition:width var(--t1),background var(--t1);} .sidx__l a:hover,.sidx__l a:focus-visible{color:var(--acc-2);padding-left:.4rem;} .sidx__l a:hover em,.sidx__l a:focus-visible em{color:var(--acc);} .sidx__l a:hover i,.sidx__l a:focus-visible i{width:24px;background:var(--acc);} .shts{border-top:1px solid var(--rule);list-style:none;margin:0;padding:0;} /* the row answers the pointer: the numeral warms and the chips pick up the rule */ .sht{transition:background var(--t2);} .sht:hover .sht__l li{border-color:rgba(var(--acc-rgb),.55);color:var(--fg);} .sht__l li{transition:border-color var(--t1),color var(--t1);} /* anchored rows land clear of the fixed bar */ .sht{scroll-margin-top:calc(var(--hdr) + 20px);} .sht{border-bottom:1px solid var(--rule);padding:clamp(2rem,4.5vw,3.4rem) 0; display:grid;gap:1.4rem;} .sht__n{font-size:clamp(3.4rem,11vw,8.5rem);} .sht__b{max-width:46ch;} .sht__k{display:block;margin-bottom:.5rem;} .sht__t{font-family:var(--f-d);font-variation-settings:"wdth" 94,"wght" 650; font-size:clamp(1.3rem,2.6vw,1.75rem);letter-spacing:-.025em;margin-bottom:.7rem;} .sht__b p{color:var(--fg-2);} .sht__l{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;list-style:none;padding:0;} .sht__l li{padding:.34rem .66rem;border:1px solid var(--rule-2);font-family:var(--f-m); font-stretch:72%;font-size:.6rem;text-transform:uppercase;letter-spacing:var(--ls); color:var(--fg-2);} @media(min-width:900px){ .sht{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(2rem,6vw,5rem); align-items:start;} .sht:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,auto);} .sht:nth-child(even) .sht__n{order:2;justify-self:end;} .sht:nth-child(even) .sht__b{order:1;justify-self:end;text-align:right;} .sht:nth-child(even) .sht__l{justify-content:flex-end;} } /* ═══ §30 PROCESS — stage bands with a sticky panel ═════════════════════ */ @media(min-width:980px){ .stgx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(2rem,5vw,4rem);align-items:start;} } .stg{position:relative;} .stg__rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--rule);} .stg__rail b{position:absolute;inset:0 0 auto;height:0;background:var(--acc);display:block; transition:height 180ms linear;} .stg__l{list-style:none;margin:0;padding:0;} .stg__i{border-bottom:1px solid var(--rule); padding:clamp(1.8rem,4vw,3rem) 0 clamp(1.8rem,4vw,3rem) clamp(1.4rem,4vw,3.4rem); display:grid;gap:1rem;} .stg__i:first-child{border-top:1px solid var(--rule);} @media(min-width:900px){ .stg__i{grid-template-columns:auto 96px minmax(0,1fr);gap:clamp(1.4rem,3.4vw,2.8rem); align-items:start;} } .stg__n{font-size:clamp(2.4rem,7vw,5.2rem);} .stg__g{width:clamp(58px,9vw,96px);} .stg__g svg{width:100%;height:auto;} .stg__g path{fill:none;stroke:var(--draw-1);stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round; /* M1 — the stroke draws from zero along its own path. pathLength="1" on the markup means one rule serves every glyph whatever its real length. */ stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset 1200ms var(--e-out);} .stg__i.is-in .stg__g path{stroke-dashoffset:0;} .stg__i.is-in .stg__g path:nth-child(2){transition-delay:110ms} .stg__i.is-in .stg__g path:nth-child(3){transition-delay:220ms} .stg__i.is-in .stg__g path:nth-child(4){transition-delay:330ms} .stg__i.is-in .stg__g path:nth-child(5){transition-delay:440ms} /* The sticky panel's glyph is a live indicator, not a reveal: it is cloned in as the reader moves between stages and has no .stg__i to inherit is-in from, so the draw rule above would have left it permanently invisible. */ #pxG path{stroke-dashoffset:0;transition:none;} @media(prefers-reduced-motion:reduce){ .stg__g path{stroke-dashoffset:0;transition:none;} } .stg__t{font-family:var(--f-d);font-variation-settings:"wdth" 94,"wght" 650; font-size:clamp(1.25rem,2.5vw,1.7rem);letter-spacing:-.025em;margin-bottom:.6rem;} .stg__c p{color:var(--fg-2);max-width:52ch;} .stg__o{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--rule); display:grid;gap:.3rem;max-width:52ch;} .stg__o b{font-family:var(--f-t);font-size:.88rem;font-weight:600;color:var(--acc-2);} /* the sticky panel, with the stage's own photograph behind it */ .stgx__panel{display:none;} @media(min-width:980px){ .stgx__panel{display:grid;position:sticky;top:calc(var(--hdr) + 2rem); overflow:hidden;min-height:clamp(340px,54vh,520px); border:1px solid var(--rule);align-content:end; --fg:var(--bone);--fg-2:var(--greige);--fg-3:var(--muted); --acc:var(--oak);--acc-2:var(--oak-lt);--rule:rgba(185,196,192,.2); color:var(--bone);} } .stgx__bg{position:absolute;inset:0;z-index:1;} .stgx__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; filter:saturate(.86) brightness(.62);transform:scale(1.05); transition:opacity 700ms var(--e-out),transform 1600ms var(--e-out);} .stgx__bg img.is-on{opacity:1;transform:scale(1);} .stgx__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(16,14,12,.92),rgba(16,14,12,.42) 58%,rgba(16,14,12,.55));} .stgx__in{position:relative;z-index:2;display:grid;gap:.9rem; padding:clamp(1.2rem,2.4vw,1.8rem);} .stgx__n{font-size:clamp(3rem,6vw,5rem);-webkit-text-stroke-color:var(--oak-lt);} .stgx__t{font-family:var(--f-d);font-variation-settings:"wdth" 94,"wght" 650; font-size:clamp(1.1rem,2vw,1.45rem);letter-spacing:-.02em;color:var(--bone);} .stgx__o{padding-top:.7rem;border-top:1px solid rgba(185,196,192,.24);color:var(--oak-lt); font-family:var(--f-t);font-size:.88rem;font-weight:600;} .stgx__prog{display:flex;gap:4px;} .stgx__prog i{flex:1;height:2px;background:rgba(185,196,192,.22);transition:background var(--t1);} .stgx__prog i.is-on{background:var(--oak);} /* ═══ §31 THE CENTRED LEAD ══════════════════════════════════════════════ Replaces the two-column .bnf block under the banner. One measured column, centred, between two rules that draw themselves outward as it arrives — the same drawn language the sheet breaks use, at the head of the page. */ .plead{position:relative;display:grid;justify-items:center;text-align:center; gap:clamp(1rem,2.2vw,1.5rem); padding:clamp(2rem,4.6vw,3.4rem) 0 clamp(1.6rem,3.4vw,2.4rem);} .plead__r{display:block;width:min(100%,560px);height:1px;background:var(--rule-2); transform:scaleX(0);transform-origin:center; transition:transform 900ms var(--e-out);} .plead.is-in .plead__r,.is-in .plead__r{transform:scaleX(1);} .plead__r--b{transition-delay:120ms;} .plead__k{display:flex;align-items:center;gap:.7rem;} .plead__k i{display:block;width:20px;height:1px;background:var(--acc);} .plead__t{max-width:56ch;font-size:clamp(1.02rem,1.9vw,1.28rem);line-height:1.55; color:var(--fg-2);text-wrap:balance;} .plead__t b{color:var(--fg);font-weight:600;} /* a mark that draws itself under the line, so the block has a foot as well as a head */ .plead__m{position:relative;width:44px;height:44px;display:grid;place-items:center;} .plead__m svg{position:absolute;inset:0;width:100%;height:100%;} .plead__m .nbox{fill:none;stroke:var(--acc);stroke-width:1; stroke-dasharray:200;stroke-dashoffset:200; transition:stroke-dashoffset 1100ms var(--e-out) 200ms;} .plead.is-in .plead__m .nbox,.is-in .plead__m .nbox{stroke-dashoffset:0;} .plead__m b{font-family:var(--f-m);font-stretch:72%;font-size:.62rem; letter-spacing:var(--ls);color:var(--acc);} @media(prefers-reduced-motion:reduce){ .plead__r{transform:scaleX(1);} .plead__m .nbox{stroke-dashoffset:0;} } /* A film in the overlap frame: these clips are shot vertically, so the frame is capped to their proportions and centred rather than stretched across the page. */ .ovl--v .ovl__img{display:grid;justify-items:center;background:var(--sunk);} .ovl--v .ovl__img video{width:auto;max-width:min(100%,460px);max-height:76vh;height:auto; display:block;border:1px solid var(--rule);} @media(min-width:900px){.ovl--v .ovl__img video{max-width:min(100%,520px);}} .ovl--v .ovl__img::after{display:none;} /* ═══ §32 MATERIALS — the palette band ══════════════════════════════════ The one page where the material itself is the content, so colour takes the space. The specimen board that used to open this page (.spx / .spc) went with the block it belonged to — the page now opens on the three drawn statements, and the palette survives as the band alone. */ /* anchored sections land clear of the fixed bar */ .cmp{scroll-margin-top:calc(var(--hdr) + 20px);} /* the whole palette in one band, edge to edge */ .cmp{margin-top:clamp(2.4rem,5vw,3.6rem);} .cmp__band{display:flex;height:clamp(58px,8.5vw,104px);border:1px solid var(--rule);} .cmp__band i{flex:1;display:block;background-image:linear-gradient(180deg,var(--sw),var(--sw2)); transform:scaleY(0);transform-origin:bottom;transition:transform 760ms var(--e-out);} .cmp.is-in .cmp__band i,.is-in .cmp__band i{transform:scaleY(1);} .cmp__band i:nth-child(1){transition-delay:0ms} .cmp__band i:nth-child(2){transition-delay:55ms} .cmp__band i:nth-child(3){transition-delay:110ms} .cmp__band i:nth-child(4){transition-delay:165ms} .cmp__band i:nth-child(5){transition-delay:220ms} .cmp__band i:nth-child(6){transition-delay:275ms} .cmp__band i:nth-child(7){transition-delay:330ms} .cmp__band i:nth-child(8){transition-delay:385ms} .cmp__band i:nth-child(9){transition-delay:440ms} .cmp__labs{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));margin-top:.5rem;} .cmp__labs span{font-family:var(--f-m);font-stretch:72%;font-size:.5rem; letter-spacing:var(--ls);text-transform:uppercase;color:var(--fg-3); padding-right:.3rem;line-height:1.25;} @media(max-width:700px){.cmp__labs span{font-size:.42rem;}} /* ═══ §33 MATERIALS IN CONTEXT — the finish study ═══════════════════════ One locked scene with the finish changing under it. A crossfade only: no zoom and no parallax, because anything that moves makes two finishes harder to compare, and comparing them is the entire point. */ .fs{--fg:var(--bone);--fg-2:var(--greige);--fg-3:var(--muted); --acc:var(--oak);--acc-2:var(--oak-lt);--rule:rgba(185,196,192,.18); --rule-2:rgba(185,196,192,.32); background:var(--sunk);color:var(--bone); padding:clamp(2.2rem,5vw,3.6rem) 0;border-block:1px solid rgba(185,196,192,.16);} .fs__in{width:var(--wrap);margin-inline:auto;display:grid;gap:1.1rem;} .fs__tabs{display:flex;flex-wrap:wrap;gap:.4rem;} /* min-height, not padding: these measured 36px, under the 44px floor R3 sets for coarse pointers, and this is a control you tap on a phone. */ .fs__tab{padding:.5rem .9rem;min-height:44px;display:inline-flex;align-items:center; border:1px solid var(--rule-2);background:none;cursor:pointer; font-family:var(--f-m);font-stretch:72%;font-size:.68rem;text-transform:uppercase; letter-spacing:var(--ls);color:var(--fg-2); transition:border-color var(--t1),color var(--t1),background var(--t1);} .fs__tab:hover{border-color:var(--acc);color:var(--bone);} .fs__tab[aria-selected="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc);} .fs__stage{position:relative;width:100%;overflow:hidden;background:var(--basalt); border:1px solid var(--rule);} .fs__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transition:opacity 520ms var(--e-out);} .fs__stage img.is-on{opacity:1;} .fs__sw{display:flex;flex-wrap:wrap;gap:.55rem;} .fs__b{display:grid;gap:.42rem;justify-items:center;background:none;border:0;cursor:pointer; padding:0;width:clamp(60px,9vw,92px);} .fs__b i{display:block;width:100%;aspect-ratio:3/2;border:1px solid var(--rule-2); background-size:cover;background-position:center; transition:border-color var(--t1),transform var(--t1);} .fs__b span{font-family:var(--f-m);font-stretch:72%;font-size:.54rem;text-transform:uppercase; letter-spacing:var(--ls);color:var(--fg-3);text-align:center;line-height:1.25;} .fs__b:hover i{border-color:var(--acc);transform:translateY(-2px);} .fs__b[aria-pressed="true"] i{border-color:var(--acc);box-shadow:0 0 0 2px rgba(var(--acc-rgb),.4);} .fs__b[aria-pressed="true"] span{color:var(--bone);} .fs__foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding-top:.75rem;border-top:1px solid var(--rule);} .fs__cap b{font-family:var(--f-t);font-size:.95rem;font-weight:600;color:var(--bone);} .fs__note{max-width:60ch;} /* the studio sits at the end of the study — the same idea, taken further */ .stub{position:relative;overflow:hidden;display:grid;align-items:end; min-height:clamp(240px,38vh,380px);margin-top:clamp(1.6rem,3.4vw,2.4rem); border:1px solid var(--rule);} .stub__bg{position:absolute;inset:0;z-index:1;} .stub__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.5); transform:scale(1.04);transition:transform 1400ms var(--e-out),filter 700ms var(--e-out);} .stub:hover .stub__bg img{transform:scale(1.09);filter:saturate(.9) brightness(.6);} .stub__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(16,14,12,.92),rgba(16,14,12,.4) 62%,rgba(16,14,12,.5));} .stub__in{position:relative;z-index:2;display:grid;gap:.7rem;justify-items:start; padding:clamp(1.3rem,3vw,2.2rem);} .stub__t{font-family:var(--f-d);font-variation-settings:"wdth" 86,"wght" 650; font-size:clamp(1.5rem,3.6vw,2.4rem);letter-spacing:-.035em;line-height:1.04;color:var(--bone);} .stub__d{color:var(--greige);max-width:52ch;font-size:.94rem;} .stub__go{display:inline-flex;align-items:center;gap:.6rem;color:var(--oak-lt); font-family:var(--f-t);font-weight:600;font-size:.9rem;transition:gap var(--t1);} .stub:hover .stub__go{gap:.95rem;} .stub__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;} @media(prefers-reduced-motion:reduce){ .fs__stage img,.spc__f,.cmp__band i,.stub__bg img{transition-duration:1ms!important;} .cmp__band i{transition-delay:0ms!important;} } /* ═══ §34 ABOUT ═════════════════════════════════════════════════════════ Two facts carry this page: a licensed shop, and one team from drawing to installation. Everything else is arrangement. */ .abt{display:grid;gap:clamp(1.6rem,4vw,2.8rem);padding:clamp(2rem,4.6vw,3.4rem) 0;} @media(min-width:900px){ .abt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.4rem,6vw,5rem); align-items:start;} } .abt__p{color:var(--fg-2);} .abt__p p + p{margin-top:.9rem;} .abt__fig{position:relative;overflow:hidden;background:var(--bg-dn);aspect-ratio:4/3;} .abt__fig img{width:100%;height:100%;object-fit:cover;display:block;} .abt__cap{position:absolute;left:.8rem;bottom:.8rem;z-index:2;padding:.3rem .55rem; background:rgba(16,14,12,.72);color:var(--bone);backdrop-filter:blur(3px);} /* the licence, stated once and plainly */ .creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border:1px solid var(--rule);margin-top:clamp(1.4rem,3vw,2.2rem);} .creds div{padding:clamp(.9rem,1.8vw,1.2rem);border-right:1px solid var(--rule);} .creds div:last-child{border-right:0;} .creds dt{margin-bottom:.35rem;} .creds dd{margin:0;font-family:var(--f-d);font-variation-settings:"wdth" 92,"wght" 650; font-size:clamp(1.05rem,2.2vw,1.45rem);letter-spacing:-.02em;color:var(--fg);} @media(max-width:640px){ .creds{grid-template-columns:repeat(2,1fr);} .creds div{border-bottom:1px solid var(--rule);} } .says__grid{display:grid;gap:clamp(1rem,2.4vw,1.6rem);list-style:none;margin:0;padding:0;} @media(min-width:760px){.says__grid{grid-template-columns:repeat(2,minmax(0,1fr));}} .say{border:1px solid var(--rule);padding:clamp(1.1rem,2.4vw,1.6rem);display:grid;gap:.9rem;} .say__q{font-family:var(--f-t);font-size:clamp(.98rem,2vw,1.08rem);line-height:1.6; color:var(--fg);margin:0;} .say__f{display:grid;gap:.2rem;} .say__f cite{font-style:normal;font-family:var(--f-t);font-size:.88rem;font-weight:600; color:var(--fg);} /* ═══ §35 CONTACT — the values set at heading scale ═════════════════════ On the page whose whole job is to be contacted, the email and the phone should be the largest thing on it, not set at 0.76rem. */ .cx{display:grid;gap:2.4rem;padding:clamp(2rem,4.6vw,3.2rem) 0;} @media(min-width:900px){.cx{grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,5rem);}} .cx__l{display:grid;} .cx__r{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem; padding:clamp(1rem,2.4vw,1.5rem) 0;border-bottom:1px solid var(--rule); transition:border-color var(--t1);} .cx__l > .cx__r:first-child{border-top:1px solid var(--rule);} .cx__r:hover{border-color:var(--acc);} .cx__r b{display:block;font-family:var(--f-d);font-variation-settings:"wdth" 90,"wght" 650; font-size:clamp(1.15rem,3.2vw,2rem);letter-spacing:-.03em;line-height:1.1;color:var(--fg); word-break:break-word;} .cx__r .lab{display:block;margin-bottom:.35rem;} .cx__r svg{width:17px;height:17px;fill:none;stroke:var(--acc);stroke-width:1.6; transition:transform var(--t1);} .cx__r:hover svg{transform:translate(3px,-3px);} .cx__plan{border:1px solid var(--rule);padding:clamp(1rem,2.4vw,1.5rem);display:grid;gap:1rem; align-content:start;} .cx__plan svg{width:100%;height:auto;} .cx__plan .pl{fill:none;stroke:var(--draw-2);stroke-width:1;} .cx__plan .e-txt text{fill:var(--draw-3);font-family:var(--f-m);font-stretch:72%; font-size:13px;letter-spacing:.6px;} .brief__l{display:grid;gap:.7rem;list-style:none;margin:1rem 0 0;padding:0;counter-reset:b;} .brief__l li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:baseline;} .brief__l b{font-family:var(--f-m);font-stretch:72%;font-size:.66rem;letter-spacing:var(--ls); color:var(--acc);} .brief__l span{color:var(--fg-2);font-size:.92rem;} /* ═══ §32 THE DRIFT FIELD ════════════════════════════════════════════════ An ambient drafting-table ground for the editorial pages. Every mark in it is one that appears on a real drawing (see the component for why). Ambient pan under R4: it drifts sideways, it never converges on the reader. Decorative and inert — aria-hidden, no pointer events, still under prefers-reduced-motion. */ .dfld{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none; color:var(--fg);} .dfld--paper{opacity:.085;} .dfld--dark{opacity:.14;} /* the plane. Two gradients, drifting as one — a grid that scrolls diagonally at a speed you notice only if you stop and look for it. */ .dfld__grid{position:absolute;inset:-84px; background-image: repeating-linear-gradient(to right,currentColor 0 1px,transparent 1px 84px), repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 84px); opacity:.5; animation:dfld-plane 90s linear infinite;} @keyframes dfld-plane{from{transform:translate3d(0,0,0)} to {transform:translate3d(84px,84px,0)}} .dfld__g{position:absolute;left:var(--x);top:var(--y); width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); animation:dfld-drift var(--dur) ease-in-out var(--del) infinite alternate;} .dfld__g svg{width:100%;height:100%;display:block;} /* each glyph travels its own way, so the field never reads as one sliding sheet */ @keyframes dfld-drift{ from{transform:translate3d(-2.2%,1.6%,0) rotate(-1.4deg)} to {transform:translate3d(2.6%,-1.8%,0) rotate(1.6deg)}} /* Below 760px the glyphs crowd the text more than they add, so only the plane stays — the texture survives, the clutter does not. */ @media(max-width:759px){ .dfld__g{display:none;} .dfld--paper{opacity:.06;} } @media(prefers-reduced-motion:reduce){ .dfld__grid,.dfld__g{animation:none;} } /* the section has to establish a stacking context, and its content sit over it */ .sec--field{position:relative;isolation:isolate;} .sec--field > .wrap,.sec--field > .bn{position:relative;z-index:1;} /* ═══ §33 ABOUT — TWO DISCIPLINES ════════════════════════════════════════ Two columns that converge on a node. The page's best line — one founder from engineering, one from the craft — was buried in a paragraph; this gives it the structure the business actually has. The connector is drawn, not decorative: two rules meeting at a point is how a drawing shows a joint. */ .two{display:grid;gap:clamp(1.8rem,4vw,2.6rem); padding:clamp(2.4rem,5vw,4rem) 0 clamp(1.2rem,2.4vw,1.8rem); border-top:1px solid var(--rule);margin-top:clamp(2rem,4vw,3.2rem);} @media(min-width:900px){ .two{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:clamp(1.6rem,3.4vw,3rem);align-items:start;} } .two__col{display:grid;gap:.75rem;align-content:start;} .two__k{color:var(--acc);} .two__fig{position:relative;margin:0;overflow:hidden;background:var(--bg-dn); aspect-ratio:16/10;border:1px solid var(--rule);} .two__fig img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter); transform:scale(1.02);transition:transform 1600ms var(--e-out);} .two__col:hover .two__fig img{transform:scale(1.06);} @media(hover:none){.two.is-in .two__fig img{transform:scale(1.04);}} .two__tick{position:absolute;top:0;left:0;width:12px;height:12px; border-top:1px solid var(--acc);border-left:1px solid var(--acc);} .two__t{font-family:var(--f-d);font-variation-settings:"wdth" 92,"wght" 650; font-size:clamp(1.15rem,2.4vw,1.5rem);letter-spacing:-.025em;color:var(--fg); margin-top:.35rem;} .two__col p{color:var(--fg-2);font-size:.95rem;max-width:42ch;} /* the connector — vertical on a phone, horizontal once they sit side by side */ .two__mid{display:flex;align-items:center;justify-content:center;gap:.6rem; padding:.4rem 0;} @media(min-width:900px){.two__mid{flex-direction:column;align-self:stretch;padding:3.4rem 0 0;}} .two__line{display:block;background:var(--rule-2);} .two__mid .two__line{width:34px;height:1px;transform:scaleX(0);transform-origin:left; transition:transform 760ms var(--e-out);} @media(min-width:900px){ .two__mid .two__line{width:1px;height:auto;flex:1;min-height:38px; transform:scaleY(0);transform-origin:top;} } .two.is-in .two__line,.is-in .two__mid .two__line{transform:none;} .two__node{width:9px;height:9px;flex:none;border:1px solid var(--acc); transform:rotate(45deg) scale(0); transition:transform 620ms var(--e-out) 420ms;} .two.is-in .two__node,.is-in .two__node{transform:rotate(45deg) scale(1);} .two__foot{display:block;padding-bottom:clamp(1.4rem,3vw,2.2rem);color:var(--fg-3);} @media(prefers-reduced-motion:reduce){ .two__line{transform:none!important;} .two__node{transform:rotate(45deg) scale(1)!important;} .two__fig img{transition:none;} } /* ═══ §34 ABOUT — THE COVER SHEET ════════════════════════════════════════ This page's own composition device (R14). A drawing set opens with a cover sheet carrying the firm, the licence, the location and the disciplines — which is exactly what an About page carries. Nothing else on the site uses a full-width field block like this. */ /* Two .sec--in blocks sit back to back here on the same paper surface, and each was paying the full 70px rhythm — 141px of empty ground with no change of surface to justify it. The first drops its bottom padding so the join costs one interval, not two. */ .abt-sec{padding-bottom:0;} .cover{border:1px solid var(--rule-2);margin-top:clamp(1.6rem,3.4vw,2.6rem);} .cover__hd{display:flex;justify-content:space-between;gap:1rem;align-items:baseline; padding:.7rem .9rem;background:var(--bg-up);border-bottom:1px solid var(--rule-2);} /* Lines are the grid gap, not cell borders. Per-cell borders needed nth-child maths to strip the last column — and the first cell spans two columns, so that maths pointed at the wrong cells and left a hairline on the block's own edge. A 1px gap over the rule colour is count-independent: lines fall only between cells, never at the perimeter, whatever the field count becomes. */ .cover__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0; gap:1px;background:var(--rule);} @media(min-width:720px){ .cover__g{grid-template-columns:repeat(4,minmax(0,1fr));} .cover__c--wide{grid-column:span 2;} } .cover__c{padding:.95rem;background:var(--bg); display:grid;gap:.3rem;align-content:start;} .cover__c dt{margin:0;} .cover__c dd{margin:0;font-family:var(--f-t);font-size:1rem;font-weight:600;color:var(--fg); line-height:1.3;} .cover__c dd i{display:block;font-style:normal;font-family:var(--f-m);font-stretch:72%; font-size:.58rem;letter-spacing:var(--ls);text-transform:uppercase;color:var(--fg-3); font-weight:500;margin-top:.28rem;} /* the licence reads as a stamp, because that is what it is */ .cover__stamp{color:var(--acc)!important;font-family:var(--f-m)!important;font-stretch:72%; font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:1.12rem!important;} /* narrative: the mark and headline hold the left, the prose the right */ .abt2{display:grid;gap:clamp(1.2rem,2.6vw,2rem); padding:clamp(2.4rem,5vw,3.8rem) 0 0;} @media(min-width:900px){ .abt2{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2.4rem,6vw,5rem);align-items:start;} } .abt2__b{color:var(--fg-2);} .abt2__b p + p{margin-top:.85rem;} /* the shop plate — framed and captioned at both ends */ .plate{position:relative;margin:clamp(2.2rem,4.5vw,3.4rem) 0 0;overflow:hidden; background:var(--bg-dn);border:1px solid var(--rule-2);} .plate img{width:100%;height:auto;display:block;filter:var(--img-filter);} .plate__fr{position:absolute;inset:0;pointer-events:none;} .plate__fr b{position:absolute;width:12px;height:12px;border:0 solid var(--acc);} .plate__fr b:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px;} .plate__fr b:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px;} .plate__fr b:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px;} .plate__fr b:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px;} .plate__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem; padding:.7rem .9rem;background:var(--bg-up);border-top:1px solid var(--rule);} /* ── THE RECORD ─────────────────────────────────────────────────────────── Testimonials as numbered rows with the scope alongside, rather than four quote cards in a grid. A card grid says "reviews"; a record says "delivered, and here is who received it". */ .rec{list-style:none;margin:clamp(1.6rem,3.4vw,2.4rem) 0 0;padding:0; border-top:1px solid var(--rule-2);} .rec__r{display:grid;gap:.6rem;padding:clamp(1.1rem,2.4vw,1.7rem) 0; border-bottom:1px solid var(--rule);} @media(min-width:860px){ .rec__r{grid-template-columns:3.2rem minmax(0,1fr) minmax(0,15rem); gap:clamp(1.2rem,3vw,2.4rem);align-items:start;} } .rec__n{color:var(--acc);padding-top:.28rem;} .rec__q{margin:0;font-family:var(--f-t);font-size:clamp(1rem,1.9vw,1.14rem); line-height:1.62;color:var(--fg);max-width:62ch;} .rec__q::before{content:"C";} .rec__q::after{content:"D";} .rec__m{display:grid;gap:.28rem;align-content:start;} @media(min-width:860px){.rec__m{padding-top:.2rem;}} .rec__who{font-style:normal;font-family:var(--f-d); font-variation-settings:"wdth" 94,"wght" 650;font-size:1rem;letter-spacing:-.015em; color:var(--fg);} .rec__s{color:var(--fg-3);} /* ═══ §35 ENQUIRY — FORM, DIALOG, CONTACT ════════════════════════════════ One form definition serves the contact page and the dialog, so the two can never drift into different fields. Everything here is local: no form provider, no captcha vendor (C11). */ .frm{display:grid;gap:.95rem;} .frm__row{display:grid;gap:.95rem;} @media(min-width:560px){.frm__row{grid-template-columns:1fr 1fr;}} .fld{display:grid;gap:.35rem;min-width:0;} .fld--set{border:0;padding:0;margin:0;} .fld--set legend{padding:0;} .fld > span,.fld legend span{font-family:var(--f-m);font-stretch:72%;font-size:.58rem; font-weight:500;letter-spacing:var(--ls);text-transform:uppercase;color:var(--fg-3);} .fld > span em{font-style:normal;color:var(--acc);} .fld input,.fld select,.fld textarea{ font-family:var(--f-t);font-size:.94rem;color:var(--fg);background:var(--bg-up); border:1px solid var(--rule-2);padding:.68rem .8rem;min-height:46px;width:100%; border-radius:0;-webkit-appearance:none;appearance:none; transition:border-color var(--t1),background var(--t1);} .fld textarea{min-height:104px;resize:vertical;line-height:1.55;} .fld select{background-image:linear-gradient(45deg,transparent 50%,var(--acc) 50%), linear-gradient(135deg,var(--acc) 50%,transparent 50%); background-position:calc(100% - 17px) 21px,calc(100% - 12px) 21px; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:2.2rem;} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--acc);outline-offset:1px;} .fld input::placeholder,.fld textarea::placeholder{color:var(--fg-3);opacity:.75;} .fld.is-bad input,.fld.is-bad textarea{border-color:#C4685A;} .frm__err{font-family:var(--f-t);font-size:.78rem;font-weight:500;color:#C4685A;} .frm__err--top{border:1px solid #C4685A;padding:.7rem .9rem;margin-bottom:1rem;} /* stage — radios drawn as chips, the real input still doing the work */ .stg{display:flex;flex-wrap:wrap;gap:.45rem;} .stg label{position:relative;} .stg input{position:absolute;opacity:0;width:1px;height:1px;} .stg span{display:flex;align-items:center;min-height:44px;padding:.6rem .8rem;cursor:pointer; font-family:var(--f-m);font-stretch:72%;font-size:.64rem;letter-spacing:var(--ls); text-transform:uppercase;color:var(--fg-2);border:1px solid var(--rule-2); transition:border-color var(--t1),color var(--t1),background var(--t1);} .stg input:checked + span{border-color:var(--acc);color:var(--acc);background:rgba(var(--acc-rgb),.10);} .stg input:focus-visible + span{outline:2px solid var(--acc);outline-offset:2px;} /* the honeypot: off-screen, never focusable, never announced */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .frm__foot{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem;padding-top:.4rem;} .btn--fill{background:var(--acc);border-color:var(--acc);color:var(--on-acc);} .btn--fill:hover,.btn--fill:focus-visible{background:var(--acc-2);border-color:var(--acc-2);} .frm__note{font-size:.8rem;color:var(--fg-3);max-width:38ch;} .frm__done{display:flex;gap:1rem;align-items:flex-start; border:1px solid var(--acc);background:rgba(var(--acc-rgb),.08);padding:1.2rem 1.3rem;} .frm__done strong{font-family:var(--f-d);font-variation-settings:"wdth" 92,"wght" 650; font-size:1.15rem;letter-spacing:-.02em;color:var(--fg);display:block;margin-bottom:.3rem;} .frm__done p{color:var(--fg-2);font-size:.93rem;} .frm__done b{color:var(--acc);font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums;} .frm__done__tick{flex:none;width:34px;height:34px;border:1px solid var(--acc);position:relative;} .frm__done__tick::after{content:"";position:absolute;left:11px;top:6px;width:8px;height:15px; border:solid var(--acc);border-width:0 1.5px 1.5px 0;transform:rotate(42deg);} /* ── the dialog ───────────────────────────────────────────────────────── */ .enq{ --bg:var(--basalt);--bg-up:var(--ink);--bg-dn:var(--sunk); --fg:var(--bone);--fg-2:var(--greige);--fg-3:var(--muted); --acc:var(--oak);--acc-2:var(--oak-lt);--on-acc:var(--basalt); --rule:rgba(185,196,192,.16);--rule-2:rgba(185,196,192,.34); width:min(1080px,calc(100% - 1.6rem));max-width:none;max-height:calc(100dvh - 2rem); padding:0;border:1px solid var(--rule-2);background:var(--bg);color:var(--fg);overflow:visible;} .enq::backdrop{background:rgba(8,7,6,.86);backdrop-filter:blur(3px);} .enq__sc{max-height:calc(100dvh - 2rem);overflow-y:auto;position:relative;} .enq__fr{position:absolute;inset:9px;border:1px solid var(--rule);pointer-events:none;z-index:4;} .enq__fr i{position:absolute;width:9px;height:9px;border:0 solid var(--acc);} .enq__fr i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px;} .enq__fr i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px;} .enq__fr i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px;} .enq__fr i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px;} .enq__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; padding:1.5rem 1.6rem 1.2rem;border-bottom:1px solid var(--rule); background:var(--bg-dn);position:relative;z-index:3;} .enq__ttl{display:grid;gap:.55rem;} .enq__sub{display:flex;align-items:center;gap:.7rem;} .enq__sub i{width:26px;height:1px;background:var(--acc);flex:none;} .enq__h{font-family:var(--f-d);font-variation-settings:"wdth" 88,"wght" 650; font-size:clamp(1.5rem,3.4vw,2.15rem);letter-spacing:-.03em;line-height:1.05;} .enq__x{flex:none;width:44px;height:44px;display:grid;place-items:center; border:1px solid var(--rule-2);color:var(--fg-2);background:none;cursor:pointer; transition:border-color var(--t1),color var(--t1);} .enq__x:hover,.enq__x:focus-visible{border-color:var(--acc);color:var(--acc);} .enq__x svg{width:15px;height:15px;} .enq__body{display:grid;gap:0;position:relative;z-index:3;} @media(min-width:900px){.enq__body{grid-template-columns:.92fr 1.08fr;}} .enq__col{padding:1.5rem 1.6rem;} .enq__col + .enq__col{border-top:1px solid var(--rule);} @media(min-width:900px){.enq__col + .enq__col{border-top:0;border-inline-start:1px solid var(--rule);}} .enq .chans{gap:.7rem;} .enq .chan__t{font-size:clamp(1.1rem,2.6vw,1.35rem);} .enq__brief{margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--rule);} .enq__brief ol{display:grid;gap:.5rem;margin-top:.7rem;list-style:none;padding:0;} .enq__brief li{display:grid;grid-template-columns:24px 1fr;gap:.7rem;align-items:baseline; font-size:.87rem;color:var(--fg-2);} .enq__brief b{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums; font-size:.62rem;color:var(--acc);font-weight:500;} @media(prefers-reduced-motion:no-preference){ .enq[open]{animation:enq-in 320ms var(--e-out);} @keyframes enq-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} } /* ── the contact sheet ────────────────────────────────────────────────── */ .ctc{display:grid;gap:clamp(2rem,4vw,3rem);padding-top:clamp(1.4rem,3vw,2.2rem);} @media(min-width:960px){ .ctc{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(2.4rem,5vw,4.5rem);align-items:start;} } .ctc__side{display:grid;gap:clamp(1.4rem,3vw,2rem);align-content:start;} .ctc__main{display:grid;gap:clamp(1.6rem,3.4vw,2.4rem);align-content:start;} .ctc__form{border:1px solid var(--rule-2);padding:clamp(1.1rem,2.6vw,1.7rem);background:var(--bg-up);} .soc2{display:grid;gap:.7rem;} .soc2__k{color:var(--acc);} .soc2__l{display:flex;flex-wrap:wrap;gap:.5rem;} .soc2__b{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.5rem .85rem; border:1px solid var(--rule-2);color:var(--fg-2); font-family:var(--f-m);font-stretch:72%;font-size:.62rem;letter-spacing:var(--ls); text-transform:uppercase;transition:border-color var(--t1),color var(--t1),background var(--t1);} .soc2__b svg{width:16px;height:16px;flex:none;} .soc2__b:hover,.soc2__b:focus-visible{border-color:var(--acc);color:var(--acc-2); background:rgba(var(--acc-rgb),.10);} .ctc__tb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px; background:var(--rule);border:1px solid var(--rule-2);margin:0;} .ctc__tb > div{background:var(--bg);padding:.85rem;display:grid;gap:.28rem;align-content:start;} .ctc__tb dd{margin:0;font-family:var(--f-t);font-size:.95rem;font-weight:600;color:var(--fg);} .ctc__tb dd i{display:block;font-style:normal;font-family:var(--f-m);font-stretch:72%; font-size:.56rem;letter-spacing:var(--ls);text-transform:uppercase;color:var(--fg-3); font-weight:500;margin-top:.25rem;} .ctc__stamp{color:var(--acc)!important;font-family:var(--f-m)!important;font-stretch:72%; font-variant-numeric:tabular-nums;font-size:1.05rem!important;} .how{border-top:1px solid var(--rule);padding-top:1.2rem;} .how__k{display:block;color:var(--acc);margin-bottom:.8rem;} .how__l{display:grid;gap:.2rem;list-style:none;margin:0;padding:0;} .how__l li{display:grid;grid-template-columns:2.1rem 1fr;gap:.85rem;align-items:baseline; padding:.65rem 0;border-bottom:1px solid var(--rule);} .how__l li:last-child{border-bottom:0;} .how__l b{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums; font-size:.62rem;letter-spacing:var(--ls);color:var(--acc);font-weight:500;} .how__l strong{display:block;font-family:var(--f-t);font-size:.96rem;font-weight:600;color:var(--fg);} .how__l span{display:block;font-size:.88rem;color:var(--fg-2);margin-top:.15rem;} /* ═══ §36 SOLUTIONS — THE CABINETRY SCHEDULE ═════════════════════════════ A drawing-set index sheet. The form is doing real work: a schedule legitimately lists items that have not been drawn yet, so the ten types with no published project read as planned rather than missing. */ .sch{border:1px solid var(--rule-2);} .sch__hd,.sch__row{display:grid;grid-template-columns:58px 1fr 58px; align-items:center;gap:.9rem;padding:.8rem 1rem;} @media(min-width:880px){ .sch__hd,.sch__row{grid-template-columns:72px 1fr 76px 196px;} } .sch__hd{border-bottom:1px solid var(--rule-2);background:var(--bg-up);} .sch__hd span{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums; font-size:.56rem;font-weight:500;letter-spacing:var(--ls);text-transform:uppercase; color:var(--fg-3);} .sch__grp{display:flex;align-items:center;gap:.85rem;padding:1.3rem 1rem .3rem; border-top:1px solid var(--rule);} .sch__grp:first-of-type{border-top:0;} .sch__grp b{font-family:var(--f-m);font-stretch:72%;font-size:.6rem;font-weight:500; letter-spacing:var(--ls);text-transform:uppercase;color:var(--acc);white-space:nowrap;} .sch__grp i{flex:1;height:1px;background:var(--rule);} .sch__gd{color:var(--fg-3);} .sch__gx{padding:0 1rem .5rem;color:var(--fg-3);font-size:.84rem;max-width:70ch;} .sch__row{border-top:1px solid var(--rule);color:inherit; transition:background var(--t1);} a.sch__row:hover,a.sch__row:focus-visible{background:rgba(var(--acc-rgb),.07);} a.sch__row:hover .sch__ty,a.sch__row:focus-visible .sch__ty{color:var(--acc-2);} .sch__row[data-req]{cursor:default;} .sch__mk{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums; font-size:.7rem;font-weight:500;letter-spacing:var(--ls-sm);color:var(--acc);} .sch__ty{font-family:var(--f-t);font-size:1rem;font-weight:500;color:var(--fg); line-height:1.32;transition:color var(--t1);min-width:0;} .sch__ty i{display:block;font-style:normal;font-size:.82rem;font-weight:400; color:var(--fg-3);margin-top:.14rem;} .sch__n{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums; font-size:.78rem;color:var(--fg-2);text-align:center;} .sch__st{display:none;align-items:center;gap:.65rem;} @media(min-width:880px){.sch__st{display:flex;}} .sch__bar{display:flex;gap:2px;} .sch__bar i{width:9px;height:9px;border:1px solid var(--rule-2);} .sch__bar i.f{background:var(--acc);border-color:var(--acc);} .sch__lb{font-family:var(--f-m);font-stretch:72%;font-size:.56rem;font-weight:500; letter-spacing:var(--ls);text-transform:uppercase;white-space:nowrap;} .is-issued .sch__lb{color:var(--fg-2);} .is-drawing .sch__lb{color:var(--acc);} .is-req .sch__lb{color:var(--fg-3);} .is-req .sch__ty{color:var(--fg-2);font-weight:400;} /* C4 — below the breakpoint the bar is gone, so the state is spelled out */ .sch__m{display:inline-block;font-family:var(--f-m);font-stretch:72%;font-size:.54rem; letter-spacing:var(--ls);text-transform:uppercase;color:var(--fg-3); border:1px solid var(--rule-2);padding:.1rem .32rem;margin-top:.34rem;} @media(min-width:880px){.sch__m{display:none;}} /* ═══ §37 SOLUTION SHEET — THE DETAIL BUBBLE ═════════════════════════════ The drawing convention for "see detail A, sheet 5": a circled letter on a leader. Nothing else on the site uses a bubble or a leader. */ .sgrid{display:grid;gap:1.8rem;padding-top:clamp(1.2rem,2.6vw,2rem);} @media(min-width:880px){.sgrid{grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,4rem);align-items:start;}} .pfl{display:grid;border-top:1px solid var(--rule);list-style:none;margin:0;padding:0;} .pfl li{display:grid;grid-template-columns:30px 1fr;gap:.9rem;padding:.72rem 0; border-bottom:1px solid var(--rule);align-items:baseline;} .pfl em{font-style:normal;font-family:var(--f-m);font-stretch:72%; font-variant-numeric:tabular-nums;font-size:.62rem;color:var(--acc);} .pfl span{font-size:.95rem;color:var(--fg-2);} .dsec,.wsec{padding-top:clamp(2rem,4vw,3rem);} .dbs{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule-2); margin-top:1.2rem;} @media(min-width:760px){.dbs{grid-template-columns:1fr 1fr;}} .db{display:flex;gap:1rem;padding:1.15rem 1.2rem;background:var(--bg); align-items:flex-start;color:inherit;transition:background var(--t1);} .db:hover,.db:focus-visible{background:var(--bg-up);} .db__b{position:relative;flex:none;width:44px;height:44px;border-radius:50%; border:1px solid var(--acc);display:grid;place-items:center; font-family:var(--f-m);font-stretch:72%;font-size:.8rem;font-weight:600; letter-spacing:.04em;color:var(--acc);transition:background var(--t1);} /* the leader — the half of the convention that makes it a bubble, not a badge */ .db__b::before{content:"";position:absolute;top:50%;inset-inline-start:100%; width:14px;height:1px;background:var(--acc);opacity:.5;} .db:hover .db__b{background:rgba(var(--acc-rgb),.14);} .db__c{display:grid;gap:.2rem;min-width:0;} .db__t{font-family:var(--f-t);font-weight:600;font-size:.98rem;color:var(--fg);} .db__x{font-size:.88rem;color:var(--fg-2);line-height:1.55;} .db__s{font-family:var(--f-m);font-stretch:72%;font-size:.56rem;letter-spacing:var(--ls); text-transform:uppercase;color:var(--fg-3);margin-top:.35rem;} .wgrid{display:grid;gap:1.1rem;margin-top:1.2rem;} @media(min-width:720px){.wgrid{grid-template-columns:repeat(3,1fr);}} .wc{display:block;color:inherit;} .wc__im{display:block;overflow:hidden;background:var(--bg-dn);aspect-ratio:4/3; border:1px solid var(--rule);} .wc__im img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter); transition:transform 1200ms var(--e-out);} .wc:hover .wc__im img,.wc:focus-visible .wc__im img{transform:scale(1.05);} .wc__m{display:flex;justify-content:space-between;gap:1rem;align-items:baseline; padding-top:.6rem;margin-top:.6rem;border-top:1px solid var(--rule);} .wc__t{font-family:var(--f-t);font-weight:600;font-size:.96rem;color:var(--fg);} .svl{display:flex;flex-wrap:wrap;gap:.5rem;} .svl a{display:inline-flex;align-items:center;min-height:44px;padding:.5rem .7rem; font-family:var(--f-m);font-stretch:72%;font-size:.62rem;letter-spacing:var(--ls); text-transform:uppercase;color:var(--fg-2);border:1px solid var(--rule-2); transition:border-color var(--t1),color var(--t1),background var(--t1);} .svl a:hover,.svl a:focus-visible{border-color:var(--acc);color:var(--acc-2); background:rgba(var(--acc-rgb),.09);} .svl a.c{color:var(--fg-3);border-style:dashed;} .faqs{border-top:1px solid var(--rule);} .faqs details{border-bottom:1px solid var(--rule);} .faqs summary{display:flex;justify-content:space-between;gap:1rem;align-items:baseline; padding:.95rem 0;min-height:44px;cursor:pointer;font-family:var(--f-t);font-weight:600; font-size:.98rem;color:var(--fg);list-style:none;} .faqs summary::-webkit-details-marker{display:none;} .faqs summary i{position:relative;flex:none;width:12px;height:12px;align-self:center;} .faqs summary i::before,.faqs summary i::after{content:"";position:absolute; background:var(--acc);transition:transform 300ms var(--e-out);} .faqs summary i::before{left:0;right:0;top:5.5px;height:1px;} .faqs summary i::after{top:0;bottom:0;left:5.5px;width:1px;} .faqs details[open] summary i::after{transform:scaleY(0);} .faqs p{padding:0 0 1rem;color:var(--fg-2);font-size:.93rem;max-width:68ch;} .snext{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.2rem; margin-top:clamp(2rem,4vw,3rem);padding:1.2rem 0; border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);color:inherit; transition:padding-left var(--t1);} .snext:hover,.snext:focus-visible{padding-left:.5rem;} .snext__t{font-family:var(--f-d);font-variation-settings:"wdth" 88,"wght" 650; font-size:clamp(1.2rem,3vw,1.9rem);letter-spacing:-.03em;color:var(--fg); margin-inline-end:auto;} .snext:hover .snext__t{color:var(--acc-2);} .snext__go{color:var(--acc);display:inline-flex;align-items:center;gap:.45rem;} .snext__go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;} /* ═══ §38 DETAILS — THE EXPLODED AXONOMETRIC ═════════════════════════════ */ .axo{display:grid;gap:2rem;align-items:start;padding-top:clamp(1.2rem,2.6vw,2rem);} @media(min-width:1000px){.axo{grid-template-columns:1.12fr .88fr;gap:clamp(2rem,4.5vw,3.5rem);}} .axo__fig{position:relative;margin:0;border:1px solid var(--rule); background:var(--bg-up);padding:1rem;} .axo__fig svg{width:100%;height:auto;display:block;} .axo__cap{display:flex;justify-content:space-between;gap:1rem;padding-top:.7rem; margin-top:.7rem;border-top:1px solid var(--rule);} .ax-line{fill:none;stroke:var(--draw-1);stroke-width:1.1;stroke-linejoin:round;} .ax-face{fill:rgba(var(--line-rgb),.05);stroke:var(--draw-1);stroke-width:1.1;stroke-linejoin:round;} .ax-side{fill:rgba(var(--line-rgb),.11);stroke:var(--draw-1);stroke-width:1.1;stroke-linejoin:round;} .ax-axis{fill:none;stroke:var(--draw-2);stroke-width:1;stroke-dasharray:5 4;} .ax-lead{fill:none;stroke:var(--acc);stroke-width:1;} .ax-bub{fill:var(--bg-up);stroke:var(--acc);stroke-width:1;} .ax-num{fill:var(--acc);font-family:var(--f-m);font-stretch:72%;font-size:9.5px; font-weight:600;text-anchor:middle;dominant-baseline:central;} /* M6 in reverse — the parts settle into place as the drawing arrives */ @media(prefers-reduced-motion:no-preference){ .axo__fig .ax-call{opacity:0;transition:opacity 700ms var(--e-out) 500ms;} .axo__fig.is-in .ax-call{opacity:1;} } .axl{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule-2);} .axl__r{display:grid;grid-template-columns:34px 1fr;gap:.9rem;padding:.85rem 1rem; background:var(--bg);align-items:baseline;color:inherit;transition:background var(--t1);} .axl__r:hover,.axl__r:focus-visible{background:var(--bg-up);} .axl__n{font-family:var(--f-m);font-stretch:72%;font-variant-numeric:tabular-nums; font-size:.66rem;font-weight:600;color:var(--acc);border:1px solid var(--rule-2); text-align:center;padding:.18rem 0;} .axl__t{display:block;font-family:var(--f-t);font-weight:600;font-size:.95rem;color:var(--fg);} .axl__t em{font-style:normal;font-family:var(--f-m);font-stretch:72%;font-size:.56rem; letter-spacing:var(--ls);text-transform:uppercase;color:var(--fg-3);margin-inline-start:.4rem;} .axl__x{display:block;font-size:.85rem;color:var(--fg-2);margin-top:.16rem;line-height:1.5;} .axl__e{display:block;font-family:var(--f-m);font-stretch:72%;font-size:.54rem; letter-spacing:var(--ls);text-transform:uppercase;color:var(--fg-3);margin-top:.3rem;} .drows{border-top:1px solid var(--rule-2);margin-top:clamp(1.4rem,3vw,2.2rem);} .drow{display:grid;gap:.9rem;padding:clamp(1.3rem,2.8vw,2rem) 0; border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--hdr) + 20px);} @media(min-width:900px){ .drow{grid-template-columns:7rem minmax(0,1fr) minmax(0,15rem); gap:clamp(1.4rem,3.4vw,2.8rem);align-items:start;} } .drow__n{display:flex;gap:.6rem;flex-wrap:wrap;} @media(min-width:900px){.drow__n{display:grid;gap:.3rem;align-content:start;}} .drow__n .lab:first-child{color:var(--acc);} .drow__cat{color:var(--fg-3);} .drow__t{font-family:var(--f-d);font-variation-settings:"wdth" 92,"wght" 650; font-size:clamp(1.1rem,2.2vw,1.4rem);letter-spacing:-.025em;color:var(--fg);} .drow__c p{color:var(--fg-2);max-width:56ch;margin-top:.5rem;} .drow__src{display:block;margin-top:.7rem;color:var(--fg-3);} .drow__links{display:grid;gap:.35rem;} .drow__links a{display:inline-flex;align-items:center;min-height:34px; font-family:var(--f-t);font-size:.9rem;font-weight:500;color:var(--acc); transition:padding-left var(--t1);} .drow__links a::before{content:"—";margin-inline-end:.5rem;color:var(--rule-2);} .drow__links a:hover,.drow__links a:focus-visible{padding-left:.3rem;color:var(--acc-2);} /* ═══ §39 THE CTA BAND ═══════════════════════════════════════════════════ A short prompt between sections. Two tones: a quiet rule for places the reader is mid-thought, and a bordered panel where the section has genuinely ended and an invitation is the right next thing. */ .ctab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:1rem 1.6rem;} .ctab__t{font-family:var(--f-d);font-variation-settings:"wdth" 94,"wght" 600; font-size:clamp(1.02rem,2.2vw,1.34rem);letter-spacing:-.02em;color:var(--fg); max-width:42ch;} .ctab__b{flex:none;} .ctab--quiet{margin-top:clamp(1.6rem,3.4vw,2.4rem);padding-top:clamp(1.2rem,2.6vw,1.8rem); border-top:1px solid var(--rule);} .ctab--panel{margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.2rem,2.8vw,1.9rem); border:1px solid var(--rule-2);background:var(--bg-up);} /* the accent belongs on the one control, not on the whole block */ .ctab--panel .ctab__b{border-color:var(--acc);color:var(--acc-2);} .ctab--panel .ctab__b:hover,.ctab--panel .ctab__b:focus-visible{ background:rgba(var(--acc-rgb),.14);color:var(--bone);} /* ── hero call to action ──────────────────────────────────────────────────── The one button on the hero, so it is allowed to be the loudest thing in the copy block. A filled oak plate rather than the outlined buttons used further down the page — those are alternatives, this is the invitation. */ .hcta{position:relative;display:inline-flex;align-items:center;gap:.7rem; margin-top:clamp(1.4rem,3vw,2rem);padding:1rem 1.5rem;min-height:56px; border:0;background:none;cursor:pointer;color:var(--basalt); font-family:var(--f-d);font-stretch:88%;font-weight:650;font-size:.94rem; letter-spacing:.01em;text-decoration:none;isolation:isolate;} .hcta__r{position:absolute;inset:0;z-index:-1;background:var(--oak); transition:background var(--t1),transform 420ms var(--e-out);} .hcta__t{position:relative;} .hcta__a{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8; flex:none;transition:transform 420ms var(--e-out);} .hcta:hover .hcta__r,.hcta:focus-visible .hcta__r{background:var(--oak-lt);transform:scaleX(1.03);} .hcta:hover .hcta__a,.hcta:focus-visible .hcta__a{transform:translateX(5px);} .hcta:focus-visible{outline:2px solid var(--bone);outline-offset:4px;} /* A corner tick, the same mark the drawing sheets use for a called-out point — it ties the button to the page's vocabulary instead of importing a generic pill from somewhere else. */ .hcta::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px; border-right:2px solid var(--bone);border-bottom:2px solid var(--bone);opacity:.75;} @media(max-width:700px){.hcta{width:100%;justify-content:space-between;}} /* ── homepage materials, shortened ────────────────────────────────────────── Three decisions and a palette strip, where a five-row spec list used to sit. The list belonged on /materials; here the section only has to tell a reader that there is something to decide. */ .mgrid{display:grid;gap:clamp(1rem,2vw,1.6rem);list-style:none;padding:0; margin:clamp(2rem,4vw,3rem) 0 0;grid-template-columns:1fr;} @media(min-width:800px){.mgrid{grid-template-columns:repeat(3,1fr);}} .mcard{display:grid;gap:.7rem;align-content:start;padding:clamp(1.2rem,2vw,1.7rem); border:1px solid var(--line);background:rgba(239,234,225,.03);} .mcard__g{display:block;width:64px;height:52px;} .mcard__g svg{width:100%;height:100%;} .mcard__g .dr path{fill:none;stroke:var(--draw-1);stroke-width:2.2;stroke-linecap:square;} .mcard__t{font-family:var(--f-d);font-stretch:92%;font-weight:650;font-size:1.15rem; margin:.2rem 0 0;color:var(--fg);} .mcard__b{color:var(--fg-2);font-size:.96rem;line-height:1.6;margin:0;max-width:38ch;} /* the palette, one strip instead of five rows */ .mstrip{margin-top:clamp(1.6rem,3vw,2.4rem);} .mstrip__b{display:flex;height:clamp(38px,5vw,54px);border:1px solid var(--line-2);} .mstrip__b i{flex:1;background:linear-gradient(135deg,var(--sw),var(--sw2));} .mstrip__b i + i{border-inline-start:1px solid var(--line-2);} .mstrip__l{display:flex;margin-top:.5rem;} .mstrip__l span{flex:1;text-align:center;color:var(--fg-3);font-size:.62rem; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:.2rem;} /* the dividers, drawn not filled — the same hairline as the sheet glyphs */ .hcta__i{width:21px;height:21px;flex:none;fill:none;stroke:currentColor; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; transition:transform 520ms var(--e-out);transform-origin:12px 3.4px;} .hcta:hover .hcta__i,.hcta:focus-visible .hcta__i{transform:rotate(-11deg);} @media(prefers-reduced-motion:reduce){.hcta__i{transition:none;}} /* ── the bar's call to action, with the number under it ───────────────────── The label and the phone are two separate targets on purpose: one opens the enquiry dialog, the other dials. A single control that did both would have to guess which the reader meant. */ .hdr__cta{flex-direction:column;align-items:stretch;gap:.15rem;padding:.5rem 1.05rem;} .hdr__cta__t{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;} .hdr__tel{display:none;font-family:var(--f-d);font-stretch:74%;font-size:.66rem; letter-spacing:.09em;color:var(--greige);white-space:nowrap; padding:.25rem .2rem;text-align:center;transition:color var(--t1);} .hdr__tel:hover,.hdr__tel:focus-visible{color:var(--oak-lt);} @media(min-width:1080px){ .hdr__end{align-items:center;} /* the number sits directly under the button, sharing its column */ .hdr__cta{margin-bottom:-2px;} .hdr__tel{display:block;margin-top:-4px;} } .hdr__call{display:none;} @media(min-width:1080px){.hdr__call{display:flex;flex-direction:column;align-items:stretch;}} .hdr__call .hdr__cta{display:inline-flex;} /* ── floating Instagram ───────────────────────────────────────────────────── Fixed bottom-left. Small, outlined, and quiet: a persistent control on every page has to earn its place by not competing with the page it sits on. */ .igf{position:fixed;z-index:60;left:clamp(14px,2.2vw,26px); bottom:calc(clamp(14px,2.2vw,26px) + env(safe-area-inset-bottom)); display:grid;place-items:center;width:48px;height:48px;color:var(--bone); isolation:isolate;transition:transform 420ms var(--e-out);} .igf__r{position:absolute;inset:0;z-index:-1;border-radius:50%; border:1px solid rgba(239,234,225,.34);background:rgba(16,14,12,.66); backdrop-filter:blur(6px); transition:border-color var(--t1),background var(--t1);} .igf > svg:last-of-type{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;} /* The orbit. A 65-degree arc of the plate's own circle, turning once every four and a half seconds — slow enough to read as a drifting highlight rather than a spinner, which is what a loading state looks like and this is not one. Gold is scoped to this control: it is the one place on the site that borrows Instagram's warmth, and letting it into the palette would put a second accent beside the bronze everywhere else. r=23 with a 2px stroke lands the arc exactly on the 48px edge, so it traces the plate rather than floating outside it — hence overflow:visible, the stroke straddles the box. */ .igf{--ig-gold:#F5B32B;} .igf__o{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible; animation:igf-orbit 4.5s linear infinite;} .igf__o circle{fill:none;stroke:var(--ig-gold);stroke-width:2;stroke-linecap:round; /* circumference is 2πr = 144.5, so 26 on / 118.5 off is one short arc */ stroke-dasharray:26 118.5; filter:drop-shadow(0 0 5px rgba(245,179,43,.55)); transition:stroke-dasharray 420ms var(--e-out);} @keyframes igf-orbit{to{transform:rotate(360deg);}} .igf:hover,.igf:focus-visible{transform:translateY(-3px);} .igf:hover .igf__r,.igf:focus-visible .igf__r{border-color:var(--acc);background:rgba(176,138,94,.3);} /* On approach the arc opens out into most of the ring — the control answers the cursor by completing itself, which is a smaller gesture than speeding up and does not read as impatience. */ .igf:hover .igf__o circle,.igf:focus-visible .igf__o circle{stroke-dasharray:112 32.5;} .igf:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:50%;} /* Out of the way while the menu or the enquiry dialog is up — a fixed control floating over a modal is the classic way to cover a Close button. */ body.is-locked .igf{opacity:0;pointer-events:none;} /* Reduced motion keeps the mark and drops the movement: the arc parks as a still highlight on the ring instead of disappearing, so the control looks the same, just not turning. */ @media(prefers-reduced-motion:reduce){ .igf{transition:none;} .igf__o{animation:none;transform:rotate(-42deg);} .igf__o circle{transition:none;} } /* ── the film, corrected ──────────────────────────────────────────────────── Three fixes, all of them things that only show once a real clip plays. contain, not cover. A vertical phone clip cropped to a wide banner loses the top and bottom of the frame — which on a cabinet run is the cabinet. Letter- boxing on a dark ground shows the whole shot, which is the point of it. */ .bn.is-playing .bn__vid{object-fit:contain;background:#0b0a09;} /* The close control sat at the top of the banner, which is where the fixed header sits — so it was underneath it and unreachable. Clear of the bar, and an X on its own: while a film is filling the plate the word "Close" is one more thing to read, and the mark is understood everywhere. */ .bn__stop{top:auto;bottom:clamp(64px,9vh,96px); inset-inline-end:clamp(14px,2.4vw,28px); width:52px;height:52px;min-height:52px;padding:0;border-radius:50%; display:grid;place-items:center;} .bn__stop svg{width:18px;height:18px;stroke-width:1.6;stroke-linecap:round;} .bn__stop .lab{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);} @media(min-width:900px){.bn__stop{bottom:auto;top:calc(clamp(12px,2vw,22px) + 84px);}} /* ── the play mark ────────────────────────────────────────────────────────── Larger, and two rings instead of one: an outer hairline that reads as the drawn circle of a dimension, and an inner plate the triangle sits on. The quarter ticks stay — they are what stops it looking like a media player button borrowed from somewhere else. */ .bn__play{width:clamp(96px,11vw,132px);} .bn__play__r{border-color:rgba(239,234,225,.42);background:rgba(16,14,12,.30);} /* The inner plate is painted INTO the ring, not laid over it. As a ::before it was an absolutely positioned box, and a positioned box paints above the SVG sibling — so a translucent disc sat on top of the triangle and blunted it. A radial stop inside the ring has no stacking order to get wrong. */ .bn__play__r{ background: radial-gradient(circle at 50% 50%, rgba(16,14,12,.52) 0 58%, rgba(239,234,225,.16) 58% 59%, rgba(16,14,12,.16) 59% 100%);} .bn__play:hover .bn__play__r,.bn__play:focus-visible .bn__play__r{ background: radial-gradient(circle at 50% 50%, rgba(176,138,94,.34) 0 58%, rgba(201,168,126,.5) 58% 59%, rgba(16,14,12,.18) 59% 100%);} .bn__play__p{fill:var(--bone);transition:fill var(--t1);} .bn__play:hover .bn__play__p,.bn__play:focus-visible .bn__play__p{fill:var(--oak-lt);} .bn__play__t path{opacity:.42;} .bn__play__l{transform:translateY(150%);} /* ── the materials statements ─────────────────────────────────────────────── Three numbered blocks where a nine-card specimen grid used to be. Numbered in the margin the way a specification clause is, so the page still reads as part of the document set rather than as three paragraphs on a page. */ .mstat{display:grid;gap:clamp(2.4rem,5vw,4rem); margin:clamp(2.4rem,5vw,3.6rem) 0 clamp(3rem,6vw,4.5rem);} .mstat__b{display:grid;gap:.9rem;grid-template-columns:1fr;} @media(min-width:820px){ .mstat__b{grid-template-columns:auto minmax(0,1fr);gap:clamp(1.6rem,3vw,3rem);} } .mstat__n{align-self:start;color:var(--acc);border:1px solid var(--rule-2); padding:.3rem .55rem;font-variant-numeric:tabular-nums;} .mstat__c{display:grid;gap:.9rem;max-width:68ch;} .mstat__t{margin:0;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.15;} .mstat__p{margin:0;color:var(--fg-2);font-size:1.02rem;line-height:1.75;} .mstat__go{margin-top:.2rem;} /* The plate comes off. Any ground behind the mark — however faint — reads as a film laid over it, and the triangle is strong enough at this size to carry itself. Legibility over a bright frame comes from a shadow on the mark, not from a disc under it. */ .bn__play__r{background:none;border:0;backdrop-filter:none;} .bn__play:hover .bn__play__r,.bn__play:focus-visible .bn__play__r{background:none;transform:none;} .bn__play svg{filter:drop-shadow(0 2px 14px rgba(11,10,9,.72)) drop-shadow(0 0 3px rgba(11,10,9,.5));} .bn__play__t path{opacity:.62;} .bn__play::after{border-color:rgba(239,234,225,.26);} /* ── the materials statements, drawn ──────────────────────────────────────── The figure is the point of the block, not an ornament beside it: at this size it is read before the heading, which is right — a shop is judged on what it works in before it is judged on how it describes itself. Alternating sides so three blocks do not stack into one rhythm. */ .mstat{display:grid;gap:0;margin:clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,4.5rem);} .mstat__b{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,2.6vw,2rem); padding:clamp(2rem,4.5vw,3.4rem) 0;position:relative;} @media(min-width:880px){ .mstat__b{grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem);align-items:center;} .mstat__b:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,300px);} .mstat__b:nth-child(even) .mstat__fig{order:2;} } .mstat__r{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);} .mstat__b:last-child .mstat__r{display:none;} .mstat__fig{position:relative;} .mstat__fig > svg{display:block;width:100%;height:auto;max-width:300px;} .mstat__fig .dr path,.mstat__fig .dr circle{fill:none;stroke:var(--draw-1); stroke-width:2.2;stroke-linecap:square;} /* Every path carries pathLength="1", so a single --fill draws all of them at the same rate whatever their real length: the dash is the whole path and the offset is what is left. Written one weight above `.is-in .dr path`, which would otherwise snap the offset to 0 the moment the block reveals — these figures are not drawn by the reveal, they are drawn by the scroll, the way the services numerals fill, so the line arrives with the reader. */ .mstat__b .mstat__fig .dr path,.mstat__b .mstat__fig .dr circle, .mstat__b.is-in .mstat__fig .dr path,.mstat__b.is-in .mstat__fig .dr circle{ stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--fill,0)); transition:stroke 800ms var(--e-out);} .mstat__b.is-in .mstat__fig .dr path,.mstat__b.is-in .mstat__fig .dr circle{ stroke:var(--fc,var(--acc));} /* the number, in the drawn box the section marks use */ .mstat__n{position:absolute;top:0;inset-inline-start:0;display:grid;place-items:center; width:52px;height:52px;} .mstat__n svg{grid-area:1/1;width:100%;height:100%;} .mstat__n .nbox{fill:none;stroke:var(--acc);stroke-width:1.5;} .mstat__n b{grid-area:1/1;font-family:var(--f-d);font-stretch:74%;font-size:.82rem; color:var(--acc);font-variant-numeric:tabular-nums;} @media(min-width:880px){.mstat__n{top:-14px;inset-inline-start:-14px;}} .mstat__c{display:grid;gap:1rem;max-width:64ch;} .mstat__t{margin:0;font-size:clamp(1.55rem,3.2vw,2.4rem);line-height:1.12;} .mstat__p{margin:0;color:var(--fg-2);font-size:1.02rem;line-height:1.78;} .mstat__go{margin-top:.3rem;} @media(prefers-reduced-motion:reduce){ .mstat__fig .dr path,.mstat__fig .dr circle{stroke-dashoffset:0!important;} }