/* ---------------------------------------------------------------------------
   Accountabilabuddies - public front page.

   One deliberate layout idea: the plate is inset from the left margin while
   the wordmark and the standfirst run to it, so an empty rail opens down the
   left of the page. The asymmetry is the design; do not "fix" it to centred.

   Colour: warm paper and ink. Ochre is the ONLY full-brightness colour and it
   belongs to the sign-in link alone - the wordmark wins on size, not colour.
   If a second thing ever turns ochre, one of them has lost its job.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Light is the designed default. */
  --paper:        #f7f2e8;
  --paper-dot:    #d8cdb8;
  --ink:          #191a17;
  --ink-soft:     #55564e;
  --rule:         #cfc4ae;
  --plate-edge:   #191a17;
  /* Must sit clearly DARKER than --paper or the hard offset reads as a smudge
     rather than a deliberate print-era shadow. Verified by screenshot. */
  --plate-shadow: #c3b492;
  --accent:       #a75c0d;   /* AA on --paper for text at this size */
  --accent-ink:   #ffffff;

  /* Type scale, ratio 1.25 from a 17px base. Only these steps are used. */
  --step--1: 0.85rem;
  --step-0:  1.0625rem;
  --step-1:  1.328rem;
  --step-2:  1.66rem;
  --step-3:  2.076rem;

  /* Chosen on purpose: the grotesque already on every target OS, at a weight
     and tracking that carry the masthead without loading a webfont. */
  --font: ui-sans-serif, "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
          Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #14150f;
    --paper-dot:    #2a2b22;
    --ink:          #f2ece0;
    --ink-soft:     #a9a89c;
    --rule:         #3b3c32;
    --plate-edge:   #f2ece0;
    --plate-shadow: #44453a;   /* same job, lighter than the ground this time */
    --accent:       #f0a542;   /* AA on the dark ground */
    --accent-ink:   #14150f;
  }
}

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

body {
  margin: 0;
  background-color: var(--paper);
  /* Dotted paper, not a gradient. Sits under everything and never competes. */
  background-image: radial-gradient(var(--paper-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Short blocks only - browsers cap `balance` at a few lines, so long copy
   ignores this. Set once here rather than per element. */
h1, p, figcaption, li, blockquote { text-wrap: balance; }

.page {
  max-width: 1320px;
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 6rem) var(--gutter) clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(1.75rem, 4vw, 3rem);
}

/* --- masthead ----------------------------------------------------------- */

.masthead { grid-column: 1 / span 11; }

.eyebrow {
  margin: 0 0 clamp(0.75rem, 2vw, 1.25rem);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wordmark {
  margin: 0;
  /* Sized to fill the measure at every width; verified by screenshot, not by
     arithmetic - the fallback face is not the same width as the first choice. */
  /* The floor must stay BELOW the vw step at the narrowest supported width, or
     it wins the clamp and this 19-character word overflows its column. At
     2.4rem it rendered 371px wide in a 350px column at 390px. Measured, not
     guessed - re-measure if the word or the gutter ever changes. */
  font-size: clamp(1.7rem, 8.6vw, 6.6rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  /* Hard offset, print-era. Deliberately a warm neutral and NOT the accent:
     the accent's monopoly belongs to the sign-in link. */
  text-shadow: 0.055em 0.055em 0 var(--plate-shadow);
}

/* --- the plate ---------------------------------------------------------- */

.plate {
  grid-column: 3 / -1;   /* the inset that opens the left rail */
  margin: 0;
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--plate-edge);
  /* Same hard-offset system as the wordmark. One card system on the page. */
  box-shadow: 14px 14px 0 var(--plate-shadow);
}

/* --- standfirst --------------------------------------------------------- */

.standfirst { grid-column: 1 / span 7; }

.standfirst p {
  margin: 0;
  max-width: 62ch;          /* real multi-line body copy, so it gets a measure */
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --- foot --------------------------------------------------------------- */

.foot {
  grid-column: 1 / -1;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
}

.signin {
  display: inline-block;
  padding: 0.7em 1.4em;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid var(--plate-edge);
  box-shadow: 5px 5px 0 var(--plate-shadow);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.signin:hover,
.signin:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--plate-shadow);
}

.signin:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.note {
  margin: 0;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- narrow ------------------------------------------------------------- */

@media (max-width: 900px) {
  /* The left rail is a large-screen idea. Below this it would just be a
     margin, so the grid collapses honestly instead of pretending. */
  .masthead,
  .plate,
  .standfirst,
  .foot { grid-column: 1 / -1; }

  .plate img { box-shadow: 8px 8px 0 var(--plate-shadow); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}