/* ══════════════════════════════════════════════════════════ TRIFORIUM — Editorial / image-led system (v4) Quiet-luxury direction. Near-colourless UI; imagery and space carry the page. Paper · Ink · Bronze (voice) · Slate (data). ══════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;1,8..60,300;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root{ --paper:#F6F1E9; /* primary background */ --paper-2:#EFE7D9; /* rare subtle alt */ --ink:#211C17; /* text + dark surfaces */ --ink-2:#2B2620; /* layered dark */ --ink-soft:#6B6256; /* secondary text */ --bronze:#9A612E; /* whisper accent: rules, marks */ --bronze-deep:#7E4A1E;/* text-safe small on light */ --bronze-light:#C49A6A;/* on dark */ --line:#D9CDB8; /* hairline */ --line-2:#C7B99F; /* stronger hairline */ --slate:#6E8089; /* structural / hover — non-text */ --slate-deep:#46555E; /* SECONDARY accent: numerals on light (~6.9:1) */ --slate-light:#9CB3BD;/* SECONDARY accent: figures on dark */ --slate-rgb:110,128,137; --serif:'Source Serif 4', Georgia, serif; --mono:'IBM Plex Mono', 'Courier New', monospace; --maxw:1340px; --gut:clamp(24px, 6vw, 104px); --sec:clamp(96px, 15vh, 200px); --paper-rgb:246,241,233; --ink-rgb:20,16,12; --ease:cubic-bezier(.2,.6,.2,1); --tri-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%20100%27%3E%3Crect%20x%3D%270%27%20y%3D%272%27%20width%3D%27120%27%20height%3D%2712%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%2786%27%20width%3D%27120%27%20height%3D%2712%27%2F%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M6%2C14%20H114%20V86%20H6%20Z%20M12%2C86%20V36%20A14%2C14%200%200%201%2040%2C36%20V86%20Z%20M46%2C86%20V36%20A14%2C14%200%200%201%2074%2C36%20V86%20Z%20M80%2C86%20V36%20A14%2C14%200%200%201%20108%2C36%20V86%20Z%27%2F%3E%3C%2Fsvg%3E"); } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--paper);color:var(--ink); font-family:var(--serif);font-weight:400;line-height:1.6; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} .ilink{border-bottom:1px solid transparent;transition:border-color .2s} .ilink:hover{border-bottom-color:var(--bronze)} ul{list-style:none} button{cursor:pointer;border:none;background:none;font:inherit;color:inherit} ::selection{background:var(--bronze-light);color:var(--ink)} /* ── TYPE ─────────────────────────────────────────────── */ .eyebrow{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.24em; text-transform:uppercase;color:var(--bronze-deep);font-weight:500; display:inline-block; } .eyebrow--light{color:var(--bronze-light)} .display{ font-family:var(--serif);font-weight:300; font-size:clamp(2.6rem, 5.6vw, 5rem);line-height:1.03;letter-spacing:-.025em; } h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.08} em,.it{font-style:italic;font-weight:300} h2{font-size:clamp(2rem, 3.8vw, 3.4rem);font-weight:400} h3{font-size:clamp(1.4rem, 2.2vw, 2rem);font-weight:400} p{font-family:var(--serif);font-weight:400;font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.62;color:var(--ink);max-width:62ch} .lead{font-weight:300;font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.5;color:var(--ink);max-width:54ch} .fine{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)} /* ── LAYOUT ───────────────────────────────────────────── */ .container{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)} .section{padding-top:var(--sec);padding-bottom:var(--sec)} .measure{max-width:760px} /* ── LINKS / BUTTONS ──────────────────────────────────── */ .link{ font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; display:inline-flex;align-items:center;gap:.6em;color:var(--ink);align-self:flex-start;width:fit-content; padding-bottom:.45em;border-bottom:1px solid var(--line-2); transition:gap .3s var(--ease),border-color .3s var(--ease); } .link:hover{gap:1em;border-bottom-color:var(--slate)} .link--light{color:var(--paper);border-bottom-color:rgba(var(--paper-rgb),.45)} .link--light:hover{border-bottom-color:var(--bronze-light)} .btn{ font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; display:inline-flex;align-items:center;gap:.6em;padding:1.05em 1.8em; border:1px solid currentColor;transition:background .3s var(--ease),color .3s var(--ease); } .btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)} .btn--solid:hover{background:transparent;color:var(--ink)} .btn--ghost-light{color:var(--paper)} .btn--ghost-light:hover{background:var(--paper);color:var(--ink)} /* ── NAV ──────────────────────────────────────────────── */ .nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .4s var(--ease),box-shadow .4s var(--ease)} .nav__in{max-width:var(--maxw);margin:0 auto;padding:clamp(24px,3vw,42px) var(--gut); display:flex;align-items:center;justify-content:flex-start;gap:0;transition:padding .4s var(--ease)} .nav__wm{font-family:var(--serif);font-weight:400;font-size:1.2rem;letter-spacing:.34em;text-transform:uppercase;transition:font-size .4s var(--ease)} .nav__brand{display:inline-flex;align-items:center;gap:.62rem;color:inherit;text-decoration:none} .nav__mark{width:30px;height:auto;fill:currentColor;flex-shrink:0;display:block;transition:width .4s var(--ease)} .nav__links{display:flex;gap:clamp(20px,2.4vw,40px);margin-left:clamp(34px,4vw,64px)} .nav__links a{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;opacity:.82; padding-bottom:3px;border-bottom:1px solid transparent;transition:opacity .25s,border-color .25s} .nav__links a:hover{opacity:1;border-bottom-color:var(--slate)} .nav__links a.active{opacity:1;border-bottom-color:var(--bronze)} .nav__cta{margin-left:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; border:1px solid currentColor;padding:.85em 1.5em;opacity:.95;transition:background .3s,color .3s} .nav__burger{display:none;margin-left:auto;flex-direction:column;gap:5px;width:26px} .nav__burger span{height:1.4px;background:currentColor;transition:transform .25s,opacity .25s} /* default (over light hero / scrolled): ink text */ .nav{color:var(--ink)} .nav.scrolled{background:rgba(var(--paper-rgb),.92);box-shadow:0 1px 0 var(--line-2);backdrop-filter:saturate(120%) blur(8px)} .nav.scrolled .nav__in{padding-top:clamp(11px,1.3vw,16px);padding-bottom:clamp(11px,1.3vw,16px)} .nav.scrolled .nav__mark{width:23px} .nav.scrolled .nav__wm{font-size:1.02rem} .nav__cta:hover{background:var(--ink);color:var(--paper)} /* over dark hero: light text until scrolled */ .nav--over-dark{color:var(--paper)} .nav--over-dark.scrolled{color:var(--ink)} .nav--over-dark .nav__cta:hover{background:var(--paper);color:var(--ink)} .nav--over-dark.scrolled .nav__cta:hover{background:var(--ink);color:var(--paper)} /* slate is a light-surface interaction tint only; keep the dark nav warm */ .nav--over-dark:not(.scrolled) .nav__links a:hover{border-bottom-color:var(--bronze-light)} /* ── HERO (full-bleed) ────────────────────────────────── */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--paper);padding-top:clamp(92px,12vh,124px)} .hero__media{position:absolute;inset:0} .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center} .hero--light .hero__scrim{position:absolute;inset:0; background:linear-gradient(90deg,rgba(var(--paper-rgb),.95) 0%,rgba(var(--paper-rgb),.88) 28%,rgba(var(--paper-rgb),.5) 56%,rgba(var(--paper-rgb),0) 80%)} .hero--dark .hero__scrim{position:absolute;inset:0; background:linear-gradient(80deg,rgba(var(--ink-rgb),.82) 0%,rgba(var(--ink-rgb),.55) 45%,rgba(var(--ink-rgb),.25) 100%)} .hero__in{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto; padding:0 var(--gut) clamp(96px,16vh,180px)} .hero__eyebrow{margin-bottom:clamp(22px,3vh,34px)} .hero h1{max-width:16ch} .hero--dark h1,.hero--dark .lead{color:var(--paper)} .hero--dark .lead{color:rgba(var(--paper-rgb),.86)} .hero__sub{margin-top:1.6rem} .hero__actions{margin-top:clamp(28px,4vh,44px);display:flex;gap:28px;align-items:center;flex-wrap:wrap} .hero__cue{position:absolute;left:var(--gut);bottom:36px;z-index:2;display:flex;align-items:center;gap:14px} .hero__cue .ln{width:48px;height:1px;background:var(--bronze);transform-origin:left;animation:cue 2.6s var(--ease) infinite} .hero--dark .hero__cue{color:rgba(var(--paper-rgb),.7)} @keyframes cue{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.4);opacity:.4}} /* ── STATEMENT (pure space) ───────────────────────────── */ .statement{padding-top:clamp(120px,20vh,240px);padding-bottom:clamp(120px,20vh,240px);text-align:center} .statement .mark{width:42px;height:1px;background:var(--bronze);margin:0 auto clamp(40px,6vh,64px)} .statement p{font-family:var(--serif);font-weight:300;color:var(--ink); font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.28;letter-spacing:-.018em;max-width:22ch;margin:0 auto} /* ── FEATURE (full-bleed image + overlaid caption) ────── */ .feature{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)} .feature__media{position:absolute;inset:0} .feature__media img{width:100%;height:100%;object-fit:cover} .feature__scrim{position:absolute;inset:0; background:linear-gradient(0deg,rgba(var(--ink-rgb),.78) 0%,rgba(var(--ink-rgb),.32) 48%,rgba(var(--ink-rgb),.12) 100%)} .feature__scrim--side{background:linear-gradient(75deg,rgba(var(--ink-rgb),.82) 0%,rgba(var(--ink-rgb),.45) 45%,rgba(var(--ink-rgb),.05) 90%)} .feature__in{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto; padding:0 var(--gut) clamp(72px,11vh,128px)} .feature h2{color:var(--paper);max-width:18ch} .feature p{color:rgba(var(--paper-rgb),.84);margin-top:1.3rem;max-width:44ch} .feature .link{margin-top:2rem} /* ── DUO (text + image) ───────────────────────────────── */ .duo{display:grid;grid-template-columns:1fr 1fr;align-items:stretch} .duo__text{padding:var(--sec) clamp(40px,5vw,88px);display:flex;flex-direction:column;justify-content:center} .duo__text .eyebrow{margin-bottom:1.4rem} .duo__text h2{margin-bottom:1.4rem} .duo__media{position:relative;min-height:62vh;overflow:hidden} .duo__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .duo__badge{position:absolute;top:28px;left:28px;z-index:2;color:var(--paper);opacity:.9} .duo--flip .duo__text{order:2} .duo--ink{background:var(--ink)} .duo--ink .duo__text h2{color:var(--paper)} .duo--ink .duo__text p{color:rgba(var(--paper-rgb),.74)} @media(min-width:881px){.duo--lower .duo__text{transform:translateY(42px)}} /* ── LEDGER (spacious numbered editorial) ─────────────── */ .ledger{display:grid;gap:0} .ledger__row{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,72px); padding:clamp(36px,5vh,64px) 0;border-top:1px solid var(--line)} .ledger__row:last-child{border-bottom:1px solid var(--line)} .ledger__num{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2vw,1.8rem);color:var(--slate-deep)} .ledger__row h3{margin-bottom:.8rem} .ledger__row p{max-width:56ch} /* ── PROFILE ──────────────────────────────────────────── */ .phero{min-height:100svh;display:grid;grid-template-columns:1.04fr .96fr;align-items:stretch;background:var(--paper)} .phero__text{display:flex;flex-direction:column;justify-content:center;padding:clamp(120px,16vh,190px) clamp(40px,5vw,96px) clamp(56px,9vh,90px) var(--gut)} .phero__back{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:auto;padding-top:8px} .phero__back a{border-bottom:1px solid transparent;transition:border-color .25s} .phero__back a:hover{border-bottom-color:var(--bronze)} .phero__role{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-deep)} .phero__name{font-family:var(--serif);font-weight:300;font-size:clamp(2.7rem,5.2vw,4.6rem);line-height:1.02;letter-spacing:-.025em;margin:.7rem 0 1.4rem} .phero__intro{font-weight:300;font-size:clamp(1.15rem,1.5vw,1.42rem);line-height:1.5;color:var(--ink);max-width:34ch} .phero__links{display:flex;gap:28px;align-items:center;margin-top:clamp(28px,4vh,44px);flex-wrap:wrap} .phero__media{position:relative;overflow:hidden;min-height:62vh} .phero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%} /* placeholder (to-be-filled) styling */ .ph{color:var(--bronze-deep);font-style:italic;background:rgba(154,97,46,.06); border:1px dashed rgba(154,97,46,.4);padding:.05em .45em;border-radius:3px} .ph-block{border:1px dashed rgba(154,97,46,.4);background:rgba(154,97,46,.05); padding:clamp(20px,3vw,32px);border-radius:4px;color:var(--ink-soft)} .ph-block .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-deep);display:block;margin-bottom:.7rem} /* chips */ .chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:.4rem} .chip{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink); border:1px solid var(--line-2);padding:.7em 1.1em;border-radius:99px} /* ── PAIRED BLOCKS ────────────────────────────────────── */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,88px)} .block h3{margin-bottom:.8rem;font-size:clamp(1.25rem,1.8vw,1.6rem)} .block .eyebrow{margin-bottom:1rem} /* ── INTRO / SECTION HEAD ─────────────────────────────── */ .head{max-width:780px;margin-bottom:clamp(48px,7vh,90px)} .head .eyebrow{margin-bottom:1.4rem} .head h2{margin-bottom:1.5rem} /* ── CLOSING CTA ──────────────────────────────────────── */ .closing{position:relative;min-height:54svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--ink)} .closing__media{position:absolute;inset:0;opacity:.5} .closing__media img{width:100%;height:100%;object-fit:cover} .closing__scrim{position:absolute;inset:0;background:rgba(var(--ink-rgb),.55)} .closing__in{position:relative;z-index:2;padding:0 var(--gut);max-width:760px} .closing h2{color:var(--paper);margin-bottom:1.6rem} .closing p{color:rgba(var(--paper-rgb),.82);margin:0 auto 2.4rem} .closing .eyebrow{margin-bottom:1.6rem} /* ── FOOTER ───────────────────────────────────────────── */ .footer{position:relative;background:var(--ink-2);color:rgba(var(--paper-rgb),.7);padding:clamp(76px,10vh,120px) 0 clamp(32px,4vh,48px);border-top:1px solid rgba(var(--paper-rgb),.10)} .footer::before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:50px;height:42px;background-color:var(--bronze-light);-webkit-mask:var(--tri-mask) no-repeat center/contain;mask:var(--tri-mask) no-repeat center/contain} .footer__top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap; padding-bottom:clamp(40px,5vh,64px);border-bottom:1px solid rgba(var(--paper-rgb),.12)} .footer__wm{font-family:var(--serif);font-size:1.3rem;letter-spacing:.3em;text-transform:uppercase;color:var(--paper)} .footer__cols{display:flex;gap:clamp(40px,6vw,96px);flex-wrap:wrap} .footer__col h4{font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--paper-rgb),.45);margin-bottom:1rem;font-weight:500} .footer__col a{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:rgba(var(--paper-rgb),.72);padding:.32em 0;transition:color .2s} .footer__col a:hover{color:var(--paper)} .footer__bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(28px,4vh,40px)} .footer__bottom p,.footer__bottom a{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:rgba(var(--paper-rgb),.4);max-width:none} /* ── REVEAL ───────────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.is-visible,.reveal.visible{opacity:1;transform:none} .d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero__cue .ln{animation:none}} /* hero load stagger */ .hero__in>*{opacity:0;transform:translateY(22px);animation:rise 1s var(--ease) forwards} .hero__in>*:nth-child(1){animation-delay:.15s} .hero__in>*:nth-child(2){animation-delay:.32s} .hero__in>*:nth-child(3){animation-delay:.46s} .hero__in>*:nth-child(4){animation-delay:.6s} @keyframes rise{to{opacity:1;transform:none}} /* ── RESPONSIVE ───────────────────────────────────────── */ /* mobile menu */ .mnav{position:fixed;inset:0;z-index:60;background:var(--ink);display:none;flex-direction:column; padding:clamp(18px,5vw,30px) var(--gut) clamp(30px,7vh,54px);opacity:0;transition:opacity .35s var(--ease)} .mnav.open{display:flex;opacity:1} .mnav__bar{display:flex;align-items:center;justify-content:space-between; padding-bottom:clamp(18px,3vh,26px);border-bottom:1px solid rgba(var(--paper-rgb),.14)} .mnav__brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--paper)} .mnav__mark{width:26px;height:auto;fill:currentColor;flex-shrink:0;display:block} .mnav__wm{font-family:var(--serif);font-weight:400;font-size:1.04rem;letter-spacing:.28em;text-transform:uppercase} .mnav__close{position:relative;width:38px;height:38px;margin-right:-7px;color:var(--paper);flex-shrink:0} .mnav__close span{position:absolute;top:50%;left:50%;width:23px;height:1.4px;background:currentColor} .mnav__close span:first-child{transform:translate(-50%,-50%) rotate(45deg)} .mnav__close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)} .mnav__nav{margin:auto 0;display:flex;flex-direction:column} .mnav__nav a{display:block;padding:clamp(16px,2.8vh,24px) 0;color:var(--paper); border-bottom:1px solid rgba(var(--paper-rgb),.14)} .mnav__nav a:first-child{border-top:1px solid rgba(var(--paper-rgb),.14)} .mnav__label{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,4.5vw,2rem);line-height:1; letter-spacing:-.01em;display:inline-block;padding-bottom:3px;border-bottom:1.5px solid transparent; transition:color .25s var(--ease),border-color .25s var(--ease)} .mnav__nav a:hover .mnav__label{color:var(--bronze-light)} .mnav__nav a.active .mnav__label{border-bottom-color:var(--bronze-light)} .mnav__foot{display:flex;flex-direction:column;gap:1.3rem;align-items:flex-start} .mnav__cta{align-self:stretch;justify-content:center} .mnav__email{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em; color:rgba(var(--paper-rgb),.6);transition:color .25s var(--ease)} .mnav__email:hover{color:var(--paper)} /* ══════════════════════════════════════════════════════════ v4 — additional components for site-wide conversion (stats, lists, figures, chart panel, form, definition) ══════════════════════════════════════════════════════════ */ /* stat row */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-top:1px solid var(--line)} .stat{padding:clamp(28px,4vh,44px) clamp(20px,2.4vw,40px);border-bottom:1px solid var(--line);border-right:1px solid var(--line)} .stat:last-child{border-right:0} .stat__label{font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-deep);display:block;margin-bottom:1rem} .stat__figure{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3.2vw,2.9rem);line-height:1;letter-spacing:-.02em} .stat__desc{font-size:.92rem;color:var(--ink-soft);margin-top:.7rem;max-width:28ch} /* three-column thesis points */ .cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,64px)} .col h4{font-family:var(--serif);font-weight:400;font-size:1.12rem;line-height:1.3;margin-bottom:1.1rem;letter-spacing:-.01em} /* tick/marker lists */ .tlist li{position:relative;padding-left:1.4em;margin-bottom:.85em;font-size:.98rem;line-height:1.55;color:var(--ink-soft);max-width:42ch} .tlist li::before{content:'—';position:absolute;left:0;color:var(--bronze)} .tlist li:last-child{margin-bottom:0} /* figure callouts (proof points) */ .figrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(28px,3vw,56px);margin-top:clamp(40px,6vh,72px)} .fig__num{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;letter-spacing:-.02em;color:var(--slate-deep)} .fig__label{font-size:.95rem;color:var(--ink);margin-top:.9rem;max-width:34ch;line-height:1.45} .fig__source{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:.7rem} /* chart panel */ .chart{border:1px solid var(--line-2);background:var(--ivory);padding:clamp(22px,3vw,34px);margin-top:clamp(28px,4vh,40px)} .chart__title{font-family:var(--serif);font-weight:400;font-size:1.05rem;margin-bottom:.3rem} .chart__source{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.2rem} .chart__canvas{position:relative;height:300px} /* definition / name block */ .define{text-align:center;max-width:760px;margin:0 auto} .define__pron{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;color:var(--bronze-deep);margin-bottom:1.6rem} /* form */ .form{display:grid;gap:clamp(20px,2.6vh,26px);max-width:620px} .field{display:flex;flex-direction:column;gap:.55rem} .field label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)} .field input,.field select,.field textarea{ font-family:var(--serif);font-size:1rem;color:var(--ink);background:var(--paper); border:1px solid var(--line-2);padding:.85em .95em;border-radius:2px;width:100%;transition:border-color .25s,box-shadow .25s} .field textarea{min-height:130px;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:#A99E8C} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bronze-deep);box-shadow:0 0 0 2px rgba(126,74,30,.2)} .form__privacy{font-size:.84rem;color:var(--ink-soft);max-width:52ch;margin-top:.4rem} .form__privacy a{border-bottom:1px solid var(--bronze-deep);color:var(--bronze-deep)} /* contact aside */ .aside-block{padding:clamp(22px,3vh,28px) 0;border-top:1px solid var(--line)} .aside-block:last-child{border-bottom:1px solid var(--line)} .aside-block .eyebrow{margin-bottom:.8rem} .aside-block p{font-size:.96rem} /* generic two-col content (text + aside) */ .split{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(40px,6vw,96px);align-items:start} /* ══════════════════════════════════════════════════════════ v4 — homepage refinements (richer layouts + new imagery) ══════════════════════════════════════════════════════════ */ :root{--ivory:#FBF8F1} /* remove the scroll cue site-wide */ .hero__cue{display:none} /* homepage hero: bottom-weighted scrim so the bridge stays visible */ .hero--bottom .hero__scrim{background:linear-gradient(0deg, rgba(var(--paper-rgb),.97) 0%,rgba(var(--paper-rgb),.85) 20%, rgba(var(--paper-rgb),.40) 44%,rgba(var(--paper-rgb),0) 66%)} /* impact + definition two-column */ .grid-2.top{align-items:start} .grid-2.top h2{margin-top:-0.14em} .pullquote{font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(1.18rem,1.5vw,1.45rem);line-height:1.45;color:var(--ink); max-width:none;margin-top:clamp(28px,4vh,44px)} /* subtitles and body share the same measure */ .head p,.duo__text p,.duo__text .lead-accent,.grid-2 p,.split p{max-width:none} /* dark definition card */ .def-card{background:var(--ink);padding:clamp(34px,3.4vw,54px);border-top:2px solid var(--bronze);box-shadow:0 26px 60px -34px rgba(33,28,23,.55)} .def-card__pron{font-family:var(--mono);font-style:italic;font-size:.82rem; letter-spacing:.04em;color:var(--bronze-light);margin-bottom:1.4rem} .def-card h3{font-family:var(--serif);font-weight:300;color:var(--paper); font-size:clamp(1.9rem,2.8vw,2.7rem);line-height:1.06;letter-spacing:-.02em;margin-bottom:1.5rem} .def-card p{color:rgba(var(--paper-rgb),.8);max-width:none;font-size:1.02rem;line-height:1.6} .def-card__rule{height:1px;background:rgba(var(--paper-rgb),.18);margin:clamp(24px,3vh,34px) 0} .def-card__note{font-family:var(--serif);font-style:italic;font-weight:300; color:rgba(var(--paper-rgb),.78);font-size:1.05rem;line-height:1.55;max-width:none} /* bronze accent lead sentence */ .lead-accent{border-left:2px solid var(--bronze);padding-left:clamp(20px,2vw,30px); font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,1.5vw,1.42rem); line-height:1.5;color:var(--ink);max-width:44ch;margin-bottom:clamp(28px,4vh,40px)} /* sector preview cards */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,1.8vw,28px)} .card{background:var(--ivory);border:1px solid var(--line);padding:clamp(28px,2.6vw,40px); box-shadow:0 1px 2px rgba(33,28,23,.03)} .card__label{font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase; color:var(--bronze-deep);display:block;margin-bottom:1.1rem} .card h4{font-family:var(--serif);font-weight:500;font-size:1.1rem;line-height:1.25; letter-spacing:-.01em;margin-bottom:.9rem} .card p{font-size:.95rem;color:var(--ink);line-height:1.55} /* ── THREE-ARCH MARK (recurring motif) ─────────────────── */ .tri-mark{display:inline-block;background-color:currentColor;-webkit-mask:var(--tri-mask) no-repeat center/contain;mask:var(--tri-mask) no-repeat center/contain} .brule{display:block;width:42px;height:35px;background:none;background-color:var(--bronze);-webkit-mask:var(--tri-mask) no-repeat center/contain;mask:var(--tri-mask) no-repeat center/contain} /* ══════════════════════════════════════════════════════════ RESPONSIVE / MOBILE OVERRIDES — single source of truth ---------------------------------------------------------- All width-based overrides from site.css are gathered here. PRIMARY breakpoint: 880px (stacking / nav). Two narrower breakpoints are kept deliberately (see notes) so the rendered result is identical to before at every width. NOTE: per-page mobile CSS still lives in each HTML