/* EDIFICE — Theme stylesheet ========================== Ported from the responsive design handoff (edifice-mobile.html). TOKEN BRIDGE — read before editing. The design system speaks `--edifice-*`; this stylesheet speaks a short local set (--bg, --ink, --gold, --line …) inherited from the prototype. The two vocabularies meet in exactly one place: the :root block immediately below, which maps local names onto design-system tokens. Do not reintroduce raw hex anywhere else in this file, and do not use `--edifice-*` names further down — change a colour once, here or in tokens.css, and the whole theme follows. Drawing mode is the second theme, not a dark mode: `data-theme="dark"` on swaps these tokens AND inverts every line-art drawing to gold wireframe with its dimension annotations revealed. */ /* ============ token bridge ============ */ :root{ /* raw scale — aliased from the design system, kept for the few places the prototype reaches for a scale step directly (line art, canvas, borders) */ --stone-50:var(--edifice-stone-50); --stone-100:var(--edifice-stone-100); --stone-300:var(--edifice-stone-300); --stone-600:var(--edifice-stone-600); --stone-900:var(--edifice-stone-900); --navy-400:var(--edifice-navy-400); --navy-600:var(--edifice-navy-600); --navy-800:var(--edifice-navy-800); --navy-900:var(--edifice-navy-900); --gold-300:var(--edifice-gold-300); --gold-500:var(--edifice-gold-500); --gold-700:var(--edifice-gold-700); /* Prototype constants: values the handoff fixes that have no exact design-system equivalent. --proto-sunken is the one real divergence — the handoff specifies #f2efeb where the DS alias --edifice-surface-sunken resolves to stone-100 (#f5f3f0). The handoff wins; fidelity is spec'd pixel-for-pixel. The rules are translucent navy/gold, not opaque stone, so they cannot map onto --edifice-border-* either. */ --proto-sunken:#f2efeb; --proto-line:rgba(7,25,49,.16); --proto-line-soft:rgba(7,25,49,.08); --proto-line-dark:rgba(232,203,146,.22); --proto-line-soft-dark:rgba(232,203,146,.10); /* semantic — presentation mode (light). Everything sourced from --edifice-* swaps automatically in drawing mode, because tokens.css redefines those under both dark paths. Only the four properties below that the design system does not express need restating in the drawing-mode blocks. */ --bg:var(--edifice-surface-page); --bg2:var(--proto-sunken); --card:var(--edifice-surface-card); --ink:var(--edifice-text-primary); --mut:var(--edifice-text-secondary); --line:var(--proto-line); --line-soft:var(--proto-line-soft); --gold:var(--edifice-accent); --gold-ink:var(--edifice-text-accent); --grain-o:.05; --pd:var(--edifice-font-serif); --pp:var(--edifice-font-sans); --gut:clamp(20px,4.5vw,72px); --ease:var(--edifice-ease-out); --easeio:var(--edifice-ease-in-out); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg2:var(--edifice-surface-sunken); --line:var(--proto-line-dark); --line-soft:var(--proto-line-soft-dark); --grain-o:.07; } :root:not([data-theme="light"]) .art .f1, :root:not([data-theme="light"]) .art .f2, :root:not([data-theme="light"]) .art .f3{fill:none;stroke:var(--gold-300);stroke-width:1.75} :root:not([data-theme="light"]) .art .ln, :root:not([data-theme="light"]) .art .lnb{stroke:var(--gold-300)} :root:not([data-theme="light"]) .art .alab{fill:var(--gold-300)} :root:not([data-theme="light"]) .art .dim{opacity:1} :root:not([data-theme="light"]) #stamp{display:flex} } :root[data-theme="dark"]{ --bg2:var(--edifice-surface-sunken); --line:var(--proto-line-dark); --line-soft:var(--proto-line-soft-dark); --grain-o:.07; } :root[data-theme="dark"] .art .f1, :root[data-theme="dark"] .art .f2, :root[data-theme="dark"] .art .f3{fill:none;stroke:var(--gold-300);stroke-width:1.75} :root[data-theme="dark"] .art .ln, :root[data-theme="dark"] .art .lnb{stroke:var(--gold-300)} :root[data-theme="dark"] .art .alab{fill:var(--gold-300)} :root[data-theme="dark"] .art .dim{opacity:1} :root[data-theme="dark"] #stamp{display:flex} :root[data-theme="light"]{ --bg2:var(--proto-sunken); --line:var(--proto-line); --line-soft:var(--proto-line-soft); --grain-o:.05; } /* ============ base ============ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--bg); color:var(--ink); font:400 16px/1.7 var(--pp); overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .5s,color .5s; } body.lock{overflow:hidden} ::selection{background:var(--navy-600);color:var(--stone-50)} :root[data-theme="dark"] ::selection{background:var(--gold-500);color:var(--navy-900)} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--gold-500);outline-offset:3px} h1,h2,h3{font-family:var(--pd);font-weight:700;line-height:1.05;text-wrap:balance} img,svg{max-width:100%} @media (hover:hover) and (pointer:fine){ body,a,button,[data-cursor]{cursor:none} } /* paper grain */ body::after{ content:""; position:fixed; inset:-50%; z-index:95; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:var(--grain-o); animation:grain 9s steps(6) infinite; } @keyframes grain{ 0%{transform:translate(0,0)}17%{transform:translate(-6%,4%)}33%{transform:translate(4%,-7%)} 50%{transform:translate(-3%,-3%)}67%{transform:translate(7%,2%)}83%{transform:translate(-5%,6%)}100%{transform:translate(0,0)} } /* utility */ .wrap{padding-inline:var(--gut)} .eyebrow{ font:500 11px/1 var(--pp); letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); display:flex; align-items:center; gap:14px; } .eyebrow::after{content:"";flex:0 0 34px;height:1px;background:var(--gold-500)} .gsq{width:7px;height:7px;background:var(--gold-500);flex:0 0 7px} .sec{padding-block:clamp(84px,12vh,150px)} .sec-head{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(40px,7vh,84px)} .sec-head h2{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:600;letter-spacing:-.01em} .rule{height:1px;background:var(--line);border:0} /* reveals */ .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .rv.on{opacity:1;transform:none} .rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s} .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em} .wi{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease)} html.ready .hero .wi{transform:none} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .wi{transform:none;transition:none} html .hero .hsub,html .hero .hcta{opacity:1;transform:none;transition:none} body::after{animation:none} } /* ============ loader ============ */ #loader{ position:fixed;inset:0;z-index:110;background:var(--navy-900);color:var(--stone-50); display:flex;align-items:center;justify-content:center; transition:transform 1s var(--easeio); } #loader.done{transform:translateY(-101%)} #loader .ld-mid{text-align:center;position:relative} #loader .ld-name{font:600 clamp(2.6rem,7vw,4.6rem)/1 var(--pd);letter-spacing:.02em;overflow:hidden} #loader .ld-name span{display:inline-block;transform:translateY(110%);animation:ldup 1s var(--ease) .15s forwards} @keyframes ldup{to{transform:none}} #loader .ld-rule{width:0;height:1px;background:var(--gold-500);margin:20px auto 16px;animation:ldrule 1.2s var(--ease) .5s forwards} @keyframes ldrule{to{width:min(280px,60vw)}} #loader .ld-sub{font:500 10px/1 var(--pp);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-300);opacity:0;animation:ldin .8s ease .9s forwards} @keyframes ldin{to{opacity:1}} #loader .ld-glint{ position:absolute;top:-26px;right:-10px;width:10px;height:10px;background:var(--gold-500); transform:rotate(45deg) scale(0);animation:glint 1s ease 1.15s; } @keyframes glint{40%{transform:rotate(45deg) scale(1.4)}100%{transform:rotate(225deg) scale(0)}} #loader .ld-count{ position:absolute;right:var(--gut);bottom:28px; font:500 12px/1 var(--pp);letter-spacing:.22em;color:var(--gold-300); font-variant-numeric:tabular-nums; } @media (prefers-reduced-motion:reduce){#loader{transition:opacity .3s}#loader.done{transform:none;opacity:0;pointer-events:none}} /* ============ cursor ============ */ #cur,#curR{position:fixed;top:0;left:0;z-index:120;pointer-events:none;display:none} @media (hover:hover) and (pointer:fine){#cur,#curR{display:block}} #cur{width:7px;height:7px;border-radius:50%;background:var(--gold-500);transform:translate(-50%,-50%)} #curR{ width:38px;height:38px;border-radius:99px;border:1px solid var(--gold-500); transform:translate(-50%,-50%); display:none;align-items:center;justify-content:center; transition:width .3s var(--ease),height .3s var(--ease),background-color .3s; white-space:nowrap; } @media (hover:hover) and (pointer:fine){#curR{display:flex}} #curR .clab{font:500 10px/1 var(--pp);letter-spacing:.22em;color:var(--navy-900);opacity:0;transition:opacity .2s} #curR.big{width:72px;height:72px;background:var(--gold-500)} #curR.big .clab{opacity:1} /* ============ header ============ */ #hdr{ position:fixed;inset:0 0 auto 0;z-index:70; display:flex;align-items:center;justify-content:space-between;gap:20px; padding:18px var(--gut); transition:background .4s,box-shadow .4s,padding .4s; } #hdr.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);padding-block:12px;box-shadow:0 1px 0 var(--line-soft)} #hdr:not(.scrolled){color:var(--stone-50)} #hdr:not(.scrolled) .bsub{color:var(--gold-300)} #hdr:not(.scrolled) #clock{color:var(--stone-300)} #hdr:not(.scrolled) #themeBtn{border-color:rgba(232,203,146,.4)} .brand{display:flex;align-items:baseline;gap:10px} .brand .bmark{font:700 1.5rem/1 var(--pd);letter-spacing:.01em} .brand .bsub{font:500 8.5px/1 var(--pp);letter-spacing:.3em;color:var(--gold-ink);text-transform:uppercase} #hnav{display:flex;gap:clamp(18px,3vw,42px)} #hnav a{font:500 11px/1 var(--pp);letter-spacing:.2em;text-transform:uppercase;position:relative;padding:6px 0} #hnav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold-500);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)} #hnav a:hover::after{transform:scaleX(1);transform-origin:left} .hright{display:flex;align-items:center;gap:clamp(12px,2vw,26px)} #clock{font:500 10px/1 var(--pp);letter-spacing:.18em;color:var(--mut);font-variant-numeric:tabular-nums} #themeBtn{ display:flex;align-items:center;gap:8px; font:500 10px/1 var(--pp);letter-spacing:.2em;text-transform:uppercase; border:1px solid var(--line);border-radius:99px;padding:9px 14px; transition:border-color .3s,color .3s; } #themeBtn:hover{border-color:var(--gold-500);color:var(--gold-ink)} #themeBtn .tdot{width:7px;height:7px;background:var(--gold-500);transform:rotate(45deg);transition:transform .5s var(--ease)} :root[data-theme="dark"] #themeBtn .tdot{transform:rotate(225deg) scale(1.2)} .enq{ font:500 11px/1 var(--pp);letter-spacing:.2em;text-transform:uppercase; background:var(--navy-600);color:var(--stone-50);padding:12px 22px;border-radius:2px; display:inline-block;transition:background .3s; } .enq:hover{background:var(--navy-800)} :root[data-theme="dark"] .enq{background:var(--gold-500);color:var(--navy-900)} #burger{display:none;flex-direction:column;gap:6px;padding:8px} #burger span{display:block;width:26px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s} #burger.x span:first-child{transform:translateY(4px) rotate(45deg)} #burger.x span:last-child{transform:translateY(-3.5px) rotate(-45deg)} @media (max-width:1180px){ #clock,#themeBtn .tlab{display:none} } @media (max-width:1000px){ #hnav{display:none} #burger{display:flex} } /* mobile menu */ #menu{ position:fixed;inset:0;z-index:69;background:var(--navy-900);color:var(--stone-50); display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 var(--gut); clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--easeio); } #menu.open{clip-path:inset(0 0 0% 0)} #menu a.mlink{font:600 clamp(2.2rem,9vw,4rem)/1.25 var(--pd);opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .6s var(--ease)} #menu.open a.mlink{opacity:1;transform:none} #menu a.mlink:hover{color:var(--gold-300)} #menu .mfoot{margin-top:36px;font:500 10px/2 var(--pp);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-300)} /* ============ hero ============ */ .hero{ position:relative;min-height:100svh;background:var(--navy-900);color:var(--stone-50); display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden; } #skyline{position:absolute;inset:0;width:100%;height:100%} .hero .hshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,25,49,.55),rgba(7,25,49,0) 40%,rgba(7,25,49,.72) 88%);pointer-events:none} .hero .hin{position:relative;z-index:2;padding:0 var(--gut) clamp(36px,7vh,84px)} .hero .eyebrow{color:var(--gold-300)} .hero h1{ font-size:clamp(2.9rem,8.6vw,8.2rem);font-weight:700;letter-spacing:-.015em;line-height:1.02; margin:26px 0 24px;max-width:12ch; } .hero h1 .amp{color:var(--gold-500)} .hero .hsub{max-width:46ch;color:var(--stone-300);font-size:clamp(.95rem,1.3vw,1.1rem);opacity:0;transform:translateY(14px);transition:opacity .9s ease .6s,transform .9s var(--ease) .6s} html.ready .hero .hsub{opacity:1;transform:none} .hero .hcta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:34px;opacity:0;transition:opacity .9s ease .85s} html.ready .hero .hcta{opacity:1} .gbtn{ display:inline-flex;align-items:center;gap:12px; background:var(--gold-500);color:var(--navy-900); font:500 11px/1 var(--pp);letter-spacing:.22em;text-transform:uppercase; padding:16px 26px;border-radius:2px;transition:transform .3s var(--ease); } .gbtn svg{transition:transform .3s var(--ease)} .gbtn:hover svg{transform:translateX(4px)} .hlink{font:500 11px/1 var(--pp);letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--gold-500);padding-bottom:6px;color:var(--stone-50)} .hero .hmeta{ position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between; padding:0 var(--gut) 26px;font:500 9.5px/1 var(--pp);letter-spacing:.26em;text-transform:uppercase;color:var(--stone-300); } .hero .hmeta .hint{opacity:.75} .scrollcue{display:flex;align-items:center;gap:12px} .scrollcue .sline{width:1px;height:34px;background:var(--gold-500);overflow:hidden;position:relative} .scrollcue .sline::after{content:"";position:absolute;inset:0;background:var(--navy-900);animation:cue 1.8s var(--easeio) infinite} @keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(101%)}} .badge{position:absolute;right:clamp(18px,4vw,64px);bottom:clamp(120px,20vh,190px);z-index:2;width:110px;height:110px} .badge svg{width:100%;height:100%;animation:spin 22s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .badge text{font:500 10.5px var(--pp);letter-spacing:.32em;fill:var(--gold-300);text-transform:uppercase} .badge .bsqr{position:absolute;top:50%;left:50%;width:9px;height:9px;background:var(--gold-500);transform:translate(-50%,-50%) rotate(45deg)} @media (max-width:700px){.badge{display:none}} @media (prefers-reduced-motion:reduce){.badge svg,.scrollcue .sline::after{animation:none}} /* ============ sheet 01 · studio ============ */ .manif{max-width:1060px} .manif p{ font:500 clamp(1.5rem,3.4vw,2.9rem)/1.5 var(--pd);letter-spacing:.002em; } .manif .mw{color:var(--ink);opacity:.16;transition:opacity .35s ease} .manif .mw.lit{opacity:1} .pull{ margin-top:clamp(44px,7vh,80px);display:flex;align-items:center;gap:22px; } .pull .gsq{transform:rotate(45deg)} .pull em{font:500 italic clamp(1.25rem,2.2vw,1.8rem)/1.4 var(--pd);color:var(--gold-ink)} /* ============ sheet 02 · work ============ */ .stack{position:relative} .sheet{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;transition:background .5s} .sh-in{ flex:1;display:grid;grid-template-columns:minmax(320px,1fr) minmax(0,1.15fr); gap:clamp(24px,4vw,64px);align-items:center;padding:calc(72px + 2vh) var(--gut) 18px; transform-origin:top center;will-change:transform; } .sh-meta{display:flex;flex-direction:column;gap:18px;max-width:52ch} .sh-no{font:500 11px/1 var(--pp);letter-spacing:.3em;color:var(--gold-ink)} .sh-meta h3{font-size:clamp(2rem,4.2vw,3.9rem);font-weight:600;letter-spacing:-.01em} .sh-tags{display:flex;flex-wrap:wrap;gap:8px} .sh-tags span{font:500 9.5px/1 var(--pp);letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:8px 14px;color:var(--mut)} .sh-lede{color:var(--mut);max-width:44ch} .obtn{ display:inline-flex;align-items:center;gap:12px;margin-top:8px;align-self:flex-start; font:500 11px/1 var(--pp);letter-spacing:.24em;text-transform:uppercase; padding:14px 0;border-bottom:1px solid var(--gold-500); transition:letter-spacing .35s var(--ease),color .3s; } .obtn:hover{letter-spacing:.32em;color:var(--gold-ink)} .sh-fig{height:min(70svh,760px);position:relative;overflow:hidden;background:var(--bg2);border:1px solid var(--line-soft);transition:background .5s} .sh-fig .art{position:absolute;inset:-6% 0;will-change:transform} .tblock{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; margin:0 var(--gut);padding:14px 0 18px;border-top:1px solid var(--line); font:500 9px/1 var(--pp);letter-spacing:.24em;text-transform:uppercase;color:var(--mut); } .tblock .gsq{margin-left:auto} .sh-dim{position:absolute;inset:0;background:var(--navy-900);opacity:0;pointer-events:none;z-index:3} @media (max-width:900px){ .sh-in{grid-template-columns:1fr;align-content:start;gap:22px;padding-top:86px} .sh-fig{height:44svh} .sheet{height:auto;min-height:100svh;position:relative} } /* work index */ .index{margin-top:clamp(60px,10vh,120px)} .irow{ display:grid;grid-template-columns:3.2rem 1fr auto auto 4.2rem;gap:clamp(12px,2.5vw,40px); align-items:baseline;width:100%;text-align:left; padding:26px 6px;border-top:1px solid var(--line);position:relative; } .irow:last-of-type{border-bottom:1px solid var(--line)} .irow .ino{font:500 11px/1 var(--pp);letter-spacing:.2em;color:var(--gold-ink)} .irow .ititle{font:600 clamp(1.35rem,2.6vw,2.1rem)/1.15 var(--pd);transition:transform .45s var(--ease),color .3s} .irow .iscope,.irow .iloc{font:500 10px/1.6 var(--pp);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)} .irow .iyr{font:500 11px/1 var(--pp);letter-spacing:.14em;color:var(--mut);text-align:right;font-variant-numeric:tabular-nums} .irow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;background:var(--bg2);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease);z-index:-1} .irow:hover::after{transform:scaleY(1)} .irow:hover .ititle{transform:translateX(14px);color:var(--gold-ink)} @media (max-width:700px){.irow{grid-template-columns:2.4rem 1fr 3.4rem}.irow .iscope,.irow .iloc{display:none}} #preview{ position:fixed;top:0;left:0;z-index:65;width:min(300px,30vw);aspect-ratio:3/3.6; pointer-events:none;overflow:hidden;background:var(--bg2);border:1px solid var(--line); opacity:0;transform:scale(.85);transition:opacity .35s ease,scale .35s var(--ease); display:none; } @media (hover:hover) and (pointer:fine){#preview{display:block}} #preview.on{opacity:1;transform:scale(1)} #preview .art{position:absolute;inset:0} /* ============ sheet 03 · details ============ */ .dwrap{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;cursor:grab} .dwrap::-webkit-scrollbar{display:none} .dwrap.grabbing{cursor:grabbing} #dtrack{display:flex;gap:clamp(16px,2vw,28px);padding:6px var(--gut) 26px;width:max-content} .dcard{ flex:0 0 auto;width:clamp(230px,26vw,330px);background:var(--card); border:1px solid var(--line-soft);padding:20px;display:flex;flex-direction:column;gap:16px; transition:transform .5s var(--ease),background .5s; user-select:none;-webkit-user-select:none; } .dcard:hover{transform:translateY(-8px)} .dcard .dart{height:250px;background:var(--bg2);position:relative;overflow:hidden;transition:background .5s} .dcard .dcap{font:500 9.5px/1.7 var(--pp);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)} .dcard .dcap b{display:block;color:var(--ink);font-weight:500} .dcard.dq{justify-content:center;background:var(--navy-800);color:var(--stone-50);min-height:330px} .dcard.dq em{font:500 italic clamp(1.2rem,1.8vw,1.55rem)/1.5 var(--pd);color:var(--gold-300)} .dcard.dq .dcap{color:var(--stone-300)} .dprog{height:1px;background:var(--line-soft);margin:8px var(--gut) 0;position:relative} .dprog i{position:absolute;left:0;top:0;height:100%;width:20%;background:var(--gold-500);transition:transform .2s linear, width .2s} /* ============ sheet 04 · numbers ============ */ .nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .num{padding:clamp(28px,4.5vh,54px) clamp(14px,2vw,34px);border-left:1px solid var(--line)} .num:first-child{border-left:0} .num .nv{font:600 clamp(2.4rem,5.4vw,4.6rem)/1 var(--pd);font-variant-numeric:tabular-nums} .num .nv sup{font:500 .38em var(--pp);color:var(--gold-ink);letter-spacing:.1em;vertical-align:super} .num .nl{margin-top:12px;font:500 9.5px/1.6 var(--pp);letter-spacing:.22em;text-transform:uppercase;color:var(--mut)} @media (max-width:700px){.nums{grid-template-columns:1fr 1fr}.num:nth-child(3){border-left:0}.num:nth-child(n+3){border-top:1px solid var(--line)}} /* ============ sheet 05 · process ============ */ .mgrid{display:grid;grid-template-columns:minmax(220px,.9fr) 1.6fr;gap:clamp(28px,6vw,110px)} .mleft{position:sticky;top:22vh;align-self:start;height:fit-content} .mnum{height:1em;overflow:hidden;font:600 clamp(5rem,11vw,9.5rem)/1 var(--pd);color:var(--gold-500)} .mcol{display:flex;flex-direction:column;transition:transform .7s var(--easeio)} .mcol b{height:1em;font-weight:600} .mstep{min-height:56svh;display:flex;flex-direction:column;justify-content:center;gap:14px;border-top:1px solid var(--line);padding-block:30px;opacity:.32;transition:opacity .5s ease} .mstep.act{opacity:1} .mstep h3{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:600} .mstep p{color:var(--mut);max-width:52ch} .mstep .slab{font:500 10px/1 var(--pp);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink)} @media (max-width:700px){.mgrid{grid-template-columns:1fr}.mleft{display:none}.mstep{min-height:0;opacity:1}} /* ============ sheet 06 · practice ============ */ .pgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,100px);align-items:start} .svc{border-top:1px solid var(--line)} .srow{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:22px 4px;border-bottom:1px solid var(--line);transition:padding .35s var(--ease)} .srow:hover{padding-left:16px} .srow b{font:600 clamp(1.25rem,2.2vw,1.8rem)/1.2 var(--pd)} .srow span{font:500 9.5px/1.6 var(--pp);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);text-align:right} .principal{margin-top:40px} .principal .pn{font:600 1.5rem/1.2 var(--pd)} .principal .pr{font:500 10px/1 var(--pp);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);margin-top:8px} .principal p{color:var(--mut);margin-top:14px;max-width:46ch} /* business card */ .bcwrap{display:flex;flex-direction:column;gap:16px;align-items:flex-start} .bcnote{font:500 9.5px/1 var(--pp);letter-spacing:.22em;text-transform:uppercase;color:var(--mut)} .bcard{width:min(430px,100%);aspect-ratio:1.586;perspective:1400px} .bc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--easeio)} .bcard:hover .bc-in,.bcard.flip .bc-in{transform:rotateY(180deg)} .bc-f,.bc-b{ position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden; background:var(--navy-900);color:var(--stone-50);border:1px solid rgba(232,203,146,.28); padding:clamp(16px,4%,26px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden; } .bc-b{transform:rotateY(180deg)} .bc-tag{font:500 italic .95rem/1.4 var(--pd);color:var(--gold-300)} .bc-name{font:600 1.35rem/1.1 var(--pd)} .bc-role{font:500 8px/1 var(--pp);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-300);margin-top:6px} .bc-line{font:500 9px/2.1 var(--pp);letter-spacing:.08em;color:var(--stone-300);display:flex;align-items:center;gap:10px} .bc-line svg{flex:0 0 auto;stroke:var(--gold-500)} .bc-sky{position:absolute;right:-12px;bottom:-8px;width:56%;opacity:.85;pointer-events:none} .bc-sky path,.bc-sky rect,.bc-sky line{stroke:var(--gold-500);fill:none;stroke-width:1.3} @media (prefers-reduced-motion:reduce){.bc-in{transition:none}} /* ============ footer ============ */ .mq{overflow:hidden;border-block:1px solid var(--line);padding-block:18px} .mqt{display:inline-flex;gap:0;white-space:nowrap;animation:mq 30s linear infinite;will-change:transform} .mq:hover .mqt{animation-play-state:paused} .mqt span{font:500 12px/1 var(--pp);letter-spacing:.3em;text-transform:uppercase;color:var(--mut);padding-right:3rem;display:inline-flex;align-items:center;gap:3rem} .mqt .gsq{display:inline-block} @keyframes mq{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.mqt{animation:none}} footer .cta{padding:clamp(70px,12vh,140px) var(--gut);display:flex;flex-direction:column;gap:26px;align-items:flex-start} footer .cta h2{font-size:clamp(2.4rem,6.5vw,5.6rem);font-weight:600;max-width:16ch} footer .cta h2 em{font-style:italic;color:var(--gold-ink)} .fgrid{ display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,70px); padding:0 var(--gut) 60px; } .fgrid h4{font:500 10px/1 var(--pp);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:16px} /* text-wrap:pretty asks the browser to avoid leaving a single word stranded on the last line. These columns get narrow on tablet, where "10:00 - 19:00" would otherwise break across lines mid-range. */ .fgrid p,.fgrid a,.fgrid address{color:var(--mut);font-size:.92rem;line-height:2;text-wrap:pretty} /*
defaults to italic; the studio address is set like the rest. The measure matters more than it looks: below 800px this column goes full width, and without it a one-line address runs edge to edge and strands the last word of the postcode on its own line. text-wrap:pretty asks browsers that support it to avoid the orphan even inside the measure. */ .fgrid address{font-style:normal;max-width:34ch;text-wrap:pretty} .fgrid a{display:block} .fgrid a:hover{color:var(--gold-ink)} @media (max-width:800px){.fgrid{grid-template-columns:1fr}} .fbig{padding:0 var(--gut);overflow:hidden} .fbig .fb{ display:flex;justify-content:space-between; font:700 clamp(3.4rem,16.5vw,15rem)/1 var(--pd); -webkit-text-stroke:1px var(--ink);color:transparent;letter-spacing:.02em; } .fbig .fb{ background-image:linear-gradient(100deg,transparent 40%,var(--gold-500) 50%,transparent 60%); background-size:260% 100%;background-repeat:no-repeat;background-position:-80% 0; -webkit-background-clip:text;background-clip:text; animation:fbshim 6.5s linear infinite; } @keyframes fbshim{from{background-position:-80% 0}to{background-position:180% 0}} @media (prefers-reduced-motion:reduce){.fbig .fb{animation:none;background-image:none}} .fbig .fb span{transition:color .4s ease,transform .8s var(--ease)} .fbig .fb span:hover{color:var(--gold-500);-webkit-text-stroke-color:var(--gold-500)} .fbar{ display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center; padding:22px var(--gut) 30px;margin-top:24px;border-top:1px solid var(--line); font:500 9px/1.8 var(--pp);letter-spacing:.22em;text-transform:uppercase;color:var(--mut); } /* stamp (drawing mode only) */ #stamp{ display:none;position:fixed;left:18px;bottom:18px;z-index:75; border:1px solid rgba(232,203,146,.4);padding:9px 13px;gap:12px;align-items:center; font:500 8px/1 var(--pp);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-300); background:color-mix(in srgb,var(--navy-900) 72%,transparent);backdrop-filter:blur(6px); } @media (max-width:700px){#stamp{display:none !important}} /* ============ case overlay ============ */ #case{ position:fixed;inset:0;z-index:90;background:var(--bg);color:var(--ink); transform:translateY(102%);transition:transform .8s var(--easeio); } #case.open{transform:none} #case .ovs{height:100%;overflow-y:auto;padding:clamp(80px,12vh,130px) var(--gut) 80px} #caseClose{ position:absolute;top:20px;right:var(--gut);z-index:2; display:flex;align-items:center;gap:10px; font:500 10px/1 var(--pp);letter-spacing:.24em;text-transform:uppercase; border:1px solid var(--line);border-radius:99px;padding:12px 18px;background:var(--bg); transition:border-color .3s,color .3s; } #caseClose:hover{border-color:var(--gold-500);color:var(--gold-ink)} .c-head{display:flex;flex-direction:column;gap:18px;max-width:900px} .c-head h2{font-size:clamp(2.2rem,6vw,5rem);font-weight:600} .c-fig{height:min(72svh,720px);margin:clamp(30px,5vh,60px) 0;position:relative;overflow:hidden;background:var(--bg2);border:1px solid var(--line-soft)} .c-fig .art{position:absolute;inset:0} .c-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:clamp(30px,5vh,60px)} .c-facts div{background:var(--bg);padding:18px} .c-facts dt{font:500 9px/1 var(--pp);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px} .c-facts dd{font:500 1rem/1.4 var(--pp)} .c-body{columns:2 340px;column-gap:60px;max-width:1100px;color:var(--mut)} .c-body p{margin-bottom:1.2em;break-inside:avoid} .c-nav{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(40px,7vh,80px);border-top:1px solid var(--line);padding-top:26px} .c-nav button{display:flex;flex-direction:column;gap:8px;text-align:left} .c-nav button:last-child{text-align:right;align-items:flex-end} .c-nav .cnl{font:500 9px/1 var(--pp);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink)} .c-nav .cnt{font:600 clamp(1.2rem,2.4vw,1.9rem)/1.2 var(--pd);transition:color .3s} .c-nav button:hover .cnt{color:var(--gold-ink)} /* ============ art (line-work placeholders) ============ */ .art{--p1:var(--navy-600);--p2:var(--navy-400);--p3:var(--navy-800)} .art svg{width:100%;height:100%;display:block} .art .f1{fill:var(--p1)} .art .f2{fill:var(--p2)} .art .f3{fill:var(--p3)} .art .fg{fill:var(--gold-500)} .art .fs{fill:var(--bg)} .art .ln{stroke:var(--p3);fill:none;stroke-width:1.5;stroke-linecap:round} .art .lnb{stroke:var(--p3);fill:none;stroke-width:3;stroke-linecap:round} .art .gln{stroke:var(--gold-500);fill:none;stroke-width:1.4;stroke-linecap:round} .art .alab{font:500 19px var(--pp);letter-spacing:.22em;fill:var(--mut)} .art .dim{opacity:0;transition:opacity .5s ease} .art .dim line{stroke:var(--gold-300);stroke-width:1.1} .art .dimt{font:500 21px var(--pp);letter-spacing:.18em;fill:var(--gold-300)} /* ---- short desktop viewports: keep hero inside one screen ---- */ @media (min-width:641px) and (max-height:900px){ .hero h1{font-size:min(6.6vw,5.6rem);margin:18px 0 16px} .hero .hsub{max-width:60ch;font-size:.95rem} .hero .hcta{margin-top:22px} .hero .hin{padding-bottom:clamp(28px,5vh,60px)} .badge{width:88px;height:88px;bottom:100px} } /* ---- small screens ---- */ @media (max-width:640px){ .brand .bsub{display:none} .enq{padding:10px 14px;letter-spacing:.12em} #themeBtn{padding:8px 10px} .eyebrow{display:block} .eyebrow::after{display:none} .hero .eyebrow{font-size:10px;letter-spacing:.14em} .hero h1{font-size:clamp(2.5rem,11.5vw,4rem)} .hmeta .hint{display:none} .pgrid{grid-template-columns:1fr;gap:44px} .tblock{gap:8px 14px;font-size:8px} .irow{padding:20px 4px} .c-nav .cnt{font-size:1.05rem} footer .cta h2{font-size:clamp(1.9rem,8.5vw,2.6rem)} } /* ============ mobile fixes ============ */ :root{--hdr-h:66px} html{-webkit-text-size-adjust:100%} .hero{min-height:100vh;min-height:100svh} main [id],footer[id]{scroll-margin-top:calc(var(--hdr-h) + 10px)} #stamp{transition:opacity .4s ease} #stamp.hid{opacity:0;pointer-events:none} .menu-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:34px} #menuTheme{ display:inline-flex;align-items:center;gap:10px; font:500 11px/1 var(--pp);letter-spacing:.2em;text-transform:uppercase;color:var(--stone-50); border:1px solid rgba(232,203,146,.4);border-radius:99px;padding:14px 18px; } #menuTheme .tdot{width:7px;height:7px;background:var(--gold-500);transform:rotate(45deg);transition:transform .5s var(--ease)} :root[data-theme="dark"] #menuTheme .tdot{transform:rotate(225deg) scale(1.2)} @media (max-width:1000px){ #hdr{gap:10px;padding-block:11px} #hdr.scrolled{background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(8px)} .hright{gap:8px} #themeBtn,#burger{min-height:44px;display:inline-flex;align-items:center;justify-content:center} #themeBtn{padding:0 13px;border-radius:99px} #hdr .enq{display:none} #burger{padding:0 8px;margin-right:-8px;flex-direction:column;gap:6px} .hero .hin{padding-top:calc(var(--hdr-h) + 28px)} .sh-in{padding-top:calc(var(--hdr-h) + 30px)} .sh-fig{height:min(46svh,420px)} .obtn{padding:17px 0} .dwrap{touch-action:pan-y;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} .dcard{scroll-snap-align:center} .dcard:hover{transform:none} .sec{padding-block:clamp(64px,9vh,110px)} .index{margin-top:clamp(48px,7vh,80px)} #menu{justify-content:flex-end;gap:0;padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))} #menu a.mlink{padding:9px 0;font-size:clamp(2rem,8.5vw,3.2rem)} #case .ovs{overscroll-behavior:contain;-webkit-overflow-scrolling:touch} #caseClose{top:calc(12px + env(safe-area-inset-top,0px));padding:14px 18px} } @media (max-width:640px){ .hero .hin{padding-bottom:26px} .hero .hmeta{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));font-size:9px;letter-spacing:.2em} .dcard{width:min(78vw,300px)} .dcard .dart{height:200px} .dcard.dq{min-height:280px} .num{padding:26px 16px} .mqt span{font-size:10px;letter-spacing:.24em;padding-right:2rem;gap:2rem} .bcard{width:100%} .c-facts{grid-template-columns:1fr 1fr} .fbar{gap:10px} } /* ============ tablets ============ */ @media (min-width:601px) and (max-width:1024px){ :root{--gut:clamp(34px,5vw,64px)} .sec{padding-block:clamp(90px,10vh,130px)} .hero h1{font-size:clamp(3.6rem,8vw,6rem);max-width:14ch} .hero .hsub{max-width:54ch;font-size:1.05rem} .badge{width:96px;height:96px} .manif p{font-size:clamp(1.9rem,3.6vw,2.5rem)} /* work sheets: taller drawing, text held to a readable measure */ .sh-in{gap:30px} .sh-fig{height:min(52svh,560px)} .sh-meta{max-width:62ch} .sh-meta h3{font-size:clamp(2.4rem,4.6vw,3.4rem)} /* details: two cards in view */ .dcard{width:clamp(300px,42vw,400px)} .dcard .dart{height:300px} /* process: keep the big number column */ .mgrid{grid-template-columns:minmax(150px,.6fr) 1.7fr;gap:40px} .mnum{font-size:clamp(4rem,9vw,6.5rem)} .mstep{min-height:44svh} /* practice + card side by side, card a touch smaller */ .pgrid{grid-template-columns:1.15fr .85fr;gap:44px} .bcard{width:100%} /* footer in two columns */ .fgrid{grid-template-columns:1.3fr 1fr;gap:32px 44px} .fgrid>div:first-child{grid-column:1/-1} /* menu overlay sits as a panel, not a full bleed of text */ #menu a.mlink{font-size:clamp(2.8rem,6vw,3.8rem);padding:6px 0} .menu-act{margin-top:40px} .c-body{columns:2 300px} } @media (min-width:601px) and (max-width:700px){ .pgrid{grid-template-columns:1fr;gap:46px} .bcard{width:min(430px,100%)} } @media (min-width:601px) and (max-width:1024px) and (orientation:landscape){ .hero h1{font-size:clamp(3.2rem,6.4vw,5rem)} .sh-fig{height:min(58svh,520px)} .mstep{min-height:52svh} } /* ============================================================ WordPress integration ============================================================ The prototype was a single hand-built page with no editor content, no comments and no pagination. Everything below covers what WordPress adds. Same rules as the rest of the theme: no radius, no shadows, 1px rules, gold strictly as an accent. ============================================================ */ /* accessibility ------------------------------------------------------- */ .screen-reader-text{ border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px; margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important; } .screen-reader-text:focus{ clip:auto!important;clip-path:none;display:block;height:auto;width:auto; left:var(--gut);top:12px;padding:14px 22px;z-index:100000; background:var(--navy-900);color:var(--stone-50); font:500 11px/1 var(--pp);letter-spacing:.2em;text-transform:uppercase; } .skip-link:focus{outline:2px solid var(--gold);outline-offset:3px} /* editor content ------------------------------------------------------ */ .entry-content > * + *{margin-top:1.1em} .entry-content h2, .entry-content h3, .entry-content h4{font-family:var(--pd);font-weight:600;line-height:1.15;margin-top:1.8em} .entry-content h2{font-size:clamp(1.7rem,3.2vw,2.6rem)} .entry-content h3{font-size:clamp(1.35rem,2.4vw,1.9rem)} .entry-content h4{font-size:1.15rem} .entry-content a{color:var(--gold-ink);border-bottom:1px solid var(--gold-500);transition:color .3s} .entry-content a:hover{color:var(--ink)} .entry-content ul, .entry-content ol{padding-left:1.4em} .entry-content li + li{margin-top:.4em} .entry-content blockquote{ border-left:1px solid var(--gold-500);padding-left:clamp(18px,3vw,34px); font-family:var(--pd);font-style:italic;font-size:1.25rem;color:var(--ink); } .entry-content code, .entry-content pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em} .entry-content pre{background:var(--bg2);padding:20px;overflow-x:auto;border:1px solid var(--line-soft)} .entry-content img, .entry-content iframe{max-width:100%;height:auto;display:block} .entry-content figcaption, .wp-caption-text{font:500 10px/1.6 var(--pp);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:10px} .entry-content table{width:100%;border-collapse:collapse} .entry-content th, .entry-content td{border-bottom:1px solid var(--line);padding:12px 8px;text-align:left} .entry-content hr{border:0;border-top:1px solid var(--line);margin:2.4em 0} .alignleft{float:left;margin:0 1.6em 1.2em 0} .alignright{float:right;margin:0 0 1.2em 1.6em} .aligncenter{margin-left:auto;margin-right:auto} .alignwide{width:min(1200px,92vw);margin-left:50%;transform:translateX(-50%)} .alignfull{width:100vw;margin-left:50%;transform:translateX(-50%);max-width:none} .sticky .entry-title::after{content:"·";color:var(--gold);margin-left:.4em} /* archive entries ----------------------------------------------------- */ .entry{padding:34px 0;border-top:1px solid var(--line)} .entry:last-of-type{border-bottom:1px solid var(--line)} .entry-title{font:600 clamp(1.4rem,2.6vw,2.1rem)/1.15 var(--pd)} .entry-title a{transition:color .3s} .entry-title a:hover{color:var(--gold-ink)} /* single project ------------------------------------------------------ */ .project-single .c-fig{margin:clamp(34px,6vh,70px) 0} .project-single .c-facts{margin-bottom:clamp(34px,6vh,70px)} .project-single .tblock{margin-inline:0} /* pagination ---------------------------------------------------------- */ .pagination, .page-links{margin-top:clamp(40px,7vh,80px)} .pagination .nav-links, .page-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .pagination .page-numbers, .page-links a, .page-links > span{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--line); font:500 11px/1 var(--pp);letter-spacing:.16em;text-transform:uppercase; transition:border-color .3s,color .3s; } .pagination .page-numbers:hover, .page-links a:hover{border-color:var(--gold-500);color:var(--gold-ink)} .pagination .page-numbers.current, .page-links > span{border-color:var(--gold-500);color:var(--gold-ink)} /* comments ------------------------------------------------------------ */ .comments{margin-top:clamp(60px,10vh,110px);padding-top:clamp(30px,5vh,60px);border-top:1px solid var(--line)} .comments h2{font:600 clamp(1.4rem,2.6vw,2rem)/1.2 var(--pd);margin-bottom:26px} .comment-list{list-style:none;padding:0} .comment-list li{padding:22px 0;border-top:1px solid var(--line-soft)} .comment-list .children{list-style:none;padding-left:clamp(16px,3vw,40px)} .comment-meta{font:500 10px/1.6 var(--pp);letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:8px} .comment-form p{margin-bottom:16px} .comment-form label{display:block;font:500 10px/1 var(--pp);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:8px} input[type=text],input[type=email],input[type=url],input[type=search],input[type=password],textarea{ width:100%;padding:14px 16px;min-height:44px; background:var(--card);color:var(--ink); border:1px solid var(--line);border-radius:2px; font:400 15px/1.6 var(--pp); transition:border-color .3s; } input:focus,textarea:focus{border-color:var(--gold-500);outline:none} input[type=submit],.comment-form .submit{ display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 26px; background:var(--gold);color:var(--navy-900);border:0;border-radius:2px;cursor:pointer; font:500 11px/1 var(--pp);letter-spacing:.2em;text-transform:uppercase; transition:background .3s; } input[type=submit]:hover{background:var(--gold-300)} /* search form --------------------------------------------------------- */ .search-form{display:flex;gap:10px;max-width:520px;margin-top:24px} .search-form label{flex:1} /* footer map ---------------------------------------------------------- */ /* A facade: the locator drawing stands in until someone asks for the real map, so Google loads nothing — no script, no cookie — on a page nobody clicked. The drawing carries the line-art classes, so it inverts to gold wireframe in drawing mode like every other figure on the site. */ .fmap{ position:relative;margin-top:22px; aspect-ratio:16/9;max-width:34ch; border:1px solid var(--line-soft);background:var(--bg2); overflow:hidden; } .fmap-art{position:absolute;inset:0} .fmap-art svg{width:100%;height:100%;display:block} .fmap.has-embed .fmap-art{transition:opacity .5s var(--ease)} .fmap.has-embed:hover .fmap-art{opacity:.72} .fmap-load{ position:absolute;inset:0;width:100%; display:flex;align-items:center;justify-content:center; font:500 10px/1 var(--pp);letter-spacing:.22em;text-transform:uppercase; color:var(--ink);background:none;border:0;cursor:pointer; transition:letter-spacing .35s var(--ease); } .fmap-load span{ padding:12px 20px;background:color-mix(in srgb,var(--bg) 86%,transparent); border:1px solid var(--gold-500); } .fmap-load:hover{letter-spacing:.3em} .fmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* The embedded map is Google's own colours and cannot be restyled. In drawing mode it would sit in the page as a bright rectangle, so it is dimmed and desaturated to sit closer to the drawing set. */ :root[data-theme="dark"] .fmap iframe{filter:saturate(.35) brightness(.72) contrast(1.05)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .fmap iframe{filter:saturate(.35) brightness(.72) contrast(1.05)} } .fmap-links{margin-top:12px} .fmap-links a{ display:inline-flex;align-items:center;gap:8px; font:500 10px/1 var(--pp);letter-spacing:.22em;text-transform:uppercase; color:var(--gold-ink);border-bottom:1px solid var(--gold-500); padding-bottom:6px;transition:letter-spacing .35s var(--ease); } .fmap-links a:hover{letter-spacing:.3em;color:var(--gold-ink)} @media (max-width:800px){ .fmap{max-width:none} }