/* Theme Name: Prakash Nair Theme URI: https://prakashnair.com Author: Prakash Nair + Claude Description: Personal-brand theme for Prakash Nair, AIA — School Architect, Author & Futurist. Sister theme to Education Design International (educationdesign.com): inherits EDI's design tokens (Fraunces + Inter, warm paper, ink, forest-green) but makes GREEN the dominant accent and reserves EDI-orange strictly as the "cross over to EDI" signal. Every page's primary content is dashboard-editable through Advanced Custom Fields, with the original wording shipped as field defaults so the live site renders identically until edited. Books, Articles, Speaking appearances and Publications are Custom Post Types, so new ones can be added — or existing ones replaced — entirely from the WordPress dashboard. The homepage hero carries a rotating headline word (Reinvent / Refresh / Reimagine), matching the EDI homepage treatment. Degrades gracefully if ACF is deactivated. v1.1.0: tightened the hero rotating-word spacing (removed the oversized reserved width); the Speaking video now accepts any YouTube/Vimeo link and embeds via the privacy-friendly nocookie host; the Get-in-Touch popup's "Schedule a Discovery Call" now opens a working consultation form (emailed via wp_mail), matching the EDI site; the footer "Contact" link opens that popup; and the Selected-publications links now point to each item's specific page on EDI where one exists. v1.1.1: footer "Part of the work at EDI" now points to the EDI Selected Work page; the "From Cells and Bells" publication (which has no EDI page) is removed; the Discovery Call form falls back to the visitor's email app when server mail is unavailable; and the rotating hero word now initializes independently and also cycles under reduced-motion. v1.1.2: the hero now keeps "Don't just rebuild schools." on its own line and the rotating word + "them." together on the next line, so the layout no longer shifts as the word cycles. v1.1.3: fixed the mobile menu (the Contact pill no longer overflows and hides the hamburger on narrow phones), and made the page seeder repair reused legacy pages (About/Contact) so they render with the theme's templates. Version: 1.1.4 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: pn */ /* ============================================================ prakashnair.com — personal-brand site Sibling to Education Design International (educationdesign.com) Inherits EDI's design tokens (Fraunces + Inter, warm paper, ink, forest-green) but makes GREEN the dominant accent and reserves EDI-ORANGE strictly as the "cross over to EDI" signal. ============================================================ */ :root{ --ink:#0E0E0C; --ink-soft:#2A2A28; --ink-mute:#6B6B66; --ink-faint:#A3A39E; --paper:#FAFAF7; --paper-warm:#F2F0E9; --line:#E6E4DC; --line-soft:#EFEDE5; --green:#5C7A3E; --green-ink:#2F4520; --green-wash:#EDF0E6; --edi:#EA6A2A; /* used ONLY for EDI hand-off actions */ --serif:'Fraunces','Times New Roman',Georgia,serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --maxw:1280px; --maxw-wide:1460px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%} body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden} ::selection{background:var(--green);color:#fff} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* ---------- shared utilities ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px} .wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 40px} .eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:15px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:24px} .eyebrow::before{content:"";width:38px;height:2px;background:var(--green);display:inline-block} .eyebrow.center{justify-content:center} h1,h2,h3,h4{font-family:var(--serif);font-weight:380;line-height:1.08;letter-spacing:-.01em} em,.emph{font-style:italic;color:var(--green)} .serif{font-family:var(--serif)} .lede{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);line-height:1.66;font-weight:380; font-family:var(--serif)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:999px; font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase; font-weight:600;transition:all .3s ease;cursor:pointer;border:1px solid var(--ink);background:none} .btn svg{width:15px;height:15px;transition:transform .3s ease} .btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)} .btn-dark:hover{background:var(--green-ink);border-color:var(--green-ink)} .btn-dark:hover svg{transform:translateX(3px)} .btn-ghost{background:none;color:var(--ink);border-color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:#fff} .btn-ghost:hover svg{transform:translateX(3px)} /* the one orange control family = "go to EDI" */ .btn-edi{background:var(--edi);color:#fff;border-color:var(--edi)} .btn-edi:hover{background:#d65d1f;border-color:#d65d1f} .btn-edi:hover svg{transform:translateX(3px)} .linkarrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px; letter-spacing:.02em;color:var(--green-ink);border-bottom:1px solid transparent;transition:.25s} .linkarrow svg{width:14px;height:14px;transition:transform .25s} .linkarrow:hover{border-bottom-color:var(--green)} .linkarrow:hover svg{transform:translateX(3px)} .linkarrow.edi{color:var(--edi)} .linkarrow.edi:hover{border-bottom-color:var(--edi)} /* ---------- nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center; justify-content:space-between;padding:18px 44px; background:rgba(250,250,247,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line);transition:padding .3s} .brand{display:flex;flex-direction:column;line-height:1;flex-shrink:0} .brand .name{font-family:var(--serif);font-size:24px;letter-spacing:.01em;color:var(--ink)} .brand .role{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--green-ink);margin-top:6px;font-weight:600} .nav-links{display:flex;align-items:center;justify-content:center;gap:36px;flex:1} .nav-links a.navlink{font-size:16px;font-weight:500;letter-spacing:.01em;color:var(--ink); position:relative;transition:color .25s} .nav-links a.navlink::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px; background:var(--green);transition:width .28s} .nav-links a.navlink:hover{color:var(--green-ink)} .nav-links a.navlink:hover::after,.nav-links a.navlink.active::after{width:100%} .nav-links a.navlink.active{color:var(--green-ink);font-weight:600} .nav-edi{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px; background:var(--edi);color:#fff;font-size:13px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;border:1px solid var(--edi);transition:.3s;flex-shrink:0} .nav-edi:hover{background:#d65d1f;border-color:#d65d1f} .nav-edi svg{width:14px;height:14px} .nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px} .nav-toggle span{width:26px;height:2px;background:var(--ink);transition:.3s} /* mobile drawer */ .drawer{position:fixed;inset:0 0 0 auto;width:min(82vw,360px);background:var(--paper);z-index:120; transform:translateX(100%);transition:transform .38s cubic-bezier(.4,0,.1,1); padding:90px 36px 40px;display:flex;flex-direction:column;gap:4px;box-shadow:-20px 0 60px rgba(0,0,0,.08)} .drawer.open{transform:translateX(0)} .drawer a{font-family:var(--serif);font-size:22px;padding:13px 0;border-bottom:1px solid var(--line-soft);color:var(--ink)} .drawer .drawer-edi{margin-top:18px;font-family:var(--sans);font-size:13px;letter-spacing:.08em; text-transform:uppercase;color:#fff;background:var(--edi);border:0;border-radius:999px; text-align:center;padding:15px;font-weight:600} .scrim{position:fixed;inset:0;background:rgba(14,14,12,.4);z-index:110;opacity:0;visibility:hidden;transition:.3s} .scrim.open{opacity:1;visibility:visible} .drawer-close{position:absolute;top:26px;right:30px;background:none;border:0;font-size:30px;color:var(--ink);cursor:pointer;line-height:1} /* ---------- hero ---------- */ .hero{padding:160px 0 90px} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center} .hero-h1{font-size:clamp(40px,6.2vw,78px);line-height:1.02;letter-spacing:-.02em;color:var(--ink)} .hero-dek{margin-top:30px;max-width:30em} .hero-cta{margin-top:38px;display:flex;align-items:center;gap:26px;flex-wrap:wrap} .hero-stats{margin-top:46px;display:flex;gap:40px;border-top:1px solid var(--line);padding-top:26px} .hero-stat .n{font-family:var(--serif);font-size:34px;color:var(--green-ink);line-height:1} .hero-stat .l{font-size:12px;letter-spacing:.04em;color:var(--ink-mute);margin-top:7px} .hero-portrait{position:relative} .hero-portrait .frame{position:relative;z-index:2;border-radius:4px;overflow:hidden; box-shadow:0 30px 70px rgba(47,69,32,.16)} .hero-portrait .frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.7} .hero-portrait::before{content:"";position:absolute;z-index:1;right:-20px;bottom:-20px; width:72%;height:72%;background:var(--green-wash);border:1px solid var(--green);border-radius:4px} .hero-portrait .cap{position:absolute;z-index:3;left:18px;bottom:18px;right:18px; background:rgba(14,14,12,.78);backdrop-filter:blur(6px);color:#fff;padding:13px 16px;border-radius:3px} .hero-portrait .cap .nm{font-family:var(--serif);font-size:16px} .hero-portrait .cap .rl{font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.78);margin-top:3px;line-height:1.4} /* ---------- generic section ---------- */ .section{padding:92px 0} .section.warm{background:var(--paper-warm)} .section-head{max-width:62ch} .section-head h2{font-size:clamp(28px,3.6vw,44px);color:var(--ink)} .section-head p{margin-top:18px} /* ---------- philosophy band ---------- */ .philo{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:54px; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .philo .cell{padding:38px 34px 38px 0;border-right:1px solid var(--line)} .philo .cell:last-child{border-right:0;padding-right:0} .philo .cell:nth-child(2){padding-left:34px} .philo .cell:nth-child(3){padding-left:34px} .philo .pn{font-family:var(--serif);font-size:13px;color:var(--green);letter-spacing:.04em} .philo .pt{font-family:var(--serif);font-size:25px;margin:10px 0 12px;color:var(--ink)} .philo .pb{font-size:14.5px;color:var(--ink-mute);line-height:1.7} /* ---------- writing / cards ---------- */ .cardgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:50px} .wcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:32px; display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s} .wcard:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(47,69,32,.1);border-color:var(--green)} .wcard .meta{display:flex;gap:12px;align-items:center;font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:16px} .wcard .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint)} .wcard .meta .src{color:var(--ink-faint)} .wcard h3{font-size:23px;color:var(--ink);line-height:1.15} .wcard p{margin-top:12px;font-size:14.5px;color:var(--ink-mute);line-height:1.65;flex:1} .wcard .foot{margin-top:22px} /* compact reference list (curated publications) */ .reflist{margin-top:14px;border-top:1px solid var(--line)} .refitem{display:flex;justify-content:space-between;gap:28px;padding:22px 0;border-bottom:1px solid var(--line); align-items:baseline} .refitem .rt{font-family:var(--serif);font-size:19px;color:var(--ink);line-height:1.25} .refitem .rm{margin-top:6px;font-size:13px;color:var(--ink-mute)} .refitem .ra{white-space:nowrap;flex-shrink:0} /* ---------- books shelf ---------- */ .shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:50px} .book{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden; display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s} .book:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(47,69,32,.1)} .book .spine{padding:30px 26px;color:#fff;min-height:188px;display:flex;flex-direction:column;justify-content:space-between} .book .spine .yr{font-size:12px;letter-spacing:.14em;opacity:.85;font-weight:600} .book .spine .bt{font-family:var(--serif);font-size:25px;line-height:1.12;margin-top:auto} .book .body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1} .book .by{font-size:12px;letter-spacing:.04em;color:var(--green);font-weight:600;text-transform:uppercase} .book .desc{margin-top:12px;font-size:14px;color:var(--ink-mute);line-height:1.65;flex:1} .book .actions{margin-top:22px;display:flex;flex-direction:column;gap:10px} /* ---------- EDI bridge (orange leads here, once) ---------- */ .bridge{background:var(--ink);color:#fff;border-radius:14px;padding:64px 60px; display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;position:relative;overflow:hidden} .bridge::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--edi)} .bridge .eyebrow{color:var(--edi)} .bridge .eyebrow::before{background:var(--edi)} .bridge h2{font-size:clamp(26px,3.4vw,40px);color:#fff;line-height:1.1} .bridge p{margin-top:20px;color:rgba(255,255,255,.76);font-size:15.5px;line-height:1.7;max-width:46ch} .bridge .bact{margin-top:30px;display:flex;gap:18px;flex-wrap:wrap;align-items:center} .bridge .side{text-align:center} .bridge .side img{height:78px;width:auto;margin:0 auto 18px;filter:brightness(0) invert(1);opacity:.92} .bridge .side .sl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)} .bridge .side .sn{font-family:var(--serif);font-size:27px;margin-top:8px;color:#fff} /* ---------- about page ---------- */ .about-hero{padding:150px 0 70px} .about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start} .about-portrait{position:relative} .about-portrait img{width:100%;border-radius:5px;box-shadow:0 24px 60px rgba(47,69,32,.15)} .about-portrait .tag{margin-top:18px;font-size:12.5px;color:var(--ink-mute);line-height:1.6} .about-portrait .tag strong{color:var(--ink);font-family:var(--serif);font-size:15px;font-weight:400} .prose{max-width:62ch} .prose p{margin-bottom:20px;font-size:16.5px;color:var(--ink-soft);line-height:1.78} .prose p.first::first-letter{font-family:var(--serif);float:left;font-size:62px;line-height:.78; padding:6px 14px 0 0;color:var(--green-ink)} .factbar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:8px 0 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .factbar .f{padding:30px 24px 30px 0;border-right:1px solid var(--line)} .factbar .f:last-child{border-right:0} .factbar .fn{font-family:var(--serif);font-size:30px;color:var(--green-ink);line-height:1} .factbar .fl{font-size:12.5px;color:var(--ink-mute);margin-top:8px;line-height:1.45} .creds{list-style:none;margin-top:18px} .creds li{padding:15px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;font-size:15px;color:var(--ink-soft)} .creds li::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--green);margin-top:8px} /* ---------- speaking ---------- */ .video-frame{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line); box-shadow:0 22px 50px rgba(47,69,32,.12);background:#000} .video-frame iframe{width:100%;aspect-ratio:16/9;display:block;border:0} .talklist{margin-top:46px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .talk{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px} .talk .te{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:600} .talk h3{font-size:21px;margin:12px 0 8px;color:var(--ink)} .talk p{font-size:14px;color:var(--ink-mute);line-height:1.65} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .cinfo .row{padding:24px 0;border-bottom:1px solid var(--line)} .cinfo .row .cl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:8px} .cinfo .row .cv{font-family:var(--serif);font-size:21px;color:var(--ink)} .cinfo .row .cv a:hover{color:var(--green-ink)} .cinfo .row .cs{font-size:13.5px;color:var(--ink-mute);margin-top:5px} .cpanel{background:var(--ink);color:#fff;border-radius:14px;padding:46px 42px;position:relative;overflow:hidden} .cpanel::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--edi)} .cpanel .eyebrow{color:var(--edi)}.cpanel .eyebrow::before{background:var(--edi)} .cpanel h3{font-size:28px;color:#fff;line-height:1.12} .cpanel p{margin-top:16px;color:rgba(255,255,255,.76);font-size:15px;line-height:1.7} .cpanel .btn-edi{margin-top:26px} /* ---------- footer ---------- */ .footer{background:var(--ink);color:rgba(255,255,255,.72);padding:72px 0 34px;margin-top:0} .footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.12)} .footer .flogo{font-family:var(--serif);font-size:24px;color:#fff} .footer .frole{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px} .footer .fdesc{margin-top:20px;font-size:14px;line-height:1.7;max-width:40ch} .footer .fcol-t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:600} .footer ul{list-style:none} .footer ul li{margin-bottom:11px} .footer ul li a{font-size:14px;color:rgba(255,255,255,.72);transition:color .25s} .footer ul li a:hover{color:var(--edi)} .footer .fedi{display:inline-flex;align-items:center;gap:10px;margin-top:6px;color:#fff;font-size:14px} .footer .fedi img{height:30px;filter:brightness(0) invert(1)} .footer .fedi:hover{color:var(--edi)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px; padding-top:26px;font-size:12.5px;color:rgba(255,255,255,.5);flex-wrap:wrap} .footer-bottom .social{display:flex;gap:16px} .footer-bottom .social a{color:rgba(255,255,255,.6);transition:color .25s} .footer-bottom .social a:hover{color:var(--edi)} .footer-bottom .social svg{width:18px;height:18px} /* ---------- reveal animation ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} *{transition:none!important;animation:none!important} } /* ---------- focus ---------- */ a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px} /* ---------- responsive ---------- */ @media(max-width:1024px){ .nav-links,.nav-edi,.nav-actions{display:none} .nav-toggle{display:flex} } @media(max-width:980px){ .hero-grid,.about-grid,.bridge,.contact-grid{grid-template-columns:1fr} .hero-portrait{max-width:440px;margin:8px auto 0} .about-portrait{max-width:380px} .philo,.factbar{grid-template-columns:1fr} .philo .cell,.factbar .f{border-right:0;border-bottom:1px solid var(--line);padding:30px 0!important} .philo .cell:last-child,.factbar .f:last-child{border-bottom:0} .shelf{grid-template-columns:repeat(2,1fr)} .bridge .side{order:-1;margin-bottom:8px} .footer-top{grid-template-columns:1fr 1fr} } @media(max-width:760px){ .nav-links{display:none} .nav-toggle{display:flex} .wrap{padding:0 22px} .cardgrid,.talklist,.shelf{grid-template-columns:1fr} .hero{padding:130px 0 70px} .section{padding:64px 0} .bridge{padding:44px 30px} .refitem{flex-direction:column;gap:14px} .footer-top{grid-template-columns:1fr} } /* ============================================================ HOMEPAGE v2 — full-bleed hero, pills, imagery, wider panels ============================================================ */ /* full-bleed dramatic hero */ .hero-full{position:relative;width:100%;min-height:92vh;display:flex;align-items:center; overflow:hidden;background:var(--ink)} .hero-full .bg{position:absolute;inset:0;background-size:cover;background-position:72% 30%} .hero-full .hero-scrim{position:absolute;inset:0; background:linear-gradient(98deg,rgba(12,12,10,.95) 0%,rgba(12,12,10,.86) 30%,rgba(12,12,10,.45) 60%,rgba(12,12,10,.06) 100%)} .hero-full .inner{position:relative;z-index:2;width:100%;max-width:var(--maxw-wide);margin:0 auto;padding:120px 44px 64px} .hero-full .eyebrow{color:#cdd9b6;font-size:16px} .hero-full .eyebrow::before{background:#cdd9b6} .hero-full h1{color:#fff;font-size:clamp(46px,7.2vw,98px);line-height:.98;letter-spacing:-.02em;max-width:15ch} .hero-full h1 em{color:#b9d18d;font-style:italic} .hero-full .dek{margin-top:30px;max-width:42ch;color:rgba(255,255,255,.9); font-family:var(--serif);font-weight:380;font-size:clamp(19px,1.7vw,24px);line-height:1.55} .hero-full .scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2; color:rgba(255,255,255,.6);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex; flex-direction:column;align-items:center;gap:8px} .hero-full .scroll-cue svg{width:18px;height:18px;animation:bob 1.8s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} /* pill band directly below hero */ .pillsband{background:var(--paper-warm);border-bottom:1px solid var(--line)} .pillsband .row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap; max-width:var(--maxw-wide);margin:0 auto;padding:26px 44px} .pill{display:inline-flex;align-items:center;gap:11px;padding:16px 34px;border-radius:999px; font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;transition:all .3s; border:1px solid var(--ink);background:#fff;color:var(--ink)} .pill svg{width:15px;height:15px;transition:transform .3s} .pill:hover{background:var(--ink);color:#fff} .pill:hover svg{transform:translateX(3px)} .pill.edi{background:var(--edi);color:#fff;border-color:var(--edi)} .pill.edi:hover{background:#d65d1f;border-color:#d65d1f} /* bigger section headings on the homepage */ .section-head h2{font-size:clamp(32px,4.2vw,52px)} .section-head p{font-size:clamp(18px,1.6vw,22px)} /* What I believe — text + image */ .belief-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center;margin-bottom:8px} .belief-img{position:relative} .belief-img img{width:100%;border-radius:12px;box-shadow:0 26px 60px rgba(47,69,32,.16);display:block} .belief-img .cap{margin-top:14px;font-size:13.5px;color:var(--ink-mute);line-height:1.5} .belief-text p{font-size:clamp(18px,1.5vw,21px);color:var(--ink-soft);line-height:1.7;font-family:var(--serif);font-weight:380} /* philosophy band — larger type */ .philo .pt{font-size:28px} .philo .pb{font-size:16px} .philo .pn{font-size:15px} /* Recent writing — article cards with image */ .artgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;margin-top:52px} .artcard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden; display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s} .artcard:hover{transform:translateY(-5px);box-shadow:0 26px 56px rgba(47,69,32,.12);border-color:var(--green)} .artcard .aimg{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--paper-warm)} .artcard .abody{padding:32px 34px 34px;display:flex;flex-direction:column;flex:1} .artcard .ameta{display:flex;gap:13px;align-items:center;font-size:12.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:16px} .artcard .ameta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint)} .artcard h3{font-size:clamp(24px,2.2vw,30px);color:var(--ink);line-height:1.12} .artcard h3 em{color:var(--green);font-style:italic} .artcard p{margin-top:14px;font-size:16px;color:var(--ink-mute);line-height:1.65;flex:1} .artcard .acta{margin-top:24px} .linkarrow.lg{font-size:15px} .linkarrow.lg svg{width:16px;height:16px} /* On the shelf — real book covers */ .shelf-cover{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:52px} .bookc{display:flex;flex-direction:column} .bookc .covwrap{aspect-ratio:3/3.9;display:flex;align-items:center;justify-content:center; background:var(--paper-warm);border:1px solid var(--line);border-radius:10px;padding:22px} .bookc .covwrap img{max-height:100%;max-width:100%;width:auto;border-radius:3px; box-shadow:0 16px 38px rgba(0,0,0,.22)} .bookc .cmeta{margin-top:24px} .bookc .cnum{font-size:13px;letter-spacing:.14em;color:var(--green);font-weight:700} .bookc h3{font-family:var(--serif);font-size:26px;color:var(--ink);line-height:1.12;margin:8px 0 6px} .bookc .cby{font-size:14px;color:var(--ink-mute);margin-bottom:16px} .bookc .explore{font-size:16px;font-weight:600} .bookc .explore svg{width:16px;height:16px} /* wider + larger EDI bridge */ .bridge.big{padding:74px 70px} .bridge.big h2{font-size:clamp(30px,3.8vw,46px)} .bridge.big p{font-size:clamp(16px,1.4vw,19px);max-width:52ch} .bridge.big .side .sn{font-size:30px} @media(max-width:980px){ .hero-full{min-height:auto;padding-top:64px} .hero-full .scrim{background:linear-gradient(180deg,rgba(12,12,10,.82),rgba(12,12,10,.7))} .hero-full .bg{background-position:70% 20%} .hero-full .inner{padding:140px 28px 80px} .belief-grid,.artgrid,.shelf-cover{grid-template-columns:1fr} .belief-img{max-width:560px} .shelf-cover{grid-template-columns:repeat(2,1fr);gap:26px} .bridge.big{padding:46px 30px} .scroll-cue{display:none} } @media(max-width:640px){ .shelf-cover{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto} .pillsband .row{gap:12px;padding:22px} .pill{padding:14px 24px;font-size:13px} } /* ============================================================ HOMEPAGE v3 — overlay nav, new wide hero, bigger type ============================================================ */ /* --- transparent white nav overlaid on the hero (homepage only) --- */ body.home .nav{ background:linear-gradient(to bottom, rgba(8,8,7,.62), rgba(8,8,7,0)); border-bottom-color:transparent; -webkit-backdrop-filter:none;backdrop-filter:none; padding:22px 48px; } body.home .nav::after{content:none} body.home .nav .brand .name{color:#fff;font-size:27px} body.home .nav .brand .role{color:rgba(255,255,255,.86);font-size:12px;letter-spacing:.22em} body.home .nav .nav-links a.navlink{color:#fff;font-size:17px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.35)} body.home .nav .nav-links a.navlink::after{background:#fff} body.home .nav .nav-links a.navlink.active{color:#fff} body.home .nav .nav-links a.navlink.active::after{width:100%} body.home .nav .nav-toggle span{background:#fff} body.home .nav .nav-edi{font-size:14px;padding:13px 26px;box-shadow:0 6px 20px rgba(0,0,0,.25)} /* solid state once scrolled past the hero */ body.home .nav.scrolled{ background:rgba(250,250,247,.94); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom-color:var(--line);padding:16px 48px; } body.home .nav.scrolled .brand .name{color:var(--ink)} body.home .nav.scrolled .brand .role{color:var(--green-ink)} body.home .nav.scrolled .nav-links a.navlink{color:var(--ink);text-shadow:none} body.home .nav.scrolled .nav-links a.navlink::after{background:var(--green)} body.home .nav.scrolled .nav-links a.navlink.active{color:var(--green-ink)} body.home .nav.scrolled .nav-toggle span{background:var(--ink)} /* --- new wide hero: image with text overlaid left, mobile-safe --- */ .hero-full{min-height:90vh} .hero-full .bg{background-position:center 32%} .hero-full .hero-scrim{ background:linear-gradient(95deg,rgba(10,10,8,.92) 0%,rgba(10,10,8,.74) 34%,rgba(10,10,8,.30) 60%,rgba(10,10,8,0) 88%); } .hero-full .inner{padding:150px 48px 80px} .hero-full .eyebrow{font-size:17px} .hero-full h1{font-size:clamp(48px,7vw,104px)} .hero-full .dek{font-size:clamp(20px,1.8vw,26px);max-width:40ch;margin-top:32px} /* --- bigger type / wider rhythm across the homepage --- */ .section{padding:104px 0} .eyebrow{font-size:16px} .section-head h2{font-size:clamp(34px,4.6vw,58px)} .section-head p{font-size:clamp(19px,1.7vw,24px);max-width:62ch} .lede{font-size:clamp(19px,1.8vw,23px)} .belief-grid{gap:68px} .belief-text p{font-size:clamp(20px,1.7vw,24px);line-height:1.66} .belief-img .cap{font-size:15px} .philo .pt{font-size:31px} .philo .pb{font-size:17.5px} .philo .pn{font-size:16px} .artcard h3{font-size:clamp(26px,2.4vw,33px)} .artcard p{font-size:17.5px;line-height:1.62} .artcard .ameta{font-size:13.5px} .linkarrow.lg{font-size:16px} .bookc h3{font-size:29px} .bookc .cby{font-size:15px} .bookc .explore{font-size:17px} .bookc .cnum{font-size:14px} .bridge.big{padding:80px 76px} .bridge.big h2{font-size:clamp(32px,4vw,50px)} .bridge.big p{font-size:clamp(17px,1.5vw,21px);max-width:54ch} .bridge.big .side .sn{font-size:33px} .btn{font-size:13px;padding:17px 36px} @media(max-width:1024px){ body.home .nav .nav-links,body.home .nav .nav-edi{display:none} } @media(max-width:760px){ /* hero: shorter, image up top, text anchored to the bottom over a vertical scrim */ .hero-full{min-height:78vh;align-items:flex-end} .hero-full .bg{background-position:center 18%} .hero-full .hero-scrim{ background:linear-gradient(to top,rgba(10,10,8,.94) 0%,rgba(10,10,8,.7) 34%,rgba(10,10,8,.32) 60%,rgba(10,10,8,.15) 100%); } .hero-full .inner{padding:0 24px 48px} .hero-full h1{font-size:clamp(40px,11vw,60px)} .hero-full .dek{font-size:18px;max-width:100%} body.home .nav{padding:16px 22px} body.home .nav .brand .name{font-size:22px} } /* ============================================================ v4 — nav Contact pill, Get-in-Touch modal, black philosophy panel, larger link fonts ============================================================ */ /* nav right-side actions */ .nav-actions{display:flex;align-items:center;gap:14px;flex-shrink:0} .nav-contact{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:999px; background:#fff;color:var(--ink);border:1px solid var(--ink);font-family:var(--sans); font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.3s} .nav-contact:hover{background:var(--ink);color:#fff} body.home .nav .nav-contact{font-size:14px;padding:13px 28px;box-shadow:0 6px 20px rgba(0,0,0,.18)} body.home .nav.scrolled .nav-contact{box-shadow:none} /* On tablet/phone, collapse the right-side actions (Contact + Visit EDI) into the hamburger drawer. This rule is placed AFTER the base `.nav-actions{display:flex}` so it wins on source order — otherwise the Contact pill overflows on narrow phones (Galaxy Fold / S22) and shoves the hamburger off the screen edge. */ @media(max-width:1024px){ .nav-actions{display:none !important} .nav-toggle{display:flex} } /* larger EDI link fonts */ .linkarrow.lg{font-size:18px} .linkarrow.lg svg{width:18px;height:18px} .bookc .explore{font-size:18px;font-weight:700} .bookc .explore svg{width:18px;height:18px} /* ---- Purpose / Collaboration / Creativity: black panel, big numbers ---- */ .philo{background:var(--ink);border:0;border-radius:16px;margin-top:58px;overflow:hidden; display:grid;grid-template-columns:repeat(3,1fr)} .philo .cell{padding:48px 42px;border-right:1px solid rgba(255,255,255,.15);border-top:0;border-bottom:0} .philo .cell:last-child{border-right:0} .philo .cell:nth-child(2),.philo .cell:nth-child(3){padding-left:42px} .philo .pn{font-family:var(--serif);font-size:66px;line-height:1;color:#b9d18d;font-weight:300;margin-bottom:18px} .philo .pt{color:#fff;font-size:31px;margin:0 0 14px} .philo .pb{color:rgba(255,255,255,.74);font-size:17.5px;line-height:1.7} /* ---- Get in Touch modal (EDI-style) ---- */ .modal-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center; padding:24px;background:rgba(14,14,12,.64);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease} .modal-overlay.open{opacity:1;visibility:visible} .modal-card{background:var(--paper);border-radius:20px;max-width:580px;width:100%; padding:48px 48px 42px;position:relative;box-shadow:0 50px 120px rgba(0,0,0,.45); transform:translateY(16px) scale(.97);transition:transform .34s cubic-bezier(.2,.7,.2,1); max-height:92vh;overflow-y:auto} .modal-overlay.open .modal-card{transform:none} .modal-close{position:absolute;top:20px;right:22px;width:40px;height:40px;border-radius:50%; border:1px solid var(--line);background:#fff;font-size:23px;line-height:1;color:var(--ink-mute); cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s} .modal-close:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .modal-eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--edi);font-weight:700;margin-bottom:14px} .modal-title{font-family:var(--serif);font-size:35px;color:var(--ink);line-height:1.06;font-weight:400} .modal-sub{margin-top:11px;color:var(--ink-mute);font-size:16px} .modal-options{margin-top:28px;display:flex;flex-direction:column;gap:14px} .mopt{display:block;background:var(--paper-warm);border:1px solid var(--line);border-radius:13px; padding:20px 22px;transition:all .25s;text-align:left} .mopt:hover{background:#fff;border-color:var(--green);transform:translateX(3px);box-shadow:0 12px 28px rgba(47,69,32,.1)} .mopt-t{font-family:var(--sans);font-weight:700;font-size:17.5px;color:var(--ink);display:flex;align-items:center;gap:11px} .mopt-t svg{width:19px;height:19px;color:var(--green);flex-shrink:0} .mopt-d{margin-top:6px;font-size:15px;color:var(--ink-mute);line-height:1.55;padding-left:30px} .mopt-d strong{color:var(--ink);font-weight:600} /* The "Schedule a Discovery Call" choice is a