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

:root {
  --s6h-grid-ink: rgba(255, 255, 255, 0.04);
  --s6h-rule: rgba(255, 255, 255, 0.09);
  --s6h-rule-soft: rgba(255, 255, 255, 0.06);
  --s6h-quiet: rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   HERO

   Two columns, the photograph running off the right edge of the viewport. The
   bleed is a negative right margin measured against the viewport, so it can
   land a hair past the client width once a scrollbar is present; the hero
   clips on that axis rather than handing the page a horizontal scroll.
   -------------------------------------------------------------------------- */
.hero-log { overflow-x: clip; }

/* The retired grid overlay comes back here only, as graph paper, and only
   under the hero: this page is a build log, and a build log is written on it.
   The shared tokens supply the ruling and the fade; the pair of gradients is
   the local fallback. It rides ::after rather than a shared wrapper hook
   because a hero's ::before is already spoken for by the drifting bloom, and
   that bloom is exactly the sort of decoration this restructure drops. */
.hero-log::before { content: none; }

.hero-log::after {
  background-image: var(--s6-grid,
    repeating-linear-gradient(to right, var(--s6h-grid-ink) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, var(--s6h-grid-ink) 0 1px, transparent 1px 24px));
  background-size: auto;
  -webkit-mask-image: var(--s6-grid-mask, linear-gradient(180deg, rgb(0 0 0) 0%, transparent 78%));
  mask-image: var(--s6-grid-mask, linear-gradient(180deg, rgb(0 0 0) 0%, transparent 78%));
}

/* The 12-column placements from the card layout would override the two-column
   bleed grid, so they are released here. The phone ordering rules below 60rem
   are left alone: they still do the right thing in one column. */
@media (min-width: 60rem) {
  .hero-log .hero-copy,
  .hero-log .hero-media { grid-column: auto; }
  .hero-log .hero-media { align-self: start; }

  /* Full hero height rather than a 4:3 crop floating in the column. */
  .hero-log .hero-media img {
    aspect-ratio: auto;
    height: clamp(24rem, 36vw, 32rem);
    object-fit: cover;
  }
}

/* Placement only. The stamp and the log date are shared primitives now; all
   this page decides is where on the line they sit. */
.eyebrow .stamp { margin-left: var(--step-3); vertical-align: baseline; }

.hero-log .log-date { margin-top: var(--step-2); }

/* At 320 the browser hyphenated "open-source" across two lines and left the
   second half alone on its own line. The hyphen in the word is the only break
   point this headline needs. */
.hero-log h1 { hyphens: manual; overflow-wrap: normal; }
.hero-log h1 .nobreak { white-space: nowrap; }

@media (max-width: 59.999rem) {
  /* .hero-copy is display: contents at this width, so a new child needs a place
     in the ordering or it lands ahead of the eyebrow. */
  .hero-log .hero-copy > .log-date { order: 1; }
}

/* --------------------------------------------------------------------------
   THE FACTS LINE

   The moulded readout plate becomes the quantities line off the top of a
   recipe card: mono, inline, one hairline between each, nothing behind them.
   -------------------------------------------------------------------------- */
.facts-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  list-style: none;
  margin: var(--step-8) 0 0;
  padding: 0;
  background-image: none;
  border: 0;
  border-block: 1px solid var(--s6h-rule);
  border-radius: 0;
  box-shadow: none;
}

/* Two by two rather than four across. The hero's copy column is a little over
   a third of the page, and four mono quantities in it either wrap three-and-one
   or squeeze the labels to nothing. */
.facts-line > li {
  flex: 1 1 40%;
  min-width: 0;
  padding: var(--step-4);
  text-align: left;
}

.facts-line > li + li {
  border-left: 1px solid var(--s6h-rule-soft);
  box-shadow: none;
}

/* The first cell of each line of two starts on the text's own edge. */
.facts-line > li:nth-child(odd) { padding-left: 0; border-left: 0; }

/* The de-plating this page used to own now lives in the shared sheet, scoped to
   bare .facts, because six other pages carry the same strip. Only the size the
   two-across layout needs is left here. */
.facts-line .fact-value { font-size: var(--size-base); }

.facts-line .fact-label { margin-top: var(--step-1); }



/* --------------------------------------------------------------------------
   ROWS ON THIS PAGE

   The heading carries the destination. The closing line under each row stays
   as text: it says the same thing the heading link does, and a second link to
   one place is a second tab stop for nothing.
   -------------------------------------------------------------------------- */
.rows { counter-reset: none; }
.rows li { list-style: none; }

.row-head a {
  color: inherit;
  text-decoration: none;
}

.row-head a:hover,
.row-head a:focus-visible { color: var(--color-accent); }

.row-foot {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Four alternatives, not four steps, so these rows carry no numeral and the
   empty numeral column goes with it. A vertical hairline stands in for the
   gutter at the width where the two columns exist. */
.rows-2 { display: grid; grid-template-columns: minmax(0, 1fr); }

.rows-2 .row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "body" "media";
}

@media (min-width: 60rem) {
  .rows-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--step-7); }
  .rows-2 .row:nth-child(odd) { padding-right: var(--step-7); border-right: 1px solid var(--s6h-rule-soft); }
  /* The last pair keeps the list's closing rule; the pair above it does not
     need two rules between the columns and the rows below. */
}

/* --------------------------------------------------------------------------
   SCREENS

   An uneven grid. The captures are 320 by 240 and are nearest-neighbour
   scaled, so each span is capped near native size rather than blown up to fill
   its column: the spans set the rhythm, not the magnification.
   -------------------------------------------------------------------------- */
.shots-uneven { align-items: end; margin-top: var(--step-6); }
.shots-uneven .screenshot { width: 100%; }
.shots-uneven .screenshot img { width: 100%; height: auto; }

@media (min-width: 48rem) {
  .shots-uneven > .span-7 { max-width: 26rem; }
  .shots-uneven > .span-5 { max-width: 20rem; }
  .shots-uneven > .span-5 + .span-5 { justify-self: start; }
}

/* The way through to the gallery sits in the gap the third capture leaves,
   which is what stops the second line reading as a short row. It follows the
   capture rather than floating in the middle of the space. */
.shots-more { align-self: center; justify-content: flex-start; }

@media (min-width: 48rem) {
  .shots-more { grid-column: span 4; padding-left: var(--step-5); }
}

/* Held back at every width. The card layout turned this row into a swiping
   rail on a phone and this line was the only thing that said so; the grid
   stacks instead, so there is nothing left to swipe. */
.shots-swipe { display: none; }
@media (max-width: 39.999rem) { .shots-swipe { display: none; } }

/* --------------------------------------------------------------------------
   CAPABILITIES

   A specification list. The labels are sentences rather than field names, so
   they keep the mono face and lose the uppercase that goes with a field name.
   -------------------------------------------------------------------------- */
.spec-does dt {
  font-size: var(--size-sm);
  letter-spacing: 0;
  text-transform: none;
}

@media (min-width: 60rem) {
  .spec-does > div { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   PULL QUOTES
   -------------------------------------------------------------------------- */
.home-quote {
  margin-block: var(--step-7);
  padding-left: var(--step-6);
  border-left: 2px solid var(--color-accent);
}

.home-quote blockquote { max-width: 34ch; }

.story-quote blockquote { max-width: 24ch; }

@media (min-width: 60rem) {
  .story-quote blockquote { max-width: 30ch; }
}

/* --------------------------------------------------------------------------
   GETTING STARTED, AS A RECIPE

   What you need on the left, what you do on the right. Fallbacks for the
   shared .bom primitive, kept to what a bill of materials needs to read as
   one: a mono quantity column and a hairline under each line.
   -------------------------------------------------------------------------- */
.recipe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--step-7);
  margin-top: var(--step-6);
}

@media (min-width: 48rem) {
  .recipe { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--step-8); }
}

.recipe-head {
  margin: 0 0 var(--step-3);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--s6h-quiet);
}

.todo {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--s6h-rule);
}

/* The numerals are the point of this column, so they are set rather than left
   to the browser's marker. */
.todo { counter-reset: todo; }

.todo > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--step-4);
  align-items: baseline;
  padding-block: var(--step-3);
  border-bottom: 1px solid var(--s6h-rule);
  counter-increment: todo;
}

.todo > li::before {
  content: counter(todo, decimal-leading-zero);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--s6h-quiet);
}

@media (forced-colors: active) {
  .facts-line,
  .facts-line > li + li,
  .todo,
  .todo > li,
  .rows-2 .row { border-color: CanvasText; }
}

/* The closing footnote was a moulded plate. Every page now gets the flat note
   with its hairline left rule from the shared sheet, so this page's own copy of
   the de-plating is gone. */

/* --------------------------------------------------------------------------
   TOOLS

   The two things people arrive wanting to open, directly under the hero. The
   shared sheet owns .band, .tool-card and .tool-strip; everything below is
   written at zero specificity with :where() so the shared definitions win
   wherever they land, and stands in for them until they do.
   -------------------------------------------------------------------------- */
:where(.band) {
  background-color: var(--c-band);
  border-block: 1px solid var(--s6h-rule-soft);
}

.tools-band { --tool: var(--c-accent); }

.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--step-5);
  margin-top: var(--step-5);
}

@media (min-width: 48rem) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--step-6); }
}

/* A 4px rule in the tool's own colour and a 6% wash of the same, so the pair
   reads as two doors rather than two more paragraphs. No glow: the rest of
   this page has none either. */
:where(.tool-card) {
  display: flex;
  flex-direction: column;
  gap: var(--step-2);
  padding: var(--step-5) var(--step-5) var(--step-4);
  background-color: color-mix(in srgb, var(--tool) 6%, transparent);
  border-left: 4px solid var(--tool);
  border-radius: 0;
  box-shadow: none;
}

:where(.tool-accent) { --tool: var(--c-accent); }
:where(.tool-green)  { --tool: var(--c-green); }
:where(.tool-amber)  { --tool: var(--c-amber); }
:where(.tool-purple) { --tool: var(--c-purple); }

:where(.tool-eyebrow) {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--tool);
}

:where(.tool-head) {
  margin: 0;
  font-size: var(--size-lg, 1.25rem);
  line-height: 1.25;
}

:where(.tool-body) { margin: 0; }

:where(.tool-card .tool-actions) { margin-top: auto; padding-top: var(--step-3); }

/* One colour per block: the button takes the card's own marker colour rather
   than standing the site accent next to it. */
.tool-card .btn-primary:not(.flash-panel *) { background-color: var(--tool); }
.tool-card .btn-primary:not(.flash-panel *):hover {
  background-color: color-mix(in srgb, var(--tool) 84%, white);
}

/* The two utilities are rows, not cards: the same left rule at half the weight
   and no wash, so they sit under the pair without competing with it. */
.tool-rows {
  margin: var(--step-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--step-4);
}

@media (min-width: 48rem) {
  .tool-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--step-6); }
}

.tool-row {
  padding: var(--step-3) var(--step-4);
  border-left: 2px solid var(--tool);
}

.tool-row-head {
  margin: 0 0 var(--step-1);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.tool-row-head a { color: var(--tool); text-decoration: none; }
.tool-row-head a:hover,
.tool-row-head a:focus-visible { text-decoration: underline; }

.tool-row-body { margin: 0; font-size: var(--size-sm); }

/* --------------------------------------------------------------------------
   WHERE THE COLOUR IS NOT

   Sprinkled, not flooded. The three provider rows are one decision made three
   times, so their closing lines stay quiet and the eye goes to the headings;
   the story quote carries no rule at all, because the sentence is the point.
   -------------------------------------------------------------------------- */
.rows-plain .row-foot { color: var(--s6h-quiet); }

.story-quote { border-left-color: var(--s6h-rule); }

@media (forced-colors: active) {
  :where(.tool-card),
  .tool-row { border-color: CanvasText; }
}