/* Sigh Club (was Ahh Club) · the editorial club look (2026-10-17). Loaded after styles.css, player.css and shot-shapes.css.
   Olga: "more bold and defined, not as mellow as current", then, on a first bold draft (Bowlby One, saturated colours):
   "that doesnt look right" and "try something more like [High Moon Studio's Workhorse and Form by Sami Clarke], but keep
   our current colours". What that means here: the Bloom colours untouched (cream, plum ink, plum, rose, butter,
   periwinkle, mint); Instrument Serif set large, tight and confident, with italic words and capital lockups; tiny
   tracked labels; colour in big flat blocks; photographs in thin frames; club graphics: a turning seal with the
   headphones mascot as a one-colour mark, awning stripes, roman numerals. No glows, no blur, no gradients added. */

:root {
  /* the one accent is pink again, with plum (Olga, 2026-10-18: "plum plus yellow looks like it s a negative photo file in some
     situations", then "bring pink and plum"); marigold was the accent from 2026-10-17 to 2026-10-18. The live site's pink,
     set here on purpose so the choice is visible in this sheet */
  --rose: #F3A6C6; --rose-light: #FBD3E2;
  --track-caps: .06em;
  --h1: clamp(64px, 8.2vw, 136px); --h2: clamp(46px, 5.8vw, 92px);
}

/* ---------- type: bigger, tighter, more defined ---------- */
.h2 { font-size: var(--h2); line-height: .94; letter-spacing: -.022em; }
.lead { font-size: 18px; line-height: 1.6; max-width: 640px; }
.body { font-size: 17px; line-height: 1.65; }
.section { padding-top: 136px; padding-bottom: 136px; }
.section__head { gap: 24px; margin-bottom: 72px; }

/* buttons and labels: brand.css */

/* ---------- the name as a capital lockup until a real mark exists ---------- */
.nav__logo--word { font-family: var(--serif); font-size: 27px; line-height: 1; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.nav__links { letter-spacing: .16em; font-size: 11px; font-weight: 600; }
@media (max-width: 560px) { .nav__logo--word { font-size: 22px; } }

/* ---------- hero: cream paper, the headline very large, the photograph framed, the seal turning on its corner ---------- */
.hero { background: var(--page); }
.hero__canvas { display: none; }   /* the moving wash: off, the paper is flat */
.hero__title { font-size: var(--h1); line-height: .9; letter-spacing: -.028em; }
.hero__title em { color: var(--plum); }
.hero__sub { font-size: 18px; line-height: 1.6; max-width: 520px; }
.bloom { aspect-ratio: 4 / 5; width: min(100%, 480px); }
html[data-hshape] .bloom__photo, .bloom__photo { -webkit-mask: none; mask: none; border-radius: 0; box-shadow: 0 0 0 1px var(--ink); object-position: 55% 40%; }
.hero__mascot { display: none; }
.seal { position: absolute; left: -76px; bottom: 56px; width: 172px; aspect-ratio: 1; border-radius: 50%; background: var(--rose); color: var(--ink); }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: sealturn 38s linear infinite; }
.seal__ring text { font: 600 11.4px var(--sans); letter-spacing: .14em; fill: currentColor; }
.seal__mark { position: absolute; inset: 22%; background: var(--plum-deep); -webkit-mask: url(/assets/img/line/mascot-lotus.png) center / contain no-repeat; mask: url(/assets/img/line/mascot-lotus.png) center / contain no-repeat; }
@keyframes sealturn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seal__ring { animation: none; } }

/* ---------- builder: plum, as she chose it; the headline inside the frame ---------- */
.builder__head { display: grid; gap: 16px; justify-items: center; text-align: center; }
.builder__kicker { color: var(--rose) !important; }
.builder__head .builder__tag { position: static; transform: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; white-space: normal;
  font-family: var(--serif); font-weight: 400; font-size: var(--h2); line-height: .94; letter-spacing: -.022em; color: var(--page); text-transform: none; }   /* was a tab on the frame's edge (shot-shapes.css) */
.builder__tag em { color: var(--butter); }
.section--builder .builder { padding-top: 64px; }

/* ---------- the app: blush, the circle behind the phone a flat butter sun ---------- */
.live, .live-air { background: var(--rose-light); }
.live__blob { background: var(--butter); }

/* ---------- why: the four covers as they are; bigger titles ---------- */
#features .card__cover .h3 { font-size: clamp(28px, 2.4vw, 38px); line-height: 1; letter-spacing: -.015em; }

/* ---------- band: one plum block, the line and the button (the awning stripes are gone: "those dont belong") ---------- */
.band { display: grid; place-items: center; justify-content: center; grid-template-columns: minmax(0, 760px); padding: 104px var(--gutter); background: var(--plum-deep); }
.band__card { display: grid; gap: 20px; justify-items: center; text-align: center; width: 100%; }
.band__label { color: var(--rose); }
.band__text { margin: 0 !important; font-size: clamp(36px, 4vw, 60px); line-height: .98; letter-spacing: -.02em; color: var(--page); max-width: none; }
.band__text em { display: block; margin-top: 14px; font-family: var(--sans); font-style: normal; font-size: 17px; line-height: 1.5; letter-spacing: 0; color: rgba(255,247,238,.74); }
.band .btn { margin: 0 !important; }
.band .btn--plum { background: var(--rose); color: var(--ink); }
.band .btn--plum:hover { background: var(--page); }

/* ---------- how it works ---------- */
.feature__title { font-size: clamp(40px, 3.9vw, 60px); line-height: .96; letter-spacing: -.02em; }
.feature__kicker { font-weight: 600; letter-spacing: .2em; }

/* ---------- house rules: a club charter on the deepest plum ---------- */
.rules { background: var(--plum-deep); color: var(--page); padding: 136px var(--gutter) 128px; }
.rules__inner { max-width: var(--w-wide); margin: 0 auto; display: grid; justify-items: center; text-align: center; gap: 20px; }
.rules__mascot { width: 128px; height: auto; margin-bottom: 8px; }
.rules__label { color: var(--rose); }
.rules__title { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 8vw, 132px); line-height: .9; letter-spacing: -.028em; }
.rules__title em { color: var(--rose); }
.rules__sub { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 28px); color: var(--butter); }
.rules__list { width: 100%; margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; text-align: left; }
.rules__list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; padding: 24px 0; border-top: 1px solid rgba(255,247,238,.22); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; }
.rules__list li:last-child { grid-column: 1 / -1; border-bottom: 1px solid rgba(255,247,238,.22); }
.rules__list span { font-family: var(--serif); font-style: italic; font-size: 1.45em; line-height: 1; color: var(--butter); }

/* ---------- who: cream, plum words, the photographs framed ---------- */
.who { background: #DCDAF8; color: var(--ink); }   /* soft periwinkle (Olga, 2026-10-19: "change yellow to something else"; was butter) */
.who .label { color: var(--plum); }
.who .h2 { font-size: clamp(42px, 4.6vw, 74px); line-height: .96; color: var(--ink); }
.who .h2 em { color: var(--plum); }
.who .body { color: var(--ink); opacity: 1; }
.collage img { border-radius: 0; box-shadow: 0 0 0 1px var(--ink), 0 0 0 8px #DCDAF8; }
.who__list { color: var(--plum-deep); }
.who__list li { border-color: rgba(59,33,64,.28) !important; }

/* ---------- the finale: the guest list on cream, the name as one huge capital lockup ---------- */
.perks b { font-size: 28px; }
.signup { border-radius: 0; box-shadow: 0 0 0 1px var(--ink); }
.signup .h3 { font-size: 34px; }
.signup__mascot { width: 86px; top: 22px; right: 24px; transform: rotate(6deg); }   /* the cream line mark lives inside the plum box: on the cream page it would vanish */
.bigmark { max-width: calc(var(--w-wide) + 2 * var(--gutter)); padding-top: 72px; }
.bigmark__word { font-family: var(--serif); font-size: clamp(64px, 15.6vw, 236px); line-height: .82; letter-spacing: .02em; text-transform: uppercase; color: var(--plum-deep); text-align: center; white-space: nowrap; }

/* ---------- phones ---------- */
@media (max-width: 1100px) {
  .bloom { width: min(100%, 380px); }
  .seal { left: -40px; bottom: 32px; width: 136px; }
}
@media (max-width: 760px) {
  :root { --h1: clamp(46px, 13vw, 66px); --h2: clamp(38px, 10.4vw, 54px); }
  .section { padding-top: 88px; padding-bottom: 88px; }
  .hero__sub { font-size: 16px; }
  .bloom { width: min(78%, 230px, 28vh); }
  .seal { left: -38px; bottom: 18px; width: 96px; }
  .seal__ring text { font-size: 12.5px; }
  .band { padding: 80px 18px; }
  .rules { padding: 96px 18px 88px; }
  .rules__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rules__list li { grid-template-columns: 48px minmax(0, 1fr); }
  .signup__mascot { width: 70px; top: 18px; right: 18px; }
  .who .h2 { font-size: clamp(36px, 9.6vw, 50px); }
  .bigmark { max-width: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  :root { --h1: clamp(40px, 11vw, 54px); }
  .bloom { width: min(70%, 190px, 24vh); }
}

/* ---------- the multicolours are back (Olga, 2026-10-19: "Bring back multicolours"): the pills, Make my class, the feature covers, chips,
   kickers, illustration shapes and hills and the numbered badges take their Bloom colours from styles.css and shot-shapes.css again
   (from 2026-10-17 to 2026-10-19 they were cream, plum and one accent). Kept from that round: no awning stripes ("those dont
   belong") and no colour sticker mascots in the label and the builder (the line marks stay). ---------- */
.label--mascot img, .builder__mascot { display: none; }
.section--plum, :is(.section--plum, .builder--plum) { background: var(--plum-deep); }
.input:focus { box-shadow: 0 0 0 3px rgba(243,166,198,.6); }   /* the pink ring, as on the live site */

/* the hero on top: it scrolls away with the page like a curtain and reveals the section under it (main.js); a soft shadow on its lower
   edge says it lies above (Olga, 2026-10-19: "hero reveals the second section") */
.hero { position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; z-index: 3; box-shadow: 0 24px 60px rgba(59,33,64,.14); }
.page { z-index: 1; box-shadow: none; }
.hero__dim { display: none; }
/* no cream gap during the reveal, whatever a browser measures (Olga, 2026-10-19: "make sure there is no gap while scrolling"): the space
   right under the hero is plum, the colour of the section it uncovers, as is the wrapper that holds that section in place */
.page::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; height: 100lvh; background: var(--plum-deep); pointer-events: none; }
.page > .pin-spacer { background: var(--plum-deep); }

/* the top bar that follows the scroll: solid cream, nothing shows through (Olga, 2026-10-19: "please remove translucency") */
.nav--floating { background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* the four "Why Sigh Club" covers in their colours again, still (Olga, 2026-10-19: "bring back colours remove twirl animation"): no moving
   wash (the canvases are gone from index.html), each cover a quiet light-to-deeper shade of its own colour, dark words, plum italics */
.card__cover::before { display: none; }
.card__cover--research { background: linear-gradient(135deg, #D2CFFB 0%, #A6A1F1 100%); }
.card__cover--music { background: linear-gradient(135deg, #F9CCDE 0%, #EF9CC0 100%); }
.card__cover--ideas, .card__cover--ideas[data-colour="butter"] { background: linear-gradient(135deg, #BDE6CC 0%, #85CBA0 100%); }
.card__cover--free { background: linear-gradient(135deg, #FCE4A4 0%, #F6C761 100%); }
#features .card__cover .h3 { color: var(--ink) !important; }
#features .card__cover .h3 em { color: var(--plum); }

/* ---------- the loader (first visit only, index.html): "Say Ahh…" on the cream paper, the letters fading away ---------- */
.ahh-loader { display: none; }
html.ahh-loading .ahh-loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--page); cursor: pointer;
  animation: ahh-failsafe .4s ease 4s forwards; }   /* if the script ever fails, the paper still lifts */
@keyframes ahh-failsafe { to { opacity: 0; visibility: hidden; } }
.ahh-loader__word { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(56px, 8.4vw, 120px); line-height: 1; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; opacity: 0; }
.ahh-loader__word span { display: inline-block; }

/* ---------- the logo and the tagline as one lockup (2026-10-18, Olga: "Use this logo but make it one horizontal line",
   "Sigh Club - Say Ahh... I think they should come together"): the traced logo, a hairline, "Say Ahh…" in the italic
   serif on the logo's baseline. Sized in em, so the loader's big lockup and the menu's small one are the same drawing. ---------- */
.lockup { display: inline-flex; align-items: baseline; gap: .42em; color: var(--ink); line-height: 1; white-space: nowrap; }
.lockup__mark { display: block; height: 1.3em; width: auto; }
.lockup__rule { display: block; align-self: center; width: 1px; height: .74em; background: currentColor; opacity: .35; transform: translateY(-.1em); }   /* centred on the letters, not on the g */
.lockup__tag { position: relative; top: -.382em; font-family: var(--serif); font-style: italic; font-size: .78em; color: var(--plum); }   /* flex lines it up with the logo's bottom edge; the g hangs 23% of the logo below the letters' baseline: .298em of the lockup = .382em of the tag */
.nav .lockup { font-size: 25px; }
.nav__logo img.lockup__mark { height: 1.3em; max-width: none; object-fit: fill; }   /* undo the old wordmark image rule */
@media (max-width: 760px) { .nav .lockup { font-size: 21px; } }   /* the menu shows the logo alone (Olga, 2026-10-18: "remove this" on the hairline and Say Ahh… beside it) */
@media (max-width: 400px) { .nav .lockup { font-size: 19px; } }
/* the giant mark above the footer: the logo, the tagline under it */
.bigmark { display: grid; justify-items: center; gap: 18px; }
.bigmark__logo { display: block; width: min(100%, 1120px); height: auto; }
.bigmark__tag { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3.2vw, 46px); line-height: 1; color: var(--plum); }


/* Who it's for, layout 2 (Olga, 2026-10-19): the room full height on the left, words, two small photos and the list on the right */
.who--bleed { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100vh; padding: 0; }
.who__room { background: url(/assets/img/photo-room-angle.jpg) 40% 60% / cover no-repeat; min-height: 100%; }
.who__side { display: grid; align-content: center; gap: 36px; padding: 96px clamp(24px, 5vw, 96px); }
.who--bleed .h2 { font-size: clamp(40px, 4.2vw, 68px); }
.who--bleed .body { margin-top: 20px; max-width: 520px; }
.who__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 520px; }
.who__pair img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; box-shadow: none; }
.who__pair img:first-child { object-position: 50% 20%; }
.who--bleed .who__list { max-width: 520px; margin: 0; }
@media (max-width: 860px) {
  .who--bleed { grid-template-columns: 1fr; min-height: 0; }
  .who__room { min-height: 62vh; }
  .who__side { padding: 56px 20px 72px; gap: 28px; }
}
/* the two small photos framed like the hero's photograph: square corners, a thin ink line (Olga, 2026-10-19: "match the style of smaller
   photos, no round corners"); the first one is no longer the hero's photo ("replace same photo that we have in the hero") */
.who__pair img { border-radius: 0 !important; box-shadow: 0 0 0 1px var(--ink) !important; }
.who__pair img:first-child { object-position: 50% 30%; }