/* Tokens from Ruth's brand guide + ruthguest.com */
  :root {
    --off: #e8e7e7;
    --blue: #0b57a4;
    --green: #26372c;
    --red: #5b0d0a;
    --yellow: #ffde59;
    --ink: #0b0b0b;
    /* ponytail: Hertical isn't a web font; drop the licensed file in and put it first here */
    --brand: "Hertical", "HerticalSans", "Oswald", system-ui, sans-serif;
    --display: "Playfair Display", Georgia, serif;
    --serif: "Georgia Pro", Georgia, serif;
    --sans: "DM Sans", system-ui, sans-serif;
    --side: 110px;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--off); color: var(--blue); font: 400 19px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
  h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1.08; margin: 0 0 .5em; text-wrap: balance; }
  h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
  h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 700; }
  p { margin: 0 0 1.1em; max-width: 62ch; }
  .serif { font-family: var(--serif); }
  .eyebrow { font: 500 .8rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 1.4rem; display: block; }

  /* The signature vertical name down the left, as on ruthguest.com */
  .side-brand {
    position: fixed; z-index: 30; left: calc(var(--side) / 2); top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    font: 500 58px/1 var(--brand); letter-spacing: .04em; color: var(--blue);
    text-decoration: none; white-space: nowrap; mix-blend-mode: multiply;
  }
  .page { margin-left: var(--side); }

  /* Header */
  header {
    position: sticky; top: 0; z-index: 20; background: var(--off);
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding: 1.1rem clamp(1rem, 4vw, 3.5rem);
  }
  .logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; font: 500 1rem var(--brand); letter-spacing: .12em; }
  .logo img { width: 34px; height: 34px; border-radius: 50%; }
  nav { display: flex; gap: 1.8rem; font-size: 1.05rem; }
  nav a { text-decoration: none; }
  nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
  .btn {
    display: inline-block; background: var(--green); color: var(--off); text-decoration: none;
    font: 400 1rem/1 var(--serif); padding: 1rem 1.5rem; border-radius: 10px; border: 0; cursor: pointer;
    transition: transform .2s ease, background .2s ease;
  }
  .btn:hover { background: #1a261e; transform: translateY(-2px); }
  .btn--ghost { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
  .btn--ghost:hover { background: var(--blue); color: var(--off); }
  .btn--light { background: var(--off); color: var(--green); }
  .btn--light:hover { background: #fff; }

  section { padding: clamp(4.5rem, 10vw, 8rem) clamp(1rem, 5vw, 4.5rem); }
  .wrap { max-width: 1180px; margin: 0 auto; }

  /* Hero: full-bleed black and white street photograph */
  .hero { position: relative; min-height: min(92vh, 860px); display: grid; place-items: center; text-align: center; color: #fff; padding: 6rem 1.5rem; overflow: hidden; }
  .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.42); transform: scale(1.04); animation: settle 2.4s ease-out forwards; }
  @keyframes settle { to { transform: scale(1); } }
  .hero-inner { position: relative; }
  .hero .mark { width: 74px; margin: 0 auto 1.6rem; }
  .hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 8vw, 6.4rem); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.2rem; }
  .hero .sub { font: 500 clamp(.8rem, 1.4vw, 1rem)/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; margin: 0 auto 2.6rem; }
  .hero .lede { font: 400 clamp(1.05rem, 1.6vw, 1.3rem)/1.6 var(--serif); max-width: 40ch; margin: 0 auto 2.4rem; color: #e8e7e7; }
  .hero .btn { background: var(--off); color: var(--green); }

  /* Quote marquee, the ruthguest.com testimonial band */
  .quotes { background: var(--green); color: var(--off); padding: 3.2rem 0; overflow: hidden; }
  .quotes .track { display: flex; gap: 4.5rem; width: max-content; animation: marquee 90s linear infinite; }
  .quotes:hover .track { animation-play-state: paused; }
  .quotes q { font: 700 clamp(1.4rem, 2.4vw, 2rem)/1.3 var(--display); white-space: nowrap; }
  .quotes q::before, .quotes q::after { color: var(--yellow); }
  .quotes-label { font: 500 .75rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--yellow); text-align: center; margin: 0 auto 1.4rem; max-width: none; }
  .invest cite { display: block; margin-top: .8rem; font: 500 .8rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--yellow); }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* Intro */
  .intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
  .intro .big { font: 700 clamp(1.6rem, 2.8vw, 2.3rem)/1.3 var(--display); max-width: 24ch; }
  .intro img { aspect-ratio: 4/5; object-fit: cover; filter: grayscale(1); }

  /* Concepts */
  .concepts { background: var(--ink); color: #fff; }
  .concepts h2 { color: #fff; }
  .concept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3.5rem; }
  .concept img { aspect-ratio: 3/2; object-fit: cover; filter: grayscale(1) contrast(1.05); margin-bottom: 1.4rem; }
  .concept p { font-size: 1.02rem; color: #d6d5d5; }
  .week .lead { font: italic 400 1.08rem/1.5 var(--serif); color: #fff; }

  /* Tried */
  .tried { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(11,87,164,.25); border: 1px solid rgba(11,87,164,.25); margin-top: 3rem; }
  .tried div { background: var(--off); padding: 1.8rem 2rem; }
  .tried strong { display: block; font: 700 1.2rem/1.3 var(--display); margin-bottom: .5rem; }
  .tried p { font-size: 1rem; margin: 0; }
  .reframe { margin-top: 4rem; padding-top: 1.6rem; background: linear-gradient(var(--green),var(--green)) top left/64px 3px no-repeat; font: 700 clamp(1.4rem, 2.4vw, 2rem)/1.35 var(--display); max-width: 34ch; }

  /* Six weeks */
  .weeks { background: var(--ink); color: var(--off); }
  .weeks h2 { color: #fff; }
  .week { display: grid; grid-template-columns: 110px 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: 3rem 0; border-top: 1px solid rgba(232,231,231,.18); }
  .week .num { font: 900 5rem/1 var(--display); color: var(--blue); }
  .week img { aspect-ratio: 3/2; object-fit: cover; filter: grayscale(1); }
  .week h3 { color: #fff; margin-bottom: .6rem; }
  .week p { font-size: 1.02rem; color: #cfcdcd; }
  .week .leave { font: italic 400 .98rem/1.5 var(--serif); color: var(--yellow); margin: 0; }

  /* Included */
  .included { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2.2rem 3rem; margin-top: 3rem; }
  .included div { border-top: 2px solid var(--blue); padding-top: 1.2rem; }
  .included p { font-size: 1rem; }

  /* Gallery strip */
  .strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 32vw); gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .strip img { aspect-ratio: 3/2; object-fit: cover; scroll-snap-align: start; filter: grayscale(1); }

  /* About */
  .about { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .about img { width: 100%; }
  .stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 2.2rem 0; }
  .stats b { display: block; font: 900 2.6rem/1 var(--display); }
  .stats span { font-size: .9rem; }
  .note { font-size: .95rem; background: rgba(11,87,164,.07); padding: 1.1rem 1.3rem; border-radius: 10px; }

  /* Investment */
  .invest { background: var(--green); color: var(--off); }
  .invest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); margin-top: 3rem; align-items: start; }
  .price-card { background: var(--off); color: var(--blue); border-radius: 10px; padding: clamp(2rem, 4vw, 3rem); }
  .badge { display: inline-block; background: var(--yellow); color: var(--ink); font: 700 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: .55rem .8rem; border-radius: 6px; margin-bottom: 1.4rem; }
  .price { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
  .price b { font: 900 clamp(3.6rem, 7vw, 5rem)/1 var(--display); }
  .price s { font: 700 1.8rem var(--display); opacity: .55; }
  .price-card ul { list-style: none; padding: 0; margin: 1.8rem 0; }
  .price-card li strong { display: block; }
  .price-card li { padding: .7rem 0 .7rem 1.8rem; border-top: 1px solid rgba(11,87,164,.15); position: relative; font-size: 1rem; }
  .price-card li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: 9px; height: 9px; background: var(--blue); border-radius: 50%; }
  .price-card .btn { width: 100%; text-align: center; margin-bottom: .8rem; }
  .plan { font-size: .95rem; text-align: center; margin: .4rem 0 0; max-width: none; }
  .invest h3 { color: #fff; }
  .invest p, .invest li { color: #d9dcd9; font-size: 1rem; }
  .price-card, .price-card p, .price-card li { color: var(--ink); }

  .invest ul.plain { padding-left: 1.1rem; }
  .invest blockquote { margin: 2.2rem 0 0; font: italic 400 1.12rem/1.55 var(--serif); color: #fff; padding-top: 1.3rem; background: linear-gradient(var(--yellow),var(--yellow)) top left/48px 3px no-repeat; }

  /* FAQ */
  details { border-top: 1px solid rgba(11,87,164,.25); }
  details:last-of-type { border-bottom: 1px solid rgba(11,87,164,.25); }
  summary { cursor: pointer; list-style: none; padding: 1.5rem 3rem 1.5rem 0; position: relative; font: 700 clamp(1.15rem, 1.8vw, 1.4rem)/1.35 var(--display); }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; position: absolute; right: .3rem; top: 1.2rem; font: 400 2rem/1 var(--sans); transition: transform .25s ease; }
  details[open] summary::after { transform: rotate(45deg); }
  details p { font-size: 1.02rem; padding-bottom: .6rem; }

  /* Closing CTA */
  .closing { position: relative; color: #fff; text-align: center; overflow: hidden; }
  .closing > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.35); }
  .closing .wrap { position: relative; }
  .closing p { margin-left: auto; margin-right: auto; color: #e8e7e7; }

  footer { padding: 3rem clamp(1rem, 5vw, 4.5rem); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; font-size: .9rem; }
  footer a { text-decoration: none; margin-right: 1.4rem; }
  footer a:hover { text-decoration: underline; }

  /* Fade-in on scroll, like the Squarespace preFade */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
  .reveal.in { opacity: 1; transform: none; }

  @media (max-width: 960px) {
    :root { --side: 0px; }
    .side-brand { display: none; }
    nav { display: none; }
    .intro, .about, .invest-grid { grid-template-columns: 1fr; }
    .concept-grid { grid-template-columns: 1fr; }
    .tried { grid-template-columns: 1fr; }
    .week { grid-template-columns: 1fr; gap: 1.2rem; }
    .week .num { font-size: 3.4rem; }
    .about img { max-width: 420px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .quotes .track, .hero > img { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
  }

  /* ---------- added in the four route restructure ---------- */

  /* cart gate on /mentorship */
  [data-cart="closed"] .cart-open-only { display: none; }
  [data-cart="open"] .cart-closed-only { display: none; }
  .holding { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 2rem; }
  .holding img { width: 70px; margin: 0 auto 1.8rem; }
  .holding h1 { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1.8rem, 5vw, 3.2rem); margin-bottom: 1.4rem; }
  .holding p { margin: 0 auto 2.2rem; }

  /* registration page */
  .meta-line { font: 500 clamp(.85rem, 1.4vw, 1rem)/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #fff; margin: 0 auto 1rem; max-width: none; }
  .hero .fine-print { font-size: .92rem; color: #cfcdcd; max-width: 46ch; margin: 0 auto 2.4rem; }
  .concept .n { display: block; font: 900 1.1rem/1 var(--display); color: var(--yellow); margin-bottom: .7rem; letter-spacing: .06em; }
  .replay { text-align: center; padding-top: 0; }
  .replay p { margin: 0 auto; font-size: 1rem; }

  /* price rows */
  .price-rows { margin: 0 0 1.6rem; }
  .price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 0; border-top: 1px solid rgba(11,11,11,.12); }
  .price-row:first-child { border-top: 0; padding-top: 0; }
  .price-row span { font-size: 1rem; }
  .price-row b { font: 900 1.9rem/1 var(--display); }
  .price-row:first-child b { font-size: clamp(2.6rem, 5vw, 3.4rem); }

  /* empty testimonial slots */
  .invest blockquote.slot { opacity: .7; font-style: normal; font-family: var(--sans); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; }

  /* confirmation page */
  .centred { max-width: 720px; margin: 0 auto; }
  .calendar-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.8rem 0 3rem; }
  .calendar-row .btn { font-size: .95rem; padding: .85rem 1.3rem; }

  /* reading room */
  .gate { max-width: 420px; margin: 2.4rem auto 0; text-align: left; }
  .gate label { display: block; font: 500 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-bottom: .6rem; }
  .gate input { width: 100%; font: 400 1rem var(--sans); color: var(--ink); background: #fff; border: 1px solid rgba(11,11,11,.22); border-radius: 10px; padding: .9rem 1rem; margin-bottom: 1.2rem; }
  .gate input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
  .gate .btn { width: 100%; text-align: center; }
  .gate-error { color: var(--red); font-size: .95rem; margin: 1rem 0 0; }
  .essay { max-width: 680px; margin: 0 auto; text-align: left; }

  /* Registration hero: the headline is a sentence, and the button carries the date.
     Scoped to .hero--session so /mentorship keeps its hero exactly as it was. */
  .hero--session h1 { font-family: var(--display); font-weight: 900; text-transform: none; letter-spacing: 0; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.12; max-width: 20ch; margin: 0 auto 2.2rem; }
  .hero--session .fine-print { margin: 1.6rem auto 0; }
  .btn--cta { display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.1rem 1.9rem; }
  .btn--cta strong { font: 400 1.15rem/1 var(--serif); }
  .btn--cta small { font: 500 .72rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
  @media (max-width: 600px) {
    /* top aligned and tighter so the button sits on the first screen of a phone */
    .hero--session { min-height: 0; place-items: start center; padding: 2.6rem 1.2rem 3.2rem; }
    .hero--session .mark { width: 46px; margin-bottom: 1rem; }
    .hero--session .sub { margin-bottom: 1.1rem; letter-spacing: .18em; }
    .hero--session h1 { margin-bottom: 1.6rem; }
  }

  /* Testimonial band on /mentorship, reusing the Investment styling */
  .testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 3.5rem; }
  @media (max-width: 960px) { .testimonials-grid { grid-template-columns: 1fr; } }
  /* Header on /mentorship (the only page with a header): logo and Apply button stay on one line on phones */
  @media (max-width: 600px) {
    header { gap: .8rem; padding-top: .8rem; padding-bottom: .8rem; }
    header .logo { font-size: .78rem; letter-spacing: .08em; white-space: nowrap; gap: .5rem; }
    header .logo img { width: 28px; height: 28px; }
    header .btn { white-space: nowrap; font-size: .88rem; padding: .75rem 1rem; }
  }

  /* /mentorship, compact terms and six weeks */
  .concept-grid--compact { margin-top: 2.4rem; }
  .concept-grid--compact h3 { color: #fff; margin-bottom: .5rem; }
  .concept-grid--compact p { margin: 0; }
  .weeks-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-top: 2.2rem; }
  .weeks-body > img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: grayscale(1); position: sticky; top: 6rem; }
  .week--compact { grid-template-columns: 64px 1fr; gap: 1.2rem; align-items: baseline; padding: 1.3rem 0; }
  .week--compact .num { font-size: 2.6rem; }
  .week--compact h3 { margin-bottom: .3rem; }
  .week--compact p { margin: 0; }
  @media (max-width: 960px) {
    .weeks-body { grid-template-columns: 1fr; }
    .weeks-body > img { order: -1; aspect-ratio: 3/2; position: static; }
    .week--compact { grid-template-columns: 56px 1fr; gap: 1rem; }
    .week--compact .num { font-size: 2.1rem; }
  }

  /* Highlighter stroke in the brand yellow (Ruth's brand guide: yellow is for highlights).
     box-decoration-break keeps the stroke on every line when the question wraps. */
  .marker {
    font-style: italic;
    background: linear-gradient(transparent 10%, rgb(255 222 89 / .8) 10%, rgb(255 222 89 / .8) 94%, transparent 94%);
    padding: 0 .2em; margin: 0 -.05em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }