/*
Theme Name: FreshTapers
Theme URI: https://freshtapers.com/
Author: FreshTapers
Author URI: https://freshtapers.com/
Description: FreshTapers — taper fades, explained clearly. Decision-first guides, diagrams and honest who-should-skip-it advice. Converted from the v44 design: warm ivory paper, charcoal, forest green and rationed brass.
Version: 1.0.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: freshtapers
Tags: blog, education, custom-logo, featured-images, threaded-comments
*/

/* ============ FRESHTAPERS — site styles ============
   Warm ivory paper, deep charcoal, barber-shop forest green, and brass
   used once or twice a page at most. Colour is rationed the way a
   magazine rations it: ivory carries the page, cream separates chapters,
   green means decide / navigate, brass is a detail, never a theme.
   Depth comes from scale, spacing and contrast — not gradients, glass
   or shadow.

   CSS architecture: tokens first (colours, spacing,
   type, borders, timing), then base, header, shared pieces, and one block
   per view in page order. Components read tokens, never raw values.
   Canonical breakpoints — do not invent new ones: 480 small-phone
   adjustments · 560 stacked actions · 640 small (grids, tables stack
   below) · 768 type step · 820 navigation switches · 900 layout splits ·
   960 footer · 1080 header CTA · 1240 brand descriptor. */
:root{
  /* — Semantic colour system —
     The editorial palette, with each colour given exactly one job.
     Ivory is the page, cream the alternate chapter, white is reserved
     for photography and raised surfaces. Forest green (--color-action
     and its aliases) means action, navigation, decision, selected
     state or diagram emphasis — never decoration. Olive is the
     informational/supporting signal only. Brass (--color-brass)
     appears as a hairline or a single lifted word on dark bands —
     never as a background. Success green and warning amber appear
     only where a verdict is genuinely positive or a caution is real
     (Get this / Skip this, the decision summary's skip row). */
  --color-page:#F7F4EE;          /* Warm Ivory / Paper — primary background */
  --color-alt:#EFEAE1;           /* Soft Cream — alternate sections only */
  --color-surface:#FFFFFF;       /* Pure White — photography / raised surface */
  --color-text:#181716;          /* Deep Charcoal — primary text */
  --color-text-2:#6B675F;        /* Warm Muted Grey — secondary text (darkened in the Stage 4 audit so 13.5px captions hold WCAG AA on the cream chapter background as well as on ivory) */
  --color-border:#DAD3C1;        /* warm hairline, decorative separation only */
  --color-action:#263B32;        /* Deep Forest / barber green — action, nav, decision */
  --color-action-hover:#1E3028;
  --color-action-active:#152219;
  --color-link:#263B32;
  --color-focus:#263B32;
  --color-selected:#263B32;      /* selected state border/text */
  --color-selected-bg:#E8EBDD;   /* pale sage-cream — selected state surface */
  --color-info:#5C6350;          /* Muted Olive, darkened for text — informational only */
  --color-olive:#69705B;         /* Muted Olive — decorative / diagram support */
  --color-brass:#B58A52;         /* Warm Brass — tiny premium detail only, never a fill */
  --color-brass-text:#86602F;    /* Brass darkened for small text (folio numbers, index numerals) — #B58A52 itself is 2.8:1 on ivory and fails AA below large sizes; this step holds 4.7:1+ on ivory and cream */
  --color-success:#2F5D33;
  --color-success-bg:#EBF0E4;
  --color-warning:#8A5A1D;
  --color-warning-bg:#F7EDDA;
  --color-on-dark:#F7F4EE;       /* warm ivory text on dark bands */
  --color-on-dark-2:#CFC9BA;     /* warm stone — secondary text on dark bands */
  --color-diagram-tint:#DDE0CF;  /* pale olive-cream — diagram zone band only */
  --color-on-action:#FFFFFF;     /* text on forest / charcoal buttons */
  --color-on-dark-accent:#D9B078;/* brass lifted for dark bands + footer focus */
  --color-on-dark-success:#A9C79B;/* "copied" confirmation on dark bands */
  --color-ink-raise:#2E2B28;     /* raised surface inside charcoal bands */
  --color-ink-soft:#3B3833;      /* hairline / inner border on charcoal bands */
  --color-forest-soft:#3D5546;   /* hairline inside the forest band */
  --color-ink-deep:#000000;      /* pressed state of charcoal buttons only */
  /* Legacy names, kept as aliases so every component reads through the
     semantic tokens above rather than raw colour decisions. */
  --bg:var(--color-page);
  --bg-2:var(--color-alt);
  --ink:var(--color-text);
  --ink-soft:var(--color-ink-soft);
  --muted:var(--color-text-2);
  --on-ink:var(--color-on-dark);
  --on-ink-dim:var(--color-on-dark-2);
  --blue:var(--color-action);
  --blue-dark:var(--color-action-hover);
  --blue-tint:var(--color-diagram-tint);
  --blue-wash:var(--color-selected-bg);
  --teal:var(--color-info);
  --border:var(--color-border);
  --surface:var(--color-surface);
  --success:var(--color-success);
  --success-wash:var(--color-success-bg);
  --warn:var(--color-warning);
  --warn-wash:var(--color-warning-bg);
  /* — Spacing, grid & rhythm —
     8px base scale with optical halves (4/12) where a human would use
     them. One gutter per breakpoint, two containers, one card padding:
     components take their spacing from here, not from local literals. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:88px;
  --space-10:112px;
  --gutter:20px;                 /* page gutter, mobile */
  --gap:20px;                    /* default grid gap */
  --pad-card:20px;               /* the one card padding */
  --section:56px;                /* section rhythm, mobile */
  --radius:2px;
  --font-head:"Archivo",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  /* Display serif (Newsreader roman) — Stage 1 foundation: reserved for
     the masthead nameplate and the hero headline, the two places where
     the publication's name and promise are set as type, not UI. */
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --wrap:1200px;
  --read:720px;
  /* — Borders, timing, targets & type —
     One border weight per job, one duration per kind of state change,
     one touch-target floor. Display sizes stay fluid at phone width
     and step up once, at the 768 type breakpoint. */
  --border-w:1px;
  --border-w-strong:2px;
  --border-w-accent:3px;         /* diagram-weight rule: footer top, only */
  --dur-1:.12s;                   /* colour / border state changes */
  --dur-2:.15s;                   /* button background, FAQ marker */
  --dur-3:.18s;                   /* menu, toast, view change */
  --dur-4:.2s;                    /* finder progress fill */
  --dur-5:.28s;                   /* diagram zone glide */
  --dur-menu:.16s;                /* mobile menu fade */
  --touch:44px;                  /* minimum touch target */
  --btn-h:48px;                  /* primary button / input height */
  --header-h:64px;
  --text-body:17px;
  --leading-body:1.7;
  --text-h2:29px;                /* section heading, mobile */
  --text-h2-lg:36px;             /* section heading, 768px and up */
}
@media(min-width:768px){
  :root{--gutter:40px;--section:88px}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
svg{max-width:100%}
h1,h2,h3,p,li,dd{overflow-wrap:break-word}
a{color:var(--color-link);text-decoration:underline;text-underline-offset:3px;transition:color var(--dur-1) ease}
a:hover{color:var(--color-action-hover)}
a:active{color:var(--color-action-active)}
a,button{-webkit-tap-highlight-color:transparent}
button{font-family:var(--font-body);cursor:pointer}
:focus-visible{outline:var(--border-w-strong) solid var(--color-focus);outline-offset:2px}
h1,h2,h3{font-family:var(--font-head);line-height:1.15;margin:0;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.col{max-width:var(--read);margin:0 auto}
.dim{color:var(--muted)}
.label{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.label--blue{color:var(--blue)} .label--muted{color:var(--muted)} .label--teal{color:var(--teal)}
.label--success{color:var(--success)} .label--warn{color:var(--warn)}
.view{display:none}
.view.active{display:block}
#compare,#gallery,#tools,#face-shapes,#guideBarber,#tool-brief,#tool-rebook{scroll-margin-top:80px}

/* ============ HEADER — ============
   Structure: wordmark + job-based nav + one ink CTA.
   The bar stays warm ivory with charcoal type; forest green is
   rationed to the active state, the diagram system and primary actions
   in page content — it is not the colour of every header element. */
.topbar{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:var(--border-w) solid var(--border)}
.topbar-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);height:var(--header-h);display:flex;align-items:center;gap:28px;transition:height var(--dur-3) ease}
@media(max-width:819px){.topbar-in{gap:12px;flex-wrap:nowrap}}
.topbar.scrolled .topbar-in{height:56px}
.topbar.scrolled{border-bottom-color:var(--ink)}
/* On the guide at phone width the top bar steps aside (not sticky):
   the bottom guide bar is the one persistent control while a visitor
   is showing the page to a barber. Desktop keeps the sticky bar. */
@media(max-width:819px){body.show-guidebar .topbar{position:relative}}
.brand{display:flex;align-items:center;gap:16px;min-width:0;flex:0 0 auto}
.wordmark{font-family:var(--font-head);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap;line-height:1}
.wordmark span{color:var(--blue)}
.wordmark:hover{color:var(--ink)}
.brand-desc{display:none;font-size:13px;color:var(--muted);border-left:var(--border-w) solid var(--border);padding-left:16px;line-height:1.35;max-width:19ch}
@media(min-width:1240px){.brand-desc{display:block}}
/* Desktop / tablet nav — visitor jobs, not site categories */
.sitenav{display:none;margin-left:auto;align-items:stretch;gap:4px;align-self:stretch}
@media(min-width:820px){.sitenav{display:flex}}
.sitenav a{display:inline-flex;align-items:center;text-decoration:none;font-size:15px;font-weight:500;color:var(--ink);padding:6px 10px;min-height:var(--touch);align-self:center;border-bottom:var(--border-w-strong) solid transparent;white-space:nowrap;transition:color var(--dur-1) ease,border-color var(--dur-1) ease}
.sitenav a:hover{color:var(--ink);border-bottom-color:var(--muted)}
.sitenav a:active{color:var(--blue);border-bottom-color:var(--blue)}
.sitenav a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}
@media(min-width:820px) and (max-width:1079px){.sitenav a{padding:6px 7px;font-size:14.5px}}
/* The one header action — ink, not blue, so blue keeps its meaning */
.btn-ink{background:var(--ink);color:var(--color-on-action)}
.btn-ink:hover{background:var(--ink-soft);color:var(--color-on-action)}
.topbar .header-cta{display:none;min-height:var(--touch);padding:10px 18px;font-size:15px}
@media(min-width:1080px){.topbar .header-cta{display:inline-flex}}
/* Mobile bar: the primary job stays visible without opening the
   menu — a compact forest button, present at every phone width */
.mobile-cta{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);margin-left:auto;padding:0 14px;background:var(--color-action);color:var(--color-on-action);font-size:13.5px;font-weight:600;letter-spacing:.02em;text-decoration:none;border-radius:var(--radius);white-space:nowrap;flex:0 0 auto}
.mobile-cta:hover{background:var(--color-action-hover);color:var(--color-on-action)}
.mobile-cta:active{background:var(--color-action-active)}
@media(min-width:820px){.mobile-cta{display:none}}
.menu-btn{background:var(--surface);border:var(--border-w) solid var(--ink);border-radius:var(--radius);min-width:44px;height:44px;font-size:15px;font-weight:500;padding:0 16px;color:var(--ink);white-space:nowrap;flex:0 0 auto}
.menu-btn:active{background:var(--bg-2)}
.menu-btn[aria-expanded="true"]{background:var(--ink);color:var(--color-on-action)}
@media(min-width:820px){.menu-btn{display:none}}
.mobile-cta + .menu-btn{margin-left:10px}
/* Mobile menu: a calm panel anchored under the bar — not a full-screen
   takeover. Each job carries a one-line outcome so the choice is obvious. */
.mobilemenu{display:none;background:var(--surface);border-top:var(--border-w) solid var(--border)}
.mobilemenu.open{display:block}
.mobilemenu nav{display:flex;flex-direction:column}
.mobilemenu nav a{border-bottom:var(--border-w) solid var(--border);text-align:left;padding:13px 20px;min-height:56px;color:var(--ink);display:block;width:100%;text-decoration:none}
.mobilemenu nav a b{font-family:var(--font-head);font-weight:600;font-size:18px;display:block;line-height:1.3}
.mobilemenu nav a small{color:var(--muted);font-size:13.5px;line-height:1.45;display:block}
.mobilemenu nav a:hover{background:var(--bg-2);color:var(--ink)}
.mobilemenu nav a:active{background:var(--blue-wash)}
.mobilemenu nav a[aria-current="page"]{background:var(--blue-wash)}
.mobilemenu nav a[aria-current="page"] b{color:var(--blue)}
.mm-note{padding:14px 20px calc(14px + env(safe-area-inset-bottom));color:var(--muted);font-size:13.5px;line-height:1.55;background:var(--bg)}
@media (prefers-reduced-motion: no-preference){
  .mobilemenu.open{animation:ft-menu var(--dur-menu) ease-out}
  @keyframes ft-menu{from{opacity:0}to{opacity:1}}
}

/* ============ BUTTONS / SMALL PIECES ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--btn-h);padding:12px 22px;border-radius:var(--radius);font-size:15.5px;font-weight:500;text-decoration:none;border:var(--border-w) solid transparent;transition:background var(--dur-2) ease,color var(--dur-2) ease}
.btn-pri{background:var(--blue);color:var(--color-on-action)}
.btn-pri:hover{background:var(--blue-dark);color:var(--color-on-action)}
.btn-sec{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-sec:hover{background:var(--bg-2);color:var(--ink)}
.btn:disabled{opacity:.55;cursor:default}
.btn-ghost{background:transparent;border-color:var(--on-ink);color:var(--color-on-action)}
.btn-ghost:hover{background:var(--ink-soft);color:var(--color-on-action)}
/* Pressed states: a button answers the finger or cursor
   immediately, with a darker step of the same colour — never motion. */
.btn-pri:active{background:var(--color-action-active)}
.btn-sec:active{background:var(--color-selected-bg)}
.btn-ink:active{background:var(--color-ink-deep)}
.btn-ghost:active{background:var(--color-ink-raise)}
/* Badges removed in the component audit: state is carried by
   plain labelled text, not a bordered chip. "You are here" in a learning
   path is the one remaining marker — text only, no box. */
.here{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-selected)}

/* ============ HOMEPAGE ZONES ============ */
.hero{padding:var(--space-7) 0 0}
@media(min-width:768px){.hero{padding:var(--space-9) 0 0}}
.hero h1{font-size:clamp(36px,11vw,41px);font-weight:800;line-height:1.04;letter-spacing:-.022em;max-width:15em}
@media(min-width:768px){.hero h1{font-size:66px}}
.hero h1 .thin{color:var(--muted)}
.hero .lede{font-size:19px;line-height:1.6;max-width:56ch;margin-top:22px}
@media(min-width:768px){.hero .lede{font-size:20px}}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.hero .proofline{margin-top:26px;padding-top:16px;border-top:var(--border-w) solid var(--border);font-size:14.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 22px;max-width:760px}
.hero .proofline b{color:var(--ink);font-weight:500}

/* ============ HERO FILM — real barbershop footage ============
   A short sequence of real-human stock clips (Pexels, credited in
   the Gallery and in assets/media-licenses.json), crossfaded in
   place: the barber prepares the chair, the client is welcomed in,
   the cut happens, detail work follows, and the sequence settles
   on the mirror check. The poster — a real frame from the cut
   clip — is the floor: no-JS, reduced-motion, data-saver, a slow
   connection or a failed clip all land on that photograph, never
   a blank stage. Only the active clip plays; sources are handed
   to the videos by script, sized for the viewport (720px-wide
   files on phones, 1280px on larger screens). */
.hero-film{position:relative}
.hv-stage{position:relative;height:calc(100svh - 56px);min-height:540px;max-height:820px;overflow:hidden;background:#211F1C}
.hv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hv-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .9s ease}
.hv-film.on{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .hv-film.on{animation:hv-drift 7s ease-out forwards}
  @keyframes hv-drift{from{transform:scale(1)}to{transform:scale(1.055)}}
}
/* A quiet shade at the foot of the frame so the caption and the
   credit line stay readable over bright footage. */
.hv-shade{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,rgba(24,23,22,.55),rgba(24,23,22,0));pointer-events:none}
.hv-copy{position:absolute;z-index:5;left:var(--gutter);top:50%;transform:translateY(-50%);max-width:500px;background:var(--color-page);border:var(--border-w) solid var(--ink);border-radius:var(--radius);padding:30px 32px 26px}
.hv-copy .hv-kicker{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:14px}
.hv-copy .hv-kicker b{color:var(--color-brass-text);font-weight:600}
.hv-copy h1{font-size:clamp(34px,4.6vw,54px);font-weight:800;line-height:1.05;letter-spacing:-.022em}
.hv-copy .lede{font-size:18.5px;line-height:1.6;margin-top:16px;color:var(--ink)}
.hv-copy .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.hv-copy .proofline{margin-top:22px;padding-top:14px;border-top:var(--border-w) solid var(--border);font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 18px}
.hv-copy .proofline b{color:var(--ink);font-weight:500}
.hv-ui{position:absolute;z-index:6;left:var(--gutter);right:var(--gutter);bottom:18px;display:flex;align-items:center;gap:16px}
.hv-caption{background:rgba(24,23,22,.85);color:#F7F4EE;font-family:var(--font-head);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:var(--radius);white-space:nowrap;flex:0 1 auto;min-width:0}
.hv-bars{display:flex;gap:6px;flex:1;max-width:340px}
.hv-bars i{flex:1;height:2px;background:rgba(247,244,238,.32)}
.hv-bars i.done{background:#D9B078}
.hv-bars i.now{background:rgba(247,244,238,.32);position:relative;overflow:hidden}
.hv-bars i.now::after{content:"";position:absolute;inset:0;background:#D9B078;transform-origin:left;animation:hv-fill 5.5s linear forwards}
@keyframes hv-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hv-pause{margin-left:auto;background:rgba(24,23,22,.85);color:#F7F4EE;border:var(--border-w) solid rgba(247,244,238,.4);border-radius:var(--radius);min-height:var(--touch);min-width:var(--touch);padding:8px 14px;font-size:13.5px;font-weight:500;white-space:nowrap;flex:0 0 auto}
.hv-pause:hover{background:rgba(24,23,22,.96)}
.hv-credit{font-size:12.5px;color:var(--muted);padding:10px var(--gutter) 0;max-width:var(--wrap);margin:0 auto}
.hv-credit a{font-size:12.5px}
@media(max-width:819px){
  .hv-stage{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;background:var(--color-page)}
  .hv-poster,.hv-film{position:absolute;inset:0;height:36svh;min-height:280px}
  .hv-shade{display:none}
  .hv-copy{position:relative;left:auto;top:auto;transform:none;max-width:none;margin:max(36svh,280px) 12px 0;border:var(--border-w) solid var(--ink);padding:20px 20px 16px;z-index:5}
  .hv-copy h1{font-size:30px}
  .hv-copy .lede{font-size:16.5px;margin-top:10px}
  .hv-copy .actions{margin-top:16px}
  .hv-copy .actions .btn{flex:1}
  .hv-copy .proofline{display:none}
  .hv-ui{left:12px;right:12px;bottom:auto;top:calc(max(36svh,280px) - 12px);transform:translateY(-100%);align-items:flex-end}
  .hv-caption{white-space:normal;font-size:12px;letter-spacing:.08em;line-height:1.4;padding:8px 10px}
  .hv-bars{display:none}
}
@media (prefers-reduced-motion: reduce){
  .hv-stage{height:min(84svh,660px)}
  .hv-pause{display:none}
}

.hero-photos{display:grid;gap:var(--gap);margin-top:var(--space-7);padding-bottom:var(--space-8)}
@media(min-width:900px){.hero-photos{grid-template-columns:7fr 5fr;gap:28px;padding-bottom:var(--space-9)}}
.hero-photos figure{margin:0}
.hero-photos .offset{margin-top:0}
@media(min-width:900px){.hero-photos .offset{margin-top:72px}}
.hero-photos img{width:100%;object-fit:cover}
.hero-main img{aspect-ratio:4/5}
@media(min-width:900px){.hero-main img{aspect-ratio:3/2}}
.hero-photos .offset img{aspect-ratio:4/5}
.cap{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.cap b{color:var(--ink);font-weight:500}
/* Point-of-use licence flag (Stage 4): a quiet line wherever a view
   relies on the seven unverified library photographs, so no photo
   appears anywhere without its status stated or one tap away. */
.photo-note{font-size:13.5px;color:var(--muted);line-height:1.55;margin-top:14px;max-width:64ch}
.photo-note b{color:var(--warn);font-weight:600}
.viewtabs{display:flex;gap:22px;margin-top:14px;flex-wrap:wrap}
.viewtabs button{background:none;border:0;border-bottom:var(--border-w-strong) solid transparent;font-size:14.5px;font-weight:500;color:var(--muted);padding:6px 0;min-height:var(--touch);transition:color var(--dur-1) ease,border-color var(--dur-1) ease}
.viewtabs button:hover{color:var(--ink)}
.viewtabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--blue)}

.zone{padding:var(--section) 0}
/* Rhythm, not repetition: the two full-bleed bands breathe a step more
   than a standard zone; zones that continue the previous one opt out
   with padding-top:0 inline, as before. */
.zone-ink,.zone-diagram{padding:calc(var(--section) + var(--space-4)) 0}
.zone-head{max-width:620px;margin-bottom:var(--space-6)}
.zone-head h2,.diagram-split h2,.finder-split h2{font-size:var(--text-h2);font-weight:700;line-height:1.12;letter-spacing:-.018em}
@media(min-width:768px){.zone-head h2,.diagram-split h2,.finder-split h2{font-size:var(--text-h2-lg)}}
.zone-head p{color:var(--muted);margin-top:var(--space-3);font-size:17px}
.zone-head .label{margin-bottom:var(--space-3);display:block}

/* Featured cuts — editorial entries, not cards: the photograph sits
   directly on the ivory page under a single charcoal rule, then the
   name, one line of explanation and the two facts that decide it
   (upkeep, best for). The whole entry is the link; nothing lifts,
   glows or scales. */
.cuts-grid{display:grid;gap:var(--gap)}
@media(min-width:640px){.cuts-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.cuts-grid{grid-template-columns:repeat(3,1fr)}}
.cut-card{display:flex;flex-direction:column;background:transparent;border:0;border-top:var(--border-w-strong) solid var(--ink);padding-top:16px;text-decoration:none;color:var(--ink)}
.cut-card:hover{color:var(--ink)}
.cut-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cut-card .cc-body{padding:14px 0 4px;display:flex;flex-direction:column;gap:6px;flex:1}
.cut-card h3{font-size:20px;font-weight:700;line-height:1.25}
.cut-card:hover h3{text-decoration:underline;text-underline-offset:3px}
.cut-card p{color:var(--muted);font-size:15px;line-height:1.55}
.cut-card .cc-meta{margin-top:auto;padding-top:12px;font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 18px}
.cut-card .cc-meta b{color:var(--ink);font-weight:500}

/* Tool rows — the finder's question rows, as links */
.qrows a{color:inherit;text-decoration:none;display:block}
.qrows a:hover b{text-decoration:underline;text-underline-offset:3px}

/* Final homepage statement — a practical next step, not a sales pitch */
.cta-final{border-top:var(--border-w-strong) solid var(--ink);padding-top:30px;max-width:760px}
.cta-final h2{font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.018em}
@media(min-width:768px){.cta-final h2{font-size:38px}}
.cta-final p{color:var(--muted);margin-top:12px;max-width:54ch}
.cta-final .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
@media(max-width:560px){.cta-final .actions{flex-direction:column;align-items:stretch}}

/* Mobile bottom navigation — the four visitor jobs, always within
   thumb reach under 820px. Quiet surface, one rule on top; the current
   job is blue, the rest are ink. On the guide it steps aside for the
   guide's own bar (barber wording + finder). */
.bottomnav{display:none}
@media(max-width:819px){
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:65;background:var(--surface);border-top:var(--border-w) solid var(--ink);padding-bottom:env(safe-area-inset-bottom)}
  body.show-guidebar .bottomnav{display:none}
  .bottomnav a{flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;font-family:var(--font-head);font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none;position:relative}
  .bottomnav a:active{background:var(--bg-2)}
  .bottomnav a[aria-current="page"]{color:var(--blue)}
  .bottomnav a[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:2px;background:var(--blue)}
  footer.site{padding-bottom:104px}
}

/* Diagram zone — the one structural grey band */
.zone-diagram{background:var(--bg-2)}
.diagram-split{display:grid;gap:36px;align-items:start}
@media(min-width:900px){.diagram-split{grid-template-columns:4fr 7fr;gap:56px}}
.diagram-split .txt p{color:var(--muted);margin-top:14px;max-width:44ch}
.diagram-plain svg{width:100%;height:auto;display:block}
.diagram-plain figcaption{margin-top:14px;color:var(--muted);font-size:14.5px;max-width:52ch}
.seg{display:inline-flex;border:var(--border-w) solid var(--ink);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin-top:22px}
.seg button{background:var(--surface);border:0;border-right:var(--border-w) solid var(--ink);padding:10px 18px;min-height:var(--touch);font-size:15px;font-weight:500;color:var(--ink)}
.seg button:last-child{border-right:0}
.seg button{transition:background-color var(--dur-1) ease,color var(--dur-1) ease}
.seg button:hover{background:var(--bg-2)}
.seg button[aria-pressed="true"]{background:var(--color-selected);color:var(--color-on-action)}
.seg button[aria-pressed="true"]:hover{background:var(--color-selected)}
.dlabel{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.08em;fill:var(--ink)}
.dlabel-blue{fill:var(--blue)}

/* Ink band — the barber signature */
.zone-ink{background:var(--color-action);color:var(--on-ink)}
.zone-ink .label{color:var(--on-ink-dim)}
.barber-quote{font-family:var(--font-head);font-weight:600;font-size:25px;line-height:1.38;letter-spacing:-.01em;color:var(--color-on-action);max-width:22em;margin-top:18px}
@media(min-width:768px){.barber-quote{font-size:34px}}
.barber-grid{display:grid;gap:28px;margin-top:36px;padding-top:28px;border-top:var(--border-w) solid var(--color-forest-soft)}
@media(min-width:900px){.barber-grid{grid-template-columns:7fr 4fr;gap:56px}}
.barber-grid ol{margin:0;padding:0;list-style:none;counter-reset:z}
.barber-grid li{counter-increment:z;display:flex;gap:16px;padding:10px 0;font-size:15.5px;color:var(--on-ink);align-items:baseline}
.barber-grid li::before{content:counter(z);font-family:var(--font-head);font-weight:700;color:var(--color-on-dark-accent);font-size:15px;min-width:18px}
.barber-grid li b{color:var(--color-on-action);font-weight:500}
.barber-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
@media(min-width:900px){.barber-actions{align-items:flex-start}}
.copied{font-size:13.5px;color:var(--color-on-dark-success);min-height:20px}

/* Get / Skip — open editorial columns */
.verdict-cols{display:grid;gap:36px}
@media(min-width:900px){.verdict-cols{grid-template-columns:1fr 1fr;gap:0}}
.verdict-col h3{font-size:22px;font-weight:600;margin:10px 0 14px}
@media(min-width:900px){
  .verdict-col{padding-right:48px}
  .verdict-col + .verdict-col{border-left:var(--border-w) solid var(--border);padding-left:48px;padding-right:0}
}
.verdict-col ul{margin:0;padding:0;list-style:none}
.verdict-col li{position:relative;padding:9px 0 9px 22px;font-size:16px;border-bottom:var(--border-w) solid var(--border)}
.verdict-col li:last-child{border-bottom:0}
.verdict-col li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px}
.verdict-col.get li::before{background:var(--success)}
.verdict-col.skip li::before{background:var(--warn)}
.verdict-col li small{display:block;color:var(--muted);font-size:13.5px;line-height:1.5}

/* Comparison — open table, verdict as a statement */
.cmp-table{width:100%;border-collapse:collapse;font-size:15.5px;border-top:var(--border-w-strong) solid var(--ink)}
.cmp-table th,.cmp-table td{border-bottom:var(--border-w) solid var(--border);padding:13px 14px 13px 0;text-align:left;vertical-align:top}
.cmp-table thead th{font-family:var(--font-head);font-weight:700;font-size:16.5px;padding-top:16px}
.cmp-table th[scope="row"]{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:16px}
.cmp-stack{display:none}
@media(max-width:639px){
  .cmp-table{display:none}
  .cmp-stack{display:block}
  .cmp-stack .cs{padding:16px 0;border-top:var(--border-w) solid var(--border)}
  .cmp-stack ul{margin:8px 0 0;padding-left:20px}
  .cmp-stack li{margin:4px 0;font-size:15.5px}
}
.rec-line{margin-top:28px;padding-top:22px;border-top:var(--border-w) solid var(--border);font-size:19px;line-height:1.55;max-width:64ch}
.rec-line b{font-family:var(--font-head);font-weight:700}
.cmp-heads{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:560px;margin-bottom:28px}
.cmp-heads figure{margin:0}
.cmp-heads figcaption{font-size:13.5px;color:var(--muted);margin-top:6px}
.cmp-heads .nm{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink)}

/* Texture gallery — photography carries the warmth */
.texrow{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:900px){.texrow{grid-template-columns:repeat(4,1fr);gap:20px}}
.texrow figure{margin:0}
.texrow img{width:100%;aspect-ratio:4/5;object-fit:cover}
.texrow figcaption{padding-top:10px}
.texrow figcaption b{font-family:var(--font-head);font-weight:600;font-size:15.5px;display:block}
.texrow figcaption small{color:var(--muted);font-size:13px;line-height:1.45;display:block}

/* Finder band */
.finder-split{display:grid;gap:36px}
@media(min-width:900px){.finder-split{grid-template-columns:5fr 6fr;gap:64px;align-items:start}}
.finder-split .txt p{color:var(--muted);margin-top:14px;max-width:46ch}
.qrows{list-style:none;margin:0;padding:0;counter-reset:q}
.qrows li{counter-increment:q;display:flex;gap:20px;align-items:baseline;padding:18px 0;border-top:var(--border-w) solid var(--border)}
.qrows li:last-child{border-bottom:var(--border-w) solid var(--border)}
.qrows li::before{content:"0" counter(q);font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink)}
.qrows b{font-family:var(--font-head);font-weight:600;font-size:17.5px;display:block}
.qrows small{color:var(--muted);font-size:14px;line-height:1.5;display:block}

/* Guide index — editorial rows, not cards */
.glist{border-bottom:var(--border-w) solid var(--border)}
.grow{display:grid;grid-template-columns:92px 1fr;gap:18px;padding:20px 0;border-top:var(--border-w) solid var(--border);text-decoration:none;color:var(--ink);align-items:center;transition:background-color var(--dur-1) ease}
@media(min-width:768px){.grow{grid-template-columns:150px 1fr auto;gap:28px;padding:24px 0}}
.grow:hover{color:var(--ink);background:var(--bg-2)}
.grow:hover b{text-decoration:underline;text-underline-offset:3px}
.grow img{width:92px;height:92px;object-fit:cover}
@media(min-width:768px){.grow img{width:150px;height:112px}}
.grow b{font-family:var(--font-head);font-weight:700;font-size:18.5px;display:block;line-height:1.3}
@media(min-width:768px){.grow b{font-size:21px}}
.grow small{color:var(--muted);font-size:14px;line-height:1.5;display:block;margin-top:2px}
.grow .why{display:none;font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
@media(min-width:768px){.grow .why{display:block}}

/* ============ DISCOVERY ROUTES — ============
   Six ways readers actually arrive, as open ruled rows. The situation is
   the heading; the destination and the reason sit under it. No cards, no
   filter dashboard — the whole row is the link. */
.routes{display:grid;border-bottom:var(--border-w) solid var(--border)}
@media(min-width:900px){.routes{grid-template-columns:1fr 1fr;column-gap:64px}}
.route{display:grid;grid-template-columns:1fr auto;gap:2px 18px;padding:19px 0;border-top:var(--border-w) solid var(--border);text-decoration:none;color:var(--ink);align-items:start;transition:background-color var(--dur-1) ease}
.route b{font-family:var(--font-head);font-weight:600;font-size:18px;display:block;line-height:1.3}
.route small{color:var(--muted);font-size:14.5px;line-height:1.55;display:block;max-width:46ch;margin-top:2px}
.route .arr{color:var(--blue);font-size:20px;line-height:1.35}
.route:hover{color:var(--ink);background:var(--bg-2)}
.route:hover b{text-decoration:underline;text-underline-offset:3px}

/* Learning-path entries are links when the path sits outside the guide */
.path li a{color:inherit;text-decoration:none;padding:11px 0;margin:-11px 0}
.path li a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* ============ ARCHIVE / GUIDE INDEX — ============
   An editorial index, not a blog archive. One featured flagship, then
   rows whose treatment differs by kind: photographs for guides, paired
   diagrams for comparisons, a typographic thumb for practical pieces.
   Filters are two quiet text rows — type and hair type — nothing more. */
#view-archive .wrap{padding-bottom:76px}
.arc-head{max-width:760px}
.arc-head h1{font-size:clamp(32px,10vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.06;margin-top:10px}
@media(min-width:768px){.arc-head h1{font-size:48px}}
.arc-lede{font-size:18px;line-height:1.65;margin-top:16px;max-width:62ch}
.afilters{margin-top:30px;border-top:var(--border-w-strong) solid var(--ink)}
.afrow{display:flex;flex-wrap:wrap;gap:2px 18px;align-items:center;padding:9px 0;border-bottom:var(--border-w) solid var(--border)}
.afrow .flabel{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-width:76px}
.afrow button{background:none;border:0;border-bottom:var(--border-w-strong) solid transparent;font-size:15px;font-weight:500;color:var(--muted);padding:6px 2px;min-height:var(--touch);transition:color var(--dur-1) ease,border-color var(--dur-1) ease}
.afrow button:hover{color:var(--ink)}
.afrow button[aria-pressed="true"]{color:var(--blue);border-bottom-color:var(--blue)}
.afeat{display:grid;gap:22px;margin-top:30px;padding:28px 0 30px;border-top:var(--border-w) solid var(--border);border-bottom:var(--border-w) solid var(--border)}
.afeat[hidden]{display:none}
@media(min-width:900px){.afeat{grid-template-columns:6fr 5fr;gap:44px;align-items:start}}
.afeat figure{margin:0}
.afeat img{width:100%;aspect-ratio:3/2;object-fit:cover}
.afeat h2{font-size:27px;font-weight:700;line-height:1.15;letter-spacing:-.015em;margin:10px 0 10px}
@media(min-width:768px){.afeat h2{font-size:31px}}
.afeat h2 a{color:var(--ink);text-decoration:none}
.afeat h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.afeat .dek{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:48ch}
.ameta{display:block;font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}
.afeat .ameta{margin-top:14px}
.alist{margin-top:6px}
.arow{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:22px 0;border-bottom:var(--border-w) solid var(--border);text-decoration:none;color:var(--ink);align-items:center;transition:background-color var(--dur-1) ease}
.arow[hidden]{display:none}
@media(min-width:768px){.arow{grid-template-columns:168px 1fr auto;gap:28px;padding:26px 0}}
.arow:hover{color:var(--ink);background:var(--bg-2)}
.arow:hover b{text-decoration:underline;text-underline-offset:3px}
.arow .athumb img{width:96px;height:96px;object-fit:cover}
@media(min-width:768px){.arow .athumb img{width:168px;height:126px}}
.athumb--cmp{display:flex;gap:8px;background:var(--bg-2);padding:10px 8px}
.athumb--cmp .cmpcell{flex:1;text-align:center}
.athumb--cmp svg{width:100%;height:auto}
.athumb--cmp i{font-style:normal;font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-top:4px}
.athumb--txt{background:var(--bg-2);height:96px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.3;color:var(--ink);padding:8px}
@media(min-width:768px){.athumb--txt{height:126px;font-size:17px}}
.arow b{font-family:var(--font-head);font-weight:700;font-size:18.5px;display:block;line-height:1.3;margin-top:5px}
@media(min-width:768px){.arow b{font-size:21px}}
.arow small{color:var(--muted);font-size:14.5px;line-height:1.55;display:block;margin-top:3px;max-width:58ch}
.arow .arr{display:none;color:var(--blue);font-size:22px}
@media(min-width:768px){.arow .arr{display:block}}
.arc-more{display:flex;gap:18px;align-items:center;margin-top:28px;flex-wrap:wrap}
.arc-empty{padding:26px 0 6px}
.arc-empty[hidden]{display:none}
.arc-empty p{max-width:56ch}
.arc-cats{margin-top:56px}
.arc-cats ul{list-style:none;margin:18px 0 0;padding:0;border-top:var(--border-w) solid var(--border)}
.arc-cats li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:var(--border-w) solid var(--border)}
.arc-cats li a{font-weight:600;text-decoration:none;color:var(--ink)}
.arc-cats .ameta{margin-top:0}

/* ============ COMPARE / TOOLS / GALLERY VIEWS ============
   The three remaining visitor jobs get their own pages, built from the
   same pieces as the rest of the site: the archive page-head, the ruled
   picker row, the open comparison table, the ink barber panel. Forms
   use native selects and a date input — 16px text so phone browsers do
   not zoom on focus, full-width, one ink border. */
.pickrow{display:flex;flex-wrap:wrap;gap:2px 18px;align-items:center;padding:9px 0;border-top:var(--border-w-strong) solid var(--ink);border-bottom:var(--border-w) solid var(--border);margin-top:30px}
.pickrow .flabel{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-width:76px}
.pickrow button{background:none;border:0;border-bottom:var(--border-w-strong) solid transparent;font-size:15px;font-weight:500;color:var(--muted);padding:6px 2px;min-height:var(--touch);transition:color var(--dur-1) ease,border-color var(--dur-1) ease}
.pickrow button:hover{color:var(--ink)}
.pickrow button[aria-pressed="true"]{color:var(--blue);border-bottom-color:var(--blue)}
.cmp-title{font-size:26px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:34px 0 20px}
@media(min-width:768px){.cmp-title{font-size:30px}}
.cmp-guides{margin-top:20px;display:flex;gap:8px 28px;flex-wrap:wrap;font-size:16px}
.field{display:grid;gap:6px;margin-top:18px}
.field label{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field select,.field input[type="date"]{font-family:var(--font-body);font-size:16px;min-height:var(--btn-h);padding:10px 12px;border:var(--border-w) solid var(--ink);border-radius:var(--radius);background:var(--surface);color:var(--ink);width:100%}
.panel{border:var(--border-w) solid var(--ink);border-radius:var(--radius);background:var(--surface);padding:var(--space-5) var(--pad-card);margin-top:22px}
@media(min-width:768px){.panel{padding:var(--space-5) var(--space-6)}}
.panel h3{font-size:20px;font-weight:700}
.panel .out{font-size:17px;line-height:1.6;margin-top:16px;padding-top:16px;border-top:var(--border-w) solid var(--border)}
.galgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
@media(min-width:900px){.galgrid{grid-template-columns:repeat(3,1fr);gap:20px}}
.galgrid figure{margin:0}
.galgrid figure[hidden]{display:none}
.galgrid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.galgrid figcaption{padding-top:10px}
.galgrid figcaption b{font-family:var(--font-head);font-weight:600;font-size:15.5px;display:block}
.galgrid figcaption small{color:var(--muted);font-size:13px;line-height:1.45;display:block}
.galgrid figcaption a{font-size:13.5px}
/* Gallery as a library, not a grid dump: a ruled category index with
   real counts (an empty shelf is shown, not hidden), a status line
   that reports what the filter actually found, and shelves of uneven
   weight — the flagship photograph wide, process photography last.
   Card text is a stack of distinct jobs: kicker (its categories),
   name, what to look for, then guide + licence-record links. */
.gal-index{margin-top:30px;border-top:var(--border-w-strong) solid var(--ink)}
.gal-irow{display:flex;flex-wrap:wrap;gap:2px 18px;align-items:center;padding:9px 0;border-bottom:var(--border-w) solid var(--border)}
.gal-irow .flabel{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-width:118px}
.gal-irow button{background:none;border:0;border-bottom:var(--border-w-strong) solid transparent;font-size:15px;font-weight:500;color:var(--muted);padding:6px 2px;min-height:var(--touch);transition:color var(--dur-1) ease,border-color var(--dur-1) ease}
.gal-irow button:hover{color:var(--ink)}
.gal-irow button[aria-pressed="true"]{color:var(--blue);border-bottom-color:var(--blue)}
.gal-irow .gal-n{font-size:12.5px;color:var(--muted);margin-left:2px}
.gal-irow button[aria-pressed="true"] .gal-n{color:var(--blue)}
.gal-status{margin-top:18px;font-size:14.5px;color:var(--muted);max-width:64ch}
@media(min-width:900px){
  .galgrid{grid-template-columns:repeat(6,1fr);gap:22px}
  .galgrid figure{grid-column:span 2}
  .galgrid figure.gal--wide{grid-column:span 4}
  .galgrid figure.gal--half{grid-column:span 3}
  .galgrid figure.gal--wide img{aspect-ratio:16/10}
  .galgrid figure.gal--half img{aspect-ratio:4/3}
}
@media(max-width:899px){
  .galgrid figure.gal--wide{grid-column:1 / -1}
  .galgrid figure.gal--wide img{aspect-ratio:4/3}
}
.gal-kicker{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:5px}
.galgrid figcaption small{font-size:13.5px;line-height:1.55}
.gal-links{display:block;margin-top:9px;font-size:13.5px;line-height:1.6}
.gal-links a{white-space:normal}
/* Per-photograph licence records: each gallery card links to its own
   record below. The target highlight confirms the reader landed on
   the record for that exact photograph. */
.lic-record{scroll-margin-top:84px}
.lic-record:target{background:var(--color-selected-bg)}
.lic-status{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--warn)}
/* The flagship photograph set, once it sits inside a headed zone
   instead of directly under the hero, loses the hero spacing. */
.zone .hero-photos{margin-top:0;padding-bottom:0}
.gal-teaser-index{display:flex;align-items:flex-start}
.gal-teaser-index figcaption{padding-top:0}

/* ============ DECISION SUMMARY (functional — kept as one ruled block) ============ */
.decision{border:var(--border-w) solid var(--ink);border-radius:var(--radius);background:var(--surface)}
.decision .d-head{padding:var(--space-4) var(--pad-card);border-bottom:var(--border-w) solid var(--border);display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.decision .d-head b{font-family:var(--font-head);font-weight:700;font-size:18px}
.decision dl{margin:0;display:grid}
@media(min-width:640px){.decision dl{grid-template-columns:1fr 1fr}}
.decision .row{padding:var(--space-3) var(--pad-card);border-bottom:var(--border-w) solid var(--border)}
@media(min-width:640px){.decision .row:nth-child(odd){border-right:var(--border-w) solid var(--border)}}
.decision dt{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.decision dd{margin:2px 0 0;font-size:16px}
.decision .row.skip{background:var(--warn-wash)}
.decision .row.skip dt{color:var(--warn)}

/* ============ GUIDE PAGE ============ */
.crumbs{font-size:13.5px;color:var(--muted);padding:22px 0 0}
.crumbs a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--touch)}
.crumbs a:hover{color:var(--blue);text-decoration:underline}
.guide-switch{display:flex;flex-wrap:wrap;gap:2px 20px;margin-top:18px;padding:10px 0;border-top:var(--border-w) solid var(--border);border-bottom:var(--border-w) solid var(--border)}
.guide-switch a{display:inline-flex;align-items:center;min-height:var(--touch);font-size:14.5px;font-weight:500;color:var(--muted);text-decoration:none;border-bottom:var(--border-w-strong) solid transparent;padding:2px 1px}
.guide-switch a:hover{color:var(--ink)}
.guide-switch a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}
.guide-head{padding-top:18px}
.guide-head .cutname{font-size:clamp(28px,8.6vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:10px 0 12px}
@media(min-width:768px){.guide-head .cutname{font-size:40px}}
.answer{font-size:19px;line-height:1.6;max-width:34em}
@media(min-width:768px){.answer{font-size:20px}}
/* Byline strip — author / reviewer / review date, one quiet ruled row so
   trust information reads as part of the article, not a badge cluster */
.byline{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:20px;padding:13px 0;border-top:var(--border-w) solid var(--border);border-bottom:var(--border-w) solid var(--border)}
.byline .by-item{display:flex;align-items:baseline;gap:8px;font-size:14px}
.byline .by-item .label{font-size:11px}
.byline .by-item b{font-family:var(--font-head);font-weight:600;font-size:14.5px}
.byline .by-item small{color:var(--muted);font-size:13px}
.guide-split{display:grid;gap:32px;margin-top:36px;align-items:start}
@media(min-width:900px){.guide-split{grid-template-columns:6fr 5fr;gap:48px}}
.guide-split figure{margin:0}
.guide-split .photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(min-width:900px){.guide-split .photo{margin-top:56px}}
.article h2{font-size:26px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:var(--space-7) 0 var(--space-3)}
.article h2:first-child{margin-top:48px}
.article h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:32px 0 8px}
.article p.body{margin:0 0 var(--space-4);max-width:66ch;font-size:17px;line-height:1.7}
.article figure{margin:var(--space-6) 0}
.article figcaption{color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:8px}
.article figcaption b{color:var(--ink);font-weight:500}
/* ============ GUIDE — ============ */
#view-guide [id]{scroll-margin-top:84px}
/* Table of contents — an open numbered index between the visual summary
   and the body. No box, no card: a rule, a label, two quiet columns. */
.toc{margin-top:48px;border-top:var(--border-w-strong) solid var(--ink);padding-top:16px}
.toc ol{list-style:none;margin:14px 0 0;padding:0;counter-reset:toc}
@media(min-width:768px){.toc ol{columns:2;column-gap:48px}}
.toc li{counter-increment:toc;break-inside:avoid}
.toc a{display:flex;gap:12px;align-items:baseline;padding:8px 0;min-height:var(--touch);color:var(--ink);text-decoration:none;font-size:15.5px;border-bottom:var(--border-w) solid var(--border)}
.toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-head);font-weight:700;font-size:12.5px;color:var(--blue)}
.toc a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
/* The one-sentence takeaway, set as a statement — not a quote card */
.keyline{font-family:var(--font-head);font-weight:600;font-size:20px;line-height:1.45;letter-spacing:-.01em;border-top:var(--border-w-strong) solid var(--color-brass);padding-top:16px;margin:34px 0 6px;max-width:32em}
/* Four views of one cut — photography as a single set */
.viewset{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 8px}
@media(min-width:768px){.viewset{grid-template-columns:repeat(4,1fr);gap:16px}}
.viewset figure{margin:0}
.viewset img{width:100%;aspect-ratio:4/5;object-fit:cover}
.viewset figcaption{margin-top:8px}
/* Hair-type and maintenance rows — ruled definition rows, no boxes */
.trow{display:grid;gap:2px;padding:15px 0;border-top:var(--border-w) solid var(--border)}
@media(min-width:640px){.trow{grid-template-columns:130px 1fr;gap:20px}}
.trow:last-child{border-bottom:var(--border-w) solid var(--border)}
.trow b{font-family:var(--font-head);font-weight:600;font-size:16px}
.trow p{font-size:15.5px;line-height:1.6;color:var(--ink)}
.trow .when{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
/* Decision summary in the guide: the skip row earns a full-width line */
@media(min-width:640px){
  #view-guide .decision .row.skip{grid-column:1 / -1;border-right:0}
  #view-guide .decision .row.ask{grid-column:1 / -1}
}
/* Get / Skip inside the guide: each column opens with its own rule, in
   its own signal colour, so the two verdicts carry equal weight */
#view-guide .verdict-col{border-top:var(--border-w-strong) solid var(--border);padding-top:18px}
#view-guide .verdict-col.get{border-top-color:var(--success)}
#view-guide .verdict-col.skip{border-top-color:var(--warn)}
/* Author / reviewer — the one soft-grey band in the article */
.people-band{background:var(--bg-2);padding:var(--space-5) var(--space-5) var(--space-1);margin-top:var(--space-7)}
.people-band .person:last-child{padding-bottom:20px}
/* Barber band inside the guide: full wrap width, not a card */
.guide-barber{margin-top:var(--space-7);background:var(--ink);color:var(--on-ink);padding:var(--space-6) var(--space-5);border-radius:var(--radius)}
@media(min-width:768px){.guide-barber{padding:var(--space-7)}}
.guide-barber .label{color:var(--on-ink-dim)}
.guide-barber .barber-quote{font-size:23px;margin-top:14px}
@media(min-width:768px){.guide-barber .barber-quote{font-size:28px}}
.guide-barber ol{margin:22px 0 0;padding:0;list-style:none;counter-reset:z}
.guide-barber li{counter-increment:z;display:flex;gap:14px;padding:7px 0;font-size:15.5px;align-items:baseline}
.guide-barber li::before{content:counter(z);font-family:var(--font-head);font-weight:700;color:var(--color-on-dark-accent);min-width:16px}
.guide-barber li b{color:var(--color-on-action);font-weight:500}
.guide-barber .b-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
/* People — open rows */
.person{display:flex;gap:18px;padding:22px 0;border-top:var(--border-w) solid var(--border);align-items:flex-start}
.person h3{font-size:17px;font-weight:600;margin:4px 0 2px}
.person p{font-size:14.5px;color:var(--muted)}
/* FAQ — open, ruled */
.faq{border-top:var(--border-w) solid var(--border)}
.faq details{border-bottom:var(--border-w) solid var(--border)}
.faq summary{font-family:var(--font-head);font-weight:600;font-size:17px;padding:18px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;min-height:var(--touch);align-items:center;transition:color var(--dur-1) ease}
.faq summary:hover{color:var(--blue)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-weight:700;font-size:20px;transition:transform var(--dur-2) ease}
.faq details[open ] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 20px;font-size:15.5px;max-width:62ch}
/* Learning path — open numbered list */
.path ol{list-style:none;margin:14px 0 0;padding:0}
.path li{display:flex;gap:14px;padding:12px 0;border-top:var(--border-w) solid var(--border);font-size:15.5px;align-items:baseline}
.path li .st{font-family:var(--font-head);font-weight:700;font-size:13px;min-width:30px;color:var(--muted)}
.path li.done{color:var(--muted)}
.path li.done .st{color:var(--success)}
.path li.now{font-weight:500}
.path li.now .st{color:var(--blue)}
.path .bar{height:5px;background:var(--bg-2);margin-top:16px}
.path .bar i{display:block;height:100%;background:var(--blue)}
.guidebar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--surface);border-top:var(--border-w) solid var(--ink);display:none;padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px}
.guidebar .btn{flex:1}
body.show-guidebar .guidebar{display:flex}
@media(min-width:820px){body.show-guidebar .guidebar{display:none}}

/* ============ FINDER ============ */
.finder{max-width:var(--read);margin:0 auto;padding:var(--space-7) var(--gutter) var(--space-9)}
.finder h1{font-size:clamp(30px,9.5vw,36px);font-weight:800;letter-spacing:-.02em;margin:12px 0 10px}
@media(min-width:768px){.finder h1{font-size:44px}}
.finder .prog{display:flex;gap:6px;margin:22px 0 30px}
.finder .prog i{flex:1;height:5px;background:var(--bg-2)}
.finder .prog i.on{background:var(--blue)}
.fstep h2{font-size:24px;font-weight:700;margin:8px 0 4px}
.optgrid{display:grid;gap:10px;margin-top:18px}
@media(min-width:640px){.optgrid{grid-template-columns:1fr 1fr}}
.opt{border:var(--border-w) solid var(--border);background:var(--surface);border-radius:var(--radius);padding:var(--space-4) var(--pad-card);text-align:left;min-height:var(--touch);width:100%;transition:border-color var(--dur-1) ease,background-color var(--dur-1) ease}
.opt:hover{border-color:var(--ink)}
.opt:active{background:var(--bg-2)}
.opt b{font-family:var(--font-head);font-weight:600;font-size:17px;display:block}
.opt small{color:var(--muted);font-size:13.5px;line-height:1.45;display:block}
/* Selected state stays inside the 1px border system: the selected
   token recolours the border and the surface, the width never changes. */
.opt[aria-pressed="true"]{border-color:var(--color-selected);background:var(--color-selected-bg)}
.finder .f-nav{display:flex;gap:8px;margin-top:26px}
.finder .f-nav .btn{flex:1}
.result-diagram{max-width:320px;margin:20px auto}
.finder .guide-barber{margin-top:20px}

/* ============ FOOTER —  ============
   The closing experience, not a link dump. Deep ink is used once, as the
   final band of the editorial rhythm, with a single brass rule on
   its top edge — the one place brass is allowed to run full width. Inside: a brand statement
   and a connection block first, then three deliberately unequal groups —
   Explore (the visitor jobs), Learn (guides, hair types, face shapes,
   maintenance) and About — then one quiet legal line. No columns for their own
   sake, no cards, no repeated column of identical weight. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
footer.site{background:var(--ink);color:var(--on-ink);border-top:var(--border-w-accent) solid var(--color-brass);padding:var(--space-7) 0 var(--space-6);margin-top:0}
@media(min-width:768px){footer.site{padding:var(--space-8) 0 var(--space-6)}}
footer.site a,footer.site button{border-radius:var(--radius)}
footer.site a:focus-visible,footer.site button:focus-visible{outline:var(--border-w-strong) solid var(--color-on-dark-accent);outline-offset:3px}
/* — Row 1: what FreshTapers is + how to stay connected — */
.foot-top{display:grid;gap:40px;padding-bottom:44px}
@media(min-width:960px){.foot-top{grid-template-columns:7fr 5fr;gap:72px;padding-bottom:56px}}
footer.site .wordmark{color:var(--color-on-action);font-size:30px;text-decoration:none;display:inline-flex;min-height:var(--touch);align-items:center}
footer.site .wordmark span{color:var(--color-on-dark-accent)}
footer.site .wordmark:hover{color:var(--color-on-action)}
.foot-statement{font-family:var(--font-head);font-weight:800;font-size:26px;line-height:1.22;letter-spacing:-.015em;color:var(--color-on-action);max-width:20em;margin-top:6px}
@media(min-width:768px){.foot-statement{font-size:31px}}
footer.site .blurb{color:var(--on-ink);font-size:15.5px;max-width:52ch;margin-top:14px;line-height:1.65}
.foot-trust{color:var(--on-ink-dim);font-size:14px;max-width:52ch;margin-top:14px;line-height:1.6;padding-left:14px;border-left:var(--border-w-strong) solid var(--color-brass)}
.foot-connect{border-top:var(--border-w) solid var(--ink-soft);padding-top:28px}
@media(min-width:960px){.foot-connect{border-top:0;border-left:var(--border-w) solid var(--ink-soft);padding:6px 0 0 48px}}
.foot-connect h2{font-size:20px;font-weight:700;color:var(--color-on-action);margin-top:10px}
.foot-connect p{color:var(--on-ink-dim);font-size:14.5px;line-height:1.6;margin-top:8px;max-width:44ch}
.foot-connect .label{color:var(--on-ink-dim)}
.foot-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
@media(min-width:480px){.foot-actions{flex-direction:row;flex-wrap:wrap}}
.foot-actions .btn{flex:1 1 auto}
@media(min-width:480px){.foot-actions .btn{flex:0 1 auto}}
/* — Row 2: navigation, three unequal groups — */
.foot-nav{display:grid;gap:0;border-top:var(--border-w) solid var(--ink-soft);padding-top:8px}
@media(min-width:640px){.foot-nav{grid-template-columns:1fr 1fr;column-gap:48px}}
@media(min-width:960px){.foot-nav{grid-template-columns:4fr 5fr 4fr 5fr;column-gap:48px}}
.foot-group{padding:22px 0 6px}
.foot-group h3{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-dim);display:flex;align-items:center;gap:12px}
.foot-group h3::after{content:"";flex:1;height:1px;background:var(--ink-soft)}
.foot-group .g-note{color:var(--on-ink-dim);font-size:13.5px;line-height:1.55;margin-top:10px;max-width:34ch}
.foot-links{list-style:none;margin:10px 0 0;padding:0}
.foot-links a{display:flex;align-items:center;min-height:var(--touch);padding:7px 0;color:var(--on-ink);text-decoration:none;font-size:15.5px;line-height:1.4}
.foot-links a small{display:block;color:var(--on-ink-dim);font-size:13px;line-height:1.45}
.foot-links a:hover{color:var(--color-on-action);text-decoration:underline;text-underline-offset:3px}
.foot-links a:hover small{color:var(--on-ink)}
/* — Row 3: legal + copyright, one quiet line — */
.foot-legal{border-top:var(--border-w) solid var(--ink-soft);margin-top:36px;padding-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;font-size:13.5px;color:var(--on-ink-dim)}
.foot-legal .copy{color:var(--on-ink)}
.foot-legal nav{display:flex;flex-wrap:wrap;gap:2px 6px;margin-left:0}
@media(min-width:960px){.foot-legal nav{margin-left:auto}}
.foot-legal nav a{color:var(--on-ink-dim);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--touch);padding:4px 8px}
.foot-legal nav a:hover{color:var(--color-on-action);text-decoration:underline;text-underline-offset:3px}
.foot-top-link{background:none;border:0;color:var(--on-ink-dim);font-size:13.5px;min-height:var(--touch);padding:4px 8px}
.foot-top-link:hover{color:var(--color-on-action);text-decoration:underline;text-underline-offset:3px}
/* — Mobile hierarchy: brand, connection, then compact
   navigation. Short-label groups wrap two-up so the footer stays short;
   the duplicate finder entry is dropped; long guide titles keep a
   full-width row each. Nothing is a shrunken desktop column. — */
@media(max-width:639px){
  .foot-top{gap:32px;padding-bottom:32px}
  .foot-group{padding:20px 0 2px}
  .foot-links--wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
  .foot-links--wrap a{font-size:15px}
  .foot-legal{gap:6px 16px}
  .foot-legal nav{margin-left:-8px}
}
body.show-guidebar footer.site{padding-bottom:104px}
@media(min-width:820px){body.show-guidebar footer.site{padding-bottom:40px}}

.toast{position:fixed;left:50%;transform:translate(-50%,6px);bottom:76px;z-index:90;background:var(--ink);color:var(--color-on-action);font-size:14px;padding:10px 16px;border-radius:var(--radius);max-width:92vw;text-align:center;opacity:0;visibility:hidden;transition:opacity var(--dur-3) ease,transform var(--dur-3) ease,visibility var(--dur-3)}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
body.show-guidebar .toast{bottom:calc(88px + env(safe-area-inset-bottom))}
/* ============ MOBILE & INTERACTION ============
   Mobile is designed, not shrunk: at phone width the two hero actions
   stack full-width so both thumbs targets are unambiguous, and the
   email row gives its button a full row of its own. Motion is limited
   to state change and navigation feedback — a short fade when a view
   replaces another, the diagram zone gliding between heights, the
   finder progress filling — and every bit of it is switched off by
   the reduced-motion block below. */
/* Finder result: the visitor's own answers, stated back with a way to
   revisit any single one without starting over. */
.res-answers{margin-top:22px;border-bottom:var(--border-w) solid var(--border)}
.res-answers .ra{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0;border-top:var(--border-w) solid var(--border);min-height:52px}
.res-answers .ra .k{display:flex;align-items:baseline;gap:10px}
.res-answers .ra b{font-family:var(--font-head);font-weight:600;font-size:15.5px}
.ra-change{background:none;border:0;color:var(--blue);font-size:14.5px;font-weight:500;text-decoration:underline;text-underline-offset:3px;padding:8px 4px;min-height:var(--touch);transition:color var(--dur-1) ease}
.ra-change:hover{color:var(--blue-dark)}
.ra-change:active{color:var(--color-action-active)}
.res-note{margin-top:22px;font-size:15.5px;line-height:1.6;max-width:60ch}
.res-note .label{display:block;margin-bottom:3px}
.fstep h2:focus,#resName:focus{outline:none}
.finder .prog i{transition:background-color var(--dur-4) ease}
@media(max-width:560px){
  .hero .actions{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion: no-preference){
  .view.active{animation:ft-view var(--dur-3) ease-out}
  @keyframes ft-view{from{opacity:0}to{opacity:1}}
  #zoneBand,#zoneLine,#resBand,#resLine{transition:d var(--dur-5) ease}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}
/* ============ RESPONSIVE ROBUSTNESS ============
   Checked at 320 / 360 / 390 / 430 / 768 / 1024 / 1280 / 1440+:
   display type is fluid below its cap (see the clamp() sizes on the
   hero, cut name, archive and finder headings), body overflow is
   clipped as a safety net, long words wrap, and every image carries
   an aspect-ratio so nothing jumps as it loads. What remains here is
   the one real squeeze the audit found: between 640px (where the
   comparison table returns) and 900px, its row labels may wrap
   instead of crushing the two cut columns. Below 640 the table is
   already replaced by the stacked comparison. */
.zone--tight{padding-top:0}
.zone-cream{background:var(--bg-2)}
@media(max-width:900px){
  .cmp-table th[scope="row"]{white-space:normal}
}
/* View headings receive programmatic focus on navigation;
   they are not interactive, so no outline is shown for it. */
.view h1[tabindex="-1"]:focus{outline:none}
/* ============ FINAL QA ============
   Accessibility: one main landmark (the views are sections inside it),
   a skip link as the first focusable element, navigation items as real
   links, and aria-current only ever present on the current item.
   Every text colour pair was calculated from the final hex values —
   the lowest ratios are warning on its wash (4.56) and success on its
   wash (4.60); all text passes WCAG 2.2 AA at its used size.
   Performance: the hero image is preloaded with fetchpriority=high and
   every image carries width/height + decoding=async, so layout is
   reserved before bytes arrive; below-fold photography stays lazy.
   Polish: a text-selection tint in the diagram tint, and print rules
   so a guide taken to the barber prints as the article, not the chrome. */
.skip-link{position:absolute;left:var(--gutter);top:-60px;z-index:100;background:var(--ink);color:var(--color-on-action);padding:12px 18px;font-size:15px;font-weight:500;text-decoration:none;border-radius:var(--radius);transition:top var(--dur-2) ease}
.skip-link:focus{top:10px;color:var(--color-on-action)}
::selection{background:var(--color-diagram-tint);color:var(--ink)}
@media print{
  .topbar,.guidebar,.bottomnav,.toast,.mobilemenu,.skip-link,.barber-actions,.b-actions,.hero .actions,.hv-ui,.hv-film,.viewtabs,.seg,.arc-more,.foot-actions{display:none !important}
  body{background:#fff}
  .view{display:none !important}
  .view.active{display:block !important}
  .zone-ink,.guide-barber,footer.site{background:#fff;color:var(--ink);border-top:var(--border-w) solid var(--ink)}
  .zone-ink .label,.guide-barber .label,footer.site .label{color:var(--muted)}
  .barber-quote,footer.site .wordmark,.foot-statement,footer.site h2{color:var(--ink)}
  .decision,.faq details,.person,.trow{break-inside:avoid}
}

/* ============ EDITORIAL REDESIGN — the publication pass ============
   The system above keeps the site working; this pass changes how it
   reads. The hero stops being a panel laid over film and becomes an
   opening spread: photograph first, headline set directly on it,
   nothing else competing. Section introductions lose the tracked
   micro-label voice and speak in an italic serif standfirst instead.
   The featured-cuts grid stops being six identical cards and becomes
   an edited page — one dominant photograph, the rest staggered at
   different scales and crops, the way a picture editor lays out a
   story. Serif (Newsreader) is used only where a magazine would use
   it: standfirsts, pull lines, captions' companions and the article
   lede — never for UI, never for navigation. */
:root{--font-serif:"Newsreader",Georgia,"Times New Roman",serif}

/* — Masthead: a magazine header, not an app bar — */
.wordmark{font-size:25px;letter-spacing:-.03em}
.topbar{border-bottom:var(--border-w-strong) solid var(--ink)}
.sitenav a{font-size:15.5px}

/* — HERO: the opening spread — */
.hv-shade{height:78%;background:linear-gradient(to top,rgba(20,18,16,.72) 0%,rgba(20,18,16,.38) 46%,rgba(20,18,16,0) 78%)}
.hv-copy .hv-kicker{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:17px;letter-spacing:0;text-transform:none}
@media(min-width:820px){
  .hv-stage{height:94svh;min-height:600px;max-height:920px}
  .hv-copy{top:auto;bottom:92px;transform:none;max-width:660px;background:transparent;border:0;padding:0;color:var(--color-on-dark)}
  .hv-copy .hv-kicker{color:var(--color-on-dark-accent);display:block;margin-bottom:16px}
  .hv-copy h1{color:#FFFFFF;font-size:clamp(46px,5.6vw,74px);line-height:1.02}
  .hv-copy .lede{font-family:var(--font-serif);font-style:italic;font-size:23px;line-height:1.45;color:#F1EDE3;margin-top:18px;max-width:30em}
  .hv-copy .actions{margin-top:28px;gap:26px;align-items:center}
  .hv-copy .btn-pri{border-radius:0}
  .hv-copy .btn-sec{border:0;border-bottom:var(--border-w-strong) solid var(--color-on-dark);border-radius:0;color:var(--color-on-dark);padding:6px 2px;min-height:0;background:transparent}
  .hv-copy .btn-sec:hover{background:transparent;color:#FFFFFF;border-bottom-color:#FFFFFF}
  .hv-ui{bottom:22px}
}
@media(max-width:819px){
  .hv-copy{background:transparent;border:0;padding:20px var(--gutter) 8px;margin-left:0;margin-right:0}
  .hv-copy .hv-kicker{color:var(--color-info);margin-bottom:10px}
  .hv-copy h1{font-size:clamp(34px,9.6vw,42px);line-height:1.05}
  .hv-copy .lede{font-family:var(--font-serif);font-style:italic;font-size:19.5px;line-height:1.5;margin-top:12px}
  .hv-copy .btn-sec{border:0;border-bottom:var(--border-w-strong) solid var(--ink);border-radius:0;padding:6px 2px;min-height:0;flex:0 1 auto}
  .hv-copy .actions{align-items:center;gap:20px}
}

/* — Section voice on the homepage: serif standfirsts, bigger heads — */
#view-home .zone-head{max-width:700px;margin-bottom:44px}
#view-home .zone-head h2,#view-home .diagram-split h2,#view-home .finder-split h2{line-height:1.08}
@media(min-width:768px){
  #view-home .zone-head h2,#view-home .diagram-split h2,#view-home .finder-split h2{font-size:42px}
  #view-home .zone{padding:104px 0}
  #view-home .zone--tight{padding-top:0}
}
#view-home .zone-head .label,#view-home .finder-split .txt .label,#view-home .diagram-split .txt .label{
  font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:18px;letter-spacing:0;text-transform:none;color:var(--color-info)}
#view-home .zone-head p{font-family:var(--font-serif);font-style:italic;font-size:20px;line-height:1.55;color:var(--ink);max-width:34em}
#view-home .zone-ink .label{color:var(--color-on-dark-2)}
#view-home .finder-split .txt p{font-size:18.5px;line-height:1.75;max-width:38em}
#view-home .qrows li::before{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:21px;color:var(--color-brass-text)}
#view-home .qrows b{font-size:19px}

/* — Featured cuts: an edited page, not a card grid — */
.cut-card{border-top:0;padding-top:0}
.cut-card h3{font-size:21px}
.cut-card .cc-body{padding:16px 0 4px}
@media(min-width:1024px){
  .cuts-grid{grid-template-columns:repeat(12,1fr);gap:64px 28px}
  .cut-card:nth-child(1){grid-column:1/8}
  .cut-card:nth-child(1) img{aspect-ratio:16/10}
  .cut-card:nth-child(1) h3{font-size:30px}
  .cut-card:nth-child(1) p{font-size:16.5px;max-width:44ch}
  .cut-card:nth-child(2){grid-column:8/13;margin-top:110px}
  .cut-card:nth-child(2) img{aspect-ratio:4/5}
  .cut-card:nth-child(3){grid-column:1/6}
  .cut-card:nth-child(3) img{aspect-ratio:4/5}
  .cut-card:nth-child(4){grid-column:6/13;margin-top:64px}
  .cut-card:nth-child(4) img{aspect-ratio:16/10}
  .cut-card:nth-child(5){grid-column:1/7}
  .cut-card:nth-child(5) img{aspect-ratio:3/2}
  .cut-card:nth-child(6){grid-column:7/13;margin-top:88px}
  .cut-card:nth-child(6) img{aspect-ratio:4/5}
}
@media(min-width:640px) and (max-width:1023px){
  .cuts-grid{gap:48px 24px}
  .cut-card:nth-child(even){margin-top:44px}
}
@media(max-width:639px){
  .cuts-grid{gap:52px}
  .cut-card:nth-child(1) img{aspect-ratio:4/3}
  .cut-card:nth-child(2) img,.cut-card:nth-child(4) img,.cut-card:nth-child(6) img{aspect-ratio:4/5}
  .cut-card:nth-child(3) img,.cut-card:nth-child(5) img{aspect-ratio:3/2}
}

/* — Hair types: photographs staggered like a contact sheet — */
@media(min-width:900px){
  .texrow{gap:24px}
  .texrow figure:nth-child(2){margin-top:56px}
  .texrow figure:nth-child(4){margin-top:56px}
  .texrow figure:nth-child(1) img{aspect-ratio:3/4}
  .texrow figure:nth-child(3) img{aspect-ratio:1/1}
}
.texrow figcaption b{font-size:17px}
.texrow figcaption small{font-family:var(--font-serif);font-style:italic;font-size:14.5px;color:var(--ink)}

/* — The flagship photographs: let the second frame sit lower — */
@media(min-width:900px){
  .hero-photos .offset{margin-top:120px}
  .hero-photos .offset img{aspect-ratio:3/4}
}

/* — Comparison heads: two portraits and a verdict, spread wide — */
@media(min-width:768px){.cmp-heads{max-width:760px;gap:48px;margin-bottom:40px}}
.rec-line{font-family:var(--font-serif);font-style:italic;font-size:22px;line-height:1.5}
.rec-line b{font-family:var(--font-head);font-style:normal}

/* — Guide index on the homepage: the first story leads — */
@media(min-width:768px){
  .glist .grow:first-child{grid-template-columns:230px 1fr auto;padding:30px 0}
  .glist .grow:first-child img{width:230px;height:172px}
  .glist .grow:first-child b{font-size:25px}
  .glist .grow:first-child small{font-size:15px}
}

/* — The closing statement — */
.cta-final{border-top:0;max-width:820px}
.cta-final h2{font-size:34px}
@media(min-width:768px){.cta-final h2{font-size:46px}}
.cta-final p{font-family:var(--font-serif);font-style:italic;font-size:21px;line-height:1.55;color:var(--ink)}

/* — ARTICLE: a magazine page — */
.guide-head .cutname{line-height:1.04}
@media(min-width:768px){.guide-head .cutname{font-size:54px}}
.answer{font-family:var(--font-serif);font-style:italic;line-height:1.5;color:var(--ink)}
@media(min-width:768px){.answer{font-size:23px}}
.byline{border-bottom:0}
#gIntro1::first-letter{font-family:var(--font-head);font-weight:800;font-size:52px;line-height:.85;float:left;padding:6px 10px 0 0;color:var(--color-action)}
.keyline{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:23px;line-height:1.45;border-top:0;padding:8px 0 8px 26px;border-left:var(--border-w-accent) solid var(--color-brass);margin:40px 0 10px}
.barber-quote{font-family:var(--font-serif);font-style:italic;font-weight:500;letter-spacing:0}
.afeat h2{line-height:1.12}
.arc-lede{font-family:var(--font-serif);font-style:italic;font-size:20px;color:var(--ink)}
footer.site .blurb{font-family:var(--font-serif);font-style:italic;font-size:17.5px;line-height:1.6}
.cap{font-size:14px}
.cap b{font-family:var(--font-head)}

/* ============ V23 — PUBLICATION, NOT A SYSTEM ============
   This pass breaks the last template rhythm. Sections no longer share
   the same head + grid cadence. The flagship gets a magazine spread,
   the cut index becomes an edited contents page with folio numbers,
   hair types become a contact sheet, comparisons read as a spread,
   the diagram becomes a plate, and the finder reads as a journey.
   No new colours, no gradients, no shadows — only scale, crop,
   alignment and whitespace do the work. */
:root{--font-serif:"Newsreader",Georgia,serif}

/* Hero — let the film own the first screen, copy anchored low-left,
   with a magazine folio line, not a UI panel */
.hv-copy .hv-kicker{letter-spacing:.02em}
@media(min-width:820px){
  .hv-copy{max-width:720px;bottom:84px}
  .hv-copy h1{font-size:clamp(52px,6.2vw,82px);letter-spacing:-.03em}
  .hv-copy .lede{max-width:28em}
  .hv-credit{font-family:var(--font-serif);font-style:italic;font-size:14px}
}

/* Section heads — stop shouting the same way. Two voices only:
   a quiet folio number in serif + a headline that varies by section */
#view-home .zone-head{position:relative}
#view-home .zone-head h2{letter-spacing:-.025em}

/* — The Decision: a manifesto, not a split card —
   Big serif opening line, steps as a numbered essay list with a rule
   that runs down the left, not three identical rows */
.decision-essay{max-width:680px}
.decision-essay h2{font-size:clamp(32px,4vw,44px)!important;line-height:1.05!important}
#view-home section.zone--tight .finder-split{grid-template-columns:1fr}
@media(min-width:900px){
  #view-home section.zone--tight .finder-split{grid-template-columns:6fr 5fr;gap:72px}
}
#view-home .qrows{border-left:1px solid var(--color-border);padding-left:28px}
#view-home .qrows li{border-top:0;padding:20px 0}
#view-home .qrows li+li{border-top:1px solid var(--color-border)}
#view-home .qrows li:last-child{border-bottom:0}

/* — FLAGSHIP SPREAD — */
.flagship-spread{display:grid;gap:28px;margin:8px 0 48px;align-items:start}
@media(min-width:900px){.flagship-spread{grid-template-columns:7fr 5fr;gap:48px;margin-bottom:56px}}
.flagship-spread figure{margin:0}
.flagship-spread figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(min-width:900px){.flagship-spread figure img{aspect-ratio:3/2}}
.flagship-spread .flag-copy{padding-top:6px}
.flagship-spread .flag-copy .flag-lede{font-family:var(--font-serif);font-style:italic;font-size:21px;line-height:1.5;color:var(--ink)}
.flagship-spread .flag-copy p{font-size:16.5px;line-height:1.7;margin-top:16px;color:var(--ink)}
.flagship-spread .flag-facts{margin-top:22px;border-top:2px solid var(--ink);padding-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.flagship-spread .flag-facts div b{font-family:var(--font-head);font-size:13px;letter-spacing:.08em;text-transform:uppercase;display:block;color:var(--muted);font-weight:600}
.flagship-spread .flag-facts div span{font-family:var(--font-head);font-weight:700;font-size:17px;line-height:1.3;display:block;margin-top:2px}
.flagship-spread .flag-link{margin-top:22px;display:inline-block;font-weight:600}

/* Verdict — editorial columns with oversized honest headings,
   no boxes, a centre rule only on desktop, generous leading */
.verdict-cols{gap:44px}
@media(min-width:900px){.verdict-cols{gap:0}}
.verdict-col h3{font-size:26px;letter-spacing:-.02em;line-height:1.1}
.verdict-col li{padding:13px 0 13px 26px;font-size:16.5px;line-height:1.55}
.verdict-col li::before{top:20px;width:10px;height:2px}
.verdict-col.get li::before{background:var(--color-action)}
.verdict-col.skip li::before{background:var(--color-brass)}

/* Barber band — pull it wider, set the quote like a pull-quote */
.zone-ink .barber-quote{font-size:clamp(26px,3.4vw,38px);line-height:1.35;max-width:26em}
.barber-grid{border-top-color:rgba(247,244,238,.18)}

/* — CONTENTS PAGE for cuts: folio numbers, varied crops already set,
   now add editorial numbering and looser rhythm — */
.cuts-grid{counter-reset:folio}
.cut-card{position:relative}
.cut-card::before{counter-increment:folio;content:"0" counter(folio);font-family:var(--font-serif);font-style:italic;font-size:15px;color:var(--color-brass-text);display:block;margin-bottom:10px}
.cut-card h3{letter-spacing:-.02em}
.cut-card .cc-meta{border-top:1px solid var(--color-border);padding-top:12px;margin-top:16px;font-size:13px;letter-spacing:.01em}
@media(min-width:1024px){.cuts-grid{gap:72px 32px}}

/* Hair types — contact sheet: captions sit tight, images touch the rule */
.texrow figure{border-top:2px solid var(--ink);padding-top:12px}
.texrow figcaption{padding-top:12px}
.texrow figcaption b{font-size:18px}

/* Routes (hair-type + face-shape + tools) — chapter index, not cards.
   Big serif numerals replace arrows as the visual signal */
.routes{counter-reset:ch}
.route{grid-template-columns:auto 1fr auto;align-items:baseline;padding:22px 0}
.route::before{counter-increment:ch;content:counter(ch,decimal-leading-zero);font-family:var(--font-serif);font-style:italic;font-size:16px;color:var(--muted);min-width:32px}
.route b{font-size:19px}
.route .arr{font-family:var(--font-serif);font-style:italic;font-size:22px;color:var(--ink)}

/* Comparison — a spread: two heads larger, verdict as a standfirst */
@media(min-width:768px){.cmp-heads{grid-template-columns:1fr 1fr;max-width:860px}}
.cmp-heads svg{width:100%;height:auto}
.cmp-table{font-size:16px}
.cmp-table td,.cmp-table th{padding:16px 16px 16px 0}
.rec-line{max-width:52ch;border-top:2px solid var(--ink);padding-top:20px}

/* Diagram — a plate on cream paper, with plate furniture */
.zone-diagram{background:var(--color-alt)}
.diagram-plain{background:var(--color-surface);border:1px solid var(--color-border);padding:28px 24px 20px}
@media(min-width:768px){.diagram-plain{padding:36px 32px 24px}}
.diagram-plain figcaption{font-family:var(--font-serif);font-style:italic;font-size:16px;line-height:1.55;color:var(--ink);max-width:52ch}
.diagram-split .txt h2{font-size:clamp(30px,3.6vw,40px)!important}
.seg{border-radius:0}
.seg button{letter-spacing:.02em}

/* Finder — journey steps with a vertical thread on desktop */
#finder .finder-split .txt h2{font-size:clamp(30px,3.6vw,40px)!important}
#finder .qrows li::before{font-size:24px}

/* Guide index — first row is a feature, the rest are a text index.
   Thumbnails shrink after the lead so the list reads, not tiles */
.glist .grow{border-top:1px solid var(--color-border)}
.glist .grow:hover{background:transparent}
@media(min-width:768px){
  .glist .grow:not(:first-child) img{width:110px;height:82px}
  .glist .grow:not(:first-child) b{font-size:19px}
}

/* Gallery teaser — lookbook strip: uneven heights, no uniform wall */
@media(min-width:900px){
  #view-home .texrow{grid-template-columns:1.15fr .85fr 1fr .9fr}
}

/* Final CTA — quiet, centred, no button pair competing */
.cta-final{max-width:640px;margin:0 auto;text-align:left}
.cta-final h2{letter-spacing:-.03em}

/* Article — keep the magazine voice, tighten the measure */
.article p.body{font-size:17.5px;line-height:1.75}
.guide-head .answer{max-width:36em}

/* Face-shape section — photo-led since the Stage 1 correction:
   its layout lives with the section's own block (05 · FACE SHAPE,
   below), where the photograph is the hero and the outline is a
   small annotation beside the name. */

/* Diagram plate furniture */
#view-home .diagram-plain::before{content:"Fig. 01 — The taper zone";font-family:var(--font-serif);font-style:italic;font-size:14px;color:var(--muted);display:block;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--color-border)}

/* Tools — chapters, not a directory */
#tools .routes .route b{font-size:20px}

/* Mobile recomposition: flagship stacks photo-first, routes drop the
   folio column squeeze, verdicts breathe, hero copy stays readable */
@media(max-width:639px){
  .flagship-spread .flag-facts{grid-template-columns:1fr 1fr}
  .route{grid-template-columns:auto 1fr; }
  .route .arr{display:none}
  .route::before{min-width:26px}
  #view-home .qrows{border-left:0;padding-left:0}
  .diagram-plain{padding:20px 16px 16px;margin:0 -4px}
  .cuts-grid{gap:56px}
  .verdict-col h3{font-size:24px}
}
@media (prefers-reduced-motion: reduce){
  .hv-film{animation:none!important}
}

/* ============ V24 — ART-DIRECTION REFINEMENT ============
   The last pass set the publication voice; this one breaks the
   remaining cadence. Sections stop sharing one head size, one
   spacing and one grid logic: the verdict becomes two unequal
   columns with the honest half set as a quiet sidebar, the
   comparison becomes an unequal two-portrait spread, the finder
   becomes its own cream chapter, the face-shape head steps aside
   to the right, and corners go fully square — print, not product.
   Colours, content, links and behaviour are unchanged. */
:root{--radius:0}

/* — Masthead: taller, quieter, more like a magazine nameplate — */
@media(min-width:820px){
  .topbar-in{height:72px}
  .wordmark{font-size:27px}
  .sitenav{gap:10px}
  .sitenav a{letter-spacing:.01em}
  .topbar .header-cta{padding:10px 20px}
}

/* — Hero: the headline takes more of the frame, the furniture less — */
@media(min-width:820px){
  .hv-stage{height:96svh;max-height:940px}
  .hv-copy{bottom:118px;max-width:760px}
  .hv-copy h1{font-size:clamp(56px,6.6vw,88px);line-height:.99}
  .hv-copy .lede{font-size:22px;max-width:26em}
  .hv-ui{bottom:26px}
  .hv-caption{background:transparent;padding:8px 0;text-shadow:0 1px 10px rgba(20,18,16,.6)}
  .hv-pause{background:transparent}
}
.hv-credit{max-width:var(--wrap);font-size:13.5px}

/* — Section heads stop marching in step: size and measure vary
   with what the section is for. Flagship largest, tools quietest. — */
@media(min-width:768px){
  #view-home > section:nth-child(3) .zone-head h2{font-size:46px}
  #view-home > section:nth-child(3) .zone-head{max-width:760px}
  #view-home > section:nth-child(5) .zone-head h2{font-size:38px}
  #view-home > section:nth-child(6) .zone-head{max-width:600px}
  #view-home > section:nth-child(7) .zone-head{max-width:520px;margin-left:auto}
  #view-home > section:nth-child(7) .zone-head h2{font-size:34px}
  #view-home > section:nth-child(8) .zone-head h2{font-size:40px}
  #view-home > section:nth-child(12) .zone-head{max-width:640px}
  #view-home > section:nth-child(14) .zone-head h2{font-size:32px}
  #view-home > section:nth-child(14) .zone-head{max-width:540px}
}
/* Vertical rhythm varies too: the barber band and the diagram get
   room, the quiet text-led chapters sit closer to their neighbours */
@media(min-width:768px){
  #view-home > section:nth-child(4){padding-top:120px;padding-bottom:120px}
  #view-home > section:nth-child(9){padding-bottom:40px}
  #view-home > section:nth-child(13){padding-bottom:32px}
}

/* — Flagship: the photograph steps forward, the copy steps back — */
@media(min-width:900px){
  .flagship-spread{grid-template-columns:8fr 4fr;gap:56px}
  .flagship-spread figure img{aspect-ratio:4/3}
  .flagship-spread .flag-copy{padding-top:34px}
  .flagship-spread .flag-copy .flag-lede{font-size:23px}
  .flagship-spread .flag-facts{grid-template-columns:1fr;gap:10px}
  .flagship-spread .flag-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--color-border);padding-bottom:8px}
  .flagship-spread .flag-facts div b{margin:0}
  .flagship-spread .flag-facts div span{margin:0;text-align:right}
}
/* — Verdict: two unequal columns. "Get this" carries the page;
   "Skip this" is set as a quiet white sidebar — honesty given a
   room of its own instead of a matching box. — */
@media(min-width:900px){
  .verdict-cols{grid-template-columns:7fr 5fr;gap:56px}
  .verdict-col{padding-right:0}
  .verdict-col + .verdict-col{border-left:0;padding-left:0}
  .verdict-col.skip{background:var(--color-surface);padding:30px 32px 18px}
  .verdict-col.get{padding-top:30px}
  .verdict-col.get h3{font-size:30px}
}
@media(max-width:899px){
  .verdict-col.skip{background:var(--color-surface);padding:24px 22px 10px;margin:0 -6px}
}

/* — Cuts index: loosen the folio further — alternate bodies are
   indented, so the text column never lines up into a table edge — */
@media(min-width:1024px){
  .cut-card:nth-child(2) .cc-body,.cut-card:nth-child(5) .cc-body{padding-left:28px}
  .cut-card:nth-child(3) .cc-body,.cut-card:nth-child(6) .cc-body{max-width:34ch}
  .cut-card:nth-child(4){margin-top:96px}
}

/* — Comparison: an unequal spread — the recommended cut's portrait
   is larger and sits higher; the alternative steps down and back — */
@media(min-width:768px){
  .cmp-heads{grid-template-columns:1.18fr .82fr;gap:56px;align-items:start}
  .cmp-heads figure:nth-child(2){margin-top:64px}
  .cmp-heads figcaption{font-size:14.5px;margin-top:10px}
  .cmp-heads .nm{font-size:18px}
}
.cmp-table td,.cmp-table th{padding-top:18px;padding-bottom:18px}

/* — Real hair, real people: the main frame goes wide and cinematic,
   the detail frame stays narrow and low — */
@media(min-width:900px){
  .hero-photos{grid-template-columns:8fr 4fr;gap:32px}
  .hero-main img{aspect-ratio:16/10}
}

/* — Diagram plate: more air, a hand-set caption, the control row
   reads as plate furniture rather than a segmented widget — */
.diagram-plain{padding:36px 28px 26px}
@media(min-width:768px){.diagram-plain{padding:48px 44px 32px}}
.diagram-plain figcaption{margin-top:20px;font-size:17px}
.seg{border:0;border-bottom:2px solid var(--ink);background:transparent}
.seg button{background:transparent;border-right:0;padding:10px 16px 12px;color:var(--muted)}
.seg button:hover{background:transparent;color:var(--ink)}
.seg button[aria-pressed="true"]{background:transparent;color:var(--ink);box-shadow:inset 0 -4px 0 var(--color-action)}
.seg button[aria-pressed="true"]:hover{background:transparent}

/* — Finder chapter: cream ground, the questions set as a journey
   down a single thread, the invitation column narrower — */
#view-home #finder{background:var(--color-alt)}
@media(min-width:900px){
  #view-home #finder .finder-split{grid-template-columns:4fr 7fr;gap:80px}
  #view-home #finder .qrows li{padding:26px 0}
  #view-home #finder .qrows b{font-size:20px}
}

/* — Guide index rows: the description becomes the serif voice,
   the headline stays grotesk — a list that reads, not tiles — */
.grow small{font-family:var(--font-serif);font-style:italic;font-size:15.5px;color:var(--ink)}
.grow .why{color:var(--muted)}

/* — Gallery teaser: the category index column aligns to the top
   rule like a contents page, not a fourth card — */
.gal-teaser-index figcaption{border-top:2px solid var(--ink);padding-top:12px}

/* — Final statement: centred, larger, and allowed to end the page
   the way a magazine ends an issue — on a sentence, not a panel — */
.cta-final{margin:0 auto;text-align:center;max-width:680px}
.cta-final .actions{justify-content:center}
@media(min-width:768px){.cta-final h2{font-size:52px}}

/* — Article pages inherit the calmer hand: wider standfirst,
   verdict sidebar treatment inside guides too — */
@media(min-width:900px){
  #view-guide .verdict-cols{grid-template-columns:7fr 5fr;gap:56px}
  #view-guide .verdict-col.skip{background:var(--color-surface);padding:26px 28px 12px;border-top-color:var(--warn)}
  #view-guide .verdict-col.get{border-top:0;padding-top:26px}
}

/* — Mobile recomposition for this pass: the flagship portrait goes
   tall, the comparison portraits stack offset, the skip sidebar
   keeps its room, and the finder chapter keeps its cream edge
   to edge — */
/* ============ CONTENT PAGES — About / Contact / Legal ============
   Text-led editorial pages in the same voice as the guides: a quiet
   breadcrumb, a confident title, a serif standfirst, then a calm
   reading column with ruled section headings. No cards, no panels —
   the page is the article. A ruled index at the foot of each page
   links its sibling pages so the whole set stays reachable. */
.static-doc{max-width:var(--read);margin:0 auto;padding-bottom:84px}
.static-doc .crumbs{padding-top:22px}
.doc h1{font-size:clamp(34px,9.5vw,44px);font-weight:800;letter-spacing:-.022em;line-height:1.06;margin:14px 0 18px}
@media(min-width:768px){.doc h1{font-size:50px}}
.doc .doc-lede{font-family:var(--font-serif);font-style:italic;font-size:20px;line-height:1.55;color:var(--ink);margin:0 0 20px;max-width:34em}
@media(min-width:768px){.doc .doc-lede{font-size:22px}}
.doc h2{font-size:23px;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:42px 0 10px;padding-top:20px;border-top:var(--border-w) solid var(--border)}
.doc p{margin:0 0 16px;font-size:17px;line-height:1.75;max-width:66ch}
.doc-index{margin-top:56px;border-top:var(--border-w-strong) solid var(--ink);padding-top:18px}
.doc-index h2{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.doc-index ul{list-style:none;margin:10px 0 0;padding:0}
@media(min-width:640px){.doc-index ul{columns:2;column-gap:48px}}
.doc-index li{break-inside:avoid}
.doc-index a{display:flex;align-items:center;min-height:var(--touch);padding:7px 0;color:var(--ink);text-decoration:none;font-size:16px;border-bottom:var(--border-w) solid var(--border)}
.doc-index a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

@media(max-width:639px){
  .flagship-spread figure img{aspect-ratio:4/5}
  .cmp-heads{gap:14px}
  .cmp-heads figure:nth-child(2){margin-top:28px}
  #view-home .zone-head h2{letter-spacing:-.02em}
  .cta-final{text-align:left}
  .cta-final .actions{justify-content:flex-start}
}

/* ================================================================
   STAGE 1 — FOUNDATION, MASTHEAD & HERO (premium editorial pass)
   ----------------------------------------------------------------
   Three moves, nothing below the hero rebuilt:
   1 · Foundation — a display serif (Newsreader roman, loaded in
       <head>) joins Archivo and Inter as a named token,
       --font-display. It is spent in exactly two places: the
       masthead nameplate and the hero headline.
   2 · Navigation — the header becomes a magazine masthead: a
       quiet utility strip, a nameplate row (descriptor · centred
       serif wordmark · the one "Find Your Cut" CTA), and the
       section nav in its own row between a hairline above and
       the header's strong rule below. On scroll the strip drops
       away and the nameplate condenses; the nav row stays.
       Phones keep one clean row — wordmark, Find a cut, Menu —
       and the full section list in the menu panel.
   3 · Hero — the headline is set in the display serif with the
       last word in italic, the kicker gains a short brass rule,
       a quiet cover line sits under the actions, and the stage
       is sized against the masthead so the whole opening —
       caption and Pause included — fits the first screen.
   Colours are unchanged: ivory, charcoal, forest, brass as a
   detail only. Everything below the hero keeps its current CSS.
   ================================================================ */

/* — Anchor offset: the masthead is taller than the old bar, so
   in-page targets (guide sections, tools, comparisons) stop
   below it instead of sliding underneath. — */
#main-content [id]{scroll-margin-top:88px}
@media(min-width:820px){#main-content [id]{scroll-margin-top:180px}}

/* — 2 · THE MASTHEAD — */
/* Utility strip — what this publication is, in one quiet line */
.mast-utility{display:none}
@media(min-width:820px){
  .mast-utility{display:block;border-bottom:var(--border-w) solid var(--border)}
  .mast-utility-in{max-width:var(--wrap);margin:0 auto;padding:7px var(--gutter);display:flex;justify-content:space-between;gap:24px;font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
  .mast-utility-r{display:none}
}
@media(min-width:1000px){.mast-utility-r{display:block}}
.topbar.scrolled .mast-utility{display:none}

/* Nameplate row — descriptor left, wordmark centred, CTA right.
   Items are placed in explicit grid columns so the wordmark stays
   centred even where the descriptor or CTA is not shown. */
.mast-nameplate{height:auto}
@media(min-width:820px){
  .mast-nameplate{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;padding-top:18px;padding-bottom:14px}
  .mast-nameplate .brand-desc{grid-column:1;justify-self:start;border-left:0;padding-left:0}
  .mast-nameplate .wordmark{grid-column:2;justify-self:center}
  .mast-nameplate .header-cta{grid-column:3;justify-self:end}
  .topbar .header-cta{display:inline-flex}
  .topbar.scrolled .mast-nameplate{padding-top:8px;padding-bottom:8px}
}
/* The nameplate itself: a serif wordmark, set like a newspaper's.
   The footer wordmark shares the face — one name, one setting. */
.wordmark{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.topbar .wordmark{font-size:27px}
@media(min-width:820px){
  .topbar .wordmark{font-size:39px;line-height:1.05}
  .topbar.scrolled .wordmark{font-size:25px}
}

/* Section nav row — small, tracked, evenly spread; the current
   section is forest with a short inset rule, never a filled tab */
.mast-nav{display:none}
@media(min-width:820px){
  .mast-nav{display:block;border-top:var(--border-w) solid var(--ink)}
  .mast-nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);display:flex;justify-content:center;align-items:stretch;gap:2px}
  .mast-nav a{display:inline-flex;align-items:center;min-height:var(--touch);padding:10px 13px;font-family:var(--font-head);font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:0;transition:color var(--dur-1) ease}
  .mast-nav a:hover{color:var(--blue)}
  .mast-nav a:active{color:var(--color-action-active)}
  .mast-nav a[aria-current="page"]{color:var(--blue);box-shadow:inset 0 -3px 0 var(--blue)}
}
@media(min-width:820px) and (max-width:1023px){
  .mast-nav a{padding:10px 8px;font-size:11.5px;letter-spacing:.07em}
}

/* — 3 · THE HERO — */
/* The headline becomes the typographic moment of the page:
   display serif, roman, with the final word in italic */
.hv-copy h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em}
.hv-copy h1 em{font-style:italic;font-weight:500}
@media(min-width:820px){
  .hv-copy h1{font-size:clamp(54px,6.3vw,90px);line-height:1.01}
}
/* Kicker — a short brass rule before the serif line */
.hv-copy .hv-kicker{display:flex;align-items:center;gap:12px}
.hv-copy .hv-kicker::before{content:"";width:30px;height:1px;background:var(--color-brass);flex:0 0 auto}
/* Cover line — what the issue holds, set quietly under the actions */
.hv-meta{display:none}
@media(min-width:820px){
  .hv-meta{display:block;margin-top:26px;padding-top:14px;border-top:var(--border-w) solid rgba(247,244,238,.28);font-size:13px;letter-spacing:.05em;color:#E7E1D2;max-width:44ch}
}
/* Stage sized to the masthead (~161px) so the full opening fits
   the first screen; reduced-motion keeps its shorter still stage */
@media(min-width:820px) and (prefers-reduced-motion: no-preference){
  .hv-stage{height:calc(100svh - 161px);min-height:540px;max-height:800px}
}
/* ============ STAGE 2 — HOMEPAGE SECTIONS ============
   The five homepage chapters rebuilt as an editorial journey, in
   page order: Start Here, the Low Taper flagship, Find Your Cut,
   Hair Type, Face Shape. Each chapter has its own composition —
   a split feature, a magazine spread, a contents grid that gives
   way to diagram rows and shape links, a contact sheet with two
   commissioned-photograph slots, and a diagram index. No new
   colours: ivory, cream, charcoal, forest, olive and brass only,
   square corners, no shadows, no gradients. */

/* — 01 · START HERE — split editorial feature: photograph one side,
   the five honest starting points as a ruled index on the other — */
.start-split{display:grid;gap:32px;align-items:start}
@media(min-width:900px){.start-split{grid-template-columns:7fr 5fr;gap:56px}}
.start-split figure{margin:0}
.start-split figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(min-width:900px){.start-split figure img{aspect-ratio:3/2}}
.start-copy .start-lede{font-family:var(--font-serif);font-style:italic;font-size:21px;line-height:1.5;color:var(--ink)}
.start-copy>p{margin-top:16px;font-size:16.5px;line-height:1.7}
.start-index{list-style:none;margin:28px 0 0;padding:0;border-top:var(--border-w-strong) solid var(--ink)}
.start-index li{border-bottom:var(--border-w) solid var(--border)}
.start-index a{display:grid;grid-template-columns:auto 1fr auto;gap:2px 18px;align-items:baseline;padding:13px 0;min-height:var(--touch);text-decoration:none;color:var(--ink)}
.start-index a:hover{color:var(--ink)}
.start-index a:hover b{text-decoration:underline;text-underline-offset:3px}
.start-index .n{font-family:var(--font-serif);font-style:italic;font-size:15px;color:var(--color-brass-text)}
.start-index b{font-family:var(--font-head);font-weight:600;font-size:17.5px;display:block;line-height:1.3}
.start-index small{color:var(--muted);font-size:14px;line-height:1.5;display:block;margin-top:1px}
.start-index .arr{font-family:var(--font-serif);font-style:italic;font-size:20px;color:var(--blue)}
.start-links{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:15.5px;align-items:baseline}
.start-links .dim{font-size:14.5px}

/* — 02 · LOW TAPER FLAGSHIP — the barber line inside the feature — */
.flag-barber{margin-top:24px;border-top:var(--border-w) solid var(--border);padding-top:18px}
.flag-barber .label{display:block;margin-bottom:8px}
.flag-barber .q{font-family:var(--font-serif);font-style:italic;font-size:18.5px;line-height:1.55;color:var(--ink);display:block}
.flag-barber a{display:inline-block;margin-top:10px;font-size:15px}

/* — 03 · FIND YOUR CUT — one section, three treatments: the tapers
   keep the staggered photograph grid above; the fades become
   diagram rows; burst and drop become two large shape links — */
.fyc-sub{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:20px;color:var(--color-info);margin:56px 0 6px}
.fyc-sub:first-of-type{margin-top:0}
.fyc-note{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:58ch;margin-bottom:22px}
.faderows{border-top:var(--border-w-strong) solid var(--ink)}
.faderow{display:grid;grid-template-columns:64px 1fr;gap:4px 20px;padding:18px 0;border-bottom:var(--border-w) solid var(--border);text-decoration:none;color:var(--ink);align-items:center;transition:background-color var(--dur-1) ease}
@media(min-width:768px){.faderow{grid-template-columns:84px 1fr auto;gap:28px;padding:22px 0}}
.faderow:hover{color:var(--ink);background:var(--bg-2)}
.faderow:hover b{text-decoration:underline;text-underline-offset:3px}
.faderow svg{width:64px;height:auto;display:block}
@media(min-width:768px){.faderow svg{width:84px}}
.faderow b{font-family:var(--font-head);font-weight:700;font-size:19px;display:block;line-height:1.3}
@media(min-width:768px){.faderow b{font-size:21px}}
.faderow small{color:var(--muted);font-size:14.5px;line-height:1.55;display:block;margin-top:2px;max-width:58ch}
.faderow .fmeta{display:none;font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);white-space:nowrap;text-align:right}
@media(min-width:768px){.faderow .fmeta{display:block}}
.faderow .fmeta span{display:block;color:var(--muted);letter-spacing:0;text-transform:none;font-family:var(--font-body);font-weight:400;font-size:13.5px;margin-top:3px}
.shaperows{display:grid;border-top:var(--border-w-strong) solid var(--ink)}
@media(min-width:900px){.shaperows{grid-template-columns:1fr 1fr;column-gap:56px}}
.shaperow{display:grid;grid-template-columns:72px 1fr;gap:4px 20px;align-items:center;padding:20px 0;border-bottom:var(--border-w) solid var(--border);text-decoration:none;color:var(--ink)}
.shaperow:hover{color:var(--ink)}
.shaperow:hover b{text-decoration:underline;text-underline-offset:3px}
.shaperow svg{width:72px;height:auto;display:block}
.shaperow b{font-family:var(--font-head);font-weight:700;font-size:20px;display:block;line-height:1.3}
.shaperow small{color:var(--muted);font-size:14.5px;line-height:1.55;display:block;margin-top:2px}

/* — 04 · HAIR TYPE — density slots: where the photograph has not
   been commissioned yet, the slot itself carries the precise
   photographic direction, set as an editorial plate — never a
   stock substitute and never an AI face — */
.density{display:grid;gap:28px}
@media(min-width:900px){.density{grid-template-columns:1fr 1fr;gap:40px}}
.slot{border:var(--border-w) solid var(--ink);background:var(--color-alt);padding:26px;display:flex;flex-direction:column;gap:12px;margin:0}
@media(min-width:768px){.slot{padding:30px}}
.slot .slot-tag{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-info)}
.slot .dir{font-family:var(--font-serif);font-style:italic;font-size:16.5px;line-height:1.6;color:var(--ink)}
.slot .txt{font-size:15px;line-height:1.65}
.slot .txt b{font-family:var(--font-head);font-weight:700;font-size:17px}
.slot a{margin-top:auto;font-size:15px}

/* — 05 · FACE SHAPE — photo-led (Stage 1 correction): a real person
   is the hero visual for every shape. The lead entry is a large
   editorial split — the library's three-quarter portrait dominant,
   the explanation beside it. The remaining shapes are open ruled
   entries: a commissioned-photograph plate (the .slot pattern) on
   one side, the name and explanation on the other, alternating on
   desktop so the chapter reads as a magazine sequence, not a grid.
   The outline survives only as .face-fig — a small, quiet
   annotation beside the name, never the primary visual. — */
.face-fig{display:inline-block;width:26px;height:33px;flex:0 0 auto}
.face-fig svg{width:100%;height:100%;display:block}
.face-lead{display:grid;gap:28px;align-items:start}
@media(min-width:900px){.face-lead{grid-template-columns:6fr 5fr;gap:48px}}
.face-lead figure{margin:0}
.face-lead figure img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.face-name{display:flex;align-items:center;gap:14px;margin-top:12px}
.face-name h3{font-family:var(--font-head);font-weight:700;font-size:26px;letter-spacing:-.015em;line-height:1.15;margin:0}
@media(min-width:768px){.face-name h3{font-size:30px}}
.face-exp{font-size:17px;line-height:1.65;margin-top:14px;max-width:46ch}
.face-link{display:inline-flex;align-items:center;min-height:var(--touch);margin-top:8px;font-size:15.5px}
.face-entries{margin-top:56px;border-top:var(--border-w-strong) solid var(--ink)}
.face-entry{display:grid;gap:22px;padding:30px 0;border-bottom:var(--border-w) solid var(--border);align-items:start}
@media(min-width:900px){
  .face-entry{grid-template-columns:5fr 6fr;gap:44px;padding:36px 0}
  .face-entry:nth-child(even) .slot{order:2}
  .face-entry-copy{padding-top:6px}
}

/* ================================================================
   STAGE 3 — HOMEPAGE SECTIONS BELOW FACE SHAPE
   ----------------------------------------------------------------
   The remaining homepage chapters rebuilt as an editorial journey,
   in page order: Comparison, Real Hair / Real People, Diagram
   Education, Editorial Articles, Gallery, Tools. Each chapter has
   its own composition — a photographed head-to-head, a multi-view
   photographic spread, diagram plates, a magazine story layout, a
   photographic library spread, and a quiet utility index. No new
   colours: ivory, cream, charcoal, forest, olive and brass only,
   square corners, no shadows, no gradients, no card grids.
   ================================================================ */

/* — 06 · COMPARISON — an editorial head-to-head: two photographed
   side profiles at the same scale, each with its own ruled
   specification (how it sits, skin, best for, maintenance), a
   "vs" folio between them, and a stated verdict — never a SaaS
   table. On phones the two columns stack, low first. — */
.versus{display:grid;gap:36px;margin-top:8px}
@media(min-width:900px){.versus{grid-template-columns:1fr auto 1fr;gap:44px;align-items:start}}
.vs-col figure{margin:0}
.vs-col .vs-name{font-family:var(--font-head);font-weight:700;font-size:24px;letter-spacing:-.015em;line-height:1.15;margin:0 0 4px}
.vs-col .vs-tag{font-family:var(--font-serif);font-style:italic;font-size:16.5px;color:var(--muted);margin:0 0 16px}
.vs-col figure img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media(min-width:900px){.vs-col figure img{aspect-ratio:1/1}}
.vs-col figcaption{margin-top:10px}
.vs-specs{margin:22px 0 0;border-top:var(--border-w-strong) solid var(--ink)}
.vs-specs .row{display:grid;grid-template-columns:118px 1fr;gap:6px 18px;padding:11px 0;border-bottom:var(--border-w) solid var(--border)}
.vs-specs dt{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);padding-top:3px}
.vs-specs dd{margin:0;font-size:15.5px;line-height:1.55}
.vs-guide{display:inline-block;margin-top:18px;font-size:15.5px}
.vs-mid{display:none}
@media(min-width:900px){
  .vs-mid{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-top:190px;border:var(--border-w) solid var(--ink);border-radius:50%;font-family:var(--font-serif);font-style:italic;font-size:19px;color:var(--ink);flex:0 0 auto}
}
.vs-verdict{margin-top:48px;border-top:var(--border-w-strong) solid var(--ink);padding-top:22px;display:grid;gap:10px 56px}
@media(min-width:900px){.vs-verdict{grid-template-columns:280px 1fr}}
.vs-verdict h3{font-family:var(--font-head);font-weight:700;font-size:21px;letter-spacing:-.01em;line-height:1.25;margin:0}
.vs-verdict p{margin:0;font-size:16.5px;line-height:1.7;max-width:62ch}
.vs-verdict p b{color:var(--ink)}

/* — 07 · REAL HAIR, REAL PEOPLE — one cut photographed from every
   angle at once: the three-quarter view leads large, the side sits
   beside it, and the back and the blend detail run as a second
   spread below. The front view has no licensed photograph yet, so
   it stands as an honest plate carrying its own photographic
   direction (the .slot pattern from Stage 2) — never a substitute
   photograph of the wrong angle. — */
.views-lead{display:grid;gap:28px;align-items:start}
@media(min-width:900px){.views-lead{grid-template-columns:7fr 5fr;gap:36px}}
.views-lead figure,.views-pair figure{margin:0}
.views-lead figure img,.views-pair figure img{width:100%;object-fit:cover;display:block}
.views-lead .v-main img{aspect-ratio:4/5}
@media(min-width:900px){.views-lead .v-main img{aspect-ratio:3/3.4}}
.views-lead .v-side img{aspect-ratio:1/1}
.views-side-stack{display:grid;gap:28px}
.views-pair{display:grid;gap:28px;margin-top:28px}
@media(min-width:900px){.views-pair{grid-template-columns:1fr 1fr;gap:36px;margin-top:36px}}
.views-pair figure img{aspect-ratio:4/3}
.view-note{margin-top:30px;font-size:15.5px;line-height:1.65;color:var(--muted);max-width:64ch}
.view-note b{color:var(--ink)}

/* — 08 · DIAGRAM EDUCATION — beneath the interactive taper-height
   plate, a second plate in the same line language names the parts
   of the cut (temple, sideburn area, blend, neckline), with the
   definitions set as a ruled glossary beside it. One diagram
   language across the whole site: same head, same leader lines,
   same restrained palette. — */
.anat{margin-top:64px;border-top:var(--border-w-strong) solid var(--ink);padding-top:34px;display:grid;gap:32px}
@media(min-width:900px){.anat{grid-template-columns:5fr 6fr;gap:56px;align-items:start}}
.anat figure{margin:0}
.anat svg{width:100%;height:auto;display:block}
.anat figcaption{font-size:14.5px;color:var(--muted);line-height:1.6;margin-top:10px;max-width:46ch}
.anat-list{margin:0}
.anat-list .row{padding:13px 0;border-bottom:var(--border-w) solid var(--border)}
.anat-list .row:first-child{padding-top:2px}
.anat-list dt{font-family:var(--font-head);font-weight:700;font-size:16.5px;margin-bottom:3px}
.anat-list dt .zone-ref{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:14px;color:var(--color-brass-text);margin-left:8px}
.anat-list dd{margin:0;font-size:15px;line-height:1.6;color:var(--muted);max-width:56ch}

/* — 09 · EDITORIAL ARTICLES — a magazine story layout, not a card
   grid: one large featured story, two supporting stories stacked
   beside it at a smaller scale, then compact ruled rows for the
   rest of the issue. Every story carries its department label,
   its date and its reading time. — */
.story-grid{display:grid;gap:36px}
@media(min-width:900px){.story-grid{grid-template-columns:7fr 5fr;gap:48px;align-items:start}}
.story-feat{display:block;text-decoration:none;color:var(--ink)}
.story-feat figure{margin:0 0 18px}
.story-feat figure img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.story-feat h3{font-family:var(--font-head);font-weight:700;font-size:27px;letter-spacing:-.018em;line-height:1.16;margin:10px 0 10px}
@media(min-width:900px){.story-feat h3{font-size:33px}}
.story-feat:hover h3{text-decoration:underline;text-underline-offset:4px}
.story-feat .dek{font-size:16.5px;line-height:1.65;color:var(--muted);max-width:56ch;margin:0}
.story-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px;font-size:13px;letter-spacing:.03em;color:var(--muted)}
.story-side{display:grid;gap:0}
.story-min{display:grid;grid-template-columns:104px 1fr;gap:18px;padding:20px 0;border-top:var(--border-w) solid var(--border);text-decoration:none;color:var(--ink);align-items:start}
.story-side .story-min:first-child{border-top:0;padding-top:0}
@media(min-width:900px){.story-side .story-min:first-child{padding-top:2px}}
.story-min img{width:104px;height:128px;object-fit:cover;display:block}
.story-min h4{font-family:var(--font-head);font-weight:700;font-size:18.5px;line-height:1.25;letter-spacing:-.01em;margin:6px 0 6px}
.story-min:hover h4{text-decoration:underline;text-underline-offset:3px}
.story-min .dek{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}
.story-min .story-meta{margin-top:8px}
.story-rows{margin-top:44px;border-top:var(--border-w-strong) solid var(--ink)}
.story-row{display:grid;gap:2px 24px;padding:16px 0;border-bottom:var(--border-w) solid var(--border);text-decoration:none;color:var(--ink);align-items:baseline}
@media(min-width:768px){.story-row{grid-template-columns:auto 1fr auto}}
.story-row .dept{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.story-row b{font-family:var(--font-head);font-weight:600;font-size:17px;line-height:1.35}
.story-row:hover b{text-decoration:underline;text-underline-offset:3px}
.story-row .story-meta{margin-top:0}

/* — 10 · GALLERY PREVIEW — photography first, at generous sizes:
   one wide frame, then two frames beneath it, each captioned with
   its cut, its hair and what to look for. Below, the library's
   five browse axes set as a quiet ruled index — the full filters
   live on the gallery page itself. — */
.gal-spread{display:grid;gap:28px}
.gal-spread figure{margin:0}
.gal-spread figure img{width:100%;object-fit:cover;display:block}
.gal-spread .g-wide img{aspect-ratio:4/3}
@media(min-width:900px){.gal-spread .g-wide img{aspect-ratio:16/8.2}}
.gal-pair{display:grid;gap:28px}
@media(min-width:900px){.gal-pair{grid-template-columns:1fr 1fr;gap:36px}}
.gal-pair figure img{aspect-ratio:4/3}
.gal-browse{margin-top:44px;border-top:var(--border-w-strong) solid var(--ink)}
.gal-browse .gb-row{display:flex;flex-wrap:wrap;gap:2px 20px;align-items:baseline;padding:11px 0;border-bottom:var(--border-w) solid var(--border)}
.gal-browse .gb-label{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-width:118px}
.gal-browse a{font-size:15.5px;text-decoration:none}
.gal-browse a:hover{text-decoration:underline;text-underline-offset:3px}
.gal-browse .gb-none{font-size:15.5px;color:var(--muted)}

/* — 11 · TOOLS — practical editorial utilities, presented as a
   quiet numbered index in the same voice as Start Here: no app
   chrome, no panels. Working tools first; guides that behave like
   tools follow; anything still in preparation is named as such,
   without a link. — */
.toolindex{list-style:none;margin:6px 0 0;padding:0;border-top:var(--border-w-strong) solid var(--ink)}
.toolindex li{border-bottom:var(--border-w) solid var(--border)}
.toolindex a{display:grid;grid-template-columns:auto 1fr auto;gap:2px 18px;align-items:baseline;padding:14px 0;min-height:var(--touch);text-decoration:none;color:var(--ink)}
.toolindex a:hover{color:var(--ink)}
.toolindex a:hover b{text-decoration:underline;text-underline-offset:3px}
.toolindex .n{font-family:var(--font-serif);font-style:italic;font-size:15px;color:var(--color-brass-text)}
.toolindex b{font-family:var(--font-head);font-weight:600;font-size:17.5px;display:block;line-height:1.3}
.toolindex small{color:var(--muted);font-size:14px;line-height:1.5;display:block;margin-top:1px}
.toolindex .arr{font-family:var(--font-serif);font-style:italic;font-size:20px;color:var(--blue)}
.tool-next{margin-top:22px;font-size:14.5px;color:var(--muted);max-width:62ch}
.tool-next b{color:var(--ink)}

/* ================================================================
   STAGE 4 — ARTICLE UX, AD SLOTS, FOCUS & MOBILE POLISH (final)
   ----------------------------------------------------------------
   The guide page becomes a magazine article in full: category
   label, display title, serif dek, a byline that now carries the
   reading time, then a large hero photograph with its caption
   before any summary or diagram competes with it. A thin reading
   progress line sits at the very top of the viewport on guide
   pages only. Advertising is prepared, never placed: two reserved
   slots sit deep in the article (after the comparison, and before
   Related) and one sits between homepage chapters — each clearly
   labelled, none inside the opening paragraphs, none styled like
   navigation or a recommendation. Focus states are restated for
   the controls whose containers clip an outside outline.
   ================================================================ */

/* — Reading progress: guide pages only, set by the small script
   at the foot of the page. No motion of its own — it mirrors the
   scroll position, so reduced-motion needs no exception. — */
#readProg{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;display:none;background:transparent}
#readProg i{display:block;height:100%;background:var(--color-action);transform:scaleX(0);transform-origin:left}

/* — The article hero: one large photograph, full wrap width,
   between the byline and everything else — */
.guide-hero{margin:30px 0 0}
.guide-hero img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(min-width:768px){.guide-hero img{aspect-ratio:16/8.5}}
.guide-hero figcaption{margin-top:10px}
/* With the photograph promoted out of it, the split below the
   hero carries the diagram plate alone, at reading width */
.guide-split{grid-template-columns:1fr;max-width:840px}
@media(min-width:900px){.guide-split{grid-template-columns:1fr}.guide-split .photo{margin-top:0}}

/* — Reserved advertising slots: labelled, ruled, quiet. They hold
   their height whether or not an ad ever fills them, so enabling
   advertising later moves nothing on the page. — */
.ad-slot{border-top:var(--border-w) solid var(--border);border-bottom:var(--border-w) solid var(--border);padding:14px 16px 18px;margin:44px 0;text-align:center}
.ad-slot .ad-label{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block}
.ad-slot .ad-body{min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13.5px;font-style:italic;font-family:var(--font-serif)}
@media(min-width:768px){.ad-slot .ad-body{min-height:110px}}
.ad-slot--home{margin:0}

/* — Next article: one large closing link after Related, set like
   a magazine's next-story footer — */
.next-article{display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:baseline;margin-top:44px;padding:22px 0 6px;border-top:var(--border-w-strong) solid var(--ink);text-decoration:none;color:var(--ink)}
.next-article:hover{color:var(--ink)}
.next-article:hover .na-title{text-decoration:underline;text-underline-offset:4px}
.next-article .na-title{font-family:var(--font-head);font-weight:700;font-size:23px;letter-spacing:-.015em;line-height:1.2;display:block;margin-top:6px}
@media(min-width:768px){.next-article .na-title{font-size:28px}}
.next-article .arr{font-family:var(--font-serif);font-style:italic;font-size:26px;color:var(--blue)}

/* — Focus, restated where containers clip: segmented controls,
   filter rows, finder options and the film's Pause button keep a
   fully visible inset outline at keyboard focus — */
.seg button:focus-visible,.opt:focus-visible{outline-offset:-2px}
.afrow button:focus-visible,.gal-irow button:focus-visible,.pickrow button:focus-visible,.viewtabs button:focus-visible,.guide-switch a:focus-visible,.mast-nav a:focus-visible{outline:var(--border-w-strong) solid var(--color-focus);outline-offset:-2px}
.hv-pause:focus-visible{outline:var(--border-w-strong) solid #FFFFFF;outline-offset:2px}
.faq summary:focus-visible{outline:var(--border-w-strong) solid var(--color-focus);outline-offset:-2px}
.field select:focus-visible,.field input:focus-visible{outline:var(--border-w-strong) solid var(--color-focus);outline-offset:1px}

/* — Article reading on phones: the hero crop tightens, the table
   of contents goes single-column, and nothing in the article
   column can push past the viewport — */
@media(max-width:639px){
  .guide-hero{margin-top:22px}
  .toc ol{columns:1}
  .ad-slot{margin:36px 0}
  .next-article .na-title{font-size:21px}
}
@media print{
  .ad-slot,#readProg{display:none !important}
}

/* ================================================================
   STAGE 2 CORRECTION — HAIR TYPE + TAPER HEIGHT, PHOTO-LED
   ----------------------------------------------------------------
   Real person first, real hair first, real haircut first; the
   diagram is secondary. Two chapters only:
   · Hair Type — the four textures leave the small uniform contact
     sheet and become large close-cropped photographs in two
     staggered columns, so the texture itself is the hero visual.
     Captions and explanations are unchanged. Thick / Fine keep
     their commissioned-photograph slots: no licensed photograph
     isolates density honestly, so none is borrowed.
   · Taper Height — the interactive plate now leads with a real
     photograph for each height (the library's own side profiles:
     low FT-IMG-003, mid FT-IMG-005, high FT-IMG-007), carrying
     only a minimal overlay — one thin brass line at the top of
     the zone and one small label. The drawn plate drops below as
     a smaller supporting figure; the Low / Mid / High control
     drives both. The same minimal zone label sits on the three
     photographed tapers in Find Your Cut.
   No new colours: ivory, charcoal, forest, brass as a line only.
   ================================================================ */

/* — Hair Type: large texture photographs, two staggered columns — */
#view-home #gallery .texrow{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:640px){
  #view-home #gallery .texrow{grid-template-columns:1fr 1fr;gap:28px}
}
@media(min-width:900px){
  #view-home #gallery .texrow{gap:36px 32px}
  #view-home #gallery .texrow figure:nth-child(2){margin-top:72px}
  #view-home #gallery .texrow figure:nth-child(4){margin-top:72px}
  #view-home #gallery .texrow figure:nth-child(3){margin-top:-40px}
}
#view-home #gallery .texrow img{width:100%;object-fit:cover}
#view-home #gallery .texrow .tex--straight img{aspect-ratio:4/5;object-position:center 30%}
#view-home #gallery .texrow .tex--wavy img{aspect-ratio:4/5;object-position:center 18%}
#view-home #gallery .texrow .tex--curly img{aspect-ratio:3/4;object-position:center 22%}
#view-home #gallery .texrow .tex--coily img{aspect-ratio:4/5;object-position:center 20%}
@media(max-width:639px){
  #view-home #gallery .texrow .tex--curly img{aspect-ratio:4/5}
}
#view-home #gallery .texrow figcaption b{font-size:21px}
#view-home #gallery .texrow figcaption small{font-size:15.5px}

/* — Taper Height: the photograph leads, the plate supports — */
.zone-photo{position:relative;margin:0;background:var(--color-surface)}
.zone-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;display:block}
@media(min-width:900px){.zone-photo img{aspect-ratio:1/1}}
.zone-photo figcaption{margin-top:14px;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:56ch}
.zone-overlay{position:absolute;left:0;right:0;top:52%;pointer-events:none;transition:top var(--dur-5) ease}
.zone-overlay .zo-line{display:block;height:2px;width:44%;background:var(--color-brass)}
.zone-overlay .zo-label{position:absolute;left:14px;top:10px;background:rgba(24,23,22,.88);color:var(--color-on-dark);font-family:var(--font-head);font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;padding:7px 10px;white-space:nowrap}
.diagram-secondary{margin-top:44px;border-top:var(--border-w) solid var(--border);padding-top:28px;display:grid;gap:20px;align-items:start}
@media(min-width:900px){.diagram-secondary{grid-template-columns:minmax(0,480px) 1fr;gap:48px}}
.diagram-secondary .diagram-plain{max-width:480px}
.diagram-secondary .ds-note{max-width:44ch}
.diagram-secondary .ds-note .label{display:block;margin-bottom:10px}
.diagram-secondary .ds-note p{color:var(--muted);font-size:15.5px;line-height:1.65}
@media print{.zone-overlay .zo-label{background:#181716 !important;color:#F7F4EE !important}}

/* — Find Your Cut, by height: the same minimal zone label on each
   photographed taper — photo stays dominant, overlay is a line
   and a small label only — */
.zone-wrap{position:relative;display:block}
.zone-wrap img{width:100%}
.zone-wrap .zo-line{position:absolute;left:0;width:38%;height:2px;background:var(--color-brass);pointer-events:none}
.zone-wrap .zo-tag{position:absolute;left:10px;background:rgba(24,23,22,.88);color:var(--color-on-dark);font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;white-space:nowrap;pointer-events:none}
.zone-wrap .zl-low{top:58%}.zone-wrap .zl-low + .zo-tag{top:calc(58% + 8px)}
.zone-wrap .zl-mid{top:44%}.zone-wrap .zl-mid + .zo-tag{top:calc(44% + 8px)}
.zone-wrap .zl-high{top:30%}.zone-wrap .zl-high + .zo-tag{top:calc(30% + 8px)}
@media (prefers-reduced-motion: reduce){
  .zone-overlay{transition:none}
}

/* ================================================================
   STAGE 3 CORRECTION — BEARD / JAW / NECKLINE + COMPARISONS
   ----------------------------------------------------------------
   Two moves, both photo-led, both in the Stage 1–2 language:
   1 · The anatomy lesson leaves the floating drawn head. A real
       bearded portrait (FT-IMG-002) is the hero visual, carrying
       only subtle editorial annotations — a small dark chip, a
       thin brass leader line, a dot — naming Temple, Sideburn,
       Beard and Jaw where they actually sit on the man. The
       neckline cannot be seen on that portrait and is never
       claimed for it: it is taught on the back view (FT-IMG-006),
       the angle that genuinely shows it, in a smaller frame
       beneath. The drawn Plate 2 survives below as support —
       "the diagram, second", the same demotion Plate 1 received.
   2 · The Compare view leads with the same photographed
       head-to-head as the homepage: two real people in side
       profile, four ruled facts each (how it sits, skin shows,
       best for, maintenance), then "Which one should you
       choose?" and the verdict. The factor table follows as
       supporting detail and the paired diagrams sit last.
       Where the library holds no photograph of a cut — the low
       fade, and the skin fade above all — the column is an
       honest .slot plate with precise photographic direction,
       never a borrowed photograph relabelled.
   No new colours: ivory, cream, charcoal, forest, brass only. */

/* — Beard / jaw / neckline: the annotated real person — */
.anat-head{grid-column:1 / -1;max-width:640px}
.anat-head h3{font-family:var(--font-head);font-weight:700;font-size:24px;letter-spacing:-.015em;line-height:1.2;margin:10px 0 10px}
@media(min-width:768px){.anat-head h3{font-size:28px}}
.anat-head p{color:var(--muted);font-size:16.5px;line-height:1.65;max-width:58ch}
.anat-media{display:grid;gap:28px;align-content:start}
.anat-media figure{margin:0}
.beard-photo{position:relative}
.beard-photo img{width:100%;height:auto;display:block}
.beard-photo figcaption{margin-top:12px}
.anno{position:absolute;left:0;top:var(--y);width:var(--x);transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}
.anno-label{flex:0 0 auto;margin-left:10px;background:rgba(24,23,22,.88);color:var(--color-on-dark);font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;white-space:nowrap}
.anno-line{flex:1;height:1px;background:var(--color-brass)}
.anno-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--color-brass);border:1.5px solid rgba(247,244,238,.85)}
@media(max-width:639px){
  .anno-label{margin-left:6px;padding:5px 6px;font-size:11px;letter-spacing:.09em}
}
@media print{.anno-label{background:#181716 !important;color:#F7F4EE !important}}
.anat-drawn{margin-top:44px}
#view-home .anat-drawn .diagram-plain::before{content:"Fig. 02 — The anatomy"}

/* — Compare view: photographs first, verdict, then the table
   and the drawn pair as supporting detail — */
.cmp-versus{margin-top:30px}
.cmp-versus .vs-col .slot{margin-top:2px}
.cmp-verdict{margin-top:48px;border-top:var(--border-w-strong) solid var(--ink);padding-top:22px}
.cmp-verdict h3{font-family:var(--font-head);font-weight:700;font-size:21px;letter-spacing:-.01em;line-height:1.25;margin:0}
.cmp-verdict .rec-line{border-top:0;padding-top:0;margin-top:12px}
.cmp-drawn{margin-top:52px;border-top:var(--border-w) solid var(--border);padding-top:26px}
.cmp-drawn p{color:var(--muted);font-size:15px;line-height:1.6;max-width:56ch;margin-top:10px}
.cmp-drawn .cmp-heads{margin-top:20px;margin-bottom:0;max-width:520px}

/* ================================================================
   STAGE 4 CORRECTION — LOW TAPER FLAGSHIP + REAL HAIR SEQUENCE
   ----------------------------------------------------------------
   Photo first, diagram secondary, text explains — applied to the
   two sections this stage owns, nothing else restyled:
   · Flagship — the three-quarter portrait (FT-IMG-002) stops being
     cropped into a landscape banner. It runs tall and large, close
     to its natural portrait proportion, so the temple, the side,
     the hairline and the top read in one frame; the only graphic
     on it is the same minimal zone line + small label the
     photographed tapers already carry. Beneath the spread, the
     side (FT-IMG-003) and the back (FT-IMG-006) run as a
     supporting pair — the two angles a three-quarter portrait
     cannot show — so the feature teaches the whole cut before
     the Get / Skip verdicts. Copy is unchanged.
   · Real Hair — the five views become one numbered documentation
     sequence for the low taper, in chair order: 01 Front,
     02 3/4, 03 Side, 04 Back, 05 Close-up. Four views are the
     library's photographs; the front has no photograph in the
     library, so it stays an honest commissioned plate — set
     narrow beside the large 3/4 frame, so the sequence still
     leads with a real person, never with the empty slot.
   No new colours: ivory, cream, charcoal, forest, brass only. */

/* — Flagship: the portrait at full height, zone line only — */
.flagship-spread .flag-photo .zone-wrap img{aspect-ratio:4/5;object-fit:cover;object-position:center 22%}
@media(min-width:900px){.flagship-spread .flag-photo .zone-wrap img{aspect-ratio:7/10}}
.flag-views{display:grid;gap:28px;margin:0 0 48px}
@media(min-width:900px){.flag-views{grid-template-columns:7fr 5fr;gap:36px;margin-bottom:56px}}
.flag-views figure{margin:0}
.flag-views img{width:100%;object-fit:cover;display:block}
.flag-views .fv-side img{aspect-ratio:4/3;object-position:center 30%}
.flag-views .fv-back img{aspect-ratio:4/3;object-position:center 20%}
@media(min-width:900px){.flag-views .fv-back{margin-top:64px}}

/* — Real Hair: one cut, documented in sequence — */
.doc-index{border-top:var(--border-w-strong) solid var(--ink);padding-top:14px;margin-bottom:34px;display:flex;flex-wrap:wrap;gap:6px 24px;font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.doc-index b{color:var(--ink)}
.doc-row{display:grid;gap:28px;align-items:start}
@media(min-width:900px){.doc-row--lead{grid-template-columns:5fr 7fr;gap:36px}}
.doc-row--pair{margin-top:36px}
@media(min-width:900px){.doc-row--pair{grid-template-columns:1fr 1fr;gap:36px}}
.doc-view{margin:0}
.doc-view img{width:100%;object-fit:cover;display:block}
.doc-view--tq img{aspect-ratio:4/5;object-position:center 22%}
@media(min-width:900px){.doc-view--tq img{aspect-ratio:7/8}}
.doc-view--side img{aspect-ratio:1/1}
.doc-view--back img{aspect-ratio:4/5;object-position:center 20%}
@media(min-width:900px){.doc-view--back img{aspect-ratio:1/1;object-position:center 18%}}
.doc-view--close{margin-top:36px}
.doc-view--close img{aspect-ratio:4/5;object-position:center 30%}
@media(min-width:900px){.doc-view--close img{aspect-ratio:16/10}}
.doc-cap{display:flex;gap:14px;align-items:baseline;margin-top:12px;font-size:14.5px;color:var(--muted);line-height:1.55;max-width:58ch}
.doc-cap .doc-no{font-family:var(--font-serif);font-style:italic;font-size:18px;color:var(--color-brass-text);flex:0 0 auto}
.doc-cap b{color:var(--ink);font-family:var(--font-head);font-weight:600}
.doc-front .doc-no{font-family:var(--font-serif);font-style:italic;font-size:18px;color:var(--color-brass-text);line-height:1}

/* ================================================================
   FINAL REFINEMENT · STAGE 1 — NAVIGATION HIERARCHY + BRAND LOCKUP
   ----------------------------------------------------------------
   Two moves, nothing else restyled:
   1 · Brand lockup — one reusable pattern (.brand-lockup): the FT
       monogram tile, the serif wordmark, and the descriptor
       "Taper fades, explained clearly" stacked beneath it. It is
       the header identity now and the pattern the footer reuses
       in a later stage; the same lockup is stored for WordPress
       as assets/freshtapers-logo.svg (see the asset map in <head>).
       On scroll the descriptor steps away and the tile shrinks,
       so the masthead still condenses to a single quiet row.
   2 · Navigation — the desktop section row carries the decision
       journey at primary weight (Find a Cut · Taper Fades ·
       Haircuts · Compare) ahead of the quieter publication items
       (Home first, then Guides · Gallery · Tools · About; see the
       production-polish block at the end of this stylesheet);
       "Find Your Cut" is the one forest CTA in the nameplate.
       Taper Fades has its own route (#/taper-fades/) and index
       view. In the mobile menu the same CTA leads as a filled
       forest row, the discovery group follows, and Guides ·
       Gallery · Tools · About · Contact sit beneath a ruled
       label as the quieter information group. Haircuts leads to
       the homepage haircut index (the Find Your Cut section,
       anchored at #haircuts).
   Colours, typefaces and the hero are unchanged. */

/* — 1 · THE LOCKUP — */
.brand-lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:var(--touch)}
.brand-lockup .ft-mono{width:40px;height:40px;flex:0 0 auto;display:block}
.lockup-stack{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.brand-lockup .lockup-name{line-height:1.05;white-space:nowrap}
.brand-lockup .lockup-tag{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:13.5px;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--muted);white-space:nowrap}
@media(min-width:820px){
  .brand-lockup .ft-mono{width:44px;height:44px}
  .topbar.scrolled .brand-lockup .ft-mono{width:30px;height:30px}
  .topbar.scrolled .brand-lockup .lockup-tag{display:none}
}
@media(max-width:819px){
  .brand-lockup{gap:9px}
  .brand-lockup .ft-mono{width:32px;height:32px}
  .topbar .brand-lockup .lockup-name{font-size:20px}
  .brand-lockup .lockup-tag{font-size:12px}
}
/* On smaller phones the lockup's descriptor steps aside so the
   wordmark, the forest "Find Your Cut" button and the Menu trigger
   share one clean row at every width — the descriptor still leads
   the nameplate on desktop and the lockup in the footer. */
@media(max-width:560px){.topbar .brand-lockup .lockup-tag{display:none}}

/* — 2 · MOBILE MENU HIERARCHY — the CTA row is filled forest, the
   secondary row (Contact) is quieter than the seven main rows — */
.mobilemenu nav a.mm-cta{background:var(--color-action);color:var(--color-on-action);border-bottom-color:var(--color-action)}
.mobilemenu nav a.mm-cta b{color:var(--color-on-action)}
.mobilemenu nav a.mm-cta small{color:var(--color-on-dark-2)}
.mobilemenu nav a.mm-cta:hover{background:var(--color-action-hover);color:var(--color-on-action)}
.mobilemenu nav a.mm-cta:active{background:var(--color-action-active)}
.mobilemenu nav a.mm-cta[aria-current="page"]{background:var(--color-action-hover)}
.mobilemenu nav a.mm-secondary b{font-size:16px}

/* — THE HAIRCUT INDEX STRIP — inside the homepage Find Your Cut
   section (anchored at #haircuts): Taper Fades named once, with all six
   cut guides as one calm ruled index line — the grouping the
   Haircuts nav item promises. — */
.haircut-index{border-top:var(--border-w) solid var(--border);border-bottom:var(--border-w) solid var(--border);padding:13px 0;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:15px}
.haircut-index .hi-label{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-right:4px}
.haircut-index a{color:var(--ink);text-decoration:none;font-weight:500;display:inline-flex;align-items:center;min-height:var(--touch)}
.haircut-index a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.haircut-index .hi-sep{color:var(--muted)}

/* ================================================================
   FINAL REFINEMENT · STAGE 2 — ARTICLE IDENTITY, EXPLORE FEED,
   INFORMATION ARCHITECTURE
   ----------------------------------------------------------------
   1 · Article identity — every guide and comparison opens with a
       compact FreshTapers lockup (.article-id) above a four-level
       editorial breadcrumb: Home → Haircuts → Taper Fades → the
       article. The lockup reuses the Stage 1 .brand-lockup pattern
       at article scale — present, never intrusive — so a visitor
       arriving from Google knows whose publication this is before
       the title. Haircuts resolves to the homepage haircut index;
       Taper Fades to the Taper Fades index line inside it.
   2 · Explore FreshTapers — the homepage discovery section keeps
       its magazine layout (one featured story, supporting stories,
       compact ruled rows) under its proper name.
   3 · Pathways — each article closes with a ruled "Keep exploring"
       index into the publication's topic structure (comparisons,
       hair types, face shapes, barber wording, maintenance, tools,
       gallery), so the site stays navigable at any article count.
       Links point only at real views and real in-guide sections.
   ================================================================ */
.article-id{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0 14px;border-bottom:var(--border-w) solid var(--border)}
.brand-lockup--article{gap:10px}
.brand-lockup--article .ft-mono{width:32px;height:32px}
.brand-lockup--article .lockup-name{font-family:var(--font-head);font-weight:700;font-size:18px;letter-spacing:-.02em;line-height:1.05;color:var(--ink);white-space:nowrap}
.brand-lockup--article .lockup-name span{color:var(--blue)}
.brand-lockup--article .lockup-tag{font-size:12.5px}
.brand-lockup--article:hover .lockup-name{text-decoration:underline;text-underline-offset:3px}
.article-id-note{font-size:13px;color:var(--muted);line-height:1.45;text-align:right}
@media(max-width:560px){.article-id-note{display:none}}
.crumbs .crumb-sep{color:var(--muted);padding:0 2px}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:500}

/* Keep exploring — the article's way back into the publication:
   ruled rows in two quiet columns, department first, reason second.
   No cards, no boxes; the whole row is the link. */
.article-pathways{margin-top:44px;border-top:var(--border-w-strong) solid var(--ink);padding-top:16px}
.article-pathways ul{list-style:none;margin:10px 0 0;padding:0;display:grid}
@media(min-width:768px){.article-pathways ul{grid-template-columns:1fr 1fr;column-gap:48px}}
.article-pathways li{border-bottom:var(--border-w) solid var(--border)}
.article-pathways a{display:block;padding:12px 0;min-height:var(--touch);text-decoration:none;color:var(--ink)}
.article-pathways a:hover{color:var(--ink)}
.article-pathways a:hover b{text-decoration:underline;text-underline-offset:3px}
.article-pathways .pw-dept{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:2px}
.article-pathways b{font-family:var(--font-head);font-weight:600;font-size:16.5px;line-height:1.35;display:block}
.article-pathways small{color:var(--muted);font-size:14px;line-height:1.55;display:block;margin-top:2px;max-width:52ch}

/* ================================================================
   FINAL REFINEMENT · STAGE 3 — FOOTER AS THE PUBLICATION'S
   CLOSING, WHAT FRESHTAPERS IS, IMAGE CREDITS & LICENSES
   ----------------------------------------------------------------
   1 · Footer — the ink band keeps its brass top rule, but the
       inside is now the specified closing: the Stage 1 brand
       lockup on ink (monogram, wordmark, descriptor), one plain
       statement of what FreshTapers is, three compact departments
       and one quiet legal line. (Superseded in arrangement by the
       Stage 2 footer rebuild at the end of this stylesheet: the
       brand block is now the primary column beside Explore ·
       Tools & Visuals · About / Editorial, with the Learn
       destinations as a ruled topic-index line.) The footer stays
       this size at any article count.
   2 · What FreshTapers is — .foot-is sets the independent-guide
       wording in the footer's quiet voice; the same sentence
       appears once on the About page. Nowhere else.
   3 · Image Credits & Licenses — a text-led page in the same
       .static-doc pattern as the other core pages. Each asset in
       the media register (assets/media-licenses.json) is one ruled
       record of labelled rows, so a long source URL or a missing
       field can never break the layout or hide. Unverified
       photographs carry their flag as a coloured status line,
       never as fine print. */
.foot-top--single{display:block}
.foot-brand{max-width:620px}
.brand-lockup--footer{gap:14px}
.brand-lockup--footer .ft-mono{width:44px;height:44px}
.brand-lockup--footer .lockup-name{font-family:var(--font-head);font-weight:700;font-size:27px;letter-spacing:-.02em;line-height:1.05;color:var(--color-on-dark);white-space:nowrap}
.brand-lockup--footer .lockup-name span{color:var(--color-on-dark-accent)}
.brand-lockup--footer .lockup-tag{color:var(--color-on-dark-2)}
.brand-lockup--footer:hover .lockup-name{text-decoration:underline;text-underline-offset:3px}
footer.site .foot-is{color:var(--color-on-dark-2);font-size:14px;line-height:1.65;max-width:56ch;margin-top:16px}
/* (The near-equal three-column footer grid was removed in the
   Stage 2 footer rebuild — see the Stage 2 block at the end of
   this stylesheet for the asymmetric .foot-layout system.) */
@media print{.brand-lockup--footer .lockup-name,.brand-lockup--footer .lockup-name span,footer.site .foot-is{color:var(--ink)}}
/* — Credits records — */
.credits-note{border:var(--border-w) solid var(--ink);border-left:var(--border-w-accent) solid var(--color-warning);padding:18px 20px;margin:26px 0 6px;background:var(--color-warning-bg)}
.credits-note p{margin:0;font-size:15.5px;line-height:1.65}
.credits-note b{font-family:var(--font-head)}
.credit-record{border-top:var(--border-w) solid var(--border);padding:22px 0 6px;margin-top:22px;scroll-margin-top:84px}
.credit-record h3{font-size:19px;font-weight:700;line-height:1.3}
.credit-file{color:var(--muted);font-size:14px;margin-top:3px}
.credit-status{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-top:10px}
.credit-status--ok{color:var(--color-success)}
.credit-status--pending{color:var(--color-warning)}
.credit-record dl{margin:14px 0 0}
.credit-record .cr-row{display:grid;grid-template-columns:168px 1fr;gap:2px 20px;padding:8px 0;border-top:var(--border-w) solid var(--color-alt)}
.credit-record dt{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.credit-record dd{margin:0;font-size:15.5px;line-height:1.6}
@media(max-width:560px){.credit-record .cr-row{grid-template-columns:1fr}.credit-record dt{padding-top:0}}

/* ================================================================
   FINAL PRODUCTION POLISH · STAGE 1 — HEADER ORIGINALITY +
   NAVIGATION HIERARCHY
   ----------------------------------------------------------------
   1 · Nameplate — the wordmark steps up a size and the descriptor
       sits beneath it as a ruled motto line; a hairline under the
       nameplate meets the nav row's strong rule as a newspaper
       double rule. The "Find Your Cut" CTA is set as an editorial
       plate — tracked capitals on forest with a brass foot rule —
       the one dominant action in the header.
   2 · Desktop nav — the decision journey at primary weight
       (Find a Cut · Taper Fades · Haircuts · Compare), Home quiet
       at the head of the row, and the publication items (Guides ·
       Gallery · Tools · About) smaller, untracked and muted at
       the far end. Hierarchy is carried by size, case and colour,
       not by the CTA alone.
   3 · Mobile — the forest "Find Your Cut" button stays in the bar
       at every width; the menu separates the discovery group from
       the information group with a ruled label and quieter rows.
   4 · Taper Fades view — the standalone index at #/taper-fades/,
       built from the Haircuts section's own index content.
   ================================================================ */

/* — 1 · NAMEPLATE — */
@media(min-width:820px){
  .mast-nameplate{padding-top:22px;padding-bottom:16px;border-bottom:var(--border-w) solid var(--border)}
  .topbar .wordmark{font-size:46px}
  .topbar.scrolled .wordmark{font-size:28px}
  .mast-nameplate .lockup-tag{border-top:var(--border-w) solid var(--border);padding-top:6px;margin-top:6px}
  .topbar.scrolled .mast-nameplate{padding-top:10px;padding-bottom:10px}
  .topbar .header-cta{text-transform:uppercase;letter-spacing:.09em;font-size:13px;font-weight:600;padding:15px 30px;box-shadow:inset 0 -3px 0 var(--color-brass)}
  #main-content [id]{scroll-margin-top:204px}
}

/* — 2 · DESKTOP NAV HIERARCHY — */
@media(min-width:820px){
  .mast-nav-in{justify-content:space-between}
  .mast-nav .mn-main{display:flex;align-items:stretch}
  .mast-nav .mn-group{display:flex;align-items:stretch}
  .mast-nav a.mn-home{font-size:12.5px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--muted);padding:12px 16px 12px 4px}
  .mast-nav a.mn-home:hover{color:var(--ink)}
  .mast-nav a.mn-home[aria-current="page"]{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)}
  .mast-nav .mn-primary a{font-size:14px;letter-spacing:.07em;padding:12px 15px}
  .mast-nav .mn-secondary a{font-size:12.5px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--muted);padding:12px 9px}
  .mast-nav .mn-secondary a:hover{color:var(--ink)}
  .mast-nav .mn-secondary a[aria-current="page"]{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)}
}
@media(min-width:820px) and (max-width:1079px){
  .mast-nav-in{justify-content:center}
  .mast-nav .mn-primary a{font-size:12.5px;letter-spacing:.05em;padding:10px 8px}
  .mast-nav .mn-secondary a{font-size:12px;padding:10px 6px}
  .mast-nav a.mn-home{font-size:12px;padding:10px 10px 10px 2px}
}

/* — 3 · MOBILE MENU GROUPS + NARROW-BAR FIT — */
.mm-label{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:18px 20px 6px;border-top:var(--border-w-strong) solid var(--ink);background:var(--bg);margin:0}
.mobilemenu nav a.mm-secondary b{font-weight:500}
@media(max-width:479px){
  .topbar-in{gap:8px}
  .topbar .brand-lockup{gap:8px}
  .topbar .brand-lockup .ft-mono{width:30px;height:30px}
  .topbar .brand-lockup .lockup-name{font-size:18px}
  .mobile-cta{padding:0 9px;font-size:12.5px}
  .menu-btn{padding:0 10px}
  .mobile-cta + .menu-btn{margin-left:8px}
}

/* — 4 · TAPER FADES INDEX VIEW — */
#view-taperfades .wrap{padding-bottom:84px}
#view-taperfades .tf-head{max-width:700px;margin:10px 0 40px}
#view-taperfades .tf-head .label{display:block;margin-bottom:var(--space-3)}
#view-taperfades .tf-head h1{font-size:var(--text-h2);font-weight:700;line-height:1.12;letter-spacing:-.018em}
@media(min-width:768px){#view-taperfades .tf-head h1{font-size:var(--text-h2-lg)}}
#view-taperfades .tf-head p{font-family:var(--font-serif);font-style:italic;font-size:20px;line-height:1.55;color:var(--ink);margin-top:var(--space-3);max-width:34em}
#view-taperfades .cut-card h2{font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
#view-taperfades .cut-card:hover h2{text-decoration:underline;text-underline-offset:3px}

/* ================================================================
   FINAL PRODUCTION POLISH · STAGE 2 — FOOTER REBUILD
   ----------------------------------------------------------------
   The footer stops being three near-equal columns and becomes the
   publication's closing spread, set asymmetrically on the same ink
   band with the same brass top rule:
   1 · FreshTapers is the primary block — the widest column by a
       clear margin, carrying the lockup, the brand statement and
       the independent-guide sentence, at full text weight.
   2 · The secondary cluster sits beside it in three deliberately
       unequal columns: Explore (the decision journey — Find a Cut,
       Taper Fades, Haircuts, Compare, Guides) set largest and
       brightest, Tools & Visuals (Cut Finder, Barber Brief,
       Gallery, Taper Diagrams, Rebook Calculator) a step quieter,
       and About / Editorial smallest and most muted.
   3 · The old Learn destinations survive as one ruled topic-index
       line beneath the groups — small, muted, unmistakably
       secondary — before the unchanged legal line.
   At phone width everything stacks in the same order of
   prominence; nothing becomes a shrunken column and no row can
   push the band sideways. */
.foot-layout{display:grid;gap:40px}
.foot-layout .foot-brand{max-width:620px}
.foot-groups{display:grid;gap:4px}
@media(min-width:640px){
  .foot-groups{grid-template-columns:1.32fr 1.14fr .94fr;column-gap:36px;border-top:var(--border-w) solid var(--ink-soft);padding-top:10px}
}
@media(min-width:960px){
  .foot-layout{grid-template-columns:minmax(0,5fr) minmax(0,6.8fr);gap:84px}
  .foot-layout .foot-brand{max-width:500px}
  .foot-groups{border-top:0;padding-top:0;column-gap:44px}
}
/* Prominence is carried by size, weight and brightness — Explore
   speaks first, Tools & Visuals supports, About / Editorial is
   the quietest voice in the band. */
.foot-group--explore h3{color:var(--color-on-dark);font-size:12.5px}
.foot-group--explore .foot-links a{font-size:16.5px;font-weight:500}
.foot-group--explore .foot-links a.foot-lead{font-weight:700}
.foot-group--tools .foot-links a{font-size:15px}
.foot-group--about .foot-links a{font-size:14.5px;color:var(--color-on-dark-2)}
.foot-group--about .foot-links a:hover{color:var(--color-on-action)}
/* — Topic index: the Learn destinations, kept reachable quietly — */
.foot-topics{border-top:var(--border-w) solid var(--ink-soft);margin-top:40px;padding-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.foot-topics .ft-topics-label{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-dim);margin-right:10px}
.foot-topics a{color:var(--on-ink-dim);font-size:13.5px;text-decoration:none;display:inline-flex;align-items:center;min-height:var(--touch);padding:4px 7px}
.foot-topics a:hover{color:var(--color-on-action);text-decoration:underline;text-underline-offset:3px}
.foot-topics .ft-sep{color:var(--muted);font-size:13.5px}
.foot-legal{margin-top:26px}
@media print{
  .foot-group--about .foot-links a,.foot-topics a{color:var(--ink)}
  .foot-topics .ft-topics-label,.foot-topics .ft-sep{color:var(--muted)}
}

/* ================================================================
   FINAL PRODUCTION POLISH · STAGE 3 — SPACING, RHYTHM, MIDDLE
   POLISH + CARD AUDIT
   ----------------------------------------------------------------
   Middle of the site only: header, navigation, footer, routes,
   copy, palette and typefaces are untouched. Four moves:
   1 · Rhythm — the homepage chapters stop sharing one vertical
       measure. Each chapter gets the padding its weight earns, in
       the order the page is read: large (flagship, diagram plate)
       → quiet (Start Here, Tools) → dense (Find Your Cut, Face
       Shape) → visual (Hair Type, Real Hair) → editorial
       (Compare, Explore) → interactive (Finder) → quiet close.
       No two adjacent chapters share the same top/bottom pair.
   2 · Hero polish — spacing only: the lede, the actions and the
       cover line breathe a step more, the credit line settles
       onto the page grid, and Start Here gains the top room the
       hero hands it, so the opening reads as one spread.
   3 · Start Here + Flagship — the ruled indexes get air and
       alignment; the flagship's photograph and copy rebalance
       (7/5 instead of 8/4) so the explanation carries its half.
   4 · Card audit — the last filled boxes in the middle become
       open editorial treatments: the Get / Skip verdicts lose
       their white sidebar fill and stand as two ruled columns,
       and the Tools page panels lose their box and become ruled
       sections. Cards survive only where scanning genuinely
       benefits — the comparison specifications, the decision
       summary, the finder options and the honest .slot plates
       (commissioned-photograph placeholders) are unchanged.
   ================================================================ */

/* — 1 · RHYTHM: one measure per chapter weight (homepage) — */
#view-home section[aria-label="Start here"]{padding-top:44px}
#view-home .zone-cream{padding-top:72px;padding-bottom:72px}
#view-home #haircuts{padding-top:64px;padding-bottom:56px}
#view-home #gallery{padding-top:72px;padding-bottom:64px}
#view-home #face-shapes{padding-top:56px;padding-bottom:72px}
#view-home #compare{padding-top:72px;padding-bottom:64px}
#view-home > section:nth-child(10){padding-top:64px;padding-bottom:80px}
#view-home #finder{padding-top:72px;padding-bottom:80px}
#view-home #explore{padding-top:64px;padding-bottom:56px}
#view-home > section:nth-child(14){padding-top:56px;padding-bottom:72px}
#view-home #tools{padding-top:48px;padding-bottom:48px}
#view-home > section:last-child{padding-top:72px;padding-bottom:88px}
@media(min-width:768px){
  #view-home section[aria-label="Start here"]{padding-top:72px;padding-bottom:88px}
  #view-home .zone-cream{padding-top:104px;padding-bottom:104px}
  #view-home .zone-ink{padding-top:96px;padding-bottom:96px}
  #view-home #haircuts{padding-top:80px;padding-bottom:72px}
  #view-home #gallery{padding-top:96px;padding-bottom:80px}
  #view-home #face-shapes{padding-top:72px;padding-bottom:88px}
  #view-home #compare{padding-top:96px;padding-bottom:88px}
  #view-home > section:nth-child(10){padding-top:80px;padding-bottom:96px}
  #view-home #taper-diagram{padding-top:104px;padding-bottom:104px}
  #view-home #finder{padding-top:88px;padding-bottom:96px}
  #view-home #explore{padding-top:80px;padding-bottom:72px}
  #view-home > section:nth-child(14){padding-top:72px;padding-bottom:88px}
  #view-home #tools{padding-top:64px;padding-bottom:64px}
  #view-home > section:last-child{padding-top:88px;padding-bottom:112px}
}
/* Section openings, unified: the label, the heading and the
   standfirst keep one spacing relationship in every chapter —
   and every photograph's caption sits the same distance below
   its frame, wherever the photograph appears. */
#view-home .zone-head{margin-bottom:40px}
@media(min-width:768px){#view-home .zone-head{margin-bottom:48px}}
#view-home .cap{margin-top:12px}
#view-home .doc-cap{margin-top:14px}
#view-home .texrow figcaption,#view-home .galgrid figcaption{padding-top:12px}
/* The reserved ad slot is a breath between chapters, not a seam */
#view-home .ad-slot--home{margin:20px 0 4px}

/* — 2 · HERO POLISH: spacing, CTA hierarchy, credit placement — */
@media(min-width:820px){
  .hv-copy .lede{margin-top:20px}
  .hv-copy .actions{margin-top:32px}
  .hv-meta{margin-top:30px;padding-top:16px}
}
.hv-credit{padding-top:14px;font-size:13px;line-height:1.55}
@media(max-width:819px){
  .hv-copy{padding-bottom:18px}
  .hv-copy .actions{margin-top:20px}
  .hv-credit{padding-top:12px}
}

/* — 3a · START HERE: an editorial entry point, not a widget —
   the split widens, the index rows gain air and one baseline,
   and the fallback links separate from the index by space
   alone (no extra rule, no box). */
@media(min-width:900px){.start-split{gap:64px}}
.start-copy>p{line-height:1.75}
.start-index{margin-top:32px}
.start-index a{padding:16px 0}
.start-index small{max-width:44ch}
.start-index .arr{align-self:center}
.start-links{margin-top:28px}

/* — 3b · FLAGSHIP: image-to-copy balance + transitions — */
@media(min-width:900px){
  .flagship-spread{grid-template-columns:7fr 5fr;gap:52px}
  .flagship-spread .flag-copy{padding-top:18px}
}
.flag-views{margin-top:8px}
#view-home .verdict-cols{margin-top:10px}

/* — 4a · CARD AUDIT — verdicts as open ruled columns: the white
   sidebar fill goes, on the homepage and inside the guides, and
   each half opens with its own signal rule instead — the same
   treatment the guide already used for its top border, now the
   whole presentation. Get and Skip keep equal weight and the
   honesty is untouched; only the box is gone. */
#view-home .verdict-col.get,#view-guide .verdict-col.get{background:transparent;border-top:var(--border-w-strong) solid var(--color-success);padding:20px 0 0}
#view-home .verdict-col.skip,#view-guide .verdict-col.skip{background:transparent;border-top:var(--border-w-strong) solid var(--color-warning);padding:20px 0 0;margin:0}
@media(min-width:900px){
  #view-home .verdict-col.get,#view-guide .verdict-col.get{padding:22px 48px 0 0}
  #view-home .verdict-col.skip,#view-guide .verdict-col.skip{padding:22px 0 0 48px;border-left:var(--border-w) solid var(--border)}
}

/* — 4b · CARD AUDIT — Find Your Cut: the three treatments pull
   further apart. The photograph grid loosens, the fade rows and
   shape rows keep their ruled-index voice with more air above
   each sub-chapter, so height / edge / shape never read as one
   repeated component. */
.fyc-sub{margin-top:64px}
.fyc-note{margin-bottom:26px}
@media(min-width:1024px){.cuts-grid{gap:64px 32px}}

/* — 4c · CARD AUDIT — Explore feed: the featured story leads
   larger; the supporting stories go text-led (smaller thumbs,
   the words carry them); the ruled rows sit further below. */
@media(min-width:900px){.story-feat h3{font-size:34px}}
.story-min{grid-template-columns:88px 1fr}
.story-min img{width:88px;height:108px}
.story-rows{margin-top:52px}

/* — 4d · CARD AUDIT — Gallery preview: the pair offsets like a
   lookbook spread instead of a two-up tile row, and the browse
   index gains the same separation as the other indexes. */
@media(min-width:900px){.gal-pair figure:nth-child(2){margin-top:48px}}
.gal-browse{margin-top:52px}

/* — 4e · CARD AUDIT — Tools: the homepage index rows breathe;
   on the Tools page the two working panels stop being boxes
   and become open ruled sections in the publication's voice —
   the form fields keep their own borders and behaviour. */
.toolindex a{padding:16px 0}
#view-tools .panel{border:0;border-top:var(--border-w-strong) solid var(--ink);background:transparent;padding:28px 0 10px;margin-top:36px}
#view-tools .panel .out{margin-top:20px}

/* — 4f · Real Hair sequence: the pair and the close-up keep one
   gap relationship with the lead row, so the documentation
   reads as one spread, not three stacked blocks. */
.doc-row--pair{margin-top:36px}
@media(min-width:900px){.doc-row--pair{margin-top:40px}.doc-view--close{margin-top:40px}}

/* — Whole-site heading rhythm (content views only): guide,
   compare, tools and gallery heads share the homepage's
   label → heading → standfirst spacing. */
.zone-head{margin-bottom:36px}
@media(min-width:768px){.zone-head{margin-bottom:44px}}
#view-home .zone-head{margin-bottom:40px}
@media(min-width:768px){#view-home .zone-head{margin-bottom:48px}}

/* ================================================================
   HEADER SIMPLIFICATION — ONE STICKY ROW
   ----------------------------------------------------------------
   The three-row masthead (utility strip · centred nameplate ·
   separate section-nav row) collapses into a single sticky row:
   the FreshTapers lockup left, a small centred nav of six
   essential items (Home · Find a Cut · Taper Fades · Haircuts ·
   Compare · Guides), and the one forest "Find Your Cut" CTA
   right, still set as the editorial plate from the polish pass.
   Gallery, Tools and About leave the header only — they remain
   in the footer, the mobile menu and the in-page indexes, and
   every route, data-goto / data-nav hook and aria-current state
   is unchanged. The masthead-era rules above (.mast-utility,
   .mast-nameplate, .mast-nav) no longer match any markup and
   are inert. Palette, typefaces and everything below the
   header are untouched. */

/* The row itself: one calm height at rest; on scroll the
   existing condensed height (.topbar.scrolled .topbar-in)
   takes over, with the lockup's descriptor already stepping
   away and the monogram shrinking (brand-lockup block above). */
.head-row{height:72px;gap:20px}
@media(max-width:819px){.head-row{height:64px;gap:12px}}
.topbar .wordmark{font-size:24px}
@media(min-width:820px){
  .topbar .wordmark{font-size:27px}
  .topbar.scrolled .wordmark{font-size:24px}
}
/* The descriptor stays in the lockup where the row has room
   for it; while the centred nav is on the row (1024–1279px)
   it steps aside so nothing crowds the wordmark or the CTA. */
@media(min-width:1024px) and (max-width:1279px){
  .topbar .brand-lockup .lockup-tag{display:none}
  .topbar .brand-lockup .ft-mono{width:38px;height:38px}
}
/* Centred nav — shown only where the full row fits; below
   1024px the row keeps the phone pattern (lockup · compact
   forest "Find Your Cut" · Menu) instead of a squeezed nav. */
.topbar .head-nav{display:none}
@media(min-width:1024px){
  .topbar .head-nav{display:flex;margin-left:auto;margin-right:auto;align-items:center;gap:2px}
  .topbar .head-nav a{font-size:14.5px;padding:6px 9px}
}
@media(min-width:1280px){.topbar .head-nav a{font-size:15px;padding:6px 11px}}
/* The desktop CTA and the phone controls trade places at the
   same breakpoint, so exactly one "Find Your Cut" action and
   one menu pattern show at any width. */
@media(min-width:1024px){
  .topbar .header-cta{display:inline-flex}
  .topbar .mobile-cta{display:none}
  .topbar .menu-btn{display:none}
}
@media(min-width:820px) and (max-width:1023px){
  .topbar .mobile-cta{display:inline-flex}
  .topbar .menu-btn{display:block}
}
/* Anchor targets stop below the single row now, not below
   the old three-row masthead. */
#main-content [id]{scroll-margin-top:96px}

/* ================================================================
   FOOTER REBUILD — FOUR-COLUMN PUBLICATION CLOSING
   ----------------------------------------------------------------
   The asymmetric editorial closing is replaced by a clean
   four-column footer on the same deep ink band with the same
   brass top rule: brand (no heading) · EXPLORE · SITE · CONNECT,
   then a thin divider and a bottom bar. No newsletter, no social
   icons, no new colours or typefaces. The earlier .foot-layout /
   .foot-groups / .foot-topics rules above no longer match this
   markup for layout; the shared .foot-group / .foot-links /
   .foot-legal pieces are reused and normalised here so all three
   headed columns speak at the same quiet weight. */
.foot-cols{display:grid;gap:36px}
@media(min-width:640px){.foot-cols{grid-template-columns:1fr 1fr;column-gap:44px;row-gap:40px}}
@media(min-width:960px){.foot-cols{grid-template-columns:1.45fr 1.25fr 1fr 1.05fr;column-gap:48px;row-gap:0}}
.foot-cols .foot-brand{max-width:500px}
.foot-cols .foot-group{padding:0}
@media(max-width:639px){.foot-cols .foot-group{padding-top:4px}}
.foot-cols .foot-group h3{color:var(--color-on-dark-2)}
.foot-cols .foot-links{margin-top:6px}
.foot-cols .foot-links a{font-size:15.5px;font-weight:400;color:var(--on-ink);min-height:40px;padding:6px 0}
.foot-cols .foot-links a:hover{color:var(--color-on-action)}
.foot-cols .foot-group--site .foot-links a{font-size:15px}
.foot-connect-note{color:var(--on-ink);font-size:15.5px;line-height:1.55;margin-top:14px}
.foot-connect-sub{color:var(--color-on-dark-2);font-size:14px;line-height:1.6;margin-top:8px;max-width:32ch}
.foot-connect-link{display:inline-flex;align-items:center;min-height:var(--touch);padding:6px 0;color:var(--on-ink);font-size:15.5px;font-weight:500;text-decoration:none;margin-top:10px}
.foot-connect-link:hover{color:var(--color-on-action);text-decoration:underline;text-underline-offset:3px}
.foot-email{color:var(--color-on-dark-2);font-size:14.5px;line-height:1.6;margin-top:4px;overflow-wrap:anywhere}
.foot-divider{border-top:var(--border-w) solid var(--ink-soft);margin-top:44px}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 40px;padding-top:22px;font-size:13.5px;color:var(--on-ink-dim)}
.foot-bottom-main{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;min-width:0}
.foot-bottom-main .copy{color:var(--on-ink)}
.foot-bottom-main nav{display:flex;flex-wrap:wrap;gap:2px 4px}
.foot-bottom-main nav a{color:var(--on-ink-dim);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--touch);padding:4px 7px}
.foot-bottom-main nav a:hover{color:var(--color-on-action);text-decoration:underline;text-underline-offset:3px}
.foot-tagline{color:var(--color-on-dark-2);font-size:13.5px;line-height:1.6;max-width:38ch;margin:0}
@media(min-width:960px){.foot-tagline{text-align:right;padding-top:10px}}
@media(max-width:639px){.foot-bottom{flex-direction:column}.foot-bottom-main nav{margin-left:-7px}}
@media print{.foot-cols .foot-links a,.foot-connect-note,.foot-connect-link{color:var(--ink)}.foot-connect-sub,.foot-email,.foot-tagline,.foot-bottom-main nav a{color:var(--muted)}}

/* ================================================================
   STAGE 3 — MOBILE POLISH + FINAL VERIFICATION
   ----------------------------------------------------------------
   Phone-only refinements to the simplified header and the
   four-column footer. Nothing at desktop widths changes: every
   rule here sits at or below 1023px, and the tightest set sits
   at or below 430px so the 375px and 390px rows gain clear
   spare room instead of merely not overflowing.

   1 · Header fit — at small-phone widths the row trades its
       20px page gutters for 14px header gutters, the double gap
       between the "Find Your Cut" button and the Menu trigger
       (flex gap + sibling margin) collapses to the flex gap
       alone, and the lockup steps down one size. Monogram,
       wordmark, the forest "Find Your Cut" action and the Menu
       trigger stay on one row at 375px with room to spare; all
       three controls keep the 44px touch floor, and the
       descriptor stays hidden at this width (it returns where
       the row has room, per the brand-lockup rules above).
   2 · Menu reachability — the menu carries ten entries with
       explanations, which is taller than a short phone's
       viewport. Inside the sticky bar that left the last
       entries (About, Contact) below the fold with no way to
       scroll to them, so the open panel is now its own scroll
       region, capped below the header row.
   3 · Footer tap targets — the column links sat at 40px,
       under the site's own 44px floor; on stacked and
       two-column widths they now meet it, and the CONNECT
       column's note gets a full reading measure so the column
       reads as a real column on a narrow screen, not a stub. */
@media(max-width:1023px){
  .mobilemenu.open{max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}
@media(max-width:430px){
  .topbar-in{padding:0 14px;gap:8px}
  .topbar .brand-lockup{gap:7px;min-width:0}
  .topbar .brand-lockup .ft-mono{width:30px;height:30px}
  .topbar .brand-lockup .lockup-name{font-size:17px}
  .topbar .brand-lockup .lockup-tag{display:none}
  .mobile-cta{padding:0 10px;font-size:12.5px;min-height:44px}
  .mobile-cta + .menu-btn{margin-left:0}
  .menu-btn{padding:0 11px;min-height:44px}
}
@media(max-width:959px){
  .foot-cols .foot-links a{min-height:44px;padding:7px 0}
}
@media(max-width:639px){
  .foot-cols{gap:40px}
  .foot-connect-sub{max-width:44ch}
  .foot-email{margin-top:6px}
}

/* ---- WordPress: optional Customizer logo in the header lockup ---- */
.ft-custom-logo{height:40px;width:auto}

/* ============ MOBILE FIX 2026-11-12 (v1.0.1) — focused correction, no redesign ============
   Found on the live site at phone width: (1) the header row overflowed at
   390px, so the "Find Your Cut" button covered the end of the wordmark
   ("FreshTap" only); (2) the fixed bottom nav covered content on short
   pages (e.g. the 404 page link). These rules sit last so they win the
   cascade at small widths. Desktop is untouched. */
@media(max-width:560px){
  .topbar-in{padding-left:16px;padding-right:16px;gap:8px}
  .topbar .brand-lockup .lockup-name{font-size:18px}
  .mobile-cta{padding:0 10px;font-size:12.5px}
  .menu-btn{padding:0 10px}
  .mobile-cta + .menu-btn{margin-left:8px}
}
/* v1.0.2: at 320px phones the row still needs ~30px more, so tighten the
   lockup and both buttons one step further. Desktop untouched.
   v1.0.3: still short by one letter ("FreshTaper") in the 320px preview,
   so tighten once more: 15px wordmark, 10px gutters, 7px button padding. */
@media(max-width:360px){
  .topbar-in{padding-left:10px;padding-right:10px;gap:5px}
  .brand-lockup{gap:7px}
  .brand-lockup .ft-mono{width:28px;height:28px}
  .topbar .brand-lockup .lockup-name{font-size:15px}
  .mobile-cta{padding:0 7px;font-size:11.5px}
  .menu-btn{padding:0 7px;font-size:14px}
  .mobile-cta + .menu-btn{margin-left:6px}
}
@media(max-width:819px){
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
  footer.site{padding-bottom:52px}
}