/* ==========================================================================
   AI-LAW PTY LTD  /  headnote.css
   A law report printed on paper. Serif text block, monospace apparatus.
   Zero rounded corners. Zero box shadows. Zero images.
   ========================================================================== */

:root{
  --paper:#F6F5F0;
  --paper-band:#EDEBE3;
  --paper-wash:#E4E9F1;
  --ink:#15171C;
  --ink-mid:#43474F;
  --ink-soft:#63676F;
  --rule:#D9D6CB;
  --rule-firm:#B6B2A4;
  --seal:#1B3A6B;
  --seal-lift:#2C5490;
  --serif:Vollkorn,Georgia,"Times New Roman",serif;
  --mono:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --quire:74rem;
  --column:46rem;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background-color:#F6F5F0;
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.04rem;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-0.006em;
  margin:0;
  color:var(--ink);
}

p,ul,ol,dl,dd,dt,figure{margin:0}
li{margin:0}
strong{font-weight:700;color:var(--ink)}
em{font-style:italic}

a{color:var(--seal);text-decoration:underline;text-underline-offset:0.16em;text-decoration-thickness:1px}
a:hover{color:var(--seal-lift)}
a:focus-visible,button:focus-visible{outline:2px solid var(--seal);outline-offset:3px}

table{border-collapse:collapse;border-spacing:0}

/* ---------------------------------------------------------------- shell -- */

.case-skip{
  position:absolute;left:-9999px;top:0;z-index:40;
  background:var(--seal);color:#F6F5F0;
  padding:0.65rem 1.05rem;
  font-family:var(--mono);font-size:0.76rem;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;
}
.case-skip:focus{left:0}

.quire{
  width:100%;
  max-width:var(--quire);
  margin:0 auto;
  padding-left:1.7rem;
  padding-right:1.7rem;
}

.case-head{
  position:sticky;top:0;z-index:30;
  background:var(--paper);
  border-bottom:1px solid var(--rule-firm);
}
.case-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.4rem;
  min-height:4rem;
}
.case-mark{display:inline-flex;align-items:center;text-decoration:none}
.case-glyph{display:block;height:1.75rem;width:auto}
.case-nav{display:block}
.case-list{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:1.8rem;
}
.case-link{
  font-family:var(--mono);
  font-size:0.73rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-mid);text-decoration:none;
  padding-bottom:0.15rem;border-bottom:2px solid transparent;
}
.case-link:hover{color:var(--seal);border-bottom-color:var(--rule-firm)}
.case-link[aria-current="page"]{color:var(--seal);border-bottom-color:var(--seal)}
.case-toggle{
  display:none;
  width:2.5rem;height:2.5rem;
  align-items:center;justify-content:center;
  flex-direction:column;gap:0.3rem;
  background:transparent;border:1px solid var(--rule-firm);
  padding:0;cursor:pointer;
}
.case-bar{display:block;width:1.1rem;height:1px;background:var(--ink)}

/* ---------------------------------------------------------- frontispiece -- */

.frontispiece{
  border-bottom:3px double var(--rule-firm);
  padding-top:4.8rem;padding-bottom:4rem;
  background:var(--paper);
}
.catchline{
  font-family:var(--mono);
  font-size:0.71rem;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--seal);
  margin-bottom:1.5rem;
}
.frontispiece-title{
  font-size:clamp(2.35rem,6vw,4rem);
  line-height:1.04;
  max-width:19ch;
  margin-bottom:1.7rem;
  letter-spacing:-0.018em;
}
.argument{
  font-size:1.16rem;line-height:1.62;color:var(--ink-mid);
  max-width:58ch;
}
.frontispiece-acts{display:flex;flex-wrap:wrap;gap:0.85rem;margin-top:2.4rem}

.plea{
  display:inline-flex;align-items:center;
  padding:0.8rem 1.45rem;
  font-family:var(--mono);
  font-size:0.75rem;font-weight:600;
  letter-spacing:0.13em;text-transform:uppercase;
  text-decoration:none;
}
.plea[data-weight="solid"]{background:var(--seal);color:#F6F5F0;border:1px solid var(--seal)}
.plea[data-weight="solid"]:hover{background:var(--seal-lift);border-color:var(--seal-lift);color:#F6F5F0}
.plea[data-weight="outline"]{background:transparent;color:var(--seal);border:1px solid var(--rule-firm)}
.plea[data-weight="outline"]:hover{border-color:var(--seal);color:var(--seal)}

/* -------------------------------------------------------------- headnote -- */

.headnote{
  border-bottom:1px solid var(--rule);
  padding-top:3.9rem;padding-bottom:3.9rem;
}
.headnote:last-of-type{border-bottom:0}
.headnote-title{
  font-size:clamp(1.55rem,3vw,2.15rem);
  margin-bottom:1.4rem;
  display:flex;gap:0.15rem;align-items:baseline;
}
.headnote-no{
  font-family:var(--mono);
  font-weight:600;font-size:0.6em;
  letter-spacing:0.02em;
  color:var(--seal);
  margin-right:0.85rem;
}
.headnote-no::before{content:"\00A7"}
.headnote-lede{
  font-size:1.08rem;color:var(--ink-mid);max-width:60ch;margin-bottom:2rem;
}
.headnote-body{max-width:var(--column)}
.headnote-body>*+*{margin-top:1.15rem}
.headnote-body h3{
  font-size:1.2rem;margin-top:2.4rem;color:var(--ink);
}
.headnote-body h3:first-child{margin-top:0}
.headnote-body p{color:var(--ink-mid)}
.headnote-body ul,.headnote-body ol{padding-left:1.4rem;color:var(--ink-mid)}
.headnote-body li+li{margin-top:0.55rem}
.headnote-body ul{list-style:square}
.headnote-body ul li::marker{color:var(--seal)}
.headnote-body ol li::marker{color:var(--seal);font-family:var(--mono);font-size:0.85em}

.marginal-rule{
  font-family:var(--mono);
  font-size:0.7rem;font-weight:600;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--ink-soft);
  border-left:2px solid var(--seal);
  padding-left:0.85rem;
  margin-bottom:1.8rem;
  max-width:33rem;
  line-height:1.7;
}

/* ------------------------------------------------------------- pinpoints -- */

.pinpoint-block{border-top:1px solid var(--rule-firm)}
.pinpoint{
  display:grid;grid-template-columns:15rem minmax(0,1fr);
  gap:1.2rem;
  padding:1.05rem 0;
  border-bottom:1px solid var(--rule);
}
.pinpoint-key{
  font-family:var(--mono);
  font-size:0.71rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:0.3rem;
}
.pinpoint-value{color:var(--ink);font-size:1rem}

.pinpoint-block[data-lay="strip"]{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  border-top:0;border-left:1px solid var(--rule);
}
.pinpoint-block[data-lay="strip"] .pinpoint{
  display:block;
  border-bottom:0;border-right:1px solid var(--rule);
  border-top:1px solid var(--rule);
  padding:1.35rem 1.4rem;
}
.pinpoint-block[data-lay="strip"] .pinpoint-key{padding-top:0;margin-bottom:0.5rem}
.pinpoint-block[data-lay="strip"] .pinpoint-value{font-size:1.02rem;line-height:1.5}

/* ---------------------------------------------------------------- tables -- */

.ratio-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule-firm);
  max-width:100%;
}
.ratio-table{
  width:100%;
  min-width:40rem;
  font-family:var(--mono);
  font-size:0.79rem;
  line-height:1.6;
  text-align:left;
}
.ratio-table caption{
  text-align:left;
  padding:0.85rem 1rem;
  font-family:var(--mono);
  font-size:0.68rem;font-weight:600;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--paper-band);
  border-bottom:1px solid var(--rule-firm);
}
.ratio-table th,.ratio-table td{
  padding:0.75rem 1rem;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.ratio-table thead th{
  font-size:0.67rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:#F6F5F0;background:var(--seal);
  white-space:nowrap;
  border-bottom:1px solid var(--seal);
}
.ratio-table tbody th{font-weight:600;color:var(--ink)}
.ratio-table td{color:var(--ink-mid)}
.ratio-table td:first-child{color:var(--ink);font-weight:600}
.ratio-table tbody tr:last-child th,
.ratio-table tbody tr:last-child td{border-bottom:0}

/* -------------------------------------------------------------- callouts -- */

.obiter{
  border:1px solid var(--rule-firm);
  border-left:3px solid var(--seal);
  background:var(--paper-wash);
  padding:1.2rem 1.45rem;
}
.obiter>*+*{margin-top:0.8rem}
.obiter p{color:var(--ink);font-size:0.99rem}
.obiter-label{
  display:block;
  font-family:var(--mono);
  font-size:0.68rem;font-weight:700;
  letter-spacing:0.17em;text-transform:uppercase;
  color:var(--seal);
}

/* ---------------------------------------------------------------- rubric -- */

.rubric{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  border-top:1px solid var(--rule-firm);
  border-left:1px solid var(--rule-firm);
}
.rubric-item{
  border-right:1px solid var(--rule-firm);
  border-bottom:1px solid var(--rule-firm);
  padding:1.6rem 1.5rem 1.7rem;
  background:var(--paper);
}
.rubric-no{
  font-family:var(--mono);
  font-size:0.68rem;font-weight:700;
  letter-spacing:0.19em;text-transform:uppercase;
  color:var(--seal);
  margin-bottom:0.9rem;
}
.rubric-title{font-size:1.24rem;line-height:1.28;margin-bottom:0.75rem}
.rubric-text{color:var(--ink-mid);font-size:0.97rem}

/* --------------------------------------------------- document furniture -- */

.gathering{
  display:grid;
  grid-template-columns:15.5rem minmax(0,1fr);
  gap:3.6rem;
  padding-top:3.2rem;
  padding-bottom:5rem;
  align-items:start;
}
.headband{
  position:sticky;top:5.4rem;
  align-self:start;
  max-height:calc(100vh - 7.6rem);
  overflow-y:auto;
  border-top:2px solid var(--seal);
  padding-top:1.1rem;
}
.headband-title{
  font-family:var(--mono);
  font-size:0.68rem;font-weight:700;
  letter-spacing:0.19em;text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:1rem;
}
.headband-list{
  font-family:var(--mono);
  list-style:decimal;
  margin:0;padding-left:1.9rem;
  font-size:0.75rem;
  line-height:1.5;
  color:var(--ink-soft);
}
.headband-list li{margin-bottom:0.6rem}
.headband-list li::marker{color:var(--ink-soft);font-size:0.9em}
.headband-link{
  color:var(--ink-mid);text-decoration:none;
  display:block;
}
.headband-link:hover{color:var(--seal);text-decoration:underline}

.leaf{min-width:0}

.colophon{border-bottom:3px double var(--rule-firm);padding-bottom:2.2rem;margin-bottom:0.6rem}
.colophon h1{font-size:clamp(2.05rem,4.4vw,3rem);margin-bottom:1.2rem;letter-spacing:-0.015em}
.colophon .argument{font-size:1.07rem}
.colophon-dates{
  display:flex;flex-wrap:wrap;gap:0.55rem 0.7rem;
  margin-top:1.6rem;
}
.colophon-dates span{
  font-family:var(--mono);
  font-size:0.67rem;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--rule-firm);padding:0.35rem 0.7rem;
}

.leaf .headnote{padding-top:2.7rem;padding-bottom:2.7rem}
.leaf .headnote:last-of-type{border-bottom:1px solid var(--rule)}
.leaf .headnote-title{font-size:clamp(1.3rem,2.4vw,1.62rem);margin-bottom:1.3rem}
.leaf .headnote-body{max-width:none}
.leaf .headnote-body table{margin-top:0.3rem}

/* --------------------------------------------------------------- reveals -- */

[data-motion="on"] .headnote[data-reveal="yes"]{
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.5s ease,transform 0.5s ease;
}
[data-motion="on"] .headnote[data-reveal="yes"][data-entered="yes"]{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-motion="on"] .headnote[data-reveal="yes"]{opacity:1;transform:none;transition:none}
}

/* -------------------------------------------------------------- endpapers -- */

.endpapers{
  background:var(--paper-band);
  border-top:1px solid var(--rule-firm);
  padding-top:3.4rem;padding-bottom:2.4rem;
}
.endpapers-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
  gap:2.5rem;
  padding-bottom:2.4rem;
  border-bottom:1px solid var(--rule-firm);
}
.endpapers-brand{min-width:0}
.endpapers-mark{
  font-family:var(--serif);
  font-size:1.3rem;font-weight:700;letter-spacing:-0.01em;
  color:var(--ink);
  margin-bottom:0.9rem;
}
.endpapers-blurb{color:var(--ink-mid);font-size:0.95rem;max-width:38ch}
.endpapers-title{
  font-family:var(--mono);
  font-size:0.68rem;font-weight:700;
  letter-spacing:0.19em;text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:0.95rem;
}
.endpapers-col ul{list-style:none;margin:0;padding:0}
.endpapers-col li{margin-bottom:0.55rem}
.endpapers-col a{color:var(--ink-mid);text-decoration:none;font-size:0.96rem}
.endpapers-col a:hover{color:var(--seal);text-decoration:underline}
.endpapers-legal{padding-top:1.9rem;font-family:var(--mono)}
.endpapers-legal p{color:var(--ink-soft);font-size:0.72rem;line-height:1.75;margin-bottom:0.45rem}
.endpapers-legal a{color:var(--seal)}

/* ----------------------------------------------------------- breakpoints -- */

@media (max-width: 64rem){
  .gathering{grid-template-columns:minmax(0,1fr);gap:2.2rem}
  .headband{
    position:static;max-height:none;overflow:visible;
    border:1px solid var(--rule-firm);border-top:2px solid var(--seal);
    padding:1.3rem 1.4rem;
  }
  .headband-list{columns:2;column-gap:2rem}
}

@media (max-width: 52rem){
  .quire{padding-left:1.15rem;padding-right:1.15rem}
  [data-nav="ready"] .case-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper);
    border-bottom:1px solid var(--rule-firm);
    padding:1rem 1.15rem 1.5rem;
  }
  [data-nav="ready"] .case-nav[data-shown="yes"]{display:block}
  [data-nav="ready"] .case-toggle{display:inline-flex}
  .case-row{position:relative}
  .case-list{flex-direction:column;align-items:flex-start;gap:1rem}
  .case-link{font-size:0.82rem}
  .frontispiece{padding-top:3.4rem;padding-bottom:3rem}
  .headnote{padding-top:2.8rem;padding-bottom:2.8rem}
  .headnote-title{display:block}
  .headnote-no{display:inline-block;margin-bottom:0.35rem}
  .pinpoint{grid-template-columns:minmax(0,1fr);gap:0.3rem}
  .pinpoint-key{padding-top:0}
  .endpapers-grid{grid-template-columns:minmax(0,1fr);gap:1.9rem}
  .headband-list{columns:1}
}

@media (max-width: 34rem){
  .frontispiece-acts{flex-direction:column;align-items:stretch}
  .plea{justify-content:center}
}