/* =========================================================================
   Contents — /
   Figma: CW / 1833:1337 "Frame 2147223614" (1440 × 2325)

   The frame is one 1440 layout, so every size here is a clamp() whose upper
   bound is the Figma number — the page is the frame at 1440 and scales
   proportionally below it rather than stepping between breakpoints. That is
   the convention the rest of the site is written in; see the note at the top
   of styles.css.

   The row is the whole component. In the frame it is a 1320-wide box with a
   hairline over it, 40 of padding, an 84 heading with a 44 arrow opposite,
   and a 500-wide line of copy 40 under them — 212 tall, 60 between one row
   and the next.
   ========================================================================= */

.page-contents {
  background: var(--white);
  color: var(--ink);
}

.toc {
  max-width: 1440px;
  margin: 0 auto;
  /* 16 at the top, not the gutter: the meta line is the first thing on the
     page and it belongs against the edge. The gutter still holds the sides
     and the foot. */
  padding: 16px var(--toc-gutter) calc(var(--toc-gutter) * 2);

  /* 60 in the frame, and the only spacing token this page needs: it is the
     page's own margin, the gap between rows, and half of it is the space
     under the meta line. */
  --toc-gutter: clamp(20px, 4.167vw, 60px);
  /* 40 — the row's padding, and the inset that lines the meta line up with
     the headings under it. */
  --toc-pad: clamp(20px, 2.778vw, 40px);
}

/* ------------------------------------------------------------- the meta -- */
/* Two items, one at each end. The frame runs three across a 16-column grid,
   with "Presentation" at 9/16 holding the middle; without it there is no
   middle to hold and a grid would only be a way of writing space-between at
   more length. */
.toc__meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--toc-pad);
  font-family: var(--mono);
  font-size: clamp(13px, 1.112vw, 16px);
  line-height: 18px;
  letter-spacing: -.5px;
  color: #706d67;
  text-box: trim-both cap alphabetic;
}

/* ------------------------------------------------------------ the title -- */
/* Not in the frame. The frame is a slide and its title is the deck's; a page
   that answers a bare domain has to say what it is, so it carries one — set
   at the row heading's size so it reads as the first line of the list rather
   than as a banner over it. */
.toc__title {
  margin: calc(var(--toc-gutter) * 1.5) 0 var(--toc-gutter);
  padding: 0 var(--toc-pad);
  font-family: var(--sans);
  font-weight: 500;
  /* Headline 3 — 44/46 — against the entries' 84. It names the page and then
     gets out of the way; at the row size it competed with the first entry for
     which of the two was the heading. */
  font-size: clamp(28px, 3.056vw, 44px);
  line-height: 1.046;
  letter-spacing: -.03em;
  text-box: trim-both cap alphabetic;
}

/* -------------------------------------------------------------- the list -- */
/* The rows sit flush. The frame floats them 60 apart, each closed off by its
   own hairline over the top; run together, that same hairline becomes the
   line between one row and the next and the list reads as one table rather
   than as eight cards. The last row is the only one that needs anything
   extra — with only top rules the foot of the list would be left open. */
.toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.toc__item:last-child { border-bottom: 1px solid rgba(2, 3, 11, .2); }

/* -------------------------------------------------------------- the row -- */
/* A link around the whole row, not around the heading: the target is the
   width of the page, which is what a list of eight destinations wants. The
   hairline sits on the row rather than between them so the last one is
   closed off at the top like every other. */
.toc__row {
  display: flex;
  flex-direction: column;
  gap: var(--toc-pad);
  padding: var(--toc-pad);
  border-top: 1px solid rgba(2, 3, 11, .2);
  color: inherit;
  text-decoration: none;
}

.toc__head {
  display: flex;
  align-items: center;
  gap: var(--toc-pad);
}

.toc__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(40px, 5.834vw, 84px);
  line-height: .952;      /* 80 on 84 */
  letter-spacing: -.03em;
  text-box: trim-both cap alphabetic;
}

.toc__desc {
  width: clamp(280px, 34.723vw, 500px);
  max-width: 100%;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.112vw, 16px);
  line-height: 1.5;
  letter-spacing: -.02em;
  text-box: trim-both cap alphabetic;
}

/* The arrow is the frame's own export — ring, opacity and glyph are all
   inside the file — so nothing here redraws it; it is only moved. */
.toc__arrow {
  flex: none;
  width: clamp(32px, 3.056vw, 44px);
  height: clamp(32px, 3.056vw, 44px);
  transition: transform .3s cubic-bezier(.5, 0, .2, 1);
}

/* ------------------------------------------------------------- the hover -- */
/* The row lifts its own ground rather than moving: a page of eight 84px
   headings that each shift on hover would never sit still. */
@media (hover: hover) {
  .toc__row { transition: background-color .3s ease; }
  .toc__row:hover { background: var(--chip, #f3f5fa); }
  .toc__row:hover .toc__arrow { transform: translateX(8px); }
}

.toc__row:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* ------------------------------------------------------------------ small -- */
/* Below 700 the heading and the arrow stop sharing a line — at that width an
   84px scale is already down to 40 and the arrow is taking a third of what is
   left of the row. */
@media (max-width: 700px) {
  .toc__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .toc__arrow { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .toc__row,
  .toc__arrow { transition: none; }
  .toc__row:hover .toc__arrow { transform: none; }
}

/* ═══════════════════════════════════════════════ the section pages ═════
   /hero-sections and anything after it: the same list, one level in. Three
   things the front door does not need — a way back, a standfirst under the
   title, and nothing else. The rows are unchanged. */

.toc__back {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.toc__back:hover { color: var(--ink); }

/* Sits where the first row's copy would, and is set to match it: the title
   above it is 84 and the rows under it are 500 wide, so the standfirst holds
   the same measure rather than running the width of the page. */
.toc__stand {
  max-width: 620px;
  margin: 0 0 calc(var(--toc-gutter) * 0.5);
  padding: 0 var(--toc-pad);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
  letter-spacing: -.2px;
  color: #706d67;
}

@media (prefers-reduced-motion: reduce) {
  .toc__back { transition: none; }
}

/* ═══════════════════════════════════════════════════ the grid of stills ═════
   /hero-sections: four builds, two to a row, each one a still of its own
   hero with the name and a sentence under it. The same hairline, the same
   padding, the same arrow as the rows, so the grid reads as the list turned
   sideways rather than as a different page; the heading is the title's size
   (44) rather than the rows' 84, because it now sits under a picture that
   is already the heading. */

.toc__grid {
  margin: 0;
  /* The rows put their hairline at the page edge and inset the text; the
     grid has no text at its edge to inset, so the whole of it stands at
     the text inset — hairlines and stills on the title's left edge, the
     right column ending under the meta line's year. */
  padding: 0 var(--toc-pad);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--toc-gutter);
}

.toc__card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--toc-pad) * 0.75);
  height: 100%;
  padding: var(--toc-pad) 0 var(--toc-gutter);
  border-top: 1px solid rgba(2, 3, 11, .2);
  color: inherit;
  text-decoration: none;
}

/* The still is the hero at 1440 × 900 — the page it links to, at the size
   the two columns give it. The hairline round it is the frame's own edge:
   three of the four builds are white on white and would otherwise bleed
   into the page. */
.toc__still {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid rgba(2, 3, 11, .12);
  background: var(--white);
}

.toc__card .toc__head { margin-top: calc(var(--toc-pad) * 0.25); }

.toc__card .toc__name {
  font-size: clamp(28px, 3.056vw, 44px);
  line-height: 1.046;
}

.toc__card .toc__desc { width: auto; max-width: 500px; }

@media (hover: hover) {
  .toc__card:hover .toc__arrow { transform: translateX(8px); }
}

.toc__card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* One column below 700, like the rows' own break: at that width two 44px
   headings side by side are down to 28 and the stills to a postage stamp. */
@media (max-width: 700px) {
  /* minmax(0, …): a bare 1fr is minmax(auto, 1fr), and the still's
     min-content is its 1600px intrinsic width — the column would grow to it. */
  .toc__grid { grid-template-columns: minmax(0, 1fr); }
  .toc__card .toc__head { flex-direction: row; align-items: center; gap: var(--toc-pad); }
  .toc__card .toc__arrow { order: 0; }
}