/* The three faces the portal is set in, served from the chapter's own domain. A private members'
   portal should not have to ask Google for its own lettering — that is a third-party request, and
   a brother's address, on every page load. Licences are in fonts/OFL.txt.

   Latin subset only, and the `unicode-range` is what makes that safe: a character none of them
   carries — the Greek lambda of the chapter's own monogram, among others — falls through to the
   system stack rather than printing an empty box. Inter and JetBrains Mono are variable, so one
   file covers every weight the portal uses. `swap` keeps the lettering readable from first paint. */
@font-face{font-family:Franklin;font-style:normal;font-weight:100 900;font-display:swap;src:url(/welcome/fonts/libre-franklin-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:normal;font-weight:100 900;font-display:swap;src:url(/welcome/fonts/fraunces-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:italic;font-weight:100 900;font-display:swap;src:url(/welcome/fonts/fraunces-latin-italic-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/welcome/fonts/jetbrains-mono-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Iota Mu Lambda — Members’ Portal. Same palette as the public site: ink black, old gold, ivory. */
:root{
  /* Every translucent surface, hairline and shadow is mixed from these two. Swapping the pair
     is what turns the portal light, so the themes cannot drift apart rule by rule. */
  --tint:255,255,255; --shade:0,0,0;
  /* Composite surfaces the light theme restates rather than re-tints. */
  --page:#080706;
  --ambient:
    radial-gradient(60% 45% at 12% -8%, rgba(226,179,79,.16), transparent 70%),
    radial-gradient(45% 38% at 92% 4%, rgba(183,121,33,.13), transparent 72%),
    radial-gradient(70% 55% at 50% 108%, rgba(120,84,26,.11), transparent 70%),
    linear-gradient(180deg,#120e0a 0%,#0a0908 46%,#050504 100%);
  --pane:linear-gradient(165deg,rgba(30,24,18,.90),rgba(13,11,9,.94));
  --pane-edge:rgba(226,179,79,.34);
  --bar:rgba(12,10,8,.94);
  --rail:linear-gradient(180deg,rgba(22,18,13,.80),rgba(10,9,8,.86));
  --header:rgba(10,9,7,.62);
  --toast-bg:linear-gradient(160deg,rgba(32,26,19,.94),rgba(15,12,10,.96));
  --avatar-bg:linear-gradient(145deg,rgba(226,179,79,.22),rgba(20,16,11,.9));
  --scrim:rgba(0,0,0,.72);
  /* A photograph reads best against a dark mat in either theme, so these do not flip. */
  --mat:#0f0d0b; --on-mat:#fbf6ec; --on-mat-2:rgba(247,240,228,.84); --on-mat-gold:#efca75;
  --ink:#090807; --ink-2:#0d0b09; --ink-3:#12100e; --panel:#15120e; --panel-2:#1b1712;
  --gold:#e2b34f; --gold-deep:#b77921; --gold-light:#efca75; --gold-2:#d7b36a; --gold-dim:rgba(226,179,79,.16); --gold-line:rgba(226,179,79,.22);
  --ivory:#f5efe6; --cream:#f2ebdf; --text:#efe7da; --muted:#cfc5b7; --muted-2:#9b9084; --muted-3:#6f665b;
  --green:#4fb37a; --red:#d2574f; --amber:#e2a23f; --blue:#7fa7d9;
  /* The lettering of a status badge, and the gold fill a chip or primary button is poured from.
     A wash of colour reads differently on ink than on paper, so the lettering is a token rather
     than a fixed tint — that is what keeps both themes legible without changing a single rule. */
  --tone-green:#8fd7ad; --tone-red:#f0a9a4; --tone-amber:#f2c886; --tone-blue:#b9d0ee;
  --gold-fill:linear-gradient(135deg,var(--gold-deep),var(--gold-light)); --on-gold:#17100a;
  /* Gold does two jobs and they want different values. `--leaf` is gold as an *object* — a rule,
     a monogram, the disc behind an arrow — and never carries lettering, so it stays bright on
     paper as well as on ink. `--gold` is gold as *text*, which is why the paper theme darkens it
     and why only one of the two ever has to answer to a contrast check. */
  --leaf:#e2b34f; --leaf-hair:rgba(226,179,79,.26);
  /* The solid button. At night it is gold leaf; on cream that same leaf goes muddy, so on paper
     the pill is near-black — which is what the sign-in screen shows. The gold rides it as the
     arrow disc instead, in both themes. */
  --solid:linear-gradient(135deg,var(--gold-deep),var(--gold-light)); --on-solid:#17100a;
  --radius:22px; --radius-sm:14px; --shadow:0 18px 48px rgba(var(--shade),.38);
  /* Glass surfaces: a translucent pane, a lit top edge, and a blur that lets the gold ambience
     behind it show through. Text colours are unchanged, so contrast is unaffected. */
  --glass:rgba(var(--tint),.048); --glass-2:rgba(var(--tint),.028); --glass-strong:rgba(var(--tint),.075);
  --glass-edge:rgba(var(--tint),.10); --glass-lit:inset 0 1px 0 rgba(var(--tint),.09);
  --glass-blur:saturate(150%) blur(22px);
  --depth:0 1px 2px rgba(var(--shade),.28), 0 12px 32px rgba(var(--shade),.34);
  --depth-lift:0 2px 6px rgba(var(--shade),.34), 0 26px 60px rgba(var(--shade),.48);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Men of distinction. Fraunces is an old-style with real mass — thick stems, wedge serifs that
     are planted rather than hung — and it holds that weight from a 96px greeting down to a 14px
     citation. Its soft and wonk axes are pinned flat in the file: the flourished forms are
     charming on a menu and wrong on a chapter's law. Libre Franklin carries the text, because
     Franklin Gothic is the voice American civic printing has used for a century and it does not
     flinch. Both are self-hosted; the content policy allows no font from anywhere else. */
  --serif:Fraunces,Georgia,"Times New Roman",serif; --sans:Franklin,"Libre Franklin",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sidebar:272px;
  /* The measure of the room. Every gutter, gap and inset is one of these four, so a screen's
     spacing is a property of the width the portal is being read at rather than of the view that
     happened to be written last. The three registers are a desk, a tablet held in two hands, and
     a phone held in one; the values step down together at each. */
  --gutter:32px; --gap:18px; --stack:14px; --pad:22px;
}
*{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.5;background:var(--page) fixed;position:relative;isolation:isolate}
/* Ambient light behind the glass. Fixed and inert, so it costs nothing to scroll past. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--ambient)}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:600;letter-spacing:-.005em;margin:0;text-wrap:balance}
h1{font-size:clamp(31px,3.3vw,40px);line-height:1.08}h2{font-size:27px;line-height:1.18}h3{font-size:21px;line-height:1.22}
p{margin:0 0 .8em}a{color:var(--gold-2);text-decoration:none}a:hover{color:var(--gold-light)}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
::selection{background:rgba(226,179,79,.35)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---- icons: 1em inline by default; components override ---- */
svg.ic{width:1em;height:1em;flex:none;vertical-align:-.15em}
.row > svg.ic{width:20px;height:20px;color:var(--gold-2);margin-top:2px}
.item .avatar svg.ic{width:18px;height:18px}

/* ---- primitives ---- */
.eyebrow{font-family:var(--serif);color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;margin:0 0 6px;font-synthesis-weight:none}
.eyebrow.muted{color:var(--muted-2)}
.lede{color:var(--muted);font-size:16px;line-height:1.6}
.small{font-size:13px;color:var(--muted-2)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.02em}
.rule{display:flex;align-items:center;gap:14px;color:var(--gold);margin:8px 0 18px}
.rule:before,.rule:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line));}.rule:after{background:linear-gradient(90deg,var(--gold-line),transparent)}
.rule span{font-size:10px;letter-spacing:.3em}
.card{position:relative;background:linear-gradient(180deg,rgba(var(--tint),.035),rgba(var(--tint),.012));border:1px solid var(--gold-dim);border-radius:var(--radius);padding:var(--pad);box-shadow:var(--shadow)}
.card.tight{padding:16px 18px}
.card.gold{background:linear-gradient(135deg,rgba(183,121,33,.22),rgba(239,202,117,.06));border-color:rgba(226,179,79,.4)}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.card-head h2,.card-head h3{margin:0}
.card-head .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.grid{display:grid;gap:var(--gap)}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.main-aside{grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr)}
.stack{display:flex;flex-direction:column;gap:var(--stack)}
.row{display:flex;align-items:center;gap:12px}
.row.between{justify-content:space-between}.row.wrap{flex-wrap:wrap}
.spacer{flex:1}
.kpi{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:var(--radius-sm);background:rgba(var(--tint),.025);border:1px solid rgba(var(--tint),.05)}
.kpi .value{font-family:var(--serif);font-weight:700;font-size:30px;line-height:1;color:var(--ivory)}.kpi .value.gold{color:var(--gold-light)}
.kpi .label{font-size:12px;color:var(--muted-2);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.kpi .sub{font-size:12px;color:var(--muted-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--gold-line);background:transparent;color:var(--ivory);font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn:hover{border-color:rgba(226,179,79,.55);background:rgba(226,179,79,.06)}.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--solid);border:0;color:var(--on-solid);font-weight:800;box-shadow:var(--depth)}
.btn-primary:hover{filter:brightness(1.14);color:var(--on-solid)}
/* The sign-in's continue pill: the button proper with a gold disc at its end carrying the
   arrow. The disc is an object rather than lettering, so it keeps its leaf gold on paper. */
.btn-go{position:relative;min-height:54px;padding:9px 56px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.btn-go .say{display:block;white-space:normal;line-height:1.3}
.btn-go .go{position:absolute;right:6px;top:50%;display:grid;place-items:center;width:38px;height:38px;margin-top:-19px;border-radius:50%;background:var(--leaf);color:#17120A;transition:transform .2s var(--ease)}
.btn-go .go svg{width:16px;height:16px}
.btn-go:hover .go{transform:translateX(3px)}
.btn-go[disabled] .go{opacity:.6}
.btn-ghost{border-color:transparent;color:var(--gold-2)}
.btn-danger{border-color:rgba(210,87,79,.5);color:var(--tone-red)}.btn-danger:hover{background:rgba(210,87,79,.12);border-color:rgba(210,87,79,.8)}
/* Slightly generous even under a mouse; on a touch screen the rule below takes over. */
.btn-sm{min-height:36px;padding:0 14px;font-size:13px}
.btn-block{width:100%}
.btn svg{width:16px;height:16px}
.icon-btn{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--gold-dim);background:transparent;color:var(--muted);cursor:pointer}.icon-btn:hover{color:var(--gold-light);border-color:var(--gold-line)}
.icon-btn svg{width:18px;height:18px}

/* badges & chips */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:1px solid transparent;white-space:nowrap}
.badge.gold{background:var(--gold-fill);color:var(--on-gold)}
.badge.outline{border-color:var(--gold-line);color:var(--gold-2)}
.badge.slate{background:rgba(var(--tint),.06);color:var(--muted);border-color:rgba(var(--tint),.08)}
.badge.green{background:rgba(79,179,122,.14);color:var(--tone-green);border-color:rgba(79,179,122,.35)}
.badge.red{background:rgba(210,87,79,.14);color:var(--tone-red);border-color:rgba(210,87,79,.35)}
.badge.amber{background:rgba(226,162,63,.14);color:var(--tone-amber);border-color:rgba(226,162,63,.35)}
.badge.blue{background:rgba(127,167,217,.14);color:var(--tone-blue);border-color:rgba(127,167,217,.35)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--gold-dim);background:rgba(var(--tint),.02);font-size:13px;color:var(--muted);cursor:pointer}
.chip.active,.chip:hover{border-color:var(--gold);color:var(--ivory);background:rgba(226,179,79,.1)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--gold-dim);margin-bottom:18px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;color:var(--muted);font-weight:700;cursor:pointer;white-space:nowrap}
.tabs button.active{color:var(--gold-light);border-bottom-color:var(--gold)}

/* lists & tables */
.list{display:flex;flex-direction:column}
.list > .item{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid rgba(var(--tint),.06)}
.list > .item:first-child{border-top:0}
.list > .item.link{cursor:pointer}.list > .item.link:hover{background:rgba(var(--tint),.02)}
.item .body{flex:1;min-width:0}.item .title{font-weight:700;color:var(--ivory)}.item .meta{font-size:13px;color:var(--muted-2);margin-top:2px}
.item .title,.item .meta{overflow:hidden;text-overflow:ellipsis}
/* The right-hand column of a row carries badges, and badges do not shrink. Left to itself it
   holds its full width and pushes the row off the side of a phone, so it is allowed to wrap and,
   where there is no room at all, to drop under the name. */
.item .aside{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0;flex-shrink:1}
.item .aside .row{flex-wrap:wrap;justify-content:flex-end}
.table-wrap{overflow-x:auto;margin:0 -6px}
table.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:800;padding:10px 8px;border-bottom:1px solid var(--gold-dim)}
.table td{padding:12px 8px;border-bottom:1px solid rgba(var(--tint),.05);vertical-align:middle}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.table tr.link{cursor:pointer}.table tr.link:hover td{background:rgba(var(--tint),.02)}
.avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2a2218,#16120d);border:1px solid var(--gold-line);color:var(--gold-light);font-family:var(--serif);font-size:15px}
.avatar.lg{width:56px;height:56px;font-size:20px}
.progress{height:8px;border-radius:999px;background:rgba(var(--tint),.07);overflow:hidden}
.progress > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light))}
.bar-row{display:grid;grid-template-columns:minmax(120px,1fr) 2fr auto;gap:12px;align-items:center;font-size:13px}
.bar{height:10px;border-radius:999px;background:rgba(var(--tint),.06);overflow:hidden;display:flex}
.bar .in{background:linear-gradient(90deg,var(--gold-deep),var(--gold-light))}.bar .out{background:rgba(210,87,79,.6)}
.empty{text-align:center;padding:34px 20px;color:var(--muted-2)}
.empty h3{color:var(--muted);margin-bottom:6px}
.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:1px solid var(--gold-dim)}
.timeline li{position:relative;padding:0 0 14px 14px}
.timeline li:before{content:"";position:absolute;left:-23px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.seal{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;border:1px solid var(--gold-line);background:rgba(226,179,79,.06);color:var(--gold-light);font-size:12px;font-weight:700}
.seal.bad{border-color:rgba(210,87,79,.5);color:var(--tone-red);background:rgba(210,87,79,.08)}
.prose{color:var(--text);line-height:1.7;white-space:pre-wrap;word-wrap:break-word}
.prose h4{color:var(--gold);font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:22px 0 8px}
.notice{padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--gold-line);background:rgba(226,179,79,.06);color:var(--cream);font-size:14px}
.notice.warn{border-color:rgba(226,162,63,.5);background:rgba(226,162,63,.08)}
.notice.danger{border-color:rgba(210,87,79,.5);background:rgba(210,87,79,.08)}
.notice.success{border-color:rgba(79,179,122,.5);background:rgba(79,179,122,.08)}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field .hint{font-size:12px;color:var(--muted-2)}
.field input,.field select,.field textarea,.input{width:100%;min-height:46px;padding:11px 14px;border-radius:var(--radius-sm);border:1px solid rgba(226,179,79,.22);background:#0f0d0b;color:var(--ivory);transition:border-color .15s}
.field textarea{min-height:110px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,179,79,.14)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold-2) 50%),linear-gradient(135deg,var(--gold-2) 50%,transparent 50%);background-position:calc(100% - 20px) 20px,calc(100% - 15px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
.field input[type=checkbox]{width:auto;min-height:0}
/* A field can carry a mark at its head — the envelope on the sign-in's email box. It is set
   over the control rather than beside it, so the label above still points at the input. */
.field .lead{position:relative;display:flex;align-items:center}
.field .lead > svg{position:absolute;left:15px;width:17px;height:17px;color:var(--muted-2);pointer-events:none}
.field .lead input{padding-left:44px}
.field .lead:focus-within > svg{color:var(--gold)}
.check{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:14px;color:var(--text)}
.check input{width:18px;height:18px;accent-color:var(--gold)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.form-grid .full{grid-column:1 / -1}
.form-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}
.dropzone{border:1px dashed var(--gold-line);border-radius:var(--radius-sm);padding:18px;text-align:center;color:var(--muted);cursor:pointer;background:rgba(226,179,79,.03)}
.dropzone:hover{border-color:var(--gold);color:var(--ivory)}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.thumb{position:relative;width:96px;height:96px;border-radius:12px;overflow:hidden;border:1px solid var(--gold-dim);background:var(--mat);display:grid;place-items:center;font-size:11px;color:var(--muted);text-align:center;padding:6px}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;cursor:pointer;font-size:12px;line-height:1}

/* ---- boot & auth ---- */
.boot{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center}
.boot img{width:72px;opacity:.9;animation:pulse 1.6s ease-in-out infinite}.boot-note{color:var(--muted-2);font-size:13px}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
/* The door. Paper on one side, the fraternity's arms on a dark plate on the other, a gold seam
   cut on the slant between them, and the card set on that seam — so the first thing a brother
   sees is the register the rest of the portal is in. The three are children of one grid row: the
   plate spans the whole row; the paper lies over its left half, clipped on the slant, so the arms
   show through the cut. The row is at least a screen tall and grows with the longest form, which
   is why a six-field request-access page never overflows or needs its own layout. */
.auth{--lean:clamp(120px,18vw,300px);--band:calc(50vw - 235px);position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);background:var(--mat)}
.auth-paper{grid-area:1/1/2/2;position:relative;z-index:1;overflow:hidden;display:flex;flex-direction:column;padding:44px clamp(30px,5vw,76px) 40px;padding-right:calc(clamp(30px,5vw,76px) + var(--lean));background:linear-gradient(150deg,var(--panel) 0%,var(--ink-2) 62%,var(--ink-3) 100%);clip-path:polygon(0 0,100% 0,calc(100% - var(--lean)) 100%,0 100%)}
/* The seam: a band of gold along the slanted edge, drawn inside the paper's own clip so it can
   never separate from it. */
.auth-paper::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,#f0d283 0%,var(--leaf) 46%,#9a6b16 100%);clip-path:polygon(calc(100% - 10px) 0,100% 0,calc(100% - var(--lean)) 100%,calc(100% - var(--lean) - 10px) 100%)}
.auth-paper > *{position:relative;z-index:1}
.auth-paper .masthead{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.auth-paper .masthead .chapter{margin:10px 0 0;font-size:11.5px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory)}
.auth-paper .masthead .place{margin:0;font-size:9.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2)}
.auth-paper .gold-rule{margin:28px 0 0}
.auth-paper h1{margin:14px 0 0;font-size:clamp(40px,4.4vw,62px);line-height:1.02;color:var(--ivory);max-width:12ch;letter-spacing:-.01em}
.auth-paper .creed{margin:18px 0 0;padding:0;max-width:none;display:flex;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:0 13px;font-size:10.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2)}
.auth-paper .creed i{font-style:normal;color:var(--leaf)}
.auth-paper .sub{margin:18px 0 0;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(18px,1.55vw,22px);line-height:1.45;color:var(--muted);max-width:24ch;letter-spacing:.01em}
/* The foot of the paper: the tagline and the fraternity's motto, pushed to the bottom. */
.auth-paper .paper-foot{margin-top:auto;padding-top:56px}
.auth-paper .tagline{margin:0;font-size:10.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2)}
.auth-paper .motto{margin:14px 0 0;padding:0;max-width:34ch}
.auth-paper .motto p{margin:0;font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.45;color:var(--muted)}
.auth-paper .motto cite{display:block;margin-top:6px;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)}
.auth-paper .motto cite::before{content:"— "}
.auth-paper .fineprint{margin:16px 0 0;font-size:12px;color:var(--muted-2)}
/* Rainier and the city, ghosted into the paper at the corner — multiplied into the cream so it
   reads as a watermark pressed into the page rather than a photograph dropped on top of it. */
.paper-bleed{position:absolute;z-index:0;left:-8%;bottom:8%;width:min(86%,560px);height:auto;opacity:.42;pointer-events:none;mix-blend-mode:multiply;filter:grayscale(1) sepia(.6) brightness(1.3) contrast(.92);-webkit-mask-image:radial-gradient(72% 80% at 28% 70%,#000 20%,transparent 74%);mask-image:radial-gradient(72% 80% at 28% 70%,#000 20%,transparent 74%)}
:root[data-theme="dark"] .paper-bleed{mix-blend-mode:screen;opacity:.20;filter:grayscale(1) sepia(.5) brightness(.85) contrast(1.1)}

/* The plate: the chapter's own photograph — the arms embroidered on a brother's lapel, rain still
   on the cloth. It lies under the whole row rather than in a column of its own, so the paper can
   be cut on the slant and the picture show through the cut. The frame of the picture is padded on
   its left with a blurred wash of itself (see the plate script), which is the part that ends up
   behind the card: that is what lets the arms sit clear of the card at every width with a plain
   `cover`, instead of a stack of width-specific rules. */
.auth-plate{grid-area:1/1/2/3;position:relative;z-index:0;overflow:hidden;background:var(--mat) radial-gradient(120% 90% at 78% 40%,#221d16 0%,#14110c 46%,#0a0908 100%)}
.auth-plate .plate-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 42%}
/* A vignette, so the words at the foot keep their contrast over whatever the picture is doing. */
.auth-plate::after{content:"";position:absolute;inset:0;background:linear-gradient(196deg,rgba(6,5,4,.06) 0%,rgba(6,5,4,.26) 52%,rgba(6,5,4,.74) 100%)}
.auth-plate > *{position:relative;z-index:1}
.auth-plate .plate-words{position:absolute;right:clamp(22px,3vw,44px);bottom:40px;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--on-mat-2);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.auth-plate .plate-words .gold-rule{margin:10px 0 0;width:44px;height:2px;background:var(--on-mat-gold);border-radius:2px}

/* Near-opaque rather than merely translucent: the card straddles cream on one side and black
   cloth on the other, and a see-through card would read as two different cards. */
.auth-card{grid-area:1/1/2/3;justify-self:center;align-self:center;z-index:3;width:min(100%,438px);margin:52px 16px;padding:34px 32px 26px;border-radius:26px;background:var(--pane);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--pane-edge);box-shadow:0 34px 90px rgba(var(--shade),.32),var(--glass-lit)}
.auth-card .gold-rule{margin:0 0 14px}
.auth-card h2{font-size:27px;margin:0 0 6px;color:var(--ivory)}
.auth-card .lede{font-size:14px;margin-bottom:20px}
.auth-card form{margin-top:18px}
.auth-card .btn-go{margin-top:4px}
.auth-card .links{margin-top:20px;padding-top:18px;border-top:1px solid var(--gold-dim);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;text-align:center}
.auth-card .links a{font-weight:600}
.auth-card .notice{margin-bottom:0}
.auth-card .assurance{margin:20px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--muted-2)}
.auth-card .assurance svg{width:14px;height:14px;color:var(--leaf)}
/* The one box. Its label carries the little (i); its right end carries the eye. */
.door-field .label-row{display:flex;align-items:center;gap:8px}
.door-field .lead input{padding-right:48px}
.peek{position:absolute;right:8px;top:50%;width:32px;height:32px;margin-top:-16px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--muted-2);cursor:pointer}
.peek:hover,.peek[aria-pressed="true"]{color:var(--gold)}
.peek svg{width:17px;height:17px}
.info{display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:var(--glass-strong);color:var(--muted-2);cursor:pointer;flex:none}
.info svg{width:13px;height:13px}
.info:hover,.info[aria-expanded="true"]{color:var(--gold);background:var(--gold-dim)}
.pop{margin:8px 0 2px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--gold-line);background:var(--glass-strong);font-size:13px;line-height:1.5;color:var(--text)}
.pop[hidden]{display:none}
.pop strong{color:var(--ivory)}
.remember-row{display:flex;align-items:center;gap:6px;margin:-4px 0 10px}
.remember-row .check{padding:6px 0;font-size:13.5px}
.linklike{padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linklike:hover{color:var(--gold-light)}
.passkey-link{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;text-decoration:none;font-weight:700;font-size:12.5px}
.passkey-link svg{width:16px;height:16px}
.passkey-link[hidden]{display:none}
/* Step two of the door: who the House takes this to be, and the way to correct it. */
.whoami{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--glass-edge);font-size:13px}
.whoami[hidden]{display:none}
.whoami svg{width:16px;height:16px;flex:none;color:var(--muted-2)}
.whoami .addr{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--text)}
.whoami .change{flex:none;padding:0;border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.whoami .change:hover{color:var(--gold-light)}
/* The passkey lane at the head of the door, and the rule that separates it from the six digits. */
.passkey-lane[hidden]{display:none}
.passkey-lane .btn-go{margin-bottom:4px}
.or{display:flex;align-items:center;gap:12px;margin:16px 0 14px;color:var(--muted-3);font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--gold-dim)}
/* The offer of Face ID, on the screen after the first sign-in. */
.offer{text-align:center}
.offer-mark{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:50%;background:var(--gold-dim);color:var(--gold)}
.offer-mark svg{width:30px;height:30px}
.offer .lede{font-size:15px;text-align:left}
.offer-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.offer-note{margin-top:12px}
/* Six digits want to be read as six digits, not as prose. */
.field input[inputmode="numeric"]{font-family:var(--mono);letter-spacing:.34em;font-size:17px}
.field input[inputmode="numeric"]::placeholder{font-family:var(--sans);letter-spacing:0;font-size:14px}

/* ---- shell ---- */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh;background:linear-gradient(var(--gold-dim),var(--gold-dim)) calc(var(--sidebar) - 1px) 0/1px 100% no-repeat,var(--rail) 0 0/var(--sidebar) 100% no-repeat}
.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:26px 18px 22px}
/* The chapter's mark, then its name, then where it sits. Set rather than stacked, so the rail
   reads as a masthead rather than as an app's logo lockup. */
.brand{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 6px 22px;margin-bottom:18px;text-align:center}
.brand:hover{color:inherit}
/* The chapter's seal. A raster mark with its own gold rim, so it takes no border, no background
   and no shadow from the portal — the seal already has all three drawn into it. */
.seal-mark{width:78px;height:auto;display:block;border-radius:50%}
.brand .seal-mark{width:86px;margin-bottom:2px}
.auth-paper .seal-mark{width:104px}
@media (max-width:900px){.auth-paper .seal-mark{width:84px}}
.mono{width:74px;height:auto;display:block}
.mono text{font-family:var(--serif);fill:var(--gold)}
.mono .mono-m{font-size:58px;letter-spacing:-.02em}
.mono .mono-s{font-size:34px;opacity:.92}
.mono .mono-l{fill:var(--gold);opacity:.92}
.mono .mono-rule{stroke:var(--gold);stroke-width:1.4;opacity:.55}
.brand .name{margin-top:8px;font-size:11.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory)}
.brand .place{font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav.secondary{margin-top:14px;padding-top:14px;border-top:1px solid var(--gold-dim)}
.nav.secondary a{padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--muted-2)}
.nav.secondary a svg{width:15px;height:15px}
/* The four words the chapter runs on, and the verse under them. */
.creed{margin-top:auto;padding:22px 12px 0;display:flex;flex-direction:column;gap:5px}
/* --muted-2, not --muted-3: at 9.5px with a quarter-em of tracking this is the smallest type in
   the portal, and --muted-3 left the chapter's own creed at 3.46:1 in the rail. */
.creed span{font-size:9.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2)}
.scripture{padding:18px 12px 0;margin-top:14px;border-top:1px solid var(--gold-dim)}
.scripture p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:12.5px;color:var(--muted-2);line-height:1.5}
.scripture .cite{font-family:var(--sans);font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-3);margin-top:6px}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--muted);font-weight:600;font-size:14px;position:relative}
.nav a svg{width:18px;height:18px;opacity:.85}
.nav a:hover{color:var(--ivory);background:rgba(var(--tint),.03)}
.nav a.active{color:var(--ivory);background:rgba(226,179,79,.09)}
.nav a.active:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--gold)}
.nav .section{margin:14px 12px 6px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-3);font-weight:800}
.roll-chip{display:none}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:14px var(--gutter);padding-top:max(14px,env(safe-area-inset-top));background:var(--header);backdrop-filter:blur(14px);border-bottom:1px solid var(--gold-line)}
.topbar .titles{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.topbar .who{display:flex;align-items:center;gap:10px;flex:none;white-space:nowrap}
.topbar .who .name{font-weight:700;font-size:13.5px;color:var(--ivory)}
.topbar .who .role{font-size:10px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.topbar .datestamp{text-align:right;line-height:1.4;white-space:nowrap;flex:none}
.topbar .datestamp .day{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory)}
.topbar .datestamp .place{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
/* Search reaches the chapter's places and the brothers on the roll. */
.search{position:relative;display:flex;align-items:center;gap:10px;flex:0 1 420px;min-width:0;padding:0 18px;height:44px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-lit)}
.search:focus-within{border-color:rgba(226,179,79,.45)}
.search svg{width:17px;height:17px;color:var(--muted-2);flex:none}
.search input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:13.5px;outline:none}
.search input::placeholder{color:var(--muted-3)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search .results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;padding:6px;border-radius:var(--radius-sm);background:var(--pane);border:1px solid var(--pane-edge);box-shadow:var(--depth-lift);max-height:min(60vh,420px);overflow:auto}
.search .results[hidden]{display:none}
.search .results a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--text);font-size:13.5px}
.search .results a svg{width:16px;height:16px;color:var(--gold)}
.search .results a span{display:flex;flex-direction:column;min-width:0}
.search .results a .small{color:var(--muted-2)}
.search .results a:hover,.search .results a.on{background:rgba(226,179,79,.12);color:var(--ivory)}
.wx-chip{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid var(--gold-dim);background:rgba(var(--tint),.02);font-size:13px;color:var(--muted)}
.wx-chip[hidden]{display:none}
.wx-chip svg{width:20px;height:20px;color:var(--gold-light)}.wx-chip strong{color:var(--ivory);font-family:var(--serif);font-size:17px}
.view{padding:24px var(--gutter) 40px;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right));max-width:1560px;width:100%;margin-inline:auto}
/* The chapter's name at the foot of every screen, the way it sits at the foot of a programme. */
.colophon{display:flex;align-items:center;gap:26px;padding:22px var(--gutter) 96px;max-width:1560px;width:100%;margin-inline:auto;color:var(--muted-3)}
.colophon nav{display:flex;flex-wrap:wrap;gap:16px;flex:1}
/* --muted-2: at 9.5px in small caps these measured 4.43–4.46:1 on paper, just under. */
.colophon nav a{font-size:9.5px;font-weight:800;letter-spacing:.14em;white-space:nowrap;text-transform:uppercase;color:var(--muted-2);position:relative;padding-bottom:10px}
.colophon nav a:hover{color:var(--gold)}
.colophon nav a.active{color:var(--text)}
.colophon nav a.active::after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gold)}
.colophon .seal{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--pane);border:1px solid var(--pane-edge);box-shadow:var(--depth)}
.colophon .seal .mono{width:38px}
.colophon .est{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.colophon .est span{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase}
.view > .card,.view > .grid{margin-bottom:18px}
.tabbar{display:none}

/* ---- dashboard ---- */
.status-pill{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;border:1px solid var(--gold-dim);background:rgba(var(--shade),.25);font-size:13px}
.status-pill .lbl{color:var(--muted-2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.weather{display:flex;flex-direction:column;gap:12px}
.weather .now{display:flex;align-items:center;gap:16px}.weather .now svg{width:52px;height:52px;color:var(--gold-light)}
.weather .temp{font-family:var(--serif);font-weight:700;font-size:54px;line-height:1;color:var(--ivory)}.weather .cond{color:var(--muted)}
.weather .days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:4px}
.weather .day{text-align:center;font-size:12px;color:var(--muted-2);padding:8px 4px;border-radius:12px;background:rgba(var(--tint),.025)}
.weather .day svg{width:22px;height:22px;color:var(--gold-2);display:block;margin:4px auto}.weather .day b{color:var(--ivory)}
.alert{padding:10px 12px;border-radius:12px;border:1px solid rgba(226,162,63,.5);background:rgba(226,162,63,.1);font-size:13px}
.news .item .title{font-weight:600;font-size:14px;line-height:1.35;white-space:normal}
.celebration{display:flex;align-items:center;gap:12px}
.celebration .date{flex:none;width:52px;text-align:center;border-radius:12px;padding:6px 0;background:rgba(226,179,79,.08);border:1px solid var(--gold-dim)}
.celebration .date b{display:block;font-family:var(--serif);font-weight:700;font-size:20px;color:var(--gold-light);line-height:1}.celebration .date span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

/* ---- calendar ---- */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}.cal-head .row{flex-wrap:wrap}
.cal-head h2{font-size:26px}
.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.month-grid .dow{text-align:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-3);font-weight:800;padding:6px 0}
.month-grid .day{min-height:96px;padding:8px;border-radius:12px;background:rgba(var(--tint),.02);border:1px solid rgba(var(--tint),.04);display:flex;flex-direction:column;gap:4px}
.month-grid .day.other{opacity:.35}.month-grid .day.today{border-color:var(--gold);background:rgba(226,179,79,.07)}
.month-grid .day .num{font-size:12px;color:var(--muted-2);font-weight:700}
.month-grid .day.today .num{color:var(--gold-light)}
.ev{display:block;font-size:11px;line-height:1.3;padding:3px 7px;border-radius:7px;background:rgba(226,179,79,.14);color:var(--ivory);border-left:2px solid var(--gold);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev.CHAPTER_MEETING{border-left-color:var(--gold)}.ev.EXECUTIVE_BOARD{border-left-color:#d7b36a}.ev.COMMUNITY_SERVICE{border-left-color:var(--green)}.ev.SOCIAL{border-left-color:var(--blue)}.ev.FRATERNITY{border-left-color:#c996ff}.ev.DEADLINE{border-left-color:var(--red)}.ev.COMMITTEE{border-left-color:var(--amber)}
.when{flex:none;width:64px;text-align:center;border-radius:12px;padding:8px 0;background:rgba(var(--tint),.03);border:1px solid rgba(var(--tint),.06)}
.when b{display:block;font-family:var(--serif);font-weight:700;font-size:22px;line-height:1;color:var(--ivory)}.when span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* ---- modal & toast ---- */
.modal-back{position:fixed;inset:0;z-index:1000;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.modal{width:min(100%,560px);max-height:calc(100vh - 32px);overflow:auto;background:linear-gradient(180deg,#17130f,#0d0b09);border:1px solid rgba(226,179,79,.4);border-radius:24px;padding:24px;box-shadow:0 24px 70px rgba(var(--shade),.6)}
.modal.wide{width:min(100%,820px)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.modal-head h2{font-size:24px}
.toast{position:relative;padding:12px 16px;border-radius:14px;background:#17130f;border:1px solid var(--gold-line);color:var(--ivory);font-size:14px;box-shadow:var(--shadow);animation:rise .25s ease}
.toast.error{border-color:rgba(210,87,79,.6)}.toast.ok{border-color:rgba(79,179,122,.5)}
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1100;display:flex;flex-direction:column;gap:8px;width:min(92vw,480px)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.noscript{padding:40px;text-align:center;color:var(--ivory)}
.skeleton{height:14px;border-radius:7px;background:linear-gradient(90deg,rgba(var(--tint),.04),rgba(var(--tint),.09),rgba(var(--tint),.04));background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.spinner{width:22px;height:22px;border-radius:50%;border:2px solid rgba(226,179,79,.25);border-top-color:var(--gold);animation:spin .8s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.motion-table td:first-child{font-weight:700;color:var(--ivory)}
.yes{color:var(--tone-green);font-weight:800}.no{color:var(--muted-3)}

/* ---- responsive ---- */
/* On a phone the panels stop being side by side and become a sequence: the greeting on paper,
   its lower edge cut on the same slant with the same seam, the card lifted onto that edge, then
   the black plate with the arms and the words. Grid placement is ignored once the container is a
   flex column, so the desktop rules need no undoing; the clip changes from a side to a foot. */
@media (max-width:900px){
  .auth{display:flex;flex-direction:column}
  .auth-paper{padding:36px 22px 78px;justify-content:flex-start;min-height:auto;clip-path:polygon(0 0,100% 0,100% calc(100% - 46px),0 100%)}
  .auth-paper::after{clip-path:polygon(0 calc(100% - 10px),100% calc(100% - 56px),100% calc(100% - 46px),0 100%)}
  .auth-paper h1{font-size:clamp(34px,9vw,44px)}
  .auth-paper .sub{font-size:17px;max-width:30ch}
  .auth-paper .creed{margin-top:14px;font-size:9.5px;letter-spacing:.2em}
  .auth-paper .paper-foot{padding-top:34px}
  .auth-card{width:min(100%,438px);margin:-40px auto 0;padding:28px 22px 22px}
  .auth-plate{flex:1;min-height:clamp(340px,56vw,460px);margin-top:-30px}
  /* A band is a far wider window than the plate is on a desk, so the frame is pulled hard to its
     own right edge: the arms hold the right of the band and the soft cloth the left, which is
     where the words go on a phone. Side by side, rather than the words over the embroidery. */
  .auth-plate .plate-photo{object-position:100% 42%}
  .auth-plate::after{background:linear-gradient(90deg,rgba(6,5,4,.58) 0%,rgba(6,5,4,.44) 32%,rgba(6,5,4,.22) 64%,rgba(6,5,4,.08) 100%)}
  .auth-plate .plate-words{left:24px;right:auto;bottom:auto;top:50%;transform:translateY(-50%)}
  .paper-bleed{left:-24%;bottom:8%;width:82%;opacity:.22}
}
/* ============================================================================
   Three registers: a desk, a tablet held in two hands, a phone held in one.

   The old stylesheet had two — everything above 960px and everything below —
   which meant an iPad in portrait was treated as a large phone: one column of
   full-width cards down an 834px screen, with three-quarters of the room spent
   on margins. What follows gives the tablet a register of its own. The rail
   still gives way to the bar at the foot, because a 272px rail on an 834px
   screen leaves too little for the work; but the tiles stay in columns, the
   gutters stay wide, and the topbar keeps the brother's name and the weather.

   Only the tokens change at each step wherever that is enough, so the three
   registers cannot drift apart rule by rule.
   ============================================================================ */
@media (min-width:961px){.modal-back{align-items:center}}

/* ---- a narrow desk: the rail narrows before the content does ---- */
@media (max-width:1180px){
  :root{--sidebar:236px;--gutter:26px;--gap:16px}
  .grid.cols-4,.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.main-aside{grid-template-columns:1fr}
}

/* ---- a tablet: no rail, but the room is still a room ---- */
@media (max-width:960px){
  :root{--gutter:24px;--gap:16px;--stack:12px;--pad:20px}
  .shell{grid-template-columns:1fr;background:none}
  .sidebar{display:none}
  .view{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .colophon{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  /* Four tiles go two by two rather than four deep; three stay three across
     while there is room for them, which on a tablet there is. */
  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.cols-3:has(> .card){grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .month-grid .day{min-height:76px}
  /* The bar at the foot is a set of destinations, not a stretched ribbon. */
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;justify-content:center;gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--bar);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid rgba(226,179,79,.18)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:104px;min-height:52px;padding:6px 4px;border:0;background:none;color:var(--muted-2);font-size:10px;font-weight:700;letter-spacing:.04em;border-radius:14px}
  .tabbar a.active{color:var(--gold-light);background:var(--glass)}
  .tabbar svg{width:20px;height:20px}
}

/* ---- a phone: one hand, one column, and the thumb at the foot ---- */
@media (max-width:700px){
  :root{--gutter:16px;--gap:12px;--stack:10px;--pad:18px}
  .topbar{gap:10px}
  .topbar h1{font-size:21px}
  .topbar .who .name,.topbar .who .role{display:none}
  .wx-chip{display:none}
  .topbar .datestamp{display:none}
  /* Prose wants the full width; figures are better two by two than four deep. */
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .grid.cols-3:has(> .kpi),.grid.cols-4:has(> .kpi){grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid.tiles .kpi{padding:14px}
  .grid.tiles .kpi .value{font-size:22px}
  .grid.tiles .kpi .label{font-size:10px}
  .form-grid{grid-template-columns:1fr}
  .view{padding-top:18px}
  .kpi{padding:15px 16px}
  .kpi .value{font-size:25px}
  .month-grid .day{min-height:58px;padding:5px}
  .month-grid .ev{font-size:0;padding:0;height:6px;width:6px;border-radius:50%;border:0;background:var(--gold);display:inline-block;margin-right:3px}
  .month-grid .ev.COMMUNITY_SERVICE{background:var(--green)}.month-grid .ev.SOCIAL{background:var(--blue)}.month-grid .ev.FRATERNITY{background:#c996ff}.month-grid .ev.DEADLINE{background:var(--red)}
  /* A heading and its buttons do not fit side by side on a phone; stacking them keeps the
     sentence readable rather than squeezing it into a column three words wide. */
  .card-head{flex-direction:column;align-items:stretch;gap:12px}
  .card-head .actions{justify-content:flex-start}
  .card-head .actions .field{flex:1}
  /* A row's badges drop under the name rather than off the side of the screen. */
  .list > .item{flex-wrap:wrap}
  .item .aside{width:100%;align-items:flex-start;text-align:left;padding-left:54px}
  .item .aside .row{justify-content:flex-start}
  .table th:nth-child(n+4),.table td:nth-child(n+4){display:none}
  .table.keep-all th,.table.keep-all td{display:table-cell}
  .tabbar{grid-auto-flow:unset;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .tabbar a,.tabbar button{width:auto}
}

/* ---- anything tapped rather than clicked ----
   Sized by how the portal is being touched rather than by how wide the window
   is, so a touch laptop and a phone both get a target a thumb can find. */
@media (pointer:coarse){
  .btn{min-height:46px}
  .btn-sm{min-height:42px;padding:0 16px}
  .icon-btn{width:44px;height:44px}
  .chip{min-height:42px;padding:8px 16px}
  .tabs button{min-height:46px}
  .peek{width:40px;height:40px;margin-top:-20px}
  .info{width:26px;height:26px}
  .info svg{width:15px;height:15px}
  .list > .item{padding:16px 0}
}

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


/* ============================================================================
   Glass surfaces
   One pass over the panels that carry content. Colours and sizes come from the
   tokens above, so both themes and every contrast decision still hold; what
   changes is the material: a translucent pane, a lit top edge, and depth.
   ============================================================================ */
.card,.kpi,.modal,.wx-chip,.chip,.thumb,.dropzone,.month-grid .day,.when,.celebration .date,.seal,.notice,.status-pill,.tabs,.field input,.field select,.field textarea,.input{
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}

.card{background:linear-gradient(160deg,var(--glass),var(--glass-2));border:1px solid var(--glass-edge);box-shadow:var(--depth),var(--glass-lit);transition:box-shadow .32s var(--ease),border-color .32s var(--ease),transform .32s var(--ease)}
.card:hover{border-color:rgba(226,179,79,.26);box-shadow:var(--depth-lift),var(--glass-lit)}
.card.gold{background:linear-gradient(150deg,rgba(226,179,79,.20),rgba(183,121,33,.07) 52%,var(--glass-2));border-color:rgba(226,179,79,.34)}
.card.tight{box-shadow:var(--depth)}

.kpi{background:linear-gradient(160deg,var(--glass),transparent);border:1px solid var(--glass-edge);box-shadow:var(--glass-lit);transition:border-color .3s var(--ease),background .3s var(--ease)}
.kpi:hover{border-color:rgba(226,179,79,.24);background:linear-gradient(160deg,var(--glass-strong),transparent)}

.shell{background:linear-gradient(var(--glass-edge),var(--glass-edge)) calc(var(--sidebar) - 1px) 0/1px 100% no-repeat,var(--rail) 0 0/var(--sidebar) 100% no-repeat}
.sidebar{-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.nav a{transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease)}
.nav a:hover{transform:translateX(2px)}
.nav a.active{background:linear-gradient(90deg,rgba(226,179,79,.16),rgba(226,179,79,.03));border:1px solid rgba(226,179,79,.18)}

.topbar{background:var(--header);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-edge)}
/* --bar-glass, not a literal: this was a fixed dark fill with no light-theme counterpart, so on
   paper every screen but the dashboard — which sets its own through [data-house="on"] — put dark
   brown labels on a dark brown bar at 1.02:1. It had never been measured at phone width in the
   light theme, which is the only place it shows. */
.tabbar{background:var(--bar-glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-top:1px solid var(--glass-edge)}
.modal{background:var(--pane);border:1px solid var(--pane-edge);box-shadow:0 30px 80px rgba(var(--shade),.66),var(--glass-lit)}
.modal-back{background:rgba(6,5,4,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.btn{background:linear-gradient(160deg,var(--glass),transparent);transition:border-color .22s var(--ease),background .22s var(--ease),transform .12s var(--ease),box-shadow .22s var(--ease)}
.btn:hover{background:linear-gradient(160deg,var(--glass-strong),var(--glass-2));box-shadow:var(--glass-lit)}
.btn-primary,.btn-primary:hover{background:var(--solid);color:var(--on-solid)}
.btn-primary{box-shadow:var(--depth),inset 0 1px 0 rgba(255,255,255,.14)}
.btn-primary:hover{box-shadow:var(--depth-lift),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-ghost{background:none}.btn-ghost:hover{background:var(--glass-2)}

.field input,.field select,.field textarea,.input{background:rgba(var(--tint),.035);border-color:var(--glass-edge)}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{background:rgba(var(--tint),.055)}

.status-pill{background:rgba(var(--shade),.26);border-color:var(--glass-edge)}
.month-grid .day{background:var(--glass-2);border-color:rgba(var(--tint),.055);transition:background .22s var(--ease),border-color .22s var(--ease)}
.month-grid .day:hover{background:var(--glass);border-color:rgba(226,179,79,.20)}
.month-grid .day.today{background:linear-gradient(160deg,rgba(226,179,79,.14),var(--glass-2));border-color:rgba(226,179,79,.46)}
.ev{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .18s var(--ease),background .18s var(--ease)}
.ev:hover{transform:translateY(-1px);background:rgba(226,179,79,.24)}
.list > .item.link,.table tr.link{transition:background .2s var(--ease)}
.list > .item.link:hover{background:var(--glass-2);border-radius:10px}
.avatar{background:var(--avatar-bg);box-shadow:var(--glass-lit)}
.progress{background:rgba(var(--tint),.07);box-shadow:inset 0 1px 2px rgba(var(--shade),.35)}
.progress > span{box-shadow:0 0 14px rgba(226,179,79,.42)}
.toast{background:var(--toast-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--depth-lift)}

/* Views arrive with a short settle rather than a jump. They start visible, so the page is
   complete even if the animation never runs. */
@keyframes settle{from{opacity:.001;transform:translateY(7px)}to{opacity:1;transform:none}}
.view > *{animation:settle .34s var(--ease) both}
.view > *:nth-child(2){animation-delay:.04s}
.view > *:nth-child(3){animation-delay:.08s}
.view > *:nth-child(n+4){animation-delay:.11s}

@media (prefers-reduced-motion:reduce){
  .view > *{animation:none}
  .card,.btn,.nav a,.ev,.kpi{transition:none}
}
/* Backdrop blur is costly on a long grid; drop it on phones and keep the colour. */
@media (max-width:960px){
  .kpi,.chip,.thumb,.month-grid .day,.when,.celebration .date,.field input,.field select,.field textarea,.input{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---- shared album, meeting notes ---- */
/* Photographs read best edge to edge, so the tiles carry the glass frame rather than sitting
   inside one. A tile is a button: the whole picture is the target, on a phone as much as a desk. */
.mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.mosaic.review{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tile{position:relative;display:block;aspect-ratio:1;padding:0;border:1px solid var(--glass-edge);border-radius:var(--radius-sm);overflow:hidden;background:var(--mat);cursor:pointer;box-shadow:var(--depth);transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);border-color:rgba(226,179,79,.42);box-shadow:var(--depth-lift)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.tile:hover img{transform:scale(1.045)}
.tile .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(8,7,6,.86));opacity:.78;transition:opacity .26s var(--ease)}
.tile:hover .veil{opacity:.95}
.tile .meta{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:10px 12px;text-align:left}
.tile .cap{font-size:13px;font-weight:600;color:var(--ivory);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .by{font-size:11px;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .flag{position:absolute;top:8px;left:8px}
.lightbox{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#0a0908;border:1px solid var(--glass-edge);display:grid;place-items:center}
.lightbox img{max-width:100%;max-height:min(66vh,720px);display:block;object-fit:contain}

/* ---- the date, and the sky over Tacoma ----
   The chapter meets in person and serves outdoors, so both of these are chapter business. The
   date leads the greeting because a man opening the portal on a Tuesday evening wants to know
   what day it is before he wants to know anything else. */
.hero-date{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;margin:0 0 12px}
.hero-date .weekday{font-family:var(--serif);font-weight:600;font-size:clamp(21px,2vw,27px);line-height:1;color:var(--on-mat)}
.hero-date .rest{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-mat-gold)}

.wx .card-head{margin-bottom:10px}
.wx-alert{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid rgba(226,162,63,.5);background:rgba(226,162,63,.09);font-size:13px}
.wx-alert svg{width:15px;height:15px;flex:none;color:var(--amber);margin-top:2px}
.wx-alert span{display:flex;flex-direction:column;gap:2px;min-width:0}
.wx-alert strong{color:var(--ivory)}
.wx-now{display:flex;align-items:center;gap:14px;padding:4px 0 16px}
.wx-mark{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--gold-dim);color:var(--gold-light)}
.wx-mark svg{width:24px;height:24px}
.wx-temp{font-family:var(--serif);font-weight:700;font-size:44px;line-height:.9;color:var(--ivory)}
.wx-temp .deg{font-size:26px;vertical-align:super;line-height:1}
.wx-said{display:flex;flex-direction:column;gap:2px;min-width:0}
.wx-said strong{font-size:15px;color:var(--text)}
/* Five days as a table rather than five little cards: the eye runs down the highs. */
.wx-days{display:grid;gap:2px;padding-top:12px;border-top:1px solid var(--gold-dim)}
.wx-day{display:grid;grid-template-columns:4.5ch 22px 1fr auto auto;align-items:center;gap:10px;padding:7px 2px;font-size:13px}
.wx-day + .wx-day{border-top:1px solid rgba(var(--tint),.05)}
.wx-when{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.wx-ic{display:grid;place-items:center;color:var(--gold-2)}
.wx-ic svg{width:17px;height:17px}
.wx-hi{justify-self:end;font-weight:700;color:var(--ivory);font-variant-numeric:tabular-nums}
.wx-lo{justify-self:end;min-width:4ch;text-align:right;color:var(--muted-2);font-variant-numeric:tabular-nums}
.wx-wet{justify-self:end;min-width:5ch;text-align:right;font-size:11.5px;color:var(--blue);font-variant-numeric:tabular-nums}
.wx-wet.dry{color:transparent}
.wx-from{margin:12px 0 0;font-size:11.5px;color:var(--muted-2)}

/* ---- asking the House ----
   The question box on The House, the one inside The Book, and the answers either of them gives.
   An answer is a row rather than a card: a citation, the words the match sits in, and which of the
   two documents it came from, so a brother can read it in the room without opening anything. */
.ask{margin-bottom:var(--gap)}
.ask-bar{position:relative;display:flex;align-items:center;gap:12px;padding:0 18px;min-height:56px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--glass-lit)}
.ask-bar:focus-within{border-color:rgba(226,179,79,.45)}
.ask-bar > svg{width:19px;height:19px;flex:none;color:var(--muted-2)}
.ask-bar input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:15.5px;outline:none}
.ask-bar input::placeholder{color:var(--muted-3)}
.ask-bar input::-webkit-search-cancel-button{-webkit-appearance:none}
.ask-clear{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--glass);color:var(--muted-2);cursor:pointer}
.ask-clear[hidden]{display:none}
.ask-clear:hover{color:var(--gold)}
.ask-clear svg{width:15px;height:15px}
.ask-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:10px 4px 0;font-size:12.5px;color:var(--muted-2)}
.ask-eg{display:flex;flex-wrap:wrap;gap:6px}
.ask-eg .chip{padding:5px 12px;font-size:12px}
.ask-answers:empty{display:none}
.ask-answers{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.ask-group{display:flex;flex-direction:column;gap:2px}
.ask-group .eyebrow{margin-bottom:4px}
.ask-none{margin:14px 4px 0;font-size:13.5px;color:var(--muted-2)}
.answer{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid transparent;color:var(--text)}
.answer:hover,.answer:focus-visible{background:var(--glass);border-color:var(--glass-edge);color:var(--text)}
.answer-mark{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gold-dim);color:var(--gold)}
.answer-mark svg{width:16px;height:16px}
.answer-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.answer-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.answer-head strong{color:var(--ivory);font-size:14.5px}
.answer .cite{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.answer-text{font-size:13.5px;line-height:1.55;color:var(--muted)}
.answer-doc{font-size:11px;color:var(--muted-3)}
mark{background:rgba(226,179,79,.26);color:var(--ivory);border-radius:3px;padding:0 2px}

/* ---- The Book ----
   A reading surface rather than a page of an app: one measure, generous leading, and nothing in
   the margins competing with the words. The two modes share a stylesheet because they share a
   DOM — `paged` turns the same flow into columns as wide as the viewport, which is what lets a
   highlight, a search result and a bookmark work identically in both. */
.reader{margin-top:var(--gap);border-radius:var(--radius);border:1px solid var(--glass-edge);background:linear-gradient(160deg,var(--glass),var(--glass-2));box-shadow:var(--depth),var(--glass-lit);overflow:hidden}
.reader-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px var(--pad);border-bottom:1px solid var(--glass-edge);background:var(--header);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.reader-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seg{display:flex;padding:3px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-edge)}
.seg button{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;border:0;border-radius:999px;background:none;color:var(--muted-2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.seg button.on{background:var(--glass-strong);color:var(--ivory)}
.seg button svg{width:15px;height:15px}
.seg .tiny{font-size:10px}.seg .big{font-size:14px}
.resume{display:flex;align-items:center;gap:8px;width:100%;padding:11px var(--pad);border:0;border-bottom:1px solid var(--glass-edge);background:rgba(226,179,79,.07);color:var(--text);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.resume:hover{background:rgba(226,179,79,.13)}
.resume svg{width:15px;height:15px;color:var(--gold);flex:none}
.resume strong{color:var(--ivory)}

.surface{padding:26px var(--pad) 30px}
.flow{transition:transform .32s var(--ease)}
.reader.paged .surface{overflow:hidden;padding-bottom:10px}
.reader.paged .flow{column-fill:auto;height:100%}
/* A column break in the middle of a heading strands it at the foot of a page. */
.reader.paged .law-article-head,.reader.paged .law-section h4,.reader.paged .law-section .cite{break-after:avoid;break-inside:avoid}
.reader.paged .law-section{break-inside:auto}
.turner{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 0 16px;border-top:1px solid var(--glass-edge);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.turner[hidden]{display:none}

.lawbook,.law-article{display:flex;flex-direction:column;gap:26px}
.law-article + .law-article{margin-top:30px}
.law-article-head{margin:0 0 2px;padding-bottom:10px;border-bottom:1px solid var(--gold-dim);font-size:15px;letter-spacing:.06em;color:var(--gold)}
.law-section{scroll-margin-top:110px;outline:0;border-radius:var(--radius-sm);transition:background .5s var(--ease)}
.law-section .cite{display:flex;align-items:center;gap:7px;margin:0 0 3px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.law-section h4{margin:0 0 9px;font-size:20px;line-height:1.25;color:var(--ivory)}
.law-body{margin:0;max-width:66ch;white-space:pre-wrap;font-size:var(--read-size,18px);line-height:1.78;color:var(--text);letter-spacing:.004em;text-wrap:pretty}
.law-section.lit{background:rgba(226,179,79,.12)}
.flagged svg,.flag-btn svg{width:13px;height:13px}
.flagged{color:var(--gold-light);display:inline-flex}
.flag-btn{margin-left:auto;display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted-3);cursor:pointer}
.flag-btn:hover{color:var(--gold);background:var(--glass)}

/* A brother's own marks. Four colours, legible in ink and on paper, and never so strong that the
   words underneath stop being the point. */
.hl{background:rgba(226,179,79,.26);color:inherit;border-radius:3px;padding:.06em .1em;cursor:pointer;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl.gold{background:rgba(226,179,79,.28)}
.hl.green{background:rgba(79,179,122,.26)}
.hl.blue{background:rgba(127,167,217,.26)}
.hl.rose{background:rgba(210,87,79,.24)}
.hl:hover{filter:brightness(1.12)}
.marked{margin:0 0 16px;padding:12px 16px;border-left:3px solid var(--gold);background:var(--glass);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:15px;line-height:1.7;color:var(--text)}
.swatch{width:30px;height:30px;padding:0;border:2px solid transparent;border-radius:50%;cursor:pointer;background:rgba(226,179,79,.5)}
.swatch.green{background:rgba(79,179,122,.55)}.swatch.blue{background:rgba(127,167,217,.55)}.swatch.rose{background:rgba(210,87,79,.5)}
.swatch.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(226,179,79,.28)}

/* What appears over a passage a brother has just selected. */
.sel-tools{position:absolute;z-index:60;display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:999px;background:var(--pane);border:1px solid var(--pane-edge);box-shadow:var(--depth-lift)}
.sel-tools[hidden]{display:none}

.toc{display:flex;flex-direction:column;gap:18px;max-height:min(66vh,620px);overflow:auto}
.toc-group{display:flex;flex-direction:column;gap:1px}
.toc-row{display:flex;align-items:baseline;gap:10px;width:100%;padding:9px 11px;border:0;border-radius:10px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.toc-row:hover{background:var(--glass)}
.toc-cite{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);min-width:9ch}
.toc-head{flex:1;font-size:14px}
.toc-row svg{width:13px;height:13px;color:var(--gold-light)}
.item .cite{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

@media (max-width:700px){
  .ask-bar{min-height:52px;padding:0 14px}
  .ask-bar input{font-size:16px}   /* 16px or iOS zooms the page when the box is tapped */
  .reader-bar{padding:10px 14px;gap:8px}
  .hide-narrow{display:none}
  .surface{padding:20px 16px 24px}
  .law-body{font-size:var(--read-size,17px);line-height:1.75}
  .law-section h4{font-size:18px}
  .toc-cite{min-width:0;display:block}
  .toc-row{flex-direction:column;gap:2px}
}

/* ---- putting the House on a phone ----
   The invitation on The House is a strip rather than a card, so it reads as an aside to the room
   instead of another tile competing with the chapter's own figures; the full account in My Chapter
   is an ordinary card. The steps are numbered because on an iPhone they are the whole mechanism. */
.invite{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;margin-bottom:var(--gap);border-radius:var(--radius-sm);background:linear-gradient(160deg,var(--glass-strong),var(--glass-2));border:1px solid var(--glass-edge);box-shadow:var(--glass-lit)}
.invite-mark{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--gold-dim);color:var(--gold)}
.invite-mark svg{width:18px;height:18px}
.invite-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.invite-body strong{color:var(--ivory);font-size:14.5px}
.invite-body > span{font-size:13px;color:var(--muted-2)}
.invite .btn-go{margin-top:10px}
.steps{display:flex;flex-direction:column;gap:10px;margin:12px 0 0;padding:0;counter-reset:step;list-style:none}
.steps li{position:relative;display:flex;flex-direction:column;gap:1px;padding-left:34px;counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold-dim);color:var(--gold);font-family:var(--serif);font-size:13px}
.steps strong{color:var(--ivory);font-size:14px}
.steps span{font-size:12.5px;color:var(--muted-2)}

/* The three ways a photograph reaches the album, side by side, so nobody has to be told twice. */
.intake-way{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--radius-sm);background:linear-gradient(160deg,var(--glass),transparent);border:1px solid var(--glass-edge);box-shadow:var(--glass-lit)}
.intake-way .ring{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(226,179,79,.34);background:radial-gradient(circle at 30% 25%,rgba(226,179,79,.24),transparent 70%);color:var(--gold-light)}
.intake-way .ring svg{width:18px;height:18px}
.intake-way strong{display:block;margin-bottom:3px}
.intake-way .btn{margin-top:8px}

/* A recording in progress needs to be unmistakable from across a room. */
.rec-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:baseline;animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(210,87,79,.55)}50%{opacity:.55;box-shadow:0 0 0 7px rgba(210,87,79,0)}}

@media (max-width:700px){
  .mosaic{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px}
  .lightbox img{max-height:52vh}
}

/* ---- daylight ----
   The same chapter colours read on paper rather than in ink: warm ivory ground, ink text, and
   the gold darkened until it carries its weight against a light field. Nothing below changes a
   rule — only the tokens every rule already draws from, so the two themes cannot drift apart.

   `[data-theme]` is set by js/theme.js before the page paints, always — which is why this block
   is gated on the attribute alone and appears once. Paper is what `auto` resolves to. */
:root[data-theme="light"]{
  --tint:22,16,7; --shade:74,54,22;
  --page:#F2EBDD;
  --ambient:
    radial-gradient(60% 45% at 12% -8%, rgba(201,162,39,.20), transparent 70%),
    radial-gradient(45% 38% at 92% 4%, rgba(183,121,33,.13), transparent 72%),
    radial-gradient(70% 55% at 50% 108%, rgba(160,120,50,.10), transparent 70%),
    linear-gradient(180deg,#FAF5EA 0%,#F2EBDD 48%,#EAE0CD 100%);
  --pane:linear-gradient(165deg,rgba(253,250,244,.97),rgba(243,236,222,.99));
  --pane-edge:rgba(138,94,18,.28);
  --bar:rgba(250,245,234,.94);
  --toast-bg:linear-gradient(160deg,rgba(255,253,248,.97),rgba(246,240,229,.98));
  --avatar-bg:linear-gradient(145deg,rgba(226,179,79,.42),rgba(138,94,18,.16));
  --scrim:rgba(38,28,12,.44);

  --ink:#F6F0E4; --ink-2:#F2EBDD; --ink-3:#EDE4D3; --panel:#FDFAF4; --panel-2:#F3ECDE;
  /* Old gold is a light colour; on paper it needs darkening to stay readable as text. The
     lighter tones stay bright because they are only ever used as fills behind dark text. */
  /* --gold-light is emphasis lettering, not a highlight, so on paper it is the darkest of the
     three rather than the lightest. */
  /* #8A5E12 measured 4.05–4.46:1 as lettering on the light theme's own cards — under 4.5
     everywhere it is used for an eyebrow, a rule or a role. Two steps darker clears it without
     changing what the colour is. */
  --gold:#7C5310; --gold-deep:#6F4A0C; --gold-light:#6F4A0C; --gold-2:#6E4A0E;
  --gold-dim:rgba(176,138,42,.22); --gold-line:rgba(176,138,42,.34);
  /* Leaf is decoration, so on paper it stays gold rather than going brown like the lettering. */
  --leaf:#B08A2A; --leaf-hair:rgba(176,138,42,.34);
  --ivory:#14110C; --cream:#1F1A12; --text:#1F1A12; --muted:#3C3328; --muted-2:#564B3C; --muted-3:#6C6052;
  --green:#2F6B45; --red:#9E3A31; --amber:#8C6011; --blue:#2F5C8C;
  --tone-green:#1F5735; --tone-red:#8A2F27; --tone-amber:#6E4A08; --tone-blue:#234A73;
  /* Gold leaf carries dark lettering on ink and light lettering on paper, so both the fill and
     what sits on it flip together. */
  --gold-fill:linear-gradient(135deg,#9A6B16,#7A5210); --on-gold:#FFFBF2;
  --solid:linear-gradient(165deg,#241E15,#12100B); --on-solid:#F7F1E4;
  --rail:linear-gradient(180deg,rgba(252,248,239,.90),rgba(242,235,221,.94));
  --header:rgba(249,244,234,.74);

  --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.40); --glass-strong:rgba(255,255,255,.82);
  --glass-edge:rgba(74,54,22,.14); --glass-lit:inset 0 1px 0 rgba(255,255,255,.75);
  --depth:0 1px 2px rgba(74,54,22,.07), 0 10px 28px rgba(74,54,22,.09);
  --depth-lift:0 2px 6px rgba(74,54,22,.10), 0 22px 52px rgba(74,54,22,.16);
  --shadow:0 16px 42px rgba(74,54,22,.14);
}
/* A few surfaces are built from a gradient rather than a token, and read backwards on paper. */
:root[data-theme="light"] .card{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.34))}
:root[data-theme="light"] .kpi{background:linear-gradient(160deg,rgba(255,255,255,.70),rgba(255,255,255,.30))}
:root[data-theme="light"] .kpi:hover{background:linear-gradient(160deg,#fff,rgba(255,255,255,.45))}
:root[data-theme="light"] .btn:not(.btn-primary){background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.38))}
:root[data-theme="light"] .btn:not(.btn-primary):hover{background:linear-gradient(160deg,#fff,rgba(255,255,255,.52))}
:root[data-theme="light"] .btn-ghost{background:none}
:root[data-theme="light"] .btn-ghost:hover{background:rgba(74,54,22,.06)}
:root[data-theme="light"] .month-grid .day.today{background:linear-gradient(160deg,rgba(226,179,79,.24),rgba(255,255,255,.45))}
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .input{background:rgba(255,255,255,.80)}
:root[data-theme="light"] .field input:focus,
:root[data-theme="light"] .field select:focus,
:root[data-theme="light"] .field textarea:focus,
:root[data-theme="light"] .input:focus{background:#fff}
:root[data-theme="light"] .status-pill{background:rgba(255,255,255,.62)}
:root[data-theme="light"] .ev{background:rgba(226,179,79,.26);color:var(--ivory)}
:root[data-theme="light"] .ev:hover{background:rgba(226,179,79,.40)}
:root[data-theme="light"] .month-grid .ev.EXECUTIVE_BOARD{border-left-color:#8A5E12}
:root[data-theme="light"] .badge.slate{background:rgba(74,54,22,.07);border-color:rgba(74,54,22,.16)}
:root[data-theme="light"] .seal{background:rgba(226,179,79,.16)}
:root[data-theme="light"] .notice{background:rgba(226,179,79,.14);color:var(--text)}
:root[data-theme="light"] .notice.warn{background:rgba(226,162,63,.18)}
:root[data-theme="light"] .notice.danger{background:rgba(210,87,79,.13)}
:root[data-theme="light"] .notice.success{background:rgba(79,179,122,.16)}
:root[data-theme="light"] .toast{color:var(--text)}
:root[data-theme="light"] .sidebar .brand img,
:root[data-theme="light"] .boot img{filter:none}
:root[data-theme="light"] ::selection{background:rgba(138,94,18,.22)}

/* ---- the order of business ----
   Numbered by the browser rather than by hand, so an item moved between sections renumbers
   itself and nobody has to keep a list in their head. */
.order{list-style:none;counter-reset:sec;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.order-section{counter-increment:sec;padding:14px 0 6px;border-top:1px solid var(--glass-edge)}
.order-section:first-child{border-top:0;padding-top:0}
.order-section h4{display:flex;align-items:baseline;gap:10px;font-family:var(--serif);font-size:17px;color:var(--gold-light)}
.order-section h4::before{content:counter(sec) ".";font-family:var(--mono);font-size:12px;color:var(--gold);flex:none;min-width:1.6em}
.order-section > .small{margin:2px 0 8px 1.6em;color:var(--muted-3)}
.order-section .list{margin-left:1.6em}

/* ---- The House ----
   The chapter's front door. A photograph under everything, the chapter's colours where the album
   has nothing to give, and gold only where it means something. */
.house{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.house-main{display:flex;flex-direction:column;gap:18px;min-width:0}

/* Any panel that carries a picture: the picture, then a scrim, then the words. */
.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
/* Photographs arrive from many phones in many lights. A grade pulls every one toward the same
   warm register — desaturated a touch, warmed a touch — so the home screen reads as one thing. */
img.plate{filter:saturate(.72) sepia(.2) contrast(1.06) brightness(.9)}
.scrim::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(226,179,79,.26),rgba(9,8,7,0) 48%,rgba(90,60,16,.34));mix-blend-mode:soft-light;pointer-events:none}
.plate-ink{background:linear-gradient(150deg,#1b1611 0%,#0c0a08 60%,#161009 100%)}
.plate-dusk{background:linear-gradient(170deg,#1d2740 0%,#3a2f3e 44%,#6b4a2c 74%,#2a1d12 100%)}
.plate-gold{background:linear-gradient(145deg,#4a3312 0%,#a5762a 48%,#2a1d10 100%)}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,5,4,.88) 0%,rgba(6,5,4,.62) 42%,rgba(6,5,4,.34) 100%)}

.hero{position:relative;overflow:hidden;background:var(--mat);border-radius:var(--radius);min-height:390px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:center;gap:24px;padding:44px 40px;border:1px solid var(--glass-edge);box-shadow:var(--depth-lift)}
.hero-words{position:relative;z-index:1;max-width:30ch}
.hero-words .eyebrow{color:var(--on-mat-gold);font-size:11px;letter-spacing:.24em}
.hero-words h1{font-family:var(--serif);font-weight:700;letter-spacing:-.022em;font-size:clamp(42px,5vw,70px);line-height:.92;color:#fbf6ec;margin:4px 0 0;letter-spacing:-.015em}
.gold-rule{width:64px;height:2px;background:var(--leaf);margin:18px 0 14px;border-radius:2px;transform-origin:left center}
.hero .gold-rule{animation:draw .9s var(--ease) .3s both}
@keyframes draw{from{scale:0 1}to{scale:1 1}}
/* The hero photograph drifts the way a still does on a good screen: barely, and forever. */
.hero img.plate,.hero .plate{animation:drift 34s ease-in-out infinite alternate}
@keyframes drift{from{scale:1}to{scale:1.07}}
/* The doors, the legacy and the rail rise into place as they enter the viewport — scrubbed by
   the scroll, no script. `translate` rather than `transform`, so the hover lift still works. */
@supports (animation-timeline: view()){
  .door,.mark,.rail .card,.legacy,.standing{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 32%}
}
@keyframes rise{from{opacity:.001;translate:0 22px}to{opacity:1;translate:0 0}}
.next .go svg{transition:translate .22s var(--ease)}
.next:hover .go svg{translate:3px 0}
.matters svg:last-child{transition:translate .22s var(--ease)}
.matters:hover svg:last-child{translate:3px 0}
.hero-words .lede{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(18px,1.95vw,24px);color:#f0e6d6;text-wrap:balance}
.hero-words .motto{margin-top:20px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--on-mat-2);line-height:1.8}

/* ---- the roll, called at the top of a meeting ----
   Two taps per brother and nothing else on the row, because this is used standing up, in a room,
   while men are still arriving. The three states are told apart by shape as well as by colour:
   present is filled, absent is hollow, and not-yet-called is neither. */
.roll-card .roll-count{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding:12px 0 4px;font-size:13px;color:var(--muted-2)}
.roll-card .roll-count strong{font-family:var(--serif);font-size:20px;color:var(--text);margin-right:4px}
.roll-card .roll-count .unmarked strong{color:var(--gold)}
.roll-card .roll-count .need{margin-left:auto;font-size:12px;letter-spacing:.04em}
.roll-sheet{margin-top:10px;border-top:1px solid var(--glass-edge)}
.roll-man{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid var(--glass-edge)}
.roll-man:last-child{border-bottom:0}
.roll-man .who{min-width:0;font-size:14.5px;color:var(--text)}
.roll-man .who .small{color:var(--muted-2)}
.roll-man.unmarked .who{color:var(--muted)}
.roll-man.absent .who{color:var(--muted-2)}
.roll-man .mark{display:flex;gap:6px;flex:none}
/* Forty-four pixels: this is tapped with a thumb, in a room, by a man who is also talking. */
.pipbtn{width:44px;height:36px;display:grid;place-items:center;border-radius:9px;cursor:pointer;
  border:1px solid var(--glass-edge);background:transparent;color:var(--muted-2);
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.pipbtn svg{width:17px;height:17px}
.pipbtn:hover{border-color:var(--gold-dim);color:var(--text)}
.pipbtn.on{background:rgba(79,179,122,.20);border-color:rgba(79,179,122,.52);color:var(--green)}
.pipbtn.off{background:rgba(226,179,79,.10);border-color:var(--gold-dim);color:var(--muted)}
.pipbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:700px){
  .roll-card .roll-count .need{margin-left:0;width:100%}
  .roll-man{padding:11px 2px}
}
@media (prefers-reduced-motion:reduce){ .pipbtn{transition:none} }

/* ---- taking your own file with you ----
   Quiet by design. This is not a feature to be sold; it is the chapter keeping its side of the
   statement a brother agreed to when he filled the Directory in, and it should read like a
   filing cabinet rather than like an offer. */
.take-file h3{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:-.01em}
.file-list{margin-top:14px;padding-top:12px;border-top:1px solid var(--glass-edge)}
.file-list .row{padding:5px 0}
.file-list .mono{font-size:13px;color:var(--gold)}
.file-list .mono.none{color:var(--muted-2);font-weight:500}
.file-list p{color:var(--muted)}
.file-list p strong{color:var(--text)}

/* ---- the chapter's own day, in the hero's own words column ----
   The sky marks it without speaking; this is the sentence, and the door. It sits inside the
   hero's thirty-character measure on purpose — the words are prose and belong to the same column
   as the greeting — so the type is sized to fit that measure rather than to break out of it.
   The colours are the non-flipping mat tokens, because the hero keeps its own photograph under
   this block in both themes and a token that flipped would read as paper over a night picture. */
.hero-words .chapter-day{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 11px;align-items:start;
  margin:18px 0 0;padding:11px 13px 10px;border-radius:12px;
  border:1px solid rgba(226,179,79,.30);border-left:3px solid var(--on-mat-gold);
  background:linear-gradient(104deg,rgba(226,179,79,.17),rgba(10,9,7,.40));
  text-decoration:none;color:inherit;
  transition:border-color .2s var(--ease),transform .2s var(--ease),background .2s var(--ease)}
.hero-words .chapter-day:hover{border-color:rgba(226,179,79,.58);transform:translateY(-1px)}
.hero-words .cd-mark{grid-row:1/span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(226,179,79,.20);color:var(--on-mat-gold)}
.hero-words .cd-mark svg{width:15px;height:15px}
.hero-words .cd-words{display:flex;flex-direction:column;gap:2px;min-width:0}
.hero-words .cd-words strong{font-family:var(--serif);font-weight:600;font-size:15.5px;line-height:1.25;color:#fbf6ec;letter-spacing:-.008em;text-wrap:balance}
.hero-words .cd-note{font-size:12px;line-height:1.45;color:var(--on-mat-2);text-wrap:balance}
.hero-words .cd-go{grid-column:2;display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:10px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--on-mat-gold)}
.hero-words .cd-go svg{width:12px;height:12px;transition:transform .2s var(--ease)}
.hero-words .chapter-day:hover .cd-go svg{transform:translateX(3px)}
/* Installation day carries the warmer edge of the two, the way the sky behind it does. */
.hero-words .chapter-day[data-day="installation"]{border-color:rgba(226,179,79,.44);background:linear-gradient(104deg,rgba(226,179,79,.24),rgba(10,9,7,.40))}
@media (prefers-reduced-motion:reduce){
  .hero-words .chapter-day,.hero-words .cd-go svg{transition:none}
  .hero-words .chapter-day:hover{transform:none}
  .hero-words .chapter-day:hover .cd-go svg{transform:none}
}

.hero-card{position:relative;z-index:1;padding:20px;border-radius:var(--radius-sm);background:rgba(14,11,8,.84);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(247,240,228,.16);box-shadow:var(--depth)}
.hero-card .eyebrow{color:#f3ead9;letter-spacing:.18em}
.hero-card .quiet{font-size:12px;font-weight:700;color:#f3ead9;display:inline-flex;align-items:center;gap:6px}
.hero-card .quiet svg{width:14px;height:14px}
.hero-card .quiet:hover{color:var(--on-mat-gold)}
.next{display:flex;align-items:center;gap:18px;margin-top:14px;padding:14px 4px 18px;border-bottom:1px solid rgba(247,240,228,.16);color:#f7f0e4}
.next:hover{color:#fff}
.next .stamp{flex:none;text-align:center;line-height:1}
.next .stamp span{display:block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--on-mat-gold)}
.next .stamp b{display:block;font-family:var(--serif);font-weight:700;font-size:44px;margin-top:2px;color:#fbf6ec}
.next .what{flex:1;min-width:0}
.next .what h3{font-family:var(--serif);font-size:24px;color:#fbf6ec;line-height:1.16;text-wrap:balance}
.next .meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-family:var(--mono);font-size:11.5px;color:var(--on-mat-2)}
.next .meta svg{width:14px;height:14px;color:var(--on-mat-gold)}
.next .go{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--gold-fill);color:var(--on-gold);box-shadow:0 6px 18px rgba(0,0,0,.36)}
.next .go svg{width:20px;height:20px}
.next.empty-next{color:var(--on-mat-2)}
.matters{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px 4px 2px;border:0;background:none;font:inherit;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--on-mat-gold);cursor:pointer;text-align:left}
.matters[aria-expanded="true"] svg:last-child{rotate:90deg}
.matter-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.matter-list[hidden]{display:none}
.matter-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:10px;font-size:13px;color:var(--on-mat);background:rgba(247,240,228,.06)}
.matter-list a:hover{background:rgba(247,240,228,.12);color:#fff}
.matter-list a svg{width:14px;height:14px;color:var(--on-mat-gold);flex:none}
.matters .ct{display:inline-flex;align-items:center;gap:9px}
.matters svg{width:15px;height:15px}
.matters:hover{color:#fff}
/* The gold rule is drawn on a photograph too, so it keeps the bright gold in both themes. */
.hero .gold-rule,.purpose .gold-rule{background:var(--on-mat-gold)}
.matters.settled{color:var(--on-mat-2)}
.live{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;background:var(--gold-fill);color:var(--on-gold);font-size:13px;font-weight:700}
.live svg{width:16px;height:16px}

/* A brother's own standing, kept in front of him rather than filed two screens away. */
.standing{display:flex;flex-wrap:wrap;gap:10px}
.standing .pill{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-lit)}
.standing .lbl{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.standing .small{color:var(--muted)}
.standing .roll strong{color:var(--gold-light);font-family:var(--serif);font-size:16px}

/* The four doors. */
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.door{position:relative;overflow:hidden;min-width:0;background:var(--mat);border-radius:var(--radius-sm);min-height:306px;display:flex;align-items:flex-end;border:1px solid var(--glass-edge);box-shadow:var(--depth);color:var(--text);transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.door .scrim{background:linear-gradient(180deg,rgba(6,5,4,.20) 0%,rgba(6,5,4,.72) 52%,rgba(6,5,4,.94) 100%)}
.door:hover,.door:focus-visible{transform:translateY(-3px);box-shadow:var(--depth-lift);color:var(--text)}
.door-words{position:relative;z-index:1;padding:16px;width:100%;min-width:0}
.door-words .eyebrow{color:var(--on-mat-gold);font-size:10px;letter-spacing:.2em}
.door-words h3{font-family:var(--serif);font-size:23px;line-height:1.14;color:#fbf6ec;margin:8px 0 6px;text-wrap:balance}
.door-words .line{font-size:12.5px;color:var(--on-mat-2);margin-bottom:14px}
.door-cta{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:8px 12px;border-radius:999px;border:1px solid rgba(247,240,228,.42);background:rgba(10,8,6,.34);color:#fbf6ec;font-size:9.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.door-cta svg{width:14px;height:14px}
.door:hover .door-cta,.door:focus-visible .door-cta{border-color:var(--on-mat-gold);color:var(--on-mat-gold);background:rgba(10,8,6,.5)}

/* The chapter's own history, walked with a finger or the arrow. */
.legacy{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:center;padding:20px 22px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-lit)}
.legacy-head h3{font-family:var(--serif);font-size:30px;line-height:1.08;margin-top:6px}
.legacy-head .gold-rule{margin:14px 0 0}
.track{display:flex;gap:18px;overflow-x:auto;padding:4px 58px 4px 0;scrollbar-width:none;scroll-snap-type:x proximity}
.track::-webkit-scrollbar{display:none}
.mark{flex:none;width:112px;display:flex;flex-direction:column;align-items:center;gap:0;color:var(--muted);scroll-snap-align:start}
.mark .plate{position:relative;width:112px;height:64px;border-radius:8px;border:1px solid var(--gold-dim)}
.mark .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);margin:10px 0 8px;box-shadow:0 0 0 3px rgba(226,179,79,.2)}
.mark .year{font-family:var(--serif);font-size:19px;color:var(--text)}
.mark .what{font-size:11px;color:var(--muted-2);text-align:center;line-height:1.35}
.mark:hover{color:var(--text)}
.mark:hover .plate{border-color:var(--gold)}
.scroller{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--gold-dim);background:var(--pane);color:var(--gold-light);cursor:pointer}
.scroller:hover{border-color:var(--gold)}
.scroller svg{width:17px;height:17px}

/* The rail. */
.rail{display:flex;flex-direction:column;gap:14px;min-width:0}
.rail .card{padding:16px}
.rail .card-head{margin-bottom:10px}
.purpose,.serve,
:root[data-theme="light"] .purpose,
:root[data-theme="light"] .serve{position:relative;overflow:hidden;min-height:172px;display:flex;align-items:flex-end;padding:0;background:var(--mat);border:1px solid var(--glass-edge)}
.serve .scrim{background:linear-gradient(180deg,rgba(6,5,4,.46) 0%,rgba(6,5,4,.88) 100%)}
.purpose .scrim{background:linear-gradient(180deg,rgba(6,5,4,.86) 0%,rgba(6,5,4,.62) 62%,rgba(6,5,4,.84) 100%)}
.purpose-words,.serve-words{position:relative;z-index:1;padding:18px}
.purpose-words .eyebrow{color:var(--on-mat);font-size:12px;letter-spacing:.16em;line-height:1.7}
.purpose-words .gold-rule{margin:12px 0 10px}
.purpose-words .line,.serve-words .line{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-mat-2);line-height:1.7}
.serve-words .eyebrow{color:var(--on-mat-gold)}
.serve-words .btn{margin-top:12px}
.thread{list-style:none;margin:0;padding:0 0 0 20px;border-left:1px solid var(--gold-dim);display:flex;flex-direction:column;gap:14px}
.thread li{position:relative}
.thread li::before{content:"";position:absolute;left:-24px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(226,179,79,.18)}
.thread a{display:flex;flex-direction:column;gap:2px;color:var(--text)}
.thread .when{width:auto;display:inline-block;padding:4px 10px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);align-self:flex-start}
.thread .what strong{display:block;font-size:13.5px}
.thread .what .small{color:var(--muted-2)}
.thread a:hover .what strong{color:var(--gold-light)}
.update{display:flex;align-items:flex-start;gap:11px;color:var(--text)}
.update .avatar{flex:none}
.update .body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.update .body strong{font-size:13.5px}
.update .excerpt{color:var(--muted-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.update > svg{flex:none;width:16px;height:16px;color:var(--gold);margin-top:4px}
.update:hover{color:var(--gold-light)}

@media (max-width:1460px){
  .house{grid-template-columns:minmax(0,1fr) 284px}
  .doors{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1180px){
  .house{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr;min-height:0}
  .rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .topbar{padding:12px 16px;gap:10px}
  .topbar .datestamp,.topbar .who .name,.topbar .who .role{display:none}
  .search{flex:1}
  .view{padding:16px 16px 24px}
  .colophon{flex-direction:column;gap:16px;padding:20px 16px 110px;text-align:center}
  .colophon nav{justify-content:center;gap:14px}
  .colophon .est{align-items:center;text-align:center}
  .hero{padding:26px 20px;min-height:0}
  .hero-words h1{font-size:44px}
  .doors{grid-template-columns:1fr}
  .door{min-height:230px}
  .legacy{grid-template-columns:1fr;padding:18px}
  .scroller{display:none}
  .track{padding-right:0}
  .rail{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.door:hover,.door:focus-visible{transform:none}}


/* ---- The House, first paint ----
   The shape of the screen appears at once; the figures fill it a moment later. */
.house.skeleton{pointer-events:none}
.sk{position:relative;overflow:hidden;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--glass-edge)}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 20%,rgba(var(--tint),.06) 50%,transparent 80%);translate:-100% 0;animation:shimmer 1.5s ease-in-out infinite}
@keyframes shimmer{to{translate:100% 0}}
.sk-hero{min-height:390px;border-radius:var(--radius)}
.sk-row{display:flex;gap:10px}.sk-row .sk{height:42px;flex:1;border-radius:999px}
.sk-doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.sk-doors .sk{min-height:306px}
.sk-rail .sk{min-height:150px}
@media (max-width:1460px){.sk-doors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.sk-doors{grid-template-columns:1fr}.sk-doors .sk{min-height:230px}}

/* ---- the treasury pulse ----
   One figure, its direction, and six months in a line. Text wears text tokens; only the line
   and its end-dot wear the gold. */
.pulse-figure{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 10px}
.pulse-figure .value{font-family:var(--sans);font-weight:600;font-size:26px;letter-spacing:-.01em;color:var(--ivory)}
.pulse-figure .delta{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.pulse-figure .delta.up{color:var(--tone-green)}.pulse-figure .delta.down{color:var(--tone-red)}
.spark{position:relative;margin:0 -4px}
.spark svg{display:block;width:100%;height:auto;overflow:visible}
.spark .base{stroke:rgba(var(--tint),.16);stroke-width:1}
.spark .area{fill:var(--gold);fill-opacity:.1}
.spark .line{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark .end{fill:var(--gold);stroke:var(--page);stroke-width:2}
.spark .hair{stroke:rgba(var(--tint),.35);stroke-width:1;opacity:0;transition:opacity .15s}
.spark .hit{fill:transparent;cursor:crosshair;outline:none}
.spark .hit:focus-visible ~ .hair,.spark.on .hair{opacity:1}
.spark-tip{position:absolute;top:-4px;translate:-50% -100%;padding:6px 9px;border-radius:8px;background:var(--pane);border:1px solid var(--pane-edge);box-shadow:var(--depth);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;font-size:12px;color:var(--muted-2)}
.spark-tip strong{display:block;font-family:var(--mono);font-size:13px;color:var(--ivory)}
.spark-tip::before{content:"";display:inline-block;width:10px;height:2px;background:var(--gold);vertical-align:middle;margin-right:6px}
.spark-tip.on{opacity:1}
.spark-months{margin-top:8px}
.spark-months summary{cursor:pointer;font-size:11.5px;color:var(--muted-2);list-style:none}
.spark-months summary::-webkit-details-marker{display:none}
.spark-months summary::before{content:"+ ";color:var(--gold)}
.spark-months[open] summary::before{content:"– "}
.spark-months table{width:100%;margin-top:8px;border-collapse:collapse;font-size:12px}
.spark-months td{padding:5px 0;border-top:1px solid rgba(var(--tint),.07);color:var(--muted)}
.spark-months td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}

@media (prefers-reduced-motion:reduce){
  .hero img.plate,.hero .plate,.hero .gold-rule,.sk::after{animation:none}
  .door,.mark,.rail .card,.legacy,.standing{animation:none;opacity:1;translate:none}
  .hero .gold-rule{scale:1 1}
}

/* ---- the wire from the General Office ----
   What the Fraternity has announced, on a screen of its own and in a panel on The House. The
   bulletins are the national office's words, not the chapter's, so they are set as news rather
   than as chapter furniture: a lead with its photograph, then a grid that reads down the page.
   The pictures come from this origin — the portal fetched and converted them — which is why an
   ordinary <img> works here under a content policy that allows nothing remote. */
.wire{display:flex;flex-direction:column;gap:var(--gap)}
.wire-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap);flex-wrap:wrap}
.wire-head h2{margin:2px 0 4px}
.wire-head .actions{display:flex;gap:8px;flex-wrap:wrap}
.wire-new{color:var(--gold-light)}
.wire-warn{display:flex;align-items:flex-start;gap:9px;margin:0;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid rgba(226,162,63,.45);background:rgba(226,162,63,.08);font-size:13px;color:var(--muted)}
.wire-warn svg{width:15px;height:15px;flex:none;color:var(--amber);margin-top:2px}
.wire-topics{display:flex;flex-wrap:wrap;gap:8px}
.wire-topics .chip{text-decoration:none}
.wire-topics .chip.on{border-color:var(--gold);color:var(--ivory);background:rgba(226,179,79,.12)}
.wire-topics .chip span{font-family:var(--mono);font-size:11px;color:var(--muted-3)}
.wire-topics .chip.on span{color:var(--gold-2)}

/* One bulletin in the grid reads as a news card — picture above, words below — because three of
   them side by side leave a column too narrow for a headline to sit in. Only the lead is set
   across, where there is the width to carry it. */
.bull{position:relative;display:grid;grid-template-columns:1fr;gap:var(--stack);align-content:start;
  background:linear-gradient(180deg,rgba(var(--tint),.035),rgba(var(--tint),.012));
  border:1px solid var(--gold-dim);border-radius:var(--radius);padding:var(--pad);box-shadow:var(--shadow)}
.bull-lead{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:calc(var(--pad) * 1.4)}
.bull-lead.bull-plain{grid-template-columns:1fr}
.bull-plate{display:block;border-radius:var(--radius-sm);overflow:hidden;background:rgba(var(--shade),.25);border:1px solid var(--glass-edge)}
.bull-plate img{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;transition:scale .5s var(--ease)}
.bull-plate:hover img{scale:1.03}
.bull-lead .bull-plate img{aspect-ratio:16/10}
.bull-body{min-width:0;display:flex;flex-direction:column;gap:9px}
.bull-tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0}
.bull-when{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
.bull h3{margin:0;font-size:19px;line-height:1.28}
.bull-lead h3{font-size:clamp(23px,2.3vw,30px);line-height:1.18}
.bull h3 a{color:var(--ivory);text-decoration:none}
.bull h3 a:hover{color:var(--gold-light)}
.bull-sum{margin:0;font-size:14px;line-height:1.62;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.bull-lead .bull-sum{-webkit-line-clamp:5;line-clamp:5;font-size:15px}
.bull-foot{display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 0}
.bull-foot .quiet{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.bull-foot svg{width:14px;height:14px}
.wire-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--gap)}
.wire-from{margin:4px 0 0;font-size:11.5px;color:var(--muted-2)}
.wire-from a{color:var(--muted-2)}

/* The panel on The House: three headlines, small enough to sit under the weather. */
.wire-card .card-head{align-items:flex-start;gap:10px}
.wire-card .card-head h3{margin:2px 0 0}
.wire-card .card-head .quiet{flex:none;white-space:nowrap}
.wire-count{margin:8px 0 0;font-size:12.5px;color:var(--muted-2)}
.wire-mini{display:flex;flex-direction:column}
.wire-row{display:flex;align-items:center;gap:12px;padding:11px 0;text-decoration:none;min-width:0}
.wire-row + .wire-row{border-top:1px solid rgba(var(--tint),.06)}
.wire-row img,.wire-mark{flex:none;width:52px;height:52px;border-radius:var(--radius-sm);object-fit:cover}
.wire-mark{display:grid;place-items:center;background:var(--gold-dim);color:var(--gold-light)}
.wire-mark svg{width:22px;height:22px}
.wire-row .body{display:flex;flex-direction:column;gap:3px;min-width:0}
.wire-row .title{font-size:13.5px;line-height:1.4;color:var(--text);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.wire-row:hover .title{color:var(--ivory)}
.wire-row .meta{font-size:11.5px;color:var(--muted-2)}

/* A tablet drops the lead to one column before the headline starts wrapping to four lines;
   a phone gives every bulletin the full width and keeps the picture above the words. */
@media (max-width:1180px){ .wire-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} }
/* A tablet gives the lead its own column before the headline starts wrapping every other word;
   below that the grid is one card wide and every bulletin reads the same way. */
@media (max-width:960px){
  .bull-lead,.bull-lead.bull-plain{grid-template-columns:1fr;gap:var(--gap)}
  .wire-grid{grid-template-columns:1fr}
  .wire-head{align-items:flex-start}
  .bull-lead .bull-plate img{aspect-ratio:16/9}
}
@media (max-width:700px){
  .bull-plate img,.bull-lead .bull-plate img{aspect-ratio:16/9}
  .bull h3{font-size:17.5px}
  .bull-lead h3{font-size:21px}
  .wire-head .actions{width:100%}
  .wire-head .actions .btn{flex:1}
}

/* ================================================================= the sky over The House
   The chapter's valley, photographed through the four seasons, hung behind the front door and
   fixed: the tiles scroll, the sky does not. Only The House has one — the ledger, the roll and
   the reader are work, and work wants a quiet surface — so every rule here is gated on
   [data-house="on"], which the dashboard sets on arrival and the router clears on the way out.

   FIVE THINGS DECIDE WHAT IT LOOKS LIKE and only one of them is the file: the season picks the
   photograph, and then the theme, the hour, Tacoma's weather and how far a brother has scrolled
   all grade it. Baking any of those in would mean a file per combination — four seasons times two
   themes times four hours is already thirty-two. So each of them owns its own layer here and they
   compose, rather than each rewriting the last one's work.

   NOT `background-attachment: fixed`. iOS Safari has never honoured it, and on the one device
   most brothers will hold, a backdrop that was promised not to move would scroll away. This is a
   position:fixed layer at a negative z-index instead, which every browser gets right. */

#house-sky{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  /* Twenty-four blurred pixels of the season's own frame, handed over by sky.js as a custom
     property so the season lives in one file rather than in twelve rules here. */
  background:var(--ink) var(--tiny-wide) center/cover no-repeat;
  --veil:9,8,7;                                   /* what the sky is veiled toward */
  --veil-top:.14; --veil-mid:.34; --veil-bottom:.62;
  --vignette:.30;
  --extra-veil:0;                                 /* the hour's own weight, on top of the above */
  --tint:transparent;                             /* the hour's colour */
  --wx-tint:transparent;                          /* Tacoma's, today */
  --day-tint:transparent;                         /* the chapter's, if it is one of its days */
  --img:saturate(.92) contrast(.94) brightness(.86);
  --settle:rgba(9,8,7,.72);                       /* where the page ends up once he has scrolled */
}
#house-sky picture{display:block}
#house-sky img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:var(--img)}
@media (max-width:1180px){#house-sky{background-image:var(--tiny-mid)}}
@media (max-width:820px) and (orientation:portrait){#house-sky{background-image:var(--tiny-tall)}}

/* The scrim, in layers, front to back: the chapter's day, the weather, the hour, the hour's
   weight, a vignette to give the tiles something to sit against, and the vertical wash that
   carries the eye from the sky at the top to the ground at the foot. */
.sky-grade{position:absolute;inset:0;
  background:
    linear-gradient(var(--day-tint),var(--day-tint)),
    linear-gradient(var(--wx-tint),var(--wx-tint)),
    linear-gradient(var(--tint),var(--tint)),
    linear-gradient(rgba(var(--veil),var(--extra-veil)),rgba(var(--veil),var(--extra-veil))),
    radial-gradient(135% 95% at 62% 6%, rgba(var(--veil),0) 0%, rgba(var(--veil),var(--vignette)) 100%),
    linear-gradient(180deg, rgba(var(--veil),var(--veil-top)) 0%, rgba(var(--veil),var(--veil-mid)) 44%, rgba(var(--veil),var(--veil-bottom)) 100%)}
/* Deepening as he scrolls. The photograph carries the top of the screen at full strength; by a
   screen and a quarter down the tiles sit on much firmer material and the tenth one reads as well
   as the first. Driven by --sky-deep, which sky.js sets from the scroll position. */
.sky-grade::after{content:"";position:absolute;inset:0;background:var(--settle);opacity:var(--sky-deep,0)}

/* ---- the four seasons, under ink ----
   The photographs are not equally bright, and treating them as if they were is what makes a
   seasonal backdrop look like a slideshow. Autumn is a dark warm sunset and needs very little.
   Winter and spring are pale enough to glare against a dark interface, so they are carried
   further back. Summer sits between them. */
#house-sky[data-season="autumn"]{--img:saturate(.92) contrast(.94) brightness(.86)}
#house-sky[data-season="winter"]{--img:saturate(.96) contrast(1) brightness(.78);--veil-top:.18;--veil-mid:.36;--veil-bottom:.62;--vignette:.32}
#house-sky[data-season="spring"]{--img:saturate(.96) contrast(.98) brightness(.80);--veil-top:.16;--veil-mid:.34;--veil-bottom:.62}
#house-sky[data-season="summer"]{--img:saturate(.96) contrast(.96) brightness(.76);--veil-top:.16;--veil-mid:.36;--veil-bottom:.62}

/* ---- daylight ----
   The same photographs veiled toward the portal's paper rather than its ink, so dark text on
   light glass keeps its contrast. Winter is the one that has to be handled the other way round:
   it is already a pale photograph, and the veil that saves autumn would turn it to milk. */
:root[data-theme="light"] #house-sky{
  --veil:242,235,221; --veil-top:.30; --veil-mid:.46; --veil-bottom:.68;
  --vignette:.24;
  --img:saturate(.84) contrast(.88) brightness(1.02);
  --settle:rgba(242,235,221,.80);
}
:root[data-theme="light"] #house-sky[data-season="winter"]{--img:saturate(.92) contrast(.96) brightness(.9);--veil-top:.20;--veil-mid:.36;--veil-bottom:.62}
:root[data-theme="light"] #house-sky[data-season="spring"]{--img:saturate(.94) contrast(.94) brightness(.94);--veil-top:.22;--veil-mid:.40;--veil-bottom:.64}
:root[data-theme="light"] #house-sky[data-season="summer"]{--img:saturate(.9) contrast(.92) brightness(.96);--veil-top:.26;--veil-mid:.44;--veil-bottom:.68}

/* ---- the hour ----
   Read from the brother's own clock, so a man in Atlanta sees his evening and not Tacoma's
   afternoon. These add weight and colour rather than replacing the season's grading, which is why
   they are a separate layer: a winter dusk and an autumn dusk are not the same picture. */
#house-sky[data-sky="dawn"]{--tint:rgba(126,96,148,.12);--extra-veil:.04}
#house-sky[data-sky="day"]{--tint:rgba(122,156,196,.10)}
#house-sky[data-sky="dusk"]{--tint:transparent}
#house-sky[data-sky="night"]{--tint:rgba(16,22,52,.26);--extra-veil:.22}
:root[data-theme="light"] #house-sky[data-sky="night"]{--tint:rgba(70,80,120,.14);--extra-veil:.12}

/* ---- Tacoma's own weather ----
   The chapter meets in a city with a reputation, and the portal already reads its sky for the
   panel in the rail. Rain and fog are not a different season, so they do not change the
   photograph — they change the light on it, which is what actually makes the room feel live. */
#house-sky[data-wx="rain"]{--wx-tint:rgba(96,112,132,.18);--img:saturate(.7) contrast(.9) brightness(.7)}
#house-sky[data-wx="fog"]{--wx-tint:rgba(198,200,204,.16);--img:saturate(.6) contrast(.82) brightness(.82)}
#house-sky[data-wx="cloud"]{--wx-tint:rgba(130,138,150,.10);--img:saturate(.82) contrast(.92) brightness(.78)}
/* Snow lightens the sky it falls out of, which on the winter valley at midday lifts the whole
   screen past what the small text on the rail can sit against. So it carries a little weight of
   its own along with the cold cast. */
#house-sky[data-wx="snow"]{--wx-tint:rgba(150,180,215,.12);--extra-veil:.07}
#house-sky[data-wx="clear"]{--wx-tint:transparent}
:root[data-theme="light"] #house-sky[data-wx="rain"]{--img:saturate(.6) contrast(.82) brightness(1.02)}
:root[data-theme="light"] #house-sky[data-wx="fog"]{--img:saturate(.5) contrast(.78) brightness(1.1)}
:root[data-theme="light"] #house-sky[data-wx="cloud"]{--img:saturate(.66) contrast(.82) brightness(1.06)}

/* ---- the days the chapter keeps ----
   Founders' Day is the Fraternity's own: 4 December 1906, at Cornell. The House takes the gold for
   the week of it. February is carried deeper and more formally rather than decorated — the month
   is not an occasion for ornament. Both sit on top of whatever season and weather are running,
   because the fourth of December is still a winter morning in Tacoma. */
#house-sky[data-day="founders"]{--day-tint:rgba(226,179,79,.13);--vignette:.40}
#house-sky[data-day="history"]{--day-tint:rgba(198,152,66,.07);--extra-veil:.10;--vignette:.38}
:root[data-theme="light"] #house-sky[data-day="founders"]{--day-tint:rgba(226,179,79,.16)}
:root[data-theme="light"] #house-sky[data-day="history"]{--day-tint:rgba(150,112,44,.08);--extra-veil:.04}

/* The chapter's own two, which outrank both of the above because a brother can still act on them.
   Neither touches --extra-veil, and that restraint is the point: the hour owns the weight of the
   scrim, and a ballot called for a Saturday morning must not blow the veil off a man reading it
   at ten that night. So they speak in tint and in vignette only, the vocabulary Founders' Day
   already uses, and every hour of the day stays as legible as it was.

   Ballot day is the brighter and the cooler of the two — attention, not ceremony — and takes the
   tightest vignette on the screen, which pulls the eye to the middle of the words. Installation
   day is the warmest gold the House ever wears: it is one day, not a week, and it is the day the
   chapter changes hands. */
#house-sky[data-day="ballot"]{--day-tint:rgba(232,196,110,.10);--vignette:.44}
#house-sky[data-day="installation"]{--day-tint:rgba(226,179,79,.17);--vignette:.42}
:root[data-theme="light"] #house-sky[data-day="ballot"]{--day-tint:rgba(198,152,66,.11)}
:root[data-theme="light"] #house-sky[data-day="installation"]{--day-tint:rgba(226,179,79,.20)}

/* ---- the shell, over the sky ----
   The rail and the top bar are painted for a solid page; over a photograph they have to become
   glass or the sky stops at the sidebar's edge and the effect reads as a picture in a box. */
[data-house="on"] body{background:transparent}
[data-house="on"] .shell{background:linear-gradient(var(--gold-line),var(--gold-line)) calc(var(--sidebar) - 1px) 0/1px 100% no-repeat}
[data-house="on"] .sidebar{background:var(--rail-glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
[data-house="on"] .topbar{background:var(--header-glass)}
:root{--rail-glass:rgba(12,10,8,.52);--header-glass:rgba(12,10,8,.58);--bar-glass:rgba(12,10,8,.66)}
:root[data-theme="light"]{--rail-glass:rgba(244,238,226,.62);--header-glass:rgba(244,238,226,.70);--bar-glass:rgba(244,238,226,.78)}

/* ---- the tiles, as actual glass ----
   The cards were painted as gradients on a solid surface, which over a photograph reads as
   plastic laid on top of it. Over the sky they are given the three things glass actually has:
   something seen through it, a saturation lift so the colour behind stays alive, and a lit top
   edge where the light catches. */
[data-house="on"] .house .card,
[data-house="on"] .house .kpi,
[data-house="on"] .house .ask-bar,
[data-house="on"] .house .ask-foot{
  background:var(--tile);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  border-color:var(--tile-edge);
  box-shadow:var(--depth-lift),var(--glass-lit)}
/* The question box is the first thing on the screen and sat straight on the sunset, where a grey
   placeholder had nothing to be grey against. It gets the same glass as everything else. The line
   of examples beneath it takes a firmer fill: a thin strip of 12.5px hint text has far less
   surface to be read against than a card does. */
[data-house="on"] .house .ask-foot{background:var(--tile-firm);padding:9px 14px;border-radius:999px;border:1px solid var(--tile-edge);margin:10px 0 0}
[data-house="on"] .house .ask-bar{box-shadow:var(--depth),var(--glass-lit)}
[data-house="on"] .house .ask-answers .answer{background:var(--tile);border-color:var(--tile-edge);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}
:root{--tile:rgba(22,18,14,.72);--tile-firm:rgba(20,16,12,.86);--tile-edge:rgba(247,240,228,.15)}
:root[data-theme="light"]{--tile:rgba(255,252,246,.88);--tile-firm:rgba(255,253,249,.95);--tile-edge:rgba(58,44,28,.15)}

/* The hero stops carrying a photograph of its own. Two pictures competing for the same corner of
   the screen is the surest way to make an expensive one look cheap — so it becomes the window
   onto this one, and keeps only enough of its own dark material to hold its light lettering. */
[data-house="on"] .hero{background:var(--hero-glass);-webkit-backdrop-filter:blur(14px) saturate(1.35);backdrop-filter:blur(14px) saturate(1.35);border-color:rgba(247,240,228,.18)}
[data-house="on"] .hero > img.plate,[data-house="on"] .hero > .plate,[data-house="on"] .hero > .scrim{display:none}
[data-house="on"] .hero-card{background:rgba(10,8,6,.70)}
:root{--hero-glass:linear-gradient(135deg,rgba(14,11,8,.62),rgba(14,11,8,.44))}
:root[data-theme="light"]{--hero-glass:linear-gradient(135deg,rgba(18,14,10,.58),rgba(18,14,10,.40))}

/* Where a browser has no backdrop filter, glass would be a flat wash over a photograph and the
   words on it would be unreadable. Those browsers get solid tiles instead — less beautiful, and
   legible, which is the right way round. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  [data-house="on"] .house .card,[data-house="on"] .house .kpi,[data-house="on"] .house .ask-bar,[data-house="on"] .house .ask-foot,[data-house="on"] .house .answer{background:var(--tile-solid)}
  [data-house="on"] .sidebar{background:var(--rail)}
  [data-house="on"] .topbar{background:var(--header)}
  :root{--tile-solid:rgba(18,15,11,.94)}
  :root[data-theme="light"]{--tile-solid:rgba(252,249,243,.96)}
}

/* A brother who has asked his device for less motion is not asking for less photograph — the sky
   never moved in the first place. */
@media (prefers-reduced-motion:reduce){.sky-grade::after{transition:none}}

/* At tablet width and below the rail is gone, so the divider it was drawn against must go with
   it — otherwise the override above redraws a hairline down the middle of a phone, where there is
   no sidebar for it to divide. */
@media (max-width:960px){ [data-house="on"] .shell{background:none} }

/* On a phone the sky is behind a single column of tiles with no rail to speak of, so it is veiled
   a little harder: there is less room for a tile to be beautiful and still be read at arm's
   length on a bus. */
@media (max-width:700px){
  #house-sky{--extra-veil:.10}
  /* Except the pale valleys. The phone's extra weight was set when autumn — a dark photograph —
     was the only one there was; laid over snow it turns a white morning grey. */
  #house-sky[data-season="winter"],#house-sky[data-season="spring"]{--extra-veil:.02}
  #house-sky[data-sky="night"]{--extra-veil:.28}
  [data-house="on"] .house .card,[data-house="on"] .house .kpi,[data-house="on"] .house .ask-bar,[data-house="on"] .house .ask-foot{-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
}

/* ================================================================= the rail, narrowed
   The menu extends and retracts so a brother can give the screen back to the chapter's business.
   Narrowed it keeps the seal and the icons and nothing else; extended it carries the names, the
   creed and the scripture as before. The width is one token, so the content column takes back
   every pixel the rail gives up without a second rule knowing about it. */
:root[data-rail="slim"]{--sidebar:78px}
/* In the rail's own flow rather than hung off its edge: the rail scrolls its contents, and a
   chip at a negative offset would be clipped by that scroll on every screen too short to hold
   the whole menu. */
.rail-toggle{flex:none;align-self:flex-end;display:grid;place-items:center;width:28px;height:28px;padding:0;margin:-6px -2px 8px;border-radius:50%;
  background:transparent;border:1px solid var(--gold-dim);color:var(--muted-2);cursor:pointer;
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.rail-toggle:hover{color:var(--gold);border-color:var(--gold);background:rgba(var(--tint),.04)}
.rail-toggle svg{width:14px;height:14px}

:root[data-rail="slim"] .sidebar{padding:26px 10px 22px;align-items:center}
:root[data-rail="slim"] .rail-toggle{align-self:center;margin:-6px 0 10px}
:root[data-rail="slim"] .brand{padding:4px 0 18px;margin-bottom:14px}
/* The seal carries a rim, a creed around it and two dates; at fifty pixels all three become a
   smudge. The monogram exists for exactly this — the same identity cut down for sizes the seal
   cannot survive — so the rail swaps one for the other rather than shrinking the wrong mark. */
.brand .mono.rail-mark{display:none}
:root[data-rail="slim"] .brand .seal-mark{display:none}
:root[data-rail="slim"] .brand .mono.rail-mark{display:block;width:46px;margin:0 auto}
/* The chapter's name, the creed and the scripture are the first things to go: they are the rail
   being generous, and a narrowed rail is a brother asking for the room back. */
:root[data-rail="slim"] .brand .name,
:root[data-rail="slim"] .brand .place,
:root[data-rail="slim"] .creed,
:root[data-rail="slim"] .scripture{display:none}
:root[data-rail="slim"] .sidebar .nav{gap:2px}
:root[data-rail="slim"] .sidebar .nav a{justify-content:center;padding:11px 0;gap:0}
/* Clipped rather than removed, so the label is still the link's name to a screen reader and the
   title is what a pointer gets. A narrow rail must not be a rail of unlabelled buttons. */
:root[data-rail="slim"] .sidebar .nav a span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:root[data-rail="slim"] .sidebar .nav a svg{width:21px;height:21px}
@media (prefers-reduced-motion:no-preference){
  .shell{transition:grid-template-columns .22s var(--ease)}
}
/* Below the tablet register there is no rail at all, so there is nothing to narrow. */
@media (max-width:960px){ .rail-toggle{display:none} :root[data-rail="slim"]{--sidebar:0px} }

/* ---- one question box, not two ----
   The House carries its own, with the examples under it and the answers beneath that. The top
   bar's is for every other screen. Showing both, one directly above the other, was the portal
   asking the same question twice. */
:root[data-view="dashboard"] .topbar .search{display:none}

/* ================= THE ARCHIVE =================
   The one screen in the portal with a register of its own, and the exception is the point:
   photographs read against near-black the way they read in a gallery, and against cream they do
   not. So when the archive is showing, the house dims its lights — the rail, the top bar and the
   ground all drop to the dark register whatever theme the brother keeps, and come back up when
   he leaves. A light-themed portal with one black rectangle cut out of the middle would look
   broken; a light-themed portal that dims for the gallery looks deliberate, because it is.

   These rules sit after the light theme's own block, so they win on order rather than on any
   escalation of specificity. Nothing here is !important. */
:root[data-view="photos"]{
  --tint:255,255,255; --shade:0,0,0;
  --page:#07070a;
  --ambient:
    radial-gradient(58% 42% at 14% -10%, rgba(226,179,79,.10), transparent 72%),
    radial-gradient(48% 38% at 88% 2%, rgba(120,84,26,.08), transparent 74%),
    linear-gradient(180deg,#0c0b0d 0%,#08080a 52%,#050506 100%);
  --pane:linear-gradient(165deg,rgba(26,24,26,.88),rgba(12,11,13,.94));
  --pane-edge:rgba(226,179,79,.26);
  --bar:rgba(9,9,11,.94); --header:rgba(8,8,10,.66);
  --rail:linear-gradient(180deg,rgba(19,18,20,.82),rgba(9,9,11,.88));
  --rail-glass:rgba(10,10,12,.58); --header-glass:rgba(10,10,12,.62); --bar-glass:rgba(10,10,12,.70);
  --toast-bg:linear-gradient(160deg,rgba(30,28,30,.95),rgba(14,13,15,.97));
  --avatar-bg:linear-gradient(145deg,rgba(226,179,79,.22),rgba(20,18,16,.9));
  --scrim:rgba(0,0,0,.80);
  --ink:#08080a; --ink-2:#0c0c0e; --ink-3:#121214; --panel:#141416; --panel-2:#1a1a1d;
  --gold:#e2b34f; --gold-deep:#b77921; --gold-light:#efca75; --gold-2:#d7b36a;
  --gold-dim:rgba(226,179,79,.14); --gold-line:rgba(226,179,79,.20);
  --ivory:#f5efe6; --cream:#f2ebdf; --text:#ece7de; --muted:#c7c1b8; --muted-2:#968f86; --muted-3:#6b655d;
  --tone-green:#8fd7ad; --tone-red:#f0a9a4; --tone-amber:#f2c886; --tone-blue:#b9d0ee;
  --gold-fill:linear-gradient(135deg,var(--gold-deep),var(--gold-light)); --on-gold:#17100a;
  --tile:rgba(20,20,23,.72); --tile-firm:rgba(16,16,19,.88); --tile-edge:rgba(247,240,228,.13);
  --glass-edge:rgba(247,240,228,.11);
  /* What an occasion's heading has to clear when it sticks. Measured off the top bar, which is
     one line of 13.5px type in 14px of padding either side. */
  --topbar-h:62px;
}
/* The house lights come back up smoothly rather than snapping, on the surfaces broad enough to
   show the change. A brother who has asked for less motion gets the snap. */
.shell,.topbar,.sidebar,.view{transition:background-color .4s var(--ease),background-image .4s var(--ease),border-color .4s var(--ease)}
@media (prefers-reduced-motion:reduce){.shell,.topbar,.sidebar,.view{transition:none}}

/* ---- the head of the screen ---- */
#archive{display:flex;flex-direction:column;gap:22px}
.arch-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.arch-head h2{font-family:var(--serif);font-size:clamp(26px,3.1vw,38px);font-weight:600;line-height:1.05;letter-spacing:-.012em;margin:2px 0 0}
.arch-head .count{font-size:13px;color:var(--muted-2);margin-top:7px}
.arch-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.arch-search{position:relative;min-width:min(340px,72vw)}
.arch-search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted-2);pointer-events:none}
.arch-search input{width:100%;padding:11px 16px 11px 40px;border-radius:999px;background:var(--tile);border:1px solid var(--tile-edge);color:var(--text);font:inherit;font-size:14px;backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%)}
.arch-search input:focus-visible{outline:none;border-color:rgba(226,179,79,.44);box-shadow:0 0 0 3px rgba(226,179,79,.14)}
.arch-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.arch-chips::-webkit-scrollbar{display:none}
.arch-chips .chip{flex:0 0 auto;background:var(--tile);border:1px solid var(--tile-edge);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* ---- an occasion ---- */
.occasion{display:flex;flex-direction:column;gap:14px}
/* The heading rides above the wall as the brother scrolls, so he always knows which evening he is
   looking at. It carries just enough of the ground with it to keep the type off the photographs —
   a wash that fades out downward, no border, no card. */
.occ-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  position:sticky;top:var(--topbar-h,62px);z-index:3;margin:0 -6px;padding:10px 6px 12px;
  background:linear-gradient(180deg,#08080a 0%,rgba(8,8,10,.92) 62%,rgba(8,8,10,0) 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.occ-head > div:first-child{flex:1 1 320px;min-width:0}
.occ-head h3{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.008em;margin:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.occ-head .occ-when{font-size:12px;color:var(--muted-2);margin-top:3px}
.occ-head .by{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-3);border:1px solid var(--tile-edge);border-radius:999px;padding:2px 8px;font-weight:600}
.occ-acts{display:flex;gap:7px;align-items:center}

/* ---- the wall ----
   Columns rather than a fixed grid, because a photograph has the shape the camera gave it and
   cropping every one to a square to make the rows line up throws away what the brother framed.
   Each figure carries its own aspect ratio, so the columns settle before a single byte of image
   has loaded and nothing jumps as the wall fills in. */
.wall{columns:4;column-gap:14px}
.shot{break-inside:avoid;margin:0 0 14px;position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--radius-sm);overflow:hidden;
  transform:translateZ(0);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.shot img{width:100%;height:auto;display:block;border-radius:var(--radius-sm);background:#141416;
  box-shadow:0 2px 14px rgba(0,0,0,.42);transition:filter .3s var(--ease)}
.shot:hover,.shot:focus-visible{outline:none;transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.shot:focus-visible img{outline:2px solid var(--gold);outline-offset:2px}
.shot .lift{position:absolute;inset:0;border-radius:var(--radius-sm);background:linear-gradient(180deg,transparent 52%,rgba(4,4,6,.82));opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.shot:hover .lift,.shot:focus-visible .lift{opacity:1}
.shot .said{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;text-align:left;opacity:0;transform:translateY(5px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.shot:hover .said,.shot:focus-visible .said{opacity:1;transform:none}
.shot .said b{display:block;font-size:12.5px;font-weight:600;color:#fbf7ef;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot .said span{display:block;font-size:10.5px;color:rgba(247,240,228,.74);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A burst says how many frames are folded behind it; an edit says it is one. Both sit on glass
   so they read over a bright sky and a dark suit alike. */
.shot .mark{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:999px;font-size:11px;font-weight:600;color:#fbf7ef;
  background:rgba(10,10,12,.62);border:1px solid rgba(247,240,228,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.shot .mark .ic{width:13px;height:13px}
.shot .mark.left{right:auto;left:8px}
@media (max-width:1180px){.wall{columns:3}}
@media (max-width:700px){.wall{columns:2;column-gap:10px}.shot{margin-bottom:10px}
  .occ-head{position:static;margin:0;padding:6px 0 8px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}.arch-search{min-width:0;flex:1 1 200px}}

/* ---- the viewer ----
   Edge to edge, with the photograph's own self blurred behind it. That backdrop is the picture
   again at thumbnail size, blown up and blurred to nothing — so it costs no extra request and it
   is always exactly the right colour, which no fixed grey ever is. */
.viewer-back{position:fixed;inset:0;z-index:70;background:rgba(3,3,5,.94);display:grid;
  animation:viewer-in .24s var(--ease)}
@keyframes viewer-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.viewer-back{animation:none}}
.viewer{position:relative;display:grid;grid-template-rows:auto 1fr auto;width:100%;height:100%;overflow:hidden}
.viewer .haze{position:absolute;inset:-8%;z-index:0;background-size:cover;background-position:center;
  filter:blur(56px) saturate(150%) brightness(.52);transform:scale(1.14);pointer-events:none}
.viewer .haze::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 45%,transparent 30%,rgba(3,3,5,.72) 100%)}
/* min-width:0, or a grid item refuses to shrink below its min-content — and the bar's min-content
   is a caption set in nowrap, which on a phone pushes the controls clean off the right of the
   screen while the overlay's own overflow:hidden keeps the page from ever reporting a scroll. */
.viewer > *{position:relative;z-index:1;min-width:0}

.vw-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:max(14px,env(safe-area-inset-top)) 18px 12px}
.vw-title{flex:1 1 auto;min-width:0}
.vw-title b{display:block;font-family:var(--serif);font-size:17px;font-weight:600;color:#fbf7ef;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-title span{display:block;font-size:11.5px;color:rgba(247,240,228,.72);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-acts{display:flex;gap:8px;flex:none}
/* Circular glass, as in the reference: one ring per action, the label carried by the title
   attribute and by aria-label rather than by text, because at this size text would crowd the
   photograph and the photograph is the point. */
.vw-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;
  background:rgba(247,240,228,.12);border:1px solid rgba(247,240,228,.18);color:#fbf7ef;cursor:pointer;
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:background .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.vw-btn:hover{background:rgba(247,240,228,.2);transform:translateY(-1px)}
.vw-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.vw-btn .ic{width:19px;height:19px}
.vw-btn.on{background:#fbf7ef;border-color:#fbf7ef;color:#17161a}
.vw-btn.danger:hover{background:rgba(210,87,79,.34);border-color:rgba(210,87,79,.5)}

/* An explicit minmax(0,1fr) track in both axes. Left implicit, the track is sized from its
   content, so the frame's own max-width:100% resolves against a track already as wide as the
   frame wanted to be — it clamps to nothing and the photograph runs off both sides of a phone. */
.vw-stage{position:relative;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;min-height:0;min-width:0;padding:4px 18px}
/* The frame shrink-wraps the photograph so the warmth wash can sit exactly on it — inset:0 of a
   box that is the picture's own size, rather than of the stage it is letterboxed inside. */
.vw-stage .frame{position:relative;height:100%;max-width:100%;max-height:100%;margin:auto;min-height:0;
  aspect-ratio:var(--shot-ratio,4/3)}
.vw-stage img{width:100%;height:100%;display:block;object-fit:contain;
  border-radius:10px;filter:drop-shadow(0 22px 48px rgba(0,0,0,.55))}
.vw-stage .wash{position:absolute;inset:0;border-radius:10px;pointer-events:none;opacity:0;
  mix-blend-mode:soft-light;transition:opacity .12s linear}
/* A step the brother is already at the end of is shown as spent rather than hidden, so the
   controls do not jump about as he moves through an evening. */
.vw-btn:disabled{opacity:.3;cursor:default;transform:none}
.vw-btn:disabled:hover{background:rgba(247,240,228,.12);transform:none}
.vw-step{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.vw-step.prev{left:14px} .vw-step.next{right:14px}
.vw-foot{padding:12px 18px max(16px,env(safe-area-inset-bottom))}
.vw-cap{font-size:13px;color:rgba(247,240,228,.9);text-align:center;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vw-cap em{font-style:normal;color:rgba(247,240,228,.6)}
/* The filmstrip: where you are in the evening, and one tap to anywhere else in it. */
/* Centred while the evening fits on one line, and scrolling from the left once it does not —
   an evening of four photographs should not sit in the corner. */
.strip{display:flex;justify-content:safe center;gap:7px;overflow-x:auto;padding:2px;scrollbar-width:none;scroll-behavior:smooth}
.strip::-webkit-scrollbar{display:none}
.strip button{flex:0 0 auto;width:54px;height:54px;padding:0;border-radius:9px;overflow:hidden;cursor:pointer;
  border:1.5px solid transparent;background:rgba(247,240,228,.08);opacity:.56;
  transition:opacity .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.strip button img{width:100%;height:100%;object-fit:cover;display:block}
.strip button:hover{opacity:.85}
.strip button[aria-current="true"]{opacity:1;border-color:var(--gold);transform:translateY(-2px)}
.strip button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:700px){
  .arch-head{align-items:stretch}
  .arch-tools{width:100%}
  .arch-tools .btn{flex:0 0 auto}
  #archive .arch-tools .lbl{display:none}   /* the icon already says it, and the line has to fit */
  .vw-bar{padding:max(10px,env(safe-area-inset-top)) 12px 8px}
  .vw-stage{padding:2px 8px}.vw-foot{padding:10px 12px max(12px,env(safe-area-inset-bottom))}
  .vw-btn{width:38px;height:38px}.strip button{width:46px;height:46px}
  .vw-step{display:none}   /* a thumb swipes; it does not aim for a 40px target at the edge */
}

/* ---- the sheet: sharing, and improving ----
   Both slide up from the foot of the viewer over the photograph, because both are things done
   TO the photograph and it should stay in sight while they are done. */
.sheet{margin-top:10px;border-radius:18px;padding:16px;
  background:rgba(14,14,17,.80);border:1px solid rgba(247,240,228,.14);
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 -10px 44px rgba(0,0,0,.44);animation:sheet-up .26s var(--ease)}
@keyframes sheet-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.sheet .sheet-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.sheet .sheet-head .small{flex:1 1 auto;min-width:0}
.sheet .sheet-head .vw-btn{flex:none;align-self:center;margin-left:auto}
.sheet .sheet-head strong{font-family:var(--serif);font-size:15px;font-weight:600;color:#fbf7ef}
.sheet .sheet-head .small{color:rgba(247,240,228,.62)}
/* Where it can go: a row of rings with the name under each, as the reference has them. */
.ways{display:flex;gap:14px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.ways::-webkit-scrollbar{display:none}
.way{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;width:66px;
  background:none;border:0;padding:0;cursor:pointer;color:rgba(247,240,228,.82);font:inherit}
.way .ring{display:grid;place-items:center;width:50px;height:50px;border-radius:999px;
  background:rgba(247,240,228,.11);border:1px solid rgba(247,240,228,.17);color:#fbf7ef;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.way:hover .ring{background:rgba(247,240,228,.2);transform:translateY(-2px)}
.way:focus-visible{outline:none}.way:focus-visible .ring{outline:2px solid var(--gold);outline-offset:2px}
.way .ring .ic{width:21px;height:21px}
.way span{font-size:10.5px;line-height:1.25;text-align:center}

/* ---- the dial ----
   A ruler that slides under a fixed caret, which is what the reference draws as a curve. The
   control that actually moves is a range input lying invisibly across the whole band, so this
   works from a keyboard and answers to a screen reader while looking like a camera. */
.dial{position:relative;height:84px;display:grid;place-items:center;margin:2px 0 14px;user-select:none}
.dial .ticks{position:absolute;inset:0 0 44px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.dial .ticks i{position:absolute;top:8px;width:1.5px;border-radius:1px;background:rgba(247,240,228,.45);
  transform:translateX(-50%);transition:height .15s var(--ease)}
.dial .ticks i.major{background:rgba(247,240,228,.8);height:20px}
.dial .caret{position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:0;
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--gold)}
.dial .read{position:absolute;bottom:0;left:0;right:0;text-align:center;pointer-events:none}
.dial .read b{display:block;font-family:var(--mono);font-size:21px;font-weight:600;color:#fbf7ef;letter-spacing:-.01em}
.dial .read span{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(247,240,228,.6);margin-top:1px}
.dial input[type="range"]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.dial input[type="range"]:focus-visible{opacity:0}
.dial:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:4px;border-radius:12px}
.tools{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.tool{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:999px;cursor:pointer;
  background:rgba(247,240,228,.09);border:1px solid rgba(247,240,228,.15);color:rgba(247,240,228,.82);
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.tool:hover{background:rgba(247,240,228,.17);transform:translateY(-1px)}
.tool:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tool[aria-pressed="true"]{background:#fbf7ef;border-color:#fbf7ef;color:#17161a}
/* A dot on any dial that has been moved off nought, so a brother can see at a glance what he has
   changed without going back through all four. */
.tool.moved::after{content:"";position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:999px;background:var(--gold)}
.tool[aria-pressed="true"].moved::after{background:var(--gold-deep)}
.tool .ic{width:19px;height:19px}
.sheet .form-actions{margin-top:14px;padding-top:0;border-top:0}
@media (max-width:700px){
  .sheet{padding:13px;border-radius:16px}
  .dial{height:76px}.dial .read b{font-size:19px}
  /* Seven tools on one line: at 42px with a 10px gap they are fourteen pixels too wide for a
     390px screen and the last one drops to a row of its own. */
  .tools{gap:8px}.tool{width:38px;height:38px}.tool .ic{width:17px;height:17px}
}

/* ---- what the light theme paints in literal cream ----
   A handful of surfaces are not mixed from the token pair, because on paper they are not a tint
   of anything: a button, a field, a notice and a toast are all simply near-white. Swapping the
   tokens for the archive therefore does not reach them, and a cream button with cream lettering
   on a black wall is what the pixel harness found — five of them, at 1.5:1.

   These are restated rather than exempted at source. Adding :not([data-view="photos"]) to the
   light theme's own rules looks tidier and is wrong: it lifts them by one class of specificity,
   which is enough to beat [data-house="on"] .house .card and hand the dashboard back a
   translucent card the winter sky shows through. Specificity is not a free parameter — a rule
   that only means to opt out of one screen should not change what it outranks on every other. */
:root[data-view="photos"] .btn:not(.btn-primary){background:linear-gradient(160deg,rgba(247,240,228,.10),rgba(247,240,228,.03));color:var(--ivory);border-color:rgba(247,240,228,.16)}
:root[data-view="photos"] .btn:not(.btn-primary):hover{background:linear-gradient(160deg,rgba(247,240,228,.18),rgba(247,240,228,.07));border-color:rgba(226,179,79,.42)}
:root[data-view="photos"] .btn-ghost{background:none;color:var(--gold-2);border-color:transparent}
:root[data-view="photos"] .btn-ghost:hover{background:rgba(247,240,228,.09)}
:root[data-view="photos"] .field input,:root[data-view="photos"] .field select,
:root[data-view="photos"] .field textarea,:root[data-view="photos"] .input{
  background:rgba(247,240,228,.06);border-color:rgba(247,240,228,.16);color:var(--text)}
:root[data-view="photos"] .field input:focus,:root[data-view="photos"] .field select:focus,
:root[data-view="photos"] .field textarea:focus,:root[data-view="photos"] .input:focus{
  background:rgba(247,240,228,.10);border-color:rgba(226,179,79,.5)}
:root[data-view="photos"] .notice{background:rgba(247,240,228,.06);border-color:rgba(247,240,228,.14);color:var(--text)}
:root[data-view="photos"] .notice.warn{background:rgba(226,162,63,.13);border-color:rgba(226,162,63,.34)}
:root[data-view="photos"] .notice.danger{background:rgba(210,87,79,.13);border-color:rgba(210,87,79,.34)}
:root[data-view="photos"] .notice.success{background:rgba(79,179,122,.13);border-color:rgba(79,179,122,.34)}
:root[data-view="photos"] .toast{background:var(--toast-bg);color:var(--text);border-color:rgba(247,240,228,.14)}
:root[data-view="photos"] .status-pill,:root[data-view="photos"] .badge.slate{background:rgba(247,240,228,.08);border-color:rgba(247,240,228,.16);color:var(--muted)}
:root[data-view="photos"] .seal{background:rgba(247,240,228,.05);border-color:rgba(226,179,79,.22)}
/* The chapter seal is drawn for ink; on paper the light theme lifts it, and in the dark it does
   not need lifting. The archive is dark, whichever theme is kept. */
:root[data-view="photos"] .sidebar .brand img{filter:none;background:none}
:root[data-view="photos"] ::selection{background:rgba(226,179,79,.3);color:#fbf7ef}

/* ================= DUES & TREASURY =================
   The reference for this screen is a fintech dashboard: broad tinted cards carrying one figure
   each, a ring with the total in the middle of it, capsule columns, pill chips. What is borrowed
   is the structure — one idea per card, the number set large, the explanation small underneath —
   and not the palette. Sage, butter and periwinkle belong to somebody else's brand; the chapter's
   colours are old gold on ink, so the same three cards are tinted from the tokens the rest of the
   portal is mixed from and read as one family with it rather than as a page pasted in. */
.money-heads{gap:16px}
.head-card{position:relative;overflow:hidden;border-radius:var(--radius);padding:20px 22px 18px;
  border:1px solid var(--glass-edge);background:var(--pane);box-shadow:var(--depth);
  display:flex;flex-direction:column;gap:2px;min-height:186px}
/* A wash of the card's own colour across the top, fading out before the small print, so the tint
   reads as light falling on the card rather than as a block of paint behind the words. */
.head-card::before{content:"";position:absolute;inset:0 0 auto;height:72%;pointer-events:none;
  background:linear-gradient(170deg,var(--wash) 0%,transparent 78%)}
.head-card > *{position:relative}
.head-card.sage{--wash:rgba(79,179,122,.16);--edge:rgba(79,179,122,.34)}
.head-card.butter{--wash:rgba(226,179,79,.18);--edge:rgba(226,179,79,.38)}
.head-card.iris{--wash:rgba(127,167,217,.16);--edge:rgba(127,167,217,.34)}
.head-card{border-color:var(--edge,var(--glass-edge))}
.head-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.head-card .tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.head-card .tag .ic{width:15px;height:15px;color:var(--gold)}
.head-card .label{margin:0;font-size:12.5px;color:var(--muted-2)}
.head-card .fig{margin:2px 0 0;font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);font-weight:600;
  line-height:1.05;letter-spacing:-.018em;color:var(--ivory)}
.head-card .fig-sub{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--muted-2);letter-spacing:0}
.head-card .note{margin:8px 0 0;font-size:12px;color:var(--muted-2);line-height:1.45}
.head-card .spark{margin-top:auto;padding-top:10px}
.fig-mid{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;color:var(--ivory)}

/* ---- what a brother owes ----
   The only thing on this screen he can act on, so while there is something to act on it is the
   first thing on it, at a size nothing else competes with. */
.owing{display:grid;grid-template-columns:1.25fr .95fr;gap:26px;align-items:center;
  border-radius:var(--radius);padding:26px 28px;margin-bottom:4px;
  border:1px solid rgba(226,179,79,.34);background:var(--pane);box-shadow:var(--depth);position:relative;overflow:hidden}
.owing::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 0% 0%,rgba(226,179,79,.14),transparent 62%)}
.owing.late{border-color:rgba(226,162,63,.5)}
.owing.late::before{background:radial-gradient(60% 120% at 0% 0%,rgba(226,162,63,.2),transparent 62%)}
.owing > *{position:relative}
.owing h2{font-family:var(--serif);font-size:clamp(26px,3.2vw,36px);font-weight:600;line-height:1.06;
  letter-spacing:-.016em;margin:4px 0 0}
.owing .lede{margin:8px 0 0;font-size:14.5px;color:var(--muted)}
.owing-do{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.owing-do .small{margin:0;color:var(--muted-2)}
.btn-lg{min-height:52px;font-size:15.5px;padding:0 24px}
.ways-to-pay{display:grid;gap:8px;margin-top:4px}
.ways-to-pay > button{display:flex;justify-content:space-between;gap:4px 12px;align-items:baseline;flex-wrap:wrap;
  width:100%;min-height:44px;text-align:left;cursor:pointer;font:inherit;
  padding:9px 13px;border-radius:12px;background:rgba(var(--tint),.05);border:1px solid var(--glass-edge);
  transition:background .18s var(--ease),border-color .18s var(--ease)}
.ways-to-pay > button:hover{background:rgba(var(--tint),.1);border-color:rgba(226,179,79,.34)}
.ways-to-pay > button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ways-to-pay > button .ic{width:15px;height:15px;color:var(--muted-2);flex:none;align-self:center}
.ways-to-pay span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);flex:none}
/* An address, a cash tag or a name to make a cheque out to is one unbroken run of monospace with
   no space in it to wrap at, so on a 360px screen it pushed the whole page three pixels sideways.
   It breaks where it must rather than where it would like to. */
.ways-to-pay strong{font-family:var(--mono);font-size:13px;color:var(--ivory);min-width:0;
  overflow-wrap:anywhere;word-break:break-word;text-align:right}
.paid-quiet{border-color:rgba(79,179,122,.3)}
@media (max-width:960px){.owing{grid-template-columns:1fr;gap:18px;padding:22px}}

/* ---- the budget ----
   One row a line: what it is, how far along it is, and what is left. The bar is the glance; the
   two figures either side of it are the answer, because a bar on its own is a shape. */
.lines{display:flex;flex-direction:column;gap:2px}
.line{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(90px,1.6fr) minmax(104px,auto);
  gap:16px;align-items:center;padding:11px 10px;border-radius:12px;transition:background .18s var(--ease)}
.line:hover{background:rgba(var(--tint),.035)}
.line.loose{grid-template-columns:1fr auto}
.line-say{min-width:0;display:flex;flex-direction:column;gap:2px}
.line-say strong{font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-say .small{color:var(--muted-2)}
.line-bar{position:relative;height:9px;border-radius:999px;background:rgba(var(--tint),.09);overflow:hidden}
.line-bar > span{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--gold-fill);transition:width .5s var(--ease)}
.line.close .line-bar > span{background:linear-gradient(90deg,var(--gold-deep),var(--amber))}
.line.over .line-bar > span{background:linear-gradient(90deg,var(--gold-deep),var(--red))}
.line.met .line-bar > span,.line.behind .line-bar > span{background:linear-gradient(90deg,rgba(79,179,122,.7),var(--green))}
/* A line past its plan is hatched rather than merely red, so it is legible as "over" to a brother
   who cannot tell the reds from the golds. */
.line-bar .spill{position:absolute;inset:0;border-radius:999px;
  background:repeating-linear-gradient(115deg,transparent 0 5px,rgba(var(--shade),.34) 5px 9px)}
.line-fig{text-align:right;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.line-fig .small{font-weight:400;color:var(--muted-2)}
.line-fig .over{color:var(--tone-red)}
.line-fig .ahead{color:var(--tone-green)}
@media (max-width:700px){
  .line{grid-template-columns:1fr auto;gap:5px 12px;padding:10px 6px}
  .line-bar{grid-column:1/-1;order:3}
  .line-fig{order:2}
}

/* ---- the ring ---- */
.ring-wrap{display:grid;place-items:center;margin:2px 0 16px}
.ring{width:min(180px,54vw);height:auto;overflow:visible}
.ring .track{stroke:rgba(var(--tint),.07);stroke-width:15}
.ring .arc{stroke-width:15;stroke-linecap:butt;cursor:default;transition:stroke-width .2s var(--ease),opacity .2s var(--ease)}
.ring .arc:hover,.ring .arc:focus-visible{stroke-width:19;outline:none}
.ring .hole-v{font-family:var(--serif);font-size:25px;font-weight:600;fill:var(--ivory);letter-spacing:-.01em}
.ring-say{margin:-6px 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
/* Six steps down one ramp of the chapter's own gold, rather than six unrelated hues: a pie of
   arbitrary colours says the categories are unrelated kinds of thing, and they are not — they are
   all the chapter's money. Neighbouring steps are far enough apart to separate in greyscale. */
.a0{--slice:#efca75} .a1{--slice:#c9973a} .a2{--slice:#8a5e12}
.a3{--slice:#d8c39a} .a4{--slice:#a07b3c} .a5{--slice:#6b5427}
/* On paper the same ramp runs the other way: the pale end of it disappears into cream, so the
   light theme takes six steps down from the dark end instead of up from the light one. */
:root[data-theme="light"] .a0{--slice:#8a5e12} :root[data-theme="light"] .a1{--slice:#b07f24}
:root[data-theme="light"] .a2{--slice:#5f4410} :root[data-theme="light"] .a3{--slice:#caa257}
:root[data-theme="light"] .a4{--slice:#7d5a1c} :root[data-theme="light"] .a5{--slice:#3f2d0a}
.ring .arc{stroke:var(--slice)}
.shares{display:flex;flex-direction:column;gap:11px}
.share-name{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-name .dot{width:9px;height:9px;border-radius:3px;background:var(--slice);flex:none}
.share > .row > strong{font-size:13.5px;color:var(--ivory)}
.share-bar{height:5px;border-radius:999px;background:rgba(var(--tint),.08);margin:6px 0 3px;overflow:hidden}
.share-bar > span{display:block;height:100%;border-radius:999px;background:var(--slice);transition:width .5s var(--ease)}
.share .small{color:var(--muted-2)}

/* ---- the columns ---- */
.cols-wrap{position:relative;margin:4px -4px 0}
.cols{display:block;width:100%;height:auto;overflow:visible}
/* The track has to be quiet enough that an empty month reads as empty. At .07 on ink it was as
   solid-looking as a filled bar, so a month with nothing in it looked like a month with a great
   deal in it. */
.cols .track{fill:rgba(var(--tint),.045)}
.cols .fill.in{fill:var(--gold-light)}
.cols .fill.out{fill:rgba(var(--tint),.66)}
.cols .tick{font-size:11px;fill:var(--muted-2);font-family:var(--sans)}
.cols .col{cursor:default;transition:opacity .18s var(--ease)}
.cols .col:focus-visible{outline:none}
.cols .col:focus-visible .track{stroke:var(--gold);stroke-width:1.5}
.cols-wrap.on .col:not(.lit){opacity:.45}
.cols .col.lit .track{fill:rgba(var(--tint),.12)}
.cols-wrap .spark-tip{top:auto}
.cols-wrap.on .spark-tip{opacity:1}
.legend{display:flex;gap:14px;align-items:center}
.legend .key{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted-2)}
.legend .key::before{content:"";width:10px;height:10px;border-radius:3px}
.legend .key.in::before{background:var(--gold-light)}
.legend .key.out::before{background:rgba(var(--tint),.66)}

/* ---- dues collection ----
   The mark is where the calendar has got to. A bar without it says 60%; a bar with it says 60%
   with four fifths of the season gone, which is the sentence the chapter actually needs. */
.progress.paced{position:relative;overflow:visible}
.progress.paced > span{border-radius:999px}
.progress.paced .mark{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ivory);
  border-radius:2px;opacity:.72;pointer-events:none}
.progress.paced .mark::after{content:"";position:absolute;top:-4px;left:50%;translate:-50% 0;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--ivory)}
.list.tight .item{padding:8px 0}

/* The Treasurer's budget rows, on the Officers' Desk. */
.budget-rows{display:flex;flex-direction:column;gap:6px}
.budget-row{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(120px,1.3fr) minmax(104px,.8fr) minmax(90px,.7fr) auto;
  gap:10px;align-items:end}
.budget-row .field{margin:0}
.budget-row > .btn{margin-bottom:2px}
@media (max-width:960px){.budget-row{grid-template-columns:1fr 1fr;gap:8px 10px}.budget-row > .btn{grid-column:2;justify-self:end}}

/* ================= A BROTHER'S OWN FILE ================= */
#file{display:flex;flex-direction:column;gap:20px}
.welcome-strip{border-radius:var(--radius);padding:22px 26px;border:1px solid rgba(226,179,79,.3);background:var(--pane);
  box-shadow:var(--depth);position:relative;overflow:hidden}
.welcome-strip::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 130% at 0% 0%,rgba(226,179,79,.14),transparent 62%)}
.welcome-strip > *{position:relative}
.welcome-strip h2{font-family:var(--serif);font-size:clamp(24px,3vw,32px);font-weight:600;line-height:1.08;letter-spacing:-.014em;margin:4px 0 0}
.welcome-strip .lede{margin:8px 0 0;max-width:62ch}
.file-grid{align-items:start}

/* The steps. A rail of named pips rather than a bar: a brother should be able to see how many
   there are, which he is on, and jump back to one he has already answered. */
.steps-rail{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 20px}
.pip{display:inline-flex;align-items:center;min-height:30px;padding:5px 11px;border-radius:999px;cursor:pointer;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted-2);
  background:rgba(var(--tint),.05);border:1px solid var(--glass-edge);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.pip:hover{color:var(--text);background:rgba(var(--tint),.1)}
.pip.done{color:var(--gold-2);border-color:var(--gold-line)}
.pip.on{background:var(--gold-fill);border-color:transparent;color:var(--on-gold)}
.pip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.form-actions.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.field .req{color:var(--gold);font-style:normal;margin-left:2px}
.statement{margin:0 0 18px;padding:14px 16px;border-radius:var(--radius-sm);font-size:13.5px;line-height:1.55;
  color:var(--text);background:rgba(var(--tint),.045);border:1px solid var(--glass-edge);border-left:3px solid var(--gold)}

/* A choice is a target, not a dot: on a phone the whole row is the thing you press.
   Written against `.field .choice` because a choice IS a <label> inside a .field, and the portal
   sets every field label in small caps — which is right for "DATE OF INITIATION" and wrong for
   the word "Yes", which is an answer rather than a heading. The radio needs the same treatment:
   `.field input` gives it a text box's padding and minimum height, and a radio button is neither. */
.choices{display:flex;flex-direction:column;gap:7px}
.field .choice{display:flex;align-items:center;gap:11px;min-height:46px;padding:9px 14px;border-radius:12px;cursor:pointer;
  font-size:14px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--text);
  background:rgba(var(--tint),.04);border:1px solid var(--glass-edge);margin:0;
  transition:background .18s var(--ease),border-color .18s var(--ease)}
.field .choice:hover{background:rgba(var(--tint),.09)}
.field .choice.on{border-color:rgba(226,179,79,.5);background:rgba(226,179,79,.1)}
.field .choice input[type="radio"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-height:0;
  padding:0;margin:0;flex:none;border-radius:999px;border:1.8px solid var(--muted-2);background:none;
  display:grid;place-items:center;box-shadow:none}
.field .choice input[type="radio"]:checked{border-color:var(--gold);background:none}
.field .choice input[type="radio"]:checked::after{content:"";width:9px;height:9px;border-radius:999px;background:var(--gold)}
.field .choice input[type="radio"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:700px){.choices{gap:8px}.choice{min-height:52px}}

/* The photograph. */
.portrait{aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background:var(--mat);
  border:1px solid var(--glass-edge);display:grid;place-items:center}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
/* The portrait well is --mat, which is dark in both themes on purpose — a face reads best on a
   dark mat. So its lettering takes the non-flipping companion: a theme token would be a dark
   brown on a dark mat every time the portal was set to paper. */
.portrait-empty{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--on-mat-2)}
.portrait-empty .ic{width:44px;height:44px}
.portrait-empty span{font-size:12px}
.handoff{margin-top:16px;text-align:center}
.handoff .qr{width:min(220px,100%);height:auto;border-radius:12px;display:block;margin:12px auto 10px;
  background:#fff;padding:8px;box-shadow:var(--depth)}
.handoff .small{color:var(--muted-2)}
.handoff-url{word-break:break-all;font-size:10.5px;color:var(--muted-3);margin:8px 0 12px}

/* What he has earned, on his own file. */
.honour-row{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin:4px 0 14px}
.honour-row figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--gold)}
.honour-row .mark{width:78px;display:block;color:var(--gold)}
.honour-row .mark.service{width:64px}
.honour-row figcaption{font-size:11.5px;color:var(--muted-2);text-align:center}

/* ---- the marks themselves ---- */
.ins{width:100%;height:auto;display:block;overflow:visible}
/* The services' own seals, in the services' own colours. */
.svc{width:100%;height:auto;display:block}
/* The Life Member shield: the Fraternity's own artwork, painted through as a mask so it takes the
   page's gold — which is a different gold on ink and on paper — instead of carrying one of its own. */
.lm{display:block;width:100%;aspect-ratio:260/363;background-color:currentColor;
  -webkit-mask:url("/welcome/img/life-member-mask.webp") center/contain no-repeat;
  mask:url("/welcome/img/life-member-mask.webp") center/contain no-repeat}
.lm-sm{height:100%;width:auto;aspect-ratio:260/363}
/* Where a browser cannot mask, the alternative to a mark is a word rather than a worse mark —
   and never the gold rectangle an unmasked fill would otherwise leave. */
@supports not ((mask-image: url("/welcome/img/life-member-mask.webp")) or (-webkit-mask-image: url("/welcome/img/life-member-mask.webp"))){
  .lm{background:none;aspect-ratio:auto;width:auto;display:inline-flex;align-items:center;
    padding:2px 7px;border:1px solid currentColor;border-radius:999px;
    font-family:var(--serif);font-size:11px;font-weight:700;letter-spacing:.04em}
  .lm::after{content:"ΑΦΑ Life"}
  .lm-sm::after{content:"ΑΦΑ"}
}
/* Beside a name a mark is the height of the line it sits on, and no wider than it has to be. */
.honours{display:inline-flex;gap:7px;align-items:center;color:var(--gold);vertical-align:middle}
.honours .honour{display:inline-flex;height:1.25em;min-height:19px}
.honours .ins,.honours .svc,.honours .lm{height:100%;width:auto}

/* ---- the telephone's own page ----
   Reached by scanning a code. No rail, no top bar, nothing to wander into. */
:root[data-view="hand"] body{background:var(--page)}
.hand{min-height:100dvh;display:grid;place-items:center;padding:24px 18px max(24px,env(safe-area-inset-bottom))}
.hand-box{width:min(420px,100%);text-align:center;padding:30px 24px;border-radius:var(--radius);
  background:var(--pane);border:1px solid var(--pane-edge);box-shadow:var(--shadow)}
.hand-box h2{font-family:var(--serif);font-size:clamp(24px,7vw,32px);font-weight:600;line-height:1.1;letter-spacing:-.014em;margin:6px 0 0}
.hand-box .lede{margin:10px 0 0}
.hand-do{display:flex;flex-direction:column;gap:11px;margin:22px 0 16px}
.hand-tick{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 4px;border-radius:999px;
  background:rgba(79,179,122,.16);border:1px solid rgba(79,179,122,.46);color:var(--green)}
.hand-tick .ic{width:30px;height:30px}

/* A select sitting in a card head — whose papers, which account, which year — is chrome the
   browser draws in its own colours unless told otherwise. */
.card-head select{padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--gold-dim);
  background:rgba(var(--tint),.03);color:var(--text);font:inherit;font-size:13px;max-width:100%}

/* ---- Accounts ----
   The reference for this screen came as a light mock in another design language: navy rail, white
   cards, its own type. The information design is taken from it exactly — five account cards over a
   detail panel over the activity table, with the masked number, the type, the opened date and the
   six-month trend where they sit in the mock. The palette is not, because the portal already reads
   in ink and in daylight and a screen built to one mock's colours would be the only room in the
   house with different paint. Everything below is mixed from the same tokens as the rest. */
/* ---- THE FINANCE SCREENS, BUILT TO THE CHAPTER'S OWN DRAWING ----
   The masthead, the account cards, one account opened out beside its actions, and the four
   finance screens along the foot: that composition is the chapter's, taken from the Accounts
   screen it drew. The colours are the chapter's too — the drawing was rendered in navy and this
   house is black and old gold, which is not a house style but the fraternity's, so the layout is
   the drawing's and the ink is Alpha's. */
.fin-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:start;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--gold-dim)}
.fin-eyebrow{margin:0;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.fin-title{margin:4px 0 0;font-family:var(--serif);font-size:clamp(32px,4.6vw,50px);font-weight:600;
  line-height:1;letter-spacing:-.025em;color:var(--ivory)}
.fin-charge{margin:8px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.fin-head-do{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-self:end}
.fin-quote{grid-column:2;margin:0;padding-left:16px;border-left:2px solid var(--gold-line);max-width:34ch;justify-self:end}
.fin-quote p{margin:0;font-family:var(--serif);font-size:15px;font-style:italic;line-height:1.5;color:var(--muted)}
.fin-quote cite{display:block;margin-top:6px;font-size:11px;font-style:normal;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-3)}

/* The month the screen is reading, shaped as a pill so it reads as a control and not a caption. */
.month-pill{display:inline-flex;align-items:center;gap:8px;padding:0 6px 0 14px;height:42px;
  border-radius:999px;border:1px solid var(--gold-line);background:var(--glass);color:var(--text)}
.month-pill .ic{width:17px;height:17px;color:var(--gold);flex:none}
.month-pill select{appearance:none;border:0;background:none;color:inherit;font:inherit;font-size:14px;
  font-weight:600;padding:0 10px 0 0;cursor:pointer}
.month-pill select:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}

/* The four finance screens, along the foot as the drawing has them. Treasury Report is a document
   rather than a screen — the stamped PDF a brother takes to a meeting — so it carries the
   download mark and reads as one. */
.fin-tabs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--gold-dim)}
.fin-tab-row{display:flex;flex-wrap:wrap;gap:6px}
.fin-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;border:1px solid transparent;
  background:none;color:var(--muted-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  text-decoration:none;transition:color .16s,background .16s,border-color .16s}
.fin-tab .ic{width:16px;height:16px}
.fin-tab:hover{color:var(--text);background:var(--glass)}
.fin-tab.on{color:var(--on-gold);background:var(--gold-fill);border-color:transparent}
.fin-creed{margin:0;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-3)}

/* ---- the accounts themselves ---- */
.acc-total-strip{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.acc-total-label{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.acc-total{margin:2px 0 0;font-family:var(--serif);font-size:clamp(30px,4vw,42px);font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--ivory)}
.acc-total-notes{display:grid;gap:4px;justify-items:end;text-align:right}
.acc-outside{margin:0;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted-2)}
.acc-outside .ic{width:15px;height:15px;color:var(--gold);flex:none}
.acc-shut-note{color:var(--muted-3)}

/* The icon badge on a card, in the detail head and on a rail row. One rule, three sizes: the
   drawing gives every account the same disc, and an account that changed size between the card
   and the panel would read as a different account. */
.acc-badge{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-dim);border:1px solid var(--gold-line)}
.acc-badge .ic{width:18px;height:18px;color:var(--gold-light)}
.acc-badge.sm{width:30px;height:30px}
.acc-badge.sm .ic{width:15px;height:15px}
.acc-badge.lg{width:52px;height:52px;border-radius:18px}
.acc-badge.lg .ic{width:24px;height:24px}

.acc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:var(--gap,16px);margin-bottom:22px}
.acc-card{text-align:left;cursor:pointer;font:inherit;color:inherit;min-height:196px;transition:border-color .18s,transform .18s}
.acc-card:hover{transform:translateY(-2px)}
.acc-card.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-line),var(--depth)}
.acc-card .head-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.acc-card .label{font-size:15px;font-weight:700;color:var(--text);line-height:1.25}
.acc-card-sub{margin:2px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-3)}
.acc-card .fig{font-size:clamp(23px,2.5vw,28px);margin-top:8px}
/* The card that opens one, drawn as a card so the row reads as a set rather than as four cards
   and a stray button. */
.acc-card-new{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 22px;
  min-height:196px;border-radius:var(--radius);border:1px dashed var(--gold-line);background:var(--glass-2);
  color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .18s,background .18s}
.acc-card-new:hover{border-color:var(--gold);background:var(--glass)}
.acc-card-new .label{margin:0;font-size:15px;font-weight:700;color:var(--text)}
.acc-card-new .note{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted-2)}

.acc-change{margin:6px 0 0;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.acc-change span{font-weight:500;color:var(--muted-2)}
.acc-change.up{color:var(--tone-green)}
.acc-change.down{color:var(--tone-red)}

/* A closed account is off the card row and still on the screen. It holds a ledger the chapter may
   need at an audit, and an account that simply vanished would take that history with it. */
.acc-shut{margin:0 0 22px;display:grid;gap:6px}
.acc-shut-h{margin:0 0 4px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-3)}
.acc-shut-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:12px;
  width:100%;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--glass-edge);
  background:var(--glass-2);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .16s}
.acc-shut-row:hover,.acc-shut-row.on{border-color:var(--gold-line)}
.acc-shut-row > .ic{width:16px;height:16px;color:var(--muted-3)}
.acc-shut-name{font-size:14px;font-weight:600;color:var(--muted)}
.acc-shut-when{font-size:12px;color:var(--muted-3)}
.acc-shut-fig{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted-2)}

.acc-detail{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:18px;margin-bottom:22px;align-items:start}
.acc-face-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.acc-face-name{min-width:0}
.acc-face-head h2{margin:0;font-size:24px;letter-spacing:-.01em}
.acc-sub{margin:3px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.acc-status{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.acc-status-label{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-3)}
.acc-purpose{margin:0 0 20px;max-width:64ch}
.acc-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px 40px;align-items:start}
.acc-balance .label{margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.acc-balance .fig{margin:4px 0 0;font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);font-weight:600;line-height:1.05;color:var(--ivory)}
.acc-meta{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.acc-meta div{display:grid;gap:2px;min-width:0}
.acc-meta dt{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-3)}
.acc-meta dd{margin:0;font-size:14px;color:var(--text)}
.acc-num{font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* The balance trend carries its own scale — see `trendArea` in charts.js for why a balance is one
   of the few figures here that cannot be read off a line with no axis on it. */
.acc-trend{margin-top:22px;padding-top:18px;border-top:1px solid var(--gold-dim)}
.acc-trend-h{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--text)}
.acc-trend-h span{font-weight:500;color:var(--muted-3)}
.acc-trend-h span::before{content:"· "}
.trend-wrap{width:100%;height:210px}
svg.trend{width:100%;height:100%;overflow:visible}
svg.trend .grid{stroke:var(--glass-edge);stroke-width:1}
svg.trend .area{fill:var(--gold-dim);stroke:none}
svg.trend .line{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
svg.trend .tick{fill:var(--muted-3);font-size:11px;font-family:var(--sans)}
svg.trend .tick.money{font-variant-numeric:tabular-nums}
svg.trend .pt circle{fill:var(--gold);stroke:var(--page);stroke-width:2;opacity:0;transition:opacity .14s}
svg.trend .pt .hit{fill:transparent}
svg.trend .pt:hover circle,svg.trend .pt:focus-visible circle{opacity:1}
svg.trend .pt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* The action rail. Each row says what it does and what that means, because "Transfer Funds" and
   "Download Statements" are both obvious until a brother is deciding which one he wants. */
.acc-rail{display:grid;gap:14px}
.acc-rail-h{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.acc-action{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;
  padding:12px 6px;border:0;border-top:1px solid var(--glass-edge);background:none;color:inherit;font:inherit;
  text-align:left;cursor:pointer;transition:background .16s}
.acc-action:first-of-type{border-top:0}
.acc-action:hover{background:var(--glass)}
.acc-action-ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--glass-edge)}
.acc-action-ico .ic{width:16px;height:16px;color:var(--gold)}
.acc-action-say{display:grid;gap:1px;min-width:0}
.acc-action-label{font-size:14px;font-weight:600;color:var(--text)}
.acc-action-note{font-size:11.5px;line-height:1.4;color:var(--muted-3)}
.acc-action-go .ic{width:16px;height:16px;color:var(--muted-3)}
.acc-action:hover .acc-action-go .ic{color:var(--gold)}

.acc-tip{display:flex;gap:12px;padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid rgba(226,162,63,.30);background:rgba(226,162,63,.09)}
.acc-tip-ico{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(226,162,63,.18)}
.acc-tip-ico .ic{width:16px;height:16px;color:var(--tone-amber)}
.acc-tip p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}

.acc-table-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.acc-table-head h3{margin:0;font-size:17px}
.acc-table-sub{margin:3px 0 0;font-size:12px;color:var(--muted-3)}
.acc-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.acc-search{position:relative;display:inline-flex;align-items:center}
.acc-search .ic{position:absolute;left:11px;width:16px;height:16px;color:var(--muted-2);pointer-events:none}
.acc-filters input,.acc-filters select{padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--gold-dim);background:rgba(var(--tint),.03);color:var(--text);font:inherit;font-size:13px}
/* After the rule above, or its shorthand padding puts the placeholder back under the magnifier. */
.acc-filters .acc-search input{padding-left:34px}
.acc-date{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted-2)}
.acc-table td.up{color:var(--tone-green)}
.acc-table td.down{color:var(--tone-red)}
.acc-table .num{font-weight:700;white-space:nowrap}
.acc-run{color:var(--muted)!important;font-weight:600!important}
.acc-when{white-space:nowrap;color:var(--muted)}
.acc-cat{color:var(--muted-2)}
.acc-leg{color:var(--muted-3);font-size:12px}
.acc-caption{margin:12px 0 0;font-size:12px;line-height:1.55;color:var(--muted-3);max-width:80ch}

@media (max-width:1040px){
  .fin-head{grid-template-columns:1fr}
  .fin-head-do{justify-self:start}
  .fin-quote{grid-column:1;justify-self:start;max-width:none}
  .acc-detail{grid-template-columns:1fr}
  .acc-total-notes{justify-items:start;text-align:left}
}
@media (max-width:640px){
  .acc-facts{grid-template-columns:1fr;gap:20px}
  .acc-meta{grid-template-columns:1fr}
  .acc-table-head{align-items:stretch}
  .acc-filters{width:100%}
  .acc-search{flex:1 1 100%}
  .acc-search input{width:100%}
  .acc-shut-row{grid-template-columns:auto minmax(0,1fr) auto;row-gap:2px}
  .acc-shut-when{grid-column:2 / -1}
  .fin-tabs{justify-content:flex-start}
  .trend-wrap{height:170px}
}

/* A shelf with nothing on it keeps its place — a brother has to be able to see that the voter
   drive has no photographs before it occurs to him to add any — but it does not compete with the
   shelves that do. */
.arch-chips .chip.bare{opacity:.55}
.arch-chips .chip.bare b{opacity:.6}
.arch-chips .chip.bare:hover,.arch-chips .chip.bare.active{opacity:1}

/* ---- Framed in Brotherhood: the head of the screen and the trip back ----
   The archive dims the house around it (see the data-view="photos" token block), so these sit on
   the dark mat with the photographs rather than on the page's own surfaces. */
.arch-hero{margin:0 0 26px}
.arch-hero figure{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--mat);
  border:1px solid var(--gold-line);box-shadow:var(--shadow)}
.arch-hero img{display:block;width:100%;max-height:min(58vh,560px);object-fit:cover;object-position:center 35%}
.arch-hero figcaption{position:absolute;inset:auto 0 0;padding:26px 24px 20px;
  background:linear-gradient(0deg,rgba(6,5,4,.94) 0%,rgba(6,5,4,.78) 42%,transparent 100%);color:var(--on-mat)}
.hero-kicker{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-mat-gold)}
.arch-hero h2{margin:0;font-family:var(--serif);font-size:clamp(22px,3.2vw,34px);line-height:1.1;letter-spacing:-.015em;color:var(--on-mat)}
.hero-sub{margin:8px 0 0;font-size:13px;color:var(--on-mat-2)}
.hero-auto{font-style:italic;opacity:.85}
.hero-do{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

.arch-lane{margin:8px 0 30px;padding:20px 0 4px;border-top:1px solid var(--gold-dim)}
.lane-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.lane-head h3{margin:2px 0 0;font-size:20px}
.lane-note{margin:0;font-size:12.5px;color:var(--muted-2);max-width:46ch}
.lane-strip{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 14px;scroll-snap-type:x proximity}
.lane-shot{flex:0 0 190px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;
  padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
.lane-shot img{width:190px;height:142px;object-fit:cover;border-radius:var(--radius-sm);
  border:1px solid var(--gold-line);background:var(--mat);transition:transform .18s,border-color .18s}
.lane-shot:hover img{transform:translateY(-2px);border-color:var(--gold)}
.lane-years{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.lane-cap{font-size:12.5px;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.feature-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;
  max-height:46vh;overflow-y:auto;margin:6px 0 16px;padding:2px}
.feature-opt{padding:0;border:2px solid transparent;border-radius:var(--radius-sm);overflow:hidden;
  background:none;cursor:pointer;line-height:0}
.feature-opt img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.feature-opt.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-dim)}

@media (max-width:640px){
  .arch-hero img{max-height:42vh}
  .arch-hero figcaption{padding:18px 16px 14px}
  .lane-shot,.lane-shot img{flex-basis:150px;width:150px}
  .lane-shot img{height:112px}
}