/* ==========================================================================
   SECTIONS — the language every page below the hero is built from.
   Her choices, decided on the options page and refined against renders:
     02-A  eyebrow above the heading · heavier bold · tight gap between them
     03-B  a card per item: rounded photograph, circular arrow overlapping its
           lower corner, words on the paper beneath. No box, no border, no
           shadow. The card grows on hover; the photograph inside does not.
   Values come from base.css. Nothing here declares a colour or a size of
   its own.
   ========================================================================== */

.sec{ padding-block:var(--s7) }
.sec--tight{ padding-block:var(--s6) }
@media (max-width:1024px){ .sec{ padding-block:var(--s6) } }
@media (max-width:640px){  .sec{ padding-block:var(--s5) } }

.wrap{
  width:100%; max-width:var(--band); margin-inline:auto;
  padding-inline:var(--pad);
}

/* ---- her 02-A: a heading with its label above it ------------------------ */
.sec-head{ margin-block-end:var(--s5) }
.sec-head .eyebrow{ display:block; margin-block-end:6px }
.sec-head h2{ font-size:var(--h2); font-weight:300 }
/* on the phone the token puts H2 at 29 against a 33px hero H1 — too close for
   the page headline to lead, so the section heading steps back here */
@media (max-width:640px){ .sec-head h2{ font-size:25px } }
.sec-head h2 strong{ font-weight:800 }
.sec-head .lede{
  color:var(--muted); max-width:56ch; margin-block-start:var(--s2);
}
/* a rule and a count, so sections don't all open the same way */
.sec-head--row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4);
  padding-block-end:var(--s3);
  border-block-end:1px solid var(--line);
}
.sec-head--row .meta{
  font-size:var(--label); letter-spacing:.16em; color:var(--muted);
  white-space:nowrap;
}
@media (max-width:640px){
  .sec-head--row{ flex-direction:column; align-items:flex-start; gap:var(--s2) }
}

/* ---- her 03-B: the card ------------------------------------------------- */
.cards{ display:grid; gap:var(--s5) var(--s4) }
.cards--3{ grid-template-columns:repeat(3,1fr) }
.cards--4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:1280px){ .cards--4{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:1024px){ .cards--3,.cards--4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){  .cards--3,.cards--4{ grid-template-columns:1fr; gap:var(--s4) } }

.card{
  display:flex; flex-direction:column;
  /* it needs a stacking context of its own: while it grows it overlaps its
     neighbours, and with no background the card behind showed through */
  position:relative; z-index:0;
  transform:scale(1);
  will-change:transform; backface-visibility:hidden;
  transition:transform var(--dur-ui) var(--curve);
}
.card:hover{ transform:scale(1.02); z-index:2 }
@media (hover:none){ .card:hover{ transform:none } }

.card__shot{
  position:relative;
  /* every photograph on the site sits in a square frame */
  aspect-ratio:1/1;
  background:var(--panel);
  border-radius:var(--r);
  overflow:hidden;
}
.card__shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* a fragment of the photograph, not the whole frame — and it holds still */
  transform:scale(1.22);
}
/* an honest empty surface where a photograph does not exist yet */
.card__shot--empty::after{
  content:attr(data-need);
  position:absolute; inset-block-end:12px; inset-inline-start:12px;
  font-size:11px; letter-spacing:.16em; color:var(--muted);
  background:color-mix(in oklab, var(--paper) 82%, transparent);
  padding:5px 10px; border-radius:calc(var(--r) - 4px);
  white-space:nowrap;
}

/* the circular arrow, overlapping the photograph's lower quiet corner.
   The paper ring separates it from the image so it reads as an object on
   top rather than a hole cut into it. */
.card__go{
  position:absolute; z-index:2;
  inset-block-end:-1px; inset-inline-end:-1px;
  width:52px; height:52px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  border:6px solid var(--paper);
  display:grid; place-items:center;
  transition:background-color var(--dur-ui) var(--curve);
}
.card:hover .card__go{ background:var(--ink-2) }
.card__go svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--dur-ui) var(--curve);
}
.card:hover .card__go svg{ transform:translate(-2px,-2px) }

.card__body{
  padding:16px 2px 0;
  display:flex; flex-direction:column; gap:6px;
}
.card__num{ font-size:11px; letter-spacing:.16em; color:var(--muted) }
.card h3{ font-size:19px; font-weight:300; line-height:1.25 }
.card p{ color:var(--muted); font-size:14px; line-height:1.6 }


/* ==========================================================================
   PICKER — her reference: a photograph on the reading edge, and beside it a
   set of tabs over a ruled list. Each row is a name, a line of explanation,
   and a filled circle carrying the arrow on the far side. No section heading:
   the tabs are the opening. Closes on a solid pill, not a text link.
   ========================================================================== */
.picker{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--s7);
  /* her two notes together: the frame is square, and the column is centred
     against it. So the PHOTOGRAPH sets the height and the text centres on it
     — not the reverse, which forced a portrait frame that could never be
     square. */
  align-items:center;
}
.picker__shot{ margin:0; border-radius:var(--r); overflow:hidden; background:var(--panel) }
.picker__shot img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block }
.picker__col{ display:flex; flex-direction:column; justify-content:center; min-width:0 }

.picker__tabs{
  display:flex; gap:var(--s5); flex-wrap:wrap;
  margin-block-end:var(--s5);
}
.picker__tab{
  background:none; border:0; padding:0 0 10px; cursor:pointer;
  font-family:inherit; font-size:var(--body); color:var(--muted);
  border-block-end:1.5px solid transparent;
  transition:color var(--dur-ui) var(--curve), border-color var(--dur-ui) var(--curve);
}
.picker__tab:hover{ color:var(--ink) }
.picker__tab[aria-selected="true"]{ color:var(--ink); font-weight:700; border-block-end-color:var(--ink) }

.picker__list{ display:grid }
/* display:grid beats the browser's own [hidden]{display:none}, so every tab's
   list rendered at once — nine rows instead of three. */
.picker__list[hidden]{ display:none }

.picker__row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding-block:20px;
  border-block-end:1px solid var(--line);
  color:var(--ink);
}
.picker__list > .picker__row:last-child{ border-block-end:0 }
.picker__txt{ display:block; min-width:0 }
.picker__name{
  display:block; font-size:26px; font-weight:600; line-height:1.25;
  transition:transform var(--dur-ui) var(--curve);
}
.picker__desc{
  display:block; margin-block-start:6px;
  font-size:15px; line-height:1.5; color:var(--muted);
}
.picker__go{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  transition:background-color var(--dur-ui) var(--curve);
}
.picker__go svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--dur-ui) var(--curve);
}
.picker__row:hover .picker__go{ background:var(--ink-2) }
.picker__row:hover .picker__go svg{ transform:translate(-2px,-2px) }

.picker__cta{ margin-block-start:var(--s5); display:flex; justify-content:flex-start }

@media (max-width:1200px){
  .picker{ gap:var(--s6) }
  .picker__name{ font-size:23px }
}
@media (max-width:900px){
  .picker{ grid-template-columns:1fr; gap:var(--s5) }
  /* stacked, a square that fills the column is 850px tall and swallows the
     section. It keeps its shape but not the whole width. */
  .picker__shot{ width:min(100%,440px); margin-inline:auto }
}
@media (max-width:640px){
  .picker__name{ font-size:20px }
  .picker__desc{ font-size:14px }
  .picker__row{ padding-block:16px; gap:var(--s3) }
  .picker__go{ width:38px; height:38px }
  .picker__go svg{ width:13px; height:13px }
  .picker__tabs{ gap:var(--s4); margin-block-end:var(--s4) }
  .picker__tab{ font-size:var(--small) }
}