/* vic.law — site styles. Reads brand tokens and fonts from ../../brand/tokens.css. */
@import url("../../brand/tokens.css");

:root {
  --paper: var(--hoji-paper);
  --ink: var(--hoji-ink);
  --ink-muted: #54565a;
  --cobalt: var(--hoji-cobalt);
  --red: var(--hoji-vermilion);
  --on-red: #fff;
  --editorial: var(--hoji-font-editorial);
  --reading: var(--hoji-font-reading);

  --gutter: clamp(16px, 4.4vw, 72px);
  --line: 1.5px;                             /* stroke-line */
  --rule: clamp(7px, .9vw, 14px);            /* stroke-rule, heavier than the 6px token to match the composition */
  --rgap: clamp(10px, 1.05vw, 17px);         /* gap between rules */
  --rules-h: calc(3 * var(--rule) + 2 * var(--rgap));
  /* Header bottom to the cap line of the Start, Learn and About headings: 3px under About's two bars. */
  --title-line: calc(2 * var(--rule) + var(--rgap) + 3px);
  --hump: 0px;
  --crest-y: calc(var(--rules-h) - var(--rule) * .5);
  --radius-tag: 10px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --home-stage: 1920px;
  --stage-edge: max(0px, calc((100vw - var(--home-stage)) / 2));

  /* cutout geometry (see assets/cats/cutouts.json) */
  --peek-w: clamp(170px, min(17vw, 25dvh), 340px);
  --peek-h: calc(var(--peek-w) * 889 / 1768);
  --tag-h: clamp(68px, min(7.8vw, 10dvh), 132px);

  /* Home hero geometry. The button remains semantic HTML; Hoji is a separate
     transparent illustration so neither layer can distort the other. */
  --cta-w: clamp(400px, min(42vw, 70dvh), 760px);
  --cta-left: clamp(190px, 23.5vw, 360px);
  --cta-clear: calc(var(--tag-h) * 1.04);
  --grapple-w: clamp(390px, min(50vw, 73dvh), 1100px);

  /* About portrait — brand/assets/compositions/portrait-hoji.{webp,png}, 1121×1403.
     Hair top y=136, Hoji's paws x 100→440 with their pads bottoming at y≈800.
     --portrait-w  width; portrait and hero height scale from it together.
     --paw-lift    nudge the whole portrait up (+) or down (−) against the top rule
     --portrait-headroom  paper between the hero's top edge and the top of Victor's hair */
  --portrait-w: clamp(360px, 43vw, 720px);
  --paw-lift: 0px;
  --portrait-headroom: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 14% 12%, rgba(255,255,255,.28), transparent 44%),
    radial-gradient(ellipse at 82% 32%, rgba(164,121,75,.07), transparent 48%),
    radial-gradient(ellipse at 42% 88%, rgba(255,255,255,.18), transparent 42%);
  color: var(--ink);
  font-family: var(--reading);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* printed-paper grain over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: .34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.7 0 0 0 -.25 1.7 0 0 0 -.25 1.7 0 0 0 -.25 0 0 0 0 .3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 60; padding: 10px 16px; background: var(--paper); font-weight: 600; border: var(--line) solid var(--ink); }
.skip-link:focus { top: 12px; }
.shell { padding-inline: var(--gutter); }
/* SVG filters rasterize the whole element before compositing. That softened
   font antialiasing and also displaced the edges of filled buttons. Keep the
   legacy hook in the markup, but render live type and controls natively; the
   fixed paper grain still supplies the printed surface character. */
.litho { filter: none; }

/* Header */
.site-header {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 48px);
  padding-block: clamp(16px, 2vw, 30px) clamp(12px, 1.4vw, 20px);
  border-bottom: var(--line) solid var(--ink);
}
.brand { display: block; width: clamp(150px, 26vw, 420px); flex: none; }
.brand img { width: 100%; }
.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 44px); margin-left: auto; }
.site-nav a { font-size: clamp(1rem, 1.7vw, 1.75rem); line-height: 1.2; padding-bottom: 2px; border-bottom: 3px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--red); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--cobalt); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: var(--on-red); border: 0;
  font-weight: 600; font-size: clamp(1rem, 1.7vw, 1.75rem); line-height: 1.2;
  padding: .55em 2.1em; border-radius: var(--radius-tag);
  transition: transform .12s var(--ease);
}
.site-nav .btn { padding: .55em 2.1em; border-bottom: 0; }
.btn > span, .cta > span {
  display: block;
  width: 100%;
  line-height: 1;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

/* Home hero */
main { flex: 1; display: flex; flex-direction: column; }
.hero { position: relative; overflow: hidden; padding-top: clamp(16px, min(2.8vw, 4dvh), 44px); padding-bottom: calc(var(--rules-h) + var(--cta-clear) + clamp(4px, .6vw, 10px)); }
.hero h1 {
  margin: 0;
  font: 900 clamp(5.5rem, min(14vw, 18.5dvh), 19rem) / .86 var(--editorial);
  letter-spacing: -.04em;
  color: var(--red);
  max-width: min(62%, 1150px);
  position: relative; z-index: 2;
}
.hero-scene { display: contents; }
.dek-mobile { display: block; position: relative; z-index: 2; max-width: none; }
.mobile-break { display: none; }
.rules { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: var(--rgap); }
.rules i { display: block; height: var(--rule); background: var(--ink); }
.home .hero .rules { width: 100%; }
/* The real CTA and the Hoji illustration are independent layers. */
.cta {
  display: flex; align-items: center; justify-content: center;
  position: absolute; z-index: 3;
  left: calc(var(--stage-edge) + var(--cta-left)); bottom: var(--rules-h);
  width: var(--cta-w);
  height: var(--tag-h);
  background: var(--red); color: var(--on-red);
  border-radius: var(--radius-tag);
  font-weight: 600; font-size: clamp(1.6rem, min(2.8vw, 4dvh), 3rem); line-height: 1;
  letter-spacing: -.02em;
}
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.cat { position: absolute; pointer-events: none; user-select: none; }
.cat-peek { z-index: 4; left: calc(var(--stage-edge) + clamp(24px, 3vw, 58px)); bottom: calc(var(--rules-h) - var(--peek-h) * .125); width: var(--peek-w); }
.cat-grapple {
  z-index: 4;
  /* The lower front paw begins at x≈316/1318 of this asset. Keep that paw
     slightly inside the CTA's right edge, while retaining the old right-edge
     placement as a maximum so narrow desktops do not crop Hoji unnecessarily. */
  left: min(
    calc(var(--stage-edge) + var(--cta-left) + var(--cta-w) - var(--grapple-w) * .26),
    calc(100% - var(--stage-edge) + clamp(8px, 1.2vw, 22px) - var(--grapple-w))
  );
  right: auto;
  bottom: var(--rules-h);
  width: var(--grapple-w);
}
.dek {
  margin: clamp(10px, 1vw, 18px) 0 clamp(12px, 1vw, 16px);
  font-weight: 600; font-size: clamp(1.35rem, min(2.7vw, 4.2dvh), 3rem); line-height: 1.15; letter-spacing: -.02em;
}
.dek .hoji { color: var(--cobalt); }

/* Home is a single-screen composition on desktop. The hero absorbs the exact
   space between the fixed header and footer, so the rules meet the footer. */
@media (min-width: 821px) {
  body.home { height: 100dvh; min-height: 0; overflow: hidden; }
  .home main { flex: 1 1 auto; min-height: 0; }
  .home .hero { flex: 1 1 auto; min-height: 0; }
  .home .site-header, .home .site-footer { flex: none; }
  .home .site-header, .home .hero, .home .site-footer {
    padding-inline: calc(var(--stage-edge) + var(--gutter));
  }
  .home .site-footer {
    padding-block: clamp(10px, calc(8dvh - 46px), 90px);
  }
}
@media (min-width: 821px) and (min-aspect-ratio: 8 / 5) {
  .home .hero h1 {
    font-size: clamp(5.5rem, min(14vw, 17.5dvh), 19rem);
  }
}

/* Footer */
.site-footer {
  margin-top: auto;
  border-top: var(--line) solid var(--ink);
  padding-block: clamp(12px, 1.1vw, 17px) clamp(14px, 1.4vw, 22px);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 48px);
  font-size: clamp(.9rem, 1.15vw, 1.15rem);
}
.site-footer .brand { width: auto; }
.site-footer .brand img { width: clamp(82px, 6.4vw, 104px); }
.site-footer nav { display: flex; gap: clamp(16px, 2.5vw, 40px); }
.site-footer nav.legal { margin-inline: auto; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* About — one paired composition: portrait left, heading and prose right. */
.page-title { margin: 0; font: 900 clamp(4rem, 11.5vw, 12.5rem) / .86 var(--editorial); letter-spacing: -.04em; color: var(--red); }
.about-page main { min-height: 0; }
.about-layout {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(660px, 75dvh, 940px);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(44px, 4.2vw, 72px);
  padding-top: clamp(42px, 4.8vw, 70px);
  padding-inline: max(var(--gutter), calc((100vw - 1448px) / 2 + 58px));
  padding-bottom: var(--rules-h);
}
.about-portrait {
  grid-column: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.about-portrait img {
  width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: center bottom;
  flex: none;
}
.about-copy {
  grid-column: 2;
  align-self: center;
  width: 100%; max-width: 520px;
  min-width: 0;
}
.about-copy .page-title { font-size: clamp(5rem, 8.3vw, 9.5rem); }
.about-body { margin-top: clamp(18px, 1.8vw, 26px); }
.about-body p {
  margin: 0;
  font-size: clamp(1.05rem, 1.42vw, 1.35rem);
  line-height: 1.5;
}
.about-body p + p { margin-top: 1em; }
.about-social {
  display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 2vw, 30px);
  margin-top: clamp(22px, 2vw, 30px);
  font-size: clamp(1rem, 1.2vw, 1.15rem); font-weight: 600;
}
.about-social a { border-bottom: 2px solid var(--cobalt); }
.about-social a:hover { border-bottom-color: var(--red); }
.about-rules { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; gap: var(--rgap); }
.about-rules i { display: block; height: var(--rule); background: var(--ink); }

/* Desktop About is a single-viewport composition. Height-aware type and
   spacing keep the complete portrait, copy, rules, and footer visible at
   ordinary 16:9 sizes without preserving a decorative band above the hero. */
@media (min-width: 821px) {
  body.about-page { height: 100dvh; min-height: 0; overflow: hidden; }
  .about-page .site-header, .about-page .site-footer { flex: none; }
  .about-page main { flex: 1 1 auto; min-height: 0; }
  .about-layout {
    height: 100%;
    min-height: 0;
    padding-top: clamp(8px, 1.4dvh, 18px);
  }
  .about-portrait, .about-copy { min-height: 0; }
  .about-portrait img { transform: scale(1.055); transform-origin: center bottom; }
  .about-copy { transform: translateY(-3dvh); }
  .about-copy .page-title { font-size: clamp(4.5rem, min(8.3vw, 16dvh), 9.5rem); }
  .about-body { margin-top: clamp(14px, 1.8dvh, 22px); }
  .about-body p {
    font-size: clamp(1rem, min(1.42vw, 2.25dvh), 1.35rem);
    line-height: 1.42;
  }
  .about-body p + p { margin-top: .8em; }
  .about-social { margin-top: clamp(16px, 2.2dvh, 24px); }
}

@media (min-width: 821px) and (max-height: 650px) {
  .about-copy { transform: none; }
}

/* Learn — title/Hoji hero, editorial feed, and one bottom rule anchor. */
.learn-page main { display: block; }
.learn-head {
  display: grid;
  grid-template-columns: max-content minmax(300px, 380px);
  justify-content: center;
  column-gap: clamp(24px, 3vw, 56px);
  align-items: center;
  min-height: 0;
  overflow: hidden;
  padding-block: clamp(16px, 1.5vw, 24px) clamp(14px, 1.25vw, 20px);
}
.learn-head h1 {
  margin: 0;
  color: var(--red);
  font: 900 clamp(5.2rem, 11vw, 10.25rem) / .84 var(--editorial);
  letter-spacing: -.045em;
}
.reading-cat {
  width: min(100%, clamp(300px, 27vw, 380px));
  justify-self: start;
  align-self: center;
}
.reading-queue {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(330px, .78fr);
  gap: clamp(34px, 4vw, 68px);
  width: 100%; max-width: 1500px;
  margin: 0 auto;
  padding-top: clamp(8px, 1vw, 16px);
  padding-bottom: 0;
}
.video-embed { aspect-ratio: 16 / 9; background: #eee3d3; overflow: hidden; }
.video-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.feature-copy { padding-top: clamp(18px, 1.7vw, 26px); }
.feed-meta {
  display: flex; gap: 14px;
  margin: 0 0 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 13px; font-weight: 600;
}
.feed-meta span:first-child { color: var(--cobalt); }
.feature-copy h2 {
  margin: 0;
  font: 700 clamp(2.65rem, 5vw, 4.65rem) / .96 var(--editorial);
  letter-spacing: -.03em;
}
.feature-copy > p:last-child { margin: 18px 0 0; }
.feed-queue { border-top: var(--line) solid var(--ink); }
.queue-item { display: grid; grid-template-columns: 42% 1fr; gap: 22px; padding: 20px 0; align-items: start; }
.queue-item + .queue-item { border-top: var(--line) solid var(--ink); }
.queue-item img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.queue-copy { display: block; }
.queue-copy .feed-meta { margin-bottom: 9px; }
.queue-copy strong {
  display: block;
  font: 700 clamp(1.75rem, 2.8vw, 2.7rem) / .98 var(--editorial);
  letter-spacing: -.02em;
}
.learn-bottom-rules {
  display: grid;
  gap: var(--rgap);
  margin-top: clamp(48px, 5vw, 76px);
}
.learn-bottom-rules i { display: block; height: var(--rule); background: var(--ink); }

/* Simple pages: learn, start, legal */
.page { flex: 1; position: relative; padding-top: clamp(28px, 3.6vw, 56px); padding-bottom: calc(clamp(40px, 5vw, 80px) + var(--rules-h)); }
.page .page-title { font-size: clamp(3.4rem, 9vw, 9.5rem); max-width: 70%; }
.page .body { max-width: 34em; margin-top: clamp(18px, 2.2vw, 34px); font-size: clamp(1.05rem, 1.35vw, 1.4rem); line-height: 1.45; }
.page .body p { margin: 0 0 1em; }
.page .body strong { font-weight: 600; }
.cat-step { --sw: clamp(160px, 24vw, 380px); width: var(--sw); right: 4%; bottom: var(--rules-h); z-index: 2; }
.cat-sleep { --sw: clamp(150px, 22vw, 340px); width: var(--sw); right: 5%; bottom: var(--rules-h); z-index: 2; }
.page .dek { font-size: clamp(1.2rem, 2vw, 2rem); }

/* Phone and small tablets */
@media (max-width: 820px) {
  :root {
    --rule: clamp(7px, 2.2vw, 12px); --rgap: clamp(10px, 2.6vw, 18px);
    --peek-w: clamp(200px, 70vw, 354px); --tag-h: clamp(68px, 16vw, 130px);
    --cta-clear: 0px;
    --portrait-w: 56vw;
    --portrait-headroom: clamp(10px, 4vw, 22px);
  }
  .site-header { flex-wrap: nowrap; gap: 10px 14px; padding-block: 8px; }
  .brand { width: clamp(120px, 33vw, 200px); }
  .site-nav { gap: clamp(10px, 3vw, 18px); }
  .site-nav a, .btn { font-size: clamp(.9rem, 3.8vw, 1.15rem); }
  .site-nav .btn { min-height: 44px; padding: 0 1.1em; }
  main:has(.hero) { min-height: 0; }
  .hero { flex: 1; min-height: 0; padding-top: clamp(18px, 4.6vw, 32px); padding-bottom: 0; display: flex; flex-direction: column; }
  .hero h1 { max-width: none; font-size: clamp(3.6rem, 17.5vw, 8.5rem); letter-spacing: -.045em; }
  .dek-mobile { display: block; max-width: 15em; margin: clamp(10px, 2.6vw, 18px) 0 0; }
  .mobile-break { display: initial; }
  .dek-desktop { display: none; }
  .hero-scene { display: flex; flex-direction: column; margin-top: clamp(12px, 3vw, 20px); }
  .cat-peek { display: block; position: relative; left: auto; bottom: auto; align-self: center; margin-top: 0; margin-bottom: calc(var(--peek-h) * -.14); }
  .cat-grapple { display: none; }
  /* Phones retain the compact, full-width CTA and peeking Hoji composition. */
  .cta {
    position: static; width: 100%; max-width: 640px; align-self: center;
    padding-inline: clamp(16px, 5vw, 34px);
    font-weight: 600; font-size: clamp(1.15rem, min(4.9vw, var(--tag-h) * .5), 2.6rem); letter-spacing: -.01em;
  }
  .hero .rules { position: static; margin-top: 0; }
  .home .hero .rules { width: 100%; }
  .dek { font-size: clamp(1.35rem, 5.6vw, 2.9rem); margin-block: clamp(22px, 6vw, 48px) clamp(18px, 4vw, 34px); }
  .site-footer {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 10px;
    padding-block: 14px 18px;
    font-size: clamp(.72rem, 3.2vw, .82rem);
  }
  .site-footer .brand { width: auto; }
  .site-footer nav {
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(12px, 4vw, 22px);
  }
  .site-footer nav.legal { margin-inline: 0; }
  .site-footer nav.social { margin-left: 0; }

  .about-layout {
    flex: none;
    width: 100%; height: auto; min-height: 0;
    grid-template-columns: minmax(0, 58%) minmax(0, 42%);
    grid-template-rows: clamp(250px, 64vw, 330px) auto;
    column-gap: 0;
    padding-top: 0;
    padding-inline: clamp(16px, 4vw, 32px);
    padding-bottom: var(--rules-h);
  }
  .about-portrait {
    grid-column: 1; grid-row: 1;
    justify-content: center;
    align-items: center;
  }
  .about-portrait img { height: 100%; object-fit: contain; object-position: center; transform: translateY(-3%); }
  .about-copy { display: contents; }
  .about-copy .page-title {
    grid-column: 2; grid-row: 1;
    align-self: center;
    padding: 0;
    font-size: clamp(2.75rem, 11.5vw, 4.4rem);
  }
  .about-copy .about-body {
    grid-column: 1 / -1; grid-row: 2;
    margin: 0;
    padding: clamp(22px, 5vw, 34px) 0 clamp(34px, 8vw, 52px);
  }
  .about-body p {
    font-size: clamp(1.05rem, 3.4vw, 1.18rem);
    line-height: 1.52;
  }
  .page-title { font-size: clamp(3.6rem, 16vw, 8rem); }
  .learn-head {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: clamp(18px, 5vw, 30px);
    padding-bottom: clamp(26px, 7vw, 38px);
    overflow: visible;
  }
  .learn-head h1 {
    width: 100%;
    text-align: center;
    font-size: clamp(5rem, 26vw, 7rem);
    line-height: .8;
  }
  .reading-cat {
    width: min(64vw, 270px);
    align-self: center;
    margin-top: clamp(-2px, -.5vw, 0px);
  }
  .reading-queue { display: block; padding-top: 0; padding-bottom: 0; }
  .feature-copy { padding-top: 18px; }
  .feature-copy h2 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .feature-copy > p:last-child { margin-top: 14px; font-size: clamp(1rem, 4.4vw, 1.15rem); line-height: 1.45; }
  .feed-queue { margin-top: clamp(34px, 9vw, 48px); }
  .queue-item {
    grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
  }
  .queue-item img { margin: 0; }
  .queue-copy strong { font-size: clamp(1.45rem, 6.5vw, 2rem); }
  .queue-copy .feed-meta { font-size: 11px; gap: 9px; }
  .learn-bottom-rules { margin-top: clamp(40px, 11vw, 52px); }
  .page .page-title { max-width: none; }
  .cat-step, .cat-sleep { --sw: clamp(150px, 42vw, 300px); }
}
@media (max-width: 359px) {
  .site-header { flex-wrap: wrap; }
  .about-layout { grid-template-columns: 52% 48%; }
}
@media (max-width: 400px) {
  .site-nav .btn { padding: .4em .9em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* Underlines must not displace the navigation labels from the button label. */
.site-nav a:not(.btn) { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; border-bottom: 0; }
.site-nav a:not(.btn)::after { content: ''; position: absolute; height: 3px; bottom: 0; left: 0; right: 0; background: transparent; }
.site-nav a:not(.btn):hover::after { background: var(--red); }
.site-nav a[aria-current]:not(.btn)::after { background: var(--cobalt); }