/* ============================================================
   SECTION 8  -  A VERY SHORT GUEST LIST             2026-08-21

   Rewritten. It was white type over a darkened photograph; it is now a
   light section with the list itself drawn on the right.

   TWO REASONS IT CHANGED, and the first one is structural.

   1. GROUND. This section and the closing CTA below it were BOTH night,
      so the page ended on two dark panels running into each other with no
      seam between them. The owner caught it by eye. Linen puts a real
      step between the research section above (paper-2) and the night
      close below, and it gives the page its last light beat before the
      end.

   2. A SECURITY MODEL STATED IS THE WEAKEST FORM OF ONE. Two paragraphs
      claimed that only people on a list are ever played. A list with four
      people on it and one caller turned away at the bottom makes the same
      argument at a glance, and it is the argument this section exists for.

   THE PHOTOGRAPH THAT CAME OUT was statement.jpg - the same man in the
   same room as him-desk.jpg, which now carries step four of section 3. So
   removing it also removed a scene that was appearing twice on one page.

   THE PANEL IS NOT A BORROWED INTERFACE. Deck slide 24 bars wearing
   another company's UI. This is built from the page's own vocabulary -
   paper, ember, the device's corner radius - and resembles nothing on a
   phone.

   Scoped with #voice throughout, and the id is deliberately unchanged so
   every nav and footer link keeps working.
   ============================================================ */

#voice{
  background:var(--linen);
  padding-block:clamp(46px,6vw,86px);
}

#voice .gst__two{
  display:grid; gap:clamp(26px,3.4vw,54px);
  align-items:center;
}
@media (min-width:900px){
  #voice .gst__two{grid-template-columns:1fr 1fr}
}

#voice .gst__col{max-width:520px}
#voice .eyebrow{color:var(--ember)}
#voice h2{
  margin:8px 0 0; color:var(--ink);
  font-size:clamp(27px,3.2vw,42px); line-height:1.08; letter-spacing:-.022em;
}
#voice .gst__p{
  margin:16px 0 0; max-width:480px;
  font-size:16px; line-height:1.62; color:var(--ink-2);
}
/* THE FLAGGED SENTENCE, kept and demoted. It is the client's own line and
   he asked for the section whole. Deck s25.02 (_review_deck_TEMP.md:794)
   bars ads that imply a personal attribute about the reader, and "you have
   probably read about cloned voices being used to trick older people"
   does exactly that. It is one decision away from coming out and should
   come out before any ad spend unless somebody overrules the guardrail on
   purpose. Setting it smaller is not a fix, it is an honest weighting. */
#voice .gst__note{
  margin:18px 0 0; max-width:480px;
  font-size:14px; line-height:1.55; color:var(--ink-3);
}

/* ---------- the panel ---------- */
#voice .gst__panel{
  background:var(--paper);
  border:1px solid rgba(0,27,61,.14);
  border-radius:20px;                    /* the device's own corner */
  padding:clamp(16px,1.8vw,22px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 1px 2px rgba(6,22,46,.10),
    0 18px 30px -18px rgba(6,22,46,.34);
  max-width:460px; width:100%;
}
@media (min-width:900px){
  #voice .gst__panel{justify-self:end}
}

#voice .gst__panelhead{
  margin:0 0 12px; padding:0 4px;
  font-family:var(--ui); font-size:11.5px; font-weight:700;
  letter-spacing:.10em; text-transform:uppercase; color:var(--ink-3);
}

#voice .gst__list{list-style:none; margin:0; padding:0}
#voice .gst__row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:12px; padding:11px 4px;
  border-top:1px solid rgba(0,27,61,.09);
}
#voice .gst__row:first-child{border-top:0}

#voice .gst__av{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--ui); font-size:14px; font-weight:700;
  color:var(--night);
  background:linear-gradient(150deg, var(--ember-hot), var(--ember-lit));
  box-shadow:0 1px 2px rgba(6,22,46,.18);
}
#voice .gst__who{display:flex; flex-direction:column; line-height:1.25; min-width:0}
#voice .gst__who b{font-size:15px; color:var(--ink); font-weight:600}
#voice .gst__who span{font-size:13px; color:var(--ink-3)}

/* The tick is drawn rather than set in a font, so a platform cannot swap
   it for an emoji and it cannot vanish when a font fails to load. The
   circle and the check are two pseudo-elements on a positioned parent;
   an earlier version tried to build both out of one element with a mask
   and rendered a plain dot with no tick in it. */
#voice .gst__ok{
  position:relative; padding-left:22px;
  font-family:var(--ui); font-size:12.5px; color:var(--ink-3);
  white-space:nowrap;
}
#voice .gst__ok::before{
  content:""; position:absolute; left:0; top:50%; margin-top:-7.5px;
  width:15px; height:15px; border-radius:50%; background:var(--ember);
}
#voice .gst__ok::after{
  content:""; position:absolute; left:4.2px; top:50%; margin-top:-2.6px;
  width:6px; height:3px;
  border-left:1.8px solid var(--paper);
  border-bottom:1.8px solid var(--paper);
  transform:rotate(-45deg);
}

/* THE REFUSAL. The row that carries the whole section: greyed, no warm
   avatar, and the only place on this page where a thing is turned away. */
#voice .gst__row--no{
  margin-top:6px; padding-top:15px;
  border-top:1px dashed rgba(0,27,61,.22);
}
#voice .gst__row--no .gst__who b{color:var(--ink-3); font-weight:500}
#voice .gst__av--no{
  background:none; color:var(--ink-3);
  box-shadow:inset 0 0 0 1.5px rgba(0,27,61,.18);
  font-weight:600;
}
#voice .gst__no{
  font-family:var(--ui); font-size:12.5px; color:var(--ink-3);
  white-space:nowrap;
}

#voice .gst__foot{
  margin:14px 4px 0; padding-top:12px;
  border-top:1px solid rgba(0,27,61,.09);
  font-size:13px; line-height:1.5; color:var(--ink-3);
}

@media (max-width:520px){
  #voice .gst__ok,
  #voice .gst__no{font-size:11.5px}
  #voice .gst__av{width:32px; height:32px; font-size:13px}
}

html.no-js #voice .rv,
.rv-force #voice .rv{opacity:1; transform:none; transition:none}
@media (prefers-reduced-motion:reduce){
  #voice .rv{transition:none}
}