/* ATRI AOS v2 — Institutional Design Foundation
   Shared by Public, Admin, Member surfaces. See design/handoff/DESIGN_FOUNDATION.md.
   Public surface styles live in public.css; this file holds shared tokens + primitives. */

/* rc313 — the HTML `hidden` attribute must always hide, even for elements whose
   class sets a display (e.g. .pushprompt{display:grid}). Without this, a hidden
   overlay stays in the layout at opacity:0 and silently swallows taps over the
   content below it — which made the member bottom nav unclickable in the app. */
[hidden]{display:none !important;}

:root{
  /* Core palette */
  --black:#000000;
  --gold:#D4AF37;
  --gold-shadow:#B8962E;
  --gold-on-light:#7A6119;   /* gold as TEXT on light (4.6:1) — never use --gold for text on light */
  --white:#FFFFFF;
  --slate:#1A1A2E;
  --ink:#141A30;             /* dark ink for text/fills on light (console relies on this) */
  --grey:#5A5A5A;
  --rule:#E8E4DC;            /* hairline on light */
  --cream:#F9F6EE;
  /* Extended (dark-surface support) */
  --border-light:#E0DACC;
  --divider-black:#24211A;
  --border-black:#3A362C;
  --muted-on-black:#8C8779;
  --muted-on-black-2:#B8B3A6;
  --near-white:#FCFAF4;
  /* Semantic status (paired with text always) */
  --status-error:#B00020;
  --status-ok:#2E7D32;
  --status-info:#1A5FB4;
  --status-info-fill:#EEF4FF;
  /* Type */
  --ui:Arial,Helvetica,sans-serif;
  --serif:Georgia,'Times New Roman',Times,serif;
  /* Layout */
  --container:1320px;
  --pad:clamp(16px,4vw,40px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.7 var(--serif);color:var(--slate);background:var(--white)}
h1,h2,h3,h4,h5{font-family:var(--ui);margin:0;line-height:1.15}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}

/* Accessibility */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::selection{background:var(--gold);color:#000}
.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:#000;
  font:bold 13px var(--ui);padding:10px 16px;z-index:100}
.skip-link:focus{left:12px;top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Container + section rhythm */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(44px,6vw,80px) 0}
.section--minor{padding:clamp(32px,4vw,64px) 0}
.section--cream{background:var(--cream)}
.section--white{background:var(--white)}
.section--black{background:var(--black);color:var(--white)}
.section--slate{background:var(--slate);color:var(--white)}

/* Eyebrow (gold rule + uppercase label) */
.eyebrow{display:flex;align-items:center;gap:14px;font:bold 12px/1.4 var(--ui);
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold-on-light)}
.eyebrow::before{content:"";width:36px;height:2px;background:var(--gold);flex:none}
.on-dark .eyebrow,.section--black .eyebrow,.section--slate .eyebrow{color:var(--gold)}

/* Section header */
.sec-head{margin-bottom:clamp(28px,4vw,44px)}
.sec-title{font:bold clamp(28px,3.4vw,44px)/1.15 var(--ui)}
.sec-lead{font:clamp(17px,1.5vw,20px)/1.72 var(--serif);color:var(--grey);max-width:900px}
.section--black .sec-lead,.section--slate .sec-lead{color:var(--muted-on-black-2)}

/* Buttons */
.btn{display:inline-block;font:bold 14px var(--ui);letter-spacing:.04em;text-transform:uppercase;
  padding:15px 28px;border:1px solid transparent;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s}
.btn--gold{background:var(--gold);color:#000}
.btn--gold:hover{background:var(--gold-shadow)}
.btn--ghost-dark{background:transparent;color:#fff;border-color:#fff}
.btn--ghost-dark:hover{border-color:var(--gold);color:var(--gold)}
.btn--ghost-light{background:transparent;color:var(--slate);border-color:var(--slate)}

/* Link with arrow (gold-on-light) */
.link-arrow{font:bold 13px var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--gold-on-light);
  border-bottom:2px solid var(--gold);padding-bottom:4px;display:inline-block}
.section--black .link-arrow,.section--slate .link-arrow{color:var(--gold)}

/* Status chip */
.chip{display:inline-block;font:bold 11px var(--ui);letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--border-light);background:var(--cream);color:var(--slate)}
.chip--solid{background:var(--slate);color:#fff;border-color:var(--slate)}
.chip--gold{background:#FBF3DE;border-color:#F0E4C4;color:var(--gold-on-light)}
.chip--ok{background:#EAF6EC;border-color:#CDE7D2;color:var(--status-ok)}
.chip--info{background:var(--status-info-fill);border-color:#D3E1F5;color:var(--status-info)}

/* Card */
.card{background:var(--white);border:1px solid var(--border-light);padding:22px}
.card-title{font:bold clamp(18px,1.9vw,24px)/1.25 var(--ui)}
.card-body{font:15px/1.65 var(--serif);color:var(--grey);margin-top:10px}
.card-meta{font:12px var(--ui);color:var(--grey);margin-top:14px}

/* Photo slot (never a stock/invented photo) */
.photo-slot{border:1px dashed var(--border-black);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;color:var(--muted-on-black);padding:32px;min-height:200px}
.section--cream .photo-slot,.section--white .photo-slot{border-color:var(--border-light);color:var(--grey)}
.photo-slot svg{width:40px;height:40px;opacity:.6}

/* Hairline divider list */
.divlist>*{padding:20px 0;border-top:1px solid var(--rule)}
.section--black .divlist>*,.section--slate .divlist>*{border-top-color:var(--divider-black)}
.divlist>*:first-child{border-top:0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Self-hosted brand fonts (declared here so every surface — public, member,
   and the console — can use them; rc25). Files preloaded on public pages. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/static/fonts/inter.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/static/fonts/fraunces.woff2) format('woff2')}