/* site6-pages.css: editorial restructure for this page family. Unlayered, loaded after site6.css. Hex literals only in :root. */

:root {
  --s6p-hair:      rgba(255, 255, 255, 0.09);
  --s6p-hair-soft: rgba(255, 255, 255, 0.06);
  --s6p-field-edge: rgba(255, 255, 255, 0.38);
  --s6p-stamp:     rgba(255, 255, 255, 0.50);
  --s6p-num:       rgba(255, 255, 255, 0.26);
  --s6p-recess:    rgba(0, 0, 0, 0.30);
  --s6p-measure:   68ch;
}

/* --------------------------------------------------------------------------
   Log primitives. Zero-specificity so the shared sheet's own versions win the
   moment they land; these only keep the pages readable until then.
   -------------------------------------------------------------------------- */
:where(.stamp) {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label, 0.14em);
  text-transform: uppercase;
  color: var(--s6p-stamp);
}

:where(.log-date) {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label, 0.14em);
  text-transform: uppercase;
  color: var(--s6p-stamp);
}

/* --------------------------------------------------------------------------
   Numbered rows. The numeral is generated, so a row can be added or moved
   without renumbering anything by hand.
   -------------------------------------------------------------------------- */
.rows-num { counter-reset: s6prow; }
.rows-num > .row { counter-increment: s6prow; }
.rows-num > .row::before {
  grid-area: num;
  content: counter(s6prow, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--s6p-num);
}

/* An unnumbered row keeps no gutter for a numeral it does not have. */
.rows:not(.rows-num) > .row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "body" "media";
}

@media (min-width: 60rem) {
  .rows:not(.rows-num) > .row.has-media {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    grid-template-areas: "head media" "body media";
  }
}

/* The rows are lists, and the page sheets give plain lists markers and an
   indent that a hairline row must not inherit. */
ol.rows, ul.rows { list-style: none; padding-left: 0; margin: 0; }
.rows > .row { max-width: none; margin: 0; }

/* --------------------------------------------------------------------------
   Flat notes. The tier is a stamp on the note rather than a coloured plate
   around it, so a safety note reads as louder text, not as a heavier box.
   -------------------------------------------------------------------------- */
.callout {
  background: none;
  background-image: none;
  border: 1px solid var(--s6p-hair);
  border-radius: 0;
  box-shadow: none;
  padding: var(--step-5);
  max-width: var(--s6p-measure);
}

.callout::before {
  content: "Note";
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label, 0.14em);
  text-transform: uppercase;
  color: var(--s6p-stamp);
  margin-bottom: var(--step-3);
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  background: none;
  border: 0;
}

.callout-safety::before { content: "Safety"; color: var(--color-accent); }
.callout-danger::before { content: "Important"; color: var(--color-accent); }

.callout .callout-title {
  display: block;
  margin-bottom: var(--step-2);
  font-family: inherit;
  font-size: var(--size-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-text);
}

/* The hazard stripe belonged to the panel this note no longer is. */
.callout::after { content: none; }

/* ==========================================================================
   Guide
   ========================================================================== */

/* The contents rail: a hairline list with a thin bar on the entry being read.
   No plate, no well, no bevel. */
@media (min-width: 60rem) {
  .guide-toc {
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
}

.guide-toc nav {
  position: relative;
  background: none;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid var(--s6p-hair);
  padding: 0;
}

.guide-toc-title {
  padding: 0;
  margin: 0 0 var(--step-3);
  color: var(--s6p-stamp);
  text-shadow: none;
}

.guide-toc ol { margin: 0; padding: 0; }

.guide-toc li { border-bottom: 1px solid var(--s6p-hair-soft); }

.guide-toc a {
  border-left: 0;
  background: none;
  border-radius: 0;
  padding: var(--step-2) 0 var(--step-2) var(--step-4);
  color: var(--color-text-muted);
}

.guide-toc a:hover { background: none; color: var(--color-text); }

.guide-toc a[aria-current='location'] {
  background: none;
  border-radius: 0;
  color: var(--color-text);
}

.guide-toc-indicator {
  width: 2px;
  border-radius: 0;
  box-shadow: none;
  background: var(--color-accent);
}

.guide-toc-phone {
  background: none;
  border: 1px solid var(--s6p-hair);
  border-radius: 0;
  box-shadow: none;
}

/* Steps. The mono line above the head is the step's own stamp. */
.guide-steps .row {
  grid-template-areas: "num meta" "num head" "num body";
  row-gap: var(--step-2);
}

.guide-steps .guide-time {
  grid-area: meta;
  margin: 0;
  color: var(--s6p-stamp);
  text-shadow: none;
}

.guide-steps .guide-time b { font-weight: 500; color: var(--color-accent); }

@media (max-width: 40rem) {
  .guide-steps .row {
    grid-template-columns: 1fr;
    grid-template-areas: "num" "meta" "head" "body";
  }
}

/* A row's head and body, wherever the guide uses rows. */
.guide-main .row-head { margin-top: 0; }
.guide-main .row-body { font-size: var(--size-sm); }
.guide-main .row-body > * + * { margin-top: var(--step-3); }

/* Paired statements as a two-column list: term left in mono, answer right. */
.guide-dl {
  display: grid;
  grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr);
  column-gap: var(--step-6);
  border-top: 1px solid var(--s6p-hair);
  margin-top: var(--step-5);
}

.guide-dl dt {
  margin: 0;
  padding-block: var(--step-4) var(--step-2);
  color: var(--s6p-stamp);
  text-transform: uppercase;
}

.guide-dl dd {
  margin: 0;
  padding-block: var(--step-4);
  border-bottom: 1px solid var(--s6p-hair);
  max-width: var(--s6p-measure);
}

.guide-dl dt { border-bottom: 1px solid var(--s6p-hair); }

@media (max-width: 48rem) {
  .guide-dl { grid-template-columns: 1fr; }
  .guide-dl dt { border-bottom: 0; padding-block: var(--step-4) 0; }
  .guide-dl dd { padding-block: var(--step-2) var(--step-4); }
}

/* Code is a darker ground inside one hairline. The moulded inset is gone: the
   home page has nothing on it that is pressed into the paper. */
.guide-code pre {
  background: var(--s6p-recess);
  background-image: none;
  border: 1px solid var(--s6p-hair);
  border-radius: 0;
  box-shadow: none;
}

/* ==========================================================================
   Stories
   ========================================================================== */

.story {
  border-top: 1px solid var(--s6p-hair);
  padding-block: var(--step-7);
  padding-inline: 0;
  gap: var(--step-4);
  background: none;
  border-radius: 0;
  box-shadow: none;
  max-width: 60rem;
}

.story .stamp { margin-bottom: var(--step-2); }

.story .story-headline {
  margin: 0;
  font-size: var(--size-lg);
  font-weight: 600;
  color: var(--color-text-muted);
}

.story blockquote { margin: 0; }

.story blockquote p:first-child {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.story blockquote p + p {
  margin-top: var(--step-3);
  font-size: var(--size-sm);
  max-width: var(--s6p-measure);
  color: var(--color-text-muted);
}

.story .photo {
  margin: var(--step-4) 0 0;
  max-width: 22rem;
}

.story .photo img { width: 100%; height: auto; display: block; }

.story .pullquote-who {
  flex-wrap: wrap;
  gap: var(--step-2) var(--step-4);
  margin: 0;
}

.story .pullquote-who .story-name { color: var(--color-text); }

/* The submission form: hairline fields, one primary pill. */
#story-form {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.story-form .field { margin-inline: 0; }
.story-form .field > label { display: block; margin-bottom: var(--step-2); }
.story-form .field-help { margin-top: var(--step-2); }

/* The field boundary is the only thing marking where a field starts, so it is
   held at 3:1 against the page rather than at the decorative hairline. */
#story-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  background-color: transparent;
  background-image: none;
  border: 0;
  border-bottom: 1px solid var(--s6p-field-edge);
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}

/* The select carries the flat treatment in a rule of its own rather than in the
   list above: appearance:none takes the platform arrow away, so this control
   has to draw one, and a chevron cannot share a rule that sets
   background-image: none. */
#story-form select {
  appearance: none;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--s6p-field-edge);
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0 var(--step-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23e6e8ec' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
}

#story-form :is(input[type="text"], input[type="email"], input[type="url"], textarea):hover,
#story-form select:hover {
  border-bottom-color: var(--color-accent);
}

.story-form :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.story-form label { font-size: var(--size-sm); }

.story-form .dropzone {
  background: none;
  border: 1px dashed var(--s6p-hair);
  border-radius: 0;
  box-shadow: none;
}

.story-form .consent-set {
  box-shadow: none;
  border: 0;
  border-top: 1px solid var(--s6p-hair);
  border-radius: 0;
  background: none;
  padding: var(--step-5) 0 0;
}

.story-form .consent-set legend {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label, 0.14em);
  text-transform: uppercase;
  color: var(--s6p-stamp);
  padding-inline: 0;
}

.story-form .form-summary {
  background: none;
  border: 1px solid var(--color-accent);
  border-radius: 0;
}

/* ==========================================================================
   Legal: contents left, text right, one measure.
   ========================================================================== */

.legal-doc .prose,
.legal-doc .qa,
.legal-doc .rows {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.legal-doc .prose,
.legal-doc .row-body,
.legal-doc .prose p,
.legal-doc .callout p {
  max-width: var(--s6p-measure);
  font-size: 17px;
  line-height: 1.7;
}

.legal-layout > .container { display: block; }

.legal-body > .section { padding-block: var(--step-6); }
.legal-body > .section:first-child { padding-block-start: 0; }
.legal-body > .section + .section { border-top: 1px solid var(--s6p-hair-soft); }

.legal-body > .section > .container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}

/* The contents. A disclosure on a phone, a plain list beside the text at
   desktop, where there is a column for it to live in. */
.legal-toc {
  max-width: none;
  margin-block: 0 var(--step-6);
  background: none;
  border: 1px solid var(--s6p-hair);
  border-radius: 0;
}

.legal-toc > summary { color: var(--s6p-stamp); }
.legal-toc[open] > summary { border-bottom: 1px solid var(--s6p-hair); }
.legal-toc ol {
  padding: var(--step-3) var(--step-4) var(--step-4);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.legal-toc a { color: var(--color-text-muted); }
.legal-toc a:hover { color: var(--color-text); }
.legal-toc .legal-toc-num { color: var(--s6p-stamp); }

@media (min-width: 64rem) {
  .legal-layout > .container {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    column-gap: var(--step-8);
    align-items: start;
  }

  .legal-rail {
    position: sticky;
    top: calc(var(--nav-height, 60px) + var(--step-5));
  }

  .legal-toc {
    border: 0;
    border-top: 1px solid var(--s6p-hair);
    margin-block: 0;
  }

  /* Open for good in this column: there is nothing for it to save here. */
  .legal-toc > summary {
    list-style: none;
    cursor: default;
    padding: var(--step-3) 0;
    pointer-events: none;
  }

  .legal-toc > summary::marker,
  .legal-toc > summary::-webkit-details-marker { content: none; display: none; }

  .legal-toc[open] > summary { border-bottom: 0; }

  .legal-toc::details-content { content-visibility: visible; display: block; block-size: auto; }
  .legal-toc > ol { display: grid; padding: 0 0 var(--step-4); }
  .legal-toc li { border-bottom: 1px solid var(--s6p-hair-soft); }
  .legal-toc a { padding-block: var(--step-2); }
}

/* ==========================================================================
   Thank yous
   ========================================================================== */

.contrib {
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}

.contrib .contrib-role,
.contrib .contrib-date {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.contrib .contrib-body {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* A thank-you row carries two stamps beside the name, so it runs as a block
   rather than through the row grid's single body area. */
.contrib { display: block; }
.contrib .row-head { margin: 0 0 var(--step-2); }
.contrib .stamp {
  display: inline-block;
  margin: 0 var(--step-4) 0 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.contrib .row-body { margin-top: var(--step-4); max-width: var(--s6p-measure); }
.contrib .contrib-figures { margin-top: var(--step-4); }
.contrib .contrib-figure { margin: 0; }
.contrib .contrib-figure img { width: 100%; height: auto; display: block; }
.contrib .contrib-caption {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--s6p-stamp);
  margin-top: var(--step-2);
}

@media (forced-colors: active) {
  .callout,
  .guide-toc li,
  .guide-dl dd,
  .legal-toc,
  .story { border-color: CanvasText; }
  .guide-toc-indicator { background: Highlight; }
}

/* ==========================================================================
   Original palette, sprinkled.

   One rule holds all of it together: colour never carries meaning on its own,
   so a range mark sits beside the word it belongs to and never in place of it.
   The .band and .tool-strip primitives belong to the shared sheet and are only
   used here. No hex lives in this file; the --c-* tokens hold the values.
   ========================================================================== */

/* A range mark: a small square of the tier's colour ahead of the tier's name. */
.rng::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.45em;
  vertical-align: 0.04em;
  border-radius: 2px;
  background: var(--rng, currentColor);
}
.rng-in   { --rng: var(--c-green); }
.rng-high { --rng: var(--c-yellow); }
.rng-low  { --rng: var(--c-red); }

/* A note keeps its tier in the stripe: a caution reads amber, a hard limit red. */
.callout-safety { border-left: 2px solid var(--c-amber); }
.callout-safety::before,
.callout-safety .callout-title { color: var(--c-amber); }
.callout-danger { border-left: 2px solid var(--c-red); }
.callout-danger::before,
.callout-danger .callout-title { color: var(--c-red); }

/* The purple case gets its own stamp, on the caption and under the hero. */
.stamp-purple { color: var(--c-purple); }
.hero-media.purple-case { border-bottom: 3px solid var(--c-purple); }

/* The heading above a tools strip. The strip itself is a shared primitive. */
.tool-strip-label {
  margin: 0 0 var(--step-3);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ==========================================================================
   The shared opening

   Every page in this family opens the way the home page does: graph paper,
   the eyebrow carrying the version stamp, the log date, then the headline.
   .hero-log releases the copy column to `auto` so a photograph can bleed right
   beside it; these pages have no photograph, so the solo width is put back.
   -------------------------------------------------------------------------- */
/* A breadcrumb row sits above these heroes and the home page has none, so the
   hero gives back what the row costs and the eyebrow lands where the home page
   puts it. 2.4rem is the tightened row measured, not guessed; re-measure it
   before changing the row's padding or its type size. The document pages carry
   the same pair of rules in their own sheet. */
.container:has(> .crumbs) > .crumbs { padding-block: var(--step-2) 0; }

.container:has(> .crumbs) + .hero { padding-top: calc(var(--step-9) - 2.4rem); }

/* Below 60rem the hero's own top padding is smaller than the row, so there is
   nothing left to give back. */
@media (max-width: 59.999rem) {
  .container:has(> .crumbs) + .hero { padding-top: var(--step-6); }
}

.hero-log.hero-solo .hero-copy { grid-column: 1 / -1; }

/* The lede is the last thing in a hero with no buttons and no quantities line,
   so its bottom margin lands under the hero's own and the first band opens a
   step lower than it does on the home page. */
.hero-solo .hero-copy > :last-child { margin-bottom: 0; }

@media (min-width: 60rem) {
  .hero-log.hero-solo .hero-copy { grid-column: 1 / 9; }
}

/* The log date is a plain mono line under the eyebrow, never a plate. The
   legal pages had it set as a lede, which read as a second sentence. */
.hero-log .log-date { color: var(--s6p-stamp); }
.hero-log .log-date b { font-weight: 500; color: var(--color-text-muted); }

/* The stamp sits on the eyebrow's own line rather than opening a new one: the
   family sheet sets bare .stamp to display:block for the story cards. */
.eyebrow .stamp { display: inline-flex; }

/* --------------------------------------------------------------------------
   Story photographs: one leads, the rest sit under it.

   The grid is the secondary set, so its thumbs are square regardless of what
   was sent in. A column of portrait phone photographs beside a landscape one
   ragged the bottom of the story and pushed the attribution line off the
   screen on a phone.
   -------------------------------------------------------------------------- */
.story .photo,
.story .story-thumb { cursor: zoom-in; }

.story .photo:focus-visible,
.story .story-thumb:focus-visible {
  outline: 2px solid var(--color-accent, currentColor);
  outline-offset: 3px;
}

.story-grid {
  display: grid;
  /* 2 across on a phone, 3 from the width where a third thumb is still large
     enough to read as a picture rather than as a swatch. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--step-3);
  margin-top: var(--step-3);
  max-width: 22rem;
}

.story-grid .story-thumb {
  margin: 0;
  border: 1px solid var(--s6p-hair);
  /* The tap target, not the picture: a thumb narrower than this is a target
     a thumb cannot hit. */
  min-width: 44px;
  min-height: 44px;
}

.story-grid .story-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (min-width: 40rem) {
  .story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}