:root {
  --paper:#f9f8f5; --paper-2:#f0ece1; --paper-3:#e7e0d0; --ink:#1a1a4e; --ink-soft:#5a5566;
  --ink-faint:#817b8d; --clay:#c2542f; --clay-deep:#9e3f22; --gold:#c5a880; --forest:#2e6151;
  --moss:#3e6b4f; --line:rgba(26,26,78,.16); --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif; --hand:"Caveat",cursive; --shadow:7px 8px 0 -2px rgba(26,26,78,.14); --max:1180px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { min-height:100vh; color:var(--ink); background:radial-gradient(70% 50% at 10% 0,rgba(197,168,128,.2),transparent 65%),radial-gradient(80% 60% at 100% 15%,rgba(46,97,81,.11),transparent 60%),var(--paper); font:400 16px/1.5 var(--sans); }
button,input,textarea { font:inherit; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible { outline:3px solid rgba(194,84,47,.3); outline-offset:2px; }
[hidden] { display:none!important; }
.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; }
.grain { position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.045; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hall-header { min-height:76px; padding:.7rem clamp(20px,5vw,70px); display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); background:rgba(249,248,245,.9); backdrop-filter:blur(10px); position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:.7rem; color:inherit; text-decoration:none; }
.brand span { display:flex; flex-direction:column; }
.brand b { font:600 1.15rem var(--serif); }
.brand small { color:var(--forest); font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.header-tools { display:flex; align-items:center; gap:.5rem; }
.header-tool,.quick-exit { padding:.55rem .7rem; border:1px solid var(--line); border-radius:9px; background:white; color:var(--ink); font-size:.76rem; font-weight:700; cursor:pointer; }
.header-tool:hover { border-color:var(--ink); background:var(--paper-2); }
.quick-exit { background:var(--ink); border-color:var(--ink); color:white; }
.quick-exit:hover { background:var(--clay-deep); }

main { max-width:var(--max); margin:auto; padding:0 clamp(20px,5vw,64px) 100px; }
.hall-intro { padding:clamp(46px,7vw,84px) 0 34px; display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(30px,6vw,80px); align-items:end; }
.eyebrow,.side-label { display:block; margin-bottom:.8rem; color:var(--forest); font-size:.73rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.hall-intro h1,.tracker h2,.entries h2,.dialog h2,.discreet-cover h1 { font:600 clamp(2rem,4.7vw,4.2rem)/1.02 var(--serif); letter-spacing:-.025em; }
.hall-intro>div>p { max-width:62ch; margin-top:1.15rem; color:var(--ink-soft); font-size:1.1rem; }
.privacy-note { display:flex; gap:.8rem; padding:1.25rem 1.3rem; border-radius:18px 12px 20px 13px; background:var(--ink); color:var(--paper); box-shadow:var(--shadow); transform:rotate(1deg); }
.privacy-note>span { color:var(--gold); font-size:1.5rem; }
.privacy-note p { color:rgba(249,248,245,.76); font-size:.85rem; }
.privacy-note strong { display:block; margin-bottom:.3rem; color:white; }

.hall-orientation { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,5vw,64px); margin-bottom:1.25rem; padding:clamp(1.25rem,3vw,2rem); border:1.5px solid var(--line); border-radius:22px 14px 25px 16px; background:rgba(255,255,255,.68); }
.hall-orientation__intro h2 { font:600 clamp(1.65rem,3vw,2.45rem)/1.08 var(--serif); letter-spacing:-.02em; }
.hall-orientation__intro p { margin-top:.7rem; color:var(--ink-soft); }
.hall-orientation__steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.hall-orientation__steps>div { display:grid; grid-template-columns:28px 1fr; gap:.55rem; align-items:start; }
.hall-orientation__steps span { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:var(--forest); color:white; font-size:.7rem; font-weight:800; }
.hall-orientation__steps p { color:var(--ink-soft); font-size:.8rem; }
.hall-orientation__steps b { display:block; color:var(--ink); }
.hall-orientation__boundary { grid-column:1/-1; padding:.7rem .8rem; border-left:4px solid var(--clay); background:rgba(194,84,47,.07); color:var(--ink-soft); font-size:.78rem; }
.hall-orientation__boundary b { color:var(--ink); }

.support-menu { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1.25rem; margin-bottom:clamp(60px,8vw,100px); }
.support-card { min-height:116px; padding:1rem 1.1rem; text-align:left; color:var(--ink); cursor:pointer; background:rgba(255,255,255,.55); border:1.5px solid var(--line); border-radius:16px 12px 18px 11px; transition:.18s; }
.support-card:hover,.support-card:focus-visible { transform:translateY(-3px); border-color:var(--ink); box-shadow:4px 5px 0 -1px rgba(26,26,78,.12); }
.support-card.is-active { background:var(--ink); color:white; border-color:var(--ink); }
.support-card>span { float:right; color:var(--clay); font:700 .72rem var(--serif); }
.support-card b,.support-card small { display:block; }
.support-card b { max-width:20ch; font:600 1.08rem/1.2 var(--serif); }
.support-card small { margin-top:.5rem; color:var(--ink-faint); }
.support-card.is-active small { color:rgba(255,255,255,.62); }

.tracker,.entries { scroll-margin-top:100px; }
.tracker-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; padding-bottom:1.5rem; border-bottom:2px solid var(--ink); }
.tracker h2,.entries h2 { font-size:clamp(2rem,4vw,3.3rem); }
.tracker-head p { max-width:68ch; margin-top:.7rem; color:var(--ink-soft); }
.hand { display:block; color:var(--clay-deep); font:700 1.35rem var(--hand); transform:rotate(-1deg); }
.text-button { padding:.5rem; border:0; background:transparent; color:var(--forest); font-weight:700; cursor:pointer; white-space:nowrap; }
.text-button span { display:inline-grid; min-width:25px; height:25px; margin-left:.3rem; place-items:center; border-radius:50%; background:var(--forest); color:white; }

.workspace { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:1.4rem; margin-top:1.5rem; align-items:start; }
.capture-card,.side-card,.saved-entry { background:rgba(255,255,255,.76); border:1.5px solid var(--line); border-radius:22px 14px 25px 16px; box-shadow:0 16px 50px -35px rgba(26,26,78,.5); }
.capture-card { padding:clamp(1.25rem,4vw,2.6rem); }
.capture-status-row { display:flex; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.draft-label { color:var(--forest); font-size:.73rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.save-state { color:var(--ink-faint); font-size:.78rem; font-weight:600; }
.save-state.is-saving { color:var(--clay-deep); }
.save-state.is-saved { color:var(--moss); }
.capture-opening { margin:1.8rem 0 1rem; }
.capture-opening h3,.panel-heading h3 { font:600 clamp(1.65rem,3vw,2.35rem)/1.12 var(--serif); }
.capture-opening p,.panel-heading p { margin-top:.45rem; color:var(--ink-soft); }
.field { display:block; }
.field--spaced { margin-top:1.15rem; }
.field>span,.field-label { display:block; margin-bottom:.55rem; color:var(--forest); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.field em,.field-label em { color:var(--ink-faint); font-style:normal; letter-spacing:0; text-transform:none; }
.field textarea,.field input,.field select,.map-field textarea { width:100%; padding:.9rem 1rem; resize:vertical; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:12px; font:500 1rem/1.55 var(--sans); }
.field textarea:focus,.field input:focus,.field select:focus,.map-field textarea:focus { border-color:var(--ink); }
.field--story textarea { min-height:260px; border:0; border-bottom:2px solid var(--ink); border-radius:0; padding:1rem .2rem; background:transparent; font:500 1.08rem/1.65 var(--sans); }
.field>small { display:block; margin-top:.35rem; color:var(--ink-faint); font-size:.75rem; text-align:right; }
.field--date { max-width:330px; margin-top:1.15rem; }
.capture-row,.panel-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; }
.capture-button,.secondary { padding:.7rem .85rem; color:var(--ink); background:transparent; border:1.5px solid var(--line); border-radius:10px; font-size:.84rem; font-weight:700; cursor:pointer; }
.capture-button:hover,.secondary:hover { border-color:var(--ink); background:var(--paper-2); }
.capture-button.is-recording { background:var(--clay); border-color:var(--clay); color:white; }
.capture-note,.already-saved { margin-top:.55rem; color:var(--ink-faint); font-size:.75rem; }
.media-list { display:grid; gap:.6rem; margin-top:1rem; }
.media-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.75rem .85rem; border:1px solid var(--line); border-radius:11px; background:var(--paper-2); }
.media-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:var(--ink); color:white; font-size:.72rem; font-weight:800; }
.media-copy { min-width:0; }
.media-copy b,.media-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-copy b { font-size:.85rem; }
.media-copy small { color:var(--ink-faint); font-size:.72rem; }
.media-item audio { grid-column:2/4; width:100%; height:34px; }
.media-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }
.media-actions button,.media-actions a { border:0; background:none; color:var(--forest); font-size:.75rem; font-weight:700; cursor:pointer; text-decoration:none; }
.media-actions .remove-media { color:var(--clay-deep); }
.media-transcript { grid-column:2/4; padding:.7rem; border-left:3px solid var(--gold); background:rgba(255,255,255,.55); }
.media-transcript b { display:block; color:var(--forest); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.media-transcript p { margin-top:.25rem; color:var(--ink-soft); font-size:.8rem; white-space:pre-wrap; }
.image-preview { grid-column:2/4; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:white; }
.image-preview summary { padding:.55rem .7rem; color:var(--forest); font-size:.75rem; font-weight:800; cursor:pointer; }
.image-preview[open] summary { border-bottom:1px solid var(--line); }
.image-preview img { display:block; width:100%; max-height:420px; object-fit:contain; background:var(--paper-2); }
.image-artifact-details { grid-column:2/4; padding:.7rem; border-left:3px solid var(--forest); background:rgba(46,97,81,.06); }
.image-artifact-details b { display:block; color:var(--forest); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.image-detail-chips { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem; }
.image-detail-chips span { padding:.25rem .45rem; border:1px solid var(--line); border-radius:99px; background:white; color:var(--ink-soft); font-size:.68rem; font-weight:700; }
.image-artifact-details details { margin-top:.5rem; }
.image-artifact-details summary { color:var(--ink); font-size:.75rem; font-weight:800; cursor:pointer; }
.image-artifact-details p { margin-top:.4rem; color:var(--ink-soft); font-size:.78rem; white-space:pre-wrap; }
.capture-error { min-height:1.2rem; margin-top:.6rem; color:var(--clay-deep); font-size:.82rem; font-weight:700; }
.mic-session { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.7rem; padding:.65rem .8rem; border:1px solid rgba(46,97,81,.35); border-radius:10px; background:rgba(46,97,81,.08); color:var(--forest); font-size:.78rem; font-weight:800; }
.mic-session[hidden] { display:none; }
.mic-session span { display:flex; align-items:center; gap:.45rem; }
.mic-session i { width:.55rem; height:.55rem; border-radius:50%; background:var(--moss); box-shadow:0 0 0 3px rgba(46,97,81,.12); }
.mic-session button { padding:.25rem; border:0; border-bottom:1px solid currentColor; background:none; color:var(--forest); font:inherit; cursor:pointer; }
.storage-summary { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; margin-top:.7rem; padding:.7rem .8rem; border:1px dashed var(--line); border-radius:10px; color:var(--ink-faint); font-size:.72rem; }
.storage-summary b { color:var(--ink-soft); }
.storage-summary span+span { padding-left:.8rem; border-left:1px solid var(--line); }
.storage-summary button { margin-left:auto; padding:.2rem; border:0; border-bottom:1px solid currentColor; background:none; color:var(--forest); font:inherit; font-weight:800; cursor:pointer; }
.attachment-summary { min-height:1em; margin-top:.7rem; color:var(--forest); font-size:.75rem; font-weight:800; }
.capture-decisions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.primary { padding:.8rem 1.25rem; color:white; background:var(--clay); border:2px solid var(--ink); border-radius:12px 9px 14px 10px; box-shadow:4px 5px 0 -1px rgba(26,26,78,.16); font-weight:700; cursor:pointer; }
.primary:hover { background:var(--clay-deep); transform:translate(-1px,-1px); }
.primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.optional-panel { margin-top:1.8rem; padding-top:1.8rem; border-top:3px double var(--line); animation:fade .25s ease; }
.optional-panel--sense { border-top-color:var(--forest); }
.panel-heading { margin-bottom:1.5rem; }
.choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; }
.choice-grid--compact { grid-template-columns:repeat(4,1fr); }
.choice-grid button,.choice-row button { padding:.7rem; text-align:left; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:10px; font-size:.82rem; font-weight:600; cursor:pointer; }
.choice-grid button:hover,.choice-grid button.is-selected,.choice-row button:hover,.choice-row button.is-selected { border-color:var(--ink); background:rgba(197,168,128,.55); }
.field-label { margin-top:1.25rem; }
.safety-check { padding:1.1rem; border-radius:14px; background:rgba(46,97,81,.08); }
.safety-check>b { display:block; font:600 1.05rem/1.35 var(--serif); }
.choice-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.support-first { margin-top:1rem; padding:1rem; border-left:4px solid var(--clay); background:rgba(194,84,47,.09); }
.support-first strong { display:block; }
.support-first p { margin:.3rem 0 .8rem; color:var(--ink-soft); font-size:.85rem; }
.reflection-group { margin-top:1rem; border:1.5px solid var(--line); border-radius:13px; background:rgba(255,255,255,.55); }
.reflection-group summary { padding:1rem; cursor:pointer; font-weight:800; }
.reflection-group summary span { color:var(--ink-faint); font-size:.75rem; font-weight:500; }
.reflection-group[open] { padding:0 1rem 1rem; }
.reflection-group[open] summary { margin:0 -1rem .2rem; border-bottom:1px solid var(--line); }
.reflection-group>p { margin:.75rem 0; color:var(--ink-soft); font-size:.85rem; }
.behavior-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.behavior-grid button { min-height:105px; padding:.8rem; text-align:left; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:12px 9px 14px 10px; cursor:pointer; }
.behavior-grid button:hover,.behavior-grid button.is-selected { border-color:var(--ink); background:rgba(197,168,128,.38); box-shadow:3px 4px 0 -1px rgba(26,26,78,.1); }
.behavior-grid b,.behavior-grid small { display:block; }
.behavior-grid b { font:600 .95rem/1.2 var(--serif); }
.behavior-grid small { margin-top:.4rem; color:var(--ink-soft); font-size:.76rem; line-height:1.35; }
.map-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.map-field { padding:.8rem; border-radius:11px; background:var(--paper-2); }
.map-field--wide { grid-column:1/-1; }
.map-field b,.map-field small { display:block; }
.map-field b { color:var(--forest); font-size:.84rem; }
.map-field small { min-height:2.5em; margin:.25rem 0 .55rem; color:var(--ink-soft); font-size:.75rem; }
.map-field textarea { min-height:90px; padding:.65rem; background:white; font-size:.85rem; }

.side-panel { display:flex; flex-direction:column; gap:1rem; }
.side-card { padding:1.25rem; }
.side-card ul { display:grid; gap:.65rem; list-style:none; }
.side-card li { position:relative; padding-left:1.25rem; color:var(--ink-soft); font-size:.86rem; }
.side-card li::before { content:"✓"; position:absolute; left:0; color:var(--moss); font-weight:800; }
.side-card--practice { background:rgba(197,168,128,.2); }
.side-card--practice p { color:var(--ink-soft); font-size:.86rem; }
.side-card--pattern { background:var(--ink); color:white; transform:rotate(.6deg); }
.side-card--pattern .side-label { color:var(--gold); }
.side-card--pattern p { margin-bottom:1rem; color:rgba(255,255,255,.72); font-size:.86rem; }
.secondary--small { padding:.55rem .7rem; font-size:.78rem; }
.side-card--pattern .secondary { color:white; border-color:rgba(255,255,255,.3); }

.entries { margin-top:80px; }
.entries-head { display:flex; justify-content:space-between; align-items:end; padding-bottom:1rem; border-bottom:2px solid var(--ink); }
.entries-tools { display:flex; align-items:center; gap:.7rem; }
.text-danger { padding:.5rem; border:0; background:none; color:var(--clay-deep); font-weight:700; cursor:pointer; }
.empty-state { padding:4rem 1rem; text-align:center; color:var(--ink-soft); }
.empty-state b { color:var(--ink); font:600 1.4rem var(--serif); }
.entry-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.3rem; }
.saved-entry { padding:1.25rem; }
.saved-entry__meta { display:flex; justify-content:space-between; gap:.5rem; font-size:.73rem; }
.saved-entry__area { color:var(--forest); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.saved-entry time { color:var(--ink-faint); }
.saved-entry h3 { margin:.9rem 0 .5rem; font:600 1.25rem/1.25 var(--serif); }
.saved-entry>p { color:var(--ink-soft); font-size:.9rem; white-space:pre-wrap; }
.saved-entry__tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.8rem; }
.saved-entry__tags span { padding:.28rem .5rem; border:1px solid var(--line); border-radius:99px; background:var(--paper-2); font-size:.7rem; font-weight:700; }
.saved-entry__media { display:grid; gap:.4rem; margin-top:.7rem; }
.saved-entry__actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line); }
.saved-entry__actions button { border:0; background:none; color:var(--forest); font-weight:700; cursor:pointer; }
.saved-entry__actions button:last-child { margin-left:auto; color:var(--clay-deep); }

.dialog { width:min(650px,calc(100% - 30px)); max-height:90vh; padding:clamp(1.5rem,4vw,2.4rem); overflow:auto; color:var(--ink); background:var(--paper); border:2px solid var(--ink); border-radius:22px 14px 25px 16px; box-shadow:12px 14px 0 -3px rgba(26,26,78,.22); }
.dialog::backdrop { background:rgba(26,26,78,.55); backdrop-filter:blur(3px); }
.dialog-close { position:absolute; top:.8rem; right:1rem; border:0; background:none; color:var(--ink-faint); font-size:1.8rem; cursor:pointer; }
.dialog-mark { display:grid; width:45px; height:45px; margin-bottom:1rem; place-items:center; border-radius:50%; background:var(--moss); color:white; font-weight:800; }
.dialog h2 { font-size:clamp(1.8rem,4vw,2.7rem); }
.dialog>p { margin-top:.7rem; color:var(--ink-soft); }
.dialog-actions { display:grid; gap:.55rem; margin-top:1.4rem; }
.dialog-actions button { padding:.75rem .9rem; text-align:left; color:var(--ink); background:white; border:1.5px solid var(--line); border-radius:10px; font-size:.88rem; font-weight:700; cursor:pointer; }
.dialog-actions button:hover { border-color:var(--ink); background:var(--paper-2); }
.dialog-actions--row { grid-template-columns:repeat(2,1fr); }
.dialog-status { min-height:1.4rem; color:var(--forest)!important; font-weight:700; }
.transcript-consent,.transcript-editor { margin-top:1rem; }
.consent-check { display:flex; align-items:flex-start; gap:.65rem; margin-top:1rem; padding:.8rem; border:1.5px solid var(--line); border-radius:10px; background:white; color:var(--ink-soft); font-size:.84rem; }
.consent-check input { width:1.1rem; height:1.1rem; margin-top:.1rem; accent-color:var(--forest); }
.transcript-separation { margin-top:.7rem; padding:.7rem; border-radius:9px; background:rgba(46,97,81,.08); color:var(--ink-soft); font-size:.8rem; }
.transcript-separation b { color:var(--forest); }
.image-details-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin-top:1rem; }
.image-details-wide { grid-column:1/-1; }
.dialog--redaction { width:min(920px,calc(100% - 30px)); }
.redaction-safety { display:grid; gap:.2rem; margin-top:1rem; padding:.8rem 1rem; border-left:4px solid var(--clay); background:rgba(194,84,47,.08); }
.redaction-safety b { color:var(--clay-deep); }
.redaction-safety span,.redaction-help { color:var(--ink-soft); font-size:.82rem; }
.redaction-stage { position:relative; display:grid; min-height:220px; margin-top:1rem; place-items:center; overflow:auto; border:1.5px solid var(--line); border-radius:12px; background:repeating-conic-gradient(var(--paper-2) 0 25%,white 0 50%) 0/20px 20px; }
.redaction-stage canvas { display:block; max-width:100%; height:auto; cursor:crosshair; touch-action:none; }
.redaction-stage p { position:absolute; padding:.6rem .8rem; border-radius:8px; background:rgba(249,248,245,.92); color:var(--ink-soft); font-weight:700; }
.redaction-help { margin-top:.55rem; }
.redaction-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-top:.8rem; }
.redaction-toolbar button { padding:.55rem .7rem; border:1px solid var(--line); border-radius:8px; background:white; color:var(--forest); font-size:.78rem; font-weight:800; cursor:pointer; }
.redaction-toolbar button:disabled,.dialog-actions button:disabled { opacity:.45; cursor:not-allowed; }
.redaction-toolbar span { margin-left:auto; color:var(--ink-faint); font-size:.78rem; font-weight:700; }
.redaction-keyboard { margin-top:.8rem; padding:.7rem .8rem; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.55); }
.redaction-keyboard summary { color:var(--forest); font-size:.8rem; font-weight:800; cursor:pointer; }
.redaction-keyboard>p { margin-top:.45rem; color:var(--ink-soft); font-size:.78rem; }
.redaction-number-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; margin:.7rem 0; }
.redaction-number-grid .field>span { margin-bottom:.25rem; font-size:.65rem; }
.redaction-number-grid .field input { padding:.5rem .6rem; }
.redaction-review { margin-top:.8rem; }
.dialog--pattern { width:min(980px,calc(100% - 30px)); }
.pattern-summary { display:grid; gap:1rem; margin-top:1rem; }
.pattern-overview { padding:1rem; border-radius:12px; background:var(--paper-2); }
.pattern-overview>b { display:block; font:600 1.2rem var(--serif); }
.pattern-facts { display:grid; gap:.7rem; margin-top:.7rem; }
.pattern-fact { padding-top:.65rem; border-top:1px solid var(--line); }
.pattern-fact:first-child { padding-top:0; border-top:0; }
.pattern-fact strong { display:block; color:var(--forest); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.pattern-fact span { color:var(--ink-soft); font-size:.88rem; }
.pattern-section { padding:1rem; border:1.5px solid var(--line); border-radius:14px; background:white; }
.pattern-section__heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.pattern-section__heading h3 { margin-top:.15rem; font:600 1.25rem/1.2 var(--serif); }
.pattern-section__heading>span { color:var(--ink-faint); font-size:.72rem; font-weight:800; text-transform:uppercase; }
.pattern-timeline { display:grid; margin-top:1rem; }
.timeline-entry { position:relative; display:grid; grid-template-columns:34px 1fr; gap:.75rem; padding-bottom:1rem; }
.timeline-entry:last-child { padding-bottom:0; }
.timeline-entry::before { position:absolute; top:30px; bottom:0; left:14px; width:2px; background:var(--line); content:""; }
.timeline-entry:last-child::before { display:none; }
.timeline-marker { z-index:1; display:grid; width:30px; height:30px; place-items:center; border-radius:50%; background:var(--forest); color:white; font-size:.72rem; font-weight:800; }
.timeline-entry__meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem; color:var(--ink-faint); font-size:.7rem; font-weight:700; }
.timeline-entry h4 { margin-top:.25rem; font:600 1rem/1.3 var(--serif); }
.timeline-entry p { margin-top:.35rem; color:var(--ink-soft); font-size:.8rem; }
.timeline-entry small { display:block; margin-top:.45rem; color:var(--ink-faint); }
.timeline-entry button { margin-top:.55rem; padding:.35rem 0; border:0; border-bottom:1px solid currentColor; background:none; color:var(--forest); font-size:.75rem; font-weight:800; cursor:pointer; }
.timeline-tags { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.45rem; }
.timeline-tags span { padding:.25rem .4rem; border-radius:99px; background:var(--paper-2); color:var(--ink-soft); font-size:.65rem; }
.pattern-boundary { margin-top:.65rem; padding:.65rem .75rem; border-left:4px solid var(--forest); background:rgba(46,97,81,.08); color:var(--ink-soft); font-size:.78rem; }
.pattern-observations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin-top:.8rem; }
.pattern-observation { padding:.85rem; border:1px solid var(--line); border-radius:11px; background:var(--paper-2); }
.pattern-observation h4 { margin-top:.25rem; font:600 1rem/1.25 var(--serif); }
.pattern-observation p { margin-top:.35rem; color:var(--ink-soft); font-size:.78rem; }
.observation-evidence { color:var(--forest); font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.observation-choices { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.65rem; }
.observation-choices button { padding:.35rem .5rem; border:1px solid var(--line); border-radius:99px; background:white; color:var(--ink-soft); font-size:.68rem; font-weight:800; cursor:pointer; }
.observation-choices button[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:white; }
.pattern-note { display:grid; gap:.3rem; margin-top:.85rem; }
.pattern-note>span { color:var(--ink); font-size:.78rem; font-weight:800; }
.pattern-note em { color:var(--ink-faint); font-style:normal; font-weight:500; }
.pattern-note textarea { width:100%; padding:.7rem; resize:vertical; border:1.5px solid var(--line); border-radius:9px; background:white; color:var(--ink); font:inherit; }
.pattern-note small { color:var(--ink-faint); font-size:.68rem; }
.responsibility-lanes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin-top:.85rem; }
.responsibility-lanes article { display:flex; min-height:240px; padding:.9rem; flex-direction:column; border-top:4px solid var(--forest); border-radius:10px; background:var(--paper-2); }
.responsibility-lanes article>span { color:var(--forest); font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.responsibility-lanes h4 { margin-top:.35rem; font:600 1.05rem/1.25 var(--serif); }
.responsibility-lanes p { margin:.45rem 0 .8rem; color:var(--ink-soft); font-size:.78rem; }
.responsibility-lanes button { margin-top:auto; padding:.5rem .6rem; border:1.5px solid var(--forest); border-radius:8px; background:white; color:var(--forest); font-size:.72rem; font-weight:800; cursor:pointer; }
.responsibility-lanes .lane-caution { border-top-color:var(--clay); }
.responsibility-lanes .lane-caution>span { color:var(--clay-deep); }
.responsibility-lanes .lane-support { border-top-color:var(--ink); background:var(--ink); color:white; }
.responsibility-lanes .lane-support>span,.responsibility-lanes .lane-support p { color:rgba(255,255,255,.72); }
.responsibility-lanes .lane-support div { display:grid; gap:.35rem; margin-top:auto; }
.responsibility-lanes .lane-support button { margin-top:0; border-color:white; color:var(--ink); }
.dialog--handoff { width:min(940px,calc(100% - 30px)); }
.handoff-context-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:1rem; }
.handoff-fieldset { margin-top:1rem; padding:1rem; border:1.5px solid var(--line); border-radius:12px; }
.handoff-fieldset legend { padding:0 .35rem; font:600 1.05rem var(--serif); }
.handoff-fieldset>p { color:var(--ink-soft); font-size:.76rem; }
.handoff-entry-list,.handoff-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin-top:.75rem; }
.handoff-entry-list label,.handoff-options label { display:flex; align-items:flex-start; gap:.55rem; padding:.7rem; border:1px solid var(--line); border-radius:9px; background:white; cursor:pointer; }
.handoff-entry-list label.is-related { border-color:var(--forest); background:rgba(46,97,81,.06); }
.handoff-entry-list input,.handoff-options input { flex:0 0 auto; margin-top:.2rem; accent-color:var(--forest); }
.handoff-entry-list span,.handoff-options span { min-width:0; }
.handoff-entry-list b,.handoff-entry-list small,.handoff-options b,.handoff-options small { display:block; }
.handoff-entry-list b,.handoff-options b { font-size:.78rem; }
.handoff-entry-list small,.handoff-options small { margin-top:.18rem; color:var(--ink-soft); font-size:.68rem; line-height:1.35; }
.handoff-options .handoff-sensitive { border-color:rgba(194,84,47,.45); background:rgba(194,84,47,.06); }
.handoff-safety { margin-top:1rem; padding:.8rem; border-left:4px solid var(--clay); background:rgba(194,84,47,.08); }
.handoff-safety p { margin-top:.25rem; color:var(--ink-soft); font-size:.78rem; }
.handoff-review-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-top:1rem; }
.handoff-review-heading h3 { margin-top:.15rem; font:600 1.2rem var(--serif); }
.handoff-review-heading button { padding:.3rem; border:0; border-bottom:1px solid currentColor; background:none; color:var(--forest); font-weight:800; cursor:pointer; }
.handoff-preview { max-height:52vh; margin-top:.8rem; padding:1rem; overflow:auto; border:1.5px solid var(--line); border-radius:11px; background:#fff; color:var(--ink); font:400 .78rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.dialog--attachments { width:min(900px,calc(100% - 30px)); }
.attachment-boundary { margin-top:1rem; padding:.8rem; border-left:4px solid var(--forest); background:rgba(46,97,81,.08); }
.attachment-boundary p { margin-top:.25rem; color:var(--ink-soft); font-size:.78rem; }
.attachment-decision-list { display:grid; gap:.7rem; margin-top:1rem; }
.attachment-decision { padding:1rem; border:1.5px solid var(--line); border-radius:12px; background:white; }
.attachment-decision__head { display:grid; grid-template-columns:auto 1fr; gap:.65rem; align-items:start; }
.attachment-decision__head>span { padding:.3rem .4rem; border-radius:6px; background:var(--ink); color:white; font-size:.62rem; font-weight:800; }
.attachment-decision__head h3 { font:600 1.05rem/1.25 var(--serif); }
.attachment-decision__head p,.attachment-fingerprint { color:var(--ink-soft); font-size:.7rem; overflow-wrap:anywhere; }
.attachment-fingerprint { margin:.55rem 0; padding:.45rem .55rem; border-radius:7px; background:var(--paper-2); }
.attachment-file-actions { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.6rem; }
.attachment-file-actions button { padding:.5rem .6rem; border:1px solid var(--forest); border-radius:8px; background:white; color:var(--forest); font-size:.72rem; font-weight:800; cursor:pointer; }
.attachment-file-review { display:flex; align-items:flex-start; gap:.55rem; margin-top:.65rem; padding:.65rem; border:1px solid var(--line); border-radius:8px; color:var(--ink-soft); font-size:.74rem; }
.attachment-file-review input { margin-top:.15rem; accent-color:var(--forest); }
.attachment-file-review:has(input:disabled) { opacity:.55; }
.attachment-empty { padding:1.2rem; border:1px dashed var(--line); border-radius:10px; text-align:center; }
.attachment-empty p { margin-top:.25rem; color:var(--ink-soft); font-size:.78rem; }
.hall-footer { display:grid; grid-template-columns:1.2fr .8fr; gap:1.5rem 3rem; padding:clamp(36px,5vw,62px) clamp(20px,5vw,70px); background:var(--ink); color:var(--paper); }
.hall-footer__brand a { display:inline-flex; align-items:center; gap:.6rem; color:var(--paper); font:600 1.35rem var(--serif); text-decoration:none; }
.hall-footer__brand p { max-width:52ch; margin-top:.65rem; color:rgba(249,248,245,.65); font-size:.84rem; }
.hall-footer nav { display:flex; flex-wrap:wrap; align-content:start; justify-content:flex-end; gap:.45rem 1rem; }
.hall-footer nav a { color:rgba(249,248,245,.8); font-size:.8rem; font-weight:700; text-underline-offset:3px; }
.hall-footer>p { grid-column:1/-1; padding-top:1rem; border-top:1px solid rgba(249,248,245,.15); color:rgba(249,248,245,.5); font-size:.72rem; }
.route-script { margin-top:1.2rem; padding:1rem; border-left:4px solid var(--clay); background:var(--paper-2); font:500 1.05rem/1.5 var(--serif); }
.grounding { margin-top:1.2rem; padding:1.5rem; border-radius:14px; background:var(--ink); color:white; text-align:center; }
.grounding b { display:block; font:600 1.5rem var(--serif); }
.grounding p { margin-top:.3rem; color:rgba(255,255,255,.7); }
.support-router { margin-top:1.2rem; }
.support-privacy { padding:.8rem; border-left:4px solid var(--forest); background:rgba(46,97,81,.08); color:var(--ink-soft); font-size:.84rem; }
.support-paths { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; margin-top:1rem; }
.support-path { padding:.8rem; text-align:left; color:var(--ink); background:white; border:1.5px solid var(--line); border-radius:11px; cursor:pointer; }
.support-path:hover,.support-path.is-selected { border-color:var(--ink); background:var(--paper-2); }
.support-path b,.support-path small { display:block; }
.support-path b { font:600 .95rem/1.25 var(--serif); }
.support-path small { margin-top:.25rem; color:var(--ink-soft); font-size:.74rem; line-height:1.35; }
.support-result { margin-top:1rem; padding:1rem; border-radius:12px; background:var(--paper-2); }
.support-result:empty { display:none; }
.support-result h3 { font:600 1.15rem/1.25 var(--serif); }
.support-result p,.support-result li { color:var(--ink-soft); font-size:.84rem; }
.support-result ul { display:grid; gap:.4rem; margin:.65rem 0 0 1rem; }
.support-next { margin-top:.85rem; padding:.6rem .75rem; border:1.5px solid var(--forest); border-radius:9px; background:white; color:var(--forest); font-weight:800; cursor:pointer; }
.location-form { display:grid; gap:.65rem; margin-top:.8rem; }
.location-form label { display:grid; gap:.25rem; color:var(--ink); font-size:.78rem; font-weight:800; }
.location-form input { padding:.65rem; border:1.5px solid var(--line); border-radius:9px; background:white; color:var(--ink); }
.location-form button { justify-self:start; padding:.65rem .85rem; border:1.5px solid var(--ink); border-radius:9px; background:var(--ink); color:white; font-weight:800; cursor:pointer; }
.support-status { min-height:1.2rem; color:var(--forest)!important; font-weight:700; }
.resource-library { margin-top:1rem; }
.resource-library__head { display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.resource-library__head h3 { margin-top:.15rem; font:600 1.35rem/1.2 var(--serif); }
.resource-library__head>button { padding:.25rem; border:0; border-bottom:1px solid currentColor; background:none; color:var(--forest); font-weight:800; cursor:pointer; }
.library-boundary,.coverage-gap,.library-feedback { margin-top:.75rem; padding:.75rem; border-radius:10px; color:var(--ink-soft); font-size:.78rem; }
.library-status { margin-top:.65rem; color:var(--ink-faint); font-size:.72rem; }
.library-status b { color:var(--ink-soft); }
.library-boundary { background:rgba(197,168,128,.25); }
.coverage-gap { border-left:4px solid var(--clay); background:rgba(194,84,47,.09); }
.coverage-gap b { color:var(--ink); }
.coverage-gap p { margin-top:.25rem; }
.resource-filters { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.85rem; }
.resource-filters button { padding:.45rem .6rem; border:1px solid var(--line); border-radius:99px; background:white; color:var(--ink-soft); font-size:.72rem; font-weight:800; cursor:pointer; }
.resource-filters button:hover,.resource-filters button.is-selected { border-color:var(--ink); background:var(--ink); color:white; }
.resource-list { display:grid; gap:.7rem; margin-top:.85rem; }
.resource-card { padding:1rem; border:1.5px solid var(--line); border-radius:13px; background:white; }
.resource-card__meta { display:flex; justify-content:space-between; gap:.5rem; color:var(--forest); font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.resource-card__meta .is-overdue { color:var(--clay-deep); }
.resource-card h4 { margin-top:.5rem; font:600 1.08rem/1.25 var(--serif); }
.resource-card .resource-org { margin:.15rem 0 .55rem; color:var(--forest); font-size:.75rem; font-weight:800; }
.resource-card>p:not(.resource-org),.resource-card details p { color:var(--ink-soft); font-size:.8rem; }
.resource-card details { margin-top:.65rem; padding-top:.55rem; border-top:1px solid var(--line); }
.resource-card summary { color:var(--ink); font-size:.75rem; font-weight:800; cursor:pointer; }
.resource-card details p { margin-top:.4rem; }
.resource-card a { display:inline-block; margin-top:.75rem; padding:.55rem .7rem; border-radius:8px; background:var(--forest); color:white; font-size:.78rem; font-weight:800; text-decoration:none; }
.resource-empty { margin-top:.8rem; color:var(--ink-soft); font-size:.82rem; }
.library-feedback { border:1px dashed var(--line); }
.safety-list { display:grid; gap:.7rem; margin-top:1.2rem; }
.safety-list p { padding:.8rem; border-radius:10px; background:var(--paper-2); color:var(--ink-soft); font-size:.88rem; }
.safety-list b { color:var(--ink); }
.storage-check { margin-top:1rem; padding:1rem; border:1.5px solid var(--line); border-radius:12px; background:white; }
.storage-check>b { font:600 1rem var(--serif); }
.storage-check>p { margin-top:.3rem; color:var(--ink-soft); font-size:.82rem; }
.storage-check button { margin-top:.7rem; padding:.6rem .75rem; border:1.5px solid var(--ink); border-radius:9px; background:var(--ink); color:white; font-weight:800; cursor:pointer; }
.storage-check small { display:block; margin-top:.45rem; color:var(--ink-faint); font-size:.7rem; }

.discreet-cover { min-height:calc(100vh - 76px); padding:clamp(70px,15vh,150px) 24px; background:var(--paper); text-align:center; }
.discreet-cover p { margin:.8rem 0 1.6rem; color:var(--ink-soft); }
body.is-discreet main { display:none; }
/* The header keeps the ordinary Village mark, exactly as the address bar
   promises. Only the room name goes: "Safety Hall" is the one word up here
   that would tell someone what she was doing. */
body.is-discreet .brand small { display:none; }
body.is-discreet .header-tool,body.is-discreet #quickExit { display:none; }

@keyframes fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width:900px) { .choice-grid--compact { grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px) {
  .hall-intro,.hall-orientation { grid-template-columns:1fr; } .privacy-note { max-width:540px; } .support-menu { grid-template-columns:repeat(2,1fr); }
  .workspace { grid-template-columns:1fr; } .side-panel { display:grid; grid-template-columns:repeat(3,1fr); } .tracker-head { align-items:start; flex-direction:column; }
  .entry-list { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .header-tools { gap:.35rem; } .header-tool { padding:.55rem; font-size:0; } .header-tool::before { font-size:.9rem; }
  #safetyInfo::before { content:"ⓘ"; } #discreetMode::before { content:"Hide"; } .quick-exit { font-size:.7rem; }
  .behavior-grid,.map-grid,.image-details-grid,.pattern-observations,.responsibility-lanes,.handoff-context-grid,.handoff-entry-list,.handoff-options { grid-template-columns:1fr; } .map-field--wide,.image-details-wide { grid-column:auto; }
  .responsibility-lanes article { min-height:0; }
  .hall-footer { grid-template-columns:1fr; } .hall-footer nav { justify-content:flex-start; } .hall-footer>p { grid-column:1; }
}
@media (max-width:560px) {
  .hall-header { min-height:66px; padding-inline:14px; } .brand b { font-size:1rem; } .brand svg { width:28px; } .header-tools { margin-left:auto; }
  .hall-intro { padding-top:34px; } .support-menu,.side-panel,.choice-grid,.choice-grid--compact,.hall-orientation__steps { grid-template-columns:1fr; }
  .support-card { min-height:90px; } .entries-head { align-items:start; gap:1rem; flex-direction:column; } .dialog-actions--row { grid-template-columns:1fr; }
  .capture-row,.capture-decisions,.panel-actions { flex-direction:column; } .capture-button,.secondary,.primary { text-align:center; }
  .capture-status-row { align-items:flex-start; flex-direction:column; gap:.25rem; } .media-item { grid-template-columns:auto minmax(0,1fr); } .media-actions { grid-column:2; }
  .media-item audio { grid-column:1/-1; } .saved-entry__actions button:last-child { margin-left:0; }
  .mic-session { align-items:flex-start; flex-direction:column; } .support-paths { grid-template-columns:1fr; }
  .storage-summary { align-items:flex-start; flex-direction:column; } .storage-summary span+span { padding-left:0; border-left:0; } .storage-summary button { margin-left:0; }
  .redaction-number-grid { grid-template-columns:repeat(2,1fr); } .redaction-toolbar span { width:100%; margin-left:0; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; } }

/* ===== Village palette bridge (2026-08-13): Safety Hall joins the warm cream restyle.
   Tokens only; every safety behavior (discreet view, quick exit, contrast) untouched. */
:root {
  --paper:#FBF3E8; --paper-2:#F5E8D4; --paper-3:#EEDDC2;
  --ink:#2B2013; --ink-soft:#5D4F3E; --ink-faint:#99876F;
  --clay:#A84214; --clay-deep:#7E300C; --gold:#C79A52;
  --forest:#8A6524; --moss:#8A6524; --line:rgba(58,40,16,.18);
  --shadow:8px 9px 0 -2px rgba(43,32,19,.16);
}


/* ============================================================================
   SAFETY HALL — Village parity + AAA (2026-08-15)
   Same modern language as the landing and the member lobby. Nothing about the
   safety behaviour changes: discreet view, Escape, and the exit destination
   are untouched. Only how the room looks, and how reachable the exit is.
   ============================================================================ */

/* 1. THE GROUND
   Safety Hall was washing the page with gold AND FOREST GREEN (2E6151 at .11).
   No other room in the Village uses green. Gold and clay, like everywhere else. */
body{
  background:
    radial-gradient(120% 80% at 12% -5%, rgba(199,154,82,.13), transparent 55%),
    radial-gradient(120% 80% at 100% 8%, rgba(168,66,20,.07), transparent 50%),
    #FBF3E8 !important;
}

/* 2. AAA TEXT
   This room is used under stress, sometimes on a borrowed phone. Only the
   three tokens that clear 7:1 are allowed to carry text.
   ink 2B2013 14.47 · ink-soft 5D4F3E 7.19 · clay-deep 7E300C 8.24
   ink-faint 99876F measured 3.16 and is retired here entirely. */
:root{
  --ink-faint:#5D4F3E;
  --clay:#7E300C;
  --forest:#5D4F3E;
  --moss:#5D4F3E;
}

/* 3. NAVIGATION — the landing's bar, exactly
   was: 76px · blur(10px) · bg .9 · a permanent 1px line · wordmark Hanken 16px */
.hall-header{
  position:sticky !important; top:0; z-index:100;
  height:71px !important;
  padding:14.4px 64px !important;
  background:rgba(251,243,232,.84) !important;
  -webkit-backdrop-filter:blur(9px) !important;
  backdrop-filter:blur(9px) !important;
  border-bottom:1.5px solid transparent !important;
  transition:border-color .3s ease !important;
}
.hall-header.is-stuck{ border-bottom-color:rgba(58,40,16,.18) !important; }
.brand{
  display:inline-flex !important; align-items:center !important; gap:8.8px !important;
  font-family:"Cormorant Garamond",Georgia,serif !important;
  font-size:21.6px !important; font-weight:600 !important;
  color:#1A1A4E !important; text-decoration:none !important; line-height:1 !important;
}
.brand svg{ display:none !important; }
.brand::before{
  content:"" !important; width:34px !important; height:34px !important; flex:0 0 34px !important;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%20width%3D%2234%22%20height%3D%2234%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%228%22%20r%3D%222.8%22%20fill%3D%22%231A1A4E%22%2F%3E%3Ccircle%20cx%3D%2230.4%22%20cy%3D%2214%22%20r%3D%222.8%22%20fill%3D%22%231A1A4E%22%2F%3E%3Ccircle%20cx%3D%2230.4%22%20cy%3D%2226%22%20r%3D%222.8%22%20fill%3D%22%231A1A4E%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2232%22%20r%3D%222.8%22%20fill%3D%22%231A1A4E%22%2F%3E%3Ccircle%20cx%3D%229.6%22%20cy%3D%2226%22%20r%3D%222.8%22%20fill%3D%22%231A1A4E%22%2F%3E%3Ccircle%20cx%3D%229.6%22%20cy%3D%2214%22%20r%3D%222.8%22%20fill%3D%22%231A1A4E%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%225.5%22%20fill%3D%22%23A84214%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain !important;
}
/* NOT hidden globally. The room name is meant to be visible normally and
   disappear only in discreet view — that is the whole point of the
   discreet rule above, and hiding it always left that feature with
   nothing to hide. It just gets this room's colour. */
.brand small{ color:#4E4E70 !important; font-size:.7rem !important; font-weight:700 !important;
  letter-spacing:.13em !important; text-transform:uppercase !important; }
body.is-discreet .brand small{ display:none !important; }

/* 4. THE WOBBLE — 34 elements carried irregular per-corner radii
   button 11 · .dialog 9 · .support-card 6 · .side-card 3 · .primary 2
   .privacy-note · .hall-orientation · .capture-card */
.support-card,.side-card,.dialog,.privacy-note,.hall-orientation,
.capture-card,.optional-panel,.tracker,.entries,.discreet-cover,
.hall-intro>div,.resource-card,.entry-card{
  border-radius:18px !important;
}
button,.primary,.header-tool,.quick-exit{ border-radius:999px !important; }
input,textarea,select{ border-radius:12px !important; }

/* 5. STICKER SHADOWS AND DOUBLE BORDERS
   12px 14px 0 / 8px 9px 0 / 4px 5px 0, and .optional-panel's 3px double rule. */
.support-card,.side-card,.dialog,.primary,.capture-card,
.optional-panel,.tracker,.entries,.resource-card,.entry-card{
  box-shadow:0 16px 36px -18px rgba(43,32,19,.30) !important;
}
.optional-panel{ border:1px solid rgba(58,40,16,.18) !important; }
*{ --shadow:0 16px 36px -18px rgba(43,32,19,.30); --shadow-lg:0 22px 50px -24px rgba(43,32,19,.34); }

/* 6. SURFACES READ WHITE, not cream on cream */
.support-card,.side-card,.capture-card,.resource-card,.entry-card,.optional-panel{
  background:#FFFFFF !important;
}

/* 7. TYPE — one hierarchy, matching the Village
   h1 was 60.16px against the landing's 54px. */
.hall-intro h1,.discreet-cover h1{
  font-size:clamp(2.3rem,4.6vw,3.375rem) !important;
  line-height:1.03 !important; letter-spacing:-.025em !important;
}
.tracker h2,.entries h2,.dialog h2{
  font-size:clamp(1.5rem,2.4vw,1.75rem) !important;
  line-height:1.15 !important; letter-spacing:-.015em !important;
}
.eyebrow,.side-label{ color:#7E300C !important; }

/* 8. BUTTONS — primary is clay-deep so white on it clears AAA at 9.07:1 */
.primary{
  background:#7E300C !important; color:#FFFFFF !important;
  border:1px solid transparent !important;
  box-shadow:0 6px 18px -8px rgba(126,48,12,.7) !important;
}
.header-tool{
  background:#FFFFFF !important; border:1px solid rgba(58,40,16,.18) !important;
  color:#2B2013 !important; font-weight:700 !important;
}

/* ---------------------------------------------------------------------------
   9. THE EXIT
   Measured live: 81x38, position:static, 12.16px, label "Quick exit".
   Three problems. It is under the 44px minimum target size. It is static, so
   the one control that must never leave the screen scrolls off it. And user
   testing (ACM 2023) found people do not understand the phrase "Quick exit";
   the National DV Hotline uses the single word "exit" in a 60x60 fixed corner
   control. The destination and the discreet-mode behaviour are unchanged.
   --------------------------------------------------------------------------- */
.quick-exit{
  position:fixed !important;
  top:14px !important; right:16px !important;
  z-index:9999 !important;
  min-width:64px !important; min-height:48px !important;
  padding:.6rem 1.15rem !important;
  border:2px solid #FFFFFF !important;
  border-radius:999px !important;
  background:#7E300C !important;
  color:#FFFFFF !important;
  font:800 .95rem/1 "Hanken Grotesk",system-ui,sans-serif !important;
  letter-spacing:.02em !important;
  box-shadow:0 8px 22px -8px rgba(43,32,19,.55) !important;
  cursor:pointer;
}
.quick-exit:hover,.quick-exit:focus-visible{
  background:#5F2408 !important;
  outline:3px solid rgba(199,154,82,.5) !important; outline-offset:2px !important;
}
/* the sticky bar must not sit on top of the exit */
.hall-header{ padding-right:96px !important; }

/* the base rule sets min-height:76px; the Village bar is 71 */
.hall-header{ min-height:71px !important; }

/* ============================================================================
   SAFETY HALL — its own room (2026-08-15)
   Supersedes the warm block above. This room is used for work situations, so
   it leaves the Village's cream and brown and takes the navy already in the
   palette (--navy #1A1A4E, the AIdedEQ indigo that carries the wordmark
   everywhere else). Cool, minimal, professional. The brand mark stays exactly
   as it is in every other room — that is the thread back to the Village.

   Every value below clears AAA (7:1) on both the paper and the card:
     ink       #14143A  16.46 / 17.63
     ink-soft  #3B3B60   9.90 / 10.60
     ink-muted #4E4E70   7.40 /  7.93
     slate     #33507A   7.63 /  8.17
     action    #1F2E5C  12.22 / 13.10   (white on it 13.10)
     exit      #8E1B2E   8.35 /  8.95   (white on it  8.95)
   ============================================================================ */

:root{
  --paper:#EFF1F6;
  --paper-2:#E4E8F0;
  --paper-3:#D8DEEA;
  --ink:#14143A;
  --ink-soft:#3B3B60;
  --ink-faint:#4E4E70;
  --clay:#33507A;        /* the numerals and eyebrows: slate, not orange */
  --clay-deep:#1F2E5C;
  --gold:#33507A;
  --forest:#3B3B60;
  --moss:#3B3B60;
  --line:rgba(20,20,58,.14);
  --shadow:0 16px 36px -18px rgba(20,20,58,.26);
  --shadow-lg:0 22px 50px -24px rgba(20,20,58,.30);
}

/* the ground: cool and quiet, no warm wash at all */
body{
  background:
    radial-gradient(120% 80% at 12% -5%, rgba(51,80,122,.09), transparent 55%),
    radial-gradient(120% 80% at 100% 8%, rgba(26,26,78,.06), transparent 50%),
    var(--paper) !important;
}

/* the bar keeps the Village geometry, in this room's colours */
.hall-header{ background:rgba(239,241,246,.84) !important; }
.hall-header.is-stuck{ border-bottom-color:var(--line) !important; }

.eyebrow,.side-label{ color:#33507A !important; }

/* surfaces */
.support-card,.side-card,.capture-card,.resource-card,.entry-card,
.optional-panel,.tracker,.entries,.dialog{
  background:#FFFFFF !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow) !important;
}

/* ---------------------------------------------------------------------------
   THE SIX CHOICES
   Card 02 was rendering blank: .support-card.is-active sets color:white on a
   dark ground, and the earlier white-surface rule flattened its background
   without touching the text. Selected state is navy again, deliberately.
   --------------------------------------------------------------------------- */
.support-card{
  border-radius:14px !important;
  min-height:112px !important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s !important;
}
.support-card:hover,.support-card:focus-visible{
  transform:translateY(-2px) !important;
  border-color:#33507A !important;
  box-shadow:var(--shadow-lg) !important;
}
.support-card.is-active{
  background:#1F2E5C !important;
  border-color:#1F2E5C !important;
  color:#FFFFFF !important;
}
.support-card.is-active b{ color:#FFFFFF !important; }
.support-card.is-active small{ color:rgba(255,255,255,.80) !important; }
.support-card.is-active>span{ color:rgba(255,255,255,.72) !important; }
.support-card>span{ color:#33507A !important; font-weight:700 !important; }
.support-card small{ color:var(--ink-faint) !important; }

/* actions */
.primary{
  background:#1F2E5C !important; color:#FFFFFF !important;
  border:1px solid transparent !important;
  box-shadow:0 6px 18px -8px rgba(31,46,92,.6) !important;
}
.primary:hover{ background:#14143A !important; }
.header-tool{
  background:#FFFFFF !important; border:1px solid var(--line) !important;
  color:var(--ink) !important;
}

/* the exit stays the one warm-alert element on the page, on purpose:
   it must never read as part of the calm palette. */
.quick-exit{
  background:#8E1B2E !important;
  border:2px solid #FFFFFF !important;
  box-shadow:0 8px 22px -8px rgba(20,20,58,.5) !important;
}
.quick-exit:hover,.quick-exit:focus-visible{
  background:#7A1526 !important;
  outline:3px solid rgba(51,80,122,.45) !important;
}

/* The caution bands were tinted with the old clay rgba(194,84,47,...). They
   carry meaning (support first, sensitive handoff, redaction), so they keep a
   warning tint — moved onto the exit's alert crimson so the room has exactly
   one warm signal and it always means "pay attention". */
.hall-orientation__boundary,
.support-first,
.handoff-sensitive,
.handoff-safety,
.redaction-safety,
.what-this-is-not{
  background:rgba(142,27,46,.06) !important;
  border-color:rgba(142,27,46,.35) !important;
}
.support-first strong,
.handoff-sensitive strong,
.handoff-safety strong,
.redaction-safety strong{ color:#7A1526 !important; }

/* ============================================================================
   PASS 2 — the header row, the notice, and a calmer ground
   ============================================================================ */

/* 1. ONE BUTTON ROW
   Device safety and Discreet view were 38px at top 16 with 12.16px type; the
   exit was 48px at top 14 with 15.2px type and a 2px white ring. Three
   different objects pretending to be a set. All three are now 44px on one
   baseline — which also lifts the other two to the 44px minimum target size
   they were under. */
.header-tool,
.quick-exit{
  height:44px !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  font-size:13.76px !important;
  font-weight:700 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}
.quick-exit{
  top:13px !important;
  right:24px !important;
  border:0 !important;
  min-width:72px !important;
  letter-spacing:.03em !important;
  box-shadow:0 6px 16px -8px rgba(20,20,58,.45) !important;
}
.hall-header{ padding-right:112px !important; }
.hall-header nav,
.hall-header>div:last-child{ gap:10px !important; align-items:center !important; }

/* 2. THE PRIVACY NOTICE
   A solid navy block, 319x152, was the loudest thing on the page — and it is a
   caveat, not a headline. It becomes a light card with the page's one alert
   colour as a left rule: still impossible to miss, no longer shouting over the
   question it sits beside. */
.privacy-note{
  background:#FFFFFF !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  border-left:3px solid #8E1B2E !important;
  border-radius:12px !important;
  box-shadow:var(--shadow) !important;
  margin-top:0 !important;
  align-self:start !important;
}
.privacy-note p{ color:var(--ink-soft) !important; }
.privacy-note>span{ color:#8E1B2E !important; }
.privacy-note b,.privacy-note strong{ color:var(--ink) !important; }
.hall-intro{ align-items:start !important; }

/* 3. THE GROUND
   #EFF1F6 read as tech-blue. A quieter, less saturated cool grey is easier to
   read a serious page on, and sits closer to paper without going warm. */
:root{ --paper:#F3F4F7; --paper-2:#E8EAF0; }
body{
  background:
    radial-gradient(120% 80% at 12% -5%, rgba(51,80,122,.07), transparent 55%),
    radial-gradient(120% 80% at 100% 8%, rgba(26,26,78,.05), transparent 50%),
    #F3F4F7 !important;
}
.hall-header{ background:rgba(243,244,247,.84) !important; }

/* ---------------------------------------------------------------------------
   THE PRIVACY NOTICE, properly
   Was: one paragraph, no hierarchy, a house glyph standing in for an icon, no
   role, and crimson — competing with the exit for the page's one alert colour.
   Crimson now means exactly one thing in this room: leave. The notice carries
   the room's own slate, and the sentence that actually matters leads.
   --------------------------------------------------------------------------- */
.privacy-note{
  border-left:3px solid #33507A !important;
  display:block !important;
  padding:16px 18px !important;
}
.privacy-note__lead{
  margin:0 0 6px !important;
  font:600 1.05rem/1.3 "Cormorant Garamond",Georgia,serif !important;
  font-size:1.18rem !important;
  color:var(--ink) !important;
  letter-spacing:-.01em !important;
}
.privacy-note__body{
  margin:0 !important;
  font-size:.88rem !important;
  line-height:1.55 !important;
  color:var(--ink-soft) !important;
}
.privacy-note__body strong{ color:var(--ink) !important; font-weight:700 !important; }
.privacy-note>span{ display:none !important; }

/* Crimson means one thing in this room: leave. The caution bands were tinted
   with it, which put six things in competition with the escape. They carry
   slate and bold instead — still clearly flagged, never mistaken for the exit. */
.hall-orientation__boundary,
.support-first,
.handoff-sensitive,
.handoff-safety,
.redaction-safety,
.what-this-is-not{
  background:rgba(51,80,122,.07) !important;
  border-color:rgba(51,80,122,.32) !important;
}
.support-first strong,
.handoff-sensitive strong,
.handoff-safety strong,
.redaction-safety strong,
.hall-orientation__boundary b,
.what-this-is-not b{ color:#1F2E5C !important; }

/* Nothing in this room sits crooked.
   .privacy-note carried rotate(1deg), .hand rotate(-1deg), and
   .side-card--pattern rotate(.6deg) — leftovers from the sketchbook styling.
   A deliberate tilt reads as decoration, and this is not a room to decorate. */
.privacy-note,
.hand,
.side-card--pattern,
.support-card,
.side-card,
.capture-card,
.resource-card,
.entry-card,
.optional-panel,
.tracker,
.entries,
.dialog{
  transform:none !important;
}
/* the pattern card was also still the old dark ink block */
.side-card--pattern{
  background:#FFFFFF !important;
  color:var(--ink) !important;
  border-left:3px solid #33507A !important;
}
.side-card--pattern p,
.side-card--pattern span{ color:var(--ink-soft) !important; }
/* handwriting has no job in this room */
.hand{
  font-family:"Hanken Grotesk",system-ui,sans-serif !important;
  font-size:.95rem !important;
  font-weight:700 !important;
  color:#1F2E5C !important;
}

/* ---------------------------------------------------------------------------
   .tracker, .entries and .optional-panel are structural sections, not cards.
   My surfaces rule gave them a white fill, a border and a shadow while they
   still had padding:0, so their headings sat flush on the border — and it also
   nested cards inside cards, which is what made the whole block read muddy.
   They go back to being transparent structure. The cards inside carry the
   surface, which is the minimal reading of this room.
   --------------------------------------------------------------------------- */
.tracker,
.entries,
.optional-panel{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.tracker,
.entries{ margin-top:44px !important; }
.optional-panel{ margin-top:32px !important; padding-top:28px !important; border-top:1px solid var(--line) !important; }

/* body copy steps back from the 16.46:1 heading ink to 9.90:1, which is still
   comfortably AAA and easier to read at length on a page people sit with. */
.tracker p,
.entries p,
.hall-intro>div>p,
.side-card p,
.support-card small,
.capture-card p{ color:var(--ink-soft) !important; }

/* ---------------------------------------------------------------------------
   SOFTEN THE ROOM
   #F3F4F7 was a cool blue-grey and read as a filing system. #F4F3F1 is a bone
   neutral: warmth (R-B) +3, against the Village cream's +19, so it eases the
   room without walking back into the landing's palette. Every token still
   clears AAA on it — the worst case is slate at 7.15:1.
   The washes lose their cool cast, and the hairline goes very slightly warm so
   it stops reading as a blue rule on a warm ground.
   --------------------------------------------------------------------------- */
:root{
  --paper:#F4F3F1;
  --paper-2:#EAE8E4;
  --paper-3:#DEDBD5;
  --line:rgba(40,36,46,.13);
}
body{
  background:
    radial-gradient(120% 80% at 12% -5%, rgba(51,80,122,.05), transparent 55%),
    radial-gradient(120% 80% at 100% 8%, rgba(120,105,90,.06), transparent 50%),
    #F4F3F1 !important;
}
.hall-header{
  background:rgba(244,243,241,.84) !important;
  border-bottom-color:transparent !important;
}
.hall-header.is-stuck{ border-bottom-color:var(--line) !important; }

/* the caution bands follow the ground rather than staying cool-tinted */
.hall-orientation__boundary,
.support-first,
.handoff-sensitive,
.handoff-safety,
.redaction-safety,
.what-this-is-not{
  background:rgba(51,80,122,.055) !important;
  border-color:rgba(51,80,122,.26) !important;
}

/* same descender clip as the member rooms: Cormorant needs the room */
.hall-intro h1,.discreet-cover h1,
.tracker h2,.entries h2,.dialog h2,
.support-card b{
  overflow:visible !important;
  line-height:1.12 !important;
  padding-bottom:.04em !important;
}

/* Discreet view wins over my button-row styling.
   The row rule set display:inline-flex !important, which overrode
   body.is-discreet #quickExit{display:none} — leaving a crimson "exit" sitting
   on the neutral cover. That is a tell: it announces what the site is to
   anyone glancing at the screen, which is the exact thing discreet view is
   for. Nothing in the header survives discreet view. */
body.is-discreet .header-tool,
body.is-discreet .quick-exit,
body.is-discreet #quickExit{ display:none !important; }

/* 2026-08-18: this site is light-only. Stops Android Chrome auto-dark and similar from inverting the cream/ink palette. */
:root{ color-scheme: light; }
html{ background: var(--paper, #FBF3E8); }

/* 2026-08-19: phone header. On narrow screens the two tool pills kept their
   full labels and slid under the fixed exit, and the brand wrapped to three
   lines. Below 640px: brand on one line, tools become 44px icon pills
   (ⓘ / Hide), exit keeps its corner. Labels stay in the DOM for screen readers. */
@media (max-width:640px){
  .hall-header{ height:auto !important; min-height:64px !important; padding:10px 14px !important; padding-right:104px !important; gap:.5rem !important; }
  .brand{ font-size:17px !important; gap:8px !important; }
  .brand::before{ width:28px !important; height:28px !important; flex-basis:28px !important; background-size:contain !important; }
  .brand span{ line-height:1.05 !important; }
  .brand b{ white-space:nowrap; }
  .brand small{ font-size:.6rem !important; letter-spacing:.1em !important; }
  .header-tools{ gap:6px !important; margin-left:auto !important; flex:none !important; }
  .header-tool{ width:44px !important; min-width:44px !important; padding:0 !important; font-size:0 !important; color:transparent !important; }
  .header-tool::before{ font-size:15px !important; color:#2B2013 !important; font-weight:800 !important; line-height:1 !important; }
  #safetyInfo::before{ content:"ⓘ" !important; }
  #discreetMode::before{ content:"Hide" !important; font-size:11.5px !important; letter-spacing:.04em !important; }
  .quick-exit{ right:14px !important; top:10px !important; min-width:64px !important; padding:0 14px !important; }
}