/* ============================================================
   SARAH AKRIDGE — the notice board
   Loaded only by news.html and the generated /news/* pages.

   DIRECTION  broadsheet ledger — a property gazette front page,
              not a blog
   SIGNATURE  the sticky dateline: a month parked in the left
              margin that swaps as each month's entries scroll
              beneath it, the way a broadsheet carries a running
              head. CSS-only, so it survives with JS off.

   ONE COLOUR RULE, enforced throughout this file: gold means
   RECENCY here and nothing else. The "just posted" mark and the
   active dateline are the only gold on the page, so what is new
   reads at a glance instead of competing with decoration.
   ============================================================ */

/* ---------- masthead ---------- */
.news-head { padding-bottom: var(--y-tight); }
.news-head h1 { margin-bottom: 0; }
.news-standfirst { align-self: end; }
.news-standfirst .lede { font-size: var(--t-0); max-width: 40ch; }

/* The § is the page's ghost numeral. Every other section on this site is
   numbered; this one is a running section mark instead, because notices are a
   sequence with no end rather than a fixed set of five. */
.news-head .numeral { font-size: clamp(9rem, 22vw, 24rem); }

.news-body { padding-top: var(--y-tight); }

/* ---------- the lead ---------- */
.lead { position: relative; }

.lead-head {
  display: grid;
  grid-template-columns: minmax(5.5rem, 8rem) 1fr;
  column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
}

/* The date hangs in the left margin like a dateline, set in the display face
   and stacked. It is decoration for sighted readers — the real machine-readable
   date is the <time> element inside .lead-body. */
.lead-date {
  font-family: var(--display);
  line-height: .82;
  color: var(--ink);
  padding-top: .35em;
  border-top: 1px solid var(--ink);
}
.lead-date .lead-day {
  display: block;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  letter-spacing: -.04em;
}
.lead-date .lead-mo,
.lead-date .lead-yr {
  display: block;
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: .5rem;
  line-height: 1.4;
}
.lead-date .lead-yr { margin-top: .1rem; }

.lead-body .over { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.lead-ttl { margin-bottom: 1.4rem; max-width: 20ch; }
.lead-ttl a { display: inline; }

/* Headline hover: the underline wipes in from the left, the same directional
   language as .wipe elsewhere. No colour change — the type is already the
   loudest thing on the page. */
.lead-ttl a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 1px;
  transition: background-size .6s var(--ease);
}
@media (hover: hover) {
  .lead-ttl a:hover { background-size: 100% 1px; }
}

.lead-ph {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  /* bleeds past the left dateline column, so the photo is not politely boxed
     inside the text column */
  margin-left: 0;
}
.lead-ph img { width: 100%; height: auto; }

/* The rule draws itself across the page when the lead reveals — the one piece
   of motion on this page that is not a fade. */
.lead-rule {
  height: 1px;
  background: var(--ink);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease) .25s;
}
.rv.in .lead-rule, .no-io .lead-rule { transform: scaleX(1); }
/* Without JS the .rv never gains .in, so the rule must already be drawn or the
   page looks unfinished. */
.no-js .lead-rule { transform: scaleX(1); }

.lead-empty .lead-date { border-top-color: var(--line); color: var(--ink-mute); }

/* ---------- recency ---------- */
/* Applied by assets/news.js at RUNTIME, never at build time. A static page
   built in August would still be claiming "just posted" in November. */
.fresh {
  font-family: var(--label);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
/* MUST come after the rule above.
   `hidden` is a UA-stylesheet `display:none`, and ANY author `display` beats it
   — so the markup shipped with every notice permanently flagged "NEW",
   including one from six weeks earlier. Nothing in the HTML or the JS is wrong;
   the attribute was simply being overruled. Only a render catches this. */
.fresh[hidden] { display: none; }
.fresh::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--gold);
  border-radius: 50%;
}
.on-navy .fresh { color: var(--gold-light); }

/* ---------- the ledger ---------- */
.ledger { margin-top: clamp(3rem, 7vw, 6rem); }

.led-group {
  display: grid;
  grid-template-columns: minmax(5.5rem, 8rem) 1fr;
  column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
}

/* THE SIGNATURE.
   align-self:start is load-bearing. A grid item stretches to its row by
   default, which leaves a sticky element no room to travel inside its own grid
   area — it would simply never move. Sizing it to its content is what lets the
   month ride down the column while its entries scroll past. */
.led-mark {
  position: sticky;
  top: clamp(6.5rem, 13vh, 9rem);
  align-self: start;
  padding-top: .9rem;
  border-top: 1px solid var(--ink);
  font-family: var(--label);
  text-transform: uppercase;
}
.led-mark .led-mo {
  display: block;
  font-size: .72rem;
  letter-spacing: .24em;
  color: var(--ink);
}
.led-mark .led-yr {
  display: block;
  font-size: .68rem;
  letter-spacing: .24em;
  color: var(--ink-mute);
  margin-top: .35rem;
}

.led-rows { min-width: 0; }

.led-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr 1.6rem;
  column-gap: clamp(1rem, 2.4vw, 2rem);
  align-items: baseline;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.led-group:first-child .led-row:first-child { border-top-color: var(--ink); }
.led-rows .led-row:last-child { border-bottom: 1px solid var(--line); }

.led-day {
  font-family: var(--display);
  font-size: var(--t-1);
  color: var(--ink-mute);
  letter-spacing: -.02em;
  transition: color .5s var(--ease);
}

.led-text { min-width: 0; }
.led-kind {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  font-family: var(--label);
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .7rem;
}
.led-ttl {
  display: block;
  font-family: var(--display);
  font-size: var(--t-2);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
  max-width: 26ch;
  text-wrap: balance;
}
.led-sum {
  display: block;
  margin-top: .8rem;
  color: var(--ink-soft);
  font-size: var(--t--1);
  line-height: 1.7;
  max-width: 62ch;
}
.led-go {
  font-size: var(--t-1);
  color: var(--ink-mute);
  justify-self: end;
  transition: transform .55s var(--ease), color .5s var(--ease);
}

/* Row hover: a gold hairline wipes across the top edge and the whole row shifts
   a few pixels right. Inverting to navy the way .index-row does would be a
   second signature competing with the first — restraint is the point here. */
.led-row::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease);
}
@media (hover: hover) {
  .led-row:hover::after { transform: scaleX(1); transform-origin: left; }
  .led-row:hover .led-day { color: var(--gold-deep); }
  .led-row:hover .led-go { color: var(--gold-deep); transform: translateX(5px); }
}
.led-row:focus-visible { outline-offset: 6px; }

/* ---------- subscribe ---------- */
.sub .numeral {
  font-size: clamp(8rem, 18vw, 19rem);
  -webkit-text-stroke-color: rgba(224,196,137,.11);
}

.sub-form { max-width: 30rem; }

/* Fields are ruled lines, not boxes — a form on letterhead. The typed value is
   set in the display face, so what she and her subscribers type looks like it
   belongs to this site rather than to the browser. */
.sub-field { margin-bottom: 1.9rem; }
.sub-field label {
  display: block;
  font-family: var(--label);
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--on-navy-mute);
  margin-bottom: .7rem;
}
.sub-field .opt { letter-spacing: .14em; opacity: .6; }
.sub-field input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-navy);
  border-radius: 0;
  padding: .55rem 0;
  color: var(--cream-warm);
  font-family: var(--display);
  font-size: var(--t-1);
  letter-spacing: -.01em;
  transition: border-color .5s var(--ease);
}
.sub-field input:hover { border-bottom-color: rgba(241,234,220,.34); }
.sub-field input:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.sub-field input:focus-visible { outline: none; }
/* Chrome paints its own pale-yellow fill over autofilled inputs, which on a
   navy band looks like a rendering fault. A long inset shadow is the only way
   to override it. */
.sub-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--cream-warm);
  -webkit-box-shadow: 0 0 0 60px var(--navy) inset;
  caret-color: var(--cream-warm);
}

.sub-kinds { border: 0; padding: 0; margin: 0 0 2rem; }
.sub-kinds legend {
  font-family: var(--label);
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--on-navy-mute);
  padding: 0;
  margin-bottom: 1rem;
}
.sub-kinds label {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .55rem 0;
  color: var(--on-navy);
  font-size: var(--t--1);
  cursor: pointer;
}
/* A square that fills gold when ticked — the browser default checkbox is the
   one element that would make this band look like a generic form. */
.sub-kinds input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: none;
  border: 1px solid rgba(241,234,220,.34);
  background: transparent;
  display: grid; place-content: center;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
  cursor: pointer;
}
.sub-kinds input[type="checkbox"]::after {
  content: "";
  width: 8px; height: 8px;
  background: var(--navy);
  transform: scale(0);
  transition: transform .3s var(--ease);
}
.sub-kinds input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.sub-kinds input[type="checkbox"]:checked::after { transform: scale(1); }
.sub-kinds input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.sub-hint { margin-top: .8rem; font-size: var(--t--1); color: var(--on-navy-mute); opacity: .8; }

.sub .btn { background: var(--gold); color: #221602; }
.sub .btn::before { background: var(--cream-warm); }

.sub-msg {
  margin-top: 1.2rem;
  font-size: var(--t--1);
  line-height: 1.65;
  color: var(--on-navy);
  min-height: 1.2em;
}
.sub-msg:empty { margin-top: 0; min-height: 0; }
.sub-msg.ok { color: var(--gold-light); }
.sub-msg.bad { color: #F0A9A0; }

.sub-legal { margin-top: 1.4rem; font-size: var(--t--1); color: var(--on-navy-mute); opacity: .72; }

.sub-form.busy { opacity: .55; pointer-events: none; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and a field they can still "see" catches more of them. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- a single notice ---------- */
.post-head { padding-top: clamp(8rem, 16vh, 12rem); }
/* Four digits, not two — at the site's default numeral size the year would run
   most of the way across the page. */
.post-head .numeral { font-size: clamp(5.5rem, 13vw, 14rem); letter-spacing: -.06em; }
.post-head .over { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.post-back { color: var(--ink-mute); position: relative; }
.post-back::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
@media (hover: hover) { .post-back:hover::after { transform: scaleX(1); transform-origin: left; } }
.post-head .kind { color: var(--gold-deep); }

.post-date {
  display: block;
  margin-top: 2.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  max-width: 18rem;
}

.post-ph { grid-column: 1 / 13; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.post-ph img { width: 100%; height: auto; }

/* One measured column, indented off the left edge. Long-form copy that runs the
   full 12 columns is unreadable, and centring it would break the whole site's
   left-aligned editorial grid. */
.post-copy { font-size: var(--t-1); line-height: 1.72; color: var(--ink-soft); }
.post-copy > * + * { margin-top: 1.5rem; }
.post-copy p { max-width: 64ch; text-wrap: pretty; }
.post-copy .post-h {
  font-size: var(--t-2);
  color: var(--ink);
  margin-top: clamp(2.8rem, 5vw, 4rem);
  max-width: 24ch;
}
.post-copy .post-list { margin-top: 1.5rem; max-width: 62ch; }
.post-copy .post-list li {
  position: relative;
  padding-left: 1.7rem;
  margin-top: .85rem;
}
/* An em dash, not a tick in a circle — the site has no checkmark bullets
   anywhere and is not getting them here. */
.post-copy .post-list li::before {
  content: "—";
  position: absolute; left: 0; top: 0;
  color: var(--gold-deep);
}
.post-copy .post-link {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--gold);
  transition: box-shadow .4s var(--ease), color .4s var(--ease);
}
@media (hover: hover) {
  .post-copy .post-link:hover { box-shadow: inset 0 -2px 0 var(--gold-deep); color: var(--gold-deep); }
}

/* ---------- older / newer ---------- */
.post-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.pn { display: block; min-width: 0; }
.pn.next { text-align: right; }
.pn-lb {
  display: block;
  font-family: var(--label);
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .9rem;
}
.pn-ttl {
  display: block;
  font-family: var(--display);
  font-size: var(--t-1);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 24ch;
  transition: color .45s var(--ease);
}
.pn.next .pn-ttl { margin-left: auto; }
@media (hover: hover) { .pn:hover .pn-ttl { color: var(--gold-deep); } }
.pn-none { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .news-head .c1-8, .news-head .c9-13 { grid-column: 1 / 13; }
  .news-standfirst .lede { max-width: 54ch; }
  .sub .c1-6, .sub .c8-13 { grid-column: 1 / 13; }
  .sub-form { max-width: none; }
  .post-copy { grid-column: 1 / 13; }
}

@media (max-width: 720px) {
  /* The dateline stops being a margin and becomes a header. Sticky is dropped
     rather than shrunk: a running head needs a margin to run down, and there
     isn't one at this width. */
  .lead-head,
  .led-group {
    grid-template-columns: 1fr;
    row-gap: 1.6rem;
  }
  .lead-date {
    display: flex; align-items: baseline; gap: .7rem;
    padding-top: .5rem;
  }
  .lead-date .lead-day { font-size: 2.4rem; }
  .lead-date .lead-mo, .lead-date .lead-yr { margin-top: 0; }

  .led-mark {
    position: static;
    display: flex; align-items: baseline; gap: .6rem;
    padding-top: .8rem;
    margin-top: 2.4rem;
  }
  .led-mark .led-yr { margin-top: 0; }
  .led-group:first-child .led-mark { margin-top: 0; }

  .led-row { grid-template-columns: 2.6rem 1fr; }
  .led-go { display: none; }
  .led-ttl { font-size: var(--t-1); }

  .post-nav-grid { grid-template-columns: 1fr; }
  .pn.next { text-align: left; }
  .pn.next .pn-ttl { margin-left: 0; }
  .pn-none { display: none; }
}