/* About, Magazine and Project Trackers pages. Uses the tokens defined in site.css. */
:root { --deep:#04315f; --mist-2:#e3f3f8; }

main a:focus-visible, main button:focus-visible, main input:focus-visible, main select:focus-visible, main textarea:focus-visible { outline:3px solid var(--aqua); outline-offset:2px; }
.site-header nav a.is-active { color:var(--blue); box-shadow:inset 0 -2px 0 var(--aqua); }
.button.ghost { background:#fff; color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.button.ghost:hover { background:var(--mist); color:var(--ink); }
.button.ghost-light { background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
.button.ghost-light:hover { background:rgba(255,255,255,.12); }

.pg-wrap { max-width:1220px; margin:0 auto; padding:64px 5%; }
.pg-wrap.tight { padding-top:34px; }
.pg-lede { max-width:62ch; color:var(--muted); font-size:1.06rem; }
.pg-btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* Hero */
.pg-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:56px; padding:72px max(5%,calc((100% - 1220px)/2 + 5%)); color:#fff; background:linear-gradient(125deg,var(--deep),#007db7); overflow:hidden; }
.pg-hero.simple { grid-template-columns:1fr; }
.pg-hero h1 { max-width:820px; margin:0; font:clamp(2.4rem,4.6vw,4.4rem)/1 var(--heading); letter-spacing:-.045em; }
.pg-hero .eyebrow { color:#d2f9ff; }
.pg-hero p:not(.eyebrow) { max-width:60ch; color:#d6f1f8; font-size:1.07rem; }
.pg-hero .pg-hero-cover { display:block; width:min(250px,60vw); }
.pg-hero .pg-hero-cover small { display:block; margin-top:12px; color:#d2f9ff; font-size:.8rem; }

/* Covers */
.pg-cover { position:relative; display:block; aspect-ratio:3/4; overflow:hidden; container-type:inline-size; background:#cfe6ee; box-shadow:0 14px 34px rgba(0,28,60,.22); }
.pg-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.pg-cover--gen { display:flex; flex-direction:column; justify-content:space-between; padding:9% 10%; color:#fff; }
.pg-cover--gen::after { content:''; position:absolute; right:-38%; bottom:-30%; width:92%; aspect-ratio:1; border:1px solid rgba(255,255,255,.3); border-radius:50%; box-shadow:0 0 0 7cqw rgba(255,255,255,.07),0 0 0 14cqw rgba(255,255,255,.05); }
.pg-cover--gen.tone-0 { background:linear-gradient(160deg,#04315f,#0065a9); }
.pg-cover--gen.tone-1 { background:linear-gradient(160deg,#053767,#009fcf); }
.pg-cover--gen.tone-2 { background:linear-gradient(160deg,#022856,#1d7fa9); }
.pg-cover--gen.tone-3 { background:linear-gradient(160deg,#0a4a7a,#27b9d8); }
.pg-cover-brand { font-size:5.4cqw; font-weight:bold; letter-spacing:.01em; opacity:.92; }
.pg-cover-month { position:relative; z-index:1; margin-top:auto; font:600 17cqw/.9 var(--heading); letter-spacing:-.05em; }
.pg-cover-year { position:relative; z-index:1; font:300 17cqw/1 var(--heading); letter-spacing:-.05em; opacity:.8; }
.pg-badge { position:absolute; z-index:2; top:10px; left:10px; padding:3px 8px; color:var(--ink); background:#fff; font-size:.68rem; font-weight:bold; letter-spacing:.04em; }

/* Archive */
.pg-years { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 8px; padding:0; list-style:none; }
.pg-years a { display:block; padding:7px 14px; color:var(--blue); background:var(--mist); font-size:.84rem; font-weight:bold; }
.pg-years a:hover { background:var(--mist-2); }
.pg-year { display:flex; align-items:baseline; gap:14px; margin:46px 0 22px; padding-top:18px; border-top:1px solid var(--line); scroll-margin-top:20px; }
.pg-year h2 { margin:0; font:2.4rem/1 var(--heading); }
.pg-year span { color:var(--muted); font-size:.85rem; }
.pg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:30px 22px; }
.pg-card { display:block; }
.pg-card strong { display:block; margin-top:13px; font:1.08rem/1.2 var(--heading); }
.pg-card:hover strong { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.pg-card small { display:block; margin-top:3px; color:var(--muted); font-size:.8rem; }

/* Reader */
.pg-crumbs { margin:0 0 14px; color:var(--muted); font-size:.82rem; }
.pg-crumbs a { color:var(--blue); font-weight:bold; }
.pg-reader h1 { margin:0; font:clamp(2rem,3.6vw,3.2rem)/1.02 var(--heading); letter-spacing:-.04em; }
.pg-reader .pg-lede { margin:14px 0 0; }
.pg-viewer { margin:30px 0 0; border:1px solid var(--line); background:#f2f6f8; }
.pg-viewer iframe { display:block; width:100%; height:clamp(520px,82vh,920px); border:0; }
.pg-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:20px 0 0; }
.pg-actions .copied { color:#197448; font-size:.85rem; font-weight:bold; }
.pg-pager { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px; }
.pg-pager a { display:block; padding:18px 20px; border:1px solid var(--line); }
.pg-pager a:hover { border-color:var(--blue); background:var(--mist); }
.pg-pager small { display:block; color:var(--muted); font-size:.78rem; }
.pg-pager strong { font:1.2rem/1.2 var(--heading); }
.pg-pager .next { text-align:right; grid-column:2; }
.pg-locked { display:grid; grid-template-columns:230px minmax(0,1fr); gap:44px; align-items:center; margin-top:30px; padding:36px; background:var(--mist); }
.pg-locked h2 { margin:0 0 8px; font:1.9rem/1.1 var(--heading); }
.pg-locked p { max-width:52ch; color:var(--muted); }

/* About */
.pg-split { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; }
.pg-split h2 { margin:0; font:clamp(2rem,3vw,3rem)/1.02 var(--heading); }
.pg-prose p { max-width:64ch; margin:0 0 1.1em; font-size:1.05rem; line-height:1.65; }
.pg-verticals { display:grid; grid-template-columns:repeat(3,1fr); gap:0 28px; margin:36px 0 0; }
.pg-verticals div { padding-top:14px; border-top:2px solid var(--ink); }
.pg-verticals dt { font:1.35rem var(--heading); }
.pg-verticals dd { margin:6px 0 0; color:var(--muted); font-size:.92rem; }
.pg-roles { display:grid; grid-template-columns:1fr 1fr; gap:0 44px; margin:26px 0 0; padding:0; list-style:none; }
.pg-roles li { padding:13px 0; border-top:1px solid var(--line); }
.pg-index { margin:34px 0 0; border-bottom:1px solid var(--line); }
.pg-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto; align-items:center; gap:34px; padding:26px 12px; border-top:1px solid var(--line); }
.pg-row:hover { background:var(--mist); }
.pg-row h3 { margin:0; font:1.85rem/1.05 var(--heading); letter-spacing:-.035em; }
.pg-row p { margin:0; color:var(--muted); max-width:56ch; }
.pg-row .read-arrow { white-space:nowrap; }
.pg-band { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:center; gap:50px; padding:64px max(5%,calc((100% - 1220px)/2 + 5%)); color:#fff; background:var(--ink); }
.pg-band h2 { margin:0; font:clamp(2rem,3vw,3rem)/1.02 var(--heading); }
.pg-band p:not(.eyebrow) { max-width:56ch; color:#bcd9e7; }
.pg-band .pg-btn-row { margin:0; justify-content:flex-end; }
.pg-contact { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; }
.pg-contact address { font-style:normal; line-height:1.8; }
.pg-contact a:not(.button) { color:var(--blue); font-weight:bold; }

/* Project trackers */
.pg-covers { display:grid; grid-template-columns:repeat(3,1fr); gap:30px 28px; margin:34px 0 0; }
.pg-covers div { padding-top:14px; border-top:2px solid var(--ink); }
.pg-covers dt { font:1.3rem var(--heading); }
.pg-covers dd { margin:6px 0 0; color:var(--muted); font-size:.93rem; }
.pg-empty { margin-top:26px; padding:30px; border:1px dashed #b5c9d3; color:var(--muted); }
.pg-form { max-width:820px; margin-top:26px; }
.pg-form .form-grid { padding:26px; background:var(--mist); }

@media (max-width:900px) {
  .pg-hero, .pg-split, .pg-contact, .pg-band { grid-template-columns:1fr; gap:34px; }
  .pg-hero .pg-hero-cover { width:200px; }
  .pg-band .pg-btn-row { justify-content:flex-start; }
  .pg-row { grid-template-columns:1fr; gap:8px; }
  .pg-covers { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .pg-hero { padding:48px 6%; }
  .pg-wrap { padding:44px 6%; }
  .pg-verticals, .pg-roles, .pg-covers { grid-template-columns:1fr; }
  .pg-locked { grid-template-columns:1fr; padding:24px; gap:24px; }
  .pg-locked .pg-cover { width:180px; }
  .pg-pager { grid-template-columns:1fr; }
  .pg-pager .next { grid-column:auto; text-align:left; }
  .pg-grid { grid-template-columns:repeat(2,1fr); gap:24px 14px; }
}

/* Events */
.ev-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:30px 26px; }
.ev-card { display:flex; flex-direction:column; border:1px solid var(--line); background:#fff; }
.ev-card:hover { border-color:var(--blue); }
.ev-image { aspect-ratio:16/9; display:grid; place-items:center; background:linear-gradient(135deg,var(--deep),#009fcf); color:#fff; font:600 1.6rem var(--heading); }
.ev-body { display:flex; flex-direction:column; gap:4px; padding:18px 20px 20px; flex:1; }
.ev-body h3 { margin:2px 0 6px; font:1.3rem/1.15 var(--heading); letter-spacing:-.02em; }
.ev-card:hover h3 { color:var(--blue); }
.ev-date { margin:0; color:var(--ink); font-weight:bold; }
.ev-place { margin:0; color:var(--muted); font-size:.9rem; }
.ev-body .read-arrow { margin-top:auto; padding-top:12px; }
.ev-past { border-bottom:1px solid var(--line); }
.ev-row { display:grid; grid-template-columns:170px minmax(0,1fr) minmax(0,.8fr); gap:20px; padding:14px 8px; border-top:1px solid var(--line); align-items:baseline; }
.ev-row:hover { background:var(--mist); }
.ev-when, .ev-where { color:var(--muted); font-size:.9rem; }
.ev-facts { display:flex; flex-wrap:wrap; gap:12px 44px; margin:22px 0 0; }
.ev-facts dt { color:var(--muted); font-size:.78rem; }
.ev-facts dd { margin:2px 0 0; font-weight:bold; }
.ev-hero { margin:30px 0 0; }
.ev-hero { background:linear-gradient(135deg,var(--deep),#009fcf); }
.ev-hero img { display:block;min-height:120px; width:100%; max-height:520px; object-fit:cover; }
.ev-detail { margin-top:30px; }
.ev-detail a { color:var(--blue); text-decoration:underline; }
@media (max-width:700px) { .ev-row { grid-template-columns:1fr; gap:2px; } }

/* Account and form pages: register, login, contact, company submission */
.pg-auth { max-width:820px; margin:0 auto; padding:60px 5% 84px; }
.pg-auth.narrow { max-width:540px; }
.pg-auth h1 { margin:0; font:clamp(2.2rem,4vw,3.3rem)/1.02 var(--heading); letter-spacing:-.04em; }
.pg-auth .pg-lede { margin:14px 0 0; }
.pg-auth .form-notice { margin-top:22px; }
.pg-auth .form-grid { margin-top:26px; padding:28px; background:var(--mist); }
.pg-auth.narrow .form-grid { grid-template-columns:1fr; }
.pg-address { margin:16px 0 0; font-style:normal; line-height:1.7; color:var(--muted); }
.pg-address a { color:var(--blue); font-weight:bold; }
.pg-alt { margin:20px 0 0; color:var(--muted); }
.pg-alt a { color:var(--blue); font-weight:bold; text-decoration:underline; text-underline-offset:3px; }
.form-grid .field-help { display:block; margin-top:5px; color:var(--muted); font-size:.78rem; font-weight:normal; }
.form-grid label.check { display:flex; align-items:flex-start; gap:10px; font-weight:normal; font-size:.92rem; }
.form-grid input[type="checkbox"] { width:auto; flex:none; margin:3px 0 0; }
.form-grid textarea { resize:vertical; }