/* ==========================================================================
   JACK RUSSELL 2000 ($JR2000)
   Shape: "the annual report" - a fourth shape, not archetype A/B/C.
   Palette (all ratios measured, not estimated):
     ground #BCD5AC H97 S19 V84   greenbar accounting paper
     ink    #26221B H38 S29 V15   sepia ledger near-black   9.99:1 on ground
     stripe #E6EFDC H88 S8  V94   the light bar of the paper
     accent #7B2E22 H8  S72 V48   red ledger ink            5.87:1 on ground
   LAWS: accent and stripe never sit on ink. Accent never carries text under 19px.
         Every surface change is drawn with an ink hairline, never a fill alone.
   ========================================================================== */

@font-face{font-family:Newsreader;src:url(../fonts/newsreader-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-400-italic.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Special Elite";src:url(../fonts/specialelite-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --ground:#BCD5AC;
  --stripe:#E6EFDC;
  --ink:#26221B;
  --accent:#7B2E22;
  --hair:rgba(38,34,27,.22);
  --hair-strong:rgba(38,34,27,.42);
  --bar:30px;
  --serif:Newsreader,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --type:"Special Elite","Courier New",Courier,monospace;
  --measure:64ch;
  --pad:clamp(1.1rem,4vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--ground);
}
html.rm{scroll-behavior:auto}

body{
  margin:0;
  color:var(--ink);
  font:400 clamp(1rem,.96rem + .2vw,1.125rem)/1.65 var(--serif);
  background-color:var(--ground);
  /* THE GREENBAR RULING - always on, page wide. The identity is value
     structure, not hue, so it survives a bright phone screen. */
  background-image:repeating-linear-gradient(
    to bottom,
    var(--stripe) 0 var(--bar),
    var(--ground) var(--bar) calc(var(--bar) * 2)
  );
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:.5rem;top:.5rem;background:var(--ground);border:1px solid var(--ink);padding:.5rem .8rem;z-index:99}

.wrap{width:min(1120px,100% - var(--pad) * 2);margin-inline:auto}

/* Prose and cards sit on a solid sheet so the ruling never fights the reading.
   Real reports print letters on plain stock and schedules on greenbar. */
.sheet{
  background:var(--ground);
  border:1px solid var(--hair-strong);
  padding:clamp(1.2rem,3.5vw,2.6rem);
}

/* ---------- typography ---------- */
.label{
  font:400 .68rem/1.5 var(--type);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.rule{border:0;border-top:1px solid var(--ink);margin:0}
.rule--thin{border-top:1px solid var(--hair-strong)}
.rule--double{border:0;border-top:3px double var(--ink);margin:0}

h1,h2,h3{font-weight:600;line-height:1.08;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,1.1rem + 1.9vw,2.4rem)}
h3{font-size:1.12rem}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:var(--ground);
  border-bottom:1px solid var(--ink);
}
.nav__in{display:flex;align-items:center;gap:1rem;padding:.55rem 0;width:min(1120px,100% - var(--pad) * 2);margin-inline:auto}
.nav__mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:600}
.nav__mark img{width:30px;height:30px;border:1px solid var(--ink);flex:0 0 auto}
.nav__mark span{font:400 .74rem/1 var(--type);letter-spacing:.16em;text-transform:uppercase}
.nav__links{display:flex;gap:1.25rem;margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav__links a{color:var(--ink);text-decoration:none;font:400 .68rem/1 var(--type);letter-spacing:.16em;text-transform:uppercase}
.nav__links a:hover{color:var(--accent);text-decoration:underline}
.burger{display:none;margin-left:auto;background:var(--ground);border:1px solid var(--ink);color:var(--ink);font:400 .7rem/1 var(--type);letter-spacing:.14em;padding:.5rem .7rem;cursor:pointer;text-transform:uppercase}

/* ---------- 1. COVER (screen one, loud) ---------- */
.cover{
  position:relative;
  border-bottom:3px double var(--ink);
  background:var(--ink);
  overflow:hidden;
}
.cover__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  opacity:.82;
}
.cover__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(38,34,27,.34) 0%,rgba(38,34,27,.06) 34%,rgba(38,34,27,.72) 84%,rgba(38,34,27,.92) 100%);
}
.cover__in{
  position:relative;z-index:2;
  width:min(1120px,100% - var(--pad) * 2);margin-inline:auto;
  min-height:clamp(30rem,82vh,46rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(2.5rem,8vh,5rem) 0 clamp(1.5rem,4vh,2.5rem);
  color:var(--stripe);
}
.cover__kicker{color:var(--stripe);opacity:.9;margin-bottom:.9rem}
.cover__title{
  font-size:clamp(2.9rem,1.4rem + 7.4vw,7.2rem);
  line-height:.92;letter-spacing:-.025em;
  color:var(--stripe);
  margin-bottom:.5rem;
}
.cover__title em{font-style:normal;display:block}
.cover__beat{
  font-size:clamp(1.15rem,1rem + .9vw,1.7rem);
  font-style:italic;line-height:1.28;
  max-width:26ch;color:var(--stripe);
  margin:.6rem 0 1.6rem;
}
.cover__acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.4rem}

/* CTA drawn as a ruled form field, never a glowing pill */
.btn{
  font:400 .74rem/1 var(--type);letter-spacing:.16em;text-transform:uppercase;
  padding:.85rem 1.3rem;cursor:pointer;
  border:1px solid var(--stripe);background:transparent;color:var(--stripe);
  text-decoration:none;display:inline-block;
}
.btn:hover{background:var(--stripe);color:var(--ink)}
.btn--solid{background:var(--stripe);color:var(--ink)}
.btn--solid:hover{background:transparent;color:var(--stripe)}
.btn[data-state="pending"]{cursor:not-allowed;opacity:.62;border-style:dashed}
.btn[data-state="pending"]:hover{background:transparent;color:var(--stripe)}

/* contract row - a table row with dot leaders */
.ca{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  border-top:1px solid rgba(230,239,220,.5);
  padding-top:.75rem;
  font:400 .74rem/1.5 var(--type);letter-spacing:.06em;
}
.ca__k{text-transform:uppercase;letter-spacing:.16em;opacity:.82;flex:0 0 auto}
.ca__dots{flex:1 1 3rem;border-bottom:1px dotted rgba(230,239,220,.55);transform:translateY(-.25em);min-width:1.5rem}
.ca__v{word-break:break-all;flex:1 1 auto;min-width:0}
.ca__copy{
  flex:0 0 auto;background:transparent;border:1px solid rgba(230,239,220,.6);
  color:var(--stripe);font:inherit;letter-spacing:.14em;text-transform:uppercase;
  padding:.35rem .6rem;cursor:pointer;
}
.ca__copy:hover{background:var(--stripe);color:var(--ink)}
.cover .ca{color:var(--stripe)}
/* footer variant — inline styles are banned by the page CSP (style-src 'self') */
.ca--ink{color:var(--ink);border-top-color:var(--hair-strong)}
.ca--ink .ca__dots{border-bottom-color:var(--hair-strong)}
.ca--ink .ca__copy{border-color:var(--hair-strong);color:var(--ink)}
.ca--ink .ca__copy:hover{background:var(--ink);color:var(--stripe)}

/* ---------- 2. MASTHEAD ---------- */
.masthead{padding:clamp(1.6rem,4vw,2.6rem) 0;text-align:center}
.masthead__rule{display:flex;align-items:center;gap:1rem}
.masthead__rule::before,.masthead__rule::after{content:"";flex:1;border-top:1px solid var(--ink)}
.masthead__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;margin:.9rem 0}
.masthead__dis{
  font:400 .72rem/1.6 var(--type);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);max-width:52ch;margin:1rem auto 0;
}

/* ---------- sections ---------- */
.sec{padding:clamp(2.4rem,6vw,4.5rem) 0}
.sec__head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.4rem}
.sec__head::after{content:"";flex:1;border-top:1px solid var(--ink);transform:translateY(-.3em)}
.sec__no{font:400 .7rem/1 var(--type);letter-spacing:.2em;color:var(--accent)}

/* ---------- 3. TO THE HOLDERS ---------- */
.letter{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
.letter__body{max-width:var(--measure)}
.letter__body p+p{margin-top:0}
.letter__drop::first-letter{
  float:left;font-size:3.4em;line-height:.76;padding:.06em .12em 0 0;font-weight:600;color:var(--accent);
}
.letter__sign{margin-top:1.6rem;display:flex;align-items:center;gap:.9rem}
.letter__sign img{width:74px;height:74px;border:1px solid var(--hair-strong)}
.letter__aside figcaption{font:400 .68rem/1.5 var(--type);letter-spacing:.1em;text-transform:uppercase;margin-top:.5rem;border-top:1px solid var(--hair-strong);padding-top:.45rem}
.letter__aside img{border:1px solid var(--ink)}

/* ---------- 4/5. RULED TABLES (rows align to the greenbar) ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--ink);background:
  repeating-linear-gradient(to bottom,var(--stripe) 0 var(--bar),var(--ground) var(--bar) calc(var(--bar) * 2))}
table.led{border-collapse:collapse;width:100%;min-width:34rem;font:400 .82rem/1 var(--type);letter-spacing:.04em}
table.led caption{
  text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--ink);
  font:400 .72rem/1.4 var(--type);letter-spacing:.18em;text-transform:uppercase;background:var(--ground);
}
table.led th,table.led td{
  height:var(--bar);padding:0 1rem;text-align:left;
  border-right:1px solid var(--hair);font-weight:400;
}
table.led th{
  text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;
  border-bottom:1px solid var(--ink);border-top:1px solid var(--ink);
}
table.led td:last-child,table.led th:last-child{border-right:0;text-align:right}
table.led tfoot td{border-top:1px solid var(--ink);font-style:normal}
.nil{color:var(--accent);letter-spacing:.2em;text-transform:uppercase}

/* results, with dot leaders */
.rows{list-style:none;margin:0;padding:0;border:1px solid var(--ink)}
.rows li{
  display:flex;align-items:baseline;gap:.5rem;
  padding:0 1rem;min-height:calc(var(--bar) * 1.6);
  font:400 .8rem/1.5 var(--type);letter-spacing:.05em;
}
.rows li:nth-child(odd){background:var(--stripe)}
.rows li+li{border-top:1px solid var(--hair)}
.rows dt,.rows .k{text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;flex:0 0 auto}
.rows .dots{flex:1 1 2rem;border-bottom:1px dotted var(--hair-strong);transform:translateY(-.25em);min-width:1.5rem}
.rows .v{flex:0 0 auto;font-weight:400;word-break:break-word}

/* notes - the live footnote list the centrepiece appends to */
.notes{list-style:none;margin:1.2rem 0 0;padding:0;max-width:var(--measure)}
.notes li{
  font:400 .78rem/1.6 var(--type);letter-spacing:.03em;
  padding:.5rem 0 .5rem 0;border-top:1px solid var(--hair);
}
.notes li:first-child{border-top:1px solid var(--hair-strong)}
.notes .n{color:var(--accent);margin-right:.5rem}

/* ---------- 6. PLATES ---------- */
.plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.6vw,2rem)}
.plate{margin:0}
.plate--wide{grid-column:1 / -1}
.plate img{width:100%;border:1px solid var(--ink);background:var(--stripe)}
.plate--wide img{aspect-ratio:3/1;object-fit:cover}
.plate figcaption{
  display:flex;gap:.7rem;align-items:baseline;
  font:400 .7rem/1.5 var(--type);letter-spacing:.08em;
  border-top:1px solid var(--hair-strong);margin-top:.5rem;padding-top:.45rem;
}
.plate figcaption b{color:var(--accent);font-weight:400;letter-spacing:.16em;text-transform:uppercase;flex:0 0 auto}

/* ---------- 7. INSTRUCTION TO SELL (the centrepiece) ---------- */
.instr{max-width:40rem}
.instr__form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin-top:1rem}
.instr__field{flex:1 1 16rem;min-width:0}
.instr__field label{display:block;margin-bottom:.35rem}
.instr__field input{
  width:100%;background:var(--stripe);border:1px solid var(--ink);
  color:var(--ink);font:400 .88rem/1 var(--type);padding:.8rem .7rem;
}
.instr__field input::placeholder{color:rgba(38,34,27,.45)}
.btn--ink{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--ink:hover{background:var(--ink);color:var(--stripe)}
.instr__out{
  margin-top:.9rem;min-height:1.5rem;
  font:400 .82rem/1.6 var(--type);letter-spacing:.03em;color:var(--accent);
}

/* ---------- back page ---------- */
.foot{border-top:3px double var(--ink);padding:clamp(1.8rem,4vw,3rem) 0 2.4rem;margin-top:1rem}
.foot__grid{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;align-items:flex-start}
.foot__links{display:flex;flex-wrap:wrap;gap:.6rem}
.foot__legal{
  font:400 .68rem/1.7 var(--type);letter-spacing:.05em;
  max-width:60ch;margin-top:1.6rem;border-top:1px solid var(--hair);padding-top:.9rem;
}

/* ---------- 404 ---------- */
.err{min-height:76vh;display:grid;place-items:center;text-align:center;padding:2.5rem 0}
.err img{width:min(320px,72vw);border:1px solid var(--ink);margin:0 auto 1.4rem}
.err__kicker{margin:1rem 0}
.err__lead{max-width:44ch;margin:.9rem auto 1.6rem}

/* ---------- motion, gated on html.rm (the OS here has RM on, so a
     prefers-reduced-motion:no-preference query would never match) ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rise.in{opacity:1;transform:none}
html.rm .rise{opacity:1;transform:none;transition:none}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .letter{grid-template-columns:1fr}
  .letter__aside{max-width:22rem}
}
@media (max-width:700px){
  :root{--bar:26px}
  .nav__links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;background:var(--ground);
    border-bottom:1px solid var(--ink);padding:.4rem 0;
  }
  .nav__links.open{display:flex}
  .nav__links li{padding:0 var(--pad)}
  .nav__links a{display:block;padding:.72rem 0;border-top:1px solid var(--hair)}
  .burger{display:block}
  .plates{grid-template-columns:1fr}
  .cover__in{min-height:34rem}
  .ca{font-size:.68rem}
  /* the separator dots wrap to line ends on a narrow screen; the gap is enough */
  .masthead__meta .label[aria-hidden="true"]{display:none}
  .masthead__meta{gap:.3rem 0;flex-direction:column}
}