:root{
  color-scheme: light dark;
  --ink:#0a0a0a;
  --paper:#f5f1e8;
  --rule:#1a1a1a;
  --muted:#5a5550;
  --hairline:#bdb4a3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);}
body{
  font-family:"Cormorant Garamond",Garamond,"EB Garamond",Georgia,serif;
  font-weight:400;
  font-size:22px;
  line-height:1.6;
  letter-spacing:0.005em;
  padding:7vh 8vw 12vh;
  max-width:980px;
  margin:0 auto;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline);}
a:hover{border-bottom-color:var(--ink);}

/* Wordmark + brand chrome */
.wordmark{
  font-family:"Cormorant SC","Cormorant Garamond",serif;
  font-weight:500;
  font-size:clamp(42px,7vw,72px);
  letter-spacing:0.22em;
  text-align:center;
  margin:0 0 0.5em;
  text-indent:0.22em;
}
.wordmark.small{
  font-size:21px;
  margin:0;
  text-align:left;
  letter-spacing:0.26em;
  text-indent:0.26em;
}
.wordmark.small a{border-bottom:none;}
.tagline{
  font-style:italic;
  font-size:clamp(22px,2.4vw,28px);
  text-align:center;
  margin:0 0 0;
  letter-spacing:0.01em;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:1.4em;
  margin-bottom:5em;
  border-bottom:1px solid var(--hairline);
}
.topbar nav{
  font-family:"Cormorant SC",serif;
  font-size:13px;
  letter-spacing:0.28em;
}
.topbar nav a{
  margin-left:2.2em;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.topbar nav a:hover{border-bottom-color:var(--hairline);}
.topbar nav a.current{border-bottom-color:var(--ink);}

/* Statement block */
.statement p{
  font-size:clamp(22px,2.4vw,28px);
  line-height:1.55;
  margin:0 0 1.3em;
  max-width:38em;
}
.statement em{font-style:italic;}
.locations{
  margin-top:2.6em;
  font-family:"Cormorant SC",serif;
  letter-spacing:0.18em;
  font-size:15px;
}

/* Rules + section dividers */
hr.rule{
  border:0;
  border-top:1px solid var(--rule);
  margin:6em auto;
  width:5em;
}
.section-label{
  font-family:"Cormorant SC",serif;
  font-size:13px;
  letter-spacing:0.32em;
  text-align:center;
  margin:0 0 3em;
  color:var(--muted);
}

/* Principal header (X page) */
.principal-head{
  text-align:center;
  margin-bottom:5em;
}
.principal-eyebrow{
  font-family:"Cormorant SC",serif;
  letter-spacing:0.32em;
  font-size:13px;
  color:var(--muted);
  margin-bottom:1.2em;
}
.principal-name{
  font-family:"Cormorant SC","Cormorant Garamond",serif;
  font-weight:500;
  font-size:clamp(40px,6.2vw,64px);
  letter-spacing:0.18em;
  margin:0 0 0.6em;
  text-indent:0.18em;
}
.principal-period{
  font-style:italic;
  font-size:19px;
  color:var(--muted);
  margin:0;
}

/* Timeline */
.timeline{
  margin:0;
  padding:0;
  list-style:none;
}
.entry{
  display:grid;
  grid-template-columns:7.5em 1fr;
  gap:1.6em;
  padding:2.4em 0;
  border-top:1px solid var(--hairline);
}
.entry:last-child{border-bottom:1px solid var(--hairline);}
.entry .when{
  font-family:"Cormorant SC",serif;
  letter-spacing:0.22em;
  font-size:13.5px;
  color:var(--muted);
  padding-top:0.4em;
  line-height:1.7;
}
.entry .when .stack-only{display:none;}
.entry .what h3{
  font-family:"Cormorant SC",serif;
  font-weight:500;
  letter-spacing:0.16em;
  font-size:15px;
  margin:0 0 0.5em;
  text-transform:uppercase;
}
.entry .what p{
  margin:0 0 0.5em;
  font-size:21px;
  max-width:36em;
  line-height:1.55;
}
.entry .what .meta{
  font-family:"Cormorant SC",serif;
  letter-spacing:0.18em;
  font-size:12.5px;
  color:var(--muted);
  margin-top:0.8em;
}
.entry .what .meta .dot{margin:0 0.7em;color:var(--hairline);}

/* Tickets */
.ticket-list{
  list-style:none;
  margin:0;
  padding:0;
}
.ticket{
  display:grid;
  grid-template-columns:9em 1fr 9em;
  gap:2.4em;
  align-items:baseline;
  padding:1.8em 0;
  border-top:1px solid var(--hairline);
}
.ticket:last-child{border-bottom:1px solid var(--hairline);}
.ticket .id{
  font-family:"Cormorant SC",serif;
  letter-spacing:0.2em;
  font-size:13px;
  color:var(--muted);
}
.ticket .title{font-size:21px;}
.ticket .status{
  font-family:"Cormorant SC",serif;
  letter-spacing:0.22em;
  font-size:12.5px;
  text-align:right;
  color:var(--muted);
}
.ticket .status.open{color:var(--ink);}

/* Form (upload) */
form.intake{margin:0;padding:0;}
.field-group{
  margin-bottom:3em;
}
.field-group label{
  display:block;
  font-family:"Cormorant SC",serif;
  letter-spacing:0.24em;
  font-size:13px;
  color:var(--muted);
  margin-bottom:0.6em;
}
.field-group input[type=text],
.field-group input[type=email],
.field-group input[type=date],
.field-group textarea,
.field-group select{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hairline);
  padding:0.7em 0;
  font-family:inherit;
  font-size:21px;
  color:var(--ink);
  outline:none;
  min-height:48px;
}
.field-group textarea{
  min-height:7em;
  resize:vertical;
  line-height:1.5;
}
.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus{
  border-bottom-color:var(--ink);
}
.field-group .hint{
  font-style:italic;
  font-size:16px;
  color:var(--muted);
  margin-top:0.4em;
}
.dropzone{
  border:1px dashed var(--hairline);
  padding:3em 2em;
  text-align:center;
  font-style:italic;
  color:var(--muted);
}
.submit-row{
  margin-top:4em;
  display:flex;
  justify-content:flex-end;
}
button.submit{
  background:transparent;
  border:none;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:27px;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding:0.4em 0.6em;
  cursor:pointer;
  letter-spacing:0.01em;
  min-height:48px;
}
button.submit:hover{border-bottom-width:2px;}

/* Closing + colophon */
.closing{
  text-align:center;
  font-style:italic;
  font-size:clamp(30px,3.5vw,44px);
  margin:8em 0 0;
}
.colophon{
  margin-top:7em;
  font-family:"Cormorant SC",serif;
  font-size:12px;
  letter-spacing:0.28em;
  text-align:center;
  color:var(--muted);
}

/* ------------------------------------------------------------------
   DARK MODE — system-paired. Same brand register, inverted tone.
   Paper becomes warm black; ink becomes warm ivory.
------------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#f0e8d8;
    --paper:#100d08;
    --rule:#f0e8d8;
    --muted:#9a9285;
    --hairline:#3a3528;
  }
  .field-group input,
  .field-group textarea,
  .field-group select{color:var(--ink);}
  .field-group select option{
    background:var(--paper);
    color:var(--ink);
  }
  .dropzone{border-color:var(--hairline);}
}

/* ------------------------------------------------------------------
   MOBILE — Samsung Ultra and equivalents (stylus-friendly).
   Date axis collapses inline; tickets reflow; tap targets ≥ 48px.
------------------------------------------------------------------ */
@media (max-width:680px){
  body{
    padding:6vh 6vw 10vh;
    font-size:19px;
  }
  .topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:1.2em;
    padding-bottom:1.2em;
    margin-bottom:3.5em;
  }
  .topbar nav{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:0 1.4em;
    line-height:2.4;
    font-size:13px;
  }
  .topbar nav a{
    margin-left:0;
    padding:6px 0;
    min-height:48px;
    display:inline-flex;
    align-items:center;
  }

  .wordmark{font-size:clamp(34px,9.5vw,52px);}
  .principal-name{font-size:clamp(30px,9vw,46px);}
  .statement p{font-size:19px;}

  hr.rule{margin:4em auto;}
  .closing{margin-top:5em;font-size:26px;}
  .colophon{margin-top:5em;}

  /* Timeline stays two-column on phone — just narrower date rail */
  .entry{
    grid-template-columns:5.2em 1fr;
    gap:1em;
    padding:1.8em 0;
  }
  .entry .when{
    padding-top:0.3em;
    line-height:1.4;
    font-size:10.5px;
    letter-spacing:0.16em;
  }
  .entry .what p{font-size:18px;}

  /* Tickets reflow — id + status above title */
  .ticket{
    grid-template-columns:1fr;
    gap:0.4em;
    padding:1.6em 0;
  }
  .ticket .id{order:1;}
  .ticket .status{order:2;text-align:left;}
  .ticket .title{order:3;font-size:19px;}

  .field-group{margin-bottom:2.4em;}
  .submit-row{justify-content:stretch;}
  button.submit{
    width:100%;
    text-align:center;
    padding:0.8em;
  }
}

/* Print — always light, always paper */
@media print{
  :root{
    --ink:#000;
    --paper:#fff;
    --rule:#000;
    --muted:#444;
    --hairline:#ccc;
  }
  body{padding:1in;background:white;color:black;}
  .topbar nav{display:none;}
  hr.rule{margin:2em auto;}
  .closing{margin-top:3em;}
}

/* ==================================================================
   DRAFTING ROOM — additions for cards, buttons, menu, identity,
   token page, profile page. Same brand register, additive only.
================================================================== */

/* Persistent top-right menu (fixed, scrolls away on scroll-down) */
.topmenu{
  position:fixed;
  top:1.6em;
  right:2em;
  z-index:100;
  font-family:"Cormorant SC",serif;
  font-size:11.5px;
  letter-spacing:0.28em;
  display:flex;
  gap:1.6em;
  background:var(--paper);
  padding:0.6em 1em;
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.topmenu.hidden{
  opacity:0;
  transform:translateY(-12px);
  pointer-events:none;
}
.topmenu a{
  color:var(--ink);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  text-decoration:none;
}
.topmenu a:hover{border-bottom-color:var(--hairline);}
.topmenu a.current{border-bottom-color:var(--ink);}

/* Identity banner — announces viewer + token state */
.identity{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:1em;
  padding:1.4em 0 1.6em;
  border-bottom:1px solid var(--hairline);
  margin-bottom:4em;
}
.identity .who{
  font-size:21px;
  font-style:italic;
}
.identity .token-info{
  font-family:"Cormorant SC",serif;
  font-size:13px;
  letter-spacing:0.22em;
  color:var(--muted);
}
.identity .token-info.soon{color:var(--ink);}
.identity .token-info .dot{margin:0 0.6em;color:var(--hairline);}
.identity .token-info a{
  color:inherit;
  border-bottom:1px solid var(--hairline);
}
.identity .token-info a:hover{border-bottom-color:var(--ink);}

/* Card actions row — vote / comment / question */
.actions{
  display:flex;
  gap:1.6em;
  margin-top:1.4em;
  padding-top:1em;
  border-top:1px dashed var(--hairline);
}
.actions button.act{
  background:transparent;
  border:none;
  border-bottom:1px solid transparent;
  font-family:"Cormorant SC",serif;
  font-size:12.5px;
  letter-spacing:0.24em;
  color:var(--muted);
  padding:0.5em 0.2em;
  cursor:pointer;
  min-height:44px;
}
.actions button.act:hover{
  color:var(--ink);
  border-bottom-color:var(--hairline);
}

/* Per-card status line (success or fail) */
.status{
  margin-top:0.8em;
  font-family:"Cormorant SC",serif;
  font-size:11.5px;
  letter-spacing:0.18em;
  min-height:1em;
}
.status .ok{color:var(--muted);}
.status .fail{color:#a02020;}
@media (prefers-color-scheme: dark){
  .status .fail{color:#e08080;}
}

/* Inline forms (vote options, comment, question) */
.inline-form{
  margin-top:1.4em;
  padding-top:1em;
  border-top:1px dashed var(--hairline);
}
.inline-form .form-label{
  font-family:"Cormorant SC",serif;
  font-size:12px;
  letter-spacing:0.28em;
  color:var(--muted);
  margin-bottom:0.8em;
}
.inline-form .vote-options{
  display:flex;
  gap:1.2em;
  flex-wrap:wrap;
}
.inline-form .vote-options button,
.inline-form .form-actions button{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--ink);
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:20px;
  color:var(--ink);
  padding:0.4em 0.6em;
  cursor:pointer;
  min-height:44px;
}
.inline-form .vote-options button:hover,
.inline-form .form-actions button:hover{
  border-bottom-width:2px;
}
.inline-form .vote-options button.cancel,
.inline-form .form-actions button.cancel{
  border-bottom-color:var(--hairline);
  color:var(--muted);
}
.inline-form textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hairline);
  font-family:inherit;
  font-size:19px;
  color:var(--ink);
  padding:0.6em 0;
  outline:none;
  min-height:5em;
  resize:vertical;
}
.inline-form textarea:focus{border-bottom-color:var(--ink);}
.inline-form .form-actions{
  display:flex;
  gap:1.2em;
  margin-top:1em;
}

/* Decision card — gentle emphasis without breaking restraint */
.entry.decision{
  position:relative;
}
.entry.decision .decision-eyebrow{
  font-family:"Cormorant SC",serif;
  font-size:12px;
  letter-spacing:0.32em;
  color:var(--ink);
  margin-bottom:1em;
}
.entry.decision .deadline{
  margin-top:0.4em;
  font-style:italic;
  color:var(--muted);
  font-size:17px;
}
.entry.decision .what::before{
  content:"";
  display:block;
  width:3em;
  border-top:1px solid var(--ink);
  margin-bottom:1.4em;
}

/* NOW cursor — sits between past and future on the timeline */
.now-cursor{
  list-style:none;
  display:flex;
  align-items:center;
  gap:1.2em;
  margin:3em 0;
  padding:0;
}
.now-cursor .now-line{
  flex:1;
  border-top:1px solid var(--ink);
}
.now-cursor .now-label{
  font-family:"Cormorant SC",serif;
  font-size:13px;
  letter-spacing:0.32em;
  color:var(--ink);
  white-space:nowrap;
}

/* Forthcoming entry — slightly muted */
.entry.forthcoming .what h3,
.entry.forthcoming .what p{color:var(--muted);}
.entry.forthcoming .when{color:var(--hairline);}

/* Editable blocks (lead role only) */
.editable{
  outline:none;
}
.editable:focus{
  outline:1px dashed var(--hairline);
  outline-offset:6px;
}

/* Global error surface (transient, top of page) */
.global-error{
  position:fixed;
  top:1.5em;
  left:50%;
  transform:translateX(-50%);
  z-index:200;
  background:var(--paper);
  border:1px solid var(--hairline);
  padding:0.8em 1.4em;
  font-family:"Cormorant SC",serif;
  font-size:12px;
  letter-spacing:0.18em;
}
.global-error .fail{color:#a02020;}
@media (prefers-color-scheme: dark){
  .global-error .fail{color:#e08080;}
}

/* Token + profile pages — single centered form panel */
.panel{
  max-width:560px;
  margin:0 auto;
  padding:6em 0 4em;
}
.panel h1{
  font-family:"Cormorant SC",serif;
  font-weight:500;
  letter-spacing:0.18em;
  font-size:clamp(28px,4vw,40px);
  text-align:center;
  margin:0 0 0.5em;
  text-indent:0.18em;
}
.panel .lede{
  text-align:center;
  font-style:italic;
  color:var(--muted);
  font-size:18px;
  margin:0 0 4em;
}
.panel .accordion-toggle{
  display:block;
  width:100%;
  text-align:center;
  background:transparent;
  border:none;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:19px;
  color:var(--muted);
  padding:1em;
  cursor:pointer;
  border-top:1px solid var(--hairline);
  margin-top:4em;
}
.panel .accordion-toggle:hover{color:var(--ink);}
.panel .accordion-body{display:none;padding-top:1.5em;}
.panel.expanded .accordion-body{display:block;}

/* Profile activity log */
.activity{
  margin-top:3em;
  list-style:none;
  padding:0;
}
.activity li{
  display:grid;
  grid-template-columns:14em 1fr;
  gap:1.6em;
  padding:1.2em 0;
  border-top:1px solid var(--hairline);
  align-items:baseline;
}
.activity li:last-child{border-bottom:1px solid var(--hairline);}
.activity .when{
  font-family:"Cormorant SC",serif;
  font-size:12px;
  letter-spacing:0.2em;
  color:var(--muted);
}
.activity .what{font-size:18px;}

/* Mobile additions */
@media (max-width:680px){
  .topmenu{
    top:0.9em;
    right:1em;
    padding:0.4em 0.8em;
    gap:1.1em;
    font-size:11px;
  }
  .identity{
    flex-direction:column;
    align-items:flex-start;
    gap:0.4em;
    padding:1em 0 1.2em;
  }
  .identity .who{font-size:18px;}
  .actions{gap:1.1em;flex-wrap:wrap;}
  .activity li{grid-template-columns:1fr;gap:0.3em;}
  .now-cursor{margin:2em 0;}
}

/* ==================================================================
   TIMELINE-AS-LOG — live entries + console footer + card-local thread
================================================================== */

/* Live entries — appended by JS above the NOW cursor */
.entry.live{
  opacity:0;
  transform:translateY(-8px);
  transition:opacity 0.4s ease, transform 0.4s ease;
  padding:1.8em 0;
}
.entry.live.appeared{
  opacity:1;
  transform:translateY(0);
}
.entry.live .when{
  font-size:12px;
  letter-spacing:0.2em;
  line-height:1.6;
}
.entry.live .what p{
  font-size:19px;
  margin:0 0 0.4em;
}
.entry.live .what blockquote.quote{
  border-left:1px solid var(--hairline);
  padding:0.2em 0 0.2em 1.2em;
  margin:0.6em 0;
  font-style:italic;
  font-size:18px;
  color:var(--ink);
}
.entry.live .what .meta{
  font-size:11px;
  color:var(--muted);
}

/* Card-local activity thread (votes/comments/questions on the card) */
.card-activity{
  margin-top:1.4em;
  padding-top:1em;
  border-top:1px dotted var(--hairline);
}
.card-activity-label{
  font-family:"Cormorant SC",serif;
  font-size:10.5px;
  letter-spacing:0.32em;
  color:var(--muted);
  margin-bottom:0.8em;
}
.card-event{
  display:grid;
  grid-template-columns:9em 6em 1fr;
  gap:1em;
  padding:0.5em 0;
  font-size:16px;
  align-items:baseline;
}
.card-event .actor{
  font-family:"Cormorant SC",serif;
  font-size:11.5px;
  letter-spacing:0.2em;
  color:var(--ink);
}
.card-event .t{
  font-family:"Cormorant SC",serif;
  font-size:11px;
  letter-spacing:0.16em;
  color:var(--muted);
}
.card-event .value{font-size:17px;}

@media (max-width:680px){
  .card-event{
    grid-template-columns:1fr;
    gap:0.2em;
    padding:0.7em 0;
    border-top:1px dotted var(--hairline);
  }
}

/* Console footer — discipline reminder for action messages */
.console{
  margin-top:8em;
  padding-top:2em;
  border-top:1px solid var(--rule);
  font-family:"Cormorant SC",serif;
}
.console-label{
  font-size:11px;
  letter-spacing:0.32em;
  color:var(--muted);
  margin-bottom:1.2em;
}
.console-body{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:13px;
  line-height:1.9;
  letter-spacing:0;
  color:var(--muted);
  padding:0.8em 1em;
  border:1px solid var(--hairline);
  background:transparent;
  max-height:30em;
  overflow-y:auto;
}
.console-body .console-empty{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:15px;
  text-align:center;
  padding:1em 0;
}
.console-line{
  padding:0.1em 0;
}
.console-line .t{
  color:var(--ink);
  margin-right:0.8em;
  font-weight:500;
}
.console-note{
  margin-top:1.2em;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:14px;
  color:var(--muted);
  text-align:center;
  max-width:42em;
  margin-left:auto;
  margin-right:auto;
  line-height:1.5;
}

/* ==================================================================
   SUMMONING — side panel triggered by click on a timeline vector
================================================================== */

/* Make timeline entries that reference a card visibly clickable */
.timeline .entry[data-target],
.timeline .entry:has([data-card]){
  cursor:pointer;
}
.timeline .entry[data-target]:hover,
.timeline .entry:has([data-card]):hover{
  background:rgba(0,0,0,0.015);
}
@media (prefers-color-scheme: dark){
  .timeline .entry[data-target]:hover,
  .timeline .entry:has([data-card]):hover{
    background:rgba(255,255,255,0.02);
  }
}
/* But don't change cursor on the action row inside the entry */
.timeline .entry .actions,
.timeline .entry .inline-form,
.timeline .entry .card-activity,
.timeline .entry button,
.timeline .entry a,
.timeline .entry textarea,
.timeline .entry input,
.timeline .entry select{
  cursor:auto;
}
.timeline .entry button,
.timeline .entry a{
  cursor:pointer;
}

/* Side panel — restrained, doesn't displace the timeline */
.summon-panel{
  position:fixed;
  top:0;
  right:0;
  width:min(34em, 100vw);
  height:100vh;
  background:var(--paper);
  border-left:1px solid var(--rule);
  transform:translateX(100%);
  transition:transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y:auto;
  z-index:90;
  padding:5em 3em 4em;
  box-shadow:-2px 0 24px rgba(0,0,0,0.04);
}
@media (prefers-color-scheme: dark){
  .summon-panel{
    box-shadow:-2px 0 24px rgba(0,0,0,0.4);
  }
}
.summon-panel.open{
  transform:translateX(0);
}
.summon-eyebrow{
  font-family:"Cormorant SC",serif;
  font-size:11px;
  letter-spacing:0.32em;
  color:var(--muted);
  margin-bottom:2em;
  text-align:center;
}
.summon-close{
  position:absolute;
  top:1.4em;
  right:1.6em;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hairline);
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:16px;
  color:var(--muted);
  padding:0.3em 0.5em;
  cursor:pointer;
}
.summon-close:hover{
  color:var(--ink);
  border-bottom-color:var(--ink);
}
.summon-body{
  font-size:18px;
}
/* Inside the panel the card is read-only; tighten its layout */
.summon-body .entry{
  display:block;
  padding:0;
  border:none;
}
.summon-body .entry .when{
  font-family:"Cormorant SC",serif;
  font-size:12px;
  letter-spacing:0.22em;
  color:var(--muted);
  margin-bottom:1.4em;
  line-height:1.6;
}
.summon-body .entry .when br{display:inline;}
.summon-body .entry .what h3{
  font-family:"Cormorant SC",serif;
  font-size:18px;
  letter-spacing:0.16em;
  margin:0 0 1em;
}
.summon-body .entry .what p{
  font-size:19px;
  max-width:none;
}
.summon-body .entry .meta{
  margin-top:1.4em;
  font-size:11.5px;
}

/* Mobile — panel takes full width but still slides from the right */
@media (max-width:680px){
  .summon-panel{
    width:100vw;
    padding:4em 2em 3em;
  }
}

/* ==================================================================
   LARGE PRINT — operator's toggle. Bumps reading text only; brand
   chrome (small-caps eyebrows, colophons) stays at decorative scale.
================================================================== */
.large-print body{font-size:28px;}
.large-print .statement p{font-size:clamp(26px,2.7vw,32px);}
.large-print .principal-period{font-size:23px;}
.large-print .entry .what p{font-size:26px;}
.large-print .entry .what h3{font-size:18px;}
.large-print .entry .when{font-size:16px;}
.large-print .entry .meta{font-size:15px;}
.large-print .entry.decision .deadline{font-size:21px;}
.large-print .ticket .title{font-size:26px;}
.large-print .ticket .id{font-size:16px;}
.large-print .ticket .status{font-size:15px;}
.large-print .field-group label{font-size:16px;}
.large-print .field-group input,
.large-print .field-group textarea,
.large-print .field-group select{font-size:26px;}
.large-print .field-group .hint{font-size:19px;}
.large-print .identity .who{font-size:26px;}
.large-print .identity .token-info{font-size:16px;}
.large-print .console-body{font-size:16px;}
.large-print .console-line .t{font-size:16px;}
.large-print .summon-body .entry .what p{font-size:24px;}
.large-print .card-event .actor{font-size:14.5px;}
.large-print .card-event .t{font-size:14px;}
.large-print .card-event .value{font-size:22px;}
.large-print .panel h1{font-size:clamp(34px,4.5vw,48px);}
.large-print .panel .lede{font-size:23px;}
.large-print .closing{font-size:clamp(36px,4vw,52px);}

/* The toggle itself — sits inside .topmenu */
.type-toggle{
  background:transparent;
  border:1px solid transparent;
  padding:0.25em 0.5em;
  font-family:"Cormorant SC",serif;
  font-size:11.5px;
  letter-spacing:0.18em;
  color:var(--ink);
  cursor:pointer;
  margin-left:0.4em;
  line-height:1;
  display:inline-flex;
  align-items:baseline;
  gap:0.05em;
}
.type-toggle .big{font-size:1.45em;line-height:1;}
.type-toggle:hover{border-color:var(--hairline);}
.type-toggle.on{border-color:var(--ink);}
.type-toggle[title]:hover::after{
  /* skip a tooltip — title attr is enough */
}

@media (max-width:680px){
  .large-print body{font-size:23px;}
  .large-print .entry .what p{font-size:22px;}
  .large-print .entry .when{font-size:13px;}
}

/* ==================================================================
   ORIENTATION BLOCK — top of page, sets the question for the team
================================================================== */
.orientation{
  margin:0 0 5em;
  padding:0 0 3em;
  border-bottom:1px solid var(--hairline);
}
.orientation-title{
  font-family:"Cormorant SC",serif;
  font-weight:500;
  letter-spacing:0.22em;
  font-size:clamp(22px,3vw,32px);
  text-align:center;
  margin:0 0 1.6em;
  text-indent:0.22em;
}
.orientation-lede{
  font-style:italic;
  font-size:clamp(20px,2.2vw,26px);
  text-align:center;
  margin:0 0 1.6em;
  max-width:32em;
  margin-left:auto;
  margin-right:auto;
  line-height:1.5;
}
.orientation p{
  font-size:19px;
  margin:0 0 1.2em;
  max-width:38em;
  line-height:1.6;
}
.orientation-meta{
  font-style:italic;
  font-size:16px;
  color:var(--muted);
  text-align:center;
  margin-top:2em !important;
  max-width:36em;
  margin-left:auto;
  margin-right:auto;
}
.large-print .orientation p{font-size:24px;}
.large-print .orientation-lede{font-size:clamp(26px,2.7vw,34px);}

/* Timeline section dividers — between phases of the timeline */
.timeline-section{
  list-style:none;
  display:flex;
  align-items:center;
  gap:1.2em;
  margin:3.5em 0 2em;
  padding:0;
}
.timeline-section .sx-line{
  flex:1;
  border-top:1px solid var(--hairline);
}
.timeline-section .sx-label{
  font-family:"Cormorant SC",serif;
  font-size:11.5px;
  letter-spacing:0.32em;
  color:var(--muted);
  white-space:nowrap;
}

/* ==================================================================
   PACKAGE CARDS — composition chain items
================================================================== */
.entry.package .what h3{
  font-family:"Cormorant Garamond",serif;
  font-weight:500;
  font-size:21px;
  letter-spacing:0.005em;
  text-transform:none;
  margin:0 0 0.4em;
}
.entry.package .what .package-eyebrow{
  font-family:"Cormorant SC",serif;
  font-size:11px;
  letter-spacing:0.28em;
  color:var(--muted);
  margin-bottom:0.6em;
}
.entry.package .what p{
  font-size:18px;
  margin:0 0 0.5em;
}
.entry.package .when{
  font-size:11.5px;
  letter-spacing:0.18em;
  line-height:1.6;
  color:var(--muted);
}
.large-print .entry.package .what h3{font-size:25px;}
.large-print .entry.package .what p{font-size:22px;}

/* Wider action set for package cards — wraps on narrow screens */
.actions.package{
  flex-wrap:wrap;
  gap:0.4em 1.4em;
}
.actions.package button.act{
  font-size:11.5px;
}
.large-print .actions.package button.act{font-size:13.5px;}

/* Mark-complete row — gated to lead role */
.complete-row{
  margin-top:1em;
  padding-top:0.8em;
  border-top:1px dashed var(--hairline);
  font-family:"Cormorant SC",serif;
  font-size:12px;
  letter-spacing:0.22em;
}
.complete-row button.mark{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hairline);
  font-family:"Cormorant SC",serif;
  font-size:12px;
  letter-spacing:0.22em;
  color:var(--ink);
  padding:0.3em 0.6em;
  cursor:pointer;
  min-height:36px;
}
.complete-row button.mark:hover{border-bottom-color:var(--ink);}
.complete-row .pending{color:var(--muted);font-style:italic;font-family:"Cormorant Garamond",serif;font-size:15px;letter-spacing:0;text-transform:none;}
.complete-row .completed{color:var(--ink);}
.complete-row .completed em{font-style:italic;color:var(--muted);font-family:"Cormorant Garamond",serif;font-size:15px;letter-spacing:0;text-transform:none;margin-left:0.6em;}
.large-print .complete-row,
.large-print .complete-row button.mark{font-size:14.5px;}

/* ==================================================================
   PLUS BUTTONS — add a card at top menu OR at the NOW cursor
================================================================== */
.plus-button{
  background:transparent;
  border:1px solid var(--hairline);
  border-radius:50%;
  width:1.8em;
  height:1.8em;
  font-family:"Cormorant Garamond",serif;
  font-size:18px;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  padding:0;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:0.6em;
}
.plus-button:hover{border-color:var(--ink);}

/* Plus button at the cursor — sits below the NOW marker */
.add-here{
  list-style:none;
  display:flex;
  justify-content:center;
  margin:0.4em 0 1.6em;
  padding:0;
}
.add-here button.plus-here{
  background:transparent;
  border:1px solid var(--hairline);
  border-radius:2em;
  padding:0.6em 1.6em;
  font-family:"Cormorant SC",serif;
  font-size:11px;
  letter-spacing:0.28em;
  color:var(--muted);
  cursor:pointer;
  min-height:44px;
}
.add-here button.plus-here:hover{
  border-color:var(--ink);
  color:var(--ink);
}

/* Add-card inline form (collapses out of plus button) */
.add-card-form{
  list-style:none;
  margin:1em 0 2em;
  padding:1.6em;
  border:1px solid var(--hairline);
  background:transparent;
}
.add-card-form .form-label{
  font-family:"Cormorant SC",serif;
  font-size:12px;
  letter-spacing:0.28em;
  color:var(--muted);
  margin-bottom:0.6em;
}
.add-card-form input,
.add-card-form textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hairline);
  padding:0.6em 0;
  font-family:inherit;
  font-size:18px;
  color:var(--ink);
  outline:none;
  margin-bottom:1.4em;
}
.add-card-form input:focus,
.add-card-form textarea:focus{border-bottom-color:var(--ink);}
.add-card-form textarea{min-height:5em;resize:vertical;}
.add-card-form .form-actions{
  display:flex;
  gap:1.2em;
  justify-content:flex-end;
  margin-top:0.4em;
}
.add-card-form button{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--ink);
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:18px;
  color:var(--ink);
  padding:0.4em 0.6em;
  cursor:pointer;
  min-height:44px;
}
.add-card-form button.cancel{border-bottom-color:var(--hairline);color:var(--muted);}
.add-card-form button:hover{border-bottom-width:2px;}

/* ==================================================================
   VIEW-AS MODE — webmaster impersonation affordance.
   Deliberately loud relative to the brand register: Dr. Theisen
   needs to never forget what mode he is in. Border + banner +
   approval-chain panel on profile page.
================================================================== */

/* Default level color (overridden inline by JS on .html element) */
:root{
  --view-as-color: #a14ec8;
}

/* Body border when view-as is active. Outline doesn't affect page flow. */
html.view-as-active{
  /* outline on <html> would overflow viewport awkwardly on some browsers;
     use a fixed full-viewport overlay div approach via body::before. */
}
html.view-as-active body::before{
  content:"";
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  border:6px solid var(--view-as-color);
  pointer-events:none;
  z-index:300;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.18);
}

/* Fixed banner — top center. White text on level color. */
.view-as-label{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  z-index:310;
  background:var(--view-as-color);
  color:#fff;
  padding:0.55em 1.4em;
  font-family:"Cormorant SC","Cormorant Garamond",serif;
  font-size:12.5px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:1.4em;
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  box-shadow:0 2px 12px rgba(0,0,0,0.25);
  max-width:min(92vw, 720px);
}
.view-as-label .vab-text{
  font-weight:500;
  white-space:nowrap;
}
.view-as-label .vab-members{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:none;
  opacity:0.92;
  white-space:nowrap;
  max-width:22em;
  overflow:hidden;
  text-overflow:ellipsis;
}
.view-as-label .vab-exit{
  background:rgba(255,255,255,0.12);
  color:#fff;
  border:1px solid rgba(255,255,255,0.6);
  font-family:"Cormorant SC",serif;
  font-size:11px;
  letter-spacing:0.22em;
  padding:0.35em 0.8em;
  cursor:pointer;
  min-height:32px;
  border-radius:2px;
}
.view-as-label .vab-exit:hover{
  background:rgba(255,255,255,0.25);
  border-color:#fff;
}

/* Topmenu shifts down so it doesn't overlap the banner */
html.view-as-active .topmenu{
  top:3.4em;
}
html.view-as-active .global-error{
  top:3.4em;
}

@media (max-width:680px){
  .view-as-label{
    font-size:10.5px;
    padding:0.45em 0.9em;
    gap:0.8em;
    flex-wrap:wrap;
    max-width:96vw;
    justify-content:center;
  }
  .view-as-label .vab-members{
    font-size:11.5px;
    max-width:14em;
  }
  html.view-as-active .topmenu{
    top:auto;
    bottom:0.9em;          /* on mobile, push topmenu to bottom out of the way */
    right:1em;
  }
  html.view-as-active body::before{
    border-width:4px;
  }
}

/* ─── Approval chain panel on profile page (admin only) ────────── */
.approval-chain-wrap{
  margin-top:3em;
}
.approval-chain-lede{
  text-align:center;
  font-size:16px;
  color:var(--muted);
  margin:0 0 2.4em;
  max-width:34em;
  margin-left:auto;
  margin-right:auto;
  line-height:1.55;
}
.approval-chain{
  display:flex;
  flex-direction:column;
  gap:1em;
}
.ac-level{
  display:grid;
  grid-template-columns:8px 1fr;
  align-items:stretch;
  border:1px solid var(--hairline);
  background:transparent;
  cursor:pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  min-height:64px;
}
.ac-level:hover{
  border-color:var(--ink);
  transform:translateX(2px);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.ac-level .ac-stripe{
  background:var(--level-color);
  width:8px;
}
.ac-level .ac-body{
  padding:1em 1.4em;
  display:flex;
  flex-direction:column;
  gap:0.4em;
}
.ac-level .ac-label{
  font-family:"Cormorant SC",serif;
  font-size:12.5px;
  letter-spacing:0.28em;
  color:var(--ink);
  text-transform:uppercase;
}
.ac-level .ac-members{
  display:flex;
  flex-wrap:wrap;
  gap:0.5em 1.2em;
  font-style:italic;
  font-size:17px;
  color:var(--muted);
}
.ac-level .ac-members .ac-member::before{
  content:"·  ";
  color:var(--hairline);
  font-style:normal;
  margin-right:0.2em;
}
.ac-level .ac-members .ac-member:first-child::before{
  content:"";
  margin-right:0;
}
.ac-level.ac-active{
  border-color:var(--level-color);
  border-width:2px;
  background:rgba(0,0,0,0.02);
}
.ac-level .ac-active-mark{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:13px;
  color:var(--level-color);
  letter-spacing:0;
  margin-top:0.2em;
}
@media (prefers-color-scheme: dark){
  .ac-level.ac-active{
    background:rgba(255,255,255,0.04);
  }
}
@media (max-width:680px){
  .ac-level .ac-body{padding:0.8em 1em;}
  .ac-level .ac-members{font-size:15px;}
}

.large-print .ac-level .ac-label{font-size:14.5px;}
.large-print .ac-level .ac-members{font-size:20px;}
.large-print .approval-chain-lede{font-size:19px;}