@charset "UTF-8";
/* ==========================================================================
   K Kitchen Catering Ltd: legal, compliance and error pages
   Shared by privacy.html, cookies.html, terms.html, accessibility.html and
   404.html. Loaded after main.css. Touches no other page.

   Read mode. The kankotri world, quietened: the same ivory stock, the same
   gold hairlines and engraved caps, but the type is set for comprehension and
   nothing decorative is allowed to get between a person and the sentence.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Corrections to the shared page header, scoped to these pages
   .page-head is neither .on-red nor .on-green, so the descendant colour rules
   in main.css never reach it: .lead and .eyebrow would otherwise fall back to
   their ink-on-paper values over a dark red ground. Put right here rather
   than by editing main.css.
   -------------------------------------------------------------------------- */
.page-head .lead { color: var(--paper-2); }          /* 8.9:1 on --red-800 */
.page-head .eyebrow { color: var(--gold-300); }      /* 7.9:1 on --red-800 */

/* --------------------------------------------------------------------------
   2. The reading column
   -------------------------------------------------------------------------- */
.legal {
  --measure: 68ch;
  line-height: 1.75;
}
.legal > * + * { margin-top: var(--s-6); }
.legal p,
.legal li,
.legal dd { max-width: var(--measure); }

.legal a:not([class]) {
  color: var(--red-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal a:not([class]):hover {
  color: var(--red-600);
  text-decoration-thickness: 2px;
}

/* The dateline, struck like a line of small print on the plate. */
.legal-updated {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-900);
}
.legal-updated::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

/* --------------------------------------------------------------------------
   3. Contents
   -------------------------------------------------------------------------- */
.toc {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: clamp(1.15rem, 0.85rem + 1.4vw, 1.75rem);
}
.toc__h {
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-900);
  line-height: 1.4;
}
.toc__list {
  margin-top: var(--s-3);
  display: grid;
  align-content: start;
}
@media (min-width: 44em) {
  .toc__list {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  }
}
.toc__list a {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  min-height: 44px;
  padding-block: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--gold-500) 22%, transparent);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}
.toc__list a:hover {
  color: var(--red-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.toc__n {
  flex: none;
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold-900);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. Sections
   -------------------------------------------------------------------------- */
.legal-s {
  padding-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 6rem;
}
.legal-s > * + * { margin-top: var(--s-4); }
.legal-s > h2 + * { margin-top: var(--s-5); }

.legal-s h2 {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  font-size: var(--fs-h3);
  line-height: 1.14;
}
.legal-s h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  margin-top: var(--s-6);
}
.legal-s__n {
  flex: none;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold-900);
  font-variant-numeric: tabular-nums;
}

/* Back to contents: quiet, but a real 44px target on a phone. */
.to-toc {
  margin-top: var(--s-5);
}
.to-toc a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.to-toc a:hover { color: var(--red-700); text-decoration: underline; text-underline-offset: 3px; }
.to-toc svg { width: 0.8rem; height: 0.8rem; flex: none; color: var(--gold-700); }

/* --------------------------------------------------------------------------
   5. Lists
   -------------------------------------------------------------------------- */
.legal-list {
  display: grid;
  gap: var(--s-3);
}
.legal-list > li {
  /* Was display:flex. An anonymous flex item takes min-width:auto, so the
     sentence could never wrap below its longest word plus marker and the list
     pushed the page sideways at large text sizes. A positioned marker has no
     such floor. */
  position: relative;
  padding-inline-start: 1.35rem;
  max-width: min(var(--measure), 100%);
}
.legal-list > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--gold-500);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   6. Definition blocks: "what / why" pairs, kinder than a table on a phone
   -------------------------------------------------------------------------- */
.legal-dl {
  display: grid;
  gap: var(--s-4);
}
.legal-dl > div {
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}
.legal-dl dt {
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--ink);
}
.legal-dl dd {
  margin: 0;
  margin-top: var(--s-2);
  color: var(--ink-soft);
}
.legal-dl dd a { color: var(--red-700); }

/* --------------------------------------------------------------------------
   7. Notes and the summary plate
   -------------------------------------------------------------------------- */
.legal-note {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: clamp(1.15rem, 0.85rem + 1.4vw, 1.85rem);
}
.legal-note > * + * { margin-top: var(--s-3); }
.legal-note__h {
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-900);
  line-height: 1.4;
}
.legal-note p,
.legal-note li { max-width: 62ch; }
.legal-note .legal-list { margin-top: var(--s-4); }

/* The summary at the head of a page carries the card's corner devices. */
.legal-note--summary { background: var(--paper-3); }

/* --------------------------------------------------------------------------
   8. Contact block at the foot of each page
   -------------------------------------------------------------------------- */
.legal-contact {
  display: grid;
  gap: 0;
  max-width: 34rem;
  margin-top: var(--s-4);
}
.legal-contact a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  min-height: 48px;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  font-size: var(--fs-body);
}
.legal-contact a:hover { color: var(--red-700); text-decoration: underline; text-underline-offset: 3px; }
.legal-contact__k {
  flex: none;
  width: 5.5rem;
  font-family: var(--ff-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-900);
}

/* --------------------------------------------------------------------------
   9. 404
   -------------------------------------------------------------------------- */
.nf__code {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(3.25rem, 1.6rem + 11vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.14em;
  text-indent: 0.14em;      /* letter-spacing pushes the optical centre left */
  color: var(--gold-300);
  margin-top: var(--s-5);
}
.nf-links {
  display: grid;
  max-width: 28rem;
  margin-inline: auto;
  text-align: left;
}
.nf-links a {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  min-height: 52px;
  padding-block: 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--gold-500) 26%, transparent);
  text-decoration: none;
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: 1.25;
  color: var(--paper);
}
.nf-links a:hover { color: var(--gold-200); }
.nf-links__n {
  flex: none;
  /* 2ch does not account for the 0.2em tracking, which pushes "01" past the
     box and wraps the digits onto two lines. */
  min-width: 2.9ch;
  white-space: nowrap;
  font-family: var(--ff-body);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gold-500);
}

/* --------------------------------------------------------------------------
   10. Print. Legal pages get printed and filed
   -------------------------------------------------------------------------- */
@media print {
  .page-head .lead,
  .page-head .eyebrow,
  .page-head .crumbs,
  .legal-updated,
  .toc__h,
  .toc__n,
  .legal-s__n,
  .legal-note__h,
  .legal-contact__k { color: #000 !important; }

  .toc,
  .legal-note { background: none !important; border: 1px solid #999 !important; }
  .to-toc { display: none !important; }
  .legal { --measure: 100%; }
  .legal-s { break-inside: auto; }
  .legal-s h2, .legal-s h3 { break-after: avoid; }
  .legal-dl > div, .toc { break-inside: avoid; }
}