/* ============================================================ GD EVENTS GROUP — DESIGN SYSTEM One source. Linked by the website, inlined into the capability and experience statements at build time. Tokens derived from GD_Capability.html. ============================================================ */ :root{ --cream:#FFF5EB; --cream-warm:#F9EDDE; --snow:#FFFCFA; --sand:#EAD9C4; --black:#000000; --ink:#1A1A1A; --muted:#5E5750; --green:#0C2120; --burgundy:#6E1423; --hairline:rgba(10,10,10,0.09); --hairline-light:rgba(255,252,250,0.16); --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Work Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --accent:'Cinzel',Georgia,serif; --ease:cubic-bezier(0.22,1,0.36,1); --gutter:clamp(22px,5vw,64px); --section-y:clamp(72px,11vw,150px); --measure:66ch; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300; font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{color:inherit} /* ---------- TYPE ---------- */ .display{font-family:var(--serif);font-weight:300;font-size:clamp(38px,6.4vw,82px); line-height:1.06;letter-spacing:-.012em} h1,h2{font-family:var(--serif);font-weight:300;font-size:clamp(28px,4.1vw,52px); line-height:1.16;letter-spacing:-.008em;color:var(--green)} h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.3vw,27px); line-height:1.3;color:var(--green)} p{max-width:var(--measure)} p + p{margin-top:1.15em} .label{font-family:var(--accent);font-size:9.5px;font-weight:400;letter-spacing:.3em; text-transform:uppercase;color:var(--muted)} .lede{font-family:var(--serif);font-size:clamp(19px,2.2vw,25px);line-height:1.56; color:var(--ink);font-weight:300} .fine{font-size:13.5px;line-height:1.8;color:var(--muted)} /* ---------- LAYOUT ---------- */ .wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)} .narrow{max-width:860px;margin-inline:auto} section{padding-block:var(--section-y);position:relative} .on-cream{background:var(--cream)} .on-warm{background:var(--cream-warm)} .on-snow{background:var(--snow)} .on-green{background:var(--green);color:var(--sand)} .on-black{background:var(--black);color:var(--sand)} .on-black h1,.on-black h2,.on-black h3{color:var(--snow)} .on-black .label{color:var(--sand);opacity:.72} .on-black .lede{color:var(--snow)} .on-black p{color:var(--sand);opacity:.86} .on-black .sense{border-top:1px solid var(--hairline-light)} .on-black .sense .nm{font-family:var(--serif);font-size:22px;color:var(--snow)} .on-black .cta{color:var(--sand);border-color:rgba(234,217,196,.34)} .on-black .cta:hover{background:var(--sand);color:var(--black);border-color:var(--sand)} .on-black :focus-visible{outline-color:var(--sand)} .on-green h1,.on-green h2,.on-green h3{color:var(--snow)} .on-green .label{color:var(--sand);opacity:.72} .on-green .lede{color:var(--snow)} .on-green p{color:var(--sand);opacity:.86} .rule{height:1px;background:var(--hairline);border:0;margin-block:clamp(34px,5vw,60px)} .on-green .rule{background:var(--hairline-light)} /* ---------- NAV ---------- */ nav.top{position:fixed;inset-block-start:0;inset-inline:0;z-index:60; display:flex;align-items:center;justify-content:space-between; padding:20px var(--gutter);font-family:var(--accent); font-size:9.5px;letter-spacing:.26em;text-transform:uppercase; transition:color .4s var(--ease),background .4s var(--ease);color:var(--sand)} nav.top.on-light{color:var(--green);background:rgba(255,245,235,.93); backdrop-filter:saturate(1.4) blur(9px)} nav.top a{text-decoration:none;opacity:.86;transition:opacity .3s var(--ease)} nav.top a:hover,nav.top a:focus-visible{opacity:1} nav.top .nav-links{display:flex;gap:clamp(16px,2.4vw,34px)} @media (max-width:780px){nav.top .nav-links{display:none}} /* ---------- LOCKUP ---------- */ .lockup .mark{font-family:var(--accent);font-weight:500; font-size:clamp(13px,1.5vw,16px);letter-spacing:.3em;text-transform:uppercase} .lockup .descriptor{font-family:var(--serif);font-style:italic; font-size:clamp(15px,1.8vw,19px);margin-top:14px;opacity:.78} .lockup .line{margin-top:10px} /* ---------- HERO — linen ground, image held as a plate ---------- */ .hero{ display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); align-items:center; min-height:clamp(560px,92svh,900px); background:var(--cream); position:relative;overflow:hidden; padding:clamp(104px,13vh,150px) 0 clamp(60px,9vh,96px); } /* the faintest warm wash, so the field isn't flat */ .hero::before{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(120% 95% at 2% 10%,rgba(234,217,196,.30),rgba(234,217,196,.08) 48%,transparent 78%), linear-gradient(180deg,var(--snow) 0%,var(--cream) 46%,var(--cream-warm) 100%); } .hero > *{position:relative;z-index:2} .hero-copy{ padding-inline:var(--gutter) clamp(30px,4.4vw,70px); display:flex;flex-direction:column;justify-content:center; } .hero-logo{width:clamp(78px,6.8vw,100px);height:auto;margin-bottom:clamp(22px,2.8vw,32px)} .hero .descriptor{color:var(--muted);opacity:1;margin-top:0; font-family:var(--serif);font-style:italic} .hero .display{color:var(--green);margin-top:12px} .hero-sub{margin-top:clamp(24px,3.4vw,36px);color:var(--muted);opacity:1; max-width:40ch;font-size:15px} /* image sits as a plate with air around it, not a block butted to the edge */ .hero-pane{ position:relative; margin-inline-end:var(--gutter); aspect-ratio:4/5;max-height:72svh; overflow:hidden; box-shadow:0 30px 70px -36px rgba(12,33,32,.34),0 2px 10px -4px rgba(12,33,32,.12); } .hero-pane img{width:100%;height:100%;object-fit:cover;object-position:56% 50%; transform:scale(1.045);animation:heroDrift 28s var(--ease) forwards} @keyframes heroDrift{to{transform:scale(1)}} @media (prefers-reduced-motion:reduce){.hero-pane img{animation:none;transform:none}} .hero-credit{ position:absolute;z-index:3;inset-block-end:11px;inset-inline-end:14px; font-family:var(--accent);font-size:7.5px;letter-spacing:.24em;text-transform:uppercase; color:var(--snow);opacity:.66;margin:0;text-shadow:0 1px 8px rgba(4,12,11,.75)} @media (max-width:880px){ .hero{grid-template-columns:1fr;align-items:start; padding:clamp(100px,14vh,136px) 0 clamp(48px,7vh,70px);gap:clamp(30px,5vw,44px)} .hero-copy{padding-inline:var(--gutter);order:2} .hero-pane{order:1;margin-inline:var(--gutter);aspect-ratio:3/2;max-height:none} .hero-logo{width:76px} } /* ---------- GRIDS ---------- */ .grid{display:grid;gap:clamp(26px,3.4vw,52px)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} @media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}} /* ---------- EXPRESSION ---------- */ .expression{padding-top:24px;border-top:1px solid var(--hairline)} .expression .idx{font-family:var(--accent);font-size:10px;letter-spacing:.24em;color:var(--muted)} .expression h3{margin-top:12px} .expression p{margin-top:12px;font-size:14.5px;color:var(--muted);line-height:1.72} /* ---------- SENSE ---------- */ .sense{padding-top:22px;border-top:1px solid var(--hairline-light)} .sense .nm{font-family:var(--serif);font-size:22px;color:var(--snow)} .sense p{margin-top:9px;font-size:14px;line-height:1.7} /* ---------- LINKS & CTA ---------- */ .inline-link{color:var(--burgundy);text-decoration:none; border-bottom:1px solid rgba(110,20,35,.32);padding-bottom:1px; transition:border-color .3s var(--ease)} .inline-link:hover,.inline-link:focus-visible{border-bottom-color:var(--burgundy)} .on-green .inline-link{color:var(--sand);border-bottom-color:rgba(234,217,196,.4)} .cta{display:inline-block;margin-top:clamp(28px,4vw,44px); font-family:var(--accent);font-size:10px;letter-spacing:.28em;text-transform:uppercase; text-decoration:none;color:var(--green);border:1px solid rgba(12,33,32,.3); padding:17px 30px;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)} .cta:hover,.cta:focus-visible{background:var(--green);color:var(--snow);border-color:var(--green)} .on-green .cta{color:var(--sand);border-color:rgba(234,217,196,.34)} .on-green .cta:hover,.on-green .cta:focus-visible{background:var(--sand);color:var(--green);border-color:var(--sand)} /* ---------- FOOTER ---------- */ footer{background:var(--black);color:var(--sand);padding-block:clamp(60px,8vw,96px)} footer a{text-decoration:none;opacity:.84;transition:opacity .3s var(--ease)} footer a:hover,footer a:focus-visible{opacity:1} footer .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(30px,4vw,56px)} @media (max-width:760px){footer .foot-grid{grid-template-columns:1fr;gap:38px}} footer .col-h{font-family:var(--accent);font-size:9px;letter-spacing:.26em; text-transform:uppercase;opacity:.78;margin-bottom:15px} footer ul{list-style:none} footer li{margin-bottom:9px;font-size:14px} footer .legal{line-height:1.6;margin-top:clamp(42px,6vw,70px);padding-top:26px; border-top:1px solid var(--hairline-light);font-size:12px;opacity:.82; display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap} /* ---------- REVEAL ---------- */ .reveal{opacity:0;transform:translateY(16px); transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} /* ---------- A11Y ---------- */ .skip{position:absolute;left:-9999px;top:0;z-index:100; background:var(--green);color:var(--snow);padding:12px 20px} .skip:focus{left:12px;top:12px} :focus-visible{outline:2px solid var(--burgundy);outline-offset:3px} .on-green :focus-visible{outline-color:var(--sand)} /* ---------- LOGO ---------- */ .nav-logo{display:block;line-height:0} .nav-logo img{width:clamp(38px,3.4vw,48px);height:auto;transition:opacity .4s var(--ease)} .nav-logo .l-green{display:none} nav.top.on-light .nav-logo .l-snow{display:none} nav.top.on-light .nav-logo .l-green{display:block} .hero-logo{width:clamp(84px,7.6vw,112px);height:auto;margin-bottom:clamp(18px,2.4vw,28px)} .foot-logo{width:clamp(76px,7vw,96px);height:auto;margin-bottom:14px} /* Soft shadow lets the scrim stay light without losing legibility */ .hero-credit{text-shadow:0 1px 8px rgba(6,16,15,.7)} /* The hero already carries the mark; don't repeat it in the nav over the hero */ nav.top .nav-logo{opacity:1;transition:opacity .45s var(--ease)} nav.top.at-top .nav-logo{opacity:0;pointer-events:none} /* nav over a bright hero */ /* nav sits partly over the photograph — give it a soft ground */ .hero-pane::before{ content:'';position:absolute;inset-block-start:0;inset-inline:0;height:150px;z-index:2; pointer-events:none; background:linear-gradient(180deg,rgba(6,16,15,.70) 0%,rgba(6,16,15,.34) 48%,transparent 100%); } @media (max-width:860px){ .hero-pane::before{height:120px} } nav.top.at-top .nav-logo{opacity:0;pointer-events:none} .hero-pane::before{content:none} nav.top.at-top.on-light{background:transparent;backdrop-filter:none} /* ---------- INNER PAGE HEAD ---------- */ .page-head{padding-block:clamp(140px,19vh,215px) clamp(56px,8vw,96px)} .page-head .display{color:var(--green);font-size:clamp(34px,5.4vw,66px)} .page-head .lede{max-width:52ch} /* ---------- JOURNAL ---------- */ .journal-list{display:grid;gap:0} .entry{display:block;text-decoration:none;color:inherit; padding-block:clamp(28px,3.6vw,42px);border-top:1px solid var(--hairline); transition:background .4s var(--ease)} .journal-list .entry:last-child{border-bottom:1px solid var(--hairline)} .entry:hover,.entry:focus-visible{background:var(--cream)} .entry .meta{font-family:var(--accent);font-size:9px;letter-spacing:.26em; text-transform:uppercase;color:var(--muted)} .entry h3{margin-top:14px;max-width:34ch} .entry p{margin-top:12px;font-size:14.5px;color:var(--muted);line-height:1.72;max-width:60ch} .entry .more{display:inline-block;margin-top:18px;font-family:var(--accent); font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--burgundy); border-bottom:1px solid rgba(110,20,35,.32);padding-bottom:2px} /* ---------- EXPRESSION IMAGERY ---------- */ .ex-img{margin-bottom:20px;overflow:hidden;aspect-ratio:4/3;background:var(--sand)} .ex-img img{width:100%;height:100%;object-fit:cover; transition:transform 1.1s var(--ease);transform:scale(1.001)} .expression:hover .ex-img img{transform:scale(1.045)} .expression{border-top:0;padding-top:0} .expression .idx{margin-top:2px} /* ---------- INSET FIGURE ---------- */ .inset{max-width:860px;margin:0 auto clamp(40px,5vw,64px);overflow:hidden; aspect-ratio:16/9} .inset img{width:100%;height:100%;object-fit:cover;object-position:50% 42%} /* ---------- FULL-WIDTH BAND ---------- */ .band{position:relative;padding:0;min-height:clamp(420px,62svh,620px); display:grid;place-items:center;overflow:hidden;background:var(--green)} .band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 38%} .band::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,18,17,.30) 0%,rgba(10,18,17,.62) 100%)} .band-copy{position:relative;z-index:2;text-align:center; padding:clamp(60px,9vw,110px) var(--gutter);max-width:780px} .band-copy .label{color:var(--sand);opacity:.82} .band-copy .lede{color:var(--snow);margin-inline:auto} /* the people band: hold the crop on the hands, and settle it into the palette */ .band > img{object-position:64% 26%;filter:saturate(.82) brightness(.96)} .band::after{background: linear-gradient(180deg,rgba(12,33,32,.42) 0%,rgba(12,33,32,.66) 55%,rgba(12,33,32,.80) 100%)} @media (max-width:860px){.band > img{object-position:58% 28%}} /* ---------- FULL-BLEED HERO ---------- */ .hero-bleed{display:block;position:relative;min-height:clamp(560px,94svh,920px); padding:0;background:var(--green);overflow:hidden} .hero-bleed::before{content:none} .hero-bleed .bleed-img,.hero-bleed .bleed-img img{position:absolute;inset:0;width:100%;height:100%} .hero-bleed .bleed-img img{object-fit:cover;object-position:72% 50%} .hero-bleed::after{content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(14,9,8,.80) 0%,rgba(14,9,8,.62) 38%,rgba(14,9,8,.14) 68%,transparent 100%)} .hero-bleed .hero-copy{position:relative;z-index:2;height:100%; display:flex;flex-direction:column;justify-content:center; min-height:clamp(560px,94svh,920px); padding-inline:var(--gutter);max-width:min(760px,62vw)} .hero-bleed .display{color:var(--snow)} .hero-bleed .descriptor{color:var(--sand);opacity:.92} .hero-bleed .hero-sub{color:var(--sand);opacity:.86} .hero-bleed .hero-credit{inset-block-end:14px;inset-inline-end:18px;z-index:3} @media (max-width:860px){ .hero-bleed::after{background:linear-gradient(180deg,rgba(14,9,8,.52) 0%,rgba(14,9,8,.74) 60%,rgba(14,9,8,.86) 100%)} .hero-bleed .bleed-img img{object-position:62% 50%} .hero-bleed .hero-copy{max-width:none;justify-content:flex-end;padding-block-end:clamp(54px,9vh,88px)} } nav.top.at-top:not(.on-light){color:var(--sand)} nav.top.at-top a{opacity:.92} /* ---------- FOUNDER PORTRAIT ---------- */ .portrait-sec{padding-block:clamp(40px,6vw,80px)} .portrait-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,4vw,64px);align-items:center} .portrait{margin:0} .portrait img{width:100%;height:auto;display:block;mix-blend-mode:multiply} @media (max-width:820px){ .portrait-grid{grid-template-columns:1fr;gap:clamp(18px,4vw,32px)} .portrait{order:2;max-width:420px;margin-inline:auto} .portrait-copy{order:1} } /* ---------- IMAGE PAIR ---------- */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px); margin-bottom:clamp(40px,5vw,64px)} .duo figure{margin:0;overflow:hidden;aspect-ratio:3/4;background:var(--sand)} .duo img{width:100%;height:100%;object-fit:cover} @media (max-width:620px){.duo{grid-template-columns:1fr}} /* ---------- MISSION MARK ---------- */ .mission-mark{width:clamp(96px,10vw,132px);height:auto;margin-bottom:26px;opacity:.9} /* ---------- PAIR SECTION ---------- */ .pair-sec{padding-block:clamp(10px,2vw,28px)} .duo{grid-template-columns:1fr 1fr;gap:clamp(14px,2.2vw,28px);margin-bottom:0} .duo figure{aspect-ratio:4/5} .duo .f-florence{object-position:62% 52%} .duo .f-stone{object-position:50% 34%} /* per-band focal points — the grazing default is wrong for everything else */ .band-rose > img{object-position:50% 46%;filter:none} .band-rose::after{background:linear-gradient(180deg,rgba(10,10,10,.34) 0%,rgba(10,10,10,.60) 100%)} .band-rose .band-copy{text-align:left;margin-inline-start:0;align-self:end; padding-block-end:clamp(42px,6vw,72px);max-width:34ch} .band-rose .band-copy .lede{margin-inline:0} .band-rose{place-items:start} /* ---------- PLATE: a photograph that carries no type ---------- */ .plate-sec{padding-block:clamp(12px,2vw,30px)} .plate{margin:0;overflow:hidden;aspect-ratio:3/2;background:var(--sand);max-width:1000px;margin-inline:auto} .plate img{width:100%;height:100%;object-fit:cover;object-position:50% 50%} /* ---------- SMALL-CAPS LEGIBILITY ON PHONES ---------- Cinzel labels read at 8.5–10px on desktop. On a handset that is below the readable floor, so lift them and open the tracking. */ @media (max-width:720px){ .label,.secnum{font-size:11px;letter-spacing:.22em} nav.top{font-size:11px;letter-spacing:.2em} .entry .meta,footer .col-h{font-size:11px;letter-spacing:.2em} .expression .idx{font-size:11px} .cap-cover .kicker{font-size:11px;letter-spacing:.24em} .cap-cover .meta{font-size:11px;letter-spacing:.18em;gap:14px} .cap-contact .h{font-size:11px;letter-spacing:.2em} .hero-credit{font-size:9px} .fine{font-size:14px} footer li,.cap-contact a,.cap-contact span{font-size:15px} .legal{font-size:13px} } /* the document nav keeps its one link on a phone */ @media (max-width:780px){ .cap-cover ~ * nav.top .nav-links,nav.top .nav-links{display:none} } @media (max-width:780px){ body:has(.cap-cover) nav.top .nav-links{display:flex;gap:14px} body:has(.cap-cover) nav.top .nav-links a:first-child{display:none} } /* ---------- FORMS ---------- */ .eoi{margin-top:clamp(34px,4.5vw,52px);max-width:720px} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .f-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px)} @media (max-width:620px){.f-grid{grid-template-columns:1fr}} .f{display:block;margin-bottom:clamp(16px,2.4vw,26px)} .f > span{display:block;font-family:var(--accent);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--muted);margin-bottom:9px} .f > span em{font-style:normal;text-transform:none;letter-spacing:.04em;opacity:.65} .f input,.f select,.f textarea{ width:100%;font-family:var(--sans);font-size:16px;font-weight:300;color:var(--ink); background:var(--snow);border:1px solid var(--hairline);border-radius:0; padding:14px 15px;transition:border-color .3s var(--ease),background .3s var(--ease)} .f textarea{resize:vertical;line-height:1.6} .f input:focus,.f select:focus,.f textarea:focus{ outline:none;border-color:var(--green);background:var(--snow)} .f-set{border:0;margin:clamp(6px,1.4vw,14px) 0 clamp(18px,2.6vw,28px)} .f-set legend{font-family:var(--accent);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--muted);margin-bottom:14px;padding:0} .f-checks{display:grid;grid-template-columns:1fr 1fr;gap:11px 22px} @media (max-width:620px){.f-checks{grid-template-columns:1fr}} .f-checks label{display:flex;align-items:flex-start;gap:11px;font-size:15px; color:var(--muted);line-height:1.5;cursor:pointer} .f-checks input{width:17px;height:17px;margin-top:2px;accent-color:var(--green);flex:none} .eoi .cta{cursor:pointer;background:transparent;font-family:var(--accent)} /* ---------- CAPABILITY: grouped specifics ---------- */ .cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,56px)} @media (max-width:760px){.cgrid{grid-template-columns:1fr}} .cgroup{border-top:1px solid var(--hairline);padding-top:22px} .cgroup h3{margin-bottom:16px} .cgroup ul{list-style:none} .cgroup li{font-size:14.5px;line-height:1.6;color:var(--muted); padding:7px 0 7px 17px;position:relative} .cgroup li::before{content:'';position:absolute;left:0;top:15px; width:5px;height:1px;background:var(--burgundy);opacity:.6} @media print{.cgrid{grid-template-columns:1fr 1fr}.cgroup{break-inside:avoid}} .cap-lead img{object-position:50% 62%} /* ---------- MOBILE NAVIGATION ---------- */ .nav-toggle{display:none;position:relative;z-index:70;width:34px;height:26px; background:none;border:0;padding:0;cursor:pointer} .nav-toggle span{display:block;height:1px;width:100%;background:currentColor; transition:transform .32s var(--ease),opacity .22s var(--ease)} .nav-toggle span:first-child{margin-bottom:8px} .nav-open .nav-toggle span:first-child{transform:translateY(4.5px) rotate(45deg)} .nav-open .nav-toggle span:last-child{transform:translateY(-4.5px) rotate(-45deg)} .nav-panel{position:fixed;inset:0;z-index:65;background:var(--black); display:flex;flex-direction:column;justify-content:center;gap:6px; padding:clamp(80px,14vh,120px) var(--gutter) clamp(36px,6vh,56px); opacity:0;transition:opacity .3s var(--ease)} .nav-open .nav-panel{opacity:1} .nav-panel nav{display:flex;flex-direction:column} .nav-panel nav a{font-family:var(--serif);font-size:clamp(26px,7.4vw,38px); font-weight:300;color:var(--snow);text-decoration:none;padding:11px 0; border-bottom:1px solid var(--hairline-light)} .nav-panel nav a:last-child{border-bottom:0;color:var(--sand); font-family:var(--accent);font-size:12px;letter-spacing:.22em; text-transform:uppercase;margin-top:22px} .nav-panel .np-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:9px} .nav-panel .np-foot a{color:var(--sand);opacity:.78;font-size:15px;text-decoration:none} .nav-open body,.nav-open{overflow:hidden} @media (max-width:780px){ .nav-toggle{display:block} nav.top.at-top.on-light{color:var(--green)} .nav-open nav.top{color:var(--sand)!important;background:transparent!important;backdrop-filter:none} .nav-open nav.top .nav-logo{opacity:0} } @media (min-width:781px){.nav-panel{display:none}} @media print{.nav-toggle,.nav-panel{display:none!important}} /* [hidden] loses to .nav-panel{display:flex} — without this the panel sits invisible over the whole page and swallows every tap. */ .nav-panel[hidden]{display:none!important} /* the bar lives at z-index 60, so when the panel (65) opens it buries the close button. Lift the whole bar above the panel while open. */ .nav-open nav.top{z-index:70} /* a