/* נוכחים: site styles. Tokens follow design-v0 §7 (palette, type, space). */

@font-face { font-family: "Assistant"; font-weight: 400; font-display: swap; src: url("assets/fonts/assistant-hebrew-400-normal.woff2") format("woff2"); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-weight: 600; font-display: swap; src: url("assets/fonts/assistant-hebrew-600-normal.woff2") format("woff2"); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-weight: 700; font-display: swap; src: url("assets/fonts/assistant-hebrew-700-normal.woff2") format("woff2"); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-weight: 400; font-display: swap; src: url("assets/fonts/assistant-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Assistant"; font-weight: 600; font-display: swap; src: url("assets/fonts/assistant-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Assistant"; font-weight: 700; font-display: swap; src: url("assets/fonts/assistant-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Frank Ruhl Libre"; font-weight: 500; font-display: swap; src: url("assets/fonts/frank-ruhl-libre-hebrew-500-normal.woff2") format("woff2"); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: "Frank Ruhl Libre"; font-weight: 700; font-display: swap; src: url("assets/fonts/frank-ruhl-libre-hebrew-700-normal.woff2") format("woff2"); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: "Frank Ruhl Libre"; font-weight: 500; font-display: swap; src: url("assets/fonts/frank-ruhl-libre-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Frank Ruhl Libre"; font-weight: 700; font-display: swap; src: url("assets/fonts/frank-ruhl-libre-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Brand name and titles: M PLUS Rounded 1c (Google Fonts, SIL OFL), Hebrew subset incl. niqqud + Latin subset, self-hosted. */
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 700; font-display: swap; src: url("assets/fonts/m-plus-rounded-1c-hebrew-700-normal.woff2") format("woff2"); unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 700; font-display: swap; src: url("assets/fonts/m-plus-rounded-1c-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --paper: #f7f3ec;
  --card: #fffdf9;
  --ink: #2b2925;
  --muted: #625d55;
  --line: #e2dbcf;
  --sage: #6f8a72;
  --sage-ink: #4f6852;
  --sage-soft: #e6ece4;
  --clay: #b9684a;
  --clay-ink: #9a4f33;
  --clay-soft: #f4e4dc;
  --radius: 16px;
  --shadow: 0 1px 2px rgb(43 41 37 / 6%), 0 4px 16px rgb(43 41 37 / 5%);
  --serif: "Frank Ruhl Libre", "David", serif;
  --sans: "Assistant", system-ui, "Segoe UI", Arial, sans-serif;
  --brand-font: "M PLUS Rounded 1c", var(--sans);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1b19;
    --card: #252421;
    --ink: #ece7de;
    --muted: #b0a99e;
    --line: #3a3833;
    --sage: #9db79f;
    --sage-ink: #b4cbb5;
    --sage-soft: #2c3530;
    --clay: #e0947a;
    --clay-ink: #eaa991;
    --clay-soft: #3b2c26;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
}
h1, h2, h3 { font-family: var(--brand-font); font-weight: 700; line-height: 1.3; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 7vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 5vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--clay-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 8px; }

/* Header & nav */
/* The header stays at the top while scrolling (v1.1.13); anchors land below it. */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: var(--paper); }
html { scroll-padding-top: 72px; }
.site-header .inner { max-width: 1080px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { font-family: var(--brand-font); font-weight: 700; font-size: 1.5rem; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
/* Logo circle: the fill is ::after and a white echo is ::before (painted first, so it stays behind).
   Breathing is driven by main.js from one shared clock (v1.1.14): it sets --ms (circle scale),
   --es / --eo (echo scale / opacity) on .brand. The defaults are the resting state. */
.brand-mark { position: relative; width: 26px; height: 26px; transform: scale(var(--ms, 1.175)); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.brand-mark::after { border: 2px solid var(--sage); background: var(--sage-soft); }
.brand-mark::before { background: #fff; border: 1px solid color-mix(in srgb, var(--sage) 45%, transparent); opacity: var(--eo, 0); transform: scale(var(--es, 1)); }
.brand small { font-family: var(--sans); font-weight: 400; font-size: .8rem; color: var(--muted); }
.menu-toggle { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: 1rem; padding: 6px 0; display: inline-block; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--sage); }
@media (max-width: 760px) {
  .js .menu-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 50%; cursor: pointer; }
  .menu-toggle svg { width: 22px; height: 22px; fill: currentColor; grid-area: 1 / 1; }
  .menu-toggle .ic-x, .menu-toggle[aria-expanded="true"] .ic-menu { display: none; }
  .menu-toggle[aria-expanded="true"] .ic-x { display: block; }
  .js .site-nav { display: none; width: 100%; }
  .js .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
}

/* Layout */
main { display: block; }
.section { padding: 72px 16px; }
.section > .inner, .page > .inner { max-width: 820px; margin: 0 auto; }
.section.wide > .inner { max-width: 1080px; }
.section.alt { background: var(--card); border-block: 1px solid var(--line); }
.page { padding: 48px 16px 80px; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 60ch; }
.prose p, .prose li { max-width: 66ch; }
.eyebrow { font-size: .9rem; color: var(--sage-ink); font-weight: 600; letter-spacing: .02em; margin-bottom: .4em; }

/* Labels required by design-v0 §8 */
.tag { display: inline-block; font-family: var(--sans); font-size: .78rem; font-weight: 600; line-height: 1.2; padding: 3px 10px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.tag-tts, .tag-voice { background: var(--card); color: var(--muted); border: 1px solid var(--line); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 22px; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 1.05rem; text-decoration: none; cursor: pointer;
  border: 2px solid var(--sage-ink); background: var(--sage-ink); color: #fff;
}
@media (prefers-color-scheme: dark) { .btn { color: #1c1b19; } }
.btn:hover { filter: brightness(1.08); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { border-color: var(--sage); }
.btn[aria-disabled="true"], .btn:disabled { background: transparent; color: var(--muted); border: 2px dashed var(--line); cursor: not-allowed; filter: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--muted); }
.card .card-foot { margin-top: auto; padding-top: 12px; }
.callout { background: var(--sage-soft); border-inline-start: 4px solid var(--sage); border-radius: 10px; padding: 16px 20px; margin: 20px 0; }
.callout.warm { background: var(--clay-soft); border-color: var(--clay); }

/* Hero */
.hero { position: relative; overflow: hidden; min-height: min(88vh, 760px); display: grid; place-items: center; text-align: center; padding: 64px 16px 72px; isolation: isolate; }
.hero-bg { position: absolute; inset: -20%; z-index: -2; background:
  radial-gradient(40% 35% at 30% 30%, #f3dcc9 0%, transparent 70%),
  radial-gradient(45% 40% at 75% 60%, #dfe7d9 0%, transparent 70%),
  radial-gradient(50% 45% at 50% 100%, #efe3cf 0%, transparent 70%),
  var(--paper);
  animation: drift 20s ease-in-out infinite alternate; }
@media (prefers-color-scheme: dark) { .hero-bg { background:
  radial-gradient(40% 35% at 30% 30%, #3b2c26 0%, transparent 70%),
  radial-gradient(45% 40% at 75% 60%, #2c3530 0%, transparent 70%),
  var(--paper); } }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media video { opacity: 0; transition: opacity 1.5s ease; }
.hero-media video.ready { opacity: 1; }
/* paper-toned layer over the video so text stays readable (design-v0 §7) */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 75% at 50% 48%, color-mix(in srgb, var(--paper) 93%, transparent) 0%, color-mix(in srgb, var(--paper) 86%, transparent) 55%, color-mix(in srgb, var(--paper) 70%, transparent) 100%); }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
.hero .inner { max-width: 720px; }
.hero h1 { margin-bottom: 12px; }
.hero .lede { margin: 0 auto 28px; }
.hero-tag { position: absolute; bottom: 12px; inset-inline-start: 16px; }
/* Motion on/off: wavy lines; a slash through them when motion is paused (not play/pause, which belongs to audio). */
.motion-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.motion-toggle .ic-slash { display: none; stroke-width: 2; }
.paused .motion-toggle .ic-slash { display: inline; }
.motion-toggle .ic-gap { stroke: var(--card); stroke-width: 5; }
.motion-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; position: absolute; bottom: 12px; inset-inline-end: 16px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: .9rem; cursor: pointer; min-height: 40px; }
.paused .hero-bg { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .breath, .breath-label span { animation: none !important; }
  .breath-echo { display: none; }
  .motion-toggle { display: none; }
}

/* Breathing circle (design-v0 §7: 5s in, 5s out) */
.breath-wrap { display: grid; place-items: center; margin: 8px auto 24px; width: 180px; height: 180px; position: relative; }
/* Driven by main.js from the shared breathing clock (v1.1.14): --bs (circle scale), --es / --eo (echo),
   --la / --lb (the two labels' opacity), set on .breath-wrap. The defaults are the resting state. */
.breath { width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--sage); background: color-mix(in srgb, var(--sage-soft) 80%, transparent); transform: scale(var(--bs, 1.01)); }
/* White echo behind the circle: grows past it on the in-breath, fading from half to fully transparent. */
.breath, .breath-echo { grid-area: 1 / 1; }
.breath-echo { width: 120px; height: 120px; border-radius: 50%; background: #fff; border: 1px solid color-mix(in srgb, var(--sage) 45%, transparent); opacity: var(--eo, 0); transform: scale(var(--es, 1.01)); }
.breath-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: .95rem; color: var(--sage-ink); font-weight: 600; pointer-events: none; }
.breath-label span { grid-area: 1 / 1; opacity: var(--la, 1); }
.breath-label span + span { opacity: var(--lb, 0); }
@media (prefers-reduced-motion: reduce) { .breath-label span + span { display: none; } }

/* Countdown */
.countdown { display: flex; justify-content: center; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.countdown li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; min-width: 76px; padding: 8px 6px; }
.countdown b { display: block; font-family: var(--serif); font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown small { color: var(--muted); font-size: .85rem; }
.countdown-caption { color: var(--muted); font-size: .95rem; margin-top: -16px; margin-bottom: 24px; }
.countdown-caption a { color: inherit; }

/* Phones: keep the whole hero, both buttons included, in the first screen */
@media (max-width: 600px) {
  .hero { min-height: 0; padding: 24px 16px 60px; }
  .hero .eyebrow { margin-bottom: .2em; }
  .hero h1 { margin-bottom: 6px; }
  .hero .lede { font-size: 1.05rem; line-height: 1.55; margin-bottom: 10px; }
  .breath-wrap { width: 104px; height: 104px; margin: 4px auto 10px; }
  .breath, .breath-echo { width: 72px; height: 72px; }
  .breath-label { font-size: .8rem; }
  .countdown { gap: 8px; margin-bottom: 20px; }
  .countdown li { min-width: 62px; padding: 5px 4px; }
  .countdown b { font-size: 1.45rem; }
  .countdown small { font-size: .78rem; }
  .countdown-caption { font-size: .88rem; margin-top: -12px; margin-bottom: 14px; }
  .hero .btn-row { gap: 8px; }
  .hero .btn { min-height: 46px; padding: 8px 16px; font-size: 1rem; }
}
@media (max-width: 380px) {
  .hero .btn-row { flex-wrap: nowrap; gap: 6px; }
  .hero .btn { padding: 8px 11px; font-size: .9rem; gap: 5px; white-space: nowrap; }
  .hero .btn .play-ic svg { width: 16px; height: 16px; }
  .hero h1 { font-size: 1.85rem; }
}

/* Meditation cards (page content) */
.med-list { display: grid; gap: 20px; margin-top: 28px; }
.med-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); scroll-margin-top: 72px; transition: border-color .6s, box-shadow .6s; }
.med-card:target, .med-card.is-target { border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-soft); }
.med-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 8px; }
.med-head h2, .med-head h3 { margin: 0; font-size: 1.4rem; }
.med-head h3 a { color: inherit; text-decoration: none; }
.med-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.player-meta { color: var(--muted); font-size: .95rem; margin-bottom: 10px; }
.player-note { font-size: .9rem; color: var(--muted); margin: 10px 0 0; }
.btn .ic, .btn .play-ic svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn .play-ic { display: inline-flex; }
.btn.is-playing { background: var(--sage); border-color: var(--sage); }

/* Global player: bottom bar (player.js) */
.pbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: color-mix(in srgb, var(--card) 96%, transparent); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgb(43 41 37 / 8%); backdrop-filter: blur(8px); opacity: 0; transform: translateY(100%); transition: opacity .45s ease, transform .45s ease; padding-bottom: env(safe-area-inset-bottom); }
.pbar.show { opacity: 1; transform: none; }
.pbar-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 4px; padding: 6px 12px 8px; }
.pbar-info { flex: 1; min-width: 0; padding-inline: 8px; }
.pbar-title { display: flex; align-items: center; gap: 4px; max-width: 100%; font-family: var(--brand-font); font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.pbar-title .ptitle-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pfull-title { display: inline-flex; align-items: center; gap: 6px; }
.chev { flex: none; width: 18px; height: 18px; fill: currentColor; opacity: .7; transition: transform .3s ease; }
.pfull-title .chev { width: 22px; height: 22px; }
.on-med-page .chev { transform: rotate(180deg); }
.pbar-title:hover { text-decoration: underline; }
.pbar-meta { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pbar-voice { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfull-head { min-width: 0; }
.pfull-voice { font-size: .9rem; color: var(--muted); margin-top: 2px; }
.pseek { display: block; width: 100%; margin: 0; height: 18px; accent-color: var(--sage-ink); cursor: pointer; }
.pbar .pseek { height: 14px; margin-top: -7px; }
body.has-pbar { padding-bottom: 92px; }
.ibtn { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); cursor: pointer; padding: 0; }
.ibtn svg { width: 24px; height: 24px; fill: currentColor; }
.ibtn:hover { background: var(--sage-soft); }
.ibtn-main { background: var(--sage-ink); color: #fff; }
.ibtn-main:hover { background: var(--sage-ink); filter: brightness(1.1); }
@media (prefers-color-scheme: dark) { .ibtn-main { color: #1c1b19; } }
.ibtn-big { width: 72px; height: 72px; }
.ibtn-big svg { width: 34px; height: 34px; }
@media (max-width: 480px) { .pbar [data-p="back"] { display: none; } }
.ibtn-share { margin-inline-start: 6px; }
.ibtn-share svg { width: 22px; height: 22px; }

/* Global player: full-screen overlay */
.pfull { position: fixed; inset: 0; grid-template-columns: minmax(0, 1fr); z-index: 80; display: grid; grid-template-rows: auto 1fr auto; background: var(--paper); color: var(--ink); opacity: 0; transition: opacity .5s ease; overflow: hidden; isolation: isolate; }
.pfull.show { opacity: 1; }
html.pfull-open, html.pfull-open body { overflow: hidden; }
.pfull-bg { position: absolute; inset: -25%; z-index: -1; filter: blur(40px); }
.pfull-bg span { position: absolute; border-radius: 50%; width: 60vmax; height: 60vmax; opacity: .75; animation: pf-breathe 10s ease-in-out infinite; }
.pfull-bg span:nth-child(1) { background: #e6ece4; top: 10%; left: 5%; }
.pfull-bg span:nth-child(2) { background: #f4e4dc; bottom: 5%; right: 0; animation-delay: -3.3s; animation-duration: 13s; }
.pfull-bg span:nth-child(3) { background: #efe3cf; top: 35%; left: 35%; animation-delay: -6.6s; animation-duration: 16s; }
@media (prefers-color-scheme: dark) {
  .pfull-bg span:nth-child(1) { background: #2c3530; }
  .pfull-bg span:nth-child(2) { background: #3b2c26; }
  .pfull-bg span:nth-child(3) { background: #34302a; }
}
@keyframes pf-breathe { 0%, 100% { transform: scale(.8) translate(0, 0); } 50% { transform: scale(1.15) translate(4%, -3%); } }
.pfull-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; }
.pfull-title { font-family: var(--brand-font); font-weight: 700; font-size: 1.3rem; color: var(--ink); text-decoration: none; }
.pfull-title:hover { text-decoration: underline; }
.pfull-caption { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 0 24px; min-width: 0; }
.pfull-caption p { grid-area: 1 / 1; margin: 0; width: 100%; max-width: 30ch; overflow-wrap: anywhere; text-align: center; white-space: pre-line; font-family: var(--serif); font-size: clamp(1.4rem, 4.2vw, 2.3rem); line-height: 1.6; opacity: 0; transition: opacity 1.6s ease; }
.pfull-caption p.on { opacity: 1; }
.pfull-controls { width: min(560px, 100%); margin: 0 auto; padding: 0 20px calc(28px + env(safe-area-inset-bottom)); }
.pfull-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; position: relative; }
@media (max-width: 520px) { .pfull-row { gap: 6px; } .pfull-time { min-width: 0; } }
.pfull-time { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 84px; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .pfull-bg span { animation: none; }
  .pbar, .pfull, .pfull-caption p { transition-duration: .01s; }
}

/* Hero: secondary button stays legible on the light veil */
.hero .btn.secondary { background: color-mix(in srgb, var(--card) 85%, transparent); border-color: var(--line); }

/* End of a meditation: plan invitation and support lines together */
.pbar-end, .pfull-end { display: none; }
.pbar.ended .pbar-info, .pbar.ended [data-p="back"], .pbar.ended [data-p="expand"] { display: none; }
.pbar.ended .pbar-end { display: flex; flex: 1; align-items: center; gap: 14px; padding-inline: 8px; min-width: 0; }
.pbar-plan { display: none; min-height: 40px; padding: 6px 16px; font-size: .95rem; white-space: nowrap; }
.pbar.show-plan .pbar-plan { display: inline-flex; }
.pbar-help { color: var(--clay-ink); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.pfull.ended .pfull-end { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 24px 24px; text-align: center; }
.pfull-end a[data-p="help"] { color: var(--clay-ink); font-weight: 600; }
.pfull-plan { display: none; }
.pfull.show-plan .pfull-plan { display: inline-flex; min-height: 56px; padding: 12px 34px; font-size: 1.2rem; box-shadow: 0 6px 22px rgb(79 104 82 / 28%); }
.pfull { grid-template-rows: auto 1fr auto auto; }

/* Voting plan page */
.plan-teaser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.plan-teaser .lede { margin-bottom: 0; }
.plan-sub-first { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.plan-sub-note { color: var(--muted); font-size: .95rem; margin: -4px 0 16px; }
.page .plan { margin-top: 28px; }
/* Voting plan: sub-heading for the optional "moment" fields */
.plan-sub { font-size: 1.15rem; margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--sage-ink); }

/* Version line */
.site-footer .version { font-size: .85rem; }

details.script { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
details.script summary { cursor: pointer; color: var(--sage-ink); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
details.script .script-body { white-space: pre-line; font-size: 1rem; color: var(--muted); max-height: 360px; overflow: auto; padding-inline-end: 8px; }

/* Forms (voting plan) */
.plan { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .plan { grid-template-columns: 1fr 1fr; align-items: start; } }
.field { margin-bottom: 18px; border: 0; padding: 0; }
.field > label, .field legend { display: block; font-weight: 600; margin-bottom: 6px; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; }
.field input[type="text"], .field input[type="time"], .field select, .field textarea {
  width: 100%; min-height: 48px; font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--sage); outline-offset: 1px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; min-height: 44px; }
.choices input { accent-color: var(--sage-ink); }
.choices label:has(input:checked) { border-color: var(--sage); background: var(--sage-soft); }
.plan-card {
  border-radius: 20px; padding: 28px 24px; text-align: center;
  background: linear-gradient(160deg, var(--sage-soft), var(--clay-soft));
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.plan-card .pc-brand { font-family: var(--brand-font); color: var(--sage-ink); font-weight: 700; font-size: .95rem; }
.plan-card h3 { font-size: 1.6rem; margin: 6px 0 14px; }
.plan-card dl { margin: 0 auto 16px; display: grid; gap: 8px; max-width: 360px; }
.plan-card dt { font-size: .85rem; color: var(--muted); }
.plan-card dd { margin: 0 0 4px; font-family: var(--serif); font-size: 1.2rem; }
.plan-card .pc-foot { font-family: var(--serif); font-size: 1.1rem; margin: 0; }
.privacy-note { font-size: .9rem; color: var(--muted); }

/* Lists */
.circle-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.circle-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.circle-item h3 { font-size: 1.1rem; margin: 0; }
.circle-item p { margin: 0; color: var(--muted); font-size: .95rem; }
.circle-item .tag { grid-row: span 2; }
.timeline { list-style: none; padding: 0; margin: 0; border-inline-start: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 22px 22px; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: -8px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--sage); }
.timeline .when { font-weight: 700; display: block; }
.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 12px; }
.steps > li { counter-increment: s; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 16px 18px; padding-inline-start: 60px; position: relative; }
.steps > li::before { content: counter(s); position: absolute; inset-inline-start: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--sage-soft); color: var(--sage-ink); font-weight: 700; display: grid; place-items: center; }

.support { background: var(--sage-soft); }
.support ul { padding-inline-start: 1.2em; }
.support li { margin-bottom: 6px; }
.support a[href^="tel:"] { font-weight: 700; white-space: nowrap; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 36px 16px 48px; color: var(--muted); font-size: .95rem; }
.site-footer .inner { max-width: 1080px; margin: 0 auto; display: grid; gap: 10px; }
.site-footer a { color: var(--muted); }

/* Partner credit (v1.1.47, shown only with ?preview=educare). The logo files are transparent, with a
   dark-theme version (tech/tools/partner-logo.py), so they sit straight on the paper in both themes. */
.site-footer .partner a { color: var(--sage-ink); font-weight: 600; }
.site-footer .partner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.site-footer .partner[hidden] { display: none; }
.site-footer .partner a.has-logo { display: inline-flex; align-items: center; gap: 10px; }
.partner-logo { display: block; height: 64px; width: auto; }
.partner-card { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.partner-text { flex: 1 1 260px; }
.partner-text p { margin: 0 0 10px; }
.partner-card .partner-logo { height: 88px; }
.partner-logo-link:not(.has-logo) { font-weight: 600; }

.say-box { background: var(--card); border: 1px solid var(--line); border-inline-start: 4px solid var(--clay); border-radius: 10px; padding: 14px 18px; margin: 12px 0; line-height: 1.7; }
.steps > li ul { margin: 6px 0 0; padding-inline-start: 18px; }

/* Circle kit (v1.1): copy buttons, group image, hashtag */
.copy-btn { margin: 0 0 4px; }
.steps > li .say-box { margin: 10px 0; }
.group-image { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.group-image img { width: 120px; height: 120px; border-radius: 50%; border: 1px solid var(--line); display: block; }
.hashtag { white-space: nowrap; }

/* Memorial candle, 7–8 October (v1.1.16; main.js inserts it under the header). Still, no flicker. */
.memorial { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 16px; background: var(--card); border-bottom: 1px solid var(--line); color: var(--ink); font-size: .95rem; text-align: center; }
.memorial p { margin: 0; max-width: 62ch; }
.memorial a { color: var(--muted); white-space: nowrap; }
.memorial .candle { flex: none; width: 18px; height: 24px; }
.memorial .flame { fill: #e2a24f; }
.memorial .wick { fill: var(--ink); }
.memorial .body { fill: #fffdf9; stroke: var(--line); }
.memorial { position: relative; padding-inline-end: 52px; padding-inline-start: 52px; }
.memorial-close { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer; }
.memorial-close:hover { color: var(--ink); background: var(--sage-soft); }
.memorial-close:focus-visible { outline: 3px solid var(--sage); outline-offset: 1px; }
.memorial-close svg { width: 18px; height: 18px; fill: currentColor; }
.memorial[hidden] { display: none; }
@media print { .memorial { display: none; } }

/* Kit parts (v1.1.4): six foldable parts; closed, their titles read as the table of contents */
.parts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 36px; }
.parts-head h2 { margin: 0; }
.btn-link { background: none; border: 0; padding: 8px 4px; min-height: 44px; font: inherit; color: var(--sage-ink); text-decoration: underline; cursor: pointer; }
.parts { display: grid; gap: 10px; margin-top: 12px; }
details.part { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
details.part > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; min-height: 56px; border-radius: 14px; }
details.part > summary::-webkit-details-marker { display: none; }
details.part > summary::after { content: ""; margin-inline-start: auto; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
details.part[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
details.part > summary:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }
.part-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sage-soft); color: var(--sage-ink); font-weight: 700; display: grid; place-items: center; }
.part-t { display: grid; gap: 2px; }
.part-h { font-family: var(--brand-font); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.part-t small { color: var(--muted); font-size: .95rem; }
.part-body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.part-body > h3:first-of-type, .part-body > p:first-of-type { margin-top: 14px; }
.part-body h3 { font-size: 1.15rem; margin-top: 26px; }
.pdf-mark, .print-only { display: none; }
@media (prefers-reduced-motion: reduce) { details.part > summary::after { transition: none; } }

/* Brand line with the tagline, printed at the top of the kit (the header is hidden there in print) */
.print-brand { display: none; }
@media print {
  body:has(.print-brand) .site-header { display: none; }
  .print-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 6mm; font-family: var(--brand-font); color: var(--sage-ink); }
  .print-brand b { font-size: 20px; }
  .print-brand span:last-child { font-weight: 700; font-size: 15px; color: var(--muted); padding-inline-start: 10px; border-inline-start: 1px solid var(--line); }
  .print-brand .pb-mark { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--sage); background: var(--sage-soft); display: inline-block; }
}

/* Kit in print and in the PDF: all parts open (main.js opens them), table of contents, a new page per part */
@media print {
  .print-only { display: block; }
  .kit-toc { break-after: page; margin-top: 8mm; }
  .kit-toc ol { list-style: none; padding: 0; counter-reset: t; }
  .kit-toc li { counter-increment: t; display: flex; gap: 8px; align-items: baseline; padding: 2.4mm 0; border-bottom: 1px dotted var(--line); font-size: 14px; }
  .kit-toc li::before { content: counter(t) "."; color: var(--sage-ink); font-weight: 700; min-width: 1.4em; }
  .kit-toc li:has(.toc-t)::before { content: ""; }
  .kit-toc a, .kit-toc .toc-t { flex: 1; }
  .kit-toc .toc-page { color: var(--muted); }
  details.part { border: 0; background: none; margin-top: 8mm; }
  /* Keep a part's title with its first lines: the title block reserves 35mm and may not split,
     so a title near the bottom of a page moves to the next one. */
  details.part > summary { display: block; padding: 0; min-height: 0; margin-bottom: 4mm; break-inside: avoid; }
  details.part > summary::before { content: ""; display: block; height: 35mm; margin-bottom: -35mm; }
  details.part > summary .part-n { display: inline-grid; vertical-align: middle; margin-inline-end: 10px; }
  details.part > summary .part-t { display: inline-grid; vertical-align: middle; }
  details.part > summary::after { display: none; }
  .part-n { width: 28px; height: 28px; }
  .part-h { font-size: 22px; }
  .part-body { padding: 0; border: 0; }
  .pdf-mark { display: block; height: 0; overflow: visible; font-size: 6px; line-height: 0; color: #fff; direction: ltr; }
}

/* Print (and the kit PDF, tech/tools/make-assets.mjs): content only, light colours, A4.
   Site pages only: the printables (sign, guide) have their own sheet layout in print.css. */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  :root { --paper: #fff; --card: #fff; --ink: #2b2925; --muted: #625d55; --line: #e2dbcf; --sage: #6f8a72; --sage-ink: #4f6852; --sage-soft: #e6ece4; --clay: #b9684a; --clay-ink: #9a4f33; --clay-soft: #f4e4dc; color-scheme: light; }
  body:has(.site-header) { font-size: 12.5px; line-height: 1.5; padding-bottom: 0 !important; }
  .skip, .site-nav, .menu-toggle, .no-print, .copy-btn, .pbar, .pfull, .site-footer .version a { display: none !important; }
  .site-header { border: 0; }
  .site-header .inner { padding: 0 0 4mm; }
  .page, .section { padding: 0 !important; }
  .page .inner, .section .inner, .site-header .inner, .site-footer .inner { max-width: none; padding: 0; }
  .prose p, .prose li { max-width: none; }
  .prose h1 { font-size: 26px; }
  .prose h2 { font-size: 17px; margin-top: 7mm !important; break-after: avoid; }
  .steps > li, .say-box, .callout, .prose li, .support li { break-inside: avoid; }
  .support { background: none; border-top: 1px solid var(--line); margin-top: 6mm; padding-top: 4mm !important; }
  .site-footer { padding: 4mm 0 0; }
  .prose a, .support a, .site-footer a { color: inherit; text-decoration: none; }
}
.share-page { margin-top: 28px; }

/* Contact form (About, v1.1.10): Web3Forms, no address on the page */
.contact-form { margin-top: 16px; max-width: 560px; }
.field textarea { resize: vertical; line-height: 1.6; }
.contact-form .hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { margin: 12px 0 0; font-weight: 600; }
.topic-hint { margin: 10px 0 0; }
.form-status.ok { color: var(--sage-ink); }
.form-status.err { color: var(--clay-ink); }
.suggest-med { margin-top: 32px; }
.old-anchor { display: block; position: relative; top: -80px; }

/* Add to home screen: the quiet line (shares the memorial line's look) and the how-to text */
.a2hs .btn-link { min-height: 40px; padding: 4px 2px; }
.a2hs-how { margin: 0; color: var(--ink); }
.a2hs .a2hs-ic { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.memorial.a2hs { padding-inline-start: 12px; }
.a2hs-card { display: flex; gap: 20px; align-items: flex-start; margin: 36px 0 8px; padding: 22px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--sage-soft), var(--card)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.a2hs-card h2 { margin: 0 0 6px; font-size: 1.35rem; }
.a2hs-card p { margin: 0 0 14px; }
.a2hs-card .a2hs-how { margin: 12px 0 0; color: var(--muted); }
.a2hs-app { flex: none; display: grid; justify-items: center; gap: 6px; font-size: .8rem; color: var(--muted); }
.a2hs-app img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 4px 14px rgb(0 0 0 / .12); }
@media (max-width: 480px) { .a2hs-card { padding: 18px; gap: 14px; } .a2hs-card h2 { font-size: 1.15rem; } .a2hs-app img { width: 52px; height: 52px; border-radius: 13px; } }
@media print { .a2hs-card { display: none; } }

/* End of a meditation: a breathing circle for someone already committed (calendar or home screen) */
.pbar-circle, .pfull-circle, .pfull-circle-lead { display: none; }
.pbar-circle { min-height: 40px; padding: 6px 16px; font-size: .95rem; white-space: nowrap; }
.pbar.show-circle .pbar-circle { display: inline-flex; }
.pfull.show-circle .pfull-circle-lead { display: block; margin: 0; }
.pfull.show-circle .pfull-circle { display: inline-flex; min-height: 56px; padding: 12px 34px; font-size: 1.2rem; box-shadow: 0 6px 22px rgb(79 104 82 / 28%); }
/* After the plan card: one step at a time (calendar, then share) */
.plan-next { margin-top: 18px; }
.plan-step { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.plan-step-alt { margin: 0; }
.plan-step-done { margin: 0; color: var(--sage-ink); font-weight: 600; }
@media print { .plan-next { display: none; } }

/* Plan page, arriving from a shared plan */
.from-share { margin: 0 0 24px; padding: 16px 20px; border-radius: 12px; background: var(--sage-soft); border-inline-start: 4px solid var(--sage); }
.from-share p { margin: 0 0 6px; }
.from-share p:last-child { margin: 0; }