/* Hero options B, C and D, built on hero.css (option A is hero.css as it is). */

/* B. Toward the light: the words centred in the glow above the stairs; she climbs toward them. The session sits at the bottom left. */
/* A soft wash of the page ground behind the centred words hides the photo's gold arc there and blends into the glow. */
.hero-b .hero::before { background: radial-gradient(ellipse 52% 42% at 50% 36%, rgb(var(--wash) / 0.94) 0%, rgb(var(--wash) / 0.9) 58%, rgb(var(--wash) / 0) 100%); }
@media (orientation: portrait) { .hero-b .hero::before { content: ""; background: radial-gradient(ellipse 80% 34% at 50% 30%, rgb(var(--wash) / 0.82) 0%, rgb(var(--wash) / 0.6) 55%, rgb(var(--wash) / 0) 100%); } }
.hero-b .hero-scene img { object-position: 50% 50%; }
.hero-b .hero .words { grid-column: 2 / 12; align-self: start; justify-self: center; text-align: center; padding-top: 24px; }
.hero-b .hero .greet { justify-items: center; }
.hero-b .hero .moment-wrap { margin-inline: auto; max-width: min(100%, 10em); margin-bottom: 32px; }
/* The session sits centred under the line as one row, above her on the stairs. */
.hero-b .hero .session { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 24px; }
@media (orientation: portrait) {
  .hero-b .hero .words { grid-column: 1 / -1; }
  .hero-b .hero .session { flex-direction: column; }
  .hero-b .hero-scene img { -webkit-mask-image: none; mask-image: none; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .hero-b .hero { min-height: 100svh; padding: 96px var(--gutter) 0; }
  .hero-b .hero-scene { position: absolute; inset: 0; z-index: -2; height: auto; margin: 0; }
  .hero-b .hero-scene img { -webkit-mask-image: none; mask-image: none; }
  .hero-b .hero .words { padding: 0 0 64px; }
  .hero-b .hero .greet { grid-auto-flow: row; justify-content: center; }
}

/* C. Dissolve: the photo fills the right side of the opening and fades into the mink field where the words sit. */
.hero-c .hero::before { content: none; }
.hero-c .hero-scene { inset: 0 0 0 auto; width: 64%; }
.hero-c .hero-scene img { object-position: 50% 50%;
  /* The photo fades into the mink field on the left (under the words), partly at the top (behind the menu) and fully at the bottom. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, rgb(0 0 0 / 0.45) 0%, #000 24%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, rgb(0 0 0 / 0.45) 0%, #000 24%, #000 70%, transparent 100%);
  mask-composite: intersect; }
@media (orientation: portrait) { .hero-c .hero-scene { width: 100%; } }
/* Phones: as on desktop, the words sit on the photo. It fills the screen, fades under the words at the top, shows her
   climbing below them, and fades into the section below. */
@media (orientation: portrait) and (max-width: 600px) {
  /* 64px between the 60px header and the greeting. */
  .hero-c .hero { min-height: 100svh; padding: calc(60px + 64px) var(--gutter) 0; }
  /* grid-column: auto, so the photo is placed against the whole hero, not inside the page margins (that left mink strips at both sides). */
  .hero-c .hero-scene { grid-column: auto; position: absolute; inset: 0; z-index: -2; width: auto; height: auto; margin: 0; }
  /* The whole photo shows, the lit sphere at the top included; only the hero's bottom fades into the next section. */
  /* The photo is shown at the screen's full width (not its height), so the planet is smaller and nothing is cropped at the sides.
     It starts where the 60px mink header ends, at full strength, so its entire top shows. Above it a 60px bridge, the photo's own top row
     stretched upward, fades in under the header: the mink dissolves into the photo's real colour with no seam.
     Its foot fades into the mink, and the hero is as tall as the header plus the photo. */
  .hero-c .hero { min-height: calc(150vw + 60px); }
  .hero-c .hero-scene { overflow: hidden; }
  .hero-c .hero-scene img { position: absolute; top: 60px; left: 0; width: 100%; height: auto; object-fit: initial; transform: none;
    -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 90%, transparent 100%); }
  .hero-c .hero-scene::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px;
    background: url("/assets/photos/Staircase%20mobile%203.png") 50% 0 / 100% 40000% no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 100%); }
  /* Phone composition: a quiet greeting leads into Romee's line, on the planet. At the foot of the stairs one block holds
     the first session: the context, the date in the display serif (the key fact after her line), the time, then Join. */
  /* 64px of clear space under Join, plus the hero's 48px fade into the page; the hero grows past the photo if it must. */
  .hero-c .hero .words { display: flex; flex-direction: column; min-height: 100%; padding: 0 0 calc(64px + 48px); }
  .hero-c .hero { grid-template-rows: 1fr; }
  .hero-c .hero .greet .portrait { width: 64px; height: 64px; background: var(--field); }
  .hero-c .hero .greet .h3 { font-size: 1.5rem; }
  /* Equal visible space above and below the line on phones: 40px ink to ink. */
  .hero-c .hero .moment-wrap { margin-top: calc(44px - 0.19em); margin-bottom: calc(35px - 0.235em); }
  /* Spacing by relationship: 64px between the two groups (as from the header to the greeting), 8px around the date, 24px to Join. */
  .hero-c .hero .session { margin-top: 0; padding-top: 0; gap: 0; justify-items: start; }
  .hero-c .hero .when span { display: block; }
  .hero-c .hero .when-label::after, .hero-c .hero .when-date::after { content: none; }
  .hero-c .hero .when-label { font-size: var(--text-label); font-weight: 500; color: var(--ink-2); }
  .hero-c .hero .when-date { margin-top: 8px; font-family: var(--display); font-weight: 300; font-size: var(--text-h3); line-height: round(nearest, 1.15em, 1px); letter-spacing: -0.01em; }
  .hero-c .hero .when-time { margin-top: 8px; }
  .hero-c .hero .session .btn { margin-top: 24px; }
  .hero-c .hero::after { height: 48px; }
}

/* D. Framed: the photo in a large window with the 10px radius, on the plain page ground; the words beside it. */
.hero-d .hero { background: var(--ground); }
.hero-d .hero::before, .hero-d .hero::after { content: none; }
.hero-d .hero-scene { inset: 96px var(--gutter) 64px auto; width: 36%; border-radius: var(--radius); overflow: hidden; }
.hero-d .hero-scene img { object-position: 52% 50%; }
.hero-d .hero .words { grid-column: 1 / 8; }
@media (orientation: portrait) {
  .hero-d .hero .words { grid-column: 1 / -1; }
  .hero-d .hero-scene { inset: auto var(--gutter) 48px; width: auto; height: 46%; }
  .hero-d .hero-scene img { -webkit-mask-image: none; mask-image: none; }
}
@media (orientation: portrait) and (max-width: 600px) {
  .hero-d .hero { padding: 76px var(--gutter) 0; }
  .hero-d .hero-scene { position: relative; inset: auto; height: 52svh; margin: 0; border-radius: var(--radius); }
}

/* Below the hero: the ribbon ring sits beside what to expect. */
.hero-c .expect { position: relative; }
@media (orientation: portrait) and (max-width: 600px) {
  }

/* Desktop and tablets keep the session as one sentence: "Your first session: Tuesday 20 October, 14:00 Dutch time, on Zoom". */
.hero-c .when-label::after { content: ":"; }
.hero-c .when-date { font-weight: 500; }
.hero-c .when-date::after { content: ","; }

/* One page: the menu scrolls to each section. The header stays at the top; once the page scrolls it sits on mink that fades into the page. */
@media (prefers-reduced-motion: no-preference) { html:has(.hero-c) { scroll-behavior: smooth; } }
.hero-c .bar { position: fixed; }
/* Sticky header: once the page scrolls, one solid mink layer eases in over the header, with no fade below it.
   At the very top of the home page the header keeps its fade into the photo. Other pages are always scrolled-state. */
.hero-c .bar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--field); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-out); }
.hero-c .bar.is-scrolled::after { opacity: 1; }
.hero-c main > section { scroll-margin-top: 72px; }
.hero-c #home { scroll-margin-top: 0; }
/* Practices, Listen and Journal: before the first session they say what will appear there and when. */
.hero-c .room { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 0 var(--gutter) clamp(96px, 10vw, 128px); }
.hero-c .room > * { grid-column: 1 / span 7; }
.hero-c .room > .h2 { padding-top: clamp(32px, 4vw, 48px); }
.hero-c .room-note { margin-top: 24px; font-family: var(--serif); font-size: var(--text-letter); line-height: 1.6; max-width: 34em; }
.hero-c .room-when { margin-top: 16px; color: var(--ink-2); }
.hero-c .room > .btn { margin-top: 32px; justify-self: start; }
@media (max-width: 900px) { .hero-c .room > * { grid-column: 1 / -1; } }
@media (orientation: portrait) and (max-width: 600px) { .hero-c .room { padding-bottom: 96px; } }

/* Section colours, subtle and from the palette only, as solid bands with clean edges (no fades, so each section reads as its own):
   ground, a breath of mink (25%), ground, a whisper of plum (7%), a little more mink (45%), ground. */
.hero-c { --field-soft: color-mix(in oklab, var(--ground) 75%, var(--field)); --plum-soft: color-mix(in oklab, var(--ground) 93%, #74435B); --field-mid: color-mix(in oklab, var(--ground) 55%, var(--field)); }
.hero-c .expect, .hero-c .room { padding-top: clamp(64px, 8vw, 112px); }
.hero-c .room > .h2 { padding-top: 0; }
/* isolation keeps the ribbon watermark above the section's own colour */
.hero-c .expect { isolation: isolate; background: var(--field-soft); }
.hero-c #exercises { background: var(--ground); }
.hero-c #sessions { background: var(--field-soft); }
.hero-c #library { background: var(--ground); }
.hero-c #journal { background: var(--field-mid); }
.hero-c .foot { background: var(--ground); border-top: 0; }

/* Listen: the recording library. Two shelves (sessions, newest first; meditations); each recording a round play button,
   its title in the display serif, date and length, and one line from Romee. No cards, no rules: spacing groups them. */
.hero-c .sample-note { margin-top: 16px; font-size: var(--text-small); color: var(--ink-2); }
.hero-c .library { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 64px; }
.hero-c .shelf:first-child { grid-column: 1 / span 7; }
.hero-c .shelf:last-child { grid-column: 9 / -1; }
.hero-c .recs { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 32px; }
.hero-c .rec { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.hero-c .rec-title { margin: 0; font-family: var(--display); font-weight: 300; font-size: 1.5rem; line-height: round(nearest, 1.2em, 1px); letter-spacing: -0.01em; }
.hero-c .rec-meta { margin-top: 4px; font-size: var(--text-label); color: var(--ink-2); }
.hero-c .rec-note { margin-top: 8px; font-family: var(--serif); font-size: var(--text-body); line-height: 1.6; max-width: 34em; text-wrap: pretty; }
.hero-c .play { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--accent); background: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background-color 200ms var(--ease-out); }
.hero-c .play span { width: 14px; height: 16px; margin-left: 3px; background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.hero-c .play[aria-pressed="true"] { background: var(--accent-fill); }
.hero-c .play[aria-pressed="true"] span { margin-left: 0; width: 12px; height: 14px; background: linear-gradient(90deg, var(--on-accent) 0 35%, transparent 35% 65%, var(--on-accent) 65%); clip-path: none; }
@media (hover: hover) { .hero-c .play:not([aria-pressed="true"]):hover { background: rgb(116 67 91 / 0.08); } }
.hero-c .play:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
.hero-c .play:active { transform: scale(0.96); }
@media (max-width: 900px) {
  .hero-c .shelf:first-child, .hero-c .shelf:last-child { grid-column: 1 / -1; }
  .hero-c .shelf + .shelf { margin-top: 64px; }
}
.hero-c .all-weeks { grid-column: 1 / -1; justify-self: start; margin-top: 48px; }

/* Portraits: larger, cut out, on a colour chosen for the section they sit on.
   Annick on the desktop hero (mink): soft mink, so her circle reads; Romee under the letter (light ground): mink. */
.hero-c .portrait { object-fit: cover; object-position: 50% 18%; }
.hero-c .greet .portrait { width: 80px; height: 80px; background: #E8E2E2; }
.hero-c .sign .portrait { width: 80px; height: 80px; background: var(--field); }
.hero-c .sign { gap: 16px; }

/* Watermarks: one per section, on the open right side, bleeding off the edge; smaller and fainter on phones. */
.hero-c .rest, .hero-c .expect, .hero-c .room { position: relative; isolation: isolate; }
.hero-c main section > .wm { grid-column: auto; top: 24px; }
@media (orientation: portrait) and (max-width: 600px) {
  .hero-c .hero .sign .portrait, .hero-c .sign .portrait { width: 64px; height: 64px; }
}

/* Phones: a slightly darker mink header (bar, scrolled state, open menu); content centred; body text justified,
   with hyphenation and a centred last line so it stays even on a narrow column. Headlines are centred, not justified. */
@media (orientation: portrait) and (max-width: 600px) {
  .hero-c { --header: #CCC4C4; }
  .hero-page.hero-c .bar { background: linear-gradient(180deg, rgb(204 196 196 / 0.94) 0%, rgb(204 196 196 / 0.75) 60%, rgb(204 196 196 / 0) 100%); }
  .hero-c .bar::after { background: var(--header); }
  .hero-page.hero-c .bar:has(.menu.is-open)::before { background: var(--header); }

  .hero-c .hero .words { align-items: center; text-align: center; }
  .hero-c .hero .greet { justify-content: center; }
  .hero-c .hero .moment-wrap { margin-left: auto; margin-right: auto; }
  .hero-c .hero .session { justify-items: center; }
  .hero-c .rest, .hero-c .expect, .hero-c .room, .hero-c .weeks-intro { text-align: center; }
  .hero-c .sign, .hero-c .room > .btn, .hero-c .all-weeks { justify-self: center; }
  .hero-c .letter p, .hero-c .room-note, .hero-c .rec-note, .hero-c .weeks-lead {
    text-align: justify; text-align-last: center; hyphens: auto; -webkit-hyphens: auto; }
  .hero-c .weeks-intro { justify-items: center; }
  .hero-c .rec { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 12px; }
}

/* The letter under the hero has its own heading, like every other section. */
.hero-c .rest > .letter { margin-top: 24px; }

/* Dutch: the date reads lower case inside the sentence; on its own line (phones) it starts with a capital. */
@media (orientation: portrait) and (max-width: 600px) { .hero-c .hero .when-date::first-letter { text-transform: uppercase; } }

/* One shelf per library section: it takes the reading column. */
.hero-c .shelf:only-child { grid-column: 1 / span 8; }
@media (max-width: 900px) { .hero-c .shelf:only-child { grid-column: 1 / -1; } }
.hero-c .library { margin-top: 48px; }

/* Audio & Video: meditations as a list, videos as 16:9 frames (placeholders until Romee's videos arrive). */
.hero-c .library-av .shelf { grid-column: 1 / -1; }
.hero-c .library-av .shelf:not(.shelf-video) { grid-column: 1 / span 8; }
.hero-c .library-av .shelf + .shelf { margin-top: 64px; }
.hero-c .vids { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.hero-c .vid { display: grid; gap: 4px; }
.hero-c .vid-frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 12px; padding: 0; border: 0; border-radius: var(--radius); cursor: pointer;
  background: linear-gradient(135deg, var(--field) 0%, color-mix(in oklab, var(--field) 82%, var(--ink)) 100%); }
.hero-c .vid-play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgb(246 242 242 / 0.9); transition: transform 200ms var(--ease-out); }
.hero-c .vid-play span { width: 16px; height: 18px; margin-left: 4px; background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.hero-c .vid-frame:hover .vid-play { transform: scale(1.05); }
.hero-c .vid-frame:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
.hero-c .vid-len { position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; border-radius: 6px; background: rgb(58 53 56 / 0.72); color: #F6F2F2; font: 500 var(--text-small)/1 var(--sans); }
@media (max-width: 900px) { .hero-c .library-av .shelf:not(.shelf-video) { grid-column: 1 / -1; } }
@media (max-width: 600px) { .hero-c .vids { grid-template-columns: minmax(0, 1fr); } .hero-c .vid { justify-items: center; } .hero-c .vid-frame { width: 100%; } }

/* Home: the latest session as one panel, the same as on the Sessions page. */
.hero-c .latest { grid-column: 1 / span 10; margin-top: 40px; text-align: left; }
.hero-c .latest .wk { background: rgb(246 242 242 / 0.7); }
@media (max-width: 900px) { .hero-c .latest { grid-column: 1 / -1; } }
/* Library: a reading item marked by a thin page shape where recordings have a play button. */
.hero-c .read-mark { width: 40px; height: 48px; margin-left: 4px; border: 1px solid var(--accent); border-radius: 4px; }
.hero-c .rec-read .r-link { font-family: var(--display); font-weight: 300; font-size: 1.5rem; }

.hero-c .r-link, .weeks-page .r-link { color: var(--ink); }

/* Library tabs: one shelf at a time. The shelf's own heading is left out (the tab names it). On phones the three buttons sit side by side. */
.hero-c .lib-tabs { grid-column: 1 / -1; justify-self: start; margin-top: 32px; }
.hero-c .library-av { margin-top: 40px; }
.hero-c .library-av .shelf + .shelf { margin-top: 0; }
.hero-c .library-av .shelf > .h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hero-c .library-av .shelf[hidden] { display: none; }
.hero-c .library-av .recs, .hero-c .library-av .vids { margin-top: 0; }
@media (orientation: portrait) and (max-width: 600px) {
  .hero-c .lib-tabs { justify-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-c .lib-tabs button { padding: 0 8px; }
}
.hero-c .latest .swipe > .wk { background: rgb(246 242 242 / 0.7); }
.hero-c .latest .wks { margin-top: 0; }

/* Wherever a recording or meditation used to have a play button, it now has a video frame (placeholder until the real videos arrive). */
.hero-c .r-video .vid-frame { width: 100%; max-width: 520px; margin-bottom: 12px; }
.hero-c .r-video .vid-play { width: 52px; height: 52px; }
.hero-c .r-video { align-items: start; }
.hero-c .r-video .r-kind { padding-top: 4px; }

/* Watermark placement: beside the letter on the open right side. */
.hero-c .rest > .wm-img { grid-column: auto; top: -24px; right: 2vw; }
@media (max-width: 600px) { .hero-c .rest > .wm-img { top: 0; right: -30vw; } }

/* Watermarks span the whole section, so their offsets are measured from the page edge, not from the text column. */
.hero-c .room > .wme, .hero-c .rest > .wme { grid-column: 1 / -1; grid-row: 1; }
.hero-c .room:has(> .wme), .hero-c .rest:has(> .wme) { overflow: clip; }


/* The one image on the home page: Journal is a sheet of paper. Romee's paper-waves image shows through faintly as the sheet,
   under a ground-coloured veil, so the heading, text and button sit on it with full contrast. */
.hero-c #journal .journal-page { grid-column: 1 / span 8; display: grid; justify-items: start; gap: 0; padding: clamp(40px, 5vw, 64px); border-radius: var(--radius);
  background: linear-gradient(100deg, rgb(246 242 242 / 0.94) 0%, rgb(246 242 242 / 0.82) 45%, rgb(246 242 242 / 0.35) 100%), url(/assets/web/discs.jpg) 70% 60% / cover no-repeat; }
.hero-c #journal .journal-page > * { grid-column: auto; }
.hero-c #journal .journal-page .room-note { max-width: 30em; }
@media (max-width: 900px) { .hero-c #journal .journal-page { grid-column: 1 / -1; background: linear-gradient(180deg, rgb(246 242 242 / 0.92) 0%, rgb(246 242 242 / 0.7) 60%, rgb(246 242 242 / 0.4) 100%), url(/assets/web/discs.jpg) 50% 70% / cover no-repeat; } }
@media (orientation: portrait) and (max-width: 600px) { .hero-c #journal .journal-page { justify-items: center; padding: 40px 24px; } }
.hero-c #journal .journal-page .room-note { margin-top: 16px; }
.hero-c #journal .journal-page > .btn { margin-top: 32px; }
@media (orientation: portrait) and (max-width: 600px) { .hero-c #journal .journal-page { padding: 40px 16px; } }

/* Plum is for buttons only: no plum in section grounds or video placeholders. Sections: ground, soft mink, ground, mink. */

/* Plum only on buttons. Everything that is not a button uses the ink colours: links, the current menu item, focus rings,
   markers and the open week list. */
.hero-c { --ring: 2px solid var(--ink); }
.hero-c .link { color: var(--ink); text-decoration-color: var(--border); }
@media (hover: hover) { .hero-c .link:hover { text-decoration-color: var(--ink); } }
.hero-c .menu a[aria-current="page"], .hero-page .bar .menu a[aria-current="page"] { text-decoration-color: var(--ink); }
.hero-c .read-mark { border-color: var(--border); }
.hero-c .r-link:hover { text-decoration-color: var(--ink); }
.hero-c .dd-panel { border-color: var(--divider); }
.hero-c .dd-panel a:hover { background: color-mix(in oklab, var(--ground) 70%, var(--field)); }
.hero-c .dd-panel a[aria-current]::before { background: var(--ink); }
.hero-c .dd-panel a[aria-current] .dd-week { color: var(--ink); }

/* Phones: all content centred, the footer and the open menu included. */
@media (max-width: 600px) {
  .hero-c .foot { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px; }
  .hero-page.hero-c .bar .menu a { justify-content: center; text-align: center; }
  .hero-c .rec, .hero-c .vid { text-align: center; }
}

/* Sessions: the same paper sheet as Journal (8 columns, image under a ground veil), with the ribbon-loop image.
   It holds the heading, the line and the link to all sessions; the latest session follows below it. */
.hero-c #sessions .journal-page { grid-column: 1 / span 8; display: grid; justify-items: start; padding: clamp(40px, 5vw, 64px); border-radius: var(--radius);
  background: linear-gradient(100deg, rgb(246 242 242 / 0.94) 0%, rgb(246 242 242 / 0.82) 45%, rgb(246 242 242 / 0.35) 100%), url(/assets/web/paper-waves.jpg) 80% 40% / cover no-repeat; }
.hero-c #sessions .journal-page > * { grid-column: auto; }
.hero-c #sessions .journal-page .room-note { margin-top: 16px; max-width: 30em; }
.hero-c #sessions .journal-page > .all-weeks { margin-top: 24px; }
.hero-c #sessions .latest { margin-top: 48px; }
@media (max-width: 900px) { .hero-c #sessions .journal-page { grid-column: 1 / -1; background: linear-gradient(180deg, rgb(246 242 242 / 0.92) 0%, rgb(246 242 242 / 0.7) 60%, rgb(246 242 242 / 0.4) 100%), url(/assets/web/paper-waves.jpg) 50% 40% / cover no-repeat; } }
@media (orientation: portrait) and (max-width: 600px) { .hero-c #sessions .journal-page { justify-items: center; padding: 40px 16px; } .hero-c #sessions .latest { margin-top: 32px; } }

/* Library: the same paper sheet, with the discs image. It holds the heading and the line; the tabs and the shelves follow below it. */
.hero-c #library .journal-page { grid-column: 1 / span 8; display: grid; justify-items: start; padding: clamp(40px, 5vw, 64px); border-radius: var(--radius);
  background: linear-gradient(100deg, rgb(246 242 242 / 0.94) 0%, rgb(246 242 242 / 0.82) 45%, rgb(246 242 242 / 0.35) 100%), url(/assets/web/ribbon-loop.jpg) 75% 40% / cover no-repeat; }
.hero-c #library .journal-page > * { grid-column: auto; }
.hero-c #library .journal-page .room-note { margin-top: 16px; max-width: 30em; }
.hero-c #library .lib-tabs { margin-top: 48px; }
@media (max-width: 900px) { .hero-c #library .journal-page { grid-column: 1 / -1; background: linear-gradient(180deg, rgb(246 242 242 / 0.92) 0%, rgb(246 242 242 / 0.7) 60%, rgb(246 242 242 / 0.4) 100%), url(/assets/web/ribbon-loop.jpg) 50% 40% / cover no-repeat; } }
@media (orientation: portrait) and (max-width: 600px) { .hero-c #library .journal-page { justify-items: center; padding: 40px 16px; } .hero-c #library .lib-tabs { margin-top: 32px; } }

/* Phone menu, open: a light sheet (the page ground) and the pages in Aeonik instead of the display serif. */
@media (max-width: 760px) {
  .hero-page.hero-c .bar:has(.menu.is-open)::before { background: var(--ground); }
  .hero-page.hero-c .bar:has(.menu.is-open)::after { opacity: 0; }
  .hero-page.hero-c .bar .menu a { font-family: var(--sans); font-weight: 400; font-size: 1.25rem; letter-spacing: 0; line-height: 1.3; min-height: 60px; text-underline-offset: 8px; }
}

/* Phone hero photo: filter 4, towards mink (cooler, less colour), on trial 2026-10-19. */
@media (orientation: portrait) and (max-width: 600px) { .hero-c .hero-scene img { filter: saturate(0.7) hue-rotate(-12deg) brightness(1.02); } }

/* Freshness on the home page (2026-10-19), as on the Sessions and Journal pages: every section on the light ground, the variation
   comes from the image sheets; sheets lighter with the image more visible; the latest session and placeholders as light paper. */
.hero-c #sessions, .hero-c #library, .hero-c #journal { background: var(--ground); }
.hero-c #sessions .journal-page, .hero-c #library .journal-page, .hero-c #journal .journal-page { padding: clamp(48px, 6vw, 80px); }
.hero-c #sessions .journal-page { background: linear-gradient(100deg, rgb(252 250 250 / 0.92) 0%, rgb(252 250 250 / 0.68) 45%, rgb(252 250 250 / 0.2) 100%), url(/assets/web/paper-waves.jpg) 80% 40% / cover no-repeat; }
.hero-c #library .journal-page { background: linear-gradient(100deg, rgb(252 250 250 / 0.92) 0%, rgb(252 250 250 / 0.6) 45%, rgb(252 250 250 / 0) 100%), url(/assets/web/ribbon-loop.jpg) 75% 40% / cover no-repeat; }
.hero-c #journal .journal-page { background: linear-gradient(100deg, rgb(252 250 250 / 0.92) 0%, rgb(252 250 250 / 0.68) 45%, rgb(252 250 250 / 0.2) 100%), url(/assets/web/discs.jpg) 70% 60% / cover no-repeat; }
.hero-c .latest .wk { background: #FCFAFA; border: 1px solid rgb(168 156 159 / 0.35); box-shadow: 0 24px 48px -36px rgb(58 53 56 / 0.25); }
.hero-c .vid-frame { background: linear-gradient(135deg, #EFEAEA 0%, #E2DBDB 100%); }
@media (max-width: 900px) {
  .hero-c #sessions .journal-page { background: linear-gradient(180deg, rgb(252 250 250 / 0.9) 0%, rgb(252 250 250 / 0.65) 60%, rgb(252 250 250 / 0.3) 100%), url(/assets/web/paper-waves.jpg) 50% 40% / cover no-repeat; }
  .hero-c #library .journal-page { background: linear-gradient(180deg, rgb(252 250 250 / 0.9) 0%, rgb(252 250 250 / 0.55) 60%, rgb(252 250 250 / 0.15) 100%), url(/assets/web/ribbon-loop.jpg) 50% 40% / cover no-repeat; }
  .hero-c #journal .journal-page { background: linear-gradient(180deg, rgb(252 250 250 / 0.9) 0%, rgb(252 250 250 / 0.65) 60%, rgb(252 250 250 / 0.3) 100%), url(/assets/web/discs.jpg) 50% 70% / cover no-repeat; }
}
@media (orientation: portrait) and (max-width: 600px) { .hero-c #sessions .journal-page, .hero-c #library .journal-page, .hero-c #journal .journal-page { padding: 48px 16px; } }
/* One ground for all sections: the gap between them is the section padding alone, so keep it moderate. */
.hero-c #sessions, .hero-c #library, .hero-c #journal { padding-top: clamp(32px, 4vw, 48px); }

/* Home page, a step lighter (2026-10-19): a lighter page ground and a lighter mink in the opening behind the words. */
body.hero-c:not(.weeks-page) { --ground: #FAF8F8; }
body.hero-c:not(.weeks-page) .hero { background: #E6E0E0; }
@media (orientation: landscape) { body.hero-c:not(.weeks-page) .hero::before { background: linear-gradient(90deg, rgb(230 224 224 / 0.92) 0%, rgb(230 224 224 / 0.86) 30%, rgb(230 224 224 / 0.55) 46%, rgb(230 224 224 / 0) 66%); } }
.hero-c #library .journal-page > .all-weeks { margin-top: 24px; }

/* Phones: a very subtle edge on the image sheets, so they stand out from the light ground. */
@media (max-width: 640px) { .hero-c .journal-page, .weeks-page .sheet-intro, .journal-page-body .jr-intro, .lib-intro { border: 1.5px solid #F2EEEE; } }

/* One border style everywhere (2026-10-19): 2px, light #F2EEEE. Cards, dividers, the writing field, the week dropdown and its list,
   the library tabs, the reading marker and the image sheets on every width. */
.hero-c { --line: 1.5px solid #F2EEEE; }
.hero-c .journal-page, .weeks-page .sheet-intro, .journal-page-body .jr-intro, .lib-intro,
.hero-c .latest .wk, .weeks-page .wk, .journal-page-body .jr-write, .journal-page-body .jr-write textarea,
.hero-c .dd-btn, .hero-c .dd-panel, .hero-c .seg, .hero-c .read-mark { border: var(--line); }
.hero-c .dd-btn:hover, .hero-c .dd-btn:focus-visible { border: var(--line); }
.hero-c .wk-head { border-bottom: var(--line); }
.hero-c .wk .r { border-top: var(--line); }
.hero-c .wk .r-video, .hero-c .wk .r-video + .r { border-top: 0; }
.journal-page-body .note { border-top: var(--line); }
.journal-page-body .note:last-child { border-bottom: var(--line); }
.hero-c .listen .rule { border-top: var(--line); }

/* Every page on the home page's ground (#FAF8F8). */
body.hero-c { --ground: #FAF8F8; }
/* Desktop home: one width for every section's content: the sheets, the latest session and the library all span 8 of 12 columns. */
@media (min-width: 901px) {
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { grid-column: 1 / span 8; }
  .hero-c #library .library-av, .hero-c #library .lib-tabs { grid-column: 1 / span 8; }
  .hero-c .library-av .shelf, .hero-c .library-av .shelf:not(.shelf-video) { grid-column: 1 / -1; }
}

/* Desktop home, wider layout (2026-10-19): the note runs the full width in two columns; the latest session sits beside its sheet;
   Library (sheet only, the shelves stay on the Library page) and Journal sit side by side. Phones keep the stacked order. */
@media (min-width: 901px) {
  .hero-c #journey > * { grid-column: 1 / -1; }
  .hero-c #journey .letter { max-width: none; column-count: 2; column-gap: 64px; }
  .hero-c #sessions { align-items: stretch; }
  .hero-c #sessions .journal-page { grid-column: 1 / span 5; grid-row: 1; }
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { grid-column: 6 / -1; grid-row: 1; margin-top: 0; display: flex; }
  .hero-c #sessions .latest .wk { flex: 1; }
  .hero-c .duo #library .lib-tabs, .hero-c .duo #library .library-av { display: none; }
  .hero-c .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; padding: clamp(32px, 4vw, 48px) var(--gutter) clamp(96px, 10vw, 128px); }
  .hero-c .duo > #library, .hero-c .duo > #journal { display: flex; padding: 0; }
  .hero-c .duo .journal-page { flex: 1; align-content: start; }
}

/* Desktop home, craft pass (apple-design: deliberate spacing, grouping, alignment). Every card shares one 48px inset, so the
   headings of paired cards start on one line; each card's action sits on its bottom edge, so the actions of a pair line up;
   one 128px gap between sections. */
@media (min-width: 901px) {
  .hero-c #sessions .journal-page, .hero-c .duo .journal-page { padding: 48px; display: flex; flex-direction: column; align-items: flex-start; }
  .hero-c #sessions .journal-page > .all-weeks, .hero-c .duo .journal-page > .all-weeks, .hero-c .duo .journal-page > .btn { margin-top: auto; }
  .hero-c #sessions .journal-page > :nth-last-child(2), .hero-c .duo .journal-page > :nth-last-child(2) { margin-bottom: 40px; }
  .hero-c #sessions .latest .wk { padding: 16px 48px 48px; }
  .hero-c #sessions .latest .wk-head { padding-top: 32px; }
  .hero-c #journey, .hero-c #sessions { padding-bottom: 128px; }
  .hero-c #sessions, .hero-c .duo { padding-top: 0; }
}
@media (min-width: 901px) { .hero-c #library .journal-page, .hero-c #journal .journal-page { padding: 48px; } }
/* Text links at the foot of a card get the button's 48px height: a full touch target, and the link and the button of a pair share a centre line. */
@media (min-width: 901px) { .hero-c .journal-page > .all-weeks { min-height: 48px; display: inline-flex; align-items: center; } }
/* Desktop home: the session sheet and the latest session share the width equally, matching Library and Journal below. */
@media (min-width: 901px) {
  .hero-c #sessions .journal-page { grid-column: 1 / span 6; }
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { grid-column: 7 / -1; }
}

/* Desktop home, latest session at half width (2026-10-19): one column instead of a cramped two. Title and date, then the recording
   across the full card, then Romee's note and the exercise, all on one left edge. Same material as the sheet beside it: paper,
   the 2px edge, no shadow. */
@media (min-width: 901px) {
  .hero-c #sessions .latest .wk { box-shadow: none; display: flex; flex-direction: column; }
  .hero-c #sessions .latest .wk-head { margin-bottom: 0; padding-bottom: 24px; }
  .hero-c #sessions .latest .wk .rows { display: block; }
  .hero-c #sessions .latest .wk .r { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kind" "main"; row-gap: 8px; padding: 24px 0; }
  .hero-c #sessions .latest .wk .r-len, .hero-c #sessions .latest .wk .r-act { display: none; }
  .hero-c #sessions .latest .wk .r-video { display: block; padding: 32px 0 8px; border-top: 0; }
  .hero-c #sessions .latest .wk .r-video .vid-frame { width: 100%; max-width: none; margin: 0; }
  .hero-c #sessions .latest .wk .r-video + .r { border-top: 0; padding-top: 24px; }
  .hero-c #sessions .latest .wk .r:last-child { padding-bottom: 0; }
  .hero-c #sessions .latest .wk .r-words { max-width: 34em; }
}

/* Desktop home, one axis (2026-10-19). The page's right-hand cards start at the middle of the grid (column 7). The note's letter and
   the latest session's words start on that same line, so the page reads in one rhythm: headings and images on the left half, reading
   on the right. The note is one column; the latest session is one column of two full-width pieces: the image sheet as a banner,
   then the session card. */
@media (min-width: 901px) {
  .hero-c #journey { align-items: start; }
  .hero-c #journey > .h2 { grid-column: 1 / span 6; grid-row: 1; }
  .hero-c #journey .letter { grid-column: 7 / -1; grid-row: 1; column-count: 1; max-width: 34em; margin-top: 0; padding-top: 12px; }
  .hero-c #journey .sign { grid-column: 7 / -1; grid-row: 2; }

  .hero-c #sessions .journal-page { grid-column: 1 / -1; grid-row: 1; }
  .hero-c #sessions .journal-page > .room-note { max-width: 30em; }
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { grid-column: 1 / -1; grid-row: 2; margin-top: 24px; }
  .hero-c #sessions .latest .wk .rows { display: grid; grid-template-columns: calc(50% - 36px) minmax(0, 1fr); column-gap: 48px; align-items: start; padding-top: 32px; }
  .hero-c #sessions .latest .wk .r-video { grid-column: 1; grid-row: 1 / span 3; padding: 0; }
  .hero-c #sessions .latest .wk .r:not(.r-video) { grid-column: 2; }
  .hero-c #sessions .latest .wk .r-video + .r { padding-top: 0; }
  .hero-c #sessions .latest .wk .r:last-child { padding-bottom: 0; }
}
/* The note's byline (Romee's portrait and name) sits under the heading, so the left half says who wrote it and the right half holds
   the letter. The session banner and the session card join into one object: the image is the card's header. */
@media (min-width: 901px) {
  .hero-c #journey { grid-template-rows: auto 1fr; }
  .hero-c #journey .letter { grid-row: 1 / span 2; }
  .hero-c #journey .sign { grid-column: 1 / span 6; grid-row: 2; align-self: start; margin-top: 32px; }

  .hero-c #sessions .journal-page { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { margin-top: 0; }
  .hero-c #sessions .latest .wk { border-top-left-radius: 0; border-top-right-radius: 0; border-top: var(--line); }
}
@media (min-width: 901px) { .hero-c #sessions .journal-page > :nth-last-child(2) { margin-bottom: 16px; } }

/* All sessions and Visit library are buttons, like the Journal one (2026-10-19). On phones they keep the Journal button's spacing. */
@media (max-width: 900px) { .hero-c .journal-page > .btn.all-weeks { margin-top: 32px; } }

/* Library and Journal sheets: the image is calmed with a filter (lower contrast, less colour, a touch brighter) so it sits behind the
   words instead of competing with them. The image and its veil move to a layer under the content so the filter never touches the text. */
.hero-c #library .journal-page, .hero-c #journal .journal-page { position: relative; isolation: isolate; overflow: hidden; background: #FCFAFA; }
.hero-c #library .journal-page::before, .hero-c #journal .journal-page::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  filter: contrast(0.7) saturate(0.6) brightness(1.17); }
.hero-c #library .journal-page::before { background: linear-gradient(100deg, rgb(252 250 250 / 0.92) 0%, rgb(252 250 250 / 0.6) 45%, rgb(252 250 250 / 0) 100%), url(/assets/web/ribbon-loop.jpg) 75% 40% / cover no-repeat; }
.hero-c #journal .journal-page::before { background: linear-gradient(100deg, rgb(252 250 250 / 0.92) 0%, rgb(252 250 250 / 0.68) 45%, rgb(252 250 250 / 0.2) 100%), url(/assets/web/discs.jpg) 70% 60% / cover no-repeat; }
@media (max-width: 900px) {
  .hero-c #library .journal-page::before { background: linear-gradient(180deg, rgb(252 250 250 / 0.9) 0%, rgb(252 250 250 / 0.55) 60%, rgb(252 250 250 / 0.15) 100%), url(/assets/web/ribbon-loop.jpg) 50% 40% / cover no-repeat; }
  .hero-c #journal .journal-page::before { background: linear-gradient(180deg, rgb(252 250 250 / 0.9) 0%, rgb(252 250 250 / 0.65) 60%, rgb(252 250 250 / 0.3) 100%), url(/assets/web/discs.jpg) 50% 70% / cover no-repeat; }
}
/* Critic pass: Romee's byline back at the end of her letter, on the axis; the left half holds only the heading. The Library veil
   stays strong across the text side, so the ribbon lines fade out before they reach the words. */
@media (min-width: 901px) {
  .hero-c #journey .sign { grid-column: 7 / -1; grid-row: 2; margin-top: 32px; }
  .hero-c #journey .letter { grid-row: 1; }
  .hero-c #library .journal-page::before { background: linear-gradient(100deg, rgb(252 250 250 / 0.94) 0%, rgb(252 250 250 / 0.86) 45%, rgb(252 250 250 / 0.5) 62%, rgb(252 250 250 / 0) 100%), url(/assets/web/ribbon-loop.jpg) 75% 40% / cover no-repeat; }
}
@media (min-width: 901px) {
  .hero-c #library .journal-page > .all-weeks { margin-top: auto; }
  .hero-c #sessions .journal-page > :nth-last-child(2) { margin-bottom: 32px; }
}
/* Library and Journal cards are flex columns too (their id rules set grid), so both buttons sit on the bottom edge. */
@media (min-width: 901px) { .hero-c #library .journal-page, .hero-c #journal .journal-page { display: flex; flex-direction: column; align-items: flex-start; } }

/* Desktop home (2026-10-19): Sessions is ONE sheet. The image and its veil are one layer behind the whole section (a grid pseudo-element
   spanning every row); the sheet's own box dissolves (display: contents) so its heading, line and button share the grid with the
   session. Order: heading, line, sample note, the Intake (video beside note and exercise), All sessions at the bottom. Phones keep
   their stacked cards. */
@media (min-width: 901px) {
  .hero-c #sessions { row-gap: 0; align-items: start; }
  .hero-c #sessions::before { content: ""; grid-column: 1 / -1; grid-row: 1 / span 5; z-index: -1; border: var(--line); border-radius: var(--radius);
    background: linear-gradient(180deg, rgb(252 250 250 / 0) 0%, rgb(252 250 250 / 0) 18%, rgb(252 250 250 / 0.95) 42%, #FCFAFA 56%),
      linear-gradient(100deg, rgb(252 250 250 / 0.92) 0%, rgb(252 250 250 / 0.68) 45%, rgb(252 250 250 / 0.2) 100%),
      url(/assets/web/paper-waves.jpg) 80% 30% / cover no-repeat, #FCFAFA; }
  .hero-c #sessions .journal-page { display: contents; }
  .hero-c #sessions .journal-page > *, .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { grid-column: 1 / -1; margin-left: 48px; margin-right: 48px; }
  .hero-c #sessions .journal-page > .h2 { grid-row: 1; margin-top: 48px; }
  .hero-c #sessions .journal-page > .room-note { grid-row: 2; margin-top: 16px; max-width: 30em; }
  .hero-c #sessions .journal-page > .sample-note { grid-row: 3; margin-top: 16px; margin-bottom: 0; }
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { grid-row: 4; margin-top: 48px; display: block; }
  .hero-c #sessions .journal-page > .all-weeks { grid-row: 5; justify-self: start; margin-top: 48px; margin-bottom: 48px; }
  .hero-c #sessions .latest .wk { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
  .hero-c #sessions .latest .wk-head { padding-top: 0; }
}

/* Desktop home: A note from Romee is a letter on a sheet of paper, as wide as the cards below. One column of letter text at a
   reading measure (34em), Romee's signature at the end. The paper is a grid pseudo-element behind the section's rows. */
@media (min-width: 901px) {
  .hero-c #journey { grid-template-rows: auto auto auto; row-gap: 0; }
  .hero-c #journey::before { content: ""; grid-column: 1 / -1; grid-row: 1 / span 3; z-index: -1; background: #FCFAFA; border: var(--line); border-radius: var(--radius); }
  .hero-c #journey > .h2 { grid-column: 1 / -1; grid-row: 1; margin: 64px 64px 0; }
  .hero-c #journey .letter { grid-column: 1 / -1; grid-row: 2; margin: 32px 64px 0; padding-top: 0; max-width: 34em; font-size: 1.375rem; line-height: 1.6; }
  .hero-c #journey .sign { grid-column: 1 / -1; grid-row: 3; margin: 40px 64px 64px; }
}
@media (min-width: 901px) { .hero-c #journey::before, .hero-c #sessions::before { align-self: stretch; justify-self: stretch; } }
/* The letter block sits centred on its paper, like a letter on a page: heading, letter and signature share one 748px column
   (34em of the 22px letter text), the words stay left-aligned inside it. */
@media (min-width: 901px) {
  .hero-c #journey > .h2, .hero-c #journey .letter, .hero-c #journey .sign { justify-self: center; width: min(748px, calc(100% - 96px)); max-width: none; margin-left: 0; margin-right: 0; }
}
/* Sessions sheet: the image shows at full sheet strength (as on Library and Journal) through the whole top of the card, heading,
   line and the Intake row, and only softens into paper behind the recording and the notes, where Romee's words will be read. */
@media (min-width: 901px) {
  .hero-c #sessions::before {
    background: linear-gradient(180deg, rgb(252 250 250 / 0) 0%, rgb(252 250 250 / 0) 34%, rgb(252 250 250 / 0.7) 56%, rgb(252 250 250 / 0.9) 74%, rgb(252 250 250 / 0.94) 100%),
      linear-gradient(100deg, rgb(252 250 250 / 0.92) 0%, rgb(252 250 250 / 0.6) 45%, rgb(252 250 250 / 0) 100%),
      url(/assets/web/paper-waves.jpg) 80% 20% / cover no-repeat, #FCFAFA; }
}
/* Sessions card, shorter (2026-10-19): All sessions moves up beside the intro, on the card's right edge level with the last intro
   line (the usual place for a "see all" action), and the gaps inside the card tighten to the 32/24 steps. */
@media (min-width: 901px) {
  .hero-c #sessions .journal-page > .all-weeks { grid-row: 1 / span 3; justify-self: end; align-self: end; margin: 0 48px 0 0; }
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { margin-top: 32px; margin-bottom: 48px; }
  .hero-c #sessions .latest .wk-head { padding-bottom: 20px; }
  .hero-c #sessions .latest .wk .rows { padding-top: 24px; }
  .hero-c #sessions::before { grid-row: 1 / span 4; }
}
@media (min-width: 901px) {
  .hero-c #sessions .journal-page > .all-weeks { grid-row: 1; align-self: start; margin-top: 48px; }
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { margin-top: 40px; }
}
/* A note from Romee: no border around the letter (2026-10-19). */
@media (min-width: 901px) { .hero-c #journey::before { border: 0; } }
/* All sessions back at the bottom of the card, left, as in the chosen layout. */
@media (min-width: 901px) {
  .hero-c #sessions .journal-page > .all-weeks { grid-row: 5; justify-self: start; align-self: start; margin: 0 48px 48px; }
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { margin-bottom: 40px; }
  .hero-c #sessions::before { grid-row: 1 / span 5; }
}
@media (min-width: 901px) { .hero-c #sessions .journal-page > .all-weeks { justify-self: center; } }
/* Sessions card, double-checked (2026-10-19): the session itself is its own paper panel again, with the 2px border, inside the image
   sheet. Inside the panel the dividers sit on paper, where they read properly. The sheet shows its image at full sheet strength
   (one veil, left to right, as Library and Journal); the panel is opaque, so no fade is needed. All sessions stays centred below. */
@media (min-width: 901px) {
  .hero-c #sessions::before {
    background: linear-gradient(100deg, rgb(252 250 250 / 0.92) 0%, rgb(252 250 250 / 0.6) 45%, rgb(252 250 250 / 0) 100%),
      url(/assets/web/paper-waves.jpg) 80% 30% / cover no-repeat, #FCFAFA; }
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { margin-top: 32px; margin-bottom: 32px; }
  .hero-c #sessions .latest .wk { background: #FCFAFA; border: var(--line); border-radius: var(--radius); padding: 40px 48px 48px; }
  .hero-c #sessions .latest .wk-head { padding-top: 0; padding-bottom: 20px; }
  .hero-c #sessions .latest .wk .rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; padding-top: 32px; }
}
/* A note from Romee spans the same width as the other sections (2026-10-19): heading, letter and signature run from the cards'
   text edge (48px in from the section edge) to the same edge on the right. One column. */
@media (min-width: 901px) {
  .hero-c #journey > .h2, .hero-c #journey .letter, .hero-c #journey .sign { justify-self: stretch; width: auto; max-width: none; margin-left: 48px; margin-right: 48px; }
  .hero-c #journey .letter { line-height: 1.7; }
}
/* A note from Romee: content centred (2026-10-19). */
@media (min-width: 901px) {
  .hero-c #journey > .h2, .hero-c #journey .letter { text-align: center; }
  .hero-c #journey .sign { justify-self: center; margin-left: 0; margin-right: 0; }
}

/* Sessions card, critic pass 2 (2026-10-19). One centred axis like the note above; spacing on the 48/40/32/24/16 steps; the empty
   note and exercise are two equal bordered slots that together match the video's height, so they read as "fills in after your
   session"; the video frame is lighter with the same 2px edge; the panel header sits on one baseline. */
@media (min-width: 901px) {
  .hero-c #sessions::before {
    background: linear-gradient(180deg, rgb(252 250 250 / 0.92) 0%, rgb(252 250 250 / 0.55) 100%),
      url(/assets/web/paper-waves.jpg) 80% 30% / cover no-repeat, #FCFAFA; }
  .hero-c #sessions .journal-page > .h2 { justify-self: center; text-align: center; margin-top: 48px; }
  .hero-c #sessions .journal-page > .room-note { justify-self: center; text-align: center; max-width: 34em; text-wrap: balance; margin-top: 16px; margin-bottom: 0; }
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { margin-top: 48px; margin-bottom: 40px; }
  .hero-c #sessions .journal-page > .all-weeks { margin: 0 48px 48px; }
  .hero-c #sessions .latest .wk { padding: 40px 48px 40px; }
  .hero-c #sessions .latest .wk-head { align-items: baseline; padding-bottom: 24px; }
  .hero-c #sessions .latest .wk .rows { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: 48px; row-gap: 24px; align-items: stretch; padding-top: 32px; }
  .hero-c #sessions .latest .wk .r-video { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .hero-c #sessions .latest .wk .r:not(.r-video) { grid-column: 2; border: var(--line); border-radius: var(--radius); padding: 16px 24px; align-content: start; }
  .hero-c #sessions .latest .wk .r[data-kind="note"] { grid-row: 1; }
  .hero-c #sessions .latest .wk .r[data-kind="exercise"] { grid-row: 2; }
  .hero-c #sessions .latest .wk .r-video + .r { padding-top: 16px; border-top: var(--line); }
  .hero-c #sessions .latest .wk .r:last-child { padding-bottom: 16px; }
  .hero-c #sessions .latest .wk .r-kind { font-weight: 500; color: var(--ink-2); }
  .hero-c #sessions .latest .vid-frame { background: linear-gradient(135deg, #F6F2F2 0%, #ECE6E6 100%); border: var(--line); }
}

/* Phones and tablets get the same sections as desktop (2026-10-19). Library on the home page is its sheet only (the shelves live on
   the Library page). Your latest session is one image sheet: heading and line, the session as its own bordered paper panel (video,
   then the empty note and exercise boxes), All sessions centred at the bottom. Phone rules hold: centred, plum only on the button. */
.hero-c .duo #library .lib-tabs, .hero-c .duo #library .library-av { display: none; }
@media (max-width: 900px) {
  .hero-c #sessions { row-gap: 0; align-items: start; }
  .hero-c #sessions::before { content: ""; grid-column: 1 / -1; grid-row: 1 / span 5; align-self: stretch; justify-self: stretch; z-index: -1;
    border: var(--line); border-radius: var(--radius);
    background: linear-gradient(180deg, rgb(252 250 250 / 0.92) 0%, rgb(252 250 250 / 0.55) 100%),
      url(/assets/web/paper-waves.jpg) 50% 20% / cover no-repeat, #FCFAFA; }
  .hero-c #sessions .journal-page { display: contents; }
  .hero-c #sessions .journal-page > *, .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { grid-column: 1 / -1; margin-left: 16px; margin-right: 16px; }
  .hero-c #sessions .journal-page > .h2 { grid-row: 1; justify-self: center; text-align: center; margin-top: 40px; }
  .hero-c #sessions .journal-page > .room-note { grid-row: 2; justify-self: center; margin-top: 16px; margin-bottom: 0; }
  .hero-c #sessions .latest, .hero-c #sessions .sheet > .latest { grid-row: 4; margin-top: 32px; margin-bottom: 32px; display: block; }
  .hero-c #sessions .journal-page > .all-weeks { grid-row: 5; justify-self: center; margin: 0 16px 40px; }
  .hero-c #sessions .latest .wk { background: #FCFAFA; border: var(--line); border-radius: var(--radius); box-shadow: none; padding: 24px 16px; }
  .hero-c #sessions .latest .wk-head { padding-top: 0; padding-bottom: 16px; }
  .hero-c #sessions .latest .wk .rows { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding-top: 16px; }
  .hero-c #sessions .latest .wk .r-video { padding: 0; border: 0; }
  .hero-c #sessions .latest .wk .r-video .vid-frame { width: 100%; margin: 0; }
  .hero-c #sessions .latest .wk .r:not(.r-video) { display: grid; grid-template-areas: "kind" "main"; justify-items: center; min-height: 96px; align-content: start;
    padding: 16px; border: var(--line); border-radius: var(--radius); }
  .hero-c #sessions .latest .wk .r-len, .hero-c #sessions .latest .wk .r-act { display: none; }
  .hero-c #sessions .latest .wk .r-kind { font-weight: 500; color: var(--ink-2); }
  .hero-c #sessions .latest .vid-frame { background: linear-gradient(135deg, #F6F2F2 0%, #ECE6E6 100%); border: var(--line); }
}
/* "Date:" reads as a label for the date beside it: a word space, not a gap. */
.hero-c #sessions .wk-dates { gap: 6px; }