:root {
    --paper: #FBF3F2;
    --ink: #5C3A45;
    --rose: #E8A0B4;
    --rose-deep: #C96A85;
    --leaf: #8FA07C;
    --petal: #F6D9DC;
    --petal-soft: #FCE8EA;
    --max-width: 640px;
  }

  * { box-sizing: border-box; }
  html {
    scroll-behavior: smooth;
    /* The side trails deliberately overhang their sections. Clip the
       horizontal overflow here rather than per-section, which would also
       cut off the vertical overlap that makes the flowers continuous.
       `clip` keeps the sticky nav working; `hidden` would break it. */
    overflow-x: clip;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Nunito Sans', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* No overflow-x here: it makes body a scroll container, which silently
       stops the sticky nav from sticking. <html> does the clipping instead. */
  }

  a { color: inherit; }

  /* The ring that lands on the calendar badge when someone arrives from a
     section page's "monthly reminder" link. It was sage - the one non-pink
     in the palette - but it appears nowhere else on the site and read as a
     browser default. Rose-deep is the heading colour, and at 3.3:1 against
     the paper it clears the 3:1 a focus indicator needs. */
  :focus-visible {
    outline: 3px solid var(--rose-deep);
    outline-offset: 3px;
  }

  .wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
  }

  /* HERO */
  .hero {
    position: relative;
    padding: 26px 24px 40px;
    text-align: center;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, #F7CFD8 0%, rgba(250, 222, 228, 0.7) 45%, var(--paper) 80%);
    /* No clip: the flowers deliberately rise above the hero to sit behind the
       banner. Anything above the page top simply isn't scrolled to. */
  }

  /* --- Decorative flowers ---------------------------------------------
     One <use> per flower, all referencing #floral-spray. --petal-w is set
     per breakpoint below, and each flower scales off it, so the whole
     arrangement grows and shrinks together. */
  .petal {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: var(--petal-w);
    aspect-ratio: 220 / 320;
    height: auto;

    /* The soft edge is the whole trick: without a mask the artwork ends on a
       hard silhouette and reads as a sticker. Fading it out on every side
       lets it settle into the background instead. */
    -webkit-mask-image: radial-gradient(ellipse 74% 70% at 50% 44%, #000 26%, rgba(0, 0, 0, 0.45) 58%, transparent 84%);
    mask-image: radial-gradient(ellipse 74% 70% at 50% 44%, #000 26%, rgba(0, 0, 0, 0.45) 58%, transparent 84%);

    /* Sit behind the content: slightly out of focus, slightly desaturated. */
    filter: blur(var(--petal-blur, 0.5px)) saturate(var(--petal-sat, 0.72));
  }

  :root {
    --nav-h: 72px;
    --petal-w: 118px;
    --petal-inset: -34px;
  }

  /* Hero: top pair frames the wordmark, bottom pair carries the stems
     down past Foobie so the flowers don't just stop at his shoulders. */
  /* The flowers fade as the page descends: full in the top corners, a
     whisper by the self-exam steps, so the instructions are never
     competing with decoration. */

  /* Top corners: a mass of overlapping blooms rather than a single sprig,
     densest in the corner itself and thinning as it falls down the side.
     Sized with clamp() so it scales smoothly instead of stepping at
     breakpoints. */
  .bouquet {
    position: absolute;
    top: 40px;
    pointer-events: none;
    z-index: 0;
    width: clamp(165px, 34vw, 360px);
    aspect-ratio: 716 / 404;
    height: auto;
    opacity: 0.92;

    /* Fades away from the corner, so the bouquet has no outer edge to
       give itself away. */
    -webkit-mask-image: radial-gradient(ellipse 88% 82% at 20% 16%, #000 30%, rgba(0, 0, 0, 0.5) 60%, transparent 88%);
    mask-image: radial-gradient(ellipse 88% 82% at 20% 16%, #000 30%, rgba(0, 0, 0, 0.5) 60%, transparent 88%);
    filter: blur(0.5px) saturate(0.76);
  }

  .bouquet--tl { left: 0; }
  .bouquet--tr { right: 0; transform: scaleX(-1); }

  /* Side trails: a ribbon streamer threaded with mixed blooms, running on
     down from the corner bouquets. The mask fades both ends, so the trail
     emerges and disappears rather than starting and stopping. */
  /* One continuous garland down the whole page. Every section stretches the
     same strip to its own height and crops it, but each starts further down
     the strip than the last - so the flowers carry on thinning rather than
     restarting dense at each section boundary, which is what read as a
     page break. */
  .trail {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: clamp(88px, 21vw, 215px);
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: blur(var(--trail-blur, 0.7px)) saturate(var(--trail-sat, 0.7));
    --trail-edge: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 9%, #000 22%, #000 46%, rgba(0, 0, 0, 0.72) 68%, rgba(0, 0, 0, 0.3) 87%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, 0.55) 82%, transparent 99%), var(--trail-edge);
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, 0.55) 82%, transparent 99%), var(--trail-edge);
  }

  /* Hero: the dense top of the strip, tucked under the corner flowers and at
     near-full strength so there is no step down at the join. */
  .trail--l,
  .trail--r {
    opacity: 0.86;
    /* Reaches zero before the hero's bottom edge, so there is nothing left
       for the clip to cut through. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0, 0, 0, 0.7) 58%, rgba(0, 0, 0, 0.34) 80%, transparent 97%), var(--trail-edge);
    mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0, 0, 0, 0.7) 58%, rgba(0, 0, 0, 0.34) 80%, transparent 97%), var(--trail-edge);
  }

  .trail--l {
    top: 0;
    height: 100%;
    left: 0;
  }
  .trail--r {
    top: 26px;
    height: calc(100% - 26px);
    right: 0;
    transform: scaleX(-1);
  }

  /* Tiles: picks up partway down the strip, where it has already thinned, so
     it continues the hero rather than starting over. */
  .trail--tabs-l,
  .trail--tabs-r {
    /* Begins well above the section so it overlaps the hero's fading tail.
       Both are part-transparent through the overlap, so they blend instead
       of meeting on a line. */
    top: -260px;
    height: calc(100% + 260px);
    opacity: 0.34;
    object-position: center 38%;
    --trail-blur: 1.1px;
    --trail-sat: 0.6;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 16%, rgba(0, 0, 0, 0.85) 38%, rgba(0, 0, 0, 0.6) 72%, rgba(0, 0, 0, 0.32) 100%), var(--trail-edge);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 16%, rgba(0, 0, 0, 0.85) 38%, rgba(0, 0, 0, 0.6) 72%, rgba(0, 0, 0, 0.32) 100%), var(--trail-edge);
  }

  .trail--tabs-l { left: 0; }
  .trail--tabs-r { right: 0; transform: scaleX(-1); }

  .petal--tabs-l {
    top: 2%;
    left: calc(var(--petal-inset) - 22px);
    transform: scaleX(-1) rotate(-8deg);
    opacity: 0.28;
    --petal-blur: 1.2px;
    --petal-sat: 0.58;
  }
  .petal--tabs-r {
    bottom: 8%;
    right: calc(var(--petal-inset) - 22px);
    transform: rotate(12deg);
    opacity: 0.28;
    --petal-blur: 1.2px;
    --petal-sat: 0.58;
  }

  /* Self-exam section: the sparse tail of the strip, the faintest point of
     the whole page. Present, but never competing with the instructions. */
  .trail--howto-l,
  .trail--howto-r {
    top: -220px;
    height: calc(100% + 220px);
    opacity: 0.16;
    object-position: center 74%;
    --trail-blur: 1.5px;
    --trail-sat: 0.55;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 14%, rgba(0, 0, 0, 0.7) 32%, rgba(0, 0, 0, 0.4) 62%, transparent 94%), var(--trail-edge);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 14%, rgba(0, 0, 0, 0.7) 32%, rgba(0, 0, 0, 0.4) 62%, transparent 94%), var(--trail-edge);
  }

  .trail--howto-l { left: 0; }
  .trail--howto-r { right: 0; transform: scaleX(-1); }

  .mascot-row {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
  }

  .mascot-row img {
    position: relative;
    z-index: 1;
    width: 205px;
    height: auto;
    filter: drop-shadow(0 18px 26px rgba(120, 70, 88, 0.26));
  }

  .brand {
    margin: 16px 0 0;
  }

  .brand-flourish {
    width: 128px;
    height: auto;
    display: block;
    margin: 0 auto 12px;
    opacity: 0.9;
  }

  .mascot-caption {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.98rem;
    line-height: 1.35;
    color: var(--rose-deep);
    max-width: 320px;
    margin: 12px auto 0;
  }

  .purpose {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(0.92rem, 3.8vw, 1.12rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rose-deep);
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 2px solid var(--petal);
    display: inline-block;
  }

  .hero-sub strong {
    font-weight: 800;
    color: var(--ink);
  }

  .wordmark {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 3.5rem;
    font-size: clamp(4rem, 19vw, 7rem);
    line-height: 0.86;
    margin: 0;
    letter-spacing: -0.015em;
    color: var(--rose-deep);
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.75);
  }

  .wordmark .on-the-loose {
    display: block;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.9rem;
    font-size: 0.46em;
    letter-spacing: 0.02em;
    color: var(--ink);
    margin-top: 8px;
  }

  .hero-sub {
    max-width: 400px;
    margin: 18px auto 0;
    font-size: 1.06rem;
    color: #7A5560;
  }

  /* DATE BADGE */
  .badge-row {
    display: flex;
    justify-content: center;
    margin: 30px 0 0;
  }

  .calendar-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: 'Nunito Sans', sans-serif;
    transition: transform 0.18s ease;
  }

  .calendar-button:hover { transform: translateY(-4px); }
  .calendar-button:active { transform: scale(0.97); }

  .calendar-badge {
    width: 210px;
    height: auto;
    filter: drop-shadow(0 14px 24px rgba(160, 90, 115, 0.28));
  }

  .cal-hint {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--rose-deep);
    opacity: 0.85;
    transition: opacity 0.15s ease;
  }

  .calendar-button:hover .cal-hint { opacity: 1; }

  /* calendar chooser */
  .cal-card { text-align: center; }

  .cal-sub {
    color: #7A5560;
    margin: 0 auto 22px;
    max-width: 380px;
    font-size: 0.97rem;
  }

  .cal-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
  }

  .cal-opt {
    display: block;
    text-align: left;
    background: var(--petal);
    border: 2px solid rgba(201, 106, 133, 0.35);
    border-radius: 18px;
    padding: 20px 22px;
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
    font-family: 'Nunito Sans', sans-serif;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }

  .cal-opt:hover {
    background: var(--rose);
    border-color: var(--rose-deep);
    transform: translateY(-2px);
  }

  .cal-opt:active { transform: scale(0.985); }

  .cal-opt-title {
    display: block;
    font-weight: 800;
    font-size: 1.12rem;
    margin-bottom: 5px;
    color: var(--ink);
  }

  .cal-opt-sub {
    display: block;
    font-size: 0.9rem;
    color: #6B4653;
  }

  .cal-note {
    font-size: 0.78rem;
    color: #A38792;
    line-height: 1.5;
    margin: 0;
  }

  /* Sits inside the options list, which is a flex column with its own gap,
     so it carries no margins of its own. Quieter than the options it sits
     between: it is a way round, not a third choice. */
  .cal-mac {
    margin: -4px 2px 0;
    font-size: 0.78rem;
    color: #A38792;
    line-height: 1.5;
    text-align: left;
  }

  .cal-mac a { color: var(--rose-deep); font-weight: 700; }

  .feel-it {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.4rem, 5.5vw, 1.8rem);
    color: var(--rose-deep);
    text-align: center;
    margin: 16px 0 0;
    line-height: 1.08;
  }

  .feel-it span {
    display: inline;
    color: var(--ink);
    font-size: 1em;
    font-weight: 600;
  }

  .badge-caption {
    text-align: center;
    font-size: 0.95rem;
    color: #8A6570;
    margin: 10px 0 0;
  }

  .cta-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px;
  }

  .btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.04rem;
    padding: 17px 30px;
    border-radius: 999px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-family: 'Nunito Sans', sans-serif;
    border: none;
    cursor: pointer;
    white-space: nowrap;
  }

  .btn-primary {
    background: var(--rose-deep);
    color: #fff;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(201, 106, 133, 0.5);
  }

  /* TABS */
  .tabs-section {
    padding: 8px 24px 70px;
    position: relative;
    /* No overflow clip: the trail deliberately reaches up past the top edge
       to overlap the hero's. body has overflow-x hidden, so nothing spills
       sideways. */
  }

  .tab-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 8px;
  }

  .tab-square {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 1;
    background: var(--petal-soft);
    border: 2px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    color: var(--ink);
    font-family: 'Nunito Sans', sans-serif;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
    padding: 12px;
  }

  .tab-square:hover { transform: translateY(-3px); }
  .tab-square:active { transform: scale(0.96); }

  .tab-square.active {
    background: var(--rose-deep);
    color: #fff;
    border-color: var(--rose-deep);
  }

  .tab-icon {
    width: 30px;
    height: 30px;
  }

  .tab-icon svg { width: 100%; height: 100%; }

  .tab-label {
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.25;
  }

  /* MODAL */
  .modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(60, 34, 44, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
  }

  .modal-backdrop.open {
    opacity: 1;
    visibility: visible;
  }

  .modal-card {
    --card-top: 34px;
    position: relative;
    background: var(--paper);
    border-radius: 26px;
    padding: 34px 24px 28px;
    width: 100%;
    max-width: 520px;
    /* Not dvh. On an iPhone the dynamic viewport changes height as Safari's
       toolbar hides and shows, so the card resized mid-scroll, the content
       reflowed under her thumb and the scroll jumped - a flash, and a card
       that would not let her back up. svh is the small viewport: the height
       with the toolbar showing, which never moves. vh first for anything
       that does not know svh. */
    max-height: 88vh;
    max-height: 88svh;
    overflow-y: auto;
    /* -webkit-overflow-scrolling: touch was here. It is Apple's old momentum
       flag, and in this card it sits over three sticky children - the cross,
       the heading and the cue. That pairing flickers and jams the scroll on
       iOS. Modern Safari gives momentum without being asked. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-shadow: 0 24px 60px -12px rgba(60, 34, 44, 0.5);
    transform: translateY(18px) scale(0.96);
    transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  }

  .modal-card::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .modal-backdrop.open .modal-card {
    transform: translateY(0) scale(1);
  }

  /* Sticky rather than absolute, the same trick the scroll cue uses: the
     card is the scrolling container, so absolute pinned the cross to the top
     of the content and it scrolled away. On a long panel the reader had to
     scroll all the way back up to find it. Floated right with a negative
     bottom margin so it rides along without taking up a line. */
  .modal-close {
    position: sticky;
    top: 12px;
    float: right;
    margin: 0 -4px -38px 0;
    z-index: 6;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: var(--petal-soft);
    color: var(--rose-deep);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
  }

  .modal-close:hover { background: var(--petal); }

  /* Two of these: one inside the modal's scroll area, one fixed to the page.
     Both point down while there is more below and flip to point up at the
     end, staying in the same spot so it reads as one control rather than two.
     Tapping follows whichever way it points. */
  .scroll-cue,
  .page-cue {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rose-deep);
    background: rgba(252, 233, 236, 0.94);
    box-shadow: 0 4px 14px -4px rgba(120, 70, 88, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .scroll-cue svg,
  .page-cue svg {
    width: 20px;
    height: 20px;
    display: block;
    transition: transform 0.3s ease;
  }

  /* At the end it turns to point back to the top. */
  .scroll-cue.at-end svg,
  .page-cue.at-end svg { transform: rotate(180deg); }

  /* Sticky inside the card, so it rides the bottom of the card's own scroll
     area without needing to know the card's size. */
  .scroll-cue {
    position: sticky;
    /* Same unit as the card's own max-height. With dvh here and svh there,
       the cue drifted away from the card's foot every time Safari's toolbar
       moved. */
    top: calc(88vh - 64px);
    top: calc(88svh - 64px);
    float: right;
    z-index: 3;
    margin: 0 -4px -40px 0;
    animation: cue-bob 1.9s ease-in-out infinite;
  }

  .modal-card.can-scroll .scroll-cue { opacity: 1; visibility: visible; }

  /* Fixed to the page, and out of the way whenever a panel is open. */
  .page-cue {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 40;
    animation: cue-bob 1.9s ease-in-out infinite;
  }

  body.page-scrollable .page-cue { opacity: 1; visibility: visible; }
  body.panel-open .page-cue { opacity: 0; visibility: hidden; }

  .scroll-cue.at-end,
  .page-cue.at-end { animation: none; }

  @keyframes cue-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-cue,
    .page-cue { animation: none; }
  }

  /* The story tile runs the full width of the grid: it is the one entry that
     is about a person rather than a topic, and nine tiles would otherwise
     leave an orphan on the end of the row. */
  .tab-square--wide {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    flex-direction: row;
    gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(120deg, var(--petal) 0%, var(--petal-soft) 62%);
    border-color: rgba(201, 106, 133, 0.28);
  }

  .tab-square--wide .tab-label { font-size: 1rem; }

  /* Her writing, given room to breathe. */
  .about-body {
    font-size: 0.99rem;
    line-height: 1.72;
    color: #4B3540;
    max-width: 68ch;
    margin: 0 auto 16px;
  }

  .about-body strong { color: var(--rose-deep); font-weight: 800; }

  /* Four short lines whose rhythm is the point, so they stay as four lines. */
  .about-beats {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.12rem;
    line-height: 1.85;
    color: var(--rose-deep);
    text-align: center;
    max-width: 68ch;
    margin: 22px auto;
    padding: 18px 20px;
    background: var(--petal-soft);
    border-radius: 16px;
  }

  /* A wall of snapshots rather than a grid: columns give a masonry flow that
     copes with photos of differing heights, and each sits at a slight angle
     with a white border so it reads as a photograph on a table. */
  .photo-wall {
    columns: 2;
    column-gap: 14px;
    margin: 26px auto 8px;
    max-width: 760px;
  }

  .wall-shot {
    display: block;
    width: 100%;
    break-inside: avoid;
    margin: 0 0 16px;
    padding: 7px 7px 9px;
    border: none;
    border-radius: 3px;
    background: #fff;
    cursor: zoom-in;
    box-shadow: 0 5px 16px -6px rgba(92, 58, 69, 0.45);
    transform: rotate(var(--tilt, 0deg));
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .wall-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1px;
  }

  .wall-shot:hover,
  .wall-shot:focus-visible {
    transform: rotate(0deg) scale(1.03);
    box-shadow: 0 10px 26px -8px rgba(92, 58, 69, 0.5);
    z-index: 2;
    position: relative;
  }

  @media (min-width: 700px) {
    .photo-wall { columns: 3; column-gap: 16px; }
  }

  /* Tap one and it fills the screen, above everything else. */
  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(48, 28, 36, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    cursor: zoom-out;
    border: none;
  }

  .lightbox.open { opacity: 1; visibility: visible; }

  /* The photo and its caption travel together, so a long caption pushes
     the image smaller rather than spilling off the screen. */
  .lightbox-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: min(880px, 100%);
    max-height: 100%;
    cursor: default;
  }

  .lightbox img {
    max-width: 100%;
    min-height: 0;
    border-radius: 6px;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.6);
  }

  .lightbox-cap {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: #FBF3F2;
    text-align: center;
    max-width: 62ch;
    text-wrap: pretty;
  }

  .lightbox-date {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: #F6D9DC;
    opacity: 0.85;
  }

  .lightbox-cap:empty, .lightbox-date:empty { display: none; }

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

  .about-close {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.16rem;
    line-height: 1.5;
    color: var(--ink);
    text-align: center;
    max-width: 68ch;
    margin: 26px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--petal);
  }

  .about-close span { color: var(--rose-deep); }

  @media (min-width: 700px) {
    .about-body { font-size: 1.04rem; }
    .about-beats { font-size: 1.3rem; }
    .about-close { font-size: 1.35rem; }
  }

  .tab-panel h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-style: italic;
    font-size: 1.5rem;
    text-align: center;
    margin: 0 0 8px;
    color: var(--rose-deep);
  }

  .stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 20px;
  }

  .stat { text-align: center; }

  .stat .num {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--rose-deep);
    display: block;
    margin-bottom: 4px;
  }

  .stat .label {
    font-size: 0.8rem;
    color: #7A5560;
    line-height: 1.45;
    display: block;
  }

  .know-normal {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--rose-deep);
    text-align: center;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--petal);
    line-height: 1.3;
  }

  .know-normal span {
    display: block;
    font-family: 'Nunito Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.95rem;
    color: #7A5560;
    margin-top: 6px;
  }

  .band-note {
    font-size: 0.85rem;
    color: #8A6570;
    margin-top: 18px;
    text-align: center;
    line-height: 1.5;
  }

  .source-note {
    font-size: 0.74rem;
    color: #A38792;
    text-align: center;
    margin-top: 14px;
    line-height: 1.45;
  }

  .signs-sub {
    text-align: center;
    color: #8A6570;
    margin: 0 auto 22px;
    font-size: 0.95rem;
  }

  .signs-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .signs-list li {
    position: relative;
    padding-left: 26px;
    font-size: 0.96rem;
    color: #4B3540;
  }

  .signs-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rose-deep);
  }

  .signs-note {
    font-size: 0.85rem;
    color: #7A5560;
    background: #fff;
    padding: 16px 20px;
    border-radius: 14px;
  }

  .howto-sub {
    text-align: center;
    color: #8A6570;
    margin: 0 auto 24px;
  }

  .steps {
    display: flex;
    flex-direction: column;
  }

  .step {
    display: flex;
    gap: 18px;
    padding: 16px 0;
    border-top: 1px solid var(--petal);
  }

  .step:last-child { border-bottom: 1px solid var(--petal); }

  .step .n {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--rose-deep);
    min-width: 30px;
  }

  .step h3 {
    margin: 0 0 4px;
    font-size: 0.98rem;
    font-weight: 700;
  }

  .step p {
    margin: 0;
    color: #7A5560;
    font-size: 0.92rem;
  }

  /* RECONSTRUCTION (in modal) */
  .recon-lede {
    color: #7A5560;
    font-size: 0.97rem;
    text-align: center;
    margin: 0 auto 24px;
    max-width: 460px;
  }

  .recon-group-title {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.12rem;
    color: var(--rose-deep);
    margin: 22px 0 10px;
    padding-bottom: 7px;
    border-bottom: 1.5px solid var(--petal);
  }

  .recon-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .recon-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: var(--petal);
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    color: var(--ink);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }

  .recon-opt:hover {
    background: var(--rose);
    border-color: var(--rose-deep);
    transform: translateX(3px);
  }

  .recon-opt-name {
    font-weight: 800;
    font-size: 1rem;
  }

  .recon-opt-arrow {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--rose-deep);
    flex: none;
    margin-left: 12px;
  }

  .recon-src {
    font-size: 0.74rem;
    color: #A38792;
    line-height: 1.5;
    margin: 16px 0 0;
  }

  .recon-src a {
    color: #96707E;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .recon-src a:hover { color: var(--rose-deep); }

  /* Opens another panel from inside running text, so a point made in full
     elsewhere can be pointed at rather than repeated here. */
  .panel-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--rose-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .panel-link:hover { color: var(--ink); }

  .info-note {
    font-size: 0.93rem;
    color: #4B3540;
    line-height: 1.6;
    background: var(--petal-soft);
    padding: 14px 16px;
    border-radius: 12px;
    margin: 0 auto 18px;
  }

  .signs-list strong { font-weight: 800; color: var(--rose-deep); }

  /* helpline list */
  .res-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
  }

  .res {
    background: var(--petal);
    border-radius: 16px;
    padding: 16px 18px;
  }

  .res-name {
    display: block;
    font-weight: 800;
    font-size: 0.97rem;
    color: var(--ink);
    margin-bottom: 4px;
  }

  .res-num {
    display: inline-block;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--rose-deep);
    text-decoration: none;
    margin-bottom: 5px;
  }

  .res-num:hover { text-decoration: underline; }

  .res-note {
    display: block;
    font-size: 0.84rem;
    color: #6B4653;
    line-height: 1.5;
  }

  .recon-note {
    font-size: 0.8rem;
    color: #A38792;
    line-height: 1.5;
    margin: 26px auto 0;
    text-align: center;
  }

  /* detail view */
  .recon-back {
    display: inline-block;
    background: none;
    border: none;
    padding: 0 0 12px;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rose-deep);
    transition: color 0.15s ease;
  }

  /* Never fade this element. It carries the sticky header's background, so
     fading it fades that too and the diagram scrolled underneath shows
     straight through the top of the panel. The hover is a pill behind the
     label instead - see .recon-back > span at the end of this file. */

  /* A mat around the diagram. Nine of them open with a coloured header band
     whose text sits 14-32px from the image edge, which reads as cramped when
     the frame is flush against it. Padding here fixes every diagram at once
     rather than re-cropping each one. */
  .recon-art {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    margin: 4px 0 18px;
    padding: 12px;
  }

  .recon-art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
  }

  @media (max-width: 520px) {
    .recon-art { padding: 8px; }
  }

  /* The card is wide so the diagrams can breathe, but running text past
     roughly 70 characters a line gets tiring, so the prose is held to a
     comfortable measure and centered inside it. */
  .recon-body,
  .recon-lede,
  .info-note,
  .signs-note,
  .band-note,
  .recon-note,
  .source-note {
    max-width: 68ch;
    margin-left: auto;
    margin-right: auto;
  }

  .recon-body {
    margin: 0 auto;
    color: #4B3540;
    font-size: 0.97rem;
    line-height: 1.65;
  }

  /* Consecutive paragraphs need a gap. Everywhere else a heading or an image
     sits between them, so this only shows where two run together. */
  .recon-body + .recon-body { margin-top: 13px; }

  /* HOW TO — featured on-page section */
  .howto-section {
    /* Its tint fades up from the paper above and back down to it below, so
       the section has no hard colour edge at either end. */
    background: linear-gradient(
      to bottom,
      var(--paper) 0,
      var(--petal-soft) 190px,
      var(--petal-soft) calc(100% - 170px),
      var(--paper) 100%
    );
    padding: 56px 24px 64px;
    position: relative;
  }

  .eyebrow {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose-deep);
    margin: 0 0 8px;
  }

  .howto-title {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2rem, 8vw, 2.7rem);
    text-align: center;
    margin: 0 0 14px;
    color: var(--ink);
    line-height: 1.05;
  }

  .howto-lede {
    text-align: center;
    color: #7A5560;
    max-width: 460px;
    margin: 0 auto 40px;
    font-size: 1.02rem;
  }

  .step-cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .step-card {
    background: var(--paper);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 6px 18px -8px rgba(92, 58, 69, 0.22);
  }

  .step-art {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--petal-soft);
  }

  .step-art img {
    display: block;
    width: 100%;
    height: auto;
  }

  .step-num {
    display: inline-block;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--rose-deep);
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 10px;
  }

  .step-text h3 {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.3rem;
    margin: 0 0 8px;
    color: var(--rose-deep);
  }

  .step-text p {
    margin: 0;
    color: #4B3540;
    font-size: 0.97rem;
    line-height: 1.6;
  }

  .disclaimer {
    margin-top: 32px;
    padding: 18px 20px;
    background: var(--paper);
    border-radius: 14px;
    font-size: 0.87rem;
    color: #7A5560;
    line-height: 1.55;
  }

  #panel-follow { text-align: center; }

  #panel-follow p {
    color: #8A6570;
    max-width: 340px;
    margin: 0 auto 22px;
  }

  .handles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .handle svg { width: 19px; height: 19px; flex: none; }

  .handle--fb { background: #4B3540; }
  .handle--fb:hover { background: var(--rose-deep); }

  .handle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--rose-deep);
    color: #fff;
    padding: 14px 24px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
  }

  .handle:hover { background: var(--ink); }

  /* Site map: grouped by what someone is trying to do rather than mirroring
     the tile order, since "facing surgery" and "know your normal" are very
     different errands. */
  .sitemap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
    max-width: 860px;
    margin: 0 auto 34px;
    padding: 30px 4px 0;
    border-top: 1px solid var(--petal);
    text-align: left;
  }

  .sitemap-title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--rose-deep);
    margin: 0 0 10px;
  }

  .sitemap ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .sitemap-link {
    display: inline-block;
    background: none;
    border: none;
    padding: 2px 0;
    margin: 0;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    color: #7A5560;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
  }

  /* Social links carry their mark, so they are recognisable before they are
     read. The icon inherits the link colour, including on hover. */
  .sitemap-link:has(svg) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .sitemap-link svg {
    width: 15px;
    height: 15px;
    flex: none;
  }

  .sitemap-link:hover,
  .sitemap-link:focus-visible { color: var(--rose-deep); }

  @media (min-width: 700px) {
    .sitemap {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0 24px;
      padding-top: 36px;
    }
    .sitemap-link { font-size: 0.95rem; }
  }

  footer {
    text-align: center;
    padding: 28px 22px 34px;
    color: #B58A94;
  }

  /* Centered above the wordmark: the two places Foobie actually lives, given
     their own line rather than buried in a column of text links. */
  .footer-social {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0 0 16px;
  }

  .footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--rose-deep);
    background: var(--petal-soft);
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
  }

  .footer-social a:hover,
  .footer-social a:focus-visible {
    background: var(--rose-deep);
    color: #fff;
    transform: translateY(-2px);
  }

  .footer-social svg { width: 20px; height: 20px; display: block; }

  .footer-brand {
    font-size: 0.82rem;
    margin: 0 0 6px;
  }

  .footer-legal {
    font-size: 0.75rem;
    margin: 0;
    opacity: 0.85;
  }

  /* Small phones */
  @media (max-width: 420px) {
    .stat-grid { gap: 16px; }
    .stat .num { font-size: 1.7rem; }
    .stat .label { font-size: 0.76rem; }
    .know-normal { font-size: 1.15rem; }
    /* Smallest phones: pull the flowers further off-edge so they frame
       Foobie rather than crowding him. */
    :root { --petal-w: 96px; --petal-inset: -38px; }
    .modal-card { --card-top: 30px; padding: 30px 18px 24px; border-radius: 20px; }
    .tab-grid { gap: 10px; }
    .tab-label { font-size: 0.84rem; }
  }

  /* Tablet and up */
  @media (min-width: 700px) {
    :root { --max-width: 720px; }

    .hero { padding: 80px 24px 56px; }

    :root { --petal-w: 178px; --petal-inset: -18px; }

    .mascot-row img { width: 250px; }
    .mascot-caption { font-size: 1.1rem; max-width: 380px; }
    .brand-flourish { width: 160px; }

    .hero-sub { font-size: 1.18rem; max-width: 520px; }

    .calendar-badge { width: 260px; }

    .badge-caption { font-size: 1.05rem; }

    .btn { font-size: 1.02rem; padding: 15px 30px; }

    /* four across on wider screens */
    .tab-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .tab-icon { width: 34px; height: 34px; }
    .tab-label { font-size: 0.95rem; }

    /* step cards go side-by-side */
    .step-card {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 24px;
      align-items: center;
      padding: 24px;
    }

    .step-art { margin-bottom: 0; }
    .howto-lede { font-size: 1.1rem; }
    .step-text h3 { font-size: 1.45rem; }
    .step-text p { font-size: 1.02rem; }

    .modal-card { --card-top: 38px; padding: 38px 40px 32px; max-width: 680px; }
    .tab-panel h2 { font-size: 1.8rem; }
    .stat .num { font-size: 2.3rem; }
    .stat .label { font-size: 0.88rem; }
    .know-normal { font-size: 1.45rem; }
    .know-normal span { font-size: 1.02rem; }
    .signs-list li { font-size: 1.02rem; }
    .step h3 { font-size: 1.06rem; }
    .step p { font-size: 1rem; }
  }

  /* Desktop */
  @media (min-width: 1000px) {
    .hero { padding: 18px 24px 50px; }

    /* Desktop has margin to spare, so the flowers sit fully on-screen
       either side of the content column instead of being cropped. */
    :root { --petal-w: 236px; --petal-inset: 8px; }

    .wordmark { font-size: 5.2rem; }

    .mascot-row img { width: 235px; }
    .brand-flourish { width: 170px; }

    .tabs-section { padding: 16px 24px 90px; }
    .tab-square:hover { transform: translateY(-4px); }

    .modal-card { --card-top: 42px; max-width: 880px; padding: 42px 56px 36px; }

    /* use the extra width to cut height */
    .signs-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 30px;
      row-gap: 12px;
    }

    .stat-grid { gap: 40px; }
  }

  /* Large desktop — scale the hero with the screen so it doesn't look marooned */
  @media (min-width: 1300px) {
    :root { --max-width: 860px; }

    .hero { padding: 18px 24px 56px; }

    :root { --petal-w: 300px; --petal-inset: 2%; }

    .mascot-row img { width: 265px; }

    .mascot-caption { font-size: 1.12rem; max-width: 440px; }
    .brand-flourish { width: 195px; }

    .wordmark { font-size: 5.9rem; }
    .purpose { font-size: 1.25rem; letter-spacing: 0.12em; }

    .hero-sub { font-size: 1.22rem; max-width: 640px; }

    .calendar-badge { width: 300px; }
    .feel-it { font-size: 2.1rem; }
    .badge-caption { font-size: 1.1rem; }
    .btn { font-size: 1.12rem; padding: 19px 36px; }

    .tab-icon { width: 40px; height: 40px; }
    .tab-label { font-size: 1.02rem; }
  }


  /* --- Keep Foobie, the name and the purpose line above the fold on any
         screen height. Sizes track viewport height, not just width. --- */
  .mascot-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
  }

  .mascot-row img {
    width: clamp(200px, min(66vw, 36vh), 410px);
    width: clamp(200px, min(66vw, 36dvh), 410px);
    height: auto;
    max-width: 86vw;
  }

  .reg-mark {
    position: absolute;
    left: 34%;
    bottom: 5%;
    transform: none;
    z-index: 2;
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(0.62rem, 1.5vh, 1rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    opacity: 0.75;
    pointer-events: none;
  }

  .hero {
    /* Starts behind the banner rather than below it. Without this the hero's
       pink began exactly where the banner ended, and that edge showed through
       the translucent middle as a line with paler paper above it. */
    margin-top: calc(-1 * var(--nav-h));
    padding-top: calc(clamp(20px, 4vh, 72px) + var(--nav-h));
    padding-top: calc(clamp(20px, 4dvh, 72px) + var(--nav-h));
  }

  .mascot-caption {
    margin-top: clamp(6px, 1.2vh, 16px);
    margin-top: clamp(6px, 1.2dvh, 16px);
  }

  .brand {
    margin-top: clamp(6px, 1.4vh, 18px);
    margin-top: clamp(6px, 1.4dvh, 18px);
  }

  .brand-flourish {
    margin-bottom: clamp(4px, 1vh, 12px);
    margin-bottom: clamp(4px, 1dvh, 12px);
  }

  .wordmark {
    font-size: clamp(3rem, 15vw, 8rem);
    font-size: clamp(2.9rem, min(15vw, 11dvh), 7rem);
  }

  .purpose {
    margin-top: clamp(8px, 1.6vh, 18px);
    margin-top: clamp(8px, 1.6dvh, 18px);
    padding-top: clamp(7px, 1.2vh, 14px);
    padding-top: clamp(7px, 1.2dvh, 14px);
  }


  /* --- sticky jump bar --- */
  .ribbon-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: none;
    border-bottom: none;
    box-shadow: none;
    padding-bottom: 18px;
  }

  /* The frosting lives on a layer behind the links rather than on the bar
     itself. That matters: backdrop-filter stops dead at an element's edge, so
     a frosted bar always ends on a visible line no matter how its colour
     fades. Masking this layer fades the blur out as well as the tint, and
     because the links sit above it they stay fully opaque. */
  .ribbon-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: none;
    -webkit-backdrop-filter: blur(11px) saturate(1.03);
    backdrop-filter: blur(11px) saturate(1.03);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, rgba(0, 0, 0, 0.5) 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 44%, rgba(0, 0, 0, 0.5) 74%, transparent 100%);
  }

  .ribbon-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .ribbon-inner::-webkit-scrollbar { display: none; }

  /* The hamburger. Hidden on wide screens, where the links fit across. */
  .nav-toggle {
    display: none;
    position: relative;
    margin: 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 14px;
    width: 52px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }

  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block;
    width: 24px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--rose-deep);
    transition: transform 0.22s ease, opacity 0.18s ease;
  }

  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 14px;
  }

  .nav-toggle-bars::before { transform: translateY(-8px); }
  .nav-toggle-bars::after { transform: translateY(8px); }

  /* Open: the bars fold into a cross. */
  .ribbon-nav.menu-open .nav-toggle-bars { background: transparent; }
  .ribbon-nav.menu-open .nav-toggle-bars::before { transform: rotate(45deg); }
  .ribbon-nav.menu-open .nav-toggle-bars::after { transform: rotate(-45deg); }

  @media (max-width: 699px) {
    .nav-toggle { display: flex; }

    /* The links become a panel that drops from the bar, rather than a row
       too wide to fit. */
    .ribbon-inner {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      max-width: none;
      padding: 4px 14px 26px;
      overflow: visible;
    }

    .ribbon-nav.menu-open .ribbon-inner { display: flex; }

    /* The bar itself has no tint, so the open panel brings its own backing,
       otherwise the links would sit unreadable over the artwork. */
    .ribbon-nav.menu-open .ribbon-inner::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: rgba(252, 236, 238, 0.86);
      -webkit-backdrop-filter: blur(14px) saturate(1.05);
      backdrop-filter: blur(14px) saturate(1.05);
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
    }

    .ribbon-link {
      text-align: center;
      padding: 14px 8px;
      font-size: 1.02rem;
      border-bottom: none;
    }

    .ribbon-link + .ribbon-link {
      border-top: 1px solid rgba(201, 106, 133, 0.16);
    }

  }

  .ribbon-link {
    flex: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.005em;
    color: var(--ink);
    text-decoration: none;
    padding: 11px 10px 9px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
  }

  /* Only where there is a real pointer. A touch screen has nothing to hover
     with, but it fakes one on tap, and that faked state can stay switched on
     after the finger has gone — leaving a menu word lit up for no reason. */
  @media (hover: hover) {
    .ribbon-link:hover {
      color: var(--rose-deep);
      border-bottom-color: var(--rose-deep);
    }
  }

  /* stop the sticky bar covering a heading it scrolls to */
  #howto { scroll-margin-top: 64px; }

  @media (min-width: 700px) {
    .ribbon-inner { gap: 8px; padding: 0 24px; }
    .ribbon-link { font-size: 0.98rem; padding: 13px 14px 11px; }
  }

/* ---- Standalone section pages -------------------------------------------
   Each panel also exists at its own address. These rules give that page the
   same card the modal uses, without the modal's overlay behaviour. */
.page-wrap { padding: 92px 18px 60px; position: relative; z-index: 1; }

/* Nothing sits between the card and Foobie now that the duplicate home link
   has gone, so the gap that was holding it has gone too. */
body.standalone .page-wrap { padding-bottom: 14px; }
body.standalone footer { padding-top: 10px; }
/* The card carries .modal-card too, so it inherits that element's width,
   padding and radius at every breakpoint and cannot drift from it. These
   rules undo only the parts that exist because it is normally an overlay. */
.page-card {
  margin: 0 auto;
  transform: none;
  max-height: none;
  overflow: visible;
}
.page-card .tab-panel { display: block; }
.page-home {
  display: block;
  max-width: 520px;
  margin: 22px auto 0;
  text-align: center;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--rose-deep);
}



/* Section pages show their links outright rather than behind a hamburger.
   Someone arriving here from a search has not seen the site before, and the
   visible bar is what tells her there is more than the page she landed on.
   The homepage keeps its hamburger: those visitors came looking. No script
   is involved, so this cannot break. */
.sa-nav {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  padding: 14px 16px 10px;
  background: rgba(251, 243, 242, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(201, 106, 133, 0.14);
}
.sa-nav a {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 2px;
}
.sa-nav a:hover { color: var(--rose-deep); }

/* Buttons that became links on the standalone pages must not pick up link
   styling: on the homepage these are pills and a back control, not text
   links, and they should look identical here. */
a.recon-opt, a.recon-back, a.tab-square, a.wall-shot, a.ribbon-link, a.panel-link.recon-opt {
  text-decoration: none;
}
a.recon-opt:hover, a.recon-back:hover { text-decoration: none; }

/* Freezing the page behind an open panel.
   body { overflow: hidden } never worked here: the scrolling element is
   <html>, not <body>, so the page scrolled on happily behind the modal.
   Pinning the body with position:fixed takes it out of the scroll flow
   entirely, which also holds on iOS where overflow:hidden is ignored.
   The offset is stored in --page-lock-top and restored on close. */
body.panel-open {
  position: fixed;
  top: var(--page-lock-top, 0);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* and once the card itself reaches its end, the gesture stops there
   rather than carrying on into the page behind it */
.modal-card { overscroll-behavior: contain; }
.modal-backdrop { overscroll-behavior: none; }


/* ---- The panel header stays put -----------------------------------------
   The card is the scrolling container, so an absolutely positioned close
   cross scrolled away with the content and a reader on a long panel had to
   scroll back up to find it. The header now sticks instead, carrying the
   card's own background so content passes cleanly underneath, and it pulls
   up into the card's top padding so nothing shows above it. The side padding
   is symmetric, which keeps the heading centred while clearing the cross. */

/* Only inside the modal: there the card is the scrolling container and it
   gives up its own top padding, so the header has to carry it. A section
   page scrolls as a whole document and keeps its padding, so it is left
   alone - heading sticky to the viewport would duplicate its nav bar. */
#modal > .modal-card .tab-panel > h2:first-child {
  padding: var(--card-top, 34px) 38px 10px;
}

/* The section pages keep their own top padding, so they are left out of the
   rule above - but the cross sits in the same corner there, and without the
   same symmetric side padding a title long enough to reach it runs straight
   underneath. Half of them did on a phone. Padding both sides rather than
   only the right keeps the heading centred, and it makes a page break its
   title on the same words the panel does. */
.page-card .tab-panel > h2:first-child {
  padding-left: 38px;
  padding-right: 38px;
}

/* The calendar card has its own heading, outside both rules above, and its
   cross sat on the words the same way. */
.cal-card > h2 {
  padding-left: 38px;
  padding-right: 38px;
}

/* A reconstruction detail leads with its back link, so that sits at the top
   of the header and the heading sits directly underneath it. */
#modal > .modal-card .recon-detail > .recon-back {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--card-top, 34px) 38px 0 0;
}

#modal > .modal-card .recon-detail > h2 {
  margin-top: 0;
  padding: 0 38px 6px;
}

/* ...and it only sticks when there is something to scroll underneath it.
   can-scroll is set when the content overflows by more than the cue's own
   24px dead zone, so a panel that all but fits - DIEP flap is 17px over -
   keeps a plain heading and no sticky behaviour at all. Geometry above is
   unconditional, so gaining or losing the class never shifts the layout. */
#modal > .modal-card.can-scroll .tab-panel > h2:first-child {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--paper);
}

#modal > .modal-card.can-scroll .recon-detail > .recon-back {
  position: sticky;
  top: 0;
  z-index: 4; /* below the close cross at 6, above the heading at 3 */
  background: var(--paper);
}

#modal > .modal-card.can-scroll .recon-detail > h2 {
  position: sticky;
  /* directly beneath the back link, whose height is the card's top padding
     plus its own line */
  top: calc(var(--card-top, 34px) + 19px);
  z-index: 3;
  background: var(--paper);
}

/* A sticky element inside a scrolling box sticks below that box's padding,
   not at its visible edge - so with padding-top on the card there was a gap
   where content showed above the header. The header carries that padding
   instead. Every panel begins with a heading or a back link, both of which
   do. The calendar card keeps its own padding. */
#modal > .modal-card { padding-top: 0; }

/* ---- Take the questions with you ----------------------------------------
   The questions panel is the one page people are meant to carry into an
   appointment, so it gets a print button. It calls window.print() inline
   because the standalone /questions-to-ask page loads no JavaScript at
   all, and one button is not worth a script file. */

.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 11px 20px 11px 17px;
  background: #fff;
  border: 1.5px solid var(--rose);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--rose-deep);
  transition: background 0.15s ease, transform 0.12s ease;
}

.print-btn svg { width: 19px; height: 19px; flex: none; }
.print-btn:hover { background: var(--blush, #FDF2F5); }
.print-btn:active { transform: translateY(1px); }

/* Only ever seen inside the Facebook or Instagram in-app browser, which
   cannot print at all. It sits under the button rather than replacing it:
   the button is still what she wants, once she is in a browser that prints. */
.print-note {
  margin: -12px 0 20px;
  padding: 10px 14px;
  background: var(--petal-soft);
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #7A5560;
}

/* Inside the calendar card the options are a flex column with its own gap,
   so the note sits as another item and brings no margins of its own. The card
   centres its text; the note is a paragraph to read, so it reads left. */
.cal-options .print-note { margin: 0; text-align: left; }

/* Only ever seen on paper: says where the sheet came from, since a printed
   page has no address bar. */
.print-only { display: none; }

/* ---- On paper -----------------------------------------------------------
   Printing used to give you the whole site - hero, tiles, flowers and all -
   because there were no print styles at all. What should reach the paper is
   the open panel and nothing else. Panels that are not open carry the
   hidden attribute, so they never print; everything else is turned off by
   hand here. */

@media print {
  .hero,
  .tabs-section .tab-grid,
  .howto-section,
  .photo-wall,
  .trail,
  .sa-nav,
  footer,
  .hamburger,
  .nav-toggle,
  .scroll-cue,
  .modal-close,
  .recon-back,
  .print-btn,
  .print-note,
  .ribbon-link { display: none !important; }

  .print-only { display: block !important; }

  /* The panel is a fixed overlay over a locked page. On paper there is no
     overlay and no scrolling box: it is just the document, at its full
     height, or the printer stops at one screenful. */
  body.panel-open {
    position: static !important;
    overflow: visible !important;
    top: auto !important;
  }

  /* Only the panel that is actually open. The others - the calendar card
     above all - are closed backdrops rather than hidden elements, so a
     blanket rule here printed the monthly reminder card on top of the
     questions. */
  .modal-backdrop:not(.open) { display: none !important; }

  .modal-backdrop.open {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: none !important;
    padding: 0 !important;
  }

  .modal-card,
  #modal > .modal-card {
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  /* The sticky header has nothing to stick to on paper and would repeat. */
  #modal > .modal-card .tab-panel > h2:first-child,
  #modal > .modal-card.can-scroll .tab-panel > h2:first-child,
  #modal > .modal-card.can-scroll .recon-detail > h2 {
    position: static !important;
    padding: 0 0 10px !important;
    background: none !important;
  }

  html, body {
    background: #fff !important;
    font-size: 10.5pt;
  }

  /* Lay the sheet out at paper width, not at the width of whatever device
     is printing it. iOS Safari prints the page as the phone has it - a
     375px column - so every line holds about forty characters instead of
     ninety, which roughly doubles the lines and doubles the paper. Giving
     the body a fixed width makes the layout the same from a phone as from
     a laptop. 660px fits inside both A4 and Letter at these margins.
     The text-size-adjust stops iOS inflating the type on top of that. */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* One column on paper, whatever the screen was doing. On a wide screen
     the questions sit two across to cut the page height, and printing from
     a Mac carried that onto the sheet - three pages there against five from
     a phone, the same list in two different shapes. A printed question also
     needs a full-width line under it, because someone is writing a
     surgeon's answer on it by hand. */
  .signs-list {
    display: block !important;
    grid-template-columns: none !important;
    columns: auto !important;
  }

  /* Safari prints backdrop-filter as a solid black rectangle - a WebKit
     bug of long standing, and it does it even when the element is hidden.
     The frosted nav bar was coming out as a black bar across the top of
     the first sheet. Nothing on paper has anything to blur behind it, so
     all of it goes. */
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body {
    width: 660px !important;
    max-width: 660px !important;
    margin: 0 auto !important;
  }

  /* The sources and the address belong together at the foot of the last
     sheet. Left to itself the address was being pushed onto a sheet of its
     own, so a reader got a whole page carrying nothing but a URL. */
  .recon-src { break-after: avoid; page-break-after: avoid; }
  .print-only {
    break-before: avoid;
    page-break-before: avoid;
    margin: 6px 0 0;
  }

  /* Headings and group titles do not need the on-screen breathing room. */
  h2 { margin-bottom: 6px !important; }
  h3 { margin: 14px 0 6px !important; }
  .recon-lede, .start-here { margin-bottom: 10px !important; }

  body { color: #1a1a1a !important; }

  /* Ink-friendly. On screen the headings are rose and the bullets are
     rose-deep, which is the site; on an inkjet it is a colour cartridge
     spent on a worksheet. Everything that prints is black on white, with
     the rules in grey. The bold questions still read as bold, because that
     was never carried by colour. */
  h1, h2, h3, h4,
  .recon-group-title,
  .recon-lede,
  .start-here,
  .ask-personal,
  .recon-src,
  .signs-note,
  .info-note,
  p, li, strong, em, span {
    color: #1a1a1a !important;
  }

  .signs-list li::before {
    background: #444 !important;
    box-shadow: none !important;
  }

  .recon-group-title { border-bottom-color: #ccc !important; }
  .signs-list li { border-bottom-color: #bbb !important; }

  /* Tinted panels and cards are decoration on paper. */
  .signs-note,
  .info-note,
  .recon-note,
  .band-note,
  .stat,
  .stat-grid,
  .res,
  .res-list {
    background: #fff !important;
    box-shadow: none !important;
    border-color: #ddd !important;
  }

  /* Room to write the answer down, and a line to write it on. This is the
     point of printing it: a question whose answer is not written down has
     been forgotten by the time she reaches the car park. It costs one extra
     sheet of paper across a list of this length. Screen does not get the
     rules - there is nothing to write on there. */
  .signs-list li {
    padding-bottom: 18px;
    margin-bottom: 5px;
    border-bottom: 1px dotted #b9a3ab;
  }

  /* A question split across two sheets is a question you lose - and the
     writing space has to travel with it. */
  li { break-inside: avoid; page-break-inside: avoid; }
  h3 { break-after: avoid; page-break-after: avoid; }

  /* A printed link that only says "here" is useless, but these say where
     they go already, so just make it clear they were links. */
  a { color: #1a1a1a !important; text-decoration: underline; }

  @page { margin: 16mm; }
}

/* ---- Room underneath for the scroll cue ---------------------------------
   The cue rides over the text as you scroll, which is fine - it is a hint,
   and it moves on. What is not fine is where it comes to rest: at the foot
   of a panel it parks on top of the sources and resources, the one place a
   reader has stopped to read carefully.

   It always sits in the band 56-96px above the card's bottom edge,
   wherever that edge falls, because it sticks to the viewport and the card
   ends at the same height. So the card only needs enough room below its
   last line for the cue to land in. Only panels that scroll have a cue,
   and only those get the room. */

#modal > .modal-card.can-scroll {
  /* At the foot of the scroll the cue settles exactly this far above the
     card's bottom edge, and the last line of text settles level with the
     top of it - so the padding does not open a gap above the cue, it moves
     the cue and the text down together and leaves the remainder as blank
     space underneath. Measured rather than reasoned about: the blank left
     under the cue comes to its own top offset minus its 40px height, and
     the references stay clear as long as the padding matches that offset.
     So the cue was moved down from 96px to 64px and the padding with it,
     which took the dead space at the foot of a panel from 84px to 30px. */
  padding-bottom: 70px;
}

/* ---- Where to start -----------------------------------------------------
   The question lists are long on purpose: a woman gets one appointment and
   deserves everything that might matter in it. But arriving frightened to
   twenty-five questions is its own kind of burden, so the ones that change
   a decision - or that cannot be asked afterwards, because the operation
   has already happened - are marked. Everything else stays for whoever has
   the time and the nerve. */

.start-here {
  font-size: 0.86rem;
  color: #7A5560;
  margin: -6px 0 20px;
}

.signs-list li.key {
  font-weight: 700;
  color: #3A2630;
}

/* A panel that all but fits does not scroll at all. Without this it slides
   a few pixels under a finger and springs back, which reads as the card
   being loose rather than as content continuing. Only applies below the
   threshold that earns a scroll cue, so nothing a reader needs is hidden:
   what gets clipped is the tail of the card's own bottom padding. */
#modal > .modal-card.fits {
  overflow-y: hidden;
}

/* The back label gets the same treatment as the close cross: a soft pill on
   hover, rather than a fade. The link itself is full width - that is what
   carries the sticky header's background - so tinting it would band the
   whole strip. The label wraps instead, and its negative margins cancel its
   own padding so the pill appears around the words without moving them or
   changing the header's height, which the heading's sticky offset depends
   on. */

.recon-back > span {
  display: inline-block;
  /* 9.5px makes the pill 38px tall - the same as the close cross, whose
     size does not change at any breakpoint. The negative margins cancel
     the padding, so the pill grows around the words without moving them
     or changing the header's height. */
  /* -4px on the left is the cross's own margin, so the pill's outer edge
     and the cross's land the same distance in from their sides of the
     card at every breakpoint. The other three cancel the padding. */
  /* Exactly the cross's 38px, however the line box measures in whatever
     context it lands in, with the text centred inside. The negative margins
     cancel the extra height so the header is the same size as it was. */
  display: inline-flex;
  align-items: center;
  height: 38px;
  box-sizing: border-box;
  margin: -8px -11px -8px -4px;
  padding: 0 11px;
  border-radius: 999px;
  /* Same resting state as the cross, and the same move on hover: it sits
     in petal-soft and darkens to petal, over the same 0.15s. The cross was
     never a control that appears when pointed at, so neither is this. */
  background: var(--petal-soft);
  /* ...and this lines the two up. The cross sits 12px down and is 38px
     tall, so its centre is always 31px from the top of the card. The
     pill's centre lands at the header's top padding plus 9.5px whatever
     its own padding is, so the difference is a fixed sum and holds at
     every breakpoint. Shifting it is visual only: the box stays where it
     was, which the heading's sticky offset depends on. */
  position: relative;
  /* 21.5px puts the two centres level to the pixel. Nicky's eye reads the
     pill as sitting high there, which is the usual way of it: a wide flat
     shape next to a circle of the same height looks higher than it is. So
     it carries 2px of optical correction - geometrically 2px low, which is
     what looks centred. */
  transition: background 0.15s ease;
}

/* The lift belongs to the modal alone. There the card gives up its top
   padding and the header carries it, so the pill has to be pulled up to
   meet the close cross. A section page keeps the card's own padding, so
   both controls already start from the same line - lifting the pill there
   only pushed it 16px above the cross. */
#modal .recon-back > span {
  top: calc(22px - var(--card-top, 34px));
}

/* On a section page the card keeps its own padding, so the cross starts at
   the top of the content and the pill's box starts 8px above it - the half
   of its own height that the negative margin took back. Putting the 8px
   back puts the two on the same line. */
body.standalone .recon-back > span { top: 7.5px; }

.recon-back:hover > span { background: var(--petal); }

/* Running text is capped at 68 characters so a line stays readable while the
   card stays wide enough for the diagrams. That cap is meant to sit centred -
   the rule that sets it says so - but three classes set a margin shorthand
   afterwards and silently wiped the auto margins, so every spare pixel piled
   up on the right and the text looked shoved against the left edge while the
   diagram above it ran the full width. */

/* ---- Who's site is this, and how do I get out of here -------------------
   A section page is where a search result lands, and until now it opened
   with six nav links and nothing else: no name, no mark, nothing to click
   to reach the rest. A woman could read the whole page without learning
   whose site she was on. The wordmark sits above the nav and goes home. */

.sa-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 16px 2px;
  background: rgba(251, 243, 242, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-decoration: none;
  position: relative;
  z-index: 3;
}

.sa-brand .brand-flourish {
  width: 58px;
  height: auto;
  flex: none;
  /* it carries margin: 0 auto 12px for the hero, and the auto margins
     shove it away from the name once it is in a flex row */
  margin: 0;
}

.sa-brand-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1;
  color: var(--rose-deep);
  white-space: nowrap;
}

.sa-brand-name > span {
  font-size: 0.74em;
  letter-spacing: 0.04em;
  margin-left: 0.4em;
  color: var(--ink);
}

.sa-brand:hover .sa-brand-name { opacity: 0.78; }

/* The nav closes the band underneath it, so it no longer opens one. */
.sa-nav { padding-top: 8px; }

@media (max-width: 520px) {
  .sa-brand { gap: 7px; padding-top: 13px; }
  .sa-brand .brand-flourish { width: 44px; }
  .sa-brand-name { font-size: 1rem; }
}

/* ---- A section page reads as a panel over the site ----------------------
   These pages are where a search result lands, and they looked like a
   different, plainer site than the one the homepage shows. The card is
   already the modal card; what was missing was the dimmed ground behind it
   and the cross. The cross is a plain link to the homepage rather than
   history.back(), so it goes to the site no matter where the reader came
   from - back would have returned her to Google. */

/* Same cross as the modal's - same size, same tint, same corner - and it is
   a link, so it works with no script at all. */
.page-close {
  text-decoration: none;
  line-height: 1;
}


/* ---- Foobie, at the end -------------------------------------------------
   A woman who arrives from a search wants the answer she searched for, so
   nothing stands between her and it. By the foot of the page she has had
   it, and "who are these people" is a question she might have now. Foobie
   over the wordmark, the way the homepage stacks them, so the two pages
   introduce themselves the same way. */

footer .sa-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0 auto 30px;
  padding: 0 18px;
  text-decoration: none;
}

footer .sa-welcome img { height: 168px; width: auto; }

footer .sa-welcome-name {
  display: block;
  margin-top: 6px;
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.72rem;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--rose-deep);
  white-space: nowrap;
}

/* The same cue the calendar badge uses on the homepage - uppercase,
   letterspaced, no button around it - so the two "tap this" labels on the
   site are the same thing rather than two inventions. The little house
   stays, because unlike the calendar's label this one has to say where the
   tap goes, not just what it does. */
footer .sa-welcome-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rose-deep);
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

footer .sa-welcome-home svg { width: 14px; height: 14px; flex: none; }
footer .sa-welcome:hover .sa-welcome-home { opacity: 1; }
footer .sa-welcome:hover .sa-welcome-name { opacity: 0.82; }

/* The trademark sits by her boot, as it does on the homepage. */
footer .sa-welcome .mascot-wrap { position: relative; display: inline-block; line-height: 0; }
footer .sa-welcome .reg-mark {
  position: absolute;
  left: 34%;
  bottom: 5%;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  opacity: 0.75;
  pointer-events: none;
}
footer .sa-welcome, footer .sa-welcome * { text-decoration: none; }

@media print { footer .sa-welcome { display: none !important; } }

@media (max-width: 520px) {
  footer .sa-welcome { margin-bottom: 24px; }
  footer .sa-welcome img { height: 132px; }
  footer .sa-welcome-name { font-size: 1.42rem; }
}

/* ---- A way home at the top as well --------------------------------------
   The close cross does it, and Foobie does it at the foot, but a woman who
   arrived from a search has met neither convention yet - a cross in a corner
   means "close" only if you know you are in something. So it is said once
   in words, directly under the menu, before she starts reading. Same label
   treatment as the calendar hint and Foobie's: uppercase, letterspaced, no
   button around it. */

.sa-tohome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 auto;
  padding: 2px 18px 0;
  position: relative;
  z-index: 3;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rose-deep);
  opacity: 0.85;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.sa-tohome span { font-size: 1.05em; line-height: 0; }
.sa-tohome:hover { opacity: 1; }

@media print { .sa-tohome { display: none !important; } }