/* ==========================================================================
   Beck Legal: page styles

   What a page adds to the system. Written so each block can become an
   Etch style: one BEM block per component, native nesting, nothing global.

   Rules of the house
   - Every token is one Automatic CSS writes. Never invent one. A figure
     that is not a token is a calc() off one, written where it is used.
   - No raw colour and no raw length, except a threshold inside a container
     query, which cannot read a token.
   - Container queries for anything about the room a component has, on a
     named container set by the component itself: :has(> &).
     Media queries only for the viewport itself, with the reason stated.
   - Every box and every button takes var(--radius), and nothing sets a
     radius of its own. It is 0 today, so every corner is square.
   - No shadows. One red button per screen.
   ========================================================================== */

/* The theme does this in the build. Here so the pages stand where the
   build's pages will. */
body { margin: 0; }

/* The browser sets a quote, a figure and a definition in from both sides
   by 40. The system's own pages cleared it in their specimen stylesheet.
   To check at build time: whether the theme clears it, or an Etch style
   must. */
blockquote, figure, dd { margin-inline: 0; }

/* The quiet quote has no ground, so it is not a box and its mark stays
   straight. The framework rounds it with everything else. This stands in
   for the dashboard setting blockquote-radius at 0, which is not yet
   entered. */
blockquote { --blockquote-border-radius: 0; }

/* ==========================================================================
   The plan

   One track list for every band: the framework's twelve columns, --grid-12,
   with --grid-gap between them, on the content width.

   A visible edge is a photograph, a ground, a rule or the left edge of a
   block of text. It sits on a column line, and on one of five only: the
   start, the one third (line 5), the half (line 7), the two thirds
   (line 9) and the end.

   A band that is read splits at the two thirds: the copy, then the margin.
   A band that shows splits at the half.

   The framework's ratio tracks, --grid-2-1 and its kin, are not used for a
   band. Their lines fall 10 from the twelve columns' lines at 1440.
   ========================================================================== */

/* ---- Header: on Sand, in the hero's hand ---------------------------------
   Route A, 09/10/2026. The header stands on Sand, the ground the home
   page's first screen dissolves into the photograph, so the chrome and
   the arrival are one ground with no rule between them. The logo stands
   beside two rows: the two offices' numbers at the end, small and plain,
   then the row of items. The items take the terms' register from the
   first screen: the medium size at the body weight, muted, and the
   current page in full ink, as the current term is. No mark: the red
   hairline on the stage is the page's one hot mark and the header draws
   none of its own (Justin, 09/10/2026: "lose the left divider"). The
   current notice is not chrome any more: it is the offer under Wills,
   in the Services panel and on the home page's family door. The quiet
   button is white here, as it is on every Sand ground (the Etch styles). */
.site-header {
  :has(> &) { container: header-area / inline-size; }

  display: grid;
  grid-template-columns: var(--grid-12);
  column-gap: var(--grid-gap);
  row-gap: var(--space-xs);
}

.site-header__phones {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-m);
  margin: 0;
  /* The framework gives every paragraph the full width and the text
     measure. This one is as wide as its two numbers. */
  inline-size: auto;
  max-inline-size: none;
  font-size: var(--text-s);
  color: var(--text-dark-muted);
  white-space: nowrap;

  & a { font-weight: var(--heading-font-weight); color: var(--text-dark); text-decoration: none; }
}

/* The logo and the row of items stand on one line: the foot of the
   wordmark's letters and the foot of the items' letters. */
.site-header__logo {
  grid-column: 1 / 8;
  align-self: last baseline;
  display: block;

  & img {
    display: block;
    inline-size: calc(var(--space-xl) * 3);
    block-size: auto;
    /* A tenth of the logo's width lies under the foot of its letters: the
       tail of the g and the rest of the disc. This lifts the image's own
       foot to that line. The figure belongs to the artwork. */
    margin-block-end: calc(var(--space-xl) * 3 * -0.1);
  }
}

.site-header__nav {
  grid-column: 8 / -1;
  justify-self: end;
  align-self: last baseline;
  display: flex;
  align-items: baseline;
  gap: var(--space-m);
}

.site-header__list {
  display: none;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;

  /* The six items only. The Services panel's links set their own. */
  & > li > a {
    font-size: var(--text-m);
    font-weight: var(--text-font-weight);
    color: var(--text-dark-muted);
    text-decoration: none;
    white-space: nowrap;

    &[aria-current] { color: var(--text-dark); }

    &:hover, &:focus-visible {
      color: var(--link-color-hover);
      text-decoration: var(--link-decoration-hover);
      text-decoration-thickness: var(--link-decoration-thickness);
      text-underline-offset: var(--link-underline-offset);
    }
  }

  /* Each item is pressed, so each gets the 48 hit area the buttons have. */
  & > li > :is(a, button) {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block: calc((100% - 3rem) / 2);
    }
  }

}

/* Search: an icon the size of the items' type, standing on their baseline.
   The zero-width space in the button gives it a text baseline; the icon
   sits on the middle of that line, as a glyph would. The padding makes the
   box 48 each way without changing what the eye sees. */
.site-header__search {
  display: inline-block;
  position: relative;
  padding-block: calc((3rem - 1lh) / 2);
  padding-inline: calc((3rem - 1.25em) / 2);
  border: 0;
  background: none;
  font-size: var(--text-m);
  line-height: inherit;
  color: var(--text-dark);
  cursor: pointer;

  & svg {
    inline-size: 1.25em;
    block-size: 1.25em;
    vertical-align: middle;
  }

  /* A rule in the middle of the gap to the icon's left, as tall as the
     Book online button beside it: its type at line height 1, plus its
     padding and border above and below. */
  &::before {
    content: "";
    position: absolute;
    inset-block: calc(50% - (var(--text-s) + var(--space-xs)) / 2 - var(--border-width));
    inset-inline-start: calc(var(--space-m) / -2);
    inline-size: var(--border-width);
    background: var(--border-color-dark);
  }
}

/* The header's two buttons are small: the small size, padding from the
   spacing scale instead of the button's own, no minimum width. The 48 hit
   area is kept by a pseudo-element, so a finger still gets it without the
   bulk. Menu takes the same sizing so the two never differ. */
.site-header__book,
.site-header__menu {
  position: relative;
  --btn-font-size: var(--text-s);
  --btn-padding-inline: var(--space-xs);
  --btn-padding-block: calc(var(--space-xs) / 2);
  --btn-min-width: 0;

  &::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block: calc((100% - 3rem) / 2);
  }
}

/* Book online is quiet. */
.site-header__book { display: none; }

/* Container queries: the header asks for its own room, whatever the screen. */
/* Without the room, the numbers take the smallest size so they hold one
   line, as the terms on the first screen drop a size. */
@container header-area (width < 36rem) {
  .site-header__phones { font-size: var(--text-xs); }
}

/* With the room, the logo stands beside both rows and adds no height of
   its own. */
@container header-area (width >= 36rem) {
  .site-header__phones { grid-column: 4 / -1; justify-self: end; }
  .site-header__logo { grid-column: 1 / 4; grid-row: 1 / span 2; }
  .site-header__nav { grid-column: 4 / -1; }
}

/* The row of six items and the booking button need this much. */
@container header-area (width >= 72rem) {
  .site-header__list { display: flex; }
  .site-header__book { display: inline-flex; }
  .site-header__menu { display: none; }
}

/* ---- The Services panel, and the menu on a narrow container ----------------
   One markup at every width. Services is a button in the row of items; the
   panel is its child. With the room, the panel is a sheet across the whole
   header, under the row, in the page's twelve columns: the family group in
   the first four, the business group across the rest in two columns of
   rows. Without the room, Menu opens the row of items as a sheet of its
   own, and the panel stands in it as a folded group under Services, one
   column, the same two groups one above the other.

   A row is one link: the service's name, then one line in plain English
   saying whose situation it is. The visitor arrives knowing the problem
   and not its name, and the line is where they find it.

   Open and closed are aria-expanded on the buttons, nothing else, so the
   state is the same for a screen reader, the keyboard and the stylesheet. */
header { position: relative; z-index: 2; }

.site-header__toggle {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-m);
  font-weight: var(--text-font-weight);
  color: var(--text-dark-muted);
  cursor: pointer;
  white-space: nowrap;

  &:hover, &:focus-visible {
    color: var(--link-color-hover);
    text-decoration: var(--link-decoration-hover);
    text-decoration-thickness: var(--link-decoration-thickness);
    text-underline-offset: var(--link-underline-offset);
  }
}

.site-header__panel { display: none; }
.site-header__item--has-panel:has(> [aria-expanded="true"]) > .site-header__panel { display: block; }

.menu__sheet {
  display: grid;
  grid-template-columns: var(--grid-12);
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);

  & > * { grid-column: 1 / -1; }
}

/* The two pathways are the site's own structure, so their names take the
   title's face at its floor, the h3 rung. */
.menu__title {
  margin: 0;
  font-family: var(--h1-font-family);
  font-weight: var(--h1-font-weight);
  font-size: var(--h3);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  max-inline-size: none;
}

/* A title sits closer to its list than the rows sit to each other. */
.menu__list {
  display: grid;
  gap: var(--space-s);
  margin: 0;
  margin-block-start: var(--space-xs);
  padding: 0;
  list-style: none;
}

/* A row is a link and is touched like one: the name takes the link's
   touched colour and underline, from the link tokens. */
.menu__row {
  display: block;
  text-decoration: none;
  color: var(--link-color);
  white-space: normal;

  /* The framework touches every link whole. Here only the name is touched. */
  &:hover, &:focus-visible { color: var(--link-color); text-decoration: none; }

  &:hover .menu__name, &:focus-visible .menu__name {
    color: var(--link-color-hover);
    text-decoration: var(--link-decoration-hover);
    text-decoration-thickness: var(--link-decoration-thickness);
    text-underline-offset: var(--link-underline-offset);
  }
}

.menu__name {
  display: block;
  font-size: var(--text-m);
  font-weight: var(--heading-font-weight);
}

.menu__line {
  display: block;
  font-size: var(--text-s);
  font-weight: var(--text-font-weight);
  color: var(--text-dark-muted);
  /* A line, not a paragraph: it never runs past the column it sits in. */
  max-inline-size: var(--text-max-width);
}


/* The offer: the Matter for a Cause line, the third line of the Wills row.
   It is set in the line's register, small and regular, and in full ink
   while every other line in the panel is muted: the grammar the first
   screen's terms use for the current one. It is its own link, to the will
   booking page; underline on touch only, no arrow, no box (Justin,
   09/10/2026, on the box: "another lazy, just placed, item"). */
.menu__offer {
  display: block;
  margin-block-start: calc(var(--space-xs) / 2);
  font-size: var(--text-s);
  font-weight: var(--text-font-weight);
  color: var(--text-dark);
  text-decoration: none;
  max-inline-size: var(--text-max-width);
  /* Two lines of even length, never a widow. */
  text-wrap: balance;

  &:hover, &:focus-visible {
    color: var(--link-color-hover);
    text-decoration: var(--link-decoration-hover);
    text-decoration-thickness: var(--link-decoration-thickness);
    text-underline-offset: var(--link-underline-offset);
  }
}

/* The foot closes the sheet with the two ways out that belong to the whole
   panel and to no one list: every service on one page, at the start, and
   at the end the way in for a reader who knows the problem and not its
   name (Justin, 13/10/2026: "I love the contact link idea"). Both are
   links and look like links, at the lines' size; the question before the
   second is muted, as a row's line is. Without the room for one line the
   second drops under the first. */
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-xs) var(--space-m);
  margin: 0;
  font-size: var(--text-s);
  max-inline-size: none;
}

.menu__ask { color: var(--text-dark-muted); }

/* Narrow: Menu opens the row as a sheet under the header. */
.site-header__menu[aria-expanded="true"] { --btn-background: var(--secondary-hover); }

@container header-area (width < 72rem) {
  .site-header:has(> .site-header__nav > .site-header__menu[aria-expanded="true"]) .site-header__list {
    display: grid;
    gap: var(--space-s);
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    max-block-size: calc(100dvh - 100%);
    overflow: auto;
    padding: var(--space-m) var(--gutter) var(--space-l);
    background: var(--white);
    border-block: var(--border-width) solid var(--border-color-dark);

    /* The ladder in the sheet: the six items largest, then a service's
       name, then its line. A group's title is a label between them. */
    & > li > a, & .site-header__toggle { font-size: var(--text-l); }
    & .menu__title { font-size: var(--text-s); color: var(--text-dark-muted); }

    & .site-header__panel {
      padding-block: var(--space-s) var(--space-xs);
      & .menu__sheet { row-gap: var(--space-m); }
    }
  }
}

/* A tablet's sheet has room for the two groups side by side. */
@container header-area (48rem <= width < 72rem) {
  .site-header__panel .menu__group--family { grid-column: 1 / 6; }
  .site-header__panel .menu__group--business { grid-column: 7 / -1; }
}

/* With the room: the panel is a sheet across the whole header. */
@container header-area (width >= 72rem) {
  .site-header__panel {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    padding: var(--space-l) var(--gutter);
    /* Sand, the header's own ground: the header opens downward and stays
       one ground. A hairline parts the row of items from the panel, and
       another closes it (Justin, 13/10/2026). */
    background: var(--bg-ultra-light);
    border-block: var(--border-width) solid var(--border-color-dark);
  }

  /* The two pathways stand further apart than the business group's own
     two columns: the columns' gap inside a group, the columns' step
     between the groups. The family group gives up the difference at its
     end, so the business group still starts on the one third line. */
  .menu__group--family {
    grid-column: 1 / 5;
    grid-row: 1;
    padding-inline-end: calc(var(--space-xl) - var(--grid-gap));
  }
  .menu__group--business { grid-column: 5 / -1; grid-row: 1; }

  /* A title is seated on a hairline as wide as its group, so the business
     title is seen to hold both of its columns. The rows under it are
     ruled, as they are on the home page's doors: a group reads as one
     list of names. The first row of each column stands under the title's
     rule and draws none of its own. */
  .site-header__panel .menu__title {
    padding-block-end: var(--space-s);
    border-block-end: var(--border);
  }

  .site-header__panel .menu__list {
    row-gap: 0;
    margin-block-start: 0;

    & > li + li { border-block-start: var(--border); }
  }
  .site-header__panel .menu__list--two > li:nth-child(4n + 1) { border-block-start: 0; }
  /* The firm is still settling its list. Up to eight rows the business
     list is two columns of four. With nine or ten it is two of five, with
     eleven or twelve two of six, and the first row of each column is still
     the one under the title's rule. */
  .site-header__panel .menu__list--two:has(> li:nth-child(9)) {
    grid-template-rows: repeat(5, auto);
    & > li:nth-child(4n + 1) { border-block-start: var(--border); }
    & > li:nth-child(5n + 1) { border-block-start: 0; }
  }
  .site-header__panel .menu__list--two:has(> li:nth-child(11)) {
    grid-template-rows: repeat(6, auto);
    & > li:nth-child(5n + 1) { border-block-start: var(--border); }
    & > li:nth-child(6n + 1) { border-block-start: 0; }
  }

  .site-header__panel .menu__row {
    padding-block: var(--space-xs);

    /* Touched, the whole row answers: the line comes up to full ink, as
       the current term does on the first screen. */
    &:hover .menu__line, &:focus-visible .menu__line { color: var(--text-dark); }
  }

  /* The offer's line sits inside the row's padding, above the rule. */
  .site-header__panel .menu__offer {
    margin-block-start: calc(var(--space-xs) / -2);
    margin-block-end: var(--space-xs);
  }

  /* The foot is a row of its own across the sheet, under a hairline that
     closes both lists, so it holds whatever number of services the firm
     settles on. The gap above the rule and the padding under it are the
     same step. */
  .site-header__panel .menu__sheet { row-gap: var(--space-s); }
  .site-header__panel .menu__foot {
    padding-block-start: var(--space-m);
    border-block-start: var(--border);
  }

  /* Seven rows read down the first column, then the second. */
  .menu__list--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    column-gap: var(--grid-gap);
  }

}

/* Media query, for the reader's own setting: where motion is welcome the
   panel arrives in half the framework's transition, and otherwise at once. */
@media (prefers-reduced-motion: no-preference) {
  .site-header__item--has-panel:has(> [aria-expanded="true"]) > .site-header__panel {
    animation: said-fade calc(var(--transition-duration) / 2) var(--transition-timing);
  }
}

/* ---- Title sheet ------------------------------------------------------------
   The opening of a content page. It orients: the title, one sentence, what
   is on the page and where the page sits. No action.

   One markup, two states:
   --beside  the photograph stands beside the words, split at the half
   --plain   no photograph. Split at the two thirds, like a band that is read

   With no room for two columns the sheet is one column, photograph first.
   That is the default, and the columns are what a wide container adds.

   The photograph's focal point belongs to the photograph. It is set on the
   image, as object-position, and not here.                                  */
.title-sheet {
  :has(> &) { container: title-area / inline-size; }

  display: grid;
  grid-template-columns: var(--grid-12);
  column-gap: var(--grid-gap);
  row-gap: var(--space-m);

  & > * { grid-column: 1 / -1; }
}

.title-sheet__standfirst {
  font-size: var(--text-l);
  max-inline-size: var(--text-max-width);
}

.title-sheet__contents { padding-block-start: var(--space-m); }

.title-sheet__plate {
  order: -1;
  margin: 0;
  aspect-ratio: 3 / 2;

  & img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

/* Container query: the columns are about the room the sheet has. */
@container title-area (width >= 56rem) {

  /* Beside. The words start on the photograph's top edge and the last of
     them end on its bottom edge, so the two columns share both lines. */
  .title-sheet--beside {
    grid-template-rows: auto 1fr auto;

    & > * { grid-column: 1 / 7; }

    & .title-sheet__contents { padding-block-start: var(--space-l); }

    & .title-sheet__plate {
      grid-column: 7 / -1;
      grid-row: 1 / -1;
      order: 0;
      position: relative;
      inline-size: 100%;
      aspect-ratio: 1;
      /* Where the words run longer than the photograph, it grows down to
         meet them, so both lines are still shared. Its width is stated, so
         the ratio cannot widen it instead. */
      min-block-size: 100%;

      & img { position: absolute; inset: 0; }
    }
  }

  /* Plain. */
  .title-sheet--plain {
    & > * { grid-column: 1 / 9; }

    & .title-sheet__contents { grid-column: 9 / -1; grid-row: 1 / span 2; padding-block-start: 0; }
  }
}

/* ---- Page contents --------------------------------------------------------
   A part. It sits in any column and asks that column for its room. */
.page-contents {
  :has(> &) { container: contents-area / inline-size; }

  display: grid;
  gap: var(--space-s);
  padding-block-start: var(--space-s);
  border-block-start: var(--divider);
  font-size: var(--text-s);
}

.page-contents__title { font-weight: var(--heading-font-weight); }

.page-contents__list {
  margin: 0;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-gap);

  /* The gap sits under each entry, so a second column starts level with
     the first. */
  & li { break-inside: avoid; padding-block-end: var(--space-xs); }

  & a { text-decoration: none; }
  & a:is(:hover, :focus-visible) { text-decoration: underline; }
}

.page-contents__part { color: var(--text-dark-muted); }

/* Container query: two columns where the column that holds the list is
   wide enough for two. Columns and not a grid, so the list still reads
   down and then across. */
@container contents-area (width >= 28rem) {
  .page-contents__list { columns: 2; }
}


/* ---- Reading band ---------------------------------------------------------
   One section of a long page: a heading, running copy, and the terms the
   copy uses, in plain English.

   The heading lies over the copy, and the margin keeps the last third.
   With no room for the margin it is one column, and the terms follow the
   copy that uses them.

   A band with no terms has no margin. Nothing takes its place.

   The heading does not stand in a column of its own beside the copy. Once
   it scrolls away, its column is empty for the length of the copy.        */
.reading {
  :has(> &) { container: reading-area / inline-size; }

  display: grid;
  grid-template-columns: var(--grid-12);
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);

  & > * { grid-column: 1 / -1; }
}

.reading__margin {
  display: grid;
  gap: var(--space-s);
  align-content: start;

  /* A slip sinks into the ground while another in the group is lit. The
     words stay as they are: the sheet goes, not the ink. */
  & .slip { transition: background-color var(--transition); }
  &.is-lit .slip:not(.is-lit) { background: transparent; }
}

/* Container query, narrow: with no room for the margin the slips fold
   under their label, and a term opens them. Only with the script, which
   is what does the folding; without it every slip stands open. */
@container reading-area (width < 56rem) {
  .reading__margin > .reading__label { display: none; }
  .js .reading__margin:not(.is-open) > .slip { display: none; }

  /* Justin's idea, 30/09/2026: the terms are one element that is collapsed.
     The margin is a plate of Sand whose head is the control; opened, the
     entries run on inside it, ruled apart. The plate holds the control's
     hit area, so the negative margin that held the words in place goes. */
  .js .reading__margin {
    gap: 0;
    /* The control and the entries bring their own room above and below. */
    padding-inline: var(--space-m);
    background: var(--secondary);
    border-radius: var(--radius);
    :is(.bg--ultra-light, .bg--light) & { background: var(--white); }

    & > .fold {
      display: grid;
      grid-template-columns: 1fr auto;
      justify-self: stretch;
      margin-block: 0;
      /* A button centres its words. */
      text-align: start;
    }

    & > .slip {
      padding-inline: 0;
      padding-block: var(--space-s);
      background: transparent;
      border-block-start: var(--divider);
      border-radius: 0;
      /* The mark is drawn at the plate's edge, as the mark of "Your part"
         is drawn at the stage's. */
      &::before { inset-inline-start: calc(var(--space-m) * -1); }
    }

    /* One sheet, so the others cannot sink into the ground: their ink
       goes quiet instead. */
    &.is-lit .slip:not(.is-lit) { color: var(--text-dark-muted); }
  }
}

.reading__label {
  font-size: var(--text-s);
  font-weight: var(--heading-font-weight);
}

/* A term the margin explains. Dotted, so it is told from a link that goes
   somewhere else. */
.reading__term { text-decoration-style: dotted; }

/* Container queries: the columns are about the room the band has. */
@container reading-area (width >= 56rem) {
  .reading > * { grid-column: 1 / 9; }

  .reading__margin > .fold { display: none; }

  .reading > .reading__margin {
    grid-column: 9 / -1;
    grid-row: 2;
    /* The terms stay in sight while their copy is read. */
    position: sticky;
    inset-block-start: var(--space-m);
  }

  /* The copy and the margin share their first line of type, not the tops
     of their boxes. */
  .reading { align-items: first baseline; }
}

/* ---- Slip -----------------------------------------------------------------
   A part. One term and what it means, on a slip of Sand. */
.slip {
  margin: 0;
  padding: var(--space-m);
  background: var(--secondary);
  /* Every box takes the framework's one radius. It is 0 today. */
  border-radius: var(--radius);
  font-size: var(--text-s);
  position: relative;
  scroll-margin-block-start: var(--space-m);

  /* The mark shows when the slip is the one asked for. It is drawn, not a
     border, and it runs between the corners: a border on one side bends
     with the radius. Nothing moves when it shows. */
  &::before {
    content: "";
    position: absolute;
    inset-block: var(--radius);
    inset-inline-start: 0;
    inline-size: calc(var(--border-width) * 2);
    background: var(--tertiary);
    scale: 1 0;
    transform-origin: top;
    transition: scale var(--transition);
  }

  &:is(:target, .is-lit)::before { scale: 1 1; }

  & dt { font-weight: var(--heading-font-weight); }
  & dd { margin: 0; }

  /* On a tinted ground the slip is White, like the guide sheet and the
     quiet button. Sand on Sand would vanish. */
  :is(.bg--ultra-light, .bg--light) & { background: var(--white); }
}

/* ---- Fold -------------------------------------------------------------------
   A part. The label of a folded margin, as a control: the words and a
   plus, which loses its upright while the margin is open. The plus is the
   questions' sign that a thing opens. */
.fold {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--space-xs);
  justify-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-s);
  font-weight: var(--heading-font-weight);
  line-height: var(--text-line-height);
  color: inherit;
  cursor: pointer;

  /* The words are one line of the small size, 15 tall on a phone, and a
     control wants 48 to touch. The hit area grows by --space-s above and
     below, and the same negative margin holds the words where they were,
     so nothing around the control moves. Found on the service page strip,
     30/09/2026. */
  padding-block: var(--space-s);
  margin-block: calc(var(--space-s) * -1);

  &:hover { color: var(--link-color-hover); }
}

.fold__mark {
  position: relative;
  block-size: 1lh;
  inline-size: var(--text-xs);

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    inline-size: 100%;
    block-size: calc(var(--border-width) * 2);
    background: currentColor;
  }

  &::after {
    inline-size: calc(var(--border-width) * 2);
    block-size: var(--text-xs);
    transition: scale var(--transition);
  }

  .fold[aria-expanded="true"] &::after { scale: 1 0; }
}

/* ---- Closing band ----------------------------------------------------------
   The end of every page: one line, one action, and both offices. It stands
   on Blush and takes .section--l, and it holds the page's one red button.

   Split at the two thirds: the line and the action, then the offices.      */
.closing {
  :has(> &) { container: closing-area / inline-size; }

  display: grid;
  grid-template-columns: var(--grid-12);
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);

  & > * { grid-column: 1 / -1; }
}

.closing__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}

.closing__note { color: var(--text-dark-muted); }

.closing__offices {
  display: grid;
  grid-template-columns: var(--grid-auto-2);
  gap: var(--space-m) var(--grid-gap);
  align-content: start;
}

@container closing-area (width >= 56rem) {
  /* The line takes the height it needs and the action follows it closely.
     What the offices add in height goes under the action. */
  .closing { align-items: first baseline; grid-template-rows: auto 1fr; }

  .closing > * { grid-column: 1 / 9; }

  .closing > .closing__offices {
    grid-column: 9 / -1;
    grid-row: 1 / span 2;
    grid-template-columns: var(--grid-1);
  }
}

/* ---- Office ---------------------------------------------------------------
   A part. One office: its name, its address and its number. */
.office {
  display: grid;
  gap: var(--space-xs);
  padding-block-start: var(--space-s);
  border-block-start: var(--divider);
  font-style: normal;
  font-size: var(--text-s);

  & p { color: var(--text-dark-muted); }

  & a { font-weight: var(--heading-font-weight); }
}

/* ---- From the file ---------------------------------------------------------
   One of the firm's own cases: the story, three facts and one signed
   quote, and then the way to the other cases.

   A band that shows, so it splits at the half. The photograph is as tall
   as the window and stays in sight. Beside it the story passes, at least
   as tall as the photograph, with the file's index at its foot. Nothing
   lies under the photograph, so nothing can slide behind it.

   With no photograph the story takes the first two thirds and more from
   the file takes the margin.                                              */
.story {
  :has(> &) { container: story-area / inline-size; }

  display: grid;
  grid-template-columns: var(--grid-12);
  column-gap: var(--grid-gap);
  row-gap: var(--space-xl);

  & > * { grid-column: 1 / -1; }
}

.story__plate {
  margin: 0;
  aspect-ratio: 3 / 2;

  & img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

.story__lead { font-size: var(--text-l); }

/* ---- Facts ------------------------------------------------------------------
   A part. What was asked, what was found, what happened. */
.facts {
  display: grid;
  margin-inline: 0;
}

.fact {
  display: grid;
  gap: var(--space-xs) var(--grid-gap);
  padding-block: var(--space-s);
  border-block-start: var(--divider);

  & dt { font-weight: var(--heading-font-weight); }
  & dd { margin: 0; color: var(--text-dark-muted); }
}

/* Container query: the columns are about the room the band has. */
@container story-area (width >= 56rem) {
  /* The photograph fills the window, less a little room above and below.
     A viewport unit, because this is about the window itself: how much a
     reader sees at once. It is an approximation and takes no account of
     the header. It stops at one and a half times its own width, so a very
     tall window cannot crop it to a sliver. */
  .story__plate {
    grid-column: 1 / 7;
    grid-row: 1 / span 2;
    align-self: start;
    aspect-ratio: auto;
    block-size: min(calc(100svh - var(--space-m) * 2), calc((min(100cqi, var(--content-width)) - var(--grid-gap)) / 2 * 1.5));
    position: sticky;
    inset-block-start: var(--space-m);
  }

  /* The story and the index together are at least as tall as the
     photograph. The words stand in from the photograph by --space-l, on
     top of the gap, because a photograph wants more room than a column
     of text does. The tracks stay put: what a fact says still starts on
     line 9. */
  .story:has(.story__plate) :is(.story__body, .story__more) {
    grid-column: 7 / -1;
    padding-inline-start: var(--space-l);
  }
  .story:has(.story__plate) .story__body {
    min-block-size: min(calc(100svh - var(--space-m) * 2), calc((min(100cqi, var(--content-width)) - var(--grid-gap)) / 2 * 1.5));
  }

  /* The story keeps the band's columns, so each fact starts on line 7 and
     what it says starts on line 9, where every margin on the page starts. */
  .story__body,
  .story__body .facts,
  .story__body .fact {
    display: grid;
    grid-template-columns: subgrid;
  }

  .story__body { align-content: start; }

  .story__body > *,
  .story__body .fact { grid-column: 1 / -1; }

  .story__body .fact dt { grid-column: 1 / span 2; }
  .story__body .fact dd { grid-column: 3 / -1; }

  /* No photograph. */
  .story:not(:has(.story__plate)) {
    & .story__body { grid-column: 1 / 9; }
    & .story__body .fact dt { grid-column: 1 / span 4; }
    & .story__body .fact dd { grid-column: 5 / -1; }

    & .story__more {
      grid-column: 9 / -1;
      grid-row: 1;
      align-self: start;
      position: sticky;
      inset-block-start: var(--space-m);
    }
  }
}

/* ---- More from the file: the file's index -----------------------------------
   A part. The firm's other cases as a ruled index: for each, the case and
   what happened, starting at the rule.

   It stands at the foot of the story at the weight of a footnote: two
   links to other cases are the page's optional depth, not its proof.

   Each entry is one link. Touched, the name goes red as every link does,
   and a Tan mark draws down the rule's left end.                          */
.story__more {
  display: grid;
  grid-template-columns: subgrid;
}

.file-index {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr;
}

.file-index__title,
.file-index__list { grid-column: 1 / -1; }

.file-index__title {
  padding-block-end: var(--space-s);
  font-size: var(--h5);
}

.file-index__list {
  display: grid;
  grid-template-columns: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
  /* The sheet is ruled at its foot as well. */
  border-block-end: var(--divider);
}

.file-index__entry {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: subgrid;
  gap: var(--space-xs) var(--grid-gap);
  align-content: start;
  padding-block: var(--space-s);
  border-block-start: var(--divider);

  & > * { grid-column: 1 / -1; }

  /* The mark: drawn down from the rule when the entry is touched. It
     stands in the gutter, clear of the words. */
  &::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--space-l) * -1);
    inline-size: calc(var(--border-width) * 2);
    background: var(--tertiary);
    scale: 1 0;
    transform-origin: top;
    transition: scale var(--transition);
  }

  &:has(a:is(:hover, :focus-visible))::before { scale: 1 1; }
}

.file-index__case {
  font-size: var(--text-m);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);

  & a {
    text-decoration: none;

    /* The whole entry is the way to the case. */
    &::after { content: ""; position: absolute; inset: 0; }
    &:is(:hover, :focus-visible) { text-decoration: underline; }
  }
}

.file-index__what {
  font-size: var(--text-s);
  color: var(--text-dark-muted);
}

/* ---- Guides -----------------------------------------------------------------
   The guides a service links, grouped by who each one is for. A guide is a
   sheet of White laid on Sand, the ground for things you keep. Each sheet
   has two ways out: the guide's own page, which the whole sheet leads to,
   and the file itself.

   A band of three groups splits at the thirds. Two groups split at the
   half. One group lays its sheets across the thirds. Sheets in one row
   share their height across the groups, so the band reads as one sheet
   ruled into rows, and the file link stands at the foot of every sheet on
   one line.

   Limits as drawn: three groups to a band, six guides to a group.        */
.guides {
  :has(> &) { container: guides-area / inline-size; }

  display: grid;
  grid-template-columns: var(--grid-12);
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);

  & > * { grid-column: 1 / -1; }
}

.guides__groups {
  display: grid;
  row-gap: var(--space-l);
}

.guides__group {
  display: grid;
  align-content: start;
}

.guides__heading { margin: 0; }

/* The list has no box of its own: each sheet is an item of the group's
   grid, so the rows can be shared across groups. */
.guides__list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Guide ------------------------------------------------------------------
   A part. One guide: its name, what it is, and the file. Sand on White,
   and White on a tinted ground, like the quiet button. */
.guide {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-xs);
  align-content: start;
  margin-block-start: var(--space-m);
  padding: var(--space-m);
  background: var(--secondary);
  /* Every box takes the framework's one radius. It is 0 today. */
  border-radius: var(--radius);

  & > * { margin: 0; }

  /* The mark: drawn down the sheet's left end when the guide is touched.
     It runs between the corners, never as a border. */
  &::before {
    content: "";
    position: absolute;
    inset-block: var(--radius);
    inset-inline-start: 0;
    inline-size: calc(var(--border-width) * 2);
    background: var(--tertiary);
    scale: 1 0;
    transform-origin: top;
    transition: scale var(--transition);
  }

  &:has(.guide__title a:is(:hover, :focus-visible))::before { scale: 1 1; }

  :is(.bg--ultra-light, .bg--light) & { background: var(--white); }
}

.guide__title {
  font-size: var(--text-m);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);

  & a {
    text-decoration: none;

    /* The whole sheet is the way to the guide's page. */
    &::after { content: ""; position: absolute; inset: 0; }
    &:is(:hover, :focus-visible) { text-decoration: underline; }
  }
}

.guide__kind {
  font-size: var(--text-s);
  color: var(--text-dark-muted);
}

/* The file link stands at the foot of the sheet, above the sheet's own
   link, so it can be pressed. */
.guide__file {
  position: relative;
  z-index: 1;
  align-self: end;
  padding-block-start: var(--space-s);
  font-size: var(--text-s);
}

/* Container queries: the columns are about the room the band has. */
@container guides-area (width >= 56rem) {
  /* The lead keeps to the two thirds, like the copy of a reading band. */
  .guides > .guides__lead { grid-column: 1 / 9; }

  /* The groups share the band's columns and a set of rows: the heading,
     then a row for each guide. A row nobody uses is empty and adds
     nothing, because the sheets carry their own gap as a margin. */
  .guides__groups {
    grid-template-columns: subgrid;
    grid-template-rows: repeat(7, auto);
    gap: 0 var(--grid-gap);
  }

  /* Three groups: the thirds. */
  .guides__group {
    grid-column: span 4;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
  }

  /* Two groups: the half. */
  .guides__groups:has(> .guides__group:nth-child(2):last-child) > .guides__group { grid-column: span 6; }

  /* One group: the heading over, and the sheets across the thirds. */
  .guides__groups:has(> .guides__group:only-child) > .guides__group {
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: subgrid;
    grid-template-rows: auto;

    & > .guides__heading { grid-column: 1 / -1; }
    & > .guides__list {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
    & .guide { grid-column: span 4; }
  }
}

/* ---- People -----------------------------------------------------------------
   Who does the work: the people a service links, grouped by what they do,
   in rows. Lawyers first, then the client managers. On White.

   Each group is a row of the band with its heading over. A group of
   profiles lays its people two across at the half, with the biography
   beside the face. Any other group lays its people three across at the
   thirds, name and role only. Each person is a ruled entry: the portrait
   at the rule's left end, on the plan's line, and the words beside it.
   A person with no portrait starts at the rule with their name.

   The biography shows its first sentence, and the rest opens in place.  */
.people {
  :has(> &) { container: people-area / inline-size; }

  display: grid;
  grid-template-columns: var(--grid-12);
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);

  & > * { grid-column: 1 / -1; }
}

.people__group {
  display: grid;
  align-content: start;
}

.people__heading {
  margin: 0;
  padding-block-end: var(--space-s);
}

.people__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Person -----------------------------------------------------------------
   A part. One person: the portrait, the name, the role with the office,
   and for a profile the biography. */
.person {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--grid-gap);
  align-items: start;
  padding-block: var(--space-s);
  border-block-start: var(--divider);

  & > * { margin: 0; }

  /* The list is ruled at its foot as well. */
  &:last-child { border-block-end: var(--divider); }

  /* With no room beside the face, the biography runs under it. */
  & > :is(.person__bio, .person__more) { grid-column: 1 / -1; }

  /* No portrait: the name starts at the rule. */
  &:not(:has(.person__portrait)) > * { grid-column: 1 / -1; }
}

.person__portrait {
  position: relative;
  inline-size: calc(var(--h1) * 3);
  block-size: calc(var(--h1) * 3);
  overflow: clip;
  /* Every box takes the framework's one radius. It is 0 today. */
  border-radius: var(--radius);

  /* The picture is laid over the square and takes no part in sizing the
     row. Both sides of the square are definite lengths: WebKit sizes
     shared rows from a ratio and a picture unevenly. */
  & img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

/* The name and the role, one cell beside the portrait. */
.person__words {
  display: grid;
  gap: var(--space-xs);
  align-content: start;

  & > * { margin: 0; }
}

.person__name {
  font-size: var(--text-m);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
}

.person__role {
  font-size: var(--text-s);
  color: var(--text-dark-muted);
}

/* The biography: its first sentence, then the rest, opened in place. */
.person__bio {
  padding-block-start: var(--space-xs);
  font-size: var(--text-s);
}

.person__more {
  padding-block-start: var(--space-xs);
  font-size: var(--text-s);

  & > summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    text-decoration: underline;
    text-decoration-thickness: var(--link-decoration-thickness);
    text-underline-offset: var(--link-underline-offset);

    &::-webkit-details-marker { display: none; }
    &:hover { color: var(--link-color-hover); }
  }

  & > summary > .person__more-close { display: none; }
  &[open] > summary > .person__more-open { display: none; }
  &[open] > summary > .person__more-close { display: inline; }

  & > .copy {
    padding-block-start: var(--space-xs);
    & > * + * { margin-block-start: var(--space-xs); }
  }
}

/* Container queries: the columns are about the room the band has. */
@container people-area (width >= 56rem) {
  /* Each group keeps the band's columns, and so does its list, so every
     entry sits on the plan's lines. */
  .people__group,
  .people__list {
    grid-template-columns: subgrid;
  }

  .people__group > * { grid-column: 1 / -1; }

  /* Three across at the thirds. */
  .people__list > .person { grid-column: span 4; }

  /* Profiles: two across at the half, so the biography has four columns
     beside the face. */
  .people__group--profiles > .people__list > .person { grid-column: span 6; }

  /* The list is ruled at its foot on every entry of the last row. */
  .person:last-child { border-block-end: 0; }
  .people__list { border-block-end: var(--divider); }

  /* The entry keeps the band's columns: the portrait in its first two,
     the words in the rest. The words take the rows they need and the
     face's height goes to the last row, so the words stand at the head of
     every entry with the same gaps. */
  .person {
    grid-template-columns: subgrid;
    grid-template-rows: auto auto 1fr;
  }

  /* The square is two of the band's columns on each side, as a length:
     the band less its eleven gaps, in twelfths, twice, plus the gap
     between. The container unit measures the section's content box, which
     is the band only until the band reaches its cap, so the cap is
     applied here as the story does. */
  .person__portrait {
    grid-column: 1 / span 2;
    /* The face stands beside all of the words: the name and role, the
       biography and its opening. */
    grid-row: 1 / span 3;
    inline-size: calc((min(100cqi, var(--content-width)) - var(--grid-gap) * 11) / 12 * 2 + var(--grid-gap));
    block-size: calc((min(100cqi, var(--content-width)) - var(--grid-gap) * 11) / 12 * 2 + var(--grid-gap));
  }
  .person > :is(.person__words, .person__bio, .person__more) { grid-column: 3 / -1; }
  .person:not(:has(.person__portrait)) > * { grid-column: 1 / -1; }
}

/* ---- Folding --------------------------------------------------------------------
   Every accordion on the site, the questions and the biographies, opens
   and closes over the framework's transition: the content's row grows
   from nothing to its height and the words fade up, and the reverse to
   close. CSS only, on the details element's own content box. Where an
   engine has no ::details-content the fold is instant, as it was. Off for
   a reader who asks for less motion. */
:is(.question, .person__more)::details-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition), content-visibility var(--transition) allow-discrete;
}

:is(.question, .person__more)[open]::details-content { grid-template-rows: 1fr; }

/* The row's one child gives up its height while the row is closed, and
   fades with it. */
.question__answer,
.person__more > .copy {
  min-block-size: 0;
  overflow: clip;
  opacity: 0;
  transition: opacity var(--transition);
}

:is(.question, .person__more)[open] > :is(.question__answer, .copy) { opacity: 1; }

/* Media query, for the reader's own setting. */
@media (prefers-reduced-motion: reduce) {
  :is(.question, .person__more)::details-content,
  .question__answer,
  .person__more > .copy { transition: none; }
}

/* ---- Questions ----------------------------------------------------------------
   The questions people ask this department before they call, in their own
   words, each folded with its answer beneath it. A band that is read, so
   the list keeps to the two thirds and the margin stays empty. One answer
   is open at a time.

   Each question is a ruled entry, like the file's index: the question at
   the rule, the answer opened in place. The whole rule is the control.
   Touched, the question goes red as every control does, and a Tan mark
   draws down the rule's left end. While the answer is open the mark stays:
   this is the entry being read.

   A plus at the rule's right end says the entry opens. It is drawn from
   the mark's weight of line in the question's own colour, and loses its
   upright while the entry is open.                                        */
.questions {
  :has(> &) { container: questions-area / inline-size; }

  display: grid;
  grid-template-columns: var(--grid-12);
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);

  & > * { grid-column: 1 / -1; }
}

.questions__list {
  display: grid;
  /* The list is ruled at its foot as well. */
  border-block-end: var(--divider);
}

/* ---- Question -----------------------------------------------------------------
   A part. One question and its answer, folded. */
.question {
  position: relative;
  border-block-start: var(--divider);

  /* The mark: down the rule's left end, in the gutter, clear of the words. */
  &::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--space-s) * -1);
    inline-size: calc(var(--border-width) * 2);
    background: var(--tertiary);
    scale: 1 0;
    transform-origin: top;
    transition: scale var(--transition);
  }

  &[open]::before,
  &:has(> summary:is(:hover, :focus-visible))::before { scale: 1 1; }
}

/* The question is the control: the whole rule, from the words to the plus. */
.question__ask {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--grid-gap);
  align-items: start;
  padding-block: var(--space-m);
  cursor: pointer;
  list-style: none;

  &::-webkit-details-marker { display: none; }

  &:is(:hover, :focus-visible) { color: var(--link-color-hover); }
}

.question__text {
  margin: 0;
  color: inherit;
  /* The question takes the width of its column. The heading measure would
     fold a question of 50 characters into two lines beside an empty half
     of the rule. */
  max-inline-size: none;
}

/* The plus: two bars of the mark's weight. As tall as one line of the
   question, so it stands on the first line however many the question
   takes. */
.question__toggle {
  position: relative;
  font-size: var(--h4);
  line-height: var(--heading-line-height);
  block-size: 1lh;
  inline-size: var(--text-s);

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    inline-size: 100%;
    block-size: calc(var(--border-width) * 2);
    background: currentColor;
  }

  &::after {
    inline-size: calc(var(--border-width) * 2);
    block-size: var(--text-s);
    transition: scale var(--transition);
  }

  .question[open] &::after { scale: 1 0; }
}

.question__answer { padding-block-end: var(--space-m); }

/* Container query: the columns are about the room the band has. */
@container questions-area (width >= 56rem) {
  /* The list keeps to the two thirds, like the copy of a reading band. */
  .questions > .questions__list { grid-column: 1 / 9; }
}

/* ---- Stages -------------------------------------------------------------------
   What happens, in order: the stages of a matter. The source is the firm's
   own flowcharts, and what they carry at every stage is the division of
   labour: what we do, and what you do.

   A reading band whose copy is a sequence. It stands on White, and its
   terms in plain English keep the margin as the reading band's do: one
   sticky column of slips for the band, Sand on White. The copy takes the
   two thirds. Every edge on lines 1, 9 and 13.

   Each stage is a ruled entry: the numeral and title, one paragraph of
   what we do, and then the one thing you do, set apart on its own line
   with the mark down its left. The mark here means you.

   The numeral stands in the headline, in the title's own face and size,
   in ink. Scrolling, it rests in the secondary text colour and
   comes to full ink as its stage reaches the middle of the window, then
   stays. Driven by the scroll and by nothing else, and off for a reader
   who asks for less motion.

   A term lights its slip, and on a narrow container the slips fold under
   their label. That is what the script does.                             */
.stages {
  :has(> &) { container: stages-area / inline-size; }

  display: grid;
  grid-template-columns: var(--grid-12);
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);

  & > * { grid-column: 1 / -1; }
}

.stages__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  /* The list is ruled at its foot as well. */
  border-block-end: var(--divider);
}

/* The band's terms, as the reading band's margin. */
.stages__margin {
  display: grid;
  gap: var(--space-s);
  align-content: start;

  /* A slip sinks into the ground while another in the group is lit. The
     words stay as they are: the sheet goes, not the ink. */
  & .slip { transition: background-color var(--transition); }
  &.is-lit .slip:not(.is-lit) { background: transparent; }
}

.stages__label {
  font-size: var(--text-s);
  font-weight: var(--heading-font-weight);
}

/* ---- Stage --------------------------------------------------------------------
   A part. One stage: the numeral and title, what we do, and your part. */
.stage {
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-m);
  border-block-start: var(--divider);

  & > * { margin: 0; }
}

.stage__title {
  /* The title takes the width of its column. */
  max-inline-size: none;
}

/* The numeral: in the title's own face and size, before it, in ink. The
   list numbers the stages for a screen reader, so the numeral is hidden
   from it. */
.stage__number {
  margin-inline-end: var(--space-s);
  color: var(--heading-color);
  animation: stage-here linear both;
  animation-timeline: view();
  /* Comes to full ink over a short stretch of the scroll, once the
     stage's top has risen past the lower part of the window. */
  animation-range: cover 22% cover 34%;
}

@keyframes stage-here {
  from { color: var(--text-dark-muted); }
  to { color: var(--heading-color); }
}

/* Media query, for the reader's own setting: no scroll-driven change. */
@media (prefers-reduced-motion: reduce) {
  .stage__number { animation: none; }
}

/* Your part: the one thing you do at this stage, with the mark down its
   left, drawn between the corners. It is not a box and has no ground. */
.stage__you {
  position: relative;
  padding-inline-start: var(--space-m);

  &::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: calc(var(--border-width) * 2);
    background: var(--tertiary);
  }

  & > b { font-weight: var(--heading-font-weight); }
}

/* A term a slip explains. Dotted, so it is told from a link that goes
   somewhere else. */
.stage__term { text-decoration-style: dotted; }

/* Container query, narrow: with no room for the margin the slips fold
   under their label, and a term opens them. Only with the script; without
   it every slip stands open. */
@container stages-area (width < 56rem) {
  .stages__margin > .stages__label { display: none; }
  .js .stages__margin:not(.is-open) > .slip { display: none; }

  /* Justin's idea, 30/09/2026: the terms are one element that is collapsed.
     The margin is a plate of Sand whose head is the control; opened, the
     entries run on inside it, ruled apart. The plate holds the control's
     hit area, so the negative margin that held the words in place goes. */
  .js .stages__margin {
    gap: 0;
    /* The control and the entries bring their own room above and below. */
    padding-inline: var(--space-m);
    background: var(--secondary);
    border-radius: var(--radius);
    :is(.bg--ultra-light, .bg--light) & { background: var(--white); }

    & > .fold {
      display: grid;
      grid-template-columns: 1fr auto;
      justify-self: stretch;
      margin-block: 0;
      /* A button centres its words. */
      text-align: start;
    }

    & > .slip {
      padding-inline: 0;
      padding-block: var(--space-s);
      background: transparent;
      border-block-start: var(--divider);
      border-radius: 0;
      /* The mark is drawn at the plate's edge, as the mark of "Your part"
         is drawn at the stage's. */
      &::before { inset-inline-start: calc(var(--space-m) * -1); }
    }

    /* One sheet, so the others cannot sink into the ground: their ink
       goes quiet instead. */
    &.is-lit .slip:not(.is-lit) { color: var(--text-dark-muted); }
  }
}

/* Container queries: the columns are about the room the band has. */
@container stages-area (width >= 56rem) {
  .stages > * { grid-column: 1 / 9; }

  .stages > .stages__margin {
    grid-column: 9 / -1;
    grid-row: 2;
    /* The terms stay in sight while the stages are read. Not stretched
       to the row, or it could not move. */
    align-self: start;
    position: sticky;
    inset-block-start: var(--space-m);

    & > .fold { display: none; }
  }
}

/* ---- Serif check ------------------------------------------------------------
   A check page, not a component: the serif at the three sizes it is used
   at, in the display cut the system set and in the text cut of the same
   family, on both grounds. For Justin's eye, 30/09/2026. */
.serif-check {
  display: grid;
  gap: var(--space-s);
}

.serif-check__label {
  padding-block-start: var(--space-m);
  font-size: var(--text-s);
  font-weight: var(--heading-font-weight);
}

.serif-check__row {
  display: grid;
  grid-template-columns: var(--grid-auto-3);
  gap: var(--space-m) var(--grid-gap);
}

.serif-check__face {
  font-size: var(--text-xs);
  color: var(--text-dark-muted);
}

.serif-check__specimen {
  margin-block-start: var(--space-xs);
  max-inline-size: none;
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  color: var(--heading-color);
}

/* ---- Photograph break --------------------------------------------------------
   A pause on a long page: one photograph as wide as the window, with or
   without a caption. It is the White that stands between two tinted
   grounds where the page needs one, and the breath between two bands
   that are read. It asks nothing and links nowhere.

   The section's padding and gutter are the photograph's to fill, so the
   break is the one section with none. Its height follows its width and
   is capped by the window less a little room above and below, so the
   photograph is always seen whole: square with no room, three to two
   with some, two to one with plenty. One column is the default; the
   wider frames are what a wide container adds.

   The caption stands under the photograph on the content width, at the
   start line of the plan, in the secondary text colour at the small
   size, capped at the text measure. A captioned break keeps the
   section's padding at its foot, so the caption never sits on the seam
   of the next ground.

   The focal point belongs to the photograph. It is set on the image, as
   object-position, and not here.                                          */
.break {
  :has(> &) { container: break-area / inline-size; }

  padding: 0;

  &:has(> .break__plate > .break__caption) { padding-block-end: var(--section-padding-block); }
}

.break__plate {
  margin: 0;

  & img {
    display: block;
    inline-size: 100%;
    /* The height attribute on the image is a rule of its own, and a ratio
       only counts when the height is auto. */
    block-size: auto;
    aspect-ratio: 1;
    /* The window less --space-m above and below. A viewport unit, because
       it is about the window itself. */
    max-block-size: calc(100svh - var(--space-m) * 2);
    object-fit: cover;
    /* A full bleed photograph has no corners of its own to round: its
       edges are the window's. Justin, 30/09/2026: "For full bleed images,
       we should ignore them from the radius setting." The one image the
       framework's radius does not reach. */
    border-radius: 0;
  }
}

.break__caption {
  padding-block-start: var(--space-s);
  padding-inline: var(--gutter);
  font-size: var(--text-s);
  color: var(--text-dark-muted);

  /* body p caps the caption at the text measure. */
}

/* Container queries: the frame is about the room the break has. */
@container break-area (width >= 36rem) {
  .break__plate img { aspect-ratio: 3 / 2; }
}

@container break-area (width >= 56rem) {
  .break__plate img { aspect-ratio: 2 / 1; }
}

/* ---- Home: the arrival, in plain English ----------------------------------
   Seventh attempt, 09/10/2026, after the audit. A legal term in the body
   face, quiet; what it means in the reader's words as the h1 at the
   arrival size; the service that answers it as the one link, at the
   term's size, with the site's drawn arrow; and a photograph of that
   situation. With room the photograph is full bleed and the words stand
   in its first half, to the half line, over a wash. Two washes, switched
   from the Review drawer: Sand, the site's own ground dissolving into the
   photograph with dark type (the default), and the black scrim with white
   type (`.said--dark`). The Sand is solid to the 25 percent line: at 97
   percent the photograph tinted it, and against the header's solid Sand
   the seam showed (Justin, 09/10/2026: "The colour has changed"). Sand
   is --secondary, the token the framework's .bg--ultra-light resolves to.
   Until 09/10/2026 the wash used --base-ultra-light, which is the ink's
   ultra-light shade, a pink-tinged grey, and only looked like Sand. The photograph's subject lives in its second half,
   which is a rule for the shoot. The band's height is the window less the
   header and the notice (home.js measures them into --chrome-block-size),
   capped at six tenths of the content width.

   The words, the standfirst and the terms sit on a subgrid of the band's
   twelve columns, so the terms' second column starts on the one-third
   line. Every term carries a drawn mark at its start, hanging in the
   gutter; the current term's is the page's one hot mark, two hairlines
   wide, and nothing moves when it lights.

   One column is the default: the photograph first, four by three, full
   bleed, then the words on Sand, then the terms in two columns.         */
.said {
  container: said-area / inline-size;
  /* The band's own padding lives on the grid: a container's query cannot
     reach the container itself, and the wide layout needs none. */
  padding-block: 0;
  overflow: clip;
}

.said__grid {
  display: grid;
  row-gap: var(--space-l);
  padding-block-end: var(--section-space-m);
}

.said__stage {
  display: grid;
  align-content: start;
  row-gap: var(--space-xl);
}

/* The head is one piece: the term, the plain words and the service. */
.said__head { display: grid; align-content: start; }

/* The photograph. One image per term, stacked; the current one shows.
   It takes no radius: its edges are the window's. */
.said__plate {
  order: -1;
  position: relative;
  margin-inline: calc(var(--gutter) * -1);
  aspect-ratio: 4 / 3;
  overflow: clip;

  & .said__photo {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--transition);

    &.is-current { opacity: 1; }
  }
}

/* The law's word: the body face, muted, a line above the plain words. */
.said__term {
  margin: 0;
  font-size: var(--text-l);
  color: var(--text-dark-muted);
  max-inline-size: none;
}

/* The plain words: the largest type on the site, the h1's dress a step up
   the system's own heading ratio. The measure is the h1's. A paragraph
   carrying the framework's .h1, since the script rewrites its words; the
   page's h1 is the standfirst's first sentence. */
.said__line {
  margin: 0;
  margin-block-start: var(--space-xs);
  font-size: calc(var(--h1) * 4 / 3);
  max-inline-size: var(--h1-max-width);
  text-wrap: balance;
}

/* The service that answers it: the one link on the stage, at the term's
   size so the two frame the plain words at one rung. Touched from the
   link tokens. The arrow is drawn, as the header's search is, and points
   right: another page on this site. */
.said__service {
  margin: 0;
  margin-block-start: var(--space-m);
  font-size: var(--text-l);
  font-weight: var(--heading-font-weight);
  max-inline-size: none;

  & .said__service-link {
    color: var(--text-dark);
    text-decoration: none;

    &:hover, &:focus-visible {
      color: var(--link-color-hover);
      text-decoration: var(--link-decoration-hover);
      text-decoration-thickness: var(--link-decoration-thickness);
      text-underline-offset: var(--link-underline-offset);
    }
  }

  & .said__arrow {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    margin-inline-start: calc(var(--space-xs) / 2);
    vertical-align: middle;

    & svg { display: block; inline-size: 100%; block-size: 100%; }
  }
}

.said__foot {
  display: grid;
  row-gap: var(--space-m);
}

/* The standfirst: one paragraph to the eye, two elements to a machine.
   Its first sentence is the page's h1 (what the firm is, for whom, where),
   set run-in at the standfirst's own size, so it takes everything from the
   paragraph it opens. The wrapper is not a paragraph, so it asks for the
   paragraph's line height itself, worked out at this size. */
.said__standfirst {
  margin: 0;
  font-size: var(--text-l);
  line-height: var(--text-line-height);
  max-inline-size: var(--text-max-width);

  & .said__subject, & p {
    display: inline;
    margin: 0;
    max-inline-size: none;
  }

  & .said__subject {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-wrap: inherit;
  }
}

/* The terms: two columns of marked rows. Every term carries a drawn mark
   at its start, a hairline from the border tokens; the current term's is
   the page's one hot mark, two hairlines wide. The marks hang in the
   gutter and the column gap, so every term's words begin on a column
   line, and a mark is drawn, not a border, so nothing moves when it
   lights. In one column the two tracks share the width. */
.said__terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-l);
  row-gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;

  & > li {
    position: relative;
    padding-inline-start: var(--space-s);
    margin-inline-start: calc(var(--space-s) * -1);

    &::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      inline-size: var(--border-size);
      background: var(--border-color-dark);
      transition: background-color var(--transition), inline-size var(--transition);
    }
  }

  /* The page's one hot mark: the term that is on the stage. */
  & > li:has(.is-current)::before {
    inline-size: calc(var(--border-size) * 2);
    background: var(--primary);
  }
}

.said__term-button {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-m);
  line-height: inherit;
  color: var(--text-dark-muted);
  text-align: start;
  cursor: pointer;
  transition: color var(--transition);

  &:hover, &:focus-visible, &.is-current { color: var(--text-dark); }
}

/* Container query: with room the photograph is full bleed and the band
   fills the window under the header, to a cap. The words stand in the
   photograph's first half, to the half line, over the wash, and share
   its top and bottom lines. */
@container said-area (width >= 52rem) {
  .said__grid {
    grid-template-columns: var(--grid-12);
    column-gap: var(--grid-gap);
    row-gap: 0;
    padding-block-end: 0;
    min-block-size: min(calc(100svh - var(--chrome-block-size, 0px)), calc(var(--content-width) * 0.6));
  }

  /* The stage, its foot and the terms each pass the band's columns down,
     so the terms' second column can start on the one-third line. */
  .said__stage {
    grid-column: 1 / 7;
    grid-row: 1;
    grid-template-columns: subgrid;
    position: relative;
    z-index: 1;
    align-content: space-between;
    padding-block: var(--section-space-s);

    & > * { grid-column: 1 / -1; }
  }

  .said__foot {
    grid-template-columns: subgrid;

    & > * { grid-column: 1 / -1; }
  }

  /* The nav around the terms passes the columns down too. */
  .said__index {
    display: grid;
    grid-template-columns: subgrid;

    & > * { grid-column: 1 / -1; }
  }

  .said__terms {
    grid-template-columns: subgrid;
    column-gap: var(--grid-gap);

    & > li:nth-child(odd) { grid-column: 1 / 5; }
    & > li:nth-child(even) { grid-column: 5 / -1; }
  }

  .said__plate {
    grid-column: 1 / -1;
    grid-row: 1;
    order: 0;
    aspect-ratio: auto;
    min-block-size: 100%;
    /* Out through the section's gutter, and through any margin the content
       width leaves at a wide window, to both edges of the window. */
    margin-inline: calc(-1 * (var(--gutter) + (100cqw - min(100cqw, var(--content-width))) / 2));

    /* The wash, Sand: the site's own ground, whole at the start and gone
       by the two thirds, so the photograph dissolves into the page. */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top, oklch(from var(--secondary) l c h / 0.6), oklch(from var(--secondary) l c h / 0) 45%),
        linear-gradient(to right, var(--secondary) 25%, oklch(from var(--secondary) l c h / 0.55) 45%, oklch(from var(--secondary) l c h / 0) 62%);
    }
  }

  /* The black scrim, for comparison: dark from the start, clearing towards
     the subject, white type. */
  .said--dark {
    & .said__plate::after {
      background:
        linear-gradient(to top, oklch(from var(--black) l c h / 0.45), oklch(from var(--black) l c h / 0) 55%),
        linear-gradient(to right, oklch(from var(--black) l c h / 0.78) 25%, oklch(from var(--black) l c h / 0.45) 55%, oklch(from var(--black) l c h / 0.12));
    }
    & .said__stage { color: var(--white); }
    & .said__term { color: oklch(from var(--white) l c h / 0.8); }
    & .said__line { color: var(--white); }
    & .said__service .said__service-link { color: var(--white); }
    & .said__terms > li::before { background: oklch(from var(--white) l c h / 0.35); }
    & .said__terms > li:has(.is-current)::before { background: var(--primary); }
    & .said__term-button {
      color: oklch(from var(--white) l c h / 0.78);
      &:hover, &:focus-visible, &.is-current { color: var(--white); }
    }
  }

  /* In a half column the plain words take the h1 itself, so the band
     still fits the window. The terms sit a step smaller. */
  .said__line { font-size: var(--h1); }
  .said__term-button { font-size: var(--text-s); }
}

/* Container query: with a wide window the half column is wide enough for
   the arrival size again. */
@container said-area (width >= 72rem) {
  .said__line { font-size: calc(var(--h1) * 4 / 3); }
  .said__term-button { font-size: var(--text-m); }
}

/* Motion. The first pair arrives in order: the term, then the plain words
   rise, then the service, then the rest. Later pairs leave upward and the
   next rises in their place. The photograph fades and settles in the same
   time the words take to arrive, so they land together. Nothing moves
   when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  .said__term, .said__line, .said__service {
    animation: said-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
  .said__line { animation-delay: 0.15s; }
  .said__service { animation-delay: 0.35s; }
  .said__foot {
    animation: said-fade 0.8s ease-out 0.55s backwards;
  }

  .said__plate .said__photo {
    transition: opacity 0.6s ease-out, scale 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
    scale: 1.03;
    &.is-current { scale: 1; }
  }

  .said__stage.is-leaving {
    & .said__term, & .said__line, & .said__service {
      animation: said-leave 0.35s ease-in forwards;
    }
  }
  .said__stage.is-arriving {
    & .said__term, & .said__line, & .said__service {
      animation: said-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    }
    & .said__line { animation-delay: 0.1s; }
    & .said__service { animation-delay: 0.25s; }
  }
}

@keyframes said-rise {
  from { opacity: 0; translate: 0 0.5em; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes said-leave {
  from { opacity: 1; translate: 0 0; }
  to { opacity: 0; translate: 0 -0.4em; }
}
@keyframes said-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Home: what each door holds (band 3, third draft, a throwaway) --------
   The doors at the half. A row is the hero's pair carried on: the reader's
   words, then the service that answers them. The lists are not the same
   length and will change, so the shorter door ends in a photograph that
   takes whatever height is left: the doors end level at any two counts.
   One column is the default, the photograph between the two lists.      */
.doors { container: doors-area / inline-size; }

.doors__stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-xl);
}

.doors__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-xl);
}

.door {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-m);

  /* The body is the list and, in the shorter door, the photograph, which
     takes the row that grows. */
  & .door__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    row-gap: var(--space-m);
  }

  & .door__title { margin: 0; }

  & .door__list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: var(--border);
    border-block-start-color: color-mix(in oklab, var(--border-color-dark) 50%, transparent);

    & li {
      border-block-end: var(--border);
      border-block-end-color: color-mix(in oklab, var(--border-color-dark) 50%, transparent);
    }
  }
}

/* A row is one link, in three shades of one ink (Justin, 13/10/2026: "every
   font and every hairline and icon are the same colour"): the reader's
   words in full ink, the service a step back, the rules at half the
   framework's hairline. Touched, the service comes up to full ink, a line
   is drawn under it from its start, and the arrow appears and moves to
   the end. Leaving is the same in reverse at twice the speed. */
.door__row {
  display: grid;
  row-gap: calc(var(--space-xs) / 2);
  padding-block: var(--space-s);
  color: var(--text-dark);
  text-decoration: none;

  &:hover, &:focus-visible { color: var(--text-dark); text-decoration: none; }

  &:hover, &:focus-visible {
    & .door__name { color: var(--text-dark); }
    & .door__name-text { background-size: 100% var(--link-decoration-thickness); }
    & .door__arrow { opacity: 1; translate: 0; }
  }
}

/* The reader's words, in the title's face at the h4 rung (Justin,
   13/10/2026: h3 was too large beside the door's title). */
.door__said {
  font-family: var(--h1-font-family);
  font-weight: var(--h1-font-weight);
  font-size: var(--h4);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  text-wrap: balance;
}

.door__name {
  font-size: var(--text-m);
  font-weight: var(--heading-font-weight);
  color: oklch(from var(--text-dark) l c h / 0.65);
}

/* The line under a touched service is a background, since an underline
   cannot be drawn from one end. It follows the words onto a second line. */
.door__name-text {
  padding-block-end: var(--link-underline-offset);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--link-decoration-thickness);
}

/* The site's drawn arrow, as on the hero's one link, in the red's dark
   shade. It is there only for the row being touched. */
.door__arrow {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  margin-inline-start: calc(var(--space-xs) / 2);
  vertical-align: middle;
  color: var(--primary-semi-dark);
  opacity: 0;
  translate: calc(var(--space-xs) * -1) 0;

  & svg { display: block; inline-size: 100%; block-size: 100%; }
}

/* Media query, not a container query: motion is the reader's setting, not
   the component's room. Out at half the framework's duration, in at the
   whole of it. */
@media (prefers-reduced-motion: no-preference) {
  .door__name, .door__name-text, .door__arrow {
    transition-property: color, background-size, opacity, translate;
    transition-duration: calc(var(--transition-duration) / 2);
    transition-timing-function: var(--transition-timing);
  }

  .door__row:hover, .door__row:focus-visible {
    & .door__name, & .door__name-text, & .door__arrow { transition-duration: var(--transition-duration); }
  }
}

/* Media query, not a container query: whether a pointer can hover is the
   device's, not the component's. Where nothing can hover, the arrow is
   always there, or a row would carry no sign that it is a link. */
@media (hover: none) {
  .door__arrow { opacity: 1; translate: 0; }
}

/* The photograph and its caption. Alone in a column it keeps its own
   shape; beside the longer door it gives that shape up and fills. */
.door__plate {
  display: grid;
  grid-template-rows: 1fr auto;
  row-gap: var(--space-xs);
  margin: 0;

  & .door__photo {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: clip;

    & img {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  & .door__offer { margin: 0; max-inline-size: none; text-wrap: pretty; }
}

/* Container query, the band's room: the doors side by side at the half,
   stretched to one height. */
@container doors-area (width >= 48rem) {
  /* Two equal columns, a large space apart (Justin, 13/10/2026: the band
     does not need the twelve columns). Two shared rows, so the titles
     stand on one row and the lists start level even where one title runs
     to a second line. */
  .doors__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--space-xl);
    row-gap: var(--space-m);
  }

  .door {
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
  }

  .door__plate .door__photo {
    aspect-ratio: auto;
    min-block-size: calc(var(--space-xxl) * 2);
  }
}

/* The band closes as the panel does: every service at the start, the way
   in for a reader who does not know the name at the end. It is a helper
   for the whole band, so it stands on a ground of its own, Sand, edge to
   edge, and is the band's last thing (Justin, 13/10/2026: the ink was
   "too dark and it should also be full bleed"). The band gives up its
   own padding at the foot and at the sides for it. */
.doors { padding-block-end: 0; }

.doors__close {
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--space-m) var(--gutter);
  /* Half Sand, half White: quieter than Sand itself. The framework's
     ultra-light shade is 0.95 against Sand's 0.94, too close to see. The
     mix is the one the framework uses for --bg-light. */
  background: color-mix(in oklab, var(--secondary) 50%, var(--white));
}

.doors__foot { font-size: var(--text-m); }

/* ---- Home: posts (band 6) ----------------------------------------------------
   The newest post has no sheet. Its photograph and its words stand on the
   ground: the photograph is the box, and the title is set in the heading
   face at the size of a small heading, so one post leads and the three
   sheets under it follow. One column is the default, the photograph over
   the words.                                                              */
.guide.guide--lead {
  grid-column: 1 / -1;
  grid-template-rows: auto;
  gap: var(--space-m) var(--grid-gap);
  padding: 0;
  background: none;
  /* With no sheet of its own it wants more room before the sheets. */
  margin-block-end: var(--space-m);

  /* The mark belongs to a sheet's edge, and this has no sheet. */
  &::before { content: none; }

  & .guide__plate {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius);
    overflow: clip;

    & img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  & .guide__body {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: var(--space-s);
    align-content: start;

    & > * { margin: 0; }
  }

  /* The section heading's face and weight at the small heading's size.
     Not a link: with no sheet round it the post no longer reads as one
     thing to press, so the way in is its own line (Justin, 13/10/2026). */
  & .guide__title {
    font-family: var(--h2-font-family);
    font-size: var(--h3);
    font-weight: var(--h2-font-weight);
  }

  & .guide__kind { font-size: var(--text-l); }
}

/* The way in to the newest post: a line with its arrow showing. Touched,
   an underline draws from the start under the words and the arrow moves
   to the end, as a service's name does in band 3. The words keep their
   ink. */
.guide__go {
  font-size: var(--text-m);
  font-weight: var(--heading-font-weight);

  & a {
    color: var(--text-dark);
    text-decoration: none;

    &:is(:hover, :focus-visible) {
      color: var(--text-dark);
      text-decoration: none;

      & .guide__go-text { background-size: 100% var(--link-decoration-thickness); }
      & .guide__arrow { translate: var(--space-xs) 0; }
    }
  }
}

.guide__go-text {
  padding-block-end: var(--link-underline-offset);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--link-decoration-thickness);
}

.guide__arrow {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  margin-inline-start: calc(var(--space-xs) / 2);
  vertical-align: middle;

  & svg { display: block; inline-size: 100%; block-size: 100%; }
}

/* Media query, not a container query: reduced motion is the reader's
   setting. Out at half the time it takes to come in, as in band 3. */
@media (prefers-reduced-motion: no-preference) {
  .guide__go-text, .guide__arrow {
    transition-property: background-size, translate;
    transition-duration: calc(var(--transition-duration) / 2);
    transition-timing-function: var(--transition-timing);
  }

  .guide__go a:is(:hover, :focus-visible) :is(.guide__go-text, .guide__arrow) { transition-duration: var(--transition-duration); }
}

/* Container queries: the split is about the room the band has. The lead
   splits at the half before the three under it leave one column. */
@container guides-area (width >= 40rem) {
  .guide.guide--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container guides-area (width >= 56rem) {
  /* The one group lays its sheets at the thirds; this one takes the row
     and its columns: the photograph to line 8, the words from it, standing
     in by --space-l as the words of a story do. The selector is as long
     as the one it answers. */
  .guides__groups:has(> .guides__group:only-child) > .guides__group .guide.guide--lead {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;

    & .guide__plate { grid-column: 1 / 8; }
    & .guide__body { grid-column: 8 / -1; padding-inline-start: var(--space-l); }
  }
}