/* ==========================================================================
   HOME FIRST SCREEN — hero + All Work         LIVE on index.html 2026-09-09

   Applied from /doctor/firstscreen-fsx2-v1.html (study 1, "Measure"). The
   header half of that study went to site-nav/nav-settle.css, which every page
   links; this half is the homepage's own and index.html alone links it.

   THE MINDSET: one optical column governs the whole first screen. Every edge
   is one of three verticals — the left gutter, the right gutter, or the
   centre line — and nothing is allowed a fourth.

   NO MARKUP CHANGES. Not one element added, removed, renamed or reordered:
   the hero is still .label / h1 / .capture / .microline / .sent, and the band
   is still the same tabs, drawer, lane and cards. Everything here is type,
   scale, air and alignment.

   WHAT THE AUDIT FOUND, measured at 1440x900 before this file existed:
     · the headline's ink was 94.8% of its lane (1266.8 of 1336.3) — 35px of
       clearance a side, which is what reads as "zoomed in"
     · the hero's two biggest gaps were its two OUTER ones (87 above, 110
       below) against an internal rhythm of 30.6 / 63 / 21.6 — a small block
       adrift between two holes, not a block breathing
     · three widths in the hero, none shared: headline 1267, field 620,
       microline 300
     · 71px of pure padding in the All Work band separating nothing, and a
       191px card carrying about 110px of words, 40px of it an icon plate
     · a hard min-height: 212px on phone cards whose tallest needs 154

   Loaded last on index.html — after every inline <style> in that file and
   after wk-allwork.css — which is how it wins with no !important.
   ========================================================================== */

/* ==========================================================================
   2 · THE HERO — one measure, and air that is allocated rather than left over
   ========================================================================== */
@media (min-width: 761px){

  /* 2a · WHERE THE AIR GOES.
     .hero is the flex column's only elastic child, so every pixel the band
     below gives back lands here. justify-content:center then splits it 50/50
     into two holes, and nothing decides how big they get.

     Two pseudo-element spacers take the slack instead, at 48/52. The live
     hero rides high (44/56) because the band under it was a heavy 304px
     third of the screen; at 247 it no longer outweighs the block, so the
     bias comes almost out and the composition sits where the eye expects it.
     One ratio, holding at every viewport height — nothing is hand-tuned. */
  .hero{ padding-top: 0; padding-bottom: 0; }
  .hero::before{ content: ""; flex: 48 1 0%; min-height: 10px; }
  .hero::after { content: ""; flex: 52 1 0%; min-height: 10px; }

  /* 2b · THE HEADLINE, off the zoom.
     5.7cqw put the ink at 94.8% of the lane. 4.72cqw puts it at 78.5% at
     1280 / 1366 / 1440 / 1600 / 1920 alike — the same proportion at every
     width, because cqw is a share of the lane and the lane is what changes.
     Still one line everywhere, which is the rule; it simply stops touching
     the gutters. Tracking eases from -.052em to -.046em: at 63px the type no
     longer needs the optical correction 76px did. */
  .hero h1{
    font-size: clamp(34px, min(4.72cqw, 8.1vh), 92px);
    line-height: 1.06;
    letter-spacing: -.046em;
    margin-top: clamp(17px, 2.6vh, 26px);
  }

  /* 2c · THE EYEBROW becomes a kicker.
     It was 87px below the header and 30px above the headline — closer to
     nothing than to the thing it labels. Now it sits 14-22px above the
     headline and reads as its first line. */
  .hero .label{ font-size: 11.5px; letter-spacing: .2em; }

  /* 2d · ONE MEASURE.
     The headline is 1049px at 1440 and the field was 620 — 1.69:1, two
     objects with no relationship. min(720px) makes it 1.46:1, and the field
     grows into a real object rather than an inset. The height comes up with
     it: this is the page's one action, and it is now the second-heaviest
     thing on the screen instead of the fourth. */
  .hero .capture{
    width: min(720px, 100%);
    margin-top: clamp(46px, 8.6vh, 92px);
    padding: 9px;
    border-radius: 17px;
  }
  .hero .capture input,
  .hero .capture button,
  .hero .capture .capfix{ height: clamp(54px, 7.2vh, 66px); }
  .hero .capture button{ padding: 0 26px; font-size: 15px; }

  /* 2e · the quiet line keeps its distance from the field, not from the page */
  .hero .microline{ margin-top: clamp(18px, 2.9vh, 30px); font-size: 13.5px; }
}

/* short laptops: the vh half of every clamp above already tightens the type;
   these keep the ratio between the gaps while the whole block comes down. */
@media (min-width: 761px) and (max-height: 800px){
  .hero h1{ margin-top: clamp(12px, 2vh, 20px); }
  .hero .capture{ margin-top: clamp(30px, 5.8vh, 54px); }
  .hero .microline{ margin-top: clamp(13px, 2.1vh, 20px); }
}

/* ==========================================================================
   3 · ALL WORK — the same measure, at a quarter of the weight
   ========================================================================== */

/* 3a · THE STRIP. 17px of padding above the tabs and none below, so the row
   was 58px tall to hold a 41px control. 11 above brings the strip to 48. */
.tail.show .tabs{ padding-top: 11px; }

/* 3b · THE TABS stop shouting. They were 16px/750 — larger than the site nav
   (14.5) and larger than the card titles they govern (15.5). A section's own
   filter cannot be the loudest type on the lower half of the screen. 14.5
   puts them level with the nav and one step under the cards, and the open tab
   still reads instantly because it owns the canvas's white. */
.tail.show .tabs button{
  font-size: 14.5px;
  padding: 9px 14px 10px;
  letter-spacing: -.014em;
}
.tail.show .tabs button svg{ width: 18px; height: 18px; }

/* 3c · THE CANVAS. 18 above and 18 below the cards, plus 18 under the band —
   54px separating nothing. 13 and 14 still read as a canvas with cards on it. */
.tail.show .drawer{ padding-top: 13px; padding-bottom: 14px; }
.tail.show{ padding-bottom: clamp(9px, 1.4vh, 15px); }


/* 3d · WHERE A TALL SCREEN'S EXTRA HEIGHT GOES.
   Two facts have to be held together. First, index.html floors the lane at
   clamp(168px, 20vh, 214px) — which is why a card at 1920x1080 is 214px tall
   while its words are 141. Second, .hero is the flex column's only elastic
   child, so every pixel this band gives up is handed to the hero and turns
   into a void up there. The band cannot simply shrink; its spare height has
   to be spent somewhere.

   A floor is the obvious way to spend it and it is the wrong one: the card is
   a column with its cue pinned to the bottom, so a floor taller than the
   content pools ALL of the difference into one gap above that cue — measured
   at 1920, 33px of hole in a card that was meant to be tighter.

   The same height as PADDING lands half above the mark and half below the
   cue, and reads as a card that breathes. So the floor goes to zero and the
   card's own block padding carries the vh term instead (see 3e). Same total
   height on a tall screen, no hole in the middle of it. */
.tail.show .lane2{ gap: clamp(10px, 1.15vw, 16px); }
@media (min-width: 761px){ .tail.show .lane2{ min-height: 0; } }


/* 3e · THE CARD. Its ink is a name, a sub-line, one sentence and a cue —
   about 110px of it in a 191px box. The 40px tinted plate was the single
   heaviest piece of nothing in the band: at 40px it is a button that is not a
   button. As a 24px mark with no plate the icon still identifies the card,
   the editorial voice of the hero carries into it, and the card loses 30px. */
.tail.show .door{ padding: clamp(13px, 2vh, 22px) 14px clamp(11px, 1.7vh, 19px); gap: 6px; }
.tail.show .door .ic{
  width: 24px; height: 24px;
  border: 0; border-radius: 0;
  background: none; box-shadow: none;
  justify-content: flex-start;
}
.tail.show .door .ic svg{ width: 22px; height: 22px; }
.tail.show .door:hover .ic{ background: none; }

.tail.show .door h3{ font-size: 15px; line-height: 1.2; letter-spacing: -.026em; }
.tail.show .door h3 span{ margin-top: 1px; font-size: 12.2px; line-height: 1.25; }
.tail.show .door .say{ font-size: 12.5px; line-height: 1.4; }

/* the cue keeps its rule and its place — it is the card's one promise that it
   opens — but at 13px it stops being the third-largest thing in the card. */
.tail.show .door .go{ padding-top: 7px; font-size: 13px; }


/* ==========================================================================
   4 · THE BAND'S OTHER FIVE TABS
   The band's height budget is not the All Work view — it is whichever view is
   tallest, because switching must not push the cards past the fold. Measured
   on the live page the tallest WAS All Work (drawer 227 against the rails'
   226/182/177), which is why cutting All Work alone makes the Landing Pages,
   Websites and Meta Ads rails the new ceiling and pushes them under the fold.

   So the same instruction is applied to them: padding and internal gaps only.
   Nothing here resizes, reorders or removes a card, a caption or a word — the
   only thing that changes is the air inside the decorative window mock and
   the drawer's own inset on those tabs.

   `.wire2 .bar` is scoped to the card on purpose: `.bar` unscoped is the
   page's fixed header.
   ========================================================================== */
.tail.show .drawer.is-wt{ padding-top: 6px; padding-bottom: 8px; }
.tail.show .wt-preview .card.wt-pv .cap{ padding: 8px 13px 10px; }

/* The window mock is the one place a real 12px comes off. .wire2 is
   position:absolute; inset:0 inside .win and lays its parts out in
   percentages, so trimming its own padding moves nothing — .win's
   min-height is the only number that governs the mock, and wk-finish sets
   it to 114. 102 keeps a browser-window proportion (3.2:1 on a 327px card)
   and gives the trimmed padding below somewhere to go. */
.tail.show .piece .win{ min-height: 102px; }
.tail.show .wt-preview .card.wt-pv .wire2 .hero2{ padding: 9px; }
.tail.show .wt-preview .card.wt-pv .wire2 .row{ padding: 8px 9px; }

/* ==========================================================================
   5 · PHONES — the same three moves at phone proportions.
   The burger stays: below 901px it is the only way to the pages.
   ========================================================================== */
@media (max-width: 760px){
  .hero h1{ margin-top: 26px; font-size: clamp(29px, 8.1vw, 38px);
            line-height: 1.06; letter-spacing: -.038em; }
  .hero .label{ font-size: 10px; }
  .hero .capture{ margin-top: clamp(34px, 5.2vh, 48px); }
  .hero .capture input,
  .hero .capture button{ height: 54px; }
  .hero .microline{ margin-top: 16px; }


  .tail.show .tabs{ padding-top: 10px; }
  .tail.show .tabs button{ font-size: 13.5px; padding: 8px 11px 9px; }
  .tail.show .drawer{ padding-top: 11px; padding-bottom: 13px; }
  .tail.show .door{ padding: 16px 12px 14px; }
  .tail.show .door .ic{ width: 24px; height: 24px; }

  /* index.html floors the phone card at 212px. Its tallest real card needs
     154, so that floor was 58px of dead space in every one of them — the
     single largest piece of the "too much unused space" on a phone. The rail
     already stretches all five to the tallest, so nothing goes ragged. */
  .tail.show .door{ min-height: 0; }
}