/* /thread, the landing page for Thread, the strategy offer.

   Built on the /claude101 shell from css/prompt-page.css: the rope rail that
   untwists as the reader goes down the page, the bands, the weave dividers.
   Everything here is the interactive layer on top of it. Each piece renders in
   full with the script blocked, and js/thread.js only ever adds behaviour. */

/* --------------------------------------------------------------- the opening */

/* An ink hero like the homepage's: the copy on the left, the Stone and Chalk
   photo filling the right and fading into the ink, and Jess's bio card pinned
   to the photo's top right corner the way /annabelle carries it. */
.th-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
  padding: 0;
}
.th-hero-copy {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.25rem, 3vw, 2rem) clamp(3.2rem, 4.6vw, 4rem) var(--pad-x);
}
.th-hero-media { grid-column: 2; grid-row: 1; position: relative; min-height: 100%; }
.th-hero-photo { position: absolute; inset: 0; display: block; }
.th-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 12%, rgba(0,0,0,.6) 30%, #000 52%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 12%, rgba(0,0,0,.6) 30%, #000 52%);
}
.th-hero-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(26,20,24,0), rgba(26,20,24,.75));
  pointer-events: none;
}
.th-bio {
  position: absolute;
  top: clamp(1rem, 2.4vw, 1.8rem);
  right: clamp(1rem, 2.4vw, 1.8rem);
  z-index: 3;
  max-width: 22rem;
  box-shadow: 0 20px 44px -24px rgba(0,0,0,.7);
}
.th-bio { color: var(--ink); background: #FFFEFB; }
.th-bio .ab-bio-name { color: var(--ink); }
.th-bio .ab-bio-role { color: var(--muted); }
.cl-page .th-bio a { color: var(--berry); }

.th-hero h1 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.04em;
  color: #fff;
  max-width: 21ch;
}
.th-hero h1 .mask > * { animation: mask-up .9s var(--ease) backwards; }
.th-hero h1 .mask:nth-of-type(2) > * { animation-delay: .1s; }
/* The hand-drawn rope under the three words that matter, drawn after the
   headline arrives. */
.th-under { position: relative; white-space: nowrap; color: var(--gold); }
.th-under svg { position: absolute; left: -2%; bottom: -.22em; width: 104%; height: .34em; overflow: visible; }
.th-under path { fill: none; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: th-draw 1.1s var(--ease) .9s forwards; }
.th-under path:nth-child(2) { animation-delay: 1s; }
.th-under path:nth-child(3) { animation-delay: 1.1s; }

.th-lede { margin-top: clamp(1.2rem, 2.2vw, 1.6rem); display: grid; gap: .8rem; max-width: 46ch; }
.th-lede p { font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.62; margin: 0; color: rgba(244,238,230,.78); }
.th-lede .th-q {
  margin-top: .2rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  letter-spacing: -.02em;
  line-height: 1.35;
  color: #fff;
}

.th-hero .th-cta { margin-top: clamp(1.3rem, 2.2vw, 1.7rem); }
.th-hero .th-cta .btn { background: var(--gold); color: var(--ink); }
.th-hero .th-cta .btn:hover { background: #FFD07A; color: var(--ink); }

/* One real line from a real review under the button, in place of a badge. */
.cl-page a.th-proof {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .15rem .6rem;
  align-items: center;
  margin-top: 1.1rem;
  max-width: 30rem;
  color: var(--on-dark);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.4;
}
.th-proof-stars { display: inline-flex; gap: 1px; grid-row: 1 / span 2; align-self: start; margin-top: .2rem; }
.th-proof-stars svg { width: 12px; height: 12px; fill: #FBBC04; }
.th-proof-who { font-size: .78rem; color: var(--on-dark-muted); }
.cl-page a.th-proof:hover { color: #fff; }
.cl-page a.th-proof:hover .th-proof-who { text-decoration: underline; }

/* The rope runs across the foot of the hero into the reviews below it. */
.th-hero-rope { position: absolute; left: 0; right: 0; bottom: -6px; height: clamp(40px, 5vw, 70px); z-index: 2; pointer-events: none; }
.th-hero-rope svg { width: 100%; height: 100%; }
.th-hero-rope path { vector-effect: non-scaling-stroke; }

@media (max-width: 900px) {
  .th-hero { grid-template-columns: minmax(0, 1fr); }
  .th-hero-media { grid-column: 1; grid-row: 1; height: clamp(250px, 58vw, 380px); }
  .th-hero-copy { grid-row: 2; padding-top: .4rem; }
  .th-hero-photo img {
    object-position: 50% 40%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .th-hero-media::after { display: none; }
  .th-bio { top: auto; bottom: 1rem; right: auto; left: var(--pad-x); max-width: calc(100% - 2 * var(--pad-x)); }
}
@media (max-width: 520px) {
  .th-bio .ab-bio-role { display: none; }
  .th-hero .th-cta { flex-direction: column; align-items: stretch; }
}

.th-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.2rem; margin-top: clamp(1.2rem, 2.2vw, 1.6rem); max-width: none; }
.th-cta .btn { padding: .85em 1.45em; font-size: 1rem; }
.cl-page .th-cta a.btn { color: #fff; }
.cl-sec.is-ink .th-cta a.btn { color: var(--ink); }

/* The same words at a smaller size inside a band, so a heading can sit over a
   short run of prose without the band's h2 scale. */
.th-intro { max-width: 60ch; display: grid; gap: .6rem; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.th-intro p { margin: 0; font-size: 1rem; line-height: 1.6; }
.th-intro strong { font-family: var(--display); font-weight: 800; letter-spacing: -.015em; }

/* --------------------------------------------------------------- sound familiar */

/* The four worries, each a quote the reader can open. The quote is the whole
   summary row, so the reader recognises themselves before they click. */
.th-worries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; align-items: start; }
.th-worries .ab-cat summary { align-items: flex-start; }
.th-worries .ab-cat summary h3 {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.3;
  color: var(--fg);
  flex: 1;
}
.th-worries .ab-cat[open] summary h3 { color: var(--tone); }
.th-worries .ab-toggle { margin-top: -.15rem; }
.th-worries .ab-cat-body { padding-left: clamp(.9rem, 1.6vw, 1.2rem); }
.th-worries .ab-cat-body p { font-size: .95rem; line-height: 1.6; margin: 0; }
.th-worries .ab-cat-body p + p { margin-top: .55rem; }
.th-worries .ab-cat-body strong { font-family: var(--display); font-weight: 800; color: var(--tone); }
.th-quote-mark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  line-height: .8;
  color: var(--tone);
  flex: none;
  margin-top: .15rem;
}

/* --------------------------------------------------------------- the four parts */

/* A stepper on a laptop, a stack on a phone. With the script blocked the
   tablist never appears and all four panels simply read in order. */
.th-steps { display: grid; gap: .7rem; }
.th-tablist { display: none; }
.th-steps.is-tabbed { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(.8rem, 2vw, 1.6rem); align-items: start; }
.th-steps.is-tabbed .th-tablist { display: grid; gap: .4rem; position: relative; }
.th-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  text-align: left;
  padding: .8rem 1rem;
  min-height: 52px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--card);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: var(--fg-muted);
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.th-tab b { font-family: var(--mono); font-weight: 500; font-size: .75rem; letter-spacing: .08em; color: var(--tone); }
.th-tab:hover { color: var(--fg); border-color: var(--tone); transform: translateX(3px); }
.th-tab[aria-selected="true"] { background: var(--card-hi); color: var(--fg); border-color: var(--tone); box-shadow: 0 14px 30px -24px rgba(26,20,24,.6); }
.th-tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--card-hi);
  border-right: 1px solid var(--tone);
  border-top: 1px solid var(--tone);
  transform: translate(50%, -50%) rotate(45deg);
}
/* The strand under the list fills as the reader walks the four parts. */
.th-progress { height: 3px; border-radius: 3px; background: var(--hair); overflow: hidden; margin-top: .3rem; }
.th-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--gold) 50%, var(--coral));
  transform-origin: left;
  transform: scaleX(var(--step, .25));
  transition: transform .5s var(--ease);
}

.th-panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: clamp(1.1rem, 2.2vw, 1.7rem) clamp(1.1rem, 2.2vw, 1.8rem);
  overflow: hidden;
}
.th-panel h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.03em; line-height: 1.15; margin: 0 0 .7rem; }
.th-panel p { margin: 0; font-size: 1rem; line-height: 1.62; max-width: 60ch; }
.th-panel p + p { margin-top: .6rem; }
.th-panel .th-num {
  position: absolute;
  right: clamp(.8rem, 2vw, 1.4rem);
  bottom: -.9rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(4.5rem, 9vw, 7rem);
  line-height: 1;
  letter-spacing: -.06em;
  color: color-mix(in srgb, var(--tone) 14%, transparent);
  pointer-events: none;
}
.th-steps.is-tabbed .th-panel[hidden] { display: none; }
.th-steps.is-tabbed .th-panel { min-height: 15rem; animation: th-in .5s var(--ease); }
@keyframes th-in { from { opacity: 0; transform: translateY(10px); } }
.th-next { margin-top: 1rem; }
.th-steps:not(.is-tabbed) .th-next { display: none; }
.th-next button {
  position: relative;
  border: 0;
  background: none;
  padding: 0 0 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  cursor: pointer;
}
.th-next button::before { content: ''; position: absolute; inset: -14px -10px; }
.th-next button:hover { color: var(--hi); }

/* --------------------------------------------------------------- what you leave with */

/* Five outcomes that tick themselves off as they arrive, and can be ticked and
   unticked by hand. */
.th-haves { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-width: 40rem; }
.th-have {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  text-align: left;
  padding: .85rem 1.1rem;
  min-height: 56px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: var(--card);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  letter-spacing: -.022em;
  color: var(--fg);
  cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.th-have:hover { background: var(--card-hi); transform: translateX(4px); }
.th-box {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  border: 2px solid var(--berry);
  display: grid;
  place-items: center;
  transition: background-color .3s var(--ease);
}
.th-box svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.th-box path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s var(--ease) .1s; }
.th-have[aria-pressed="true"] .th-box { background: var(--berry); }
.th-have[aria-pressed="true"] .th-box path { stroke-dashoffset: 0; }
/* Blocked script means no ticking, so every box shows ticked rather than a row
   of empty boxes the reader cannot fill. */
.th-haves:not(.is-live) .th-box { background: var(--berry); }
.th-haves:not(.is-live) .th-box path { stroke-dashoffset: 0; }
.th-after { margin-top: clamp(1rem, 2vw, 1.4rem); font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: -.02em; max-width: 40ch; }

/* --------------------------------------------------------------- thread to weave */

.th-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(70px, 10vw, 150px) minmax(0, 1fr);
  align-items: center;
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
  max-width: 54rem;
}
.th-node {
  --tone: #8A6206;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: rgba(255,188,66,.16);
  padding: clamp(1rem, 2vw, 1.4rem);
  cursor: default;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.th-node.is-weave { --tone: #A8443A; background: rgba(240,113,103,.13); }
.th-node:hover, .th-node:focus-within, .th-node.is-lit { transform: translateY(-4px); box-shadow: 0 18px 40px -26px rgba(26,20,24,.6); }
.th-node p { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 1.9vw, 1.45rem); letter-spacing: -.028em; line-height: 1.2; }
.th-node p b { color: var(--tone); font-weight: 800; }
.th-link svg { width: 100%; height: auto; display: block; overflow: visible; }
.th-link path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rv.in .th-link path { animation: th-draw 1.4s var(--ease) forwards; }
.rv.in .th-link path:nth-child(2) { animation-delay: .12s; }
.rv.in .th-link path:nth-child(3) { animation-delay: .24s; }
@keyframes th-draw { to { stroke-dashoffset: 0; } }
html:not(.rv-armed) .th-link path { stroke-dashoffset: 0; }

/* --------------------------------------------------------------- who it is for */

.th-fits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; max-width: 52rem; }
.th-fit {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: var(--card);
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.th-fit:hover { background: var(--card-hi); transform: translateY(-2px); }
.th-fit .th-box { border-color: var(--gold); margin-top: -.05rem; }
.th-fit .th-box svg { stroke: var(--ink); }
.th-fit[aria-pressed="true"] { border-color: var(--gold); background: var(--card-hi); }
.th-fit[aria-pressed="true"] .th-box { background: var(--gold); }
.th-fits:not(.is-live) .th-box { background: var(--gold); }
.th-fits:not(.is-live) .th-box path { stroke-dashoffset: 0; }
.th-fits-after { margin-top: clamp(1rem, 2vw, 1.4rem); max-width: 52ch; font-size: 1.0625rem; line-height: 1.55; }

.th-close { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); padding-top: clamp(1.4rem, 2.6vw, 2rem); border-top: 1px solid var(--hair); max-width: 44rem; }
.th-close h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -.035em; line-height: 1.1; margin: 0 0 .8rem; color: var(--fg); }
.th-close p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--fg-muted); }
.th-close p + p { margin-top: .5rem; }
.th-close p:last-child { color: var(--fg); font-weight: 600; }

/* --------------------------------------------------------------- reviews */

/* Two Google reviews and the three messages from the rest of the site. Kept
   small and set as review cards, with no heading above them. */
.th-reviews { padding-block: clamp(2.2rem, 4vw, 3.2rem) clamp(2rem, 3.6vw, 2.8rem); background: var(--sand); }
.th-reviews[id] { scroll-margin-top: calc(var(--header-h) + var(--banner-h) + 1rem); }
.th-notes { padding-block: clamp(2rem, 4vw, 3rem) clamp(1.4rem, 2.6vw, 2rem); background: var(--bone); }
.th-notes .notes { max-width: 62rem; }
.th-greviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); align-items: start; }
.gr {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #E6E1DA;
  padding: clamp(1rem, 1.8vw, 1.3rem);
  box-shadow: 0 16px 36px -28px rgba(26,20,24,.55);
  font-family: var(--body);
}
.gr-head { display: flex; align-items: center; gap: .7rem; }
.gr-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
}
.gr-name { font-weight: 700; font-size: .95rem; color: #202124; margin: 0; line-height: 1.2; }
.gr-src { font-size: .78rem; color: #70757a; margin: .1rem 0 0; }
.gr-g { width: 22px; height: 22px; margin-left: auto; flex: none; }
.gr-stars { display: flex; gap: 2px; margin: .75rem 0 .5rem; }
.gr-stars svg { width: 16px; height: 16px; fill: #FBBC04; }
.gr-text { font-size: .9rem; line-height: 1.58; color: #3c4043; position: relative; }
.gr-text p { margin: 0; max-width: none; }
.gr-text p + p { margin-top: .6rem; }
.gr.is-clipped .gr-text { max-height: 7.9em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.gr-more { display: none; margin-top: .45rem; padding: 0; border: 0; background: none; font-size: .85rem; font-weight: 600; color: #1a73e8; cursor: pointer; position: relative; }
.gr-more::before { content: ''; position: absolute; inset: -14px -10px; }
.gr.is-clipped .gr-more, .gr.is-open .gr-more { display: inline-block; }
.gr-photos { display: flex; gap: .4rem; margin-top: .8rem; }
.gr-photos img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; }

.th-notes .note { box-shadow: 0 16px 34px -26px rgba(0,0,0,.6); }

/* --------------------------------------------------------------- narrow */

@media (max-width: 1149.98px) {
  .th-steps.is-tabbed { grid-template-columns: minmax(0, 1fr); }
  .th-steps.is-tabbed .th-tablist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-tab[aria-selected="true"]::after { display: none; }
  .th-tab:hover { transform: none; }
}
@media (max-width: 860px) {
  .th-worries, .th-fits, .th-greviews { grid-template-columns: minmax(0, 1fr); }
  .th-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .th-link { width: 56px; margin: -.2rem auto; transform: rotate(90deg); }
}
@media (max-width: 520px) {
  .th-steps.is-tabbed .th-tablist { grid-template-columns: minmax(0, 1fr); }
  .th-cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .th-steps.is-tabbed .th-panel { animation: none; }
  .rv.in .th-link path { animation: none; stroke-dashoffset: 0; }
}
@media print {
  .th-tablist, .th-next, .gr-more { display: none !important; }
  .th-steps .th-panel[hidden] { display: block !important; }
  .gr.is-clipped .gr-text { max-height: none; -webkit-mask-image: none; mask-image: none; }
}

/* The homepage's load-in, scoped to this hero. */
.th-hero .rise { animation: rise-in .9s var(--ease) backwards; }
.th-hero .rise.i2 { animation-delay: .25s; }
.th-hero .rise.i3 { animation-delay: .36s; }
.th-hero .rise.i4 { animation-delay: .55s; }