/* ============================================================ Berkshire Preservation Inc — shared stylesheet Aesthetic: "Almanac" — heritage editorial. Palette: espresso/brown ground · warm bone · brick-red punch · aged gold Type (Adobe Fonts / Creative Cloud): Freight Big Pro -> display serif (dramatic, high-contrast) Acumin Pro Condensed -> eyebrows, tags, marquee, labels (condensed caps) (falls back to Acumin Pro until the condensed is published in the kit) Forma DJR Deck -> body sans (clean, contemporary) Adobe kit goj0eon is already linked in each page's . Google fallbacks keep the design intact off-domain (e.g. in preview). ============================================================ */ :root{ /* GROUND */ --ink:#161311; /* darkest part of the tree (trunk) — page ground */ --brown:#221c17; /* deep bark panels */ --brown-2:#2f2820; /* lifted bark */ /* ACCENTS */ --brick:#a23a2c; /* primary — brick red (carries cream text; reads on cream) */ --brick-bright:#cf5e4f; /* bright brick — red TEXT/icons on the dark ground (AA) */ --brick-deep:#7e2c20; /* deep brick — button hover (keeps cream text >=4.5) */ --gold:#c2a14e; /* warm gold, secondary (leaf highlights) */ --gold-soft:#dcb877; /* PAPER */ --bone:#f1e8d4; /* warm ivory — primary text on dark */ --bone-muted:#ddd0b6; --paper:#f6efdd; /* almanac paper — light sections */ --paper-ink:#2a221c; /* text on paper */ --logo:url("img/bpi-mark.png"); --shadow:0 30px 80px -26px rgba(12,8,6,.7); --shadow-sm:0 14px 40px -18px rgba(12,8,6,.6); --font-display:"freight-big-pro","Playfair Display",Georgia,serif; --font-hard:"acumin-pro-condensed","acumin-pro","Oswald","Arial Narrow",sans-serif; --font-body:"forma-djr-deck","Hanken Grotesk",system-ui,-apple-system,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--font-body); background:var(--ink); color:var(--bone); line-height:1.55; letter-spacing:.015em; overflow-x:hidden; padding-top:128px; position:relative; } /* fine film-grain over the whole site */ body::before{ content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img{max-width:100%;display:block} a{color:inherit} /* ====== NAV ====== */ nav.topnav{ position:fixed;top:0;left:0;right:0;z-index:200; padding:14px 40px;display:flex;align-items:center;justify-content:space-between; background:rgba(27,22,19,.82);backdrop-filter:blur(18px); border-bottom:1px solid rgba(241,232,212,.08); } .brand{display:flex;align-items:center;gap:14px;cursor:pointer;text-decoration:none} .brand .glyph{ width:92px;height:92px;flex-shrink:0;background:var(--logo) center/contain no-repeat; } .brand .glyph b{display:none} .brand .bn{font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.15em;font-size:22px;font-weight:700;line-height:1;color:var(--bone)} .brand .bn small{display:block;font-size:13px;letter-spacing:.3em;color:var(--gold);margin-top:6px;font-weight:600} nav.topnav ul{list-style:none;display:flex;gap:34px;align-items:center;margin-left:auto;margin-right:28px} nav.topnav ul a{ text-decoration:none;font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.14em; font-size:15px;font-weight:600;color:var(--bone-muted);padding:6px 0;position:relative;transition:color .25s; } nav.topnav ul a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--brick-bright);transition:width .3s} nav.topnav ul a:hover,nav.topnav ul a.active{color:var(--bone)} nav.topnav ul a:hover::after,nav.topnav ul a.active::after{width:100%} .nav-cta{ font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.14em;font-size:14px;font-weight:700; background:var(--brick);color:var(--bone);padding:12px 22px;text-decoration:none; transition:background .25s,transform .25s; } .nav-cta:hover{background:var(--brick-deep);transform:translateY(-2px)} .nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px} .nav-toggle span{width:26px;height:2px;background:var(--bone);transition:.3s} /* ====== TYPE ====== */ .eyebrow{ font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.24em;font-size:16px;font-weight:600; color:var(--brick-bright);display:flex;align-items:center;gap:14px;margin-bottom:22px; } .eyebrow::before{content:'';width:44px;height:2px;background:currentColor} .eyebrow .sq{width:7px;height:7px;background:var(--gold);transform:rotate(45deg)} .eyebrow.center{justify-content:center} h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;line-height:1} h1{font-weight:300} h1 em,h2 em,h3 em{font-style:italic;color:var(--gold-soft)} section{padding:120px 40px;position:relative} .section-head{max-width:1280px;margin:0 auto 72px;display:grid;grid-template-columns:1fr 1.6fr;gap:60px;align-items:end;position:relative} .section-head .idx{ font-family:var(--font-display);font-style:italic;font-size:120px;line-height:.7;color:var(--brick-bright); opacity:.18;position:absolute;left:-6px;top:-78px;pointer-events:none; } .section-head h1,.section-head h2{font-size:clamp(38px,5vw,70px)} .section-head p{font-size:18px;color:rgba(241,232,212,.72);max-width:560px} /* buttons */ .btn-primary,.btn-ghost{ font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.14em;font-size:15px;font-weight:700; padding:16px 30px;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;transition:all .25s;border:none; } .btn-primary{background:var(--brick);color:var(--bone);box-shadow:var(--shadow-sm)} .btn-primary:hover{background:var(--brick-deep);transform:translateY(-3px)} .btn-ghost{background:transparent;color:var(--bone);border:1px solid rgba(241,232,212,.32)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)} .btn-primary .arr,.btn-ghost .arr{transition:transform .25s} .btn-primary:hover .arr,.btn-ghost:hover .arr{transform:translateX(5px)} /* ====== DUOTONE (signature image treatment) ====== */ .duo{position:relative;overflow:hidden} .duo .img{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.08) brightness(.92);transition:filter .6s,transform .7s} .duo .wash{position:absolute;inset:0;z-index:1;background:linear-gradient(150deg,var(--brick) 0%,var(--brown) 90%);mix-blend-mode:multiply;opacity:.66;transition:opacity .6s} .duo:hover .img{filter:grayscale(.05) contrast(1.06)} .duo:hover .wash{opacity:.12} /* ====== HERO ====== */ .hero{ min-height:calc(100vh - 96px);display:grid;grid-template-columns:1fr 1.05fr;overflow:hidden;padding:0; background: radial-gradient(ellipse at 78% 22%,rgba(162,58,44,.22),transparent 56%), radial-gradient(ellipse at 12% 88%,rgba(194,161,78,.14),transparent 55%), linear-gradient(135deg,var(--ink),var(--brown)); } .hero-content{padding:60px 56px 60px 80px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2} .hero h1{font-size:clamp(52px,6.8vw,100px);line-height:.92;color:var(--bone);margin-bottom:30px;text-shadow:0 2px 0 rgba(0,0,0,.18)} .hero .lede{font-size:19px;line-height:1.6;letter-spacing:.02em;color:rgba(241,232,212,.82);max-width:480px;margin-bottom:14px} .hero .place{font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.18em;font-size:15px;color:var(--gold);margin-bottom:40px;font-weight:600} .hero-ctas{display:flex;gap:16px;flex-wrap:wrap} .hero-visual{position:relative} .hero-visual::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(120deg,transparent 38%,rgba(27,22,19,.5) 100%)} /* Hero shows the photo in full colour & bright by default (gallery tiles keep the grayscale-to-colour hover) */ .hero-visual.duo .img{filter:grayscale(0) contrast(1.05) brightness(1.03)} .hero-visual.duo .wash{opacity:.14} .hero-visual.duo:hover .img{filter:grayscale(0) contrast(1.06) brightness(1.06);transform:scale(1.02)} .hero-visual.duo:hover .wash{opacity:.07} .hero-tag{ position:absolute;bottom:30px;right:30px;z-index:3;max-width:250px; background:rgba(27,22,19,.86);backdrop-filter:blur(10px);border-left:3px solid var(--brick-bright);padding:16px 20px; } .hero-tag .pill{font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--gold);margin-bottom:6px;font-weight:600} .hero-tag .nm{font-family:var(--font-display);font-size:21px;color:var(--bone);line-height:1.12} .hero-tag .rl{font-size:12px;color:rgba(241,232,212,.6);margin-top:5px} /* ====== MARQUEE ====== */ .marquee{background:var(--brick);color:var(--bone);padding:18px 0;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(0,0,0,.18);border-bottom:1px solid rgba(0,0,0,.18)} .marquee-track{display:inline-block;animation:marq 44s linear infinite;font-family:var(--font-hard);font-weight:700;font-size:23px;letter-spacing:.18em;text-transform:uppercase} .marquee-track span{margin:0 28px;display:inline-block} .marquee-track .dot{color:var(--gold-soft)} @keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* ====== LIGHT (almanac paper) ====== */ .light{background:var(--paper);color:var(--paper-ink)} .light::before{ content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.04'/%3E%3C/svg%3E"); } .light .eyebrow{color:var(--brick)} .light h2{color:var(--paper-ink)} .light h2 em{color:var(--brick)} .light .section-head .idx{color:var(--brick);opacity:.16} .thesis-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:start;position:relative} .thesis-body p{font-size:19px;line-height:1.7;letter-spacing:.022em;color:rgba(42,34,28,.86);margin-bottom:24px} .thesis-body p:first-of-type{font-family:var(--font-display);font-size:26px;line-height:1.35;letter-spacing:.005em;color:var(--brown);margin-bottom:30px} .thesis-aside{border-left:2px solid var(--brick);padding-left:32px} .thesis-aside .yr{font-family:var(--font-hard);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--brick);margin-bottom:10px;font-weight:600} .thesis-aside h3{font-size:24px;color:var(--paper-ink);margin-bottom:8px} .thesis-aside p{font-size:18px;line-height:1.62;letter-spacing:.012em;color:rgba(42,34,28,.86);margin-bottom:26px} /* Our latest project: dark editorial section, mirrors the .light thesis sections (alternating palette) */ .proj h2 em{color:var(--brick-bright)} .proj .thesis-body p{color:rgba(241,232,212,.84)} .proj .thesis-body p:first-of-type{color:var(--bone)} .proj .thesis-aside{border-left-color:var(--brick-bright)} .proj .thesis-aside .yr{color:var(--brick-bright)} .proj .thesis-aside h3{color:var(--bone)} .proj .thesis-aside p{color:rgba(241,232,212,.84)} /* ====== INTERACTIVE IMAGE PALETTE ====== */ .palette{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:rgba(241,232,212,.06);max-width:1280px;margin:0 auto} .tile{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--brown);transition:transform .4s} .tile.duo:hover{transform:translateY(-5px);z-index:5} .tile.wide{grid-column:span 2} .tile.tall{grid-row:span 2;aspect-ratio:auto} .tile .ov{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 42%,rgba(27,22,19,.95) 100%)} .tile .info{position:absolute;left:24px;right:24px;bottom:24px;z-index:3} .tile .info .tg{font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--gold-soft);margin-bottom:8px;font-weight:600} .tile .info h3{font-family:var(--font-display);font-weight:400;font-size:27px;color:var(--bone);line-height:1.05;margin-bottom:7px} .tile.tall .info h3{font-size:40px} .tile .info p{font-size:13px;color:rgba(241,232,212,.78)} .tile.solid{display:flex;flex-direction:column;justify-content:center;padding:34px;background:var(--brown)} .tile.solid.brick{background:var(--brick)} .tile.solid.brick .num{color:var(--bone)} .tile.solid.brick .lb{color:var(--bone)} .tile.solid .num{font-family:var(--font-display);font-size:68px;line-height:.86;margin-bottom:10px;color:var(--gold)} .tile.solid.brick .num{color:var(--bone)} .tile.solid .lb{font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.16em;font-size:13px;line-height:1.5;color:var(--bone-muted);font-weight:600} .tile.solid.brick .lb{color:rgba(241,232,212,.92)} /* ====== QUOTE BAND ====== */ .quote-band{background:var(--brown);text-align:center} .quote-band .wrap{max-width:920px;margin:0 auto;padding:0 24px} .quote-band .mark{font-family:var(--font-display);font-style:italic;font-size:90px;line-height:0;color:var(--brick-bright);opacity:.5;display:block;height:40px} .quote-band blockquote{font-family:var(--font-display);font-weight:300;font-size:clamp(30px,3.8vw,48px);line-height:1.25;color:var(--bone);text-wrap:balance;max-width:880px;margin:0 auto} .quote-band blockquote em{color:var(--gold-soft)} .quote-band cite{display:block;font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.18em;font-size:15px;color:var(--gold);font-style:normal;margin-top:32px;font-weight:600} /* ====== MISSION + GOALS ====== */ .mg{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start} .mg .block h2{font-size:clamp(34px,4vw,54px);margin-bottom:24px} .mg .block>p{font-size:19px;line-height:1.7;letter-spacing:.022em;color:rgba(241,232,212,.82)} .goals{list-style:none} .goals li{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid rgba(241,232,212,.1)} .goals li:last-child{border-bottom:none} .goals .gi{font-family:var(--font-display);font-style:italic;font-size:26px;color:var(--brick-bright);flex-shrink:0;width:42px} .goals .gt{font-size:19px;line-height:1.6;letter-spacing:.012em;color:var(--bone);font-weight:500} /* ====== SPLIT FEATURE ====== */ .split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;max-width:1280px;margin:0 auto;background:var(--brown)} .split .media{min-height:460px} .split .copy{padding:72px 60px;display:flex;flex-direction:column;justify-content:center} .split .copy h2{font-size:clamp(32px,3.8vw,52px);margin-bottom:24px} .split .copy .kicker{font-family:var(--font-display);font-style:italic;font-size:23px;line-height:1.2;color:var(--gold-soft);margin:-12px 0 26px} .split .copy p{font-size:19px;line-height:1.65;letter-spacing:.022em;color:rgba(241,232,212,.84);margin-bottom:20px} /* ====== VIDEO GALLERY ====== */ .film-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:30px} .film{position:relative;overflow:hidden;cursor:pointer;background:var(--brown);aspect-ratio:16/10;box-shadow:var(--shadow-sm)} .film .img{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.55) contrast(1.05) brightness(.82);transition:filter .55s,transform .7s} .film .wash{position:absolute;inset:0;z-index:1;background:linear-gradient(150deg,var(--brick),var(--brown));mix-blend-mode:multiply;opacity:.4;transition:opacity .55s} .film:hover .img{filter:grayscale(0) contrast(1.08) brightness(.92);transform:scale(1.04)} .film:hover .wash{opacity:.08} .film .scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 35%,rgba(27,22,19,.92) 100%)} .film .play{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3; width:76px;height:76px;border-radius:50%;border:2px solid rgba(241,232,212,.85); display:grid;place-items:center;background:rgba(27,22,19,.32);backdrop-filter:blur(2px);transition:.3s; } .film .play svg{margin-left:4px} .film:hover .play{background:var(--brick);border-color:var(--brick);transform:translate(-50%,-50%) scale(1.08)} .film .meta{position:absolute;left:28px;right:28px;bottom:26px;z-index:4} .film .meta .loc{font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--gold-soft);margin-bottom:9px;font-weight:600;display:flex;gap:14px;align-items:center} .film .meta .loc .rt{color:rgba(241,232,212,.62)} .film .meta h3{font-family:var(--font-display);font-weight:400;font-size:31px;color:var(--bone);line-height:1.04;margin-bottom:8px} .film .meta p{font-size:14px;color:rgba(241,232,212,.8);max-width:92%} /* ====== LIGHTBOX ====== */ .lightbox{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;background:rgba(12,8,6,.95);backdrop-filter:blur(8px);padding:40px} .lightbox.open{display:flex} .lightbox .stage{width:100%;max-width:1080px} .lightbox .frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:var(--shadow)} .lightbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .lightbox .cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px;gap:24px;flex-wrap:wrap} .lightbox .cap h3{font-family:var(--font-display);font-weight:400;font-size:27px;color:var(--bone)} .lightbox .cap p{font-size:14px;color:var(--gold);font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.16em;font-weight:600} .lb-close{position:absolute;top:24px;right:34px;z-index:6;background:none;border:none;cursor:pointer;color:var(--bone);font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.18em;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px} .lb-close span{font-size:26px;line-height:1} .lb-close:hover{color:var(--brick-bright)} /* ====== CONTACT ====== */ .contact-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start} .contact-intro h1,.contact-intro h2{font-size:clamp(36px,4.6vw,64px);margin-bottom:24px} .contact-intro p{font-size:18px;color:rgba(241,232,212,.8);margin-bottom:30px} .ways{list-style:none;margin-top:14px} .ways li{padding:20px 0;border-top:1px solid rgba(241,232,212,.12);display:flex;gap:18px} .ways .w-ic{font-family:var(--font-display);font-style:italic;font-size:25px;color:var(--brick-bright);width:36px;flex-shrink:0} .ways h4{font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.14em;font-size:15px;color:var(--bone);margin-bottom:6px;font-weight:600} .ways p{font-size:16px;line-height:1.55;color:rgba(241,232,212,.84);margin:0;font-weight:450} .form-card{background:var(--paper);color:var(--paper-ink);padding:48px;box-shadow:var(--shadow);position:relative} .form-card .fh{font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.2em;font-size:13px;color:var(--brick);margin-bottom:8px;font-weight:600} .form-card h3{font-size:32px;color:var(--paper-ink);margin-bottom:28px} .field{margin-bottom:20px} .field label{display:block;font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--brown);margin-bottom:7px;font-weight:600} .field input,.field textarea{width:100%;padding:14px 16px;border:1px solid rgba(42,34,28,.25);background:#fff;font-family:var(--font-body);font-size:15px;color:var(--paper-ink);transition:border .25s} .field input:focus,.field textarea:focus{outline:none;border-color:var(--brick)} .field textarea{resize:vertical;min-height:130px} .field.row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-card .submit{width:100%;background:var(--brick);color:var(--bone);border:none;cursor:pointer;padding:16px;font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.16em;font-size:15px;font-weight:700;transition:background .25s} .form-card .submit:hover{background:var(--brick-deep)} .form-note{font-size:12px;color:rgba(42,34,28,.55);margin-top:14px;text-align:center} /* ====== FOOTER ====== */ footer{background:var(--ink);border-top:1px solid rgba(241,232,212,.08);padding:64px 40px 36px} .partners-row{max-width:1280px;margin:0 auto 56px;display:flex;flex-wrap:wrap;gap:14px;align-items:center} .partners-row .label{font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--gold);margin-right:14px;font-weight:600} .chip{border:1px solid rgba(241,232,212,.2);padding:8px 16px;font-size:13px;color:var(--bone-muted)} .footer-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:48px;padding-bottom:40px;border-bottom:1px solid rgba(241,232,212,.08)} .footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:16px} .footer-brand .glyph{width:100px;height:100px;background:var(--logo) center/contain no-repeat} .footer-brand .glyph b{display:none} .footer-brand .bn{font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.14em;font-size:25px;color:var(--bone);font-weight:700} .f-est{font-family:var(--font-hard);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:600} .f-tag{font-size:14px;color:rgba(241,232,212,.7);max-width:380px} .f-tag em{color:var(--gold-soft);font-style:normal} .footer-col h4{font-family:var(--font-hard);text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--brick-bright);margin-bottom:18px;font-weight:600} .footer-col ul{list-style:none} .footer-col li{margin-bottom:11px} .footer-col a{text-decoration:none;font-size:14px;color:rgba(241,232,212,.72);transition:color .2s} .footer-col a:hover{color:var(--gold-soft)} .footer-bottom{max-width:1280px;margin:28px auto 0;display:flex;justify-content:space-between;font-size:13px;color:rgba(241,232,212,.5)} .footer-credit{max-width:1280px;margin:18px auto 0;font-size:12px;color:rgba(241,232,212,.4)} .footer-credit a{color:rgba(241,232,212,.6);text-decoration:none} .footer-credit a:hover{color:var(--gold-soft)} /* ====== RESPONSIVE ====== */ @media(max-width:1024px){ .hero{grid-template-columns:1fr} .hero-visual{min-height:420px;order:-1} .palette{grid-template-columns:repeat(2,1fr)} .tile.tall{grid-row:span 1;aspect-ratio:3/4} .split{grid-template-columns:1fr} .split .media{min-height:320px} } @media(max-width:768px){ body{padding-top:90px} nav.topnav{padding:12px 20px} .brand .glyph{width:58px;height:58px} .brand .bn{font-size:18px} .brand .bn small{font-size:11px} .footer-brand .glyph{width:84px;height:84px} nav.topnav ul{ position:fixed;top:82px;left:0;right:0;flex-direction:column;gap:0;background:rgba(27,22,19,.98); backdrop-filter:blur(20px);margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .35s ease;border-bottom:1px solid rgba(241,232,212,.1); } nav.topnav.menu-open ul{max-height:400px} nav.topnav ul li{width:100%;border-top:1px solid rgba(241,232,212,.07)} nav.topnav ul a{display:block;padding:18px 24px} .nav-cta{display:none} .nav-toggle{display:flex} nav.topnav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} nav.topnav.menu-open .nav-toggle span:nth-child(2){opacity:0} nav.topnav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} section{padding:80px 24px} .section-head .idx{font-size:80px;top:-52px} .hero-content{padding:50px 28px} .section-head,.thesis-grid,.mg,.contact-grid,.film-grid{grid-template-columns:1fr;gap:40px} .footer-grid{grid-template-columns:1fr 1fr;gap:32px} .form-card{padding:32px} .field.row{grid-template-columns:1fr} .lightbox{padding:20px} } /* ===== Founder's letter call-out ===== */ .letter-wrap{padding-top:8px;padding-bottom:80px} .letter{max-width:780px;margin:0 auto;background:var(--paper);color:var(--paper-ink); padding:clamp(36px,5vw,60px) clamp(28px,5vw,66px);box-shadow:var(--shadow); border-top:3px solid var(--brick);position:relative} .letter .eyebrow{color:var(--brick);justify-content:flex-start;margin-bottom:26px} .letter-title{font-family:var(--font-display);font-weight:600;font-size:clamp(48px,8vw,88px);line-height:.92;letter-spacing:-.015em;color:var(--paper-ink);margin:0 0 30px} .letter-title span{color:var(--brick)} .letter p{font-family:var(--font-display);font-size:20px;line-height:1.64;letter-spacing:.004em; color:#392f26;margin-bottom:20px} .letter .sig{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:26px;color:var(--brick); margin-top:34px;margin-bottom:0} .letter .sig small{display:block;font-family:var(--font-hard);font-style:normal;text-transform:uppercase; letter-spacing:.16em;font-size:12px;color:rgba(57,47,38,.72);margin-top:9px;font-weight:600} .letter.alt{background:var(--brown-2);color:var(--bone);border-top-color:var(--gold)} .letter.alt .eyebrow{color:var(--gold);margin-bottom:20px} .letter.alt .letter-title{color:var(--bone);font-size:clamp(36px,5.4vw,62px)} .letter.alt .letter-title span{color:var(--gold-soft)} .letter.alt p{color:rgba(241,232,212,.9)} @media(max-width:640px){ .letter p{font-size:18px} }