/* 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));
/* The same pane with nothing behind it. A list of answers is read, not looked through: anything
showing faintly through a citation is a word a brother has to fight past. */
--pane-solid:linear-gradient(165deg,#1E1812,#0D0B09);
--pane-edge:rgba(226,179,79,.34);
--bar:rgba(12,10,8,.94);
/* THE RAIL IS COLOURED GLASS, not a pale flat field.
It stands the whole height of every screen, so a flat fill there is the largest dead surface
in the portal. This is the chapter's own gold coming down it and the ink taking over at the
foot — the same move the tiles make, at the scale of a wall rather than a card. */
--rail:
radial-gradient(120% 52% at 50% -8%, rgba(226,179,79,.14), transparent 68%),
radial-gradient(90% 34% at 12% 44%, rgba(183,121,33,.09), transparent 72%),
linear-gradient(180deg,rgba(34,27,19,.86) 0%,rgba(20,16,12,.84) 46%,rgba(9,8,7,.90) 100%);
--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:34px; --gap:20px; --stack:16px; --pad:24px;
}
*{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:17px;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:29px;line-height:1.18}h3{font-size:23px;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:14.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;margin:0 0 6px;font-synthesis-weight:none}
.eyebrow.muted{color:var(--muted-2)}
.lede{color:var(--muted);font-size:18px;line-height:1.6}
.small{font-size:15.5px;color:var(--muted-2)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;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:14.5px;letter-spacing:.22em}
.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:32px;line-height:1;color:var(--ivory)}.kpi .value.gold{color:var(--gold-light)}
.kpi .label{font-size:14.5px;color:var(--muted-2);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.kpi .sub{font-size:14.5px;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:16.5px;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:15px;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:15.5px}
.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:13.5px;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)}
/* ---- the marks beside a brother's name ----
Life membership is an honour and sits with the name in gold. The compliance marks — his
certificates, the General Office, the background check — sit together in the column of
statuses, each under the word for what it is, so a row of four green pills still says which
green pill is which. */
.life{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 9px;border-radius:999px;
border:1px solid var(--gold-line);background:var(--gold-dim);color:var(--gold-light);
font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;vertical-align:2px}
.life svg{width:12px;height:12px}
.item .marks{align-items:center;justify-content:flex-end;flex-wrap:wrap}
.mark-of{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-3)}
.mark-edit{margin-top:4px;align-self:flex-end}
@media (max-width:700px){
.item .marks{justify-content:flex-start}
.life{margin-left:0;margin-top:4px}
}
.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:15.5px;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:15.5px;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:16.5px}
.table th{text-align:left;font-size:13.5px;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:17px}
.avatar.lg{width:56px;height:56px;font-size:22px}
.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:15.5px}
.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:14.5px;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:13.5px;letter-spacing:.17em;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:16.5px}
.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:14.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field .hint{font-size:14.5px;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:16.5px;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:15px;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:14.5px;line-height:1}
/* ---- boot & auth ---- */
.boot{
position:fixed;inset:0;z-index:1000;min-height:100vh;min-height:100svh;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:14px;padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));
text-align:center;color:#2d261d;overflow:hidden;
background:
radial-gradient(circle at 50% 41%,rgba(222,174,76,.13),transparent 27%),
radial-gradient(circle at 50% 100%,rgba(190,143,52,.08),transparent 45%),
linear-gradient(180deg,#faf4e8 0%,#f5ecdb 55%,#efe4d0 100%);
}
.boot-seal-stage{
position:relative;width:clamp(210px,42vw,310px);height:clamp(210px,42vw,310px);aspect-ratio:1/1;border-radius:50%;
overflow:hidden;isolation:isolate;flex:0 0 auto;
}
.boot-seal{
display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
aspect-ratio:1/1;object-fit:contain;object-position:center;opacity:1;
animation:none!important;filter:none!important;box-shadow:none!important;
}
.boot-seal-stage::after{content:none}
.boot-title{
margin:10px 0 0;color:#815913;font-size:clamp(15px,2.1vw,18px);
letter-spacing:.23em;font-weight:650;
}
.boot-note{
margin:0;color:#4a4136;font-family:var(--serif);font-size:clamp(21px,3vw,29px);
line-height:1.2;letter-spacing:.015em;
}
@media(max-width:520px){
.boot{justify-content:center;gap:12px;padding-inline:22px}
.boot-seal-stage{width:min(70vw,286px);height:min(70vw,286px)}
.boot-title{margin-top:8px}
.boot-note{font-size:clamp(21px,6.1vw,27px)}
}
/* 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:15.5px;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:16px}
.linklike{padding:0;border:0;background:none;font:inherit;font-size:15.5px;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:15px}
.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:15.5px}
.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:14.5px;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:13px;font-weight:800;letter-spacing:.17em;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:17px;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:19px}
.field input[inputmode="numeric"]::placeholder{font-family:var(--sans);letter-spacing:0;font-size:16.5px}
/* ---- 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}
/* Half again as large. It is the chapter's own seal and the first thing a brother sees; at 104px
it read as a bullet beside the wordmark rather than as the mark itself. */
.mono{width:74px;height:auto;display:block}
.mono text{font-family:var(--serif);fill:var(--gold)}
.mono .mono-m{font-size:60px;letter-spacing:-.02em}
.mono .mono-s{font-size:36px;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:14px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--ivory)}
/* House 512 sits between the chapter's name and its city, in the chapter's gold — it is what the
brothers call this place, and it is the only line of the three that is theirs alone.
`.house-name` rather than `.house`: that one already belongs to the dashboard's own grid, and
a brand span inheriting `display:grid` from it put the words through the side of the rail. */
.brand .house-name{margin-top:3px;font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.02em;color:var(--gold)}
.brand .place{margin-top:3px;font-size:12.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:15px;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:12.5px;font-weight:800;letter-spacing:.17em;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:15px;color:var(--muted-2);line-height:1.5}
.scripture .cite{font-family:var(--sans);font-style:normal;font-size:12.5px;font-weight:800;letter-spacing:.17em;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:16.5px;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)}
/* A section heading in the rail, set on its own hairline so the groups read as groups rather
than as a list that happens to have gaps in it. */
.nav .section{display:flex;align-items:center;gap:10px;margin:20px 12px 8px;font-size:13px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted-2);font-weight:800}
.nav .section::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-dim),transparent)}
.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:16px;color:var(--ivory)}
.topbar .who .role{font-size:13px;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:14.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory)}
.topbar .datestamp .place{font-family:var(--mono);font-size:13px;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:16px;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-solid);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:16px}
.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:15.5px;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:19px}
.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:12.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:12.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.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:15.5px}
.status-pill .lbl{color:var(--muted-2);font-size:13.5px;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:56px;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:14.5px;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:15.5px}
.news .item .title{font-weight:600;font-size:16.5px;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:22px;color:var(--gold-light);line-height:1}.celebration .date span{font-size:13px;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:28px}
.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.month-grid .dow{text-align:center;font-size:13px;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:14.5px;color:var(--muted-2);font-weight:700}
.month-grid .day button.num{width:100%;min-height:44px;padding:0;justify-content:flex-start}
.month-grid .day:has(button.num[aria-pressed="true"]){border-color:var(--gold);background:var(--gold-dim)}
.month-grid .day.today .num{color:var(--gold-light)}
.ev{display:block;font-size:15px;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:24px;line-height:1;color:var(--ivory)}.when span{font-size:14.5px;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:26px}
.toast{position:relative;padding:12px 16px;border-radius:14px;background:#17130f;border:1px solid var(--gold-line);color:var(--ivory);font-size:16.5px;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)}
/* ============================================================================
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:252px;--gutter:28px;--gap:18px}
.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:26px;--gap:18px;--stack:14px;--pad:22px}
.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:14.5px;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:18px;--gap:14px;--stack:12px;--pad:20px}
.topbar{gap:10px}
.topbar h1{font-size:23px}
.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:24px}
.grid.tiles .kpi .label{font-size:13px}
.form-grid{grid-template-columns:1fr}
.view{padding-top:18px}
.kpi{padding:15px 16px}
.kpi .value{font-size:27px}
.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)}
/* The room he is standing in. Lit glass rather than a highlight: the gold runs out of the left
edge and fades, which is the same gesture the rail itself makes down its height. */
.nav a.active{background:linear-gradient(90deg,rgba(226,179,79,.22),rgba(226,179,79,.05) 62%,transparent);border:1px solid rgba(226,179,79,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.nav a.active svg{opacity:1;color:var(--gold)}
.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:15.5px;font-weight:600;color:var(--ivory);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .by{font-size:15px;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(23px,2vw,29px);line-height:1;color:var(--on-mat)}
.hero-date .rest{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.17em;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:15.5px}
.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:46px;line-height:.9;color:var(--ivory)}
.wx-temp .deg{font-size:28px;vertical-align:super;line-height:1}
.wx-said{display:flex;flex-direction:column;gap:2px;min-width:0}
.wx-said strong{font-size:17px;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:15.5px}
.wx-day + .wx-day{border-top:1px solid rgba(var(--tint),.05)}
.wx-when{font-family:var(--mono);font-size:13px;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:14px;color:var(--blue);font-variant-numeric:tabular-nums}
.wx-wet.dry{color:transparent}
.wx-from{margin:12px 0 0;font-size:14px;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. */
/* The question box floats above everything below it on the screen, because what it suggests
hangs down over the hero and must not be painted under it. */
.ask{position:relative;z-index:30;margin-bottom:var(--gap)}
.ask-bar{position:relative;z-index:2;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:17.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{position:relative;z-index:1;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:10px 4px 0;font-size:15px;color:var(--muted-2)}
/* ---- what the box suggests, while he types ----
Hung under the bar rather than pushing the screen down, because a brother mid-question should
not have the House move beneath him. It is opaque, not glass: these are words to read at a
glance, and a photograph showing through them would cost the reading to save an effect. */
.ask-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;
max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;
padding:6px;border-radius:18px;border:1px solid var(--pane-edge);
background:var(--pane-solid);box-shadow:var(--depth-lift)}
.ask-results[hidden]{display:none}
.ask-results > a{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:12px;
border:1px solid transparent;color:var(--text);text-decoration:none}
.ask-results > a.on,.ask-results > a:hover{background:var(--glass);border-color:var(--glass-edge)}
.ask-results > a.on{border-color:rgba(226,179,79,.40)}
.ans-mark{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold-dim);color:var(--gold)}
.ans-mark svg{width:15px;height:15px}
.ans-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.ans-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 10px}
.ans-head strong{font-size:17px;color:var(--ivory)}
.ans-head .cite{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
/* Two lines of the passage, no more: enough to recognise the clause, not enough to become the
page. The whole of it is one press away. */
.ans-text{font-size:15.5px;line-height:1.5;color:var(--muted);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:700px){ .ask-results{max-height:56vh} }
.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:17px}
.answer .cite{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.answer-text{font-size:16px;line-height:1.55;color:var(--muted)}
.answer-doc{font-size:15px;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:15px;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:14.5px}.seg .big{font-size:16.5px}
.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:16px;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}
.reader.focus .surface{padding-top:clamp(34px,6vw,72px);padding-bottom:clamp(38px,7vw,84px)}
.reader.focus .law-article{display:block;margin:0}
.reader.focus .law-article + .law-article{margin-top:0}
.reader.focus .law-article-head{display:none}
.reader.focus .law-section{display:none;max-width:760px;margin:0 auto}
.reader.focus .law-section.focused{display:block}
.reader.focus .law-section .cite{justify-content:center;margin-bottom:10px}
.reader.focus .law-section h4{text-align:center;font-size:clamp(24px,3vw,34px);margin-bottom:22px}
.reader.focus .law-body{max-width:58ch;margin:0 auto;font-size:var(--read-size,18px);line-height:1.9}
.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:13.5px;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:17px;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:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.law-section h4{margin:0 0 9px;font-size:22px;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)}
/* A word the books define. Marked in the running text with a rule beneath it rather than a colour,
so a page of law does not read as a page of links, and so it sits under a brother's own
highlight without fighting it for the same ink. */
.term{color:inherit;cursor:help;border-bottom:1px dotted var(--gold);padding-bottom:1px;border-radius:2px}
.term:hover,.term:focus-visible{background:rgba(226,179,79,.14);border-bottom-style:solid;outline:none}
.term:focus-visible{box-shadow:0 0 0 2px rgba(226,179,79,.45)}
mark.hl .term{border-bottom-color:rgba(20,22,30,.5)}
.define{display:grid;gap:12px}
.define-kind{margin:0;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.define.said .define-kind{color:var(--muted-2)}
.define-short{margin:0;font-size:20px;line-height:1.45;font-weight:600;color:var(--ivory)}
.define-long{margin:0;font-size:17px;line-height:1.7;color:var(--text)}
.define-cite{margin:0;padding-top:10px;border-top:1px solid var(--edge);font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--muted-2)}
.define-also{margin:0;font-size:15px;color:var(--muted-2)}
.define-warn{display:flex;gap:8px;align-items:flex-start;margin:0;padding:11px 13px;border-radius:10px;background:var(--glass);font-size:14px;line-height:1.55;color:var(--muted-2)}
.define-warn svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--gold)}
.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:17px;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:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);min-width:9ch}
.toc-head{flex:1;font-size:16.5px}
.toc-row svg{width:13px;height:13px;color:var(--gold-light)}
.item .cite{font-family:var(--mono);font-size:13px;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:18px} /* 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:19.5px}
.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 House Account
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:17px}
.invite-body > span{font-size:15.5px;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:15.5px}
.steps strong{color:var(--ivory);font-size:16.5px}
.steps span{font-size:15px;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-solid:linear-gradient(165deg,#FDFAF4,#F3ECDE);
--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:
radial-gradient(120% 52% at 50% -8%, rgba(201,162,39,.20), transparent 68%),
radial-gradient(90% 34% at 12% 44%, rgba(183,121,33,.10), transparent 72%),
linear-gradient(180deg,rgba(253,249,241,.94) 0%,rgba(244,236,221,.95) 48%,rgba(233,222,201,.96) 100%);
--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"] ::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:19px;color:var(--gold-light)}
.order-section h4::before{content:counter(sec) ".";font-family:var(--mono);font-size:14.5px;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:13.5px;letter-spacing:.19em}
.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(19.5px,1.95vw,26px);color:#f0e6d6;text-wrap:balance}
.hero-words .motto{margin-top:20px;font-size:13.5px;font-weight:800;letter-spacing:.17em;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:15.5px;color:var(--muted-2)}
.roll-card .roll-count strong{font-family:var(--serif);font-size:22px;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:14.5px;letter-spacing:.04em}
/* Find a brother rather than scroll past fifty-four of them. */
.roll-find{position:relative;display:flex;align-items:center;gap:10px;margin:10px 0 2px;padding:0 14px;min-height:44px;
border-radius:999px;background:var(--glass);border:1px solid var(--glass-edge)}
.roll-find > svg{width:16px;height:16px;flex:none;color:var(--muted-2)}
.roll-find input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:16.5px;outline:none}
.roll-find input::placeholder{color:var(--muted-3)}
.roll-find input::-webkit-search-cancel-button{-webkit-appearance:none}
.roll-find .small{flex:none;color:var(--muted-2);font-variant-numeric:tabular-nums}
.roll-note{margin:12px 2px 0;color:var(--muted-2);font-size:14.5px;line-height:1.55}
.roll-man .zsaid{color:var(--muted-3)}
.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{flex:1;min-width:0;font-size:17px;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[hidden]{display:none}
.roll-man:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:8px}
.roll-man.room .who,.roll-man.zoom .who{color:var(--text)}
/* Its own name, not `.mark`: that class already belongs to the legacy timeline, which is a
112px vertical column, and the roll was quietly inheriting its direction and its width. */
.roll-man .roll-mark{display:flex;flex-direction:row;align-items:center;gap:6px;flex:none;width:auto}
/* 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)}
/* Three states, three colours, and each lit only when it is the one that holds. The room and the
Zoom are both present and both count; they are told apart by hue rather than by weight, because
neither is the lesser way to attend a meeting. */
.pipbtn.room.on{background:rgba(79,179,122,.20);border-color:rgba(79,179,122,.52);color:var(--green)}
.pipbtn.zoom.on{background:rgba(95,150,214,.20);border-color:rgba(95,150,214,.55);color:var(--blue)}
.pipbtn.absent.on{background:rgba(226,179,79,.12);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}
/* Three marks and a name in 390px. The name wraps rather than being cut: a Secretary calling
the roll has to tell one Freeman from another, and half a surname will not do it. */
.roll-man .who{line-height:1.3}
.roll-man .who .small{display:block}
.roll-man .zsaid{display:none}
/* The marks give up what they can spare so the name keeps its line. 36px is still a thumb —
the WCAG floor is 24 and Apple's guidance is 44 including the gap around it, which these
have. Past this the name would have to wrap, and a Secretary calling the roll has to tell
one Freeman from another at a glance. */
.roll-man .roll-mark{gap:4px}
.pipbtn{width:36px;height:38px}
.roll-find{padding:0 12px}
.roll-find input{font-size:18px}
}
@media (prefers-reduced-motion:reduce){ .pipbtn{transition:none} }
/* What Zoom proposed, with the evidence for each. Every one is a tick the Secretary can clear. */
.zoom-hits{display:flex;flex-direction:column;gap:2px;max-height:min(46vh,380px);overflow:auto}
.zoom-hit{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;cursor:pointer}
.zoom-hit:hover{background:var(--glass)}
.zoom-hit input{flex:none;width:18px;height:18px;accent-color:var(--gold)}
.zoom-hit .zh-who{flex:1;min-width:0}
.zoom-hit .zh-how{flex:none;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
/* ---- the flyer on an event ----
A brother designed it; it goes at the head of the event at the size it was drawn at, not as a
line saying a flyer exists. Capped in height so a tall poster does not push the date, the place
and the RSVP buttons off the bottom of a phone. */
.flyer{display:block;margin:0 0 16px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--gold-dim);background:var(--mat);line-height:0}
.flyer img{display:block;width:100%;height:auto;max-height:min(52vh,460px);object-fit:contain;background:var(--mat)}
.flyer:hover{border-color:var(--gold)}
.flyer:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* A bulletin whose art is still on its way from the General Office. */
.bull-waiting{display:grid;place-items:center;background:var(--glass);color:var(--muted-3);border:1px dashed var(--gold-dim)}
.bull-waiting svg{width:28px;height:28px}
/* A room the chapter is not in. Centred and unhurried — it is not an error, and it should not
wear the furniture of one. */
.shut-room{text-align:center;max-width:62ch;margin:0 auto;padding:44px 32px 38px}
.shut-room .shut-mark{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--gold-dim);color:var(--gold)}
.shut-room .shut-mark svg{width:28px;height:28px}
.shut-room h2{margin:6px 0 12px}
.shut-room .lede{margin:0 auto 14px;max-width:52ch}
.shut-room .small{max-width:52ch;margin:0 auto;color:var(--muted-2);line-height:1.6}
.shut-room .row{justify-content:center}
/* ---- being met at the door, and walked round ----
THE GREETING is set as a letter rather than as a dialogue: the seal at the head, the note in
the reading face at reading size, the chapter's name under it. It is the one screen in the
portal a brother will only ever see once, so it is worth the room. */
.greet{text-align:center}
.greet-seal{display:block;width:86px;margin:2px auto 18px}
.greet-seal img{width:100%;height:auto;display:block;border-radius:50%}
.greet-words{text-align:left;max-width:46ch;margin:0 auto}
.greet-words p{font-family:var(--serif);font-size:18px;line-height:1.62;color:var(--text);margin:0 0 .85em}
.greet-words p:last-child{margin-bottom:0}
.greet-by{margin:20px 0 4px;font-size:13px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--muted-2)}
.greet .form-actions{justify-content:center;margin-top:20px}
/* THE WALK. The spotlight is a hole cut in a wash by a very large shadow rather than four
rectangles around the target: one element, no seams, and it follows the real thing on the real
screen. The card is positioned in script because where there is room changes at every stop. */
.tour{position:fixed;inset:0;z-index:180;pointer-events:none}
.tour-light{position:fixed;border-radius:18px;opacity:0;pointer-events:none;
box-shadow:0 0 0 9999px rgba(4,3,2,.62), inset 0 0 0 2px rgba(226,179,79,.85), 0 0 34px rgba(226,179,79,.28);
transition:left .32s var(--ease),top .32s var(--ease),width .32s var(--ease),height .32s var(--ease),opacity .2s}
.tour-centre .tour-light{box-shadow:0 0 0 9999px rgba(4,3,2,.62)}
.tour-card{position:fixed;left:50%;top:50%;width:min(92vw,380px);pointer-events:auto;
padding:20px 22px 18px;border-radius:20px;background:var(--pane-solid);border:1px solid var(--pane-edge);
box-shadow:var(--depth-lift);transition:left .32s var(--ease),top .32s var(--ease)}
.tour-centre .tour-card{left:50%!important;top:50%!important;translate:-50% -50%}
.tour-card h3{margin:2px 0 8px;font-size:23px}
.tour-card p{font-size:16.5px;line-height:1.6;color:var(--muted);margin:0}
.tour-dots{display:flex;gap:5px;margin:16px 0 14px}
.tour-dots span{width:100%;height:3px;border-radius:2px;background:var(--glass-edge)}
.tour-dots span.done{background:var(--gold-dim)}
.tour-dots span.on{background:var(--gold)}
.tour-feet{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
@media (max-width:700px){
/* In a hand there is nowhere beside anything, so the card sits at the foot and the spotlight
does its own work above it. */
.tour-card{left:12px!important;right:12px;top:auto!important;bottom:calc(12px + env(safe-area-inset-bottom));width:auto}
}
@media (prefers-reduced-motion:reduce){ .tour-light,.tour-card{transition:none} }
/* Picking the walk up where he left it. A strip among the toasts, not a dialogue: he came back
to do something else and the House should not stand in the doorway. */
.tour-again{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;
background:var(--pane-solid);border:1px solid var(--pane-edge);box-shadow:var(--depth-lift);pointer-events:auto}
.tour-again svg{width:17px;height:17px;color:var(--gold);flex:none}
.tour-again-words{font-size:15.5px;color:var(--text)}
/* ---- from the President ----
A letter read in the portal is not a preview of an email; it is the letter. So it is set the
way a letter is set — a measure a man can read without moving his head, the display face for
the subject, the body in the reading face at reading size — rather than as another card. */
.letters .letter-list .item{align-items:flex-start}
.letter-mark{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-edge);color:var(--muted-2)}
.letter-mark svg{width:19px;height:19px}
.letter-mark.unread{background:var(--gold-dim);border-color:var(--gold-line);color:var(--gold)}
.letter-mark.draft{border-style:dashed}
.letter-list .title .dot{display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--gold);vertical-align:middle}
.letter{max-width:62ch;margin:0 auto;padding:34px clamp(22px,4vw,46px) 34px}
.letter-subject{margin:8px 0 0;font-size:clamp(30px,3.2vw,40px);line-height:1.12;color:var(--ivory)}
.letter-stand{margin:12px 0 0;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.45;color:var(--muted)}
.letter .gold-rule{margin:22px 0 24px}
.letter-salutation{margin:0 0 16px;font-family:var(--serif);font-size:21px;color:var(--ivory)}
.letter-body p{font-family:var(--serif);font-size:18px;line-height:1.72;color:var(--text);margin:0 0 1.05em}
.letter-body p:last-child{margin-bottom:0}
.letter-update{margin:26px 0 6px;padding:22px 24px;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--gold-line)}
.letter-update h3{margin:4px 0 10px;font-size:23px}
.letter-update p{font-family:var(--serif);font-size:16.5px;line-height:1.6;color:var(--text);margin:0 0 14px}
.letter-foot{display:flex;align-items:flex-start;gap:26px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid var(--gold-dim)}
.letter-foot > div{flex:1;min-width:200px}
.letter-sign{margin:8px 0 2px;font-family:var(--serif);font-style:italic;font-size:28px;color:var(--ivory)}
.letter-foot blockquote{flex:1;min-width:220px;margin:0;padding-left:22px;border-left:1px solid var(--gold-dim);font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:var(--muted)}
.letter-sent{margin-top:20px;color:var(--muted-3)}
/* A form filled from a picture, with the fields it strained over named at the top. It is a notice
rather than a warning: nothing has gone wrong, a man is simply being told where to look. */
.from-flyer{margin-bottom:18px;border-color:var(--gold-line);background:var(--gold-dim)}
.from-flyer p{margin:0 0 6px}
.from-flyer p:last-child{margin-bottom:0}
.from-flyer svg{width:16px;height:16px;vertical-align:-3px;color:var(--gold)}
@media (max-width:700px){
.letter{padding:24px 18px 28px}
.letter-foot{gap:18px}
.letter-foot blockquote{padding-left:0;border-left:0;border-top:1px solid var(--gold-dim);padding-top:16px}
}
/* ---- 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:19px;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:15.5px;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:17.5px;line-height:1.25;color:#fbf6ec;letter-spacing:-.008em;text-wrap:balance}
.hero-words .cd-note{font-size:14.5px;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:13px;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:.16em}
.hero-card .quiet{font-size:14.5px;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:15px;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:46px;margin-top:2px;color:#fbf6ec}
.next .what{flex:1;min-width:0}
.next .what h3{font-family:var(--serif);font-size:26px;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:14px;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:14.5px;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:15.5px;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:15.5px;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:13px;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:18px}
/* 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:13px;letter-spacing:.17em}
.door-words h3{font-family:var(--serif);font-size:25px;line-height:1.14;color:#fbf6ec;margin:8px 0 6px;text-wrap:balance}
.door-words .line{font-size:15px;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:12.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:32px;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:21px;color:var(--text)}
.mark .what{font-size:15px;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%)}
/* At .86 over the top this read as a black rectangle with words on it, and nobody could tell
there was a photograph of the chapter behind it at all. Enough to carry the words and no more;
the words themselves are measured off the pixels by the sky harness. */
.purpose .scrim{background:linear-gradient(180deg,rgba(6,5,4,.62) 0%,rgba(6,5,4,.34) 58%,rgba(6,5,4,.74) 100%)}
.purpose-words,.serve-words{position:relative;z-index:1;padding:18px}
.purpose-words .eyebrow{color:var(--on-mat);font-size:14.5px;letter-spacing:.16em;line-height:1.7}
.purpose-words .gold-rule{margin:12px 0 10px}
.purpose-words .line,.serve-words .line{font-size:14px;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:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);align-self:flex-start}
.thread .what strong{display:block;font-size:16px}
/* The smallest line on the smallest card, and the one thing the clearer sky cost: at --muted-2
over glass over a photograph it measured 4.1:1 in seven of the twelve skies. A step up the
scale, and it holds in all of them. The picture kept its gain; the words kept their floor. */
.thread .what .small{color:var(--muted)}
.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:16px}
.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:46px}
.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:28px;letter-spacing:-.01em;color:var(--ivory)}
.pulse-figure .delta{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:15px;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:14.5px;color:var(--muted-2)}
.spark-tip strong{display:block;font-family:var(--mono);font-size:15.5px;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:14px;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:14.5px}
.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 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:15.5px;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:15px;color:var(--muted-2)}
.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:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)}
.bull h3{margin:0;font-size:21px;line-height:1.28}
.bull-lead h3{font-size:clamp(25px,2.2vw,32px);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:16.5px;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:17px}
.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:15px}
.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:14px;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:15px;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:16px;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:14px;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:19px}
.bull-lead h3{font-size:23px}
.wire-head .actions{width:100%}
.wire-head .actions .btn{flex:1}
}
/* ================================================================= 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 .house-name,
: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-solid:linear-gradient(165deg,#1A181A,#0C0B0D);
--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(28px,3.1vw,38px);font-weight:600;line-height:1.05;letter-spacing:-.012em;margin:2px 0 0}
.arch-head .count{font-size:15.5px;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)}
#archive>.arch-search{display:block;width:100%;min-width:0;flex:none;margin-top:0}
.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:16.5px;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:21px;font-weight:600;letter-spacing:-.008em;margin:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.occ-head .occ-when{font-size:14.5px;color:var(--muted-2);margin-top:3px}
.occ-head .by{font-size:13px;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:15px;font-weight:600;color:#fbf7ef;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot .said span{display:block;font-size:14.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:15px;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:19px;font-weight:600;color:#fbf7ef;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-title span{display:block;font-size:14px;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:15.5px;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:17px;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:13px;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:23px;font-weight:600;color:#fbf7ef;letter-spacing:-.01em}
.dial .read span{display:block;font-size:13px;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:21px}
/* 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:13.5px;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:15px;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:17px;font-weight:600;color:var(--muted-2);letter-spacing:0}
.head-card .note{margin:8px 0 0;font-size:14.5px;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:32px;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(28px,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:17px;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:17.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:13.5px;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:15.5px;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:16px;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:15.5px;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:27px;font-weight:600;fill:var(--ivory);letter-spacing:-.01em}
.ring-say{margin:-6px 0 0;font-size:13.5px;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:15.5px;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:16px;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:13.5px;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:14.5px;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(26px,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:14px;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:16px;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