:root {
    --linen: #F4EFE8;
    --oat: #EAE1D5;
    --pine: #2F5F52;
    --forest: #3A3D36;
    --emerald: #2F8A76;
    --rose: #9A6558;
    --sage: #9AAB98;
    --blush: #FADBD8;

    --font-name: 'Italiana', serif;
    --font-heading: 'Cormorant Garamond', serif;
    --font-text: 'Jost', sans-serif;
    --font-story-title: 'Poppins', sans-serif;
    --font-story-text: 'Charis SIL', serif;

    --gutter: clamp(24px, 6vw, 96px);
  }

  *, *::before, *::after { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--linen);
    color: var(--forest);
    font-family: var(--font-text);
    font-weight: 300;
    font-size: 19px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: var(--oat); color: var(--forest); }

  a { color: inherit; text-decoration: none; }

  :focus-visible { outline: 2px solid var(--emerald); outline-offset: 4px; border-radius: 2px; }

  /* Top menu */
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px var(--gutter);
    position: relative;
  }

  .brand {
    font-family: var(--font-name);
    color: var(--rose);
    font-size: 32px;
    letter-spacing: 0.04em;
    line-height: 1;
  }

  .nav-links {
    display: flex;
    gap: clamp(24px, 3vw, 44px);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-links a {
    font-size: 18px;
    color: var(--forest);
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
  }

  .nav-links a:hover { color: var(--pine); border-bottom-color: var(--rose); }

  .menu-toggle {
    display: none;
    color: var(--pine);
    background: none;
    border: 0;
    padding: 10px;
    margin-right: -10px;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 26px;
    height: 1.5px;
    background: var(--pine);
    margin: 6px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* Welcome */
  .hero-text {
    padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(80px, 11vw, 160px);
    max-width: 1440px;
    margin: 0 auto;
  }

  .hero h1 {
    font-family: var(--font-heading);
    font-weight: 300;
    color: var(--pine);
    font-size: clamp(46px, 6.4vw, 88px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0 0 32px;
  }

  .hero p {
    font-size: clamp(19px, 1.5vw, 22px);
    max-width: 30em;
    margin: 0 0 48px;
  }

  .button {
    display: inline-block;
    background: var(--emerald);
    color: var(--linen);
    border: 2px solid var(--linen);
    box-shadow: 0 0 0 1px var(--emerald);
    font-family: var(--font-text);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.03em;
    padding: 18px 40px;
    border-radius: 999px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }

  .button:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--emerald), 0 10px 22px rgba(58, 61, 54, 0.18); }
  @media (prefers-reduced-motion: reduce) { .button { transition: none; } }

  .hero-photo {
    margin: 0;
    background: var(--forest);
    height: clamp(380px, 46vw, 660px);
    overflow: hidden;
  }

  .hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    transform-origin: 55% 42%;
    filter: saturate(0.88) contrast(0.96);
    animation: hero-pulse 7s ease-in-out infinite;
  }

  @keyframes hero-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.14); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-photo img { animation: none; }
  }

  /* Three doors */
  .doors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 40px);
    padding: 0 var(--gutter) clamp(96px, 12vw, 176px);
    max-width: 1440px;
    margin: 0 auto;
  }

  .door {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--oat);
    border-radius: 6px;
    padding: 24px;
    text-align: center;
    transition: transform 0.4s ease;
  }

  .door:hover { transform: translateY(-6px); }

  /* For later: a photo placed in a card fills the square behind the heading */
  .door img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .door-name {
    position: relative;
    display: block;
    font-family: var(--font-heading);
    font-weight: 300;
    color: var(--pine);
    font-size: clamp(32px, 2.8vw, 42px);
    line-height: 1.15;
  }

  /* Sexual wellness */
  .wellness {
    padding: 0 var(--gutter) clamp(96px, 12vw, 176px);
    max-width: 1440px;
    margin: 0 auto;
    scroll-margin-top: 32px;
  }

  .section-heading {
    font-family: var(--font-heading);
    font-weight: 300;
    color: var(--pine);
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.1;
    margin: 0 0 24px;
  }

  .section-intro {
    font-size: clamp(19px, 1.5vw, 22px);
    max-width: 36em;
    margin: 0 0 clamp(48px, 6vw, 80px);
  }

  .rituals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 40px);
  }

  .ritual {
    background: var(--oat);
    border-radius: 6px;
    padding: clamp(28px, 3vw, 44px);
    transition: transform 0.4s ease;
  }

  .ritual:hover { transform: translateY(-6px); }

  .ritual-label {
    display: block;
    color: var(--rose);
    font-size: 15px;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
  }

  .ritual-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 16px;
  }

  .ritual-name {
    font-family: var(--font-heading);
    font-weight: 300;
    color: var(--pine);
    font-size: clamp(30px, 2.6vw, 38px);
    line-height: 1.15;
    margin: 0;
  }

  .ritual-price {
    font-size: 20px;
    white-space: nowrap;
  }

  .ritual-price.soon {
    font-size: 16px;
    white-space: normal;
    text-align: right;
    max-width: 7em;
    line-height: 1.4;
  }

  .ritual-contents {
    margin: 0;
    font-size: 18px;
  }

  .see-all {
    display: inline-block;
    margin-top: clamp(40px, 5vw, 64px);
    color: var(--pine);
    font-size: 19px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rose);
  }

  .see-all:hover { color: var(--emerald); }

  @media (max-width: 1100px) {
    .rituals { grid-template-columns: 1fr; max-width: 640px; }
  }

  /* From the stories */
  .stories {
    background: var(--sage);
    scroll-margin-top: 0;
  }

  .stories-inner {
    padding: clamp(80px, 10vw, 144px) var(--gutter);
    max-width: 1440px;
    margin: 0 auto;
  }

  .stories .section-heading { margin-bottom: clamp(48px, 6vw, 80px); }

  .story-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 3vw, 48px);
  }

  .story-photo {
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 24px;
  }

  .story-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .story-label {
    display: block;
    color: var(--rose);
    font-size: 15px;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
  }

  .story-title {
    font-family: var(--font-story-title);
    font-weight: 500;
    color: var(--blush);
    text-transform: lowercase;
    font-size: clamp(24px, 2vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
  }

  .story-line {
    font-family: var(--font-story-text);
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
  }

  .stories .see-all { color: var(--forest); }
  .stories .see-all:hover { color: var(--pine); }

  /* Phone */
  @media (max-width: 860px) {
    .menu-toggle { display: block; margin-left: auto; }

    .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 10;
      flex-direction: column;
      gap: 0;
      background: var(--linen);
      padding: 8px var(--gutter) 32px;
    }

    .nav-links.open { display: flex; }

    .nav-links a {
      display: block;
      font-size: 20px;
      padding: 14px 0;
      border-bottom: 1px solid var(--oat);
    }

    .nav-links li:last-child a { border-bottom: 0; }

    .doors { grid-template-columns: 1fr; gap: 24px; }

    .rituals { grid-template-columns: 1fr; gap: 24px; }

    .story-cards { grid-template-columns: 1fr; gap: 56px; }
  }

  /* About Sarah */
  .about {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: clamp(40px, 6vw, 104px);
    align-items: center;
    padding: clamp(96px, 12vw, 176px) var(--gutter);
    max-width: 1440px;
    margin: 0 auto;
  }

  .about-photo {
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: 480px;
    background: var(--oat);
    border-radius: 6px;
    overflow: hidden;
  }

  .about-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-text p {
    font-size: clamp(19px, 1.5vw, 21px);
    line-height: 1.75;
    max-width: 34em;
    margin: 0;
  }

  @media (max-width: 860px) {
    .about { grid-template-columns: 1fr; }
  }

  /* Stay close */
  .stay-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(80px, 10vw, 144px) var(--gutter);
    text-align: center;
  }

  .stay .section-heading { margin-bottom: 20px; }

  .stay p {
    font-size: clamp(19px, 1.5vw, 21px);
    margin: 0 auto 40px;
    max-width: 32em;
  }

  .stay-form {
    display: flex;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto 20px;
  }

  .stay-form input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-text);
    font-weight: 300;
    font-size: 18px;
    color: var(--forest);
    background: var(--linen);
    border: 1px solid var(--sage);
    border-radius: 999px;
    padding: 16px 24px;
  }

  .stay-form input:focus { outline: 2px solid var(--emerald); outline-offset: 2px; }

  .stay-form .button { cursor: pointer; white-space: nowrap; }

  /* Footer */
  .site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 48px var(--gutter);
    background: var(--oat);
    border-top: 1px solid var(--linen);
  }

  .footer-brand {
    font-family: var(--font-name);
    color: var(--rose);
    font-size: 30px;
    letter-spacing: 0.04em;
    line-height: 1;
  }

  .footer-links {
    display: flex;
    gap: clamp(24px, 3vw, 40px);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer-links a {
    font-size: 18px;
    color: var(--forest);
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
  }

  .footer-links a:hover { color: var(--pine); border-bottom-color: var(--rose); }

  @media (max-width: 600px) {
    .stay-form { flex-direction: column; }
    .site-footer { flex-direction: column; align-items: flex-start; }
  }

  /* Sexual wellness page */
  .wellness-page { padding-top: clamp(48px, 7vw, 104px); }
  .wellness-page .section-heading { font-size: clamp(44px, 6vw, 80px); }

  .promise {
    margin-top: clamp(80px, 10vw, 144px);
    padding-top: clamp(56px, 7vw, 88px);
    border-top: 1px solid var(--oat);
  }

  .promise .section-heading { margin-bottom: clamp(28px, 4vw, 44px); }

  .promise-item { max-width: 30em; }

  .promise-item h3 {
    font-family: var(--font-heading);
    font-weight: 300;
    color: var(--pine);
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1.2;
    margin: 0 0 12px;
  }

  .promise-item p { margin: 0; font-size: 19px; }

  a.ritual { display: flex; color: inherit; }

  /* Where to start (quiz) */
  .quiz {
    margin-top: clamp(80px, 10vw, 144px);
    padding-top: clamp(56px, 7vw, 88px);
    border-top: 1px solid var(--oat);
    text-align: center;
  }

  .quiz-step { max-width: 820px; margin: 0 auto; }

  .quiz [tabindex="-1"]:focus { outline: none; }

  .quiz-label {
    display: block;
    color: var(--rose);
    font-size: 15px;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
  }

  .quiz .section-heading { margin-bottom: 20px; }

  .quiz-text {
    font-size: clamp(19px, 1.5vw, 21px);
    max-width: 32em;
    margin: 0 auto 40px;
  }

  .quiz-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; }
  .quiz-dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--oat); }
  .quiz-dots span.on { background: var(--emerald); }

  .quiz-question {
    font-family: var(--font-heading);
    font-weight: 300;
    color: var(--pine);
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.15;
    margin: 0 0 40px;
  }

  .quiz-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 440px;
    margin: 0 auto;
  }

  .quiz-option {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: 18px;
    color: var(--forest);
    background: transparent;
    border: 1px solid var(--pine);
    border-radius: 999px;
    padding: 16px 28px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }

  .quiz-option:hover { background: var(--emerald); border-color: var(--emerald); color: var(--linen); }

  .quiz-card { max-width: 440px; margin: 0 auto; text-align: left; }

  .quiz-gift { margin: 48px auto 20px; }

  .quiz-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin-top: 48px;
  }

  .quiz-again {
    font-family: var(--font-text);
    font-weight: 300;
    font-size: 19px;
    color: var(--pine);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rose);
    padding: 0 0 4px;
    cursor: pointer;
  }

  .quiz-again:hover { color: var(--emerald); }

  /* Back to the home page (all pages except home) */
  .back-home {
    display: inline-block;
    margin: 28px var(--gutter) 0;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pine);
  }

  .back-home:hover { color: var(--emerald); }

  .back-home + .wellness-page { padding-top: clamp(32px, 4vw, 56px); }

  button.button { cursor: pointer; }

  /* ===== Stories: built exactly as on the old page, colors swapped to the palette =====
     old #2E312B -> Pine (stories library), #2E332B -> Forest (text), #EAFAF1 / #FFFFFF -> Linen, #5FC9AE -> Sage,
     #2F8A76 Deep Emerald, #FADBD8 Blush and #9AAB98 Sage kept as they were. */
  :root { --pad: 60px; --r-lg: 28px; --r-md: 16px; }

  a.story { display: block; }

  .story-page { background: var(--linen); }

  .story-dark { background: var(--pine); color: var(--linen); }
  .article-bar-wrap { background: var(--linen); }
  .story-sage { background: var(--sage); }

  .zoom { overflow: hidden; }
  .zoom img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1); }
  .zoom:hover img { transform: scale(1.06); }

  .arrow-glyph { display: inline-block; transition: transform 0.25s ease; }
  .link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
  .link-arrow:hover .arrow-glyph { transform: translateX(4px); }
  .link-arrow.back:hover .arrow-glyph { transform: translateX(-4px); }

  /* Tags: pill + date */
  .tags { display: flex; align-items: center; gap: 14px; }
  .tag-pill {
    font-family: var(--font-story-title); font-weight: 500; font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--forest); border: 1px solid var(--forest);
    border-radius: 999px; padding: 5px 12px;
  }
  .tag-date {
    font-family: var(--font-story-title); font-weight: 500; font-size: 11px; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--blush);
  }

  /* Article top bar */
  .article-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 24px var(--pad) 22px; border-bottom: 1px solid rgba(58, 61, 54, 0.12);
  }
  .article-bar-home { display: flex; align-items: center; gap: 13px; color: var(--rose); }
  .article-bar-home svg { flex: none; }
  .article-bar-home span {
    font-family: var(--font-story-title); font-weight: 500; font-size: 24px; letter-spacing: 0.06em;
    line-height: 1; text-transform: lowercase;
  }
  .article-bar-shop {
    font-family: var(--font-story-title); font-weight: 500; font-size: 11px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--rose);
  }

  /* Opener: title beside photo (the tiny silver dash) */
  .dash-opener {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 52px;
    align-items: end; padding: 52px var(--pad) 0;
  }
  .dash-opener .tags { margin-bottom: 24px; }
  .dash-photo { height: 620px; border-radius: var(--r-lg); }

  .story-h1 {
    font-family: var(--font-story-title); font-weight: 500; letter-spacing: -0.02em; margin: 0;
    color: var(--blush); text-transform: lowercase;
  }
  .dash-opener .story-h1 { font-size: clamp(38px, 8vw, 76px); line-height: 1.02; }

  /* Band: full-width photo with the title on it */
  .story-band { position: relative; overflow: hidden; }
  .story-band > .zoom { position: absolute; inset: 0; }
  .story-band-shade { position: absolute; inset: 0; pointer-events: none; }
  .story-band-title {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 var(--pad) 40px; pointer-events: none;
  }
  .band-tags { padding: 16px var(--pad) 0; }

  .band-gazing { height: 760px; }
  .band-gazing.compact { height: 460px; }
  .band-gazing .story-band-shade { background: linear-gradient(180deg, rgba(58, 61, 54, 0) 46%, rgba(58, 61, 54, 0.52) 100%); }
  .band-gazing .story-h1 { font-size: 72px; line-height: 1.02; max-width: 15em; }

  .band-edges { height: 720px; }
  .band-edges .story-band-shade { background: linear-gradient(180deg, rgba(58, 61, 54, 0) 42%, rgba(58, 61, 54, 0.5) 100%); }
  .band-edges .story-h1 { font-size: 96px; line-height: 1; max-width: 13em; }

  .band-aftercare { height: 880px; }
  .aftercare-title {
    position: absolute; left: var(--pad); bottom: 34px; pointer-events: none;
    font-family: var(--font-story-title); font-weight: 500; font-size: 150px; letter-spacing: -0.02em;
    line-height: 1; color: var(--blush); text-transform: lowercase; margin: 0;
  }

  /* Story text */
  .story-body {
    max-width: 800px; padding: 22px var(--pad) 64px;
    font-family: var(--font-story-text); font-size: 17px; line-height: 1.41; color: var(--forest);
  }
  .dash-opener + .story-body { padding-top: 46px; }
  .story-body.short { padding-bottom: 34px; }
  .story-body p { margin: 0 0 17px; }
  .story-body h2 {
    font-family: var(--font-story-title); font-weight: 500; font-size: 40px; line-height: 1.25;
    margin: 38px 0 19px; color: var(--emerald);
  }
  .story-body h3 {
    font-family: var(--font-story-title); font-weight: 500; font-style: italic; font-size: 21px;
    line-height: 1.29; margin: 30px 0 13px; color: var(--linen);
  }
  .story-body a {
    color: inherit; text-decoration: underline; text-decoration-color: var(--linen);
    text-decoration-thickness: 1px; text-underline-offset: 3px;
  }
  .story-list { list-style: none; margin: 0 0 17px; padding: 0; display: flex; flex-direction: column; gap: 15px; }
  .story-list li { display: flex; gap: 16px; align-items: flex-start; }
  .story-list li::before {
    content: ""; flex: none; width: 7px; height: 7px; border-radius: 999px;
    background: var(--emerald); margin-top: 9px;
  }
  .story-note { border: 1px solid var(--linen); border-radius: var(--r-lg); padding: 26px 30px; margin: 30px 0 17px; }
  .story-note-label {
    font-family: var(--font-story-title); font-weight: 500; font-size: 11px; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--linen); margin-bottom: 12px;
  }
  .story-note p { margin: 0; }

  .story-back-row { max-width: 800px; padding: 0 var(--pad) 30px; }
  .story-back {
    font-family: var(--font-story-title); font-weight: 500; font-size: 13px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--emerald);
  }

  /* Stories library */
  .library { padding: 56px var(--pad) 96px; }
  .library-intro { max-width: 34em; margin-bottom: 52px; }
  .story-kicker { display: flex; align-items: center; justify-content: flex-end; gap: 1px; margin-bottom: 26px; margin-right: 61px; }
  .story-glyph { width: 38px; height: 38px; flex: none; }
  .story-kicker span {
    font-family: var(--font-story-title); font-weight: 500; font-size: 34px; letter-spacing: 0.06em;
    line-height: 1; color: var(--sage); text-transform: lowercase;
  }
  .library-h1 {
    font-family: var(--font-story-title); font-weight: 500; font-size: 52px; line-height: 1.12;
    letter-spacing: -0.02em; margin: 0 0 18px; color: var(--linen);
  }
  .stem-letter { position: relative; }
  .story-stem { position: absolute; width: 0.6px; background: var(--sage); pointer-events: none; }
  .library-lead { font-family: var(--font-story-text); font-size: 18px; line-height: 1.5; color: var(--linen); opacity: 0.88; margin: 0; }

  .library .tag-pill { color: var(--sage); border-color: var(--sage); }
  .library .tag-date { color: var(--sage); opacity: 0.75; }

  .library-feature {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 44px; align-items: center;
    width: 100%; border-bottom: 1px solid rgba(244, 239, 232, 0.16); padding-bottom: 52px; margin-bottom: 52px;
  }
  .library-feature .zoom { height: 460px; border-radius: var(--r-lg); }
  .library-feature .tags { margin-bottom: 16px; }
  .library-feature h2 {
    font-family: var(--font-story-title); font-weight: 500; font-size: 46px; line-height: 1.12;
    letter-spacing: -0.02em; margin: 0 0 16px; color: var(--blush); text-transform: lowercase;
  }
  .library-feature p {
    font-family: var(--font-story-text); font-size: 17px; line-height: 1.5; color: var(--linen);
    opacity: 0.85; margin: 0 0 22px; max-width: 26em;
  }
  .read-piece {
    font-family: var(--font-story-title); font-weight: 500; font-size: 10px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--sage);
  }

  .library-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
  .library-card { display: flex; flex-direction: column; gap: 16px; }
  .library-card .zoom { height: 260px; border-radius: var(--r-lg); }
  .library-card .tags { gap: 12px; margin-bottom: 12px; }
  .library-card h3 {
    font-family: var(--font-story-title); font-weight: 500; font-size: 26px; line-height: 1.2;
    letter-spacing: -0.01em; margin: 0 0 10px; color: var(--blush); text-transform: lowercase;
  }
  .library-card p {
    font-family: var(--font-story-text); font-size: 15px; line-height: 1.5; color: var(--linen); opacity: 0.8; margin: 0;
  }

  .explore-head { display: flex; align-items: center; gap: 18px; margin: 56px 0 26px; }
  .explore-head span:first-child {
    font-family: var(--font-story-title); font-weight: 500; font-size: 12px; letter-spacing: 0.26em;
    text-transform: uppercase; color: var(--sage);
  }
  .explore-head span:last-child { flex: 1; height: 1px; background: rgba(244, 239, 232, 0.14); }
  .explore-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
  .tt-card {
    display: flex; align-items: center; gap: 22px; max-width: 540px; width: 100%; padding: 14px;
    background: rgba(244, 239, 232, 0.04); border: 1px solid rgba(244, 239, 232, 0.18);
    border-radius: var(--r-lg); color: var(--linen);
  }
  .tt-card img { width: 124px; height: 124px; flex: none; border-radius: var(--r-md); object-fit: cover; display: block; }
  .tt-card > div { display: flex; flex-direction: column; gap: 8px; }
  .tt-title { font-family: var(--font-story-title); font-weight: 500; font-size: 22px; letter-spacing: 0.2em; text-transform: uppercase; }
  .tt-sub { font-family: var(--font-story-title); font-weight: 300; font-size: 15px; line-height: 1.4; }
  .tt-enter { font-family: var(--font-story-title); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }
  .tt-card:hover .tt-title { text-decoration: underline; text-underline-offset: 6px; }
  .tt-card:hover .arrow-glyph { transform: translateX(4px); }

  @media (prefers-reduced-motion: reduce) {
    .zoom img, .arrow-glyph { transition: none; }
  }

  /* Phone, following the old page's phone rules */
  @media (max-width: 860px) {
    :root { --pad: 22px; }
    .library-feature, .library-cards { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .story-body h2 { font-size: 26px; }
    .library-h1 { font-size: 28px; }
    .library-feature h2 { font-size: 25px; }
    .story-kicker span { font-size: 22px; }
    .band-gazing .story-h1 { font-size: 34px; }
    .band-edges { height: 310px; }
    .band-edges .story-h1 { font-size: 40px; }
    .band-aftercare { height: 380px; }
    .aftercare-title { font-size: 44px; }
    .band-gazing { height: 420px; }
    .band-gazing.compact { height: 300px; }
    .library-card .zoom { height: 190px; }
    .tag-date { letter-spacing: 0.2em; }
    .story-note-label { letter-spacing: 0.2em; }
    .article-bar { flex-wrap: wrap; }
  }

  @media (max-width: 760px) {
    .story-stem { display: none; }
    .story-kicker { justify-content: flex-start; margin-right: 0; }
    .dash-opener { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .dash-photo { height: auto; aspect-ratio: 3 / 4; }
  }

  .band-img { position: absolute; inset: 0; }
  .band-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* ===== Yoga and Tantra: built as on the old page, colors swapped to the palette =====
     old dark top -> Linen (Sarah's choice), #12241E -> Pine, #EAFAF1 / white -> Linen,
     #5FC9AE -> Dried Rose on light areas and Sage on the photo, dark shadows -> Forest.
     The chakra colors stay as the traditional rainbow (Sarah's choice). */
  .cat-page { padding: 24px var(--pad) 0; }

  .cat-back-row { display: flex; align-items: baseline; gap: 20px; margin-bottom: 14px; }
  .cat-back {
    font-family: var(--font-story-title); font-weight: 500; font-size: 13px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--rose);
  }

  .cat-rule { border-bottom: 1px solid rgba(58, 61, 54, 0.14); }
  .cat-rule-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; }
  .cat-line {
    font-family: var(--font-story-title); font-weight: 300; font-size: min(40px, 3.6vw);
    letter-spacing: 0.01em; line-height: 1; color: var(--pine); white-space: nowrap;
  }
  .tantra-page .cat-rule { margin-bottom: 34px; }

  /* Yoga hero */
  .yg-hero {
    position: relative; display: flex; justify-content: center;
    height: calc(100vh - 178px); height: calc(100dvh - 178px);
    margin: 0 calc(-1 * var(--pad)) 46px; overflow: hidden;
  }
  .yg-blur {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
    filter: blur(50px) brightness(0.75) saturate(1.15); transform: scale(1.15); pointer-events: none;
  }
  .yg-line {
    position: absolute; left: var(--pad); bottom: 24px; z-index: 1; pointer-events: none;
    font-family: var(--font-story-title); font-weight: 300; font-size: min(40px, 3.6vw); letter-spacing: 0.01em;
    line-height: 1; color: var(--linen); white-space: nowrap; text-shadow: 0 2px 30px rgba(58, 61, 54, 0.6);
  }
  .yg-panel {
    position: relative; height: 100%; overflow: hidden;
    width: min(100%, calc((100vh - 178px) * 0.8)); width: min(100%, calc((100dvh - 178px) * 0.8));
  }
  .yg-shot {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s ease; will-change: transform;
  }
  .yg-panel:hover .yg-shot { transform: scale(1.05); filter: saturate(1.08) brightness(1.04); }

  .yg-chips { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; flex-wrap: nowrap; gap: 24px; }
  .glass-chip {
    background: linear-gradient(160deg, rgba(244, 239, 232, 0.26), rgba(244, 239, 232, 0.02) 55%), rgba(244, 239, 232, 0.14);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(244, 239, 232, 0.28);
    box-shadow: inset 0 1px 0 rgba(244, 239, 232, 0.35), inset 0 -8px 12px -6px rgba(244, 239, 232, 0.2), 0 8px 20px rgba(58, 61, 54, 0.28);
    border-radius: 999px; cursor: pointer;
    font-family: var(--font-story-title); font-weight: 500; font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; padding: 11px 24px; color: var(--pine);
  }

  /* Tantra window */
  .tt-hero {
    display: none; position: absolute; right: var(--pad); bottom: 68px; z-index: 1;
    width: min(300px, calc((100vw - min(100vw, (100vh - 178px) * 0.8)) / 2 - 2 * var(--pad)));
    background: linear-gradient(160deg, rgba(244, 239, 232, 0.22), rgba(244, 239, 232, 0.02) 55%), rgba(244, 239, 232, 0.12);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(244, 239, 232, 0.28);
    box-shadow: inset 0 1px 0 rgba(244, 239, 232, 0.3), 0 8px 24px rgba(58, 61, 54, 0.28);
    border-radius: var(--r-lg); padding: 12px; align-items: center; gap: 14px; color: var(--linen);
  }
  .tt-hero .tt-thumb { width: 72px; height: 72px; flex: none; border-radius: var(--r-md); overflow: hidden; }
  .tt-hero .tt-title { font-size: 16px; }
  .tt-hero .tt-sub { font-size: 12.5px; line-height: 1.35; }
  .tt-hero .tt-enter { font-size: 11px; color: var(--sage); }
  .tt-hero > div:last-child { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

  .tt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .tt-below { display: flex; justify-content: center; margin: 0 0 40px; }
  .tt-card.light {
    background: rgba(47, 95, 82, 0.03); border: 1px solid rgba(47, 95, 82, 0.2); color: var(--pine);
  }
  .tt-card.light .tt-thumb { width: 124px; height: 124px; flex: none; border-radius: var(--r-md); overflow: hidden; }
  .tt-card.light .tt-sub { color: var(--forest); }
  .tt-card.light .tt-enter { color: var(--emerald); }

  @media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
    .tt-below { display: none; }
    .tt-hero { display: flex; }
  }

  /* Tantra: the chakra column */
  .chakra-wrap { display: flex; flex-direction: column; align-items: center; gap: 34px; margin: -34px 0 58px; }
  .chakra-box { position: relative; width: 100%; max-width: 320px; aspect-ratio: 320 / 640; }
  .chakra-canvas { position: absolute; inset: 0; }
  .ch-hit { position: absolute; left: 8%; right: 8%; background: none; border: 0; padding: 0; cursor: default; color: var(--pine); }
  .ch-hit.live { cursor: pointer; }
  .ch-name { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 16px; white-space: nowrap; opacity: 0.85; }
  .ch-hit:hover .ch-name, .ch-hit:focus-visible .ch-name { opacity: 1; }
  .ch-sk { font-family: var(--font-name); font-weight: 400; font-size: 24px; letter-spacing: 0.02em; color: var(--pine); }
  .ch-en { margin-left: 6px; font-family: var(--font-story-title); font-weight: 300; font-size: 12px; letter-spacing: 0.01em; color: var(--pine); }
  .ch-list-mobile { display: none; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 320px; padding: 0 8px; }
  .ch-list-mobile div { display: flex; align-items: baseline; gap: 8px; }
  .ch-list-mobile .ch-sk { font-size: 26px; letter-spacing: 0.06em; }
  .ch-list-mobile .ch-en { margin-left: 0; font-size: 13px; }

  .ch-veil { position: fixed; inset: 0; background: rgba(58, 61, 54, 0.55); z-index: 40; }
  .ch-float {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 41;
    width: min(240px, calc(100vw - 40px)); max-height: 80vh; overflow: auto;
    border-radius: var(--r-lg); background: var(--sage); box-shadow: 0 26px 60px rgba(58, 61, 54, 0.45);
  }
  .ch-float[hidden], .ch-veil[hidden] { display: none; }
  .ch-story { display: block; color: inherit; }
  .ch-story-photo { position: relative; height: 104px; overflow: hidden; }
  .ch-story-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ch-story-photo .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 61, 54, 0) 46%, rgba(58, 61, 54, 0.52) 100%); }
  .ch-story-photo .title {
    position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 18px 16px;
    font-family: var(--font-story-title); font-weight: 500; font-size: 15px; letter-spacing: -0.02em;
    line-height: 1.08; color: var(--blush); text-transform: lowercase;
  }
  .ch-story-text { padding: 14px 16px 16px; background: var(--forest); }
  .ch-story-text .kind {
    font-family: var(--font-story-title); font-weight: 500; font-size: 9px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--sage); margin-bottom: 7px;
  }
  .ch-story-text p { font-family: var(--font-story-text); font-size: 12.5px; line-height: 1.45; color: var(--linen); opacity: 0.8; margin: 0 0 11px; }
  .ch-story-text .read {
    font-family: var(--font-story-title); font-weight: 500; font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--sage);
  }
  .ch-close {
    position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 999px; border: 0;
    cursor: pointer; background: rgba(58, 61, 54, 0.6); color: var(--linen);
    font: 500 13px/1 var(--font-story-title);
  }

  @media (max-width: 860px) {
    .yg-hero { height: calc(100vh - 220px); height: calc(100dvh - 220px); }
    .yg-panel { width: min(100%, calc((100vh - 220px) * 0.8)); width: min(100%, calc((100dvh - 220px) * 0.8)); }
    .cat-line, .yg-line { white-space: normal; }
  }

  @media (max-width: 480px) {
    .ch-name { display: none; }
    .ch-list-mobile { display: flex; }
  }

  @media (prefers-reduced-motion: reduce) {
    .yg-shot { transition: none; }
  }

  .tt-hero:hover .tt-title { text-decoration: underline; text-underline-offset: 6px; }
  .tt-hero:hover .arrow-glyph { transform: translateX(4px); }

  /* Yoga square: Sarah's photo from the old page with a whisper of blur */
  .door.has-photo img.base { filter: brightness(1.05) blur(1.5px); transform: scale(1.04); }
  .door.has-photo .door-name { color: var(--linen); text-shadow: 0 2px 18px rgba(58, 61, 54, 0.45); }

  /* All three square headings: one size, as large as the longest name allows on one line, so they sit in one line */
  .door { container-type: inline-size; }
  .door-name { font-size: var(--door-size, 16cqw); white-space: nowrap; line-height: 1; }

  /* Phones: larger small text (computers keep the old page's sizes) */
  @media (max-width: 600px) {
    .tag-pill, .tag-date, .story-note-label, .article-bar-shop, .read-piece { font-size: 13px; }
    .glass-chip { font-size: 13px; padding: 13px 28px; }
    .story-body { font-size: 18px; }
    .library-card p { font-size: 17px; }
  }

  /* Lift on hover: story cards on the home page, Movies and Games on All Stories */
  .stories a.story, .explore-cards .tt-card { transition: transform 0.4s ease; }
  .stories a.story:hover, .explore-cards .tt-card:hover { transform: translateY(-6px); }

  /* Yoga page on wide screens: "we love yoga" (left) and the Tantra window (right) each sit
     centered in the blurred side beside the photo, level with each other, so they mirror */
  @media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
    .yg-line { left: calc((100% - min(100%, calc((100vh - 178px) * 0.8))) / 4); bottom: 40px; transform: translateX(-50%); }
    .tt-hero { right: calc((100% - min(100%, calc((100vh - 178px) * 0.8))) / 4); bottom: 40px; transform: translateX(50%); }
  }

  /* Mats and Props breathe gently, like the photo on the home page */
  .glass-chip { animation: chip-pulse 2.8s ease-in-out infinite; }
  .glass-chip + .glass-chip { animation-delay: 0.5s; }
  @keyframes chip-pulse {
    0%, 100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(244, 239, 232, 0.35), inset 0 -8px 12px -6px rgba(244, 239, 232, 0.2), 0 8px 20px rgba(58, 61, 54, 0.28); }
    50% { transform: scale(1.15); box-shadow: inset 0 1px 0 rgba(244, 239, 232, 0.5), inset 0 -8px 12px -6px rgba(244, 239, 232, 0.35), 0 0 26px 6px rgba(244, 239, 232, 0.45), 0 10px 24px rgba(58, 61, 54, 0.3); }
  }
  @media (prefers-reduced-motion: reduce) { .glass-chip { animation: none; } }

  @media (prefers-reduced-motion: reduce) {
    .stories a.story, .explore-cards .tt-card { transition: none; }
  }

  /* ===== Yoga For Period: article on the Yoga page =====
     Headings Cormorant Garamond Light in Pine, text Jost Light in Forest (18px and up),
     small labels in Dried Rose. Each phase keeps one palette color, used in the cycle chart
     and beside its day label: Menstrual Dried Rose, Follicular Sage, Ovulation Deep Emerald, Luteal Pine. */
  .yp { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(80px, 10vw, 140px); }
  .ph-menstrual { --ph: var(--rose); }
  .ph-follicular { --ph: var(--sage); }
  .ph-ovulation { --ph: var(--emerald); }
  .ph-luteal { --ph: var(--pine); }

  .yp-head { margin-bottom: clamp(28px, 4vw, 40px); }
  .yp h1 {
    font-family: var(--font-heading); font-weight: 300; color: var(--pine);
    font-size: clamp(46px, 6.4vw, 84px); line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 10px; text-wrap: balance;
  }
  .yp-sub { font-family: var(--font-heading); font-weight: 300; font-style: italic; color: var(--rose); font-size: clamp(26px, 3vw, 38px); line-height: 1.2; margin: 0; }
  .yp-lead { font-size: clamp(20px, 1.7vw, 23px); line-height: 1.7; margin: 0 0 clamp(40px, 5vw, 56px); }

  .yp h2 {
    font-family: var(--font-heading); font-weight: 300; color: var(--pine);
    font-size: clamp(32px, 3.6vw, 46px); line-height: 1.15; margin: 0 0 18px; text-wrap: balance;
  }
  .yp h3 { font-family: var(--font-heading); font-weight: 300; color: var(--pine); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; margin: 32px 0 16px; }
  .yp p { font-size: 19px; line-height: 1.75; margin: 0 0 20px; }

  /* Cycle chart: one row per phase on a 28-day scale */
  .yp-cycle { display: grid; gap: 12px; margin: 0 0 clamp(56px, 7vw, 80px); padding: 28px clamp(20px, 3vw, 32px) 20px; background: var(--oat); border-radius: 6px; }
  .yp-row { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: 16px; }
  .yp-name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .yp-name b { font-weight: 400; color: var(--pine); font-size: 18px; }
  .yp-name span { font-size: 15px; color: var(--rose); letter-spacing: 0.04em; }
  .yp-track { position: relative; height: 14px; border-radius: 999px; background: rgba(58, 61, 54, 0.06); }
  .yp-track i {
    position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--ph);
    left: calc((var(--from) - 1) / 28 * 100%); width: calc((var(--to) - var(--from) + 1) / 28 * 100%);
  }
  .yp-scale .yp-track { background: none; height: 20px; }
  .yp-scale em {
    position: absolute; top: 0; transform: translateX(-50%); left: calc((var(--d) - 0.5) / 28 * 100%);
    font-style: normal; font-size: 15px; color: var(--forest); opacity: 0.6; font-variant-numeric: tabular-nums;
  }

  /* Phase sections */
  .yp-phase { padding-top: clamp(48px, 6vw, 72px); margin-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--oat); }
  .yp-days { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: 0.08em; color: var(--rose); margin-bottom: 10px; }
  .yp-days::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--ph); }

  /* Photos: cropped to the practice, softened and warmed so the three read as one series */
  .yp-photo { position: relative; margin: 8px 0 28px; aspect-ratio: 3 / 2; max-width: 100%; border-radius: 6px; overflow: hidden; background: var(--oat); }
  .yp-photo img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 92%;
    transform: scale(var(--zoom, 1.3)); transform-origin: var(--focus, 50% 92%);
    filter: brightness(1.07) contrast(0.95) saturate(0.84) sepia(0.18);
  }
  .yp-photo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 60%, rgba(244, 239, 232, 0) 55%, rgba(58, 61, 54, 0.16) 100%);
  }

  .yp-poses { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .yp-poses li { position: relative; padding-left: 26px; font-size: 19px; line-height: 1.65; }
  .yp-poses li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 7px; height: 7px; border-radius: 999px; background: var(--ph); }
  .yp-poses b { font-weight: 400; color: var(--pine); }

  .yp-remember { margin-top: clamp(56px, 7vw, 88px); padding: clamp(32px, 4vw, 48px); background: var(--oat); border-radius: 6px; }
  .yp-remember p { margin: 0; }

  .yp-note { margin: 40px 0 0; font-size: 18px; line-height: 1.7; opacity: 0.8; }

  @media (max-width: 600px) {
    .yp-row { grid-template-columns: 7.2em 1fr; gap: 10px; }
    .yp-photo { aspect-ratio: 4 / 3; }
  }
  .ph-menstrual .yp-photo img { --focus: 58% 94%; }
  .ph-follicular .yp-photo img { --focus: 52% 92%; --zoom: 1.2; }
  .ph-luteal .yp-photo img { --focus: 52% 96%; }

  /* Yoga page: the "Yoga For Period" window floats above the Tantra window, same glass style */
  @media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
    .tt-hero.yp-window { bottom: calc(40px + var(--tt-h, 116px) + 16px); }
  }
  .tt-thumb img[src*="yoga-period"] { object-fit: cover; object-position: 58% 96%; transform: scale(1.7); transform-origin: 58% 94%; filter: brightness(1.07) contrast(0.95) saturate(0.84) sepia(0.18); }
  .tt-below { flex-direction: column; align-items: center; gap: 16px; }

  /* Child's pose photo: a soft warm light lifts the shadow on Sarah's face */
  .ph-menstrual .yp-photo::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse 15% 20% at 60% 71%, rgba(244, 239, 232, 0.42), rgba(244, 239, 232, 0.16) 55%, rgba(244, 239, 232, 0) 100%);
    mix-blend-mode: screen;
  }
  .ph-menstrual .yp-photo img { filter: brightness(1.1) contrast(0.92) saturate(0.84) sepia(0.18); }

  /* Yoga page windows: both the same size */
  .tt-hero { min-height: 160px; }
  @media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
    .tt-hero.yp-window { bottom: calc(40px + 160px + 16px); }
  }
  .tt-below { display: grid; grid-auto-rows: 1fr; justify-items: center; }
  .tt-below .tt-card { height: 100%; }

  /* Yoga page windows: larger, easier-to-read text */
  .tt-hero .tt-title { font-size: 18px; }
  .tt-hero .tt-sub { font-size: 15px; line-height: 1.35; }
  .tt-hero .tt-enter { font-size: 13px; }

  /* ===== Train & film page (from the old page, in the new site's fonts, colors and sizes) ===== */
  .tf { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(80px, 10vw, 140px); }
  .tf h1 {
    font-family: var(--font-heading); font-weight: 300; color: var(--pine);
    font-size: clamp(44px, 6vw, 80px); line-height: 1.06; letter-spacing: -0.01em; margin: 0 0 clamp(32px, 4vw, 48px); text-wrap: balance;
  }
  .tf p { font-size: 19px; line-height: 1.75; margin: 0; }
  .tf-reel { display: flex; justify-content: center; color: var(--rose); padding: clamp(28px, 4vw, 40px) 0; }
  .film-reel-spokes { animation: film-reel-spin 6s linear infinite; }
  .film-reel-spokes--b { animation-direction: reverse; animation-duration: 5s; }
  @keyframes film-reel-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .film-reel-spokes { animation: none; } }

  .tf .tf-quote {
    font-family: var(--font-heading); font-weight: 300; font-style: italic; color: var(--pine);
    font-size: clamp(30px, 3.4vw, 42px); line-height: 1.3; margin: clamp(48px, 6vw, 72px) 0 0; text-wrap: balance;
  }

  .tf-shelf { margin-top: clamp(56px, 7vw, 80px); }
  .tf-shelf + .tf-shelf { margin-top: 48px; }
  .tf-label { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
  .tf-label span:first-child { font-size: 16px; font-weight: 400; letter-spacing: 0.12em; color: var(--rose); }
  .tf-label span:last-child { flex: 1; height: 1px; background: var(--oat); }
  .tf .tf-empty { font-size: 18px; opacity: 0.8; }
  .tf p + p { margin-top: 20px; }
  .tf-invite { margin-top: clamp(56px, 7vw, 80px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--oat); display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
  .tf .tf-invite p { font-size: 20px; }

  /* Ritual cards: name only */
  .ritual { display: flex; align-items: center; min-height: 140px; }
  .ritual .ritual-top { margin: 0; }

  /* ===== Ritual pages: name, then empty photo frames waiting for Sarah's photos ===== */
  .ritual-page { max-width: 1100px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--gutter) clamp(80px, 10vw, 140px); }
  .ritual-back { display: inline-block; font-size: 16px; letter-spacing: 0.04em; color: var(--pine); margin-bottom: clamp(24px, 3vw, 36px); }
  .ritual-back:hover { color: var(--emerald); }
  .ritual-page h1 {
    font-family: var(--font-heading); font-weight: 300; color: var(--pine);
    font-size: clamp(46px, 6.4vw, 84px); line-height: 1.04; letter-spacing: -0.01em; margin: 0 0 clamp(32px, 4vw, 48px);
  }

  /* A frame shows its label until a photo (img) is placed inside it */
  .frame {
    position: relative; margin: 0; overflow: hidden; background: var(--oat); border-radius: 10px;
    aspect-ratio: 4 / 5; max-width: 100%; display: flex; align-items: center; justify-content: center;
  }
  .frame.frame-whole { aspect-ratio: 3 / 2; margin-bottom: clamp(20px, 2.5vw, 32px); }
  .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .frame-label { font-size: 15px; letter-spacing: 0.06em; color: var(--rose); padding: 12px; text-align: center; }
  .frame:has(img) .frame-label { display: none; }

  .frame-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
  @media (max-width: 860px) { .frame-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* Ritual page: the whole-ritual photo on the left, name, price, description and button on the right */
  .ritual-main {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px);
    align-items: center; margin-bottom: clamp(32px, 4vw, 48px);
  }
  .ritual-main .frame-whole { margin-bottom: 0; }
  .ritual-info { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
  .ritual-info h1 { margin: 0; font-size: clamp(42px, 4.6vw, 68px); text-wrap: balance; }
  .ritual-page-price { margin: 0; font-size: 24px; font-weight: 300; color: var(--forest); }
  .ritual-desc { margin: 0 0 8px; font-size: 15px; letter-spacing: 0.06em; color: var(--rose); }

  @media (max-width: 860px) {
    .ritual-main { grid-template-columns: minmax(0, 1fr); }
    /* two per row on a phone: a frame left alone in the last row fills the width */
    .frame-grid .frame:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  }

  /* Ritual photo frames lift on hover, like the cards and photos elsewhere on the site */
  .ritual-page .frame { transition: transform 0.4s ease; }
  .ritual-page .frame:hover { transform: translateY(-6px); }
  @media (prefers-reduced-motion: reduce) { .ritual-page .frame { transition: none; } }

  /* The explanation in brackets: same Dried Rose, a little smaller and lighter */
  .frame-note { font-size: 13px; opacity: 0.75; }

  /* Sarah's line drawings stand in until the real photos arrive: drawing above, label under it.
     A real photo (any img that is not a drawing) covers the frame and hides both. */
  .frame { flex-direction: column; gap: 14px; }
  .frame img.drawing { position: static; inset: auto; width: 56%; height: auto; object-fit: contain; }
  .frame.frame-whole img.drawing { width: 30%; }
  .frame:has(img) .frame-label { display: block; }
  .frame:has(img:not(.drawing)) .frame-label, .frame:has(img:not(.drawing)) img.drawing { display: none; }

/* A card shown whole on the oat frame, like a real card on a table (breath card) */
.frame.frame-card img.card-photo {
  position: static; inset: auto; width: auto; height: 100%; max-width: 100%;
  object-fit: contain; border-radius: 8px;
  box-shadow: 0 10px 24px rgba(58, 61, 54, 0.16);
}

/* Breath card: on hover it grows a little and leans toward the cursor (js/card-tilt.js) */
.frame.frame-card { perspective: 900px; }
.frame.frame-card img.card-photo {
  transition: transform 0.5s ease, box-shadow 0.5s ease; will-change: transform;
}
.frame.frame-card.is-tilting img.card-photo {
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  box-shadow: 0 18px 36px rgba(58, 61, 54, 0.22);
}

/* Breath card frame: the card is a link to its own page, and the label stays under it */
.frame.frame-card .card-link { display: block; height: 70%; cursor: pointer; }
.frame.frame-card .card-link img.card-photo { display: block; }
.frame.frame-card .frame-label { display: block !important; }

/* Breath card page: the two sides of the card */
.card-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: clamp(24px, 3vw, 40px); }
.card-side { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.card-side img, .card-side .card-blank {
  width: 100%; max-width: 420px; aspect-ratio: 2 / 3; border-radius: 12px;
  box-shadow: 0 14px 32px rgba(58, 61, 54, 0.16);
}
.card-side .card-blank { background: #FFE6E3; display: flex; align-items: center; justify-content: center; color: var(--rose); font-size: 15px; letter-spacing: 0.06em; }
.card-side figcaption { font-size: 15px; letter-spacing: 0.06em; color: var(--rose); }
@media (max-width: 640px) { .card-sides { grid-template-columns: minmax(0, 1fr); } }

/* Breath card flip (replaces the link): click or tap turns the card over in its frame */
.frame.frame-card .card-flip {
  all: unset; box-sizing: border-box; display: block; position: relative;
  height: 70%; aspect-ratio: 2 / 3; cursor: pointer; border-radius: 8px;
  transition: transform 0.5s ease; will-change: transform; transform-style: preserve-3d;
}
.frame.frame-card .card-flip:focus-visible { outline: 2px solid var(--emerald); outline-offset: 4px; }
.frame.frame-card.is-tilting .card-flip { transition: transform 0.15s ease-out; }
.frame.frame-card .card-inner {
  position: absolute; inset: 0; display: block; transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.frame.frame-card .card-flip.is-flipped .card-inner { transform: rotateY(180deg); }
.frame.frame-card img.card-face {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 10px 24px rgba(58, 61, 54, 0.16);
}
.frame.frame-card.is-tilting img.card-face { box-shadow: 0 18px 36px rgba(58, 61, 54, 0.22); }
.frame.frame-card img.card-back { transform: rotateY(180deg); }
.frame.frame-card .card-hint { display: none; font-size: 13px; letter-spacing: 0.06em; color: var(--rose); opacity: 0.75; margin-top: -8px; }
@media (hover: none) { .frame.frame-card .card-hint { display: block; } }
@media (prefers-reduced-motion: reduce) { .frame.frame-card .card-inner { transition: none; } }
.frame.frame-card .card-flip { flex-shrink: 0; }
@media (max-width: 860px) {
  .frame.frame-card { gap: 8px; }
  .frame.frame-card .card-flip { height: 60%; }
  .frame.frame-card .frame-label { padding: 0 8px; line-height: 1.35; }
  .frame.frame-card .card-hint { margin-top: 0; }
}


  /* ===== Breathe (added October 10, 2026) ===== */
  /* Home page: the two teal buttons sit side by side and wrap on a phone */
  .hero-buttons { display: flex; flex-wrap: wrap; gap: 18px 22px; }

  /* Yoga page: the "Breathe" window floats above "Yoga For Period", same glass style and size */
  @media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
    .tt-hero.br-window { bottom: calc(40px + 2 * (160px + 16px)); }
  }

  /* Sexual wellness page: the "Breathe" window under the rituals */
  .sw-breathe { display: flex; justify-content: center; margin: 48px 0 72px; }

  /* Yoga page, for now: "Yoga For Period" moves to the left, above "we love yoga"; Breathe and Tantra stay on the right */
  @media (min-width: 1100px) and (min-aspect-ratio: 3/2) {
    .tt-hero.yp-window {
      right: auto;
      left: calc((100% - min(100%, calc((100vh - 178px) * 0.8))) / 4);
      bottom: 150px;
      transform: translateX(-50%);
    }
    .tt-hero.br-window { bottom: calc(40px + 160px + 16px); }
  }

  /* Language switch, October 14, 2026: English and Ukrainian.
     Text pairs carry data-l="en" / data-l="uk"; only the chosen one shows. */
  :root[data-lang="uk"] [data-l="en"],
  :root:not([data-lang="uk"]) [data-l="uk"] { display: none !important; }

  /* Cyrillic letters fall back to close relatives: Italiana has no Cyrillic, Forum does */
  :root { --font-name: 'Italiana', 'Forum', serif; }

  .site-header nav { margin-left: auto; }
  .lang-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: clamp(22px, 2.6vw, 40px);
    font-family: var(--font-text);
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.14em;
    color: var(--sage);
    line-height: 1;
  }
  .lang-toggle .lang-sep { opacity: 0.7; padding: 0 2px; }
  .lang-toggle button {
    font: inherit;
    letter-spacing: inherit;
    color: var(--forest);
    background: none;
    border: 0;
    padding: 8px 4px 6px;
    cursor: pointer;
    opacity: 0.55;
    border-bottom: 1px solid transparent;
    transition: opacity 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }
  .lang-toggle button:hover { opacity: 0.85; }
  .lang-toggle button[aria-pressed="true"] { opacity: 1; color: var(--pine); border-bottom-color: var(--rose); }

  @media (max-width: 860px) {
    .site-header nav { margin-left: 0; }
    .lang-toggle { order: 2; margin-left: auto; }
    .menu-toggle { order: 3; margin-left: 14px; }
  }

  .stories-lang-note {
    margin: calc(-1 * clamp(18px, 2.4vw, 34px)) 0 clamp(28px, 3.5vw, 48px);
    font-size: 16px;
    color: var(--rose);
    letter-spacing: 0.02em;
  }

  /* Ukrainian text, October 14, 2026: Sarah chose Montserrat. Jost has no і / ї and an odd є,
     so in Ukrainian the text font becomes Montserrat; English stays in Jost. */
  :root[data-lang="uk"] { --font-text: 'Montserrat', 'Jost', sans-serif; }

  /* Poppins has no Cyrillic: Ukrainian letters in Poppins places come from Montserrat */
  :root { --font-story-title: 'Poppins', 'Montserrat', sans-serif; }

/* October 24, 2026: footer links wrap on phones instead of running off the screen */
.footer-links { flex-wrap: wrap; row-gap: 12px; }

  /* October 31, 2026: easier reading in all stories (Sarah approved 19px, airy lines, darker date line) */
  .story-body { font-size: 19px; line-height: 1.6; }
  .story-body p { margin: 0 0 20px; }
  .story-list li::before { margin-top: 11px; }
  .story-sage .tag-date { color: var(--forest); }
  @media (max-width: 600px) { .story-body { font-size: 18px; line-height: 1.6; } }

  /* ===== October 31, 2026: ONE PATTERN FOR ALL STORIES (Sarah: bright, inviting, bigger text, pink titles) =====
     The top of every story (picture, pink title, tags) sits on sage; the reading part sits on light linen,
     in one calm centred column. Text 20px (19px on phone), airy lines, the first paragraph a little larger. */
  .story-sage { background: var(--linen); }
  .story-sage .dash-opener { background: var(--sage); padding-bottom: 52px; }
  .story-sage .band-tags { background: var(--sage); padding-bottom: 18px; }
  .story-sage .story-h1 { color: var(--blush); text-shadow: 0 1px 14px rgba(58, 61, 54, .16); }
  .story-sage .story-band .story-h1 { text-shadow: none; }
  .story-sage .tag-pill { color: var(--forest); border-color: var(--forest); }
  .story-sage .tag-date { color: var(--forest); }
  .story-sage .story-body { max-width: 760px; margin: 0 auto; box-sizing: border-box; padding: 48px var(--pad) 56px; font-size: 23px; line-height: 1.6; color: var(--forest); }
  /* Nov 6 (Sarah): the whole story as big as its first paragraph, easy on the eyes from start to end */
  .story-sage .story-body > p:first-child { font-size: 1em; line-height: inherit; }
  .story-sage .story-body p { margin: 0 0 22px; }
  .story-sage .story-body h2 { color: var(--emerald); }
  .story-sage .story-body h3 { color: var(--rose); }
  .story-sage .story-body a { text-decoration-color: var(--emerald); text-decoration-thickness: 1px; }
  .story-sage .story-body a:hover { color: var(--emerald); }
  .story-sage .story-note { background: var(--oat); border-color: var(--oat); }
  .story-sage .story-note-label { color: var(--rose); }
  .story-sage .story-list li::before { margin-top: 12px; }
  .story-sage .story-back-row { max-width: 760px; margin: 0 auto; box-sizing: border-box; padding-bottom: 56px; }
  @media (max-width: 600px) {
    .story-sage .story-body { font-size: 20.5px; padding-top: 34px; }
    .story-sage .story-body > p:first-child { font-size: 1em; }
  }

  /* October 31, 2026 (late): no more brownish dried rose in the stories; crisper, darker reading text */
  .story-page .article-bar-home, .story-page .article-bar-shop { color: var(--emerald); }
  .story-sage .story-body { color: #2A2C27; }
  .story-sage .story-body h3, .story-sage .story-note-label { color: var(--emerald); }

  /* October 31, 2026 (night): header and footer, version C (Sarah). The header stays linen with a fine line under it;
     the footer is deep pine with light text, to close every page calmly. Version A (white header and footer) kept in our notes for later. */
  .site-header { border-bottom: 1px solid rgba(58, 61, 54, .12); }
  .site-footer { background: var(--pine); }
  .site-footer .footer-brand { color: var(--blush); }
  .site-footer .footer-links a { color: var(--linen); }
  .site-footer .footer-links a:hover, .site-footer .footer-links a:focus-visible { color: #fff; border-bottom-color: var(--blush); }

/* November 1, 2026: 18+ and discreet packaging line under every footer (Sarah chose A) */
.site-footer { flex-wrap: wrap; }
.site-footer::after {
  content: "For adults 18+ \00B7  Discreet packaging";
  flex-basis: 100%; align-self: stretch;
  margin-top: 6px; padding-top: 18px;
  border-top: 1px solid rgba(244, 239, 232, 0.18);
  font-family: var(--font-text); font-weight: 300;
  font-size: 14px; letter-spacing: 0.06em;
  color: var(--linen); opacity: 0.75;
}
:root[data-lang="uk"] .site-footer::after { content: "Для дорослих 18+ \00B7  Делікатне пакування"; }

/* November 1, 2026: tiny labels made easier to read (UX list item 8): nothing smaller than 13px */
.tag-pill, .tag-date, .article-bar-shop, .story-note-label, .read-piece,
.explore-head span:first-child, .tt-enter, .glass-chip, .tt-hero .tt-enter,
.ch-en, .ch-story-text .read { font-size: 13px !important; }
.tag-date, .read-piece, .ch-story-text .read { letter-spacing: 0.18em !important; }
.tk-next span.lbl, .tk-from .lbl, .shelf-go { font-size: 13px !important; letter-spacing: 0.18em !important; }
.tk-next a { font-size: 14px !important; }

/* November 1, 2026: on English-only stories, a quiet note for Ukrainian visitors */
.story-lang-note { max-width: 720px; margin: 0 auto; box-sizing: border-box; padding: 22px var(--pad) 0; font-family: var(--font-story-text); font-style: italic; font-size: 16px; color: rgba(58, 61, 54, .75); }

/* November 1, 2026: the A-sense name never breaks at its hyphen (it used to show as "A-" / "sense" while the font was loading on slow internet) */
.brand, .footer-brand { white-space: nowrap !important; flex-shrink: 0; }