/* Advisory site layout. All versions share this file.
   body.v-a = index.html  (centered hero, edge-to-edge bar)
   body.v-b = index2.html (same page as A, floating glass bar)
   body.v-c = index3.html (split hero with a latest-writing rail)

   Sizes come from the scale in tokens.css. At >=1280 the inner width is
   1200 - 176 = 1024px. In the v-c hero the space you see between the headline
   and the rail is always `1024 - headline text width - rail width`, however the
   column and gap are split; at 72px the headline runs 683px, so a 288px rail
   leaves a 53px channel — the E prototype's was 56px. */

/* ---------- anchor landings ----------
   A jump should leave a clear band of paper between the bar and whatever the
   link points at. Every target lands the same way: the bar's measured height
   (--bar-h, set by the header controller in components.js) plus --anchor-gap.
   Sections carrying their own top padding subtract it as --anchor-inset, so the
   gap Jason sees is the same on all four regardless of internal spacing. */
.ways,.recent,.faq,.about,.ask{
  --anchor-gap:32px;
  --anchor-inset:0px;
  scroll-margin-top:calc(var(--bar-h,88px) + var(--anchor-gap) - var(--anchor-inset));
}
.faq{--anchor-inset:96px}
.about{--anchor-inset:96px}
.ask{--anchor-inset:80px}

/* ---------- header ---------- */
/* The resting hairline fades once you scroll; from there the scroll-edge blur
   band in components.css takes over as the bar's lower boundary. The .stuck
   override outguns components.css's `.site-header.stuck` rule, which would
   otherwise repaint the line in browsers without backdrop-filter. */
.v-a .site-header{border-bottom:1px solid var(--rule);transition:border-bottom-color .25s ease}
.v-a .site-header.stuck{border-bottom-color:transparent}
.v-a .site-header .wrap{height:88px}
.v-a .brand{font-size:38px}
/* Inactive links stay quiet so the active one reads as the current section. */
.v-a .site-header nav,.v-b .site-header nav{gap:40px;font-size:18px;color:#777}

/* v-b: the bar is a floating glass pill, after Raycast's — the header element
   stays a full-width fixed strip but goes invisible and click-through, and the
   .wrap inside it becomes the visible bar. Spacing lives as header padding, not
   wrap margin, so the measured offsetHeight (--bar-h, the spacer) stays true. */
.v-b .site-header{padding:20px 24px;border-bottom:none;background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}
.v-b .site-header.stuck{border-bottom:none}
.v-b .site-header::after{display:none}
/* The pill's outer edges line up with the page's text column — same
   content width as every .wrap below it — so the bar reads as part of the
   page, not a widget. The header's own padding is what insets it from the
   viewport edges when the window is narrower than the column.
   --pill-edge is the liquid-glass specular highlight; declared transparent
   here so both shadow rules can include it, lit only inside @supports. */
.v-b .site-header .wrap{pointer-events:auto;--pill-edge:inset 0 0 0 0 transparent;
  height:84px;max-width:calc(var(--w) - 2*var(--gutter));padding:0 40px;
  border-radius:20px;background:var(--paper);border:1px solid var(--rule);
  box-shadow:var(--pill-edge),0 2px 8px rgba(0,0,0,.04),0 16px 40px rgba(0,0,0,.07);
  transition:height .2s ease,padding .2s ease,box-shadow .25s ease}
/* A touch more lift once content is passing beneath. */
.v-b .site-header.stuck .wrap{box-shadow:var(--pill-edge),0 4px 12px rgba(0,0,0,.06),0 22px 52px rgba(0,0,0,.11)}
/* Liquid-glass material, same gates as the shared bar in components.css: the
   frost is a backdrop blur; the glass read comes from the specular line along
   the top rim and the border lifted toward white. A displacement-map
   refraction (à la ybouane/liquidglass) would be Chromium-only and costs a
   full SVG filter pass per frame — not worth it for a nav bar. */
@supports (((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and (background:color-mix(in srgb,red 50%,transparent))){
  .v-b .site-header .wrap{--pill-edge:inset 0 1px 0 rgba(255,255,255,.5);
    background:color-mix(in srgb,var(--paper) 55%,transparent);
    border-color:color-mix(in srgb,#fff 40%,var(--rule));
    -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6)}
  @media (prefers-reduced-transparency:reduce){
    .v-b .site-header .wrap{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
  }
}
/* Full-size wordmark, same as A — the taller pill has room for it. The nudge
   is optical: Newsreader's caps sit high in their line box (short descenders),
   so flex centering leaves the wordmark riding above true center. */
.v-b .brand{font-size:38px;transform:translateY(.05em)}

.v-c .site-header .wrap{height:160px}
.v-c .brand{font-size:43px}

/* The bar holds one size at every scroll position — no compacting. The .stuck
   class still drives the border and scroll-edge effect in components.css. */

/* At rest the page is already at the top, so the wordmark looks but doesn't
   act like a link. Once you've scrolled (.stuck), it becomes a real "back to
   top" control — the shared anchor-nav handler in components.js already
   smooth-scrolls any href="#" click to y:0, so only the affordance is gated
   here. */
.site-header:not(.stuck) .brand{cursor:default;pointer-events:none}

/* ---------- hero ---------- */
/* Scoped to .hero-copy so the v-b rail's own headings and text are untouched.
   clamp() keeps the headline inside its column at every width, which a fixed
   size plus white-space:nowrap could not do. */
.hero-copy h1{letter-spacing:-.035em;font-weight:400}
.hero-copy p{font-size:24px;line-height:1.5;color:var(--gray)}
.cta{display:flex;gap:24px;margin-top:56px}

.v-a .hero .wrap,.v-b .hero .wrap{text-align:center;padding-top:120px;padding-bottom:136px}
/* The cap sits inside the standard 88px gutter: at 100px the longest line runs
   949px against 1024px of content. Past about 107px the hero would need its
   own narrower gutter to fit. */
.v-a .hero-copy h1,.v-b .hero-copy h1{font-size:clamp(40px,calc((100vw - 176px) / 9.7),100px);line-height:1}
.v-a .hero-copy p,.v-b .hero-copy p{margin:40px auto 0;max-width:560px}
.v-a .cta,.v-b .cta{justify-content:center}

/* minmax(0,1fr) lets the copy column shrink; a bare 1fr keeps min-width:auto
   and pushes the page wider than the viewport. */
.v-c .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 288px;column-gap:24px;padding-top:24px;padding-bottom:136px;align-items:start}
/* The headline tracks its column rather than the viewport, so the channel to
   the rail stays ~35-53px at every width instead of gaping open below 1200.
   The divisor is measured: the longest line runs about 9.5x the font size in
   Newsreader, and 480px covers the two gutters plus the rail and gap. */
.v-c .hero-copy h1{font-size:clamp(36px,calc((100vw - 480px) / 9.8),72px);line-height:1.05}
.v-c .hero-copy p{margin:32px 0 0;max-width:512px}
.v-c .cta{margin-top:48px}

/* latest-writing rail (v-c only) */
.start{padding-top:16px}
.start .label{display:block;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.start-item{padding:24px 0 16px;border-bottom:1px solid var(--rule)}
.start-item.last{border-bottom:none}
.start-item h3{font-size:24px;line-height:1.2;letter-spacing:var(--track-display);margin-bottom:8px}
.start-item p{font-size:16px;line-height:1.55;color:var(--gray);margin:0}
.start .arrow-link{margin-top:24px}

/* ---------- latest writing rows (v-a and v-b) ---------- */
/* Rows are the shared .erow component in components.css — the same stacked
   layout the Personal site uses. Only the section's own spacing lives here. */
.recent .wrap{padding-bottom:144px}
.recent .arrow-link{margin-top:32px}

/* ---------- about / ask / subscribe ---------- */
/* The portrait takes its own column beside the copy, so the copy is not held to
   the 456px measure the shared two-column band needs. No bottom rule: the ask
   below opens with one, and two rules a hair apart read as a mistake. */
.about .inner{grid-template-columns:260px minmax(0,1fr);column-gap:64px;align-items:center;
  padding:96px 0 62px;border-top:1px solid var(--rule);border-bottom:none}
.about-portrait{display:block;width:260px;height:284px;border-radius:4px;
  object-fit:cover;object-position:50% 10%}
.about h2{font-size:36px;max-width:640px}
.about p{max-width:640px}

/* The closing ask: one sentence and the address, centred, with no label over
   it. Ruled top and bottom, and every gap around those rules is the same 72px —
   the About copy above, the ask inside, and "Stay in the loop" below — so the
   band reads as evenly set and the page keeps moving rather than stalling in
   white space. The padding numbers are not all 72 because the neighbours are
   underlined links whose rules hang below their boxes — 62 above and 76 below
   is what measures 72 on screen. Change one of the four and change all four. */
.ask .wrap{padding:72px 0 76px;text-align:center;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ask h2{font-size:40px;letter-spacing:var(--track-display);margin-bottom:28px}
.ask .mail{font-family:var(--serif);font-size:28px;
  border-bottom:1px solid var(--accent);padding-bottom:4px}

.subscribe .wrap{text-align:center;padding-top:72px;padding-bottom:128px}
.subscribe .form{justify-content:center}

@media (max-width:1023px){
  /* .faq-inner drops to 64px of top padding here; .about .inner holds 96px. */
  .faq{--anchor-inset:64px}
  /* components.css collapses .about .inner here too, but this file loads after
     it, so the two-column rule above would otherwise win inside this query. */
  .about .inner{grid-template-columns:minmax(0,1fr);row-gap:40px;align-items:start}
  .about-portrait{width:220px;height:240px}
  .v-c .site-header .wrap{height:120px}
  .v-c .hero .wrap{grid-template-columns:1fr;row-gap:56px}
}

/* The stacked bar. It starts where the wordmark and the nav stop fitting on one
   line (~750px), not at the phone breakpoint — below 800 the wordmark used to
   wrap to two lines inside a fixed-height bar and run into the nav. Version-
   scoped selectors, because .v-a / .v-b / .v-c win over the bare ones above.
   Dimensions come from the --bar-* tokens in components.css, shared with the
   Personal bar. */
@media (max-width:800px){
  .v-a .site-header .wrap,
  .v-c .site-header .wrap{height:auto;padding-top:var(--bar-pad-top,var(--bar-pad));padding-bottom:var(--bar-pad);flex-wrap:wrap;row-gap:var(--bar-row-gap)}
  .v-a .brand,.v-c .brand{font-size:var(--bar-brand)}
  /* C's wordmark carries the lamp glyph — .8em wide with a .5em margin — so it
     runs about 9.3x its font size rather than 8. Its own divisor keeps the
     glyph from dropping to a second line on a phone. */
  .v-c .site-header .wrap{--bar-brand:clamp(24px,calc((100vw - 2*var(--gutter) - 18px) / 9.6),38px)}
  .v-a .site-header nav,
  .v-c .site-header nav{flex:1 1 100%;gap:var(--bar-nav-gap);font-size:var(--bar-nav-size);flex-wrap:wrap}
  /* v-b keeps the pill: full-width minus a small inset, softer radius once the
     nav wraps to its own row. */
  .v-b .site-header{padding:12px}
  /* The pill's own padding, not the page gutter, is what the wordmark has to
     fit inside — 12px of header padding plus 24px of pill padding a side. */
  .v-b .site-header .wrap{height:auto;max-width:none;padding:var(--bar-pad-top,var(--bar-pad)) 24px var(--bar-pad);border-radius:20px;flex-wrap:wrap;row-gap:var(--bar-row-gap);
    --bar-brand:clamp(24px,calc((100vw - 72px - 18px) / 8.2),38px)}
  .v-b .brand{font-size:var(--bar-brand)}
  .v-b .site-header nav{flex:1 1 100%;gap:var(--bar-nav-gap);font-size:var(--bar-nav-size);flex-wrap:wrap}
}

/* Version-scoped selectors, because .v-a / .v-b / .v-c win over the bare ones above. */
@media (max-width:640px){
  /* .about .inner drops to 64px here; the phone bar is taller for its width, so
     the gap tightens to keep the target on screen. */
  .ways,.recent,.faq,.about,.ask{--anchor-gap:24px}
  .about{--anchor-inset:64px}
  .hero-copy p{font-size:20px}
  .v-a .hero .wrap,.v-b .hero .wrap{padding-top:64px;padding-bottom:80px}
  .v-c .hero .wrap{padding-bottom:80px}
  .recent .wrap{padding-bottom:80px}
  /* Same four-way match at phone widths, one step tighter. */
  .about .inner{padding:64px 0 48px}
  .about-portrait{width:220px;height:240px}
  .ask .wrap{padding:48px 0}
  .ask h2{font-size:32px;margin-bottom:20px}
  .ask .mail{font-size:22px}
  .subscribe .wrap{padding-top:48px;padding-bottom:80px}
  .cta{flex-wrap:nowrap;gap:12px}
}

/* ---------- version 1 spacing ----------
   The site build marks <body> .site-v1 when the writing list is left out.
   Each section's bottom padding was sized to sit above the essay rows; with
   nothing between them the paddings stack into 240px of paper, so version 1
   brings them down to one consistent 144px between blocks (96 on phones). */
.site-v1 .ways .wrap{padding-bottom:112px}
.site-v1 .orgs .wrap{padding-bottom:48px}
.site-v1 .faq .wrap{padding-bottom:48px}
@media (max-width:640px){
  .site-v1 .ways .wrap{padding-bottom:64px}
  .site-v1 .orgs .wrap,.site-v1 .faq .wrap{padding-bottom:32px}
}