/* layout.css: the one set of layout rules for every openthings.live page.
   every page loads this after its own <style>, so these win. a page must not set its own
   content width, section spacing, or h1 / h2 sizes. change them here, once, for the whole site.
   see AGENTS.md, "layout rules". */

:root{
  --max:1120px;                          /* content width: nav, hero, every section */
  --pad:clamp(20px,5vw,48px);            /* side gutter */
  --section:clamp(64px,10vh,104px);      /* space above and below every section */
  --hero-top:clamp(72px,12vh,128px);
  --hero-bottom:clamp(48px,8vh,80px);
  --h1:clamp(40px,6vw,80px);             /* page title */
  --h1-split:clamp(40px,4.6vw,64px);     /* page title beside a visual (the teaser's first view) */
  --h2:clamp(28px,3.2vw,42px);           /* section heading */
  --h2-statement:clamp(32px,4.4vw,56px); /* closing call to action */
  --intro:clamp(17px,1.8vw,21px);        /* the paragraph under a page title */
}

/* one content width everywhere, including sections that used to widen or narrow it */
.wrap,.hero .wrap,.dark .wrap{max-width:var(--max)!important;margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}

/* one vertical rhythm */
header.hero{padding:var(--hero-top) 0 var(--hero-bottom)!important}
main > section{padding-top:var(--section)!important;padding-bottom:var(--section)!important}

/* one type scale */
h1{font-size:var(--h1)!important;line-height:1!important;letter-spacing:-.035em!important}
main h2:not(.h-small){font-size:var(--h2)!important;line-height:1.1!important;letter-spacing:-.03em!important}
main .ask h2,main .close h2,main .join-row h2{font-size:var(--h2-statement)!important;line-height:1.04!important}
.intro,.hero .why{font-size:var(--intro)!important;line-height:1.55;max-width:56ch}
.lead{max-width:62ch}
.section-head,.head{margin-bottom:clamp(24px,4vh,32px)}

/* one nav for every page: the teaser, the takes (a menu), what is next, message me.
   the takes menu opens and closes on click, and closes on escape or a click outside (assets/nav.js). */
.nav-links{display:flex;gap:24px;align-items:center;margin-left:auto}
.nav-group{position:relative}
.nav-group-btn{font:inherit;font-size:14px;color:var(--muted);background:none;border:0;padding:6px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-group-btn:hover,.nav-group-btn[aria-expanded="true"],.nav-group.here .nav-group-btn{color:var(--ink)}
.nav-group-btn .nav-caret{display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.nav-group-btn[aria-expanded="true"] .nav-caret{transform:translateY(1px) rotate(-135deg)}
.nav-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:300px;background:#fff;border:1px solid var(--hairline);border-radius:14px;box-shadow:0 24px 48px -24px rgba(16,16,19,.28);padding:8px;z-index:30}
.nav-menu[hidden]{display:none}
.nav-menu a,.nav-menu .nav-soon{display:block;padding:10px 12px;border-radius:10px;color:var(--ink)!important;font-size:14px}
.nav-menu a:hover{background:var(--brand-soft)}
.nav-menu a[aria-current="page"]{background:var(--brand-soft)}
.nav-menu a[aria-current="page"] span,.nav-menu a:hover span,.nav-menu a[aria-current="page"] small,.nav-menu a:hover small{color:#4f4f5a}
.nav-menu b{display:flex;align-items:baseline;font-weight:600;letter-spacing:-.01em}
.nav-menu b small,.nav-drawer b small{margin-left:auto;padding-left:10px;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.04em;color:var(--faint);white-space:nowrap}
.nav-drawer a.nav-sub b{display:flex;align-items:baseline}
.nav-menu b i{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--brand);margin-right:8px}
.nav-menu span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.nav-menu .nav-soon{color:var(--faint)!important}
.nav-menu .nav-soon b{color:#4f4f5a}
.nav-menu .nav-soon em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#3d6a88;border:1px solid var(--sky);border-radius:999px;padding:1px 7px;margin-left:6px}
.nav-menu a.all{border-top:1px solid var(--hairline);border-radius:0 0 10px 10px;margin-top:4px;color:var(--brand)!important;font-weight:500}
/* phone: every page switches to the menu button at the same width */
@media (max-width:820px){
  .nav-links a:not(.nav-cta),.nav-group{display:none!important}
  .menu-btn{display:inline-flex!important}
  .nav-inner{position:relative}
  .nav-drawer:not([hidden]){display:flex!important;flex-direction:column;padding:4px var(--pad) 14px;border-top:1px solid var(--hairline);background:#fff}
}
.nav-drawer a.nav-sub{padding-left:14px;font-size:15px}
.nav-drawer a.nav-sub b{font-weight:500}
.nav-drawer a.nav-sub b i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--brand);margin-right:8px}
.nav-drawer a.nav-sub span{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:1px}
.nav-drawer a.all{color:var(--brand)}
.nav-drawer .nav-soon{display:block;padding:14px 0 14px 14px;font-size:15px;color:var(--faint);border-bottom:1px solid var(--hairline)}
.nav-drawer .nav-soon b{font-weight:500;color:#4f4f5a}
.nav-drawer .nav-soon b i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:#3d6a88;margin-right:8px}
.nav-drawer .nav-soon em{font-style:normal;font-family:var(--mono);font-size:10px;color:#3d6a88;border:1px solid var(--sky);border-radius:999px;padding:1px 7px;margin-left:6px}
.nav-drawer .nav-soon span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}

/* "on this page": the in-page links a long page used to put in the nav */
.onpage{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px}
.onpage .mono{margin-right:4px}
.onpage a{font-size:13.5px;border:1px solid var(--hairline);border-radius:999px;padding:5px 12px;color:var(--ink);background:#fff;transition:border-color .15s}
.onpage a:hover{border-color:var(--brand);color:var(--brand)}

/* green surfaces: never flat. one family of forest gradients, four variations, so a card, a band and a
   tall column each get a light that suits its shape. small things (buttons, dots, lines, tags) stay flat. */
:root{
  --g-glow:radial-gradient(55% 45% at 0% 0%,rgba(201,216,74,.16),transparent 70%),radial-gradient(60% 60% at 100% 100%,rgba(0,0,0,.25),transparent 70%),#1D4A3A;          /* bands and big cards: citron glow top left */
  --g-sheen:radial-gradient(80% 70% at 50% -10%,rgba(201,216,74,.14),transparent 65%),linear-gradient(135deg,#245A49 0%,#1D4A3A 48%,#163A2E 100%);                           /* bars and wide cards: a diagonal sheen */
  --g-low:radial-gradient(70% 70% at 100% 100%,rgba(201,216,74,.18),transparent 70%),linear-gradient(160deg,#22553F 0%,#1D4A3A 55%,#173D30 100%);                           /* lists and panels: glow from the bottom right */
  --g-depth:radial-gradient(90% 40% at 50% 0%,rgba(201,216,74,.16),transparent 70%),linear-gradient(180deg,#235746 0%,#1D4A3A 45%,#153729 100%);                             /* tall columns and steps: light from the top */
  --g-deep:radial-gradient(50% 40% at 0% 0%,rgba(201,216,74,.13),transparent 70%),radial-gradient(60% 60% at 100% 100%,rgba(0,0,0,.28),transparent 70%),linear-gradient(170deg,#183F32 0%,#123026 55%,#0D241C 100%);  /* the one forest band per page: deeper, so it stands apart from green cards */
}
.mid,.era.cmp::before{background:var(--g-depth)!important}
.front,.v-ours,.aw-now,.tl-next,.join.hub,.now-tile.ours,.s2-ours,.layer.gap,.jt.ours{background:var(--g-low)!important}
.flow-agent,.bridge,.aw-bridge,.launch{background:var(--g-sheen)!important}
.gone-col.stays,.shape.missing,.fx-card.ours{background:var(--g-glow)!important}

/* the author at the top of every take (tools/nav.py author_html) */
.author-line{margin-top:28px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;max-width:620px;padding:14px 18px 14px 14px;border:1px solid var(--hairline);border-radius:18px;background:#fff}
.author-line img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--brand-soft)}
.author-line .a-name{display:block;font-size:14.5px;color:var(--ink)}
.author-line .a-name b{font-weight:600}
.author-line .a-name .text-link{margin-left:6px;font-size:13px;color:var(--brand);border-bottom:1px solid var(--brand-line);font-weight:500}
.author-line .a-bio{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
.author-line .a-meta{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:#4f4f5a}
.author-line .a-meta i{font-style:normal;margin:0 4px;color:var(--faint)}
.author-line .a-meta a{color:var(--brand);border-bottom:1px solid var(--brand-line)}
.author-line .a-meta .m{white-space:nowrap}
@media (max-width:640px){.author-line{align-items:start}}

/* "you are here": the nav item for the current page is plain text, darker, with a short forest line under it */
.nav-links .nav-here{position:relative;font-size:14px;color:var(--ink);font-weight:500;cursor:default}
.nav-links > .nav-here::after,.nav-group.here .nav-group-btn::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--brand)}
.nav-group.here .nav-group-btn{position:relative;color:var(--ink);font-weight:500}
.nav-menu .nav-here{display:block;padding:10px 12px;border-radius:10px;background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand);color:var(--ink);font-size:14px;cursor:default}
.nav-menu .nav-here b{display:flex;align-items:baseline;font-weight:600;letter-spacing:-.01em}
.nav-menu .nav-here small,.nav-menu .nav-here span{color:#4f4f5a}
.nav-menu .nav-here.all{border-top:1px solid var(--hairline);border-radius:0 0 10px 10px;margin-top:4px;color:var(--brand);font-weight:500}
@media (max-width:820px){.nav-links .nav-here{display:none!important}}
.nav-drawer > .nav-here{display:block;padding:14px 0;font-size:17px;font-weight:600;color:var(--brand);border-bottom:1px solid var(--hairline);cursor:default}
.nav-drawer > .nav-here::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--spark);margin-right:9px;vertical-align:2px}
.nav-drawer > .nav-sub.nav-here{padding-left:14px;font-size:15px}
.nav-drawer > .nav-sub.nav-here b{display:flex;align-items:baseline;font-weight:600;color:var(--brand)}
.nav-drawer > .nav-sub.nav-here b i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--brand);margin-right:8px}
.nav-drawer > .nav-sub.nav-here span{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:1px}
.nav-drawer > .nav-sub.nav-here::before{display:none}
.nav-drawer > .nav-sub.nav-here{box-shadow:inset 3px 0 0 var(--brand);padding-left:14px}

/* on laptops and desktops the author card sits to the right of every take's title, centred on it. the
   title stays on the left and the card is narrow enough that the title keeps its line breaks. the intro and
   everything after run full width below. below 1000px the card stays under the intro. */
@media (min-width:1000px){
  .hero .wrap:has(> .author-line){display:grid;grid-template-columns:minmax(0,1fr) 312px;column-gap:40px;align-items:start}
  .hero .wrap:has(> .author-line) > *{grid-column:1/-1}
  .hero .wrap:has(> .author-line) > .eyebrow{grid-column:1;grid-row:1}
  .hero .wrap:has(> .author-line) > h1{grid-column:1;grid-row:2}
  .hero .wrap:has(> .author-line) > .author-line{grid-column:2;grid-row:2;align-self:center;margin:0;max-width:none;grid-template-columns:52px minmax(0,1fr);align-items:start;gap:12px;padding:16px 18px 16px 16px;border-radius:18px}
  .hero .wrap:has(> .author-line) > .author-line img{width:52px;height:52px}
  .hero .wrap:has(> .author-line) > .author-line .a-meta{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--hairline)}
  .hero .wrap:has(> .author-line) > .author-line .a-meta i{display:none}
}

/* the "on this page" row is a <nav>, so it must not pick up the main nav's sticky bar, border and background */
nav.onpage{position:static!important;top:auto!important;z-index:auto!important;border:0!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* the author card's dates: spaced items, no separator dots, so nothing dangles when they wrap (every width) */
.author-line .a-meta{display:flex;flex-wrap:wrap;gap:3px 12px}
.author-line .a-meta i{display:none}

/* phones: a little less air between sections and under the page header */
@media (max-width:640px){
  :root{--section:56px;--hero-top:56px;--hero-bottom:40px}
  .onpage{margin-top:22px}
}

/* a page title that shares its row with a visual (the teaser's first view) */
.hero-split h1{font-size:var(--h1-split)!important}

/* no page ever scrolls sideways (phone safari can drift on a wide child). clip keeps the sticky nav working */
html,body{overflow-x:clip}