/* =========================================================================
   Yacht-Match Review — Direction 1, "legal record"
   Mobile-first. Custom properties only, no build step.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts

   Self-hosted on purpose: linking Google's CDN passes visitor IP addresses
   to Google, which EU courts have held to breach GDPR. Jurisdictions here
   are Poland and the Netherlands.

   The three woff2 files are in public/assets/fonts/, subset to Latin,
   Latin Extended-A, general punctuation and currency, so Polish diacritics
   render. If one is ever removed the stack falls back to Palatino/Georgia
   silently: it looks fine and is not the specified typeface, so check
   document.fonts rather than trusting the eye.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Colour. Warm off-white because a document is a physical object.
     No red anywhere: on a page of allegations red reads as anger,
     and anger reads as unreliable. */
  --paper:      #FBFAF7;
  --ink:        #1A1A18;  /* 16.7:1 on paper */
  --ink-muted:  #55534D;  /* ~7.2:1 on paper */
  --rule:       #D9D5CC;
  --link:       #2F4F63;
  --flag:       #8A6A1F;  /* estimates and opinion only */
  --fill:       #EFEDE7;  /* figure wells */

  /* Type */
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --size-mono:   0.6875rem;  /* 11px  labels, gutter, captions */
  --size-small:  0.8125rem;  /* 13px */
  --size-body:   1.0625rem;  /* 17px */
  --size-lead:   1.1875rem;  /* 19px */
  --size-h2:     1.0625rem;
  --size-h1:     1.75rem;

  --measure: 64ch;

  /* Space */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;

  --gutter: 8.25rem;

  color-scheme: light;
}

@media (min-width: 48rem) {
  :root {
    --size-body: 1.125rem;   /* 18px */
    --size-lead: 1.3125rem;  /* 21px */
    --size-h1:   2.25rem;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--size-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { text-wrap: balance; }
p, li, dd { max-width: var(--measure); }

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

img, video { max-width: 100%; height: auto; display: block; }

.shell {
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--ink);
  z-index: 10;
}
.skip-link:focus {
  left: var(--sp-3);
  top: var(--sp-3);
}

/* -------------------------------------------------------------------------
   Masthead and nav
   ------------------------------------------------------------------------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--sp-2);
}
.masthead .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
}
.masthead__site {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--size-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  font-family: var(--mono);
  font-size: var(--size-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

/* -------------------------------------------------------------------------
   The gutter grid

   Single column on small screens. From 60rem a left gutter carries exhibit
   numbers, dates and annotations in mono — the margin-note language of an
   annotated filing.
   ------------------------------------------------------------------------- */
.record { padding-block: var(--sp-5) var(--sp-6); }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-4);
  margin-block-end: var(--sp-5);
}

.row__note {
  font-family: var(--mono);
  font-size: var(--size-mono);
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0;
  text-transform: uppercase;
}

.row__body { min-width: 0; }
.row__body > * + * { margin-block-start: var(--sp-3); }

@media (min-width: 60rem) {
  .row {
    grid-template-columns: var(--gutter) minmax(0, 1fr);
  }
  .row__note {
    text-align: right;
    padding-block-start: 0.4em;
  }
  /* Figures reclaim the gutter so wide documents get every pixel. */
  .row--figure .row__body {
    grid-column: 1 / -1;
  }
  .row--figure .row__note {
    grid-column: 1 / -1;
    text-align: left;
    margin-block-end: var(--sp-1);
  }
}

/* -------------------------------------------------------------------------
   Headings and lead
   ------------------------------------------------------------------------- */
.record h1 {
  margin: 0;
  font-size: var(--size-h1);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
}

.standfirst {
  font-size: var(--size-lead);
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-muted);
}

.record h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--size-mono);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-block-end: var(--sp-1);
  border-block-end: 1px solid var(--rule);
  max-width: none;
}

.record h3 {
  margin: 0;
  font-size: var(--size-body);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Claim tags — the credibility component

   Documented / My estimate / Not documented must never look alike. This is
   the single strongest signal on the page.
   ------------------------------------------------------------------------- */
.claims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.claim {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-2);
  max-width: var(--measure);
}
.tag {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.tag--documented { color: var(--ink); }
.tag--estimate   { color: var(--flag); }
.tag--none       { color: var(--ink-muted); border-style: dashed; }

/* -------------------------------------------------------------------------
   Figures
   ------------------------------------------------------------------------- */
.figure { margin: 0; }

.figure img,
.figure video {
  width: 100%;
  background: var(--fill);
  border: 1px solid var(--rule);
}

/* Portrait video stays at reading width; it would be absurd full-bleed. */
.figure--portrait {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-start;
}
.figure--portrait video {
  width: 15rem;
  flex: none;
}
.figure--portrait .figure__caption { flex: 1 1 16rem; margin-block-start: 0; }

.figure__caption {
  font-family: var(--mono);
  font-size: var(--size-mono);
  line-height: 1.6;
  color: var(--ink-muted);
  margin-block-start: var(--sp-2);
  max-width: 70ch;
}
.figure__caption b {
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.figure__caption em { font-style: normal; color: var(--flag); }

/* -------------------------------------------------------------------------
   Losses table
   ------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }

.losses {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-small);
}
.losses th,
.losses td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
  border-block-end: 1px solid var(--rule);
  vertical-align: baseline;
}
.losses thead th {
  font-family: var(--mono);
  font-size: var(--size-mono);
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-block-end: 1px solid var(--ink);
}
.losses .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-inline-end: 0;
  white-space: nowrap;
}
.losses tfoot td {
  border-block-end: none;
  padding-block-start: var(--sp-3);
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: var(--size-mono);
  line-height: 1.6;
}

/* Totals must not read as a footnote. The documented subtotal carries the
   weight; the figure including the estimate sits under it, quieter. */
.losses tfoot .total th,
.losses tfoot .total td {
  font-family: var(--mono);
  font-size: var(--size-small);
  color: var(--ink);
  text-align: left;
  padding-block: var(--sp-2);
  border-block-start: 1px solid var(--ink);
  border-block-end: none;
}
.losses tfoot .total td { text-align: right; padding-inline-end: 0; }
.losses tfoot .total + .total th,
.losses tfoot .total + .total td {
  color: var(--ink-muted);
  border-block-start: 1px solid var(--rule);
}

/* -------------------------------------------------------------------------
   A letter reproduced in full — set apart from the page's own voice so the
   reader can see where the site stops speaking and the document starts.
   ------------------------------------------------------------------------- */
.letter {
  border-inline-start: 2px solid var(--rule);
  padding-inline-start: var(--sp-3);
  max-width: var(--measure);
}
.letter p {
  font-size: var(--size-small);
  line-height: 1.72;
  margin-block: 0;
}
.letter p + p { margin-block-start: var(--sp-2); }
.letter__meta {
  font-family: var(--mono);
  font-size: var(--size-mono);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-block-end: var(--sp-2);
}

/* -------------------------------------------------------------------------
   Placeholder marker — must be impossible to ship by accident
   ------------------------------------------------------------------------- */
.todo {
  font-family: var(--mono);
  font-size: var(--size-mono);
  line-height: 1.6;
  color: var(--flag);
  border: 1px dashed var(--flag);
  padding: var(--sp-2);
  max-width: 70ch;
}

/* -------------------------------------------------------------------------
   Contact form
   ------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 34rem; }
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field label {
  font-family: var(--mono);
  font-size: var(--size-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.field input,
.field textarea {
  font-family: var(--serif);
  font-size: var(--size-body);
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--ink-muted);
  border-radius: 0;
  padding: var(--sp-2);
  width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }

/* Honeypot. Off-screen rather than display:none so bots still fill it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--flag);
  border-width: 2px;
}

.field__error,
.message {
  font-family: var(--mono);
  font-size: var(--size-mono);
  line-height: 1.6;
  margin: 0;
}
.field__error { color: var(--flag); }

.message {
  padding: var(--sp-2);
  max-width: 34rem;
}
.message--ok    { color: var(--ink); border: 1px solid var(--ink); }
.message--error { color: var(--flag); border: 1px solid var(--flag); }

.button {
  font-family: var(--mono);
  font-size: var(--size-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  align-self: flex-start;
}
.button:hover { background: var(--link); border-color: var(--link); }

/* -------------------------------------------------------------------------
   Colophon
   ------------------------------------------------------------------------- */
.colophon {
  border-block-start: 1px solid var(--rule);
  padding-block: var(--sp-4) var(--sp-5);
  font-size: var(--size-small);
  color: var(--ink-muted);
}
.colophon__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin: 0 0 var(--sp-3);
}
.colophon__meta dt {
  font-family: var(--mono);
  font-size: var(--size-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.colophon__meta dd { margin: var(--sp-1) 0 0; }
.colophon__note { margin-block: 0 var(--sp-2); }
.colophon__legal { margin-block: var(--sp-3) 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}