/* ============================================================
   FRACS.IO — what-do-you-do-here.html only
   Loaded after css/styles.css and adds nothing global. Two
   components live here and nowhere else: the org chart and the
   four request records.

   Palette held to the rules recorded in styles.css:
   · --red is display type and decoration only. Every label under
     18px in this file is --muted (5.06:1 on cream) or --body.
   · --red-dark is not used — there is no filled red ground here.
   · no pine, and no marker beyond the one in the page hero.
   ============================================================ */


/* ---- the org chart -------------------------------------------
   Six seats under one. Hairline boxes on the page ground, no
   fills and no shadows: it has to read as a diagram rather than
   as a card grid, which is what the drawing is arguing.

   The connectors only exist above 900px. Below that the chart
   becomes a plain hairline list — a two-row org chart with a
   spine over the first row draws a relationship that isn't
   there, and the house style for a list of six is already
   hairlines (.doors, .stats, .next).                            */

.chart{margin:0}

.oc-top{display:flex;justify-content:center}
.oc-you{border:1.5px solid var(--ink);background:var(--paper);padding:18px 34px;text-align:center;min-width:min(300px,100%)}
.oc-you b{display:block;font-family:var(--bomb);font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.oc-you span{display:block;font-size:13px;color:var(--body);margin-top:6px;line-height:1.5}

/* the vertical drop out of the top box, and the spine the seats hang from.
   The spine is inset half a column at each end so it starts and stops over
   the centre of the outer seats: half of one sixth is one twelfth. */
.oc-drop{height:30px;position:relative}
.oc-drop::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1.5px solid var(--ink)}
.oc-spine{height:0;border-top:1.5px solid var(--ink);margin:0 calc(100% / 12)}

.oc-seats{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.seat{position:relative;margin-top:22px;padding:16px 14px 18px;
  border:1.5px solid var(--ink);border-left-width:0;background:var(--paper);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px}
.seat:first-child{border-left-width:1.5px}
.seat::before{content:"";position:absolute;top:-22px;height:22px;left:50%;border-left:1.5px solid var(--ink)}
.seat:hover{background:var(--cream-2)}
.seat .n{font-family:var(--serif);font-style:italic;color:var(--red);font-size:20px;line-height:1}
.seat h3{margin:0;font-family:var(--bomb);font-size:13px;letter-spacing:.03em;text-transform:uppercase;line-height:1.25}
.seat p{margin:0;font-size:13px;line-height:1.5;color:var(--body)}
/* --muted rather than the tomato .door .more uses: at 10.5px this is normal
   text and has to clear 4.5:1, which tomato does not do on paper. */
.seat .vac{margin-top:auto;padding-top:12px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--muted)}
.seat:hover .vac{color:var(--ink)}

@media(max-width:900px){
  .oc-drop,.oc-spine{display:none}
  .oc-seats{grid-template-columns:1fr 1fr}
  .oc-top{justify-content:stretch}
  .oc-you{min-width:0;flex:1;text-align:left;padding:18px 22px}
  .seat{margin-top:0;border-left-width:1.5px;border-top-width:0;padding:20px 22px 22px}
  .seat::before{display:none}
  .seat:nth-child(2n){border-left-width:0}
}
@media(max-width:560px){
  .oc-seats{grid-template-columns:1fr}
  .seat,.seat:nth-child(2n){border-left-width:1.5px}
  .seat h3{font-size:15px}
  .seat p{font-size:14.5px}
}


/* ---- the four requests ---------------------------------------
   One record each: the ask, then three plain answers to it. The
   ask is set in the serif at reading size rather than as a pull
   quote — it is evidence, not a banner.                          */

.cases{border-top:1.5px solid var(--ink)}
.case{padding:38px 0 40px;border-bottom:1px solid var(--line)}
.case:last-child{border-bottom:none}
.case .cn{font-family:var(--serif);font-style:italic;color:var(--red);font-size:19px;display:block;margin-bottom:10px}
.case h3{margin:0 0 20px;font-family:var(--bomb);font-size:13px;letter-spacing:.08em;text-transform:uppercase}

.saidq{font-family:var(--serif);font-size:clamp(21px,2.5vw,27px);line-height:1.3;color:var(--ink);
  margin:0;max-width:26ch;letter-spacing:-.005em}

.crows{margin:0}
.crow{display:grid;grid-template-columns:132px 1fr;gap:20px;padding:14px 0;border-top:1px solid var(--line)}
.crow:first-child{border-top:none;padding-top:0}
.crow dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted);line-height:1.5}
/* No tomato serif italic in here. The site carries that accent at 17 px in
   .prose p i and it measures 3.69:1 — an open item in the contrast spec, not
   an approved pattern, so emphasis in these answers is ink instead. */
.crow dd{margin:0;font-size:15.5px;line-height:1.62;color:var(--body);max-width:56ch}
.crow dd b{color:var(--ink);font-weight:600}

@media(max-width:860px){
  .case{padding:30px 0 32px}
  .saidq{margin-bottom:26px}
}
@media(max-width:560px){
  .crow{grid-template-columns:1fr;gap:6px}
  .crow dt{font-size:10.5px}
}


/* ============================================================
   TYPE SCALE — onto the shared scale defined at the foot of styles.css.
   Evidence: fracsio-source-assets/docs/type-and-space-audit.md

   This page's own components all measured above 4.5:1 when they were built,
   so nothing here is a contrast change. What it needed was the scale: the
   org-chart seats carried a 10.5px "Open →" and 13px seat titles that ranked
   below their own 14.5px body copy.
   ============================================================ */
.seat .vac,.crow dt{font-size:var(--fs-micro)}
.oc-you span,.seat p{font-size:var(--fs-fine)}
.seat h3,.oc-you b,.case h3,.crow dd{font-size:var(--fs-small)}
/* seat titles now outrank their own body copy again — 15.5 uppercase Cherry
   Bomb over 14 sentence-case sans, ranked by face and case, not by size. */
.seat .n,.case .cn{font-size:var(--fs-lead)}
.crow dd{max-width:52ch}
@media(max-width:720px){
  .seat h3{font-size:var(--fs-small)}
  .seat p{font-size:var(--fs-fine)}
  .crow dt{font-size:var(--fs-micro)}
}
/* the display quote keeps its responsive range, with both ends on the scale */
.saidq{font-size:clamp(19.5px,2.5vw,26px)}