/*
  Shared foundation: layout and components for every look. All visual values
  come from tokens.css; a look (assets/looks/<id>/look.css, loaded after this
  file) overrides tokens and may restyle the hooks listed in docs/looks.md.
  Decorative slots (.emblem, .art-slot) and the cleared photos (.hero__photo,
  .card__figure: card photo + caption) are hidden here; a look opts in by giving them a display value.
*/
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--color-text);background:var(--color-bg);font:var(--font-size-base)/var(--line-height-base) var(--font-body)}
a{color:var(--color-link);text-underline-offset:.2em;transition:color var(--motion-duration) var(--motion-ease)}
a:hover{color:var(--color-link-hover)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
main:focus{outline:none}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.emblem,.art-slot{display:none}
.hero__photo,.card__figure{display:none} /* cleared photos; a look opts in (card photos are lazy, so hidden ones never load) */
.card__figure{margin:0;flex:none;min-width:0} /* card photo and its caption: shown or hidden together */
.hero__photo{margin:0}
/* Photos never size themselves from their width/height attributes (2400x1000, 1200x800): those only reserve the aspect ratio.
   The hero photo is fluid with height:auto; a look whose photo box has a definite size (absolute inset) sets width/height:100% itself. */
.hero__photo img{display:block;width:100%;max-width:100%;height:auto;object-fit:cover}
.card__media{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;flex:none;min-height:0;align-self:stretch} /* a flex item of the column .card: never its 800px intrinsic height */
.stats-band{display:none} /* optional home stats row; a look opts in with display:block */
.photo-band,.page-header__art{display:none} /* the home photo band (CC BY: keep its credit visible whenever the photo shows) and section illustrations; a look opts in */
.card__credit{font-size:var(--font-size-xs);line-height:1.4;color:var(--color-text-muted);margin:0 0 var(--space-3);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden} /* one short line under the photo, never more than two */
.card__credit span{white-space:nowrap}
.photo-band{margin:0;background:var(--color-surface-soft)}
.photo-band img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:2400/444;min-height:150px;object-fit:cover}
.photo-band__credit{padding:var(--space-2) 0 var(--space-3);font-size:var(--font-size-xs);line-height:1.45;color:var(--color-text-muted)}
.photo-band__credit a{color:var(--color-link)}
.page-header__art{max-width:100%;height:auto}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--font-heading);line-height:1.15;letter-spacing:var(--letter-spacing-tight)}
h1{font-size:var(--font-size-h1);max-width:850px;margin-bottom:var(--space-5)}
h2{font-size:var(--font-size-h2)}
h3{font-size:var(--font-size-h3)}
p{max-width:var(--measure)}
img,video{max-width:100%;height:auto}
svg,canvas,iframe,embed,object{max-width:100%}
code{font-size:.9em}
.wrap{width:min(var(--content-width),calc(100% - 48px));margin:auto}
.small{font-size:var(--font-size-sm)}
.muted{color:var(--color-text-muted)}
.count{font-weight:400;color:var(--color-text-muted);font-size:.7em;letter-spacing:0}

/* banner, header, nav */
.prototype{background:var(--color-banner-bg);font-size:11px;letter-spacing:.07em;font-weight:750;padding:9px 0}
.prototype__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-5)}
.prototype__text{margin:0;max-width:none}
.prototype__text strong{font-weight:750}
.prototype span{font-weight:450;letter-spacing:0;margin-left:var(--space-4);font-size:var(--font-size-xs)}
.skip{position:absolute;left:12px;top:-100px;background:var(--color-surface);padding:12px;z-index:5}
.skip:focus{top:12px}
.header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:28px 0}
.brand{display:flex;gap:13px;align-items:center;text-decoration:none;font-size:var(--font-size-md);font-weight:var(--font-weight-bold);line-height:1.3;color:var(--color-brand)}
.brand-mark{background:var(--color-brand);color:var(--color-brand-contrast);padding:14px 10px;font-size:22px;letter-spacing:-.06em}
.header nav{display:flex;flex-wrap:wrap;gap:26px}
.header nav a{font-size:var(--font-size-sm);font-weight:650;color:var(--color-text);text-decoration:none}
.header nav a:hover,.header nav a[aria-current]{text-decoration:underline}

/* home */
.hero{background:var(--color-hero-bg);color:var(--color-hero-text);padding:76px 0 66px;border-bottom:7px solid var(--color-accent-soft)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:var(--font-size-xs);font-weight:750;margin-bottom:20px;color:var(--color-hero-eyebrow)}
.hero .lead{font-size:var(--font-size-lead);color:var(--color-hero-lead);max-width:650px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.button{display:inline-block;background:var(--color-button-bg);color:var(--color-button-text);padding:13px 22px;border-radius:var(--radius-sm);text-decoration:none;font-weight:var(--font-weight-bold);font-size:var(--font-size-md)}
.button:hover{background:var(--color-button-bg-hover)}
.button.secondary{background:transparent;color:var(--color-hero-text);border:1px solid var(--color-hero-outline)}
.section{padding:65px 0}
.section.soft{background:var(--color-surface-soft)}
.section-header{display:flex;gap:30px;justify-content:space-between;align-items:baseline;margin-bottom:27px}
.section-header h2{margin-bottom:0}
.section-header p{font-size:var(--font-size-md);max-width:38ch;margin:0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card{position:relative;background:var(--color-surface);border:1px solid var(--color-border);padding:27px 24px;border-top:var(--border-accent-width) solid var(--center-accent);display:flex;flex-direction:column}
.card__title{margin-bottom:var(--space-4)}
.card__link{color:inherit;text-decoration:none}
.card__link::after{content:"";position:absolute;inset:0}
.card:has(.card__link:focus-visible){outline:3px solid var(--color-focus);outline-offset:4px}
.card__link:focus-visible{outline:none}
.card .card__meta{font-size:var(--font-size-sm);color:var(--color-text-muted)}
.card .card__cta{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);margin-top:auto;color:var(--color-link);text-decoration:underline;text-underline-offset:.2em}
.card:hover .card__cta{color:var(--color-link-hover)}
.card p{font-size:var(--font-size-md);color:var(--color-text-subtle)}
.link-row{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);list-style:none;padding:0;margin:0}

/* content pages */
.page-header{padding-top:54px}
.page-header__inner{width:min(var(--prose-width),calc(100% - 48px));margin:auto}
.page-header h1{font-size:var(--font-size-h1-content)}
.page-header .lead-text{margin-bottom:0}
.content{max-width:var(--prose-width);padding-top:var(--space-5);padding-bottom:64px}
.content h2{margin-top:38px}
.content li{margin:6px 0}
.lead-text{font-size:19px;color:var(--color-text-subtle)}
.eyebrow-label{text-transform:uppercase;letter-spacing:.12em;font-size:var(--font-size-xs);font-weight:750;color:var(--center-accent);margin-bottom:var(--space-2)}
.prose{overflow-wrap:anywhere}
.prose table{border-collapse:collapse;width:100%;font-size:var(--font-size-md)}
.prose th,.prose td{border:1px solid var(--color-border);padding:var(--space-2);text-align:left;vertical-align:top}
.prose img{display:block;max-width:100%;height:auto;max-height:80vh;object-fit:contain;margin:var(--space-4) 0;border-radius:var(--radius-sm)} /* migrated images: fit the column, never taller than the screen */
.prose figure{margin-left:0;margin-right:0;max-width:100%}
.breadcrumb{font-size:var(--font-size-sm);margin-bottom:var(--space-5)}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.breadcrumb li{margin:0}
.breadcrumb li+li::before{content:"/";margin-right:var(--space-2);color:var(--color-text-muted)}
.callout{border-left:var(--border-accent-width) solid var(--color-accent);background:var(--color-surface-soft);padding:24px 28px;margin:30px 0}

/* migration note, item meta, placeholders */
.migration-note{border-left:var(--border-accent-width) solid var(--color-notice-border);background:var(--color-notice-bg);padding:var(--space-3) var(--space-4);margin:0 0 var(--space-5);font-size:var(--font-size-sm)}
.migration-note p{margin:0;max-width:none}
.item-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);font-size:var(--font-size-sm);margin:0 0 var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}
.item-meta dt{font-weight:var(--font-weight-bold);color:var(--color-text-muted)}
.item-meta dd{margin:0}
.request-route{border-left:4px solid var(--center-accent);background:var(--color-surface-soft);padding:var(--space-4) var(--space-5);margin:var(--space-5) 0;border-radius:var(--radius-md)}
.request-route__title{margin:0 0 var(--space-3);font-size:var(--font-size-md)}
.request-route p:last-child{margin-bottom:0}
.request-route__lines{margin:0 0 var(--space-3);padding-left:1.25em}
.request-route__lines li{margin-bottom:var(--space-1)}
.form-note{border-left:4px solid var(--center-accent);padding:var(--space-2) var(--space-4);margin:var(--space-4) 0}
.table-wrap{overflow-x:auto}
.files{margin-top:var(--space-6)}

/* lists */
.item-list,.file-list,.compact-list{list-style:none;padding:0;margin:0 0 var(--space-6)}
.item-list__item{padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);display:flex;flex-direction:column;gap:2px}
.item-list__title{font-weight:650}
.item-list__source{font-weight:400;color:var(--color-text-muted)}
.item-list__meta{display:flex;flex-wrap:wrap;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-muted)}
.item-list__summary{font-size:var(--font-size-md);color:var(--color-text-subtle)}
.tag{display:inline-block;font-size:var(--font-size-xs);padding:0 var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text)}
.tag--archive{color:var(--color-archive);border-color:var(--color-archive)}
.file-list li{padding:var(--space-1) 0;border-bottom:1px solid var(--color-border);overflow-wrap:anywhere}
.compact-list{columns:3 12em}
.filters{background:var(--color-surface-soft);padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);margin-bottom:var(--space-5)}
.filters p{margin:var(--space-1) 0;max-width:none}
.filters a[aria-current]{font-weight:var(--font-weight-bold)}
.venue{border-top:1px solid var(--color-border);padding-top:var(--space-4)}
.venue h2{font-size:var(--font-size-h3)}
.archive-link{margin-top:var(--space-5)}
.provenance{margin:calc(-1 * var(--space-4)) 0 var(--space-6)}
.filters-inline{font-size:var(--font-size-sm)}

/* footer */
.site-footer{background:var(--color-footer-bg);color:var(--color-footer-text);padding:42px 0 20px;font-size:var(--font-size-sm)}
.site-footer a{color:var(--color-footer-link)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.footer-heading{font-size:var(--font-size-sm);letter-spacing:0;margin:0 0 var(--space-3);color:var(--color-footer-text)}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-bottom{margin-top:25px;font-size:var(--font-size-xs);color:var(--color-footer-muted)}
.footer-bottom .wrap{border-top:1px solid var(--color-footer-rule);padding-top:20px}

@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.grid{grid-template-columns:repeat(2,1fr)}.header{align-items:flex-start;flex-direction:column}.grid.three{grid-template-columns:1fr}.hero{padding:52px 0}.section-header{display:block}.section-header p{margin-top:15px}}
@media(max-width:550px){.wrap,.page-header__inner{width:calc(100% - 32px)}.grid,.footer-grid{grid-template-columns:1fr}.prototype span{display:block;margin-left:0}.header nav{gap:15px}.hero .lead{font-size:18px}.section{padding:42px 0}.brand-mark{padding:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* Content components (2026-10-12, look-agnostic; looks may restyle). Video card: a static poster
   (self-hosted, /assets/video-posters/) linking out to YouTube; no iframe, no third-party request. */
.video-card{margin:var(--space-4) 0;max-width:30rem}
.video-card__link{display:flex;flex-direction:column;gap:var(--space-1);border:1px solid var(--color-border);background:var(--color-surface);padding:var(--space-2);border-radius:var(--radius-sm);text-decoration:none;color:var(--color-text)}
.video-card__link:hover .video-card__cta{color:var(--color-link-hover)}
.prose .video-card__poster{display:block;margin:0;width:100%;height:auto;max-height:none} /* posters are cropped to the video frame (no letterbox bars) at import */
.prose .video-card__poster--none,.video-card__poster--none{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:var(--color-surface-soft);color:var(--color-text-muted)}
.video-card__poster--none svg{width:3.5rem;height:3.5rem}
.video-card__title{font-weight:var(--font-weight-bold)}
.video-card__cta{font-size:var(--font-size-sm);color:var(--color-link);text-decoration:underline;text-underline-offset:.2em}
.video-card__link:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.key-figures{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);list-style:none;padding:0;margin:var(--space-4) 0}
.key-figures li{display:flex;flex-direction:column;min-width:9rem}
.key-figures strong{font-size:var(--font-size-h3);line-height:1.1}
.notice-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3)}
.vision-quote{margin:0 0 var(--space-4);padding:0;border:0;font-family:var(--font-heading);font-size:var(--font-size-h3);font-weight:700;line-height:1.2;color:var(--color-text)}
.vision-quote p{margin:0}
.notice-list li{border-left:var(--border-accent-width) solid var(--center-accent);padding-left:var(--space-3)}