/* juliaboon.com
   paper #FBFBF9 · ink #14171A · rule #DFE1E0 · mute #5E6672 · petrol #1B3A57
   display: Iowan Old Style / Palatino / Georgia
   body:    system sans
   mono:    system mono — every reference, year and role
   One container width. No transforms. Everything lines up on one measure.
*/

:root{
  --paper:#FBFBF9; --ink:#14171A; --rule:#DFE1E0; --mute:#5E6672; --petrol:#1B3A57;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.hold{width:min(100% - 2.5rem, 78rem);margin-inline:auto}

/* ---------- masthead ---------- */
.masthead{
  border-bottom:1px solid var(--ink);
  padding:clamp(2.5rem,7vw,5rem) 0 1.1rem;
  margin-bottom:clamp(2rem,5vw,3.5rem);
}
.masthead h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,8.5vw,5.2rem);line-height:.95;
  letter-spacing:-.015em;margin:0;
}
.standfirst{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--petrol);margin:.9rem 0 0;
}

/* ---------- text helpers ---------- */
.centred{text-align:center}
.note{font-size:.9rem;color:var(--mute);max-width:52rem;margin:-.2rem auto 2.1rem;text-align:center}
.small{font-size:.78rem;color:var(--mute);font-style:italic;max-width:32rem;
  margin:.7rem auto 0;text-align:center}

.statement{text-align:center;margin-bottom:clamp(2.5rem,6vw,4rem)}
.statement p{margin:0 auto .9rem;max-width:52rem}
.statement p:last-child{
  font-family:var(--display);font-size:1.16rem;font-style:italic;
  color:var(--petrol);margin-top:1.4rem;
}

.section-label{
  font-family:var(--mono);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
  text-align:center;margin:0 0 1.3rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--rule);
}

a{color:var(--petrol);text-decoration:none;border-bottom:1px solid var(--rule)}
a:hover{border-bottom-color:var(--petrol)}
a:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:2px}

/* ═══════════════════════════════════════════════════════════════
   SWIPEABLE MAPS
   The maps never stack. On a narrow screen they scroll sideways,
   because a sequence read top-to-bottom stops being a sequence.
   A frosted edge appears only while there is more to see.
   ═══════════════════════════════════════════════════════════════ */
.swipe{position:relative;border-radius:.55rem}
.scroll-x{
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;
  scrollbar-width:thin;scrollbar-color:#D3D6D9 transparent;
  border-radius:.55rem;
}
.scroll-x::-webkit-scrollbar{height:6px}
.scroll-x::-webkit-scrollbar-thumb{background:#D8DBDE;border-radius:3px}
.scroll-x::-webkit-scrollbar-track{background:transparent}

.swipe::before,.swipe::after{
  content:"";position:absolute;top:0;bottom:0;width:2.6rem;
  pointer-events:none;z-index:3;opacity:1;transition:opacity .22s ease;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.swipe::before{
  left:0;border-radius:.55rem 0 0 .55rem;
  background:linear-gradient(to right,var(--paper) 15%,transparent);
  -webkit-mask-image:linear-gradient(to right,#000,transparent);
  mask-image:linear-gradient(to right,#000,transparent);
}
.swipe::after{
  right:0;border-radius:0 .55rem .55rem 0;
  background:linear-gradient(to left,var(--paper) 15%,transparent);
  -webkit-mask-image:linear-gradient(to left,#000,transparent);
  mask-image:linear-gradient(to left,#000,transparent);
}
.swipe.at-start::before{opacity:0}
.swipe.at-end::after{opacity:0}

/* minimum legible widths — below these the maps scroll rather than shrink */
.civics .scroll-x > svg{min-width:44rem}
.mirror{min-width:52rem}
.beads{min-width:max-content}


/* ═══════════════════════════════════════════════════════════════
   ABOVE — the constitutional diagram
   ═══════════════════════════════════════════════════════════════ */
.civics{margin:0 0 1.4rem;padding:0}
.civics svg{width:100%;height:auto;display:block}
.civics figcaption{
  font-size:.78rem;line-height:1.5;color:var(--mute);
  max-width:46rem;margin:1rem auto 0;text-align:center;
}
.f-leg{fill:#C9D9EC}   .s-leg{stroke:#8FA9C4;stroke-width:1}
.f-exe{fill:#F6E7C6}   .s-exe{stroke:#CDB183;stroke-width:1}
.f-jud{fill:#F3D5D5}   .s-jud{stroke:#C99A9A;stroke-width:1}
.f-white{fill:#FFFFFF} .s-ink{stroke:#14171A;stroke-width:1.1}
.civics .lbl{font-family:var(--body);font-size:11.5px;fill:#14171A;text-anchor:middle}
.civics .hd{font-family:var(--display);font-size:14.5px;fill:#14171A;text-anchor:middle}
.civics .sub{font-size:9.5px;fill:#5E6672;text-anchor:middle;font-style:italic}
.civics .key-t{font-family:var(--mono);font-size:9px;fill:#5E6672}
.civics .wlab{font-family:var(--mono);letter-spacing:.02em}

/* ═══════════════════════════════════════════════════════════════
   THE HINGE
   ═══════════════════════════════════════════════════════════════ */
.hinge{width:1px;height:1.9rem;margin:0 auto;background:var(--rule)}
.due{
  width:max-content;margin:0 auto;background:var(--paper);
  border:1px solid var(--rule);border-radius:2rem;padding:.55rem 1.9rem;
}
.due span{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);
}

/* ═══════════════════════════════════════════════════════════════
   BELOW — the record
   ═══════════════════════════════════════════════════════════════ */
.mirror{
  display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:0 1.6rem;
  align-items:start;border-top:1px solid var(--rule);
  margin-bottom:clamp(2.8rem,6vw,4rem);
}
.col{position:relative;padding-top:1.7rem}
.col::before{content:"";position:absolute;top:0;left:50%;width:1px;height:1.7rem;background:var(--c)}
.col-head{
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c);filter:brightness(.7);
  text-align:center;margin:0 0 1rem;
}
.ag{
  position:relative;display:block;background:#fff;
  border:1px solid var(--rule);border-left:3px solid var(--c);border-radius:2px;
  padding:.65rem .75rem .58rem;margin-bottom:.55rem;
  text-decoration:none;color:inherit;
  transition:transform .15s ease,box-shadow .15s ease;
}
.ag:hover,.ag:focus-visible{transform:translateX(2px);box-shadow:0 4px 14px rgba(20,23,26,.08)}
.ag b{display:block;font-family:var(--display);font-weight:400;font-size:1rem;
  line-height:1.2;margin-bottom:.3rem}
.ag .role{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.02em;
  color:var(--c);filter:brightness(.62);margin-bottom:.34rem}
.ag .fail{display:block;font-size:.755rem;line-height:1.44;color:#42474C;margin-bottom:.4rem}
.ag .coda{
  display:block;font-family:var(--display);font-style:italic;
  font-size:.88rem;color:var(--c);filter:brightness(.62);
  margin:.15rem 0 .5rem;
}
.ag em{display:block;font-style:normal;font-family:var(--mono);font-size:.585rem;
  letter-spacing:.03em;color:var(--mute)}
.ag.sub{margin-left:1.15rem;margin-top:-.15rem;border-left-width:1px;background:#FDFDFC}
.ag.sub::before{content:"";position:absolute;left:-1.15rem;top:1.05rem;
  width:1.15rem;height:1px;background:var(--rule)}
.ag.sub b{font-size:.87rem}
.ag.sub .fail{font-size:.72rem}

/* ═══════════════════════════════════════════════════════════════
   ACROSS — the sequence
   Institutions are boxes. What followed sits in the gap between
   them, unboxed, because it belongs to no one.
   ═══════════════════════════════════════════════════════════════ */
.cascades{margin:0 0 clamp(3rem,7vw,4.5rem)}
.cascade{padding:1.3rem 0;border-top:1px solid var(--rule)}
.cascade:last-child{border-bottom:1px solid var(--rule)}
.cascade-head{
  font-family:var(--display);font-weight:400;font-size:1.12rem;
  margin:0 0 .95rem;display:flex;align-items:baseline;gap:.75rem;
}
.cascade-head span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--mute);
}
.beads{list-style:none;margin:0;padding:var(--pad,6rem) 0 var(--padb,.4rem);display:flex;align-items:flex-start;gap:0}

.stack{position:relative;flex:0 0 auto;width:8.2rem;display:flex;flex-direction:column}
.bead{
  background:#fff;border:1px solid var(--rule);border-top:3px solid var(--c);
  border-radius:2px;padding:.5rem .6rem;text-align:center;
}
.bead .yr{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;
  color:var(--c);filter:brightness(.6);margin-bottom:.2rem;
}
.bead b{display:block;font-family:var(--display);font-weight:400;font-size:.85rem;line-height:1.2}
.bead .who{
  display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.05em;
  color:var(--mute);margin-top:.25rem;
}

/* ── vertical relationships ──────────────────────────────────────
   ABOVE  = a body that supervises the one beneath it.
   BELOW  = a body appointed by the one above it.
   The double arrow marks a closed loop: a complaint returned to the
   body it was made about.
   ─────────────────────────────────────────────────────────────── */
.over,.under{display:flex;flex-direction:column;align-items:center;text-align:center}
/* supervisors float above and appointees below, so every main bead
   sits on the same top line regardless of what hangs off it */
.over{position:absolute;bottom:100%;left:0;right:0}
.under{position:absolute;top:100%;left:0;right:0}
.cascade.has-under .beads{--padb:9.4rem}
.over .bead,.under .bead{width:100%;border-top-width:2px;opacity:.96}
.over .bead b,.under .bead b{font-size:.76rem}

.over .rel,.under .rel,.under .tail{
  font-size:.585rem;line-height:1.3;color:var(--mute);position:relative;
}
.over .rel{padding:.46rem .15rem .34rem}
.under .rel{padding:.4rem .15rem .34rem}
.under .tail{padding:.34rem .2rem 0}

/* connector: up to a supervisor */
.over .rel::before{
  content:"";position:absolute;left:50%;top:.05rem;width:1px;height:.34rem;background:var(--c);
}
.over .rel::after{
  content:"\2191";position:absolute;left:50%;bottom:-.14rem;transform:translateX(-50%);
  color:var(--c);font-size:.62rem;line-height:1;
}
.over.loop .rel::after{content:"\21C5"}

/* connector: down to an appointee */
.under .rel::before{
  content:"";position:absolute;left:50%;top:0;width:1px;height:.3rem;background:var(--c);
}
.under .rel::after{
  content:"\2193";position:absolute;left:50%;bottom:-.1rem;transform:translateX(-50%);
  color:var(--c);font-size:.62rem;line-height:1;
}
.under .tail::before{
  content:"\21B3";position:absolute;left:.1rem;top:.28rem;color:#B9BEC4;font-size:.62rem;
}

.link{
  flex:1 1 0;min-width:0;position:relative;align-self:flex-start;
  height:3.1rem;
}
.link::before{                     /* the rule, level with the brow */
  content:"";position:absolute;left:0;right:0;top:1.5px;height:1px;background:var(--rule);
}
.link::after{                      /* arrowhead, on the same line */
  content:"";position:absolute;right:0;top:1.5px;transform:translateY(-50%);
  width:0;height:0;border-left:4px solid #B9BEC4;
  border-top:3px solid transparent;border-bottom:3px solid transparent;
}
.link.end span{color:#42474C}      /* the chain ends in an arrow pointing nowhere */
.link span{                        /* the words sit above the rule */
  position:absolute;left:.15rem;right:.5rem;bottom:calc(100% + .12rem);
  text-align:center;font-size:.665rem;line-height:1.3;color:var(--mute);
}

/* Below the desktop fit, arrows stop flexing and take a fixed length.
   A shrinking connector makes its label tall, and a tall label collides
   with the row above. Locked widths keep every label the same shape. */
@media(max-width:1240px){
  .stack{width:7.8rem}
  .link{flex:0 0 8.4rem}
  /* clearance is per chain: a taller stack of supervisors needs more room,
     and every stack grows taller as the columns narrow */
  /* clearance is measured at runtime; these are only a pre-paint floor */
  .cascade .beads{--pad:8rem}
}

/* ---------- colophon + footer ---------- */
.colophon{margin-bottom:clamp(3rem,7vw,4.5rem)}
.colophon p{margin:0 auto .9rem;font-size:.985rem;max-width:48rem}

footer{border-top:1px solid var(--ink);padding:1.4rem 0 4rem;text-align:center}
footer p{
  font-family:var(--mono);font-size:.7rem;line-height:1.75;letter-spacing:.02em;
  color:var(--mute);margin:0;
}
footer .year{margin-top:.9rem}

/* ═══════════════════════════════════════════════════════════════
   NARROW
   ═══════════════════════════════════════════════════════════════ */


@media(max-width:620px){
  body{font-size:16px}
  .ag b{font-size:1.05rem}
  .ag .fail{font-size:.85rem}
  .statement,.note,.small,.civics figcaption,.colophon,.centred{text-align:left}
  .statement p,.note,.small,.colophon p{margin-inline:0}
}
@media print{
  body{background:#fff;font-size:11pt}
  .swipe::before,.swipe::after{display:none}
  .scroll-x{overflow:visible}
  .ag,.cascade,.stack{break-inside:avoid}
}

/* ═══════════════════════════════════════════════════════════════
   SECTION PAGES
   ═══════════════════════════════════════════════════════════════ */
.inner{width:min(100% - 2.5rem, 60rem);margin-inline:auto}
.section .masthead{border-bottom:3px solid var(--c)}
.section .masthead h1{font-size:clamp(2rem,5.5vw,3.4rem);margin-top:.5rem}
.back{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);text-decoration:none;border:0}
.back:hover{color:var(--petrol)}
.section .standfirst{color:var(--mute)}
.branch-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c);filter:brightness(.7);margin:.8rem 0 0}
.findings{list-style:none;margin:0 0 clamp(2.5rem,6vw,3.5rem);padding:0;max-width:44rem}
.findings li{padding:.7rem 0 .7rem 1.1rem;border-bottom:1px solid var(--rule);
  border-left:3px solid var(--c);font-size:.95rem;line-height:1.55}
.matters{list-style:none;margin:0 0 clamp(3rem,7vw,4.5rem);padding:0}
.matters li{display:grid;grid-template-columns:1fr auto auto;gap:1.4rem;
  align-items:baseline;padding:.72rem 0;border-bottom:1px solid var(--rule)}
.matters .forum{font-size:.95rem}
.matters .ref,.matters .state{font-family:var(--mono);font-size:.72rem;color:var(--mute)}
.matters .state{color:var(--petrol);min-width:5.5rem;text-align:right}
.return{margin:clamp(2.5rem,6vw,3.5rem) 0 0}
.return a{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}


/* ═══════════════════════════════════════════════════════════════
   THE COST — bare arithmetic, no adjective
   ═══════════════════════════════════════════════════════════════ */
.ledger{
  max-width:46rem;margin:0 auto clamp(1.2rem,3vw,1.8rem);
  border-top:1px solid var(--rule);
}
.lrow{
  display:flex;align-items:baseline;gap:1rem;
  padding:.72rem .2rem;border-bottom:1px solid var(--rule);
}
.lk{flex:1;font-size:.92rem;line-height:1.4}
.lv{
  font-family:var(--mono);font-size:.86rem;letter-spacing:.02em;
  color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.lrow:nth-child(1) .lv,.lrow:nth-child(2) .lv{font-size:.95rem}
.lrow:nth-child(5) .lv{color:var(--petrol)}

/* ═══════════════════════════════════════════════════════════════
   PEEK — a section opens in place, over frosted glass
   ═══════════════════════════════════════════════════════════════ */
.peek{
  border:0;padding:0;background:transparent;overflow:visible;
  width:min(54rem,94vw);max-width:none;max-height:88vh;
}
.peek::backdrop{
  background:rgba(20,23,26,.34);
  -webkit-backdrop-filter:blur(7px) saturate(.9);
  backdrop-filter:blur(7px) saturate(.9);
}
.peek-shell{position:relative;border-radius:1.05rem}
.peek-body{
  background:var(--paper);border:1px solid rgba(255,255,255,.6);
  border-radius:1.05rem;max-height:88vh;overflow-y:auto;
  padding:2.4rem clamp(1.3rem,4vw,2.6rem) 2.6rem;
  box-shadow:0 26px 70px rgba(20,23,26,.3), 0 2px 6px rgba(20,23,26,.08);
  -webkit-overflow-scrolling:touch;
}
.peek-x{
  position:absolute;top:.5rem;right:.7rem;z-index:2;
  width:2rem;height:2rem;border:0;border-radius:50%;
  background:rgba(251,251,249,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--mute);font-size:1.35rem;line-height:1;cursor:pointer;
}
.peek-x:hover{color:var(--ink);background:var(--paper)}
.peek-head{border-bottom:3px solid var(--c,var(--rule));padding-bottom:.9rem;margin-bottom:1.6rem}
.peek-head h1{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,4vw,2.3rem);
  line-height:1.05;margin:0}
.peek-head .standfirst{margin-top:.55rem;color:var(--mute)}
.peek-body main{padding:0}
.peek-body .statement{text-align:left;margin-bottom:1.8rem}
.peek-body .statement p{margin-inline:0;max-width:none}
.peek-body .section-label{text-align:left}
.peek-body .findings,.peek-body .matters,.peek-body .register{max-width:none}
.peek-more{margin:1.8rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule)}
.peek-more a{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}

@media(max-width:620px){
  .ledger{max-width:none}
  .lrow{flex-direction:column;gap:.15rem;padding:.62rem .1rem}
  .lk{font-size:.88rem}
  .peek{width:100%;max-height:92vh}
  .peek-shell{border-radius:0}
  .peek-body{border-radius:0;max-height:92vh;padding-top:2.8rem}
}
@media print{.peek{display:none}}