/* shir.earth, next look: "Signal, with elements of Plakat". Second pass, Nov 8, 2026.
   Loads after style.css and restyles it. Fonts are self-hosted from /fonts/fonts.css (all SIL Open Font License).
   Roles:
     Poltawski Nowy ........ page titles, the brand, quotes (italic), the footer heading
     Space Grotesk ......... interface, section headings, subheads
     Hedvig Letters Serif .. reading
     Space Mono ............ labels, dates, durations
     Bricolage Grotesque ... album sleeves and number call-outs only (never titles)
     Karantina ............. short Hebrew only; longer Hebrew is Noto Sans Hebrew or Frank Ruhl Libre
   Colour: warm sand ground; lighter charcoal; yellows only ever sit with blue, never with black.
   Sections are told apart by colour and space, not by black rules. */

:root {
  --sand: #e9dbc3; --sand-2: #f4eadb; --sand-3: #dfcdb0;
  --cream: var(--sand); --cream-2: var(--sand-2);
  --ink: #262523; --ink-soft: #463f37; --muted: #5d554b; --line: rgba(70, 52, 30, .2);
  --charcoal: #3e3f39; --on-charcoal: #efe4d1;
  --blue: #34669b; --blue-deep: #1f4a78; --sky: #3E78BE;
  --teal: #7ab5b1; --teal-pale: #a9d6d2; --butter: #edd285;
  --red: #C4553A; --red-deep: #a8442c; --green: #2E7D4A; --ochre: #C2A53A; --purple: #8C7FA6; --purple-deep: #6c5f88;
  --sec: var(--blue);
  --font: 'Hedvig Letters Serif Variable', Georgia, serif;
  --ui: 'Space Grotesk Variable', 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, Menlo, monospace;
  --poster: 'Bricolage Grotesque Variable', 'Space Grotesk Variable', sans-serif;
  --serif-poster: 'Poltawski Nowy Variable', Georgia, serif;
  --he-sans: 'Noto Sans Hebrew Variable', 'Space Grotesk Variable', sans-serif;
  --he: 'Frank Ruhl Libre Variable', 'Noto Sans Hebrew Variable', serif;
  --he-poster: 'Karantina', 'Noto Sans Hebrew Variable', sans-serif;
  --wrap: 1180px; --wide: 1340px;
  --stripe: linear-gradient(90deg, var(--blue) 0 16.66%, var(--green) 0 33.33%, var(--red) 0 50%, var(--teal) 0 66.66%, var(--purple) 0 83.33%, var(--ochre) 0);
  --soft-rule: 1px solid var(--line);
  /* type roles: the style page and edit mode change these */
  --f-title: var(--serif-poster); --s-title: clamp(54px, 7.6vw, 116px);
  --f-heading: var(--ui); --s-heading: clamp(36px, 4vw, 54px);
  --f-body: var(--font); --s-body: 19px;
  --f-quote: var(--serif-poster);
  --f-label: var(--mono);
  --f-number: var(--poster);
  --f-he-short: var(--he-poster);
  --space-section: clamp(56px, 8vw, 112px);
}
body.sec-work { --sec: var(--blue); }
body.sec-projects { --sec: var(--green); }
body.sec-music { --sec: var(--red-deep); }
body.sec-writing { --sec: var(--purple-deep); }
body.sec-events { --sec: var(--blue); }

body { background: var(--sand); color: var(--ink); font: 400 var(--s-body)/1.62 var(--f-body); }
a { color: var(--blue-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue); }
h1, h2, h3, h4 { font-family: var(--ui); font-weight: 500; letter-spacing: -.025em; }
::selection { background: var(--teal-pale); }

.n-mono, .date, .k, .eyebrow, .toc-label, .tag, .past .m, .ev-card .when, .launch .k, .card .k, .subscribe .k { font-family: var(--f-label) !important; letter-spacing: .02em; }
.btn, .pill, .nav, .chips a, .toc a, .kinds button, .poem-tools button, .yearbar a, .card .go, .ceremony .go, details.fold summary, .catalog, .catalog-tools input, .catalog-tools select, figcaption, .feature-card h3, .posts strong { font-family: var(--ui); }

/* ---- top bar: one piece with the page header ---- */
.topbar { position: relative; color: var(--ink); background: var(--sand-2); padding-top: 26px; padding-bottom: 14px; }
.topbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--stripe); }
.brand img { width: 46px; }
.brand span { font-family: var(--f-title); font-weight: 500; font-size: 25px; letter-spacing: -.01em; line-height: 1; }
.nav a { color: var(--ink); font-size: 16px; font-weight: 500; }
.nav > ul > li > a { display: inline-flex; align-items: center; gap: 8px; }
.nav > ul > li:nth-child(-n+3) > a::before { content: ""; width: 16px; height: 6px; border-radius: 3px; background: var(--c, var(--blue)); }
.nav > ul > li:nth-child(1) { --c: var(--blue); }
.nav > ul > li:nth-child(2) { --c: var(--green); }
.nav > ul > li:nth-child(3) { --c: var(--red); }
.nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--sec); }
.has-sub > a::after { opacity: .6; }
.sub { background: var(--sand-2); border: 0; border-radius: 8px; box-shadow: 0 12px 32px rgba(60, 45, 30, .18); }
.sub a { font-size: 15px; }
.sub a:hover { background: var(--sand); }
.tag { border-color: var(--line); color: var(--muted); font-size: 10px; }
.pill { background: var(--blue); border-color: var(--blue); color: #fff; border-radius: 6px; font-weight: 600; padding: 11px 20px; }
.pill:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.nav-btn span, .nav-btn span::before, .nav-btn span::after { background: var(--ink); }
@media (max-width: 960px) {
  .nav { background: var(--sand); border: 0; border-radius: 8px; box-shadow: 0 12px 32px rgba(60, 45, 30, .18); }
  .brand span { display: inline; font-size: 22px; }
}

/* ---- page header ---- */
.hero { color: var(--ink); background: var(--sand-2); padding: clamp(28px, 4vw, 52px) var(--gutter) clamp(48px, 6vw, 80px); overflow: hidden; }
.hero::before { display: none; }
.hero::after { content: ""; position: absolute; width: clamp(150px, 24vw, 340px); aspect-ratio: 1; right: clamp(-90px, -4vw, -30px); top: 50%; transform: translateY(-50%); border-radius: 50%; background: url(/img/hero.jpg) center/cover; }
.hero-in { z-index: 1; max-width: var(--wide); padding-right: clamp(0px, 18vw, 300px); }
.hero .wave, .band-s .wave-top, .foot .wave { display: none; }
.hero .eyebrow { font-size: 13px; letter-spacing: .04em; opacity: 1; color: var(--sec); font-weight: 700; }
.hero .eyebrow a { color: inherit; }
/* page titles: Poltawski */
.hero h1, .n-title { font-family: var(--f-title); font-weight: 500; font-stretch: normal; text-transform: none; letter-spacing: -.02em; line-height: .96; font-size: var(--s-title); margin: .14em 0 .26em; max-width: 13em; }
.n-title { margin: 0; }
.hero h1 em, .n-title em { font-style: italic; font-weight: 500; color: var(--sec); }
.hero h1 .he { font-family: var(--f-he-short); font-weight: 700; font-size: .78em; opacity: 1; color: var(--sec); margin-left: .25em; letter-spacing: 0; }
.hero .lede { font-size: clamp(20px, 2vw, 25px); line-height: 1.4; opacity: 1; color: var(--ink-soft); }
.hero .lede a { color: var(--blue-deep); }
.hero .tagline { font-family: var(--serif-poster); font-style: italic; }
.hero .status { border-color: var(--ink-soft); font-family: var(--mono); color: var(--ink); }
.hero .btn-light { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.hero .btn-light:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.hero.has-video { color: #fff; background: var(--charcoal); }
.hero.has-video::before { display: block; }
.hero.has-video::after { display: none; }
.hero.has-video .lede, .hero.has-video .eyebrow, .hero.has-video h1 em { color: #fff; }
.hero.has-video .btn-light { background: transparent; border-color: #fff; color: #fff; }

/* ---- reading ---- */
.prose { max-width: 780px; }
.prose h2 { font-family: var(--f-heading); font-weight: 500; font-size: calc(var(--s-heading) * .86); line-height: 1.02; letter-spacing: -.035em; }
.prose h3 { font-family: var(--f-heading); font-weight: 500; font-size: 24px; letter-spacing: -.02em; }
.prose h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--sec); }
.prose p.lead { font-family: var(--ui); font-weight: 400; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.32; letter-spacing: -.015em; color: var(--ink); }
.prose em, .prose i, .lede em { font-family: var(--serif-poster); font-style: italic; font-size: 1.04em; }
.prose blockquote { border-left: 0; padding: 0; margin: 1.6em 0; font-family: var(--f-quote); font-style: italic; font-size: 27px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.prose hr { border-top: var(--soft-rule); }
.prose figure.inset img { border-radius: 6px; box-shadow: none; }
.prose figure.inset figcaption { font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: .01em; }
.draft-note { background: var(--sand-2); border-color: var(--ochre); }
[dir=rtl], .he { font-family: var(--he); }
:lang(he), .he-sans { font-family: var(--he-sans); }

/* ---- bands: colour and space, no rules ---- */
.band-s { border: 0; }
.tone-cream { --bg: var(--sand); }
.tone-butter { --bg: var(--butter); --fg: var(--blue-deep); }
.tone-butter a { color: var(--blue-deep); }
.tone-butter .btn { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.tone-butter h4, .tone-butter .date, .tone-butter p.lead, .tone-butter blockquote, .tone-butter figure.inset figcaption { color: var(--blue-deep); }
.tone-charcoal { --bg: var(--charcoal); --fg: var(--on-charcoal); }
.tone-charcoal a { color: var(--teal-pale); }
.tone-charcoal .btn { background: var(--teal); border-color: var(--teal); color: var(--ink); }
.tone-charcoal blockquote, .tone-charcoal details.fold summary::after { color: var(--on-charcoal); border-color: var(--teal); }
.tone-charcoal h4 { color: var(--teal-pale); }
.tone-blue a { color: var(--butter); }
.tone-blue .btn { background: var(--butter); border-color: var(--butter); color: var(--blue-deep); }
.tone-blue h4 { color: var(--butter); }
.tone-blue blockquote { color: #fff; }
.tone-teal h4 { color: var(--ink); }
.band-teal .card, .tone-teal .feature-card, .tone-teal .quote { background: var(--sand-2); }
.tone-butter .feature-card, .tone-butter .quote { background: rgba(255,255,255,.45); color: var(--blue-deep); }
.tone-blue details.fold summary::after { color: var(--butter); }

/* ---- buttons, chips ---- */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 6px; font-weight: 600; font-size: 16px; border-width: 2px; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.btn-small { min-height: 40px; padding: 0 14px; }
.chips a, .yearbar a, .kinds button, .poem-tools button { border-radius: 6px; border: 1.5px solid var(--ink-soft); background: transparent; color: var(--ink); }
.kinds button[aria-pressed=true], .poem-tools button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.badge-he { background: var(--butter); color: var(--blue-deep); font-family: var(--he-sans); }

/* ---- cards ---- */
.card, .feature-card, .quote, .ev-card, .poem-list a, .ceremony, .launch, .carousel-people .slide, .prose ul.people li { border-radius: 6px; }
.card { background: var(--sand-2); padding-top: 30px; border: 0; }
.card::before { height: 8px; }
.card h3 { font-family: var(--ui); font-weight: 500; font-size: 28px; letter-spacing: -.03em; }
.card .k { color: var(--c, var(--sec)); font-size: 12px; }
.card:hover { transform: none; box-shadow: 0 10px 28px rgba(60, 45, 30, .14); }
.card-wip { border: 1.5px dashed var(--ink-soft); }
.ceremony h3, .ev-card h3, .feature-card h3 { font-family: var(--ui); font-weight: 500; letter-spacing: -.02em; }
.ceremony { background: var(--sand-2); }
.ceremony:hover { transform: none; box-shadow: 0 10px 28px rgba(60, 45, 30, .14); }
.ev-card { background: var(--sand-2); border-top-width: 8px; }
.launch { border: 0; border-top: 8px solid var(--c); background: var(--sand-2); }
.quote { background: var(--sand-2); }
.quote .q { font-family: var(--f-quote); font-style: italic; font-weight: 500; font-size: 26px; letter-spacing: -.01em; line-height: 1.2; }
.quote figcaption { font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.carousel-photos .slide img, .carousel-screens .slide img, .yt { border-radius: 6px; }
.cprev, .cnext { border-radius: 6px; border: 0; background: var(--sand-2); box-shadow: 0 4px 16px rgba(60, 45, 30, .18); }
.dots button[aria-current=true] { background: var(--ink); }
.posts li { border-color: var(--line); }
.posts li:last-child { border-bottom: var(--soft-rule); }
.posts strong { font-weight: 500; font-size: 23px; letter-spacing: -.02em; }
.past li { border-color: var(--line); }
.past h3 { font-family: var(--f-number); font-weight: 800; font-stretch: 75%; font-size: 40px; line-height: .9; color: var(--sec); letter-spacing: 0; }
.toc { background: color-mix(in srgb, var(--sand) 92%, transparent); border: 0; box-shadow: 0 6px 18px rgba(60, 45, 30, .08); }
.toc a { border-radius: 6px; color: var(--ink); }
.toc a[aria-current] { background: var(--ink); color: var(--sand); }
.toc-label { color: var(--sec); }
.catalog th { font-family: var(--mono); font-size: 12px; text-transform: uppercase; border-bottom: 1.5px solid var(--ink-soft); }
.catalog td { border-color: var(--line); }
.catalog-tools input, .catalog-tools select { border: 1.5px solid var(--ink-soft); border-radius: 6px; background: var(--sand-2); }
details.fold { border-color: var(--line); }
details.fold summary { font-weight: 500; letter-spacing: -.01em; }
.subscribe { border-radius: 6px; }
.subscribe .btn { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

/* ---- footer (the model for the rest) ---- */
.foot { background: var(--blue); padding-top: 0; }
.foot::before { content: ""; display: block; height: 8px; margin: 0 calc(-1 * var(--gutter)) 64px; background: var(--stripe); }
.foot h2 { font-family: var(--f-title); font-style: italic; font-weight: 500; font-size: clamp(44px, 6vw, 84px); line-height: .95; letter-spacing: -.02em; }
.foot .btn { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.foot .btn-ghost { background: transparent; color: #fff; border-color: #fff; }
.foot .btn-ghost:hover { background: #fff; color: var(--blue-deep); }

/* =========================================================
   New page parts (home, albums, recordings)
   ========================================================= */
.n-wrap { max-width: var(--wide); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.n-poster { font-family: var(--f-number); font-weight: 800; font-stretch: 75%; text-transform: uppercase; line-height: .82; letter-spacing: -.025em; }
.n-serif { font-family: var(--serif-poster); font-weight: 500; line-height: .98; letter-spacing: -.02em; }
.n-h2 { font-family: var(--f-heading); font-weight: 500; font-size: var(--s-heading); line-height: 1; letter-spacing: -.035em; margin: 0; }
.n-ui { font-family: var(--ui); }
.n-mono { font-size: 13px; text-transform: uppercase; }
.n-he { font-family: var(--f-he-short); font-weight: 700; line-height: .85; }
.n-he-text { font-family: var(--he-sans); }
.n-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 6px; font-family: var(--ui); font-weight: 600; font-size: 17px; text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.n-btn.n-btn-ink { background: var(--ink); color: var(--sand); } .n-btn.n-btn-ink:hover { background: var(--blue-deep); color: #fff; }
.n-btn.n-btn-blue { background: var(--blue); color: #fff; } .n-btn.n-btn-blue:hover { background: var(--blue-deep); }
.n-btn.n-btn-sand { background: var(--sand); color: var(--ink); }
.n-btn.n-btn-line { border-color: currentColor; color: inherit; background: transparent; }
.n-section { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.n-split { display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 6vw, 88px); }
.n-split > * { flex: 1 1 360px; min-width: 0; }
.n-split > .n-grow { flex: 1.5 1 480px; }
.n-body p { margin: 0 0 1em; }
.n-field-blue { background: var(--blue); color: #fff; }
.n-field-sky { background: var(--sky); color: #fff; }
.n-field-butter { background: var(--butter); color: var(--blue-deep); }
.n-field-teal { background: var(--teal); color: var(--ink); }
.n-field-charcoal { background: var(--charcoal); color: var(--on-charcoal); }
.n-field-green { background: var(--green); color: #fff; }
.n-field-red { background: var(--red); color: #fff; }
.n-field-purple { background: var(--purple); color: #fff; }
.n-field-sand2 { background: var(--sand-2); }
.n-field-blue a, .n-field-sky a, .n-field-green a, .n-field-red a { color: #fff; }
.n-field-charcoal a { color: var(--teal-pale); }
.n-field-butter a { color: var(--blue-deep); }
.n-stripe { height: 8px; background: var(--stripe); }
/* rules inside content are soft, and follow the text colour on coloured fields */
.n-soft { border-color: color-mix(in srgb, currentColor 22%, transparent) !important; }

/* home header */
.n-hero { position: relative; overflow: hidden; background: var(--sand-2); }
.n-hero .n-lede { font-size: clamp(21px, 2.1vw, 26px); line-height: 1.4; max-width: 30ch; margin: 0; color: var(--ink-soft); }
.n-art { position: relative; display: flex; justify-content: center; }
.n-art img.circle { width: 100%; max-width: 480px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block; }
.n-art .dot { position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--blue); mix-blend-mode: multiply; right: 6%; bottom: -2%; }

/* the line map */
.n-map { display: flex; flex-direction: column; }
.n-line { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-start; padding: 24px 0; border-top: var(--soft-rule); }
.n-line:last-child { border-bottom: var(--soft-rule); }
.n-line-name { flex: 0 0 220px; display: flex; flex-direction: column; gap: 4px; color: var(--c); text-decoration: none; }
.n-line-title { font-family: var(--f-heading); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.n-line-name:hover .n-line-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.n-stops { flex: 1 1 560px; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 22px; font-family: var(--ui); font-size: 16px; font-weight: 500; }
.n-stops li { flex: 1 1 120px; display: flex; flex-direction: column; gap: 10px; }
.n-stops .mark { position: relative; height: 22px; }
.n-stops .mark::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 8px; background: var(--c); }
.n-stops li:last-child .mark::before { display: none; }
.n-stops .mark::after { content: ""; position: absolute; left: 0; width: 22px; height: 22px; border-radius: 50%; border: 5px solid var(--s, var(--c)); background: var(--sand); box-sizing: border-box; }
.n-stops li.dash .mark::before { background: repeating-linear-gradient(90deg, var(--c) 0 14px, transparent 14px 22px); }
.n-stops li.end .mark::after { background: var(--c); }
.n-stops a { color: var(--ink); text-decoration: none; padding-right: 12px; }
.n-stops a:hover { color: var(--c); text-decoration: underline; }
.n-stops small { font-family: var(--mono); font-size: 11px; font-weight: 400; text-transform: uppercase; color: var(--muted); }

/* quotes: Poltawski italic on fields of colour */
.n-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.n-quotes figure { margin: 0; padding: 44px 40px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.n-quotes blockquote { margin: 0; font-family: var(--f-quote); font-style: italic; font-weight: 500; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -.015em; }
.n-quotes figcaption { font-family: var(--mono); font-size: 13px; text-transform: uppercase; }

/* lists */
.n-list { list-style: none; margin: 0; padding: 0; }
.n-list > li { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: baseline; padding: 18px 0; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.n-list > li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.n-list .when { flex: 0 0 100px; font-family: var(--mono); font-size: 13px; }
.n-list .what { flex: 1 1 300px; font-family: var(--ui); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; color: inherit; text-decoration: none; }
.n-list a.what:hover { text-decoration: underline; }
.n-ev { display: flex; gap: 22px; align-items: flex-start; padding: 20px 0; border-top: var(--soft-rule); }
.n-ev:last-child { border-bottom: var(--soft-rule); }
.n-ev .d { flex: 0 0 auto; display: flex; flex-direction: column; color: var(--c); }
.n-ev .d b { font-size: 56px; } .n-ev .d span { font-size: 22px; }
.n-ev .t { display: flex; flex-direction: column; gap: 4px; }
.n-ev .t a { font-family: var(--ui); font-weight: 500; font-size: 23px; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.n-ev .t a:hover { text-decoration: underline; }
.n-ev .t span { font-size: 16px; line-height: 1.4; color: var(--ink-soft); }

/* ---- albums ---- */
.n-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--ui); font-size: 15px; font-weight: 500; }
.n-legend li { display: flex; align-items: center; gap: 8px; }
.n-legend li::before { content: ""; width: 26px; height: 8px; border-radius: 4px; background: var(--c); }
.n-legend a { color: var(--ink); }
.n-group-head { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; padding: 0 0 22px; margin-bottom: 8px; }
.n-group-head h2 { margin: 0; display: flex; align-items: center; gap: 14px; font-family: var(--f-heading); font-weight: 500; font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -.03em; }
.n-group-head h2::before { content: ""; width: 34px; height: 10px; border-radius: 5px; background: var(--c); }
.n-group-head p { margin: 0; font-size: 17px; max-width: 54ch; }
.n-sleeves { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 36px 24px; }
.n-album { display: flex; flex-direction: column; gap: 12px; }
.n-album h3 { margin: 0; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-family: var(--ui); font-weight: 500; font-size: 26px; letter-spacing: -.02em; }
.n-album h3 span { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.n-album .note { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-soft); }
.n-album .links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--ui); font-size: 15px; font-weight: 600; }
.n-album details { font-family: var(--ui); font-size: 15px; }
.n-album summary { cursor: pointer; font-family: var(--mono); font-size: 12px; text-transform: uppercase; padding: 6px 0; }
.n-album ol { margin: 6px 0 0; padding-left: 1.6em; line-height: 1.5; }
/* the flip: typographic sleeve on the front, the real cover on the back */
.flip { position: relative; perspective: 1400px; display: block; aspect-ratio: 1; text-decoration: none; }
.flip-in { position: absolute; inset: 0; transition: transform .75s cubic-bezier(.3, .7, .2, 1); transform-style: preserve-3d; }
.flip:hover .flip-in, .flip:focus-visible .flip-in, .flip.flipped .flip-in { transform: rotateY(180deg); }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; overflow: hidden; }
.flip .cover { transform: rotateY(180deg); padding: 0; background: var(--ink); }
.flip .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip .front .top { font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.flip .front .big-he { font-family: var(--f-he-short); font-weight: 700; font-size: clamp(150px, 15vw, 220px); line-height: .72; align-self: flex-end; }
.flip .front .big-title { font-family: var(--f-number); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(54px, 5.2vw, 72px); line-height: .84; letter-spacing: -.02em; }
.flip:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .flip-in { transition: none; transform: none !important; }
  .flip .cover { transform: none; opacity: 0; transition: opacity .3s; }
  .flip:hover .cover, .flip:focus-visible .cover, .flip.flipped .cover { opacity: 1; }
}
.n-books { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.n-books a { display: flex; flex-direction: column; gap: 8px; padding: 20px; color: inherit; text-decoration: none; background: rgba(255, 255, 255, .12); border-radius: 6px; }
.n-books a:hover { background: rgba(255, 255, 255, .22); }
.n-books .n-he { font-size: 64px; text-align: right; }
.n-books b { font-family: var(--ui); font-weight: 500; font-size: 22px; }

/* ---- recordings ---- */
.n-stats { display: flex; gap: 36px; margin: 0; }
.n-stats div { display: flex; flex-direction: column-reverse; gap: 4px; }
.n-stats dd { margin: 0; font-size: clamp(84px, 9vw, 120px); }
.n-stats dt { font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.n-tools { position: sticky; top: 0; z-index: 12; background: var(--charcoal); color: var(--on-charcoal); }
.n-tools .n-wrap { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; padding-top: 18px; padding-bottom: 18px; }
.n-tools label { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.n-tools input[type=search] { min-height: 46px; padding: 0 14px; border: 1.5px solid rgba(239, 228, 209, .6); border-radius: 6px; background: transparent; color: var(--on-charcoal); font: 500 17px var(--ui); }
.n-tools input::placeholder { color: rgba(239, 228, 209, .6); }
.n-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.n-kinds button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1.5px solid rgba(239, 228, 209, .4); border-radius: 6px; background: transparent; color: var(--on-charcoal); font: 700 12px var(--mono); text-transform: uppercase; cursor: pointer; }
.n-kinds button::before { content: ""; width: 18px; height: 6px; border-radius: 3px; background: var(--c); }
.n-kinds button[aria-pressed=true] { background: var(--on-charcoal); color: var(--ink); border-color: var(--on-charcoal); }
.n-count { font-family: var(--mono); font-size: 12px; text-transform: uppercase; margin-left: auto; align-self: center; }
.n-prayers { list-style: none; margin: 0; padding: 0; }
.n-prayer { border-top: var(--soft-rule); }
.n-prayers > li:last-child .n-prayer { border-bottom: var(--soft-rule); }
.n-prayer summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding: 16px 0; }
.n-prayer summary::-webkit-details-marker { display: none; }
.n-prayer summary:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.n-prayer .name { flex: 1 1 300px; display: flex; flex-wrap: wrap; gap: 0 16px; align-items: baseline; }
.n-prayer .name b { font-family: var(--ui); font-weight: 500; font-size: 26px; letter-spacing: -.02em; }
.n-prayer .name .n-he { font-size: 36px; color: var(--green); }
.n-prayer .mel { flex: 1 1 260px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.n-prayer .dots { flex: 0 0 170px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 0; justify-content: flex-start; }
.n-prayer .dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.n-prayer .dots span { margin-left: 6px; font-family: var(--mono); font-size: 12px; }
.n-prayer .tog { width: 44px; height: 44px; border: 1.5px solid var(--ink-soft); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 500 20px var(--ui); }
.n-prayer .tog::after { content: "+"; }
.n-prayer[open] .tog { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.n-prayer[open] .tog::after { content: "–"; }
.n-versions { position: relative; padding: 30px 0 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.n-versions::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 8px; border-radius: 4px; background: var(--c, var(--green)); }
.n-ver { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--sand-2); border-radius: 6px; }
.n-ver::before { content: ""; position: absolute; top: -30px; left: 18px; width: 26px; height: 26px; border-radius: 50%; border: 6px solid var(--c, var(--green)); background: var(--sand); box-sizing: border-box; }
.n-ver .yr { font-family: var(--f-number); font-weight: 800; font-stretch: 75%; font-size: 40px; line-height: .85; color: var(--c, var(--green)); text-transform: uppercase; }
.n-ver .mel2 { font-family: var(--ui); font-weight: 500; font-size: 19px; line-height: 1.2; }
.n-ver .src { font-family: var(--mono); font-size: 11px; line-height: 1.5; }
.n-ver .row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: auto; font-family: var(--ui); font-size: 14px; font-weight: 600; }
.n-ver .cats { display: flex; flex-wrap: wrap; gap: 4px; }
.n-ver .cats span { font-family: var(--mono); font-size: 10px; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; border: 1.5px solid var(--cc); color: var(--ink); }
.n-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); color: var(--sand); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.n-play[aria-pressed=true] { background: var(--green); color: #fff; }
.n-player { position: fixed; left: 16px; bottom: 16px; z-index: 45; display: none; align-items: center; gap: 14px; max-width: min(640px, calc(100vw - 32px)); padding: 10px 14px; background: var(--ink); color: var(--sand); border-radius: 8px; font-family: var(--ui); }
.n-player.on { display: flex; }
.n-player b { font-weight: 500; }
.n-player small { font-family: var(--mono); font-size: 11px; opacity: .85; }
.n-player audio { height: 36px; max-width: 260px; }
.n-bars { display: flex; flex-direction: column; gap: 10px; font-family: var(--ui); font-size: 16px; font-weight: 500; }
.n-bars div { display: flex; align-items: center; gap: 14px; }
.n-bars .l { flex: 0 0 96px; }
.n-bars .b { flex: 1; }
.n-bars .b i { display: block; height: 12px; border-radius: 6px; background: var(--c); }
.n-bars .v { flex: 0 0 34px; text-align: right; font-family: var(--mono); font-size: 13px; }
.n-empty { padding: 40px 0; font-family: var(--ui); font-size: 20px; display: none; }
/* a closing call-out in the footer's manner */
.n-callout h2 { font-family: var(--f-title); font-style: italic; font-weight: 500; font-size: clamp(38px, 4.6vw, 64px); line-height: 1; letter-spacing: -.02em; margin: 0 0 14px; }
.n-prayer .name .he-long { font-size: 22px; font-weight: 500; }

/* ---- style tags: set per element in edit mode (Shift-click), saved in next/tweaks.json ---- */
html [data-role] { text-transform: none; font-style: normal; font-stretch: normal; }
html [data-role="title"] { font-family: var(--f-title) !important; font-weight: 500 !important; font-size: var(--s-title) !important; line-height: .96 !important; letter-spacing: -.02em !important; }
html [data-role="title-italic"] { font-family: var(--f-title) !important; font-style: italic !important; font-weight: 500 !important; font-size: calc(var(--s-title) * .7) !important; line-height: 1 !important; letter-spacing: -.02em !important; }
html [data-role="heading"] { font-family: var(--f-heading) !important; font-weight: 500 !important; font-size: var(--s-heading) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; }
html [data-role="subhead"] { font-family: var(--f-heading) !important; font-weight: 500 !important; font-size: 24px !important; line-height: 1.2 !important; letter-spacing: -.02em !important; }
html [data-role="lead"] { font-family: var(--f-heading) !important; font-weight: 400 !important; font-size: clamp(21px, 2.1vw, 26px) !important; line-height: 1.32 !important; letter-spacing: -.015em !important; }
html [data-role="reading"] { font-family: var(--f-body) !important; font-weight: 400 !important; font-size: var(--s-body) !important; line-height: 1.62 !important; letter-spacing: 0 !important; }
html [data-role="quote"] { font-family: var(--f-quote) !important; font-style: italic !important; font-weight: 500 !important; font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.1 !important; letter-spacing: -.015em !important; }
html [data-role="label"] { font-family: var(--f-label) !important; font-weight: 400 !important; font-size: 13px !important; line-height: 1.4 !important; letter-spacing: .03em !important; text-transform: uppercase !important; }
html [data-role="number"] { font-family: var(--f-number) !important; font-weight: 800 !important; font-stretch: 75% !important; font-size: clamp(56px, 6vw, 96px) !important; line-height: .85 !important; letter-spacing: -.02em !important; text-transform: uppercase !important; }
html [data-role="hebrew"] { font-family: var(--f-he-short) !important; font-weight: 700 !important; font-size: clamp(40px, 4vw, 64px) !important; line-height: .9 !important; }
html [data-color="ink"] { color: var(--ink) !important; }
html [data-color="muted"] { color: var(--muted) !important; }
html [data-color="blue"] { color: var(--blue) !important; }
html [data-color="blue-deep"] { color: var(--blue-deep) !important; }
html [data-color="green"] { color: var(--green) !important; }
html [data-color="red"] { color: var(--red-deep) !important; }
html [data-color="purple"] { color: var(--purple-deep) !important; }
html [data-color="white"] { color: #fff !important; }

/* =========================================================
   Launch pass (Nov 10, 2026)
   ========================================================= */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Hebrew in post titles (Substack and the archive): Frank Ruhl Libre; the Hebrew-only face falls through to Latin */
@font-face { font-family: 'He Serif'; font-display: swap; font-weight: 300 900; src: url(/fonts/files/frank-ruhl-libre-hebrew-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0590-05FF, U+FB1D-FB4F; }
.posts strong, .n-list .what, .posts .ex { font-family: 'He Serif', var(--ui); }
.posts .ex { font-family: 'He Serif', var(--font); }

/* Writing: the colour-pencil art behind the page header, as on the first draft */
body.sec-writing .hero { color: #fff; background: #3c3a52 url(/img/hero.jpg) center/cover; }
body.sec-writing .hero::before { display: block; content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 32, 50, .62), rgba(30, 32, 50, .38)); }
body.sec-writing .hero::after { display: none; }
body.sec-writing .hero .eyebrow, body.sec-writing .hero .lede, body.sec-writing .hero .lede a, body.sec-writing .hero h1 em { color: #fff; }
body.sec-writing .hero .eyebrow a { color: #fff; }

/* footer mark: the spiral */
.foot .spiral { width: 28px; height: 28px; vertical-align: -8px; margin-right: 6px; border-radius: 50%; }
.foot .small a { color: #fff; }

/* About */
.about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 36px; align-items: start; margin: 0 0 1.4em; }
.prose:has(.about-intro) { max-width: 1040px; }
.about-portrait { margin: 0; }
.about-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 44% 56% 48% 52% / 40% 42% 58% 60%; display: block; }
.about-words .lead { margin-top: 0 !important; }
.prose figure.inset.wide { max-width: 780px; }
.prose h2#names, .prose h2#teachers, .prose h2#bios { margin-top: 1.6em; }
.bio-band { background: var(--blue-deep); color: var(--sand); margin: 2.2em calc(50% - 50vw); padding: clamp(40px, 6vw, 72px) calc(50vw - 50% + 0px); }
.bio-band > * { max-width: 780px; }
.bio-band h3 { color: var(--sand); font-family: var(--f-title) !important; font-style: italic; font-weight: 500; font-size: clamp(34px, 4vw, 52px); margin-top: 0; }
.bio-band p { color: var(--sand); font-size: 20px; }
.bio-band a { color: var(--butter); }
@media (max-width: 760px) { .about-intro { grid-template-columns: 1fr; } .about-portrait { max-width: 340px; } }

/* Poems: the poem, and a small sidebar of related poems */
.poem-layout { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: start; }
.poem-layout .prose { margin: 0; max-width: 820px; padding-left: 0; padding-right: 0; }
.poem-layout .bilingual { margin: 1em 0; grid-template-columns: 1fr 1fr; }
.bilingual .he-col { font-family: var(--he); font-size: 22px; line-height: 1.6; }
.poem-source { font-family: var(--f-label); font-size: 13px; color: var(--muted); }
.related { position: sticky; top: 24px; margin-top: 48px; padding: 22px; background: var(--sand-2); border-radius: 6px; border-top: 8px solid var(--purple); }
.related .k { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; color: var(--purple-deep); }
.related ul { list-style: none; margin: 0; padding: 0; }
.related li a { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: var(--soft-rule); color: var(--ink); text-decoration: none; }
.related li a:hover strong { text-decoration: underline; }
.related strong { font-family: var(--f-title); font-weight: 500; font-size: 21px; line-height: 1.15; }
.related span { font-family: var(--ui); font-size: 14px; color: var(--muted); }
.related .all { margin: 12px 0 0; font-family: var(--ui); font-size: 14px; font-weight: 600; }
.poem .tags a { color: inherit; text-decoration: none; }
@media (max-width: 900px) { .poem-layout { grid-template-columns: 1fr; gap: 0; } .related { position: static; margin: 24px 0 56px; } }
@media (max-width: 700px) { .poem-layout .bilingual { grid-template-columns: 1fr; } .bilingual .he-col { margin-top: 0; } .bilingual .en-col { margin-top: 1.6em; } }

/* Site map and the 404 search */
.sitemap { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 28px 40px; padding-top: 24px; padding-bottom: 72px; }
.sitemap h2 { font-family: var(--f-heading); font-size: 26px; margin: 0 0 10px; padding-top: 12px; border-top: 6px solid var(--sec); }
.sitemap ul { list-style: none; margin: 0; padding: 0; font-family: var(--ui); font-size: 16px; line-height: 1.35; }
.sitemap li { padding: 5px 0; }
.not-found { padding-top: 32px; padding-bottom: 80px; text-align: left; }
.not-found .spiral.big { width: 120px; height: 120px; border-radius: 50%; display: block; margin: 0 0 18px; }
.site-search input { width: 100%; min-height: 56px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 6px; background: var(--sand-2); font: 500 20px var(--ui); }
.search-results { list-style: none; margin: 16px 0 28px; padding: 0; }
.search-results a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: var(--soft-rule); color: var(--ink); text-decoration: none; font-family: var(--ui); }
.search-results a:hover strong { text-decoration: underline; }
.search-results span { font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--muted); }
.search-results .none { font-family: var(--ui); color: var(--muted); padding: 12px 0; }

/* Work with me */
.n-portrait { margin: 0; flex: 0 1 340px !important; }
.n-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 44% 56% 48% 52% / 40% 42% 58% 60%; }
.n-stations { list-style: none; margin: 0; padding: 0 0 0 46px; position: relative; display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); }
.n-stations::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 8px; border-radius: 4px; background: linear-gradient(var(--blue), var(--teal), var(--purple), var(--red)); }
.n-station { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.n-station:nth-child(even) .n-st-pic { order: 2; }
.n-st-mark { position: absolute; left: -46px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 7px solid var(--c); background: var(--sand); box-sizing: border-box; transition: background .3s; }
.n-station:hover .n-st-mark { background: var(--c); }
.n-st-pic { display: block; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 3; background: var(--c); }
.n-st-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.3, .7, .2, 1), filter .4s; }
.n-station:hover .n-st-pic img { transform: scale(1.04); }
.n-st-words { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.n-st-num { font-size: clamp(64px, 7vw, 104px); color: var(--c); }
.n-st-words h2 { margin: 0; font-family: var(--f-heading); font-weight: 500; font-size: clamp(34px, 3.6vw, 50px); line-height: 1; letter-spacing: -.035em; }
.n-st-words h2 a { color: var(--ink); text-decoration: none; }
.n-st-words h2 a:hover { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.n-st-words p { margin: 0; font-size: 20px; line-height: 1.5; max-width: 34em; }
.n-st-links { display: flex; flex-wrap: wrap; gap: 8px; }
.n-st-links a { font-family: var(--ui); font-size: 15px; font-weight: 600; padding: 6px 12px; border-radius: 6px; border: 1.5px solid var(--c); color: var(--ink); text-decoration: none; }
.n-st-links a:hover { background: var(--c); color: #fff; }
.n-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px; }
.n-steps li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid rgba(255, 255, 255, .45); }
.n-steps .n-poster { font-size: 96px; color: var(--butter); }
.n-steps h3 { margin: 0; font-family: var(--f-heading); font-size: 30px; color: #fff; }
.n-steps p { margin: 0; font-size: 18px; line-height: 1.5; }
@media (max-width: 760px) { .n-station { grid-template-columns: 1fr; } .n-station:nth-child(even) .n-st-pic { order: 0; } .n-st-mark { top: 24px; margin-top: 0; } }

/* Projects */
.n-pjs { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 120px); }
.n-pj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.n-pj:nth-child(even) .n-pj-stack { order: -1; }
.n-pj-words { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding-left: 26px; border-left: 10px solid var(--c); }
.n-pj.wip .n-pj-words { border-left-style: dashed; }
.n-pj-status { margin: 0; font-size: 12px; color: var(--c); font-weight: 700; }
.n-pj-he { font-size: clamp(72px, 8vw, 120px); color: var(--c); line-height: .8; }
.n-pj-he.n-he-text { font-size: 44px; }
.n-pj h2 { margin: 0; font-family: var(--f-title); font-weight: 500; font-size: clamp(42px, 4.6vw, 68px); line-height: .98; letter-spacing: -.02em; }
.n-pj h2 a { color: var(--ink); text-decoration: none; }
.n-pj h2 a:hover { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 3px; }
.n-pj p { margin: 0; font-size: 20px; line-height: 1.5; max-width: 32em; }
.n-pj-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.n-pj-stack { position: relative; display: block; aspect-ratio: 16 / 11; }
.n-pj-stack img { position: absolute; width: 78%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px; box-shadow: 0 18px 44px rgba(60, 45, 30, .22);
  left: calc(var(--i) * 11%); top: calc(var(--i) * 12%); transform: rotate(calc((var(--i) - 1) * 2.5deg)); transition: transform .6s cubic-bezier(.3, .7, .2, 1); z-index: calc(3 - var(--i)); background: #fff; }
.n-pj:hover .n-pj-stack img { transform: rotate(calc((var(--i) - 1) * 5deg)) translate(calc(var(--i) * 18px), calc(var(--i) * -6px)); }
.n-pj-stack::before { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--c); right: -2%; bottom: -6%; opacity: .9; }
.n-archives { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.n-arch { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px; min-height: 230px; border-radius: 6px; background: var(--sand); color: var(--ink); text-decoration: none; border-top: 10px solid var(--c); overflow: hidden; }
.n-arch:hover { box-shadow: 0 12px 30px rgba(60, 45, 30, .16); }
.n-arch-num { font-size: 92px; color: var(--c); }
.n-arch-he { position: absolute; right: 22px; top: 18px; font-size: 54px; color: var(--c); opacity: .35; }
.n-arch b { font-family: var(--f-heading); font-weight: 500; font-size: 26px; letter-spacing: -.02em; }
.n-arch span:last-child { font-family: var(--ui); font-size: 16px; color: var(--ink-soft); }
@media (max-width: 860px) { .n-pj { grid-template-columns: 1fr; } .n-pj:nth-child(even) .n-pj-stack { order: 0; } }
@media (prefers-reduced-motion: reduce) { .n-pj-stack img, .n-st-pic img { transition: none; } }

/* Albums: the Aleph Bass video, large */
.n-video-title { margin: 0; font-family: var(--f-title); font-weight: 500; font-size: clamp(56px, 8vw, 120px); line-height: .9; letter-spacing: -.02em; color: var(--on-charcoal); }
.n-video-title .n-he { font-size: .8em; color: var(--teal); margin-left: .2em; }
.yt-big { border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.yt-big .play { width: 96px; height: 96px; }
.yt-big .play::after { left: 38px; top: 29px; border-width: 19px 0 19px 30px; }
.n-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; display: block; }
/* the short bio closes its band: no strip of the band colour below it */
.band-s > .prose:has(> .bio-band:last-child) { padding-bottom: 0; }
.band-s > .prose > .bio-band:last-child { margin-bottom: 0; }
.n-video-title .n-he { white-space: nowrap; display: inline-block; }
.kinds { flex-wrap: wrap; }
/* Meditation: a tall header so the slow ocean video has room */
.hero.has-video { padding-top: clamp(90px, 12vw, 190px); padding-bottom: clamp(90px, 12vw, 190px); }
.hero.has-video::before { background: linear-gradient(180deg, rgba(20, 28, 44, .5), rgba(20, 28, 44, .25)); }
body.sec-projects .n-line-name .n-mono { display: none; }
.prose img[src*="/img/1668093"] { max-width: 260px; }

/* ---- notes from edit mode, Nov 10 ---- */
/* testimonial carousels: every card the same height */
.carousel-quotes .track { align-items: stretch; }
.carousel-quotes .slide { height: auto; display: flex; }
.carousel-quotes .slide.quote, .carousel-quotes .quote { height: auto; flex-direction: column; justify-content: space-between; }
/* a photo behind the page header (Psychedelic Chaplaincy, Transitions) */
.hero.hero-photo { color: #fff; background: #3c3a52 var(--hero-bg) center/cover; }
.hero.hero-photo::before { display: block; content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 32, 50, .6), rgba(30, 32, 50, .3)); }
.hero.hero-photo::after { display: none; }
.hero.hero-photo .eyebrow, .hero.hero-photo .eyebrow a, .hero.hero-photo .lede, .hero.hero-photo h1 em { color: #fff; }
.hero.hero-photo { padding-top: clamp(70px, 9vw, 140px); padding-bottom: clamp(70px, 9vw, 140px); }
/* Rabbi Chanina: Hebrew left in Frank Ruhl, English right, lined up */
.prose .bilingual.verse { margin: 1.2em 0 1.6em; gap: 0 36px; align-items: start; }
.prose .bilingual.verse .he-col p { font-family: var(--he); font-size: 23px; line-height: 1.55; margin: 0; }
.prose .bilingual.verse .en-col p { font-size: 19px; line-height: 1.83; margin: 0; }
@media (max-width: 700px) { .prose .bilingual.verse { grid-template-columns: 1fr; } .prose .bilingual.verse .en-col { margin-top: 1em; } }
/* Meditation: text wraps around the Birkenau photo */
.prose figure.inset.right + h2, .prose figure.inset.right ~ p { clear: none; }
/* Events: links look like links */
.past a.t, .honors a.t, .ev-card h3 a { color: var(--blue-deep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.past a.t:hover, .honors a.t:hover { color: var(--blue); }
.prose .bilingual.verse { grid-template-columns: max-content 1fr; }
.prose .bilingual.verse .he-col p { font-size: 22px; line-height: 36px; }
.prose .bilingual.verse .en-col p { font-size: 18px; line-height: 36px; }
@media (max-width: 700px) { .prose .bilingual.verse { grid-template-columns: 1fr; } }
/* the event list on dark or coloured bands (Awards and fellowships on About) */
.tone-charcoal .past, .tone-charcoal .past .m, .tone-charcoal .past .h, .tone-charcoal .past .k, .tone-charcoal .past .t { color: var(--on-charcoal); }
.tone-charcoal .past a.t { color: var(--teal-pale); }
.tone-charcoal .past li, .tone-blue .past li { border-color: rgba(239, 228, 209, .25); }
.tone-blue .past, .tone-blue .past .m, .tone-blue .past .h, .tone-blue .past .k, .tone-blue .past .t { color: #fff; }
.tone-blue .past a.t { color: var(--butter); }
.tone-charcoal .past .k, .tone-blue .past .k { border-color: currentColor; }

/* ---- notes, Nov 10 (second round) ---- */
/* Spiritual Direction: testimonials full width, as colour blocks */
.n-quotes-bleed { margin: 2em calc(50% - 50vw); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.n-quotes-bleed blockquote, .n-quotes-bleed blockquote p { color: inherit; border: 0; padding: 0; margin: 0; }
.n-quotes-bleed blockquote { font-size: clamp(26px, 2.4vw, 34px); }
.ceremonies-top { padding-top: clamp(32px, 5vw, 64px); }
/* Events: each kind keeps its colour, on the pills and on the filters */
.past .k { color: var(--kc, var(--muted)); border-color: var(--kc, var(--line)); border-width: 1.5px; font-weight: 700; }
.kinds button[style] { border-color: var(--kc); color: var(--kc); font-weight: 600; }
.kinds button[style][aria-pressed=true] { background: var(--kc); border-color: var(--kc); color: #fff; }
.tone-charcoal .past .k { background: var(--kc); color: #fff; border-color: var(--kc); }
/* Hebrew beside English, line for line (Rabbi Chanina, the Amichai poem) */
.bilingual .he-col p, .bilingual .en-col p { margin: 0 0 14px; }
.bilingual .he-col p { font-size: 21px; line-height: 34px; }
.bilingual .en-col p { font-size: 18px; line-height: 34px; }
.bilingual.rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 8px; align-items: baseline; margin: 1em 0 1.6em; }
.bilingual.rows .he { font-family: var(--he); font-size: 21px; line-height: 1.5; text-align: right; }
.bilingual.rows .en { font-size: 18px; line-height: 1.55; }
.bilingual.rows.verse { grid-template-columns: max-content minmax(0, 1fr); }
.poem-layout .bilingual.rows { margin: 1em 0; }
@media (max-width: 600px) { .bilingual.rows { column-gap: 18px; } .bilingual.rows .he { font-size: 18px; } .bilingual.rows .en { font-size: 16px; } }
.n-quotes-bleed { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }

/* ---- Retreat chants ---- */
.rc-tools { position: sticky; top: 0; z-index: 12; background: var(--charcoal); color: var(--on-charcoal); }
.rc-tools .wrap { padding-left: var(--gutter, 24px); padding-right: var(--gutter, 24px); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding-top: 14px; padding-bottom: 14px; max-width: var(--wide); }
.rc-q { flex: 1 1 320px; }
.rc-q input { width: 100%; min-height: 44px; padding: 0 14px; border: 1.5px solid rgba(239, 228, 209, .55); border-radius: 6px; background: transparent; color: var(--on-charcoal); font: 500 16px var(--ui); }
.rc-q input::placeholder { color: rgba(239, 228, 209, .6); }
.rc-seasons { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-seasons button { min-height: 40px; padding: 0 12px; border-radius: 6px; border: 1.5px solid rgba(239, 228, 209, .45); background: transparent; color: var(--on-charcoal); font: 600 14px var(--ui); cursor: pointer; }
.rc-seasons button[aria-pressed=true] { background: var(--on-charcoal); color: var(--ink); border-color: var(--on-charcoal); }
.rc-jump { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px 14px; font: 600 14px var(--ui); }
.rc-jump a { color: var(--teal-pale); text-decoration: none; }
.rc-jump a:hover { text-decoration: underline; }
.rc-jump small { font-family: var(--mono); font-weight: 400; font-size: 11px; text-transform: uppercase; opacity: .8; }
.rc-count { font-family: var(--mono); font-size: 12px; text-transform: uppercase; margin-left: auto; }
.rc-wrap { max-width: var(--wide); padding-top: 28px; padding-bottom: 80px; }
.rc-wrap > .lead { max-width: 46em; font-size: 20px; }
.rc-retreat { padding-top: 48px; scroll-margin-top: 140px; }
.rc-head { display: flex; gap: 22px; align-items: flex-end; padding-bottom: 18px; border-bottom: 8px solid var(--c); margin-bottom: 20px; }
.rc-year { font-size: clamp(64px, 8vw, 104px); color: var(--c); }
.rc-season { margin: 0; font-size: 12px; color: var(--c); font-weight: 700; }
.rc-head h2 { margin: 2px 0 4px; font-family: var(--f-title); font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -.02em; }
.rc-meta { margin: 0; font-family: var(--ui); font-size: 15px; color: var(--ink-soft); }
.rc-set { font-family: var(--ui); font-size: 14px; font-weight: 600; }
.rc-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.rc-day { background: var(--sand-2); border-radius: 6px; padding: 14px 16px 16px; border-top: 4px solid var(--c); }
.rc-day[hidden], .rc-retreat[hidden], .rc-jump a[hidden] { display: none; }
.rc-day header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.rc-day h3 { margin: 0; font-family: var(--ui); font-weight: 600; font-size: 18px; }
.rc-day .d { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.rc-play { margin-left: auto; border: 0; border-radius: 6px; background: var(--ink); color: var(--sand); font: 600 13px var(--ui); padding: 5px 10px; cursor: pointer; }
.rc-play:hover { background: var(--c); color: #fff; }
.rc-player { width: 100%; height: 20px; border: 0; margin: 2px 0 6px; flex-basis: 100%; }
.rc-off { margin-left: auto; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--muted); }
.rc-day ol { margin: 0; padding-left: 1.4em; font-family: var(--ui); font-size: 14.5px; line-height: 1.45; }
.rc-day li { padding: 1px 0; }
.rc-day li .w { color: var(--muted); font-size: 13px; }
.rc-day li.kv { list-style: none; margin-left: -1.4em; font-family: var(--serif-poster); font-style: italic; font-size: 15px; color: var(--ink-soft); }
.rc-day li.mine .t { font-weight: 600; }
.rc-day li.dim { opacity: .3; }
.rc-retreat.offline .rc-day { background: transparent; border: 1.5px dashed var(--line); border-top: 4px dashed var(--c); }
.rc-note { font-family: var(--ui); font-size: 15px; color: var(--muted); margin: 0 0 12px; }
.rc-talks { margin-top: 16px; padding: 14px 16px; background: var(--sand-2); border-radius: 6px; }
.rc-talks h3 { margin: 0 0 8px; font-family: var(--ui); font-size: 18px; }
.rc-talks ul { list-style: none; margin: 0; padding: 0; font-family: var(--ui); font-size: 15px; }
.rc-talks li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 0; border-top: var(--soft-rule); }
.rc-talks .rc-play { margin-left: 0; }
.rc-talks p { margin: 10px 0 0; font-family: var(--ui); font-size: 14px; font-weight: 600; }
.rc-later { margin-top: 56px; font-family: var(--ui); }
.rc-later h2 { font-family: var(--f-heading); font-size: 30px; }
/* Osage script (Song of Entering the Village): only the Osage letters use this face */
@font-face { font-family: 'Noto Sans Osage'; font-display: swap; font-weight: 400; src: url(/fonts/files/noto-sans-osage-osage-400-normal.woff2) format('woff2'); unicode-range: U+104B0-104FF, U+0358; }
:root { --font: 'Noto Sans Osage', 'Hedvig Letters Serif Variable', Georgia, serif; --ui: 'Noto Sans Osage', 'Space Grotesk Variable', 'Hanken Grotesk', system-ui, sans-serif; }
@media (max-width: 700px) {
  .rc-tools { position: static; }
  .rc-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rc-year { font-size: 56px; line-height: .9; }
}
/* ---- past teachings (draft) ---- */
.tc-tools { background: var(--charcoal); }
.tc-tools .wrap { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px var(--gutter, 24px); max-width: var(--wide); }
.tc-tools button { min-height: 40px; padding: 0 14px; border-radius: 6px; border: 1.5px solid rgba(239, 228, 209, .45); background: transparent; color: var(--on-charcoal); font: 600 14px var(--ui); cursor: pointer; }
.tc-tools button[style] { border-left: 6px solid var(--hc); }
.tc-tools button[aria-pressed=true] { background: var(--on-charcoal); color: var(--ink); border-color: var(--on-charcoal); }
.tc-wrap { max-width: var(--wide); padding-top: 32px; padding-bottom: 64px; }
.tc-banner { border: 2px dashed var(--ochre); border-radius: 8px; padding: 14px 18px; font: 15px/1.5 var(--ui); background: var(--sand-2); margin: 0 0 32px; }
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 28px; }
.tc-card { display: flex; flex-direction: column; background: var(--sand-2); border-radius: 8px; overflow: hidden; border-top: 8px solid var(--hc); }
.tc-card[hidden] { display: none; }
.tc-art { aspect-ratio: 16 / 10; background: var(--hc); overflow: hidden; }
.tc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-type { height: 100%; display: flex; align-items: flex-end; padding: 22px; background: var(--hc); color: var(--sand-2); }
.tc-type span { font-family: var(--f-title, var(--font)); font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.02em; }
.tc-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.tc-body h2 { margin: 6px 0 4px; font-family: var(--f-title, var(--font)); font-weight: 500; font-size: 30px; line-height: 1.05; letter-spacing: -.015em; }
.tc-body > p { margin: 0 0 10px; font-size: 17px; line-height: 1.5; }
.tc-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font: 600 12px var(--ui); text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6b6559); }
.tc-host { background: var(--hc); color: #fff; padding: 3px 8px; border-radius: 4px; }
.tc-draft { border: 1.5px dashed var(--ochre); padding: 2px 6px; border-radius: 4px; color: var(--ink); }
.tc-sub { font-style: italic; color: var(--muted, #6b6559); }
.tc-missing { color: var(--muted, #6b6559); font-style: italic; }
.tc-count { font: 600 13px var(--ui) !important; color: var(--hc); filter: brightness(.8); }
.tc-sess { border-top: 1px solid var(--sand-3); margin: 4px 0 10px; }
.tc-sess summary { cursor: pointer; padding: 10px 0; font: 600 14px var(--ui); }
.tc-sess ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tc-sess li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; font: 14px/1.4 var(--ui); }
.tc-sess li img { grid-row: span 3; width: 72px; height: 45px; object-fit: cover; border-radius: 3px; }
.tc-n { font-weight: 700; } .tc-t { grid-column: 1 / -1; } .tc-sess li img ~ .tc-t { grid-column: 2; }
.tc-k i { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--sand-3); border-radius: 3px; padding: 1px 5px; margin-right: 3px; }
.tc-notes { margin: auto 0 0; padding: 12px 14px; border: 1.5px dashed var(--sand-3); border-radius: 6px; font: 13px/1.45 var(--ui); display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.tc-notes dt { font-weight: 700; } .tc-notes dd { margin: 0; }
.tc-give { margin: 14px 0 0 !important; }
.tc-give .n-btn[aria-disabled] { opacity: .5; cursor: default; }
.tc-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 12px; }
.tc-gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: #fff; }
.tc-give .n-btn[data-give] { cursor: default; }
/* course donation form and course pages */
.tc-join { margin: 14px 0 0 !important; padding: 14px; border-radius: 6px; background: var(--sand); display: grid; gap: 10px; font: 15px/1.4 var(--ui); }
.tc-join-h { margin: 0; font-weight: 700; }
.tc-amts { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-amts button { min-height: 40px; padding: 0 12px; border-radius: 6px; border: 1.5px solid var(--hc); background: var(--sand-2); color: var(--ink); font: 600 14px var(--ui); cursor: pointer; }
.tc-amts button[aria-pressed=true] { background: var(--hc); color: #fff; }
.tc-join label { display: grid; gap: 4px; font-weight: 600; font-size: 13px; }
.tc-join label[hidden] { display: none; }
.tc-join input { min-height: 42px; padding: 0 12px; border: 1.5px solid var(--sand-3); border-radius: 6px; background: #fff; font: 16px var(--ui); }
.tc-join .tc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.tc-join [type=submit] { justify-self: start; border: 0; cursor: pointer; }
.tc-err { margin: 0; color: var(--red-deep); font-weight: 600; min-height: 0; }
.tc-err:empty { display: none; }
.tc-fine { margin: 0; font-size: 12.5px; color: var(--muted, #6b6559); }
.tc-locked { margin: 12px 0 0 !important; padding: 10px 12px; border-left: 4px solid var(--hc); background: var(--sand); font: 600 14px/1.45 var(--ui); }
.tc-course { max-width: 900px; padding-top: 32px; padding-bottom: 72px; }
.tc-welcome { padding: 14px 18px; border-radius: 6px; background: var(--teal-pale); font: 16px/1.5 var(--ui); margin: 0 0 24px; }
.tc-cover { width: 100%; border-radius: 8px; display: block; margin: 0 0 24px; }
.tc-lead { font-size: 20px; line-height: 1.55; margin: 0 0 24px; }
.tc-lessons { list-style: none; margin: 32px 0; padding: 0; display: grid; gap: 22px; }
.tc-lessons > li { display: grid; grid-template-columns: 160px 1fr; gap: 18px; padding-top: 22px; border-top: 4px solid var(--hc); }
.tc-lessons > li > img { width: 160px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.tc-lessons > li:not(:has(> img)) > div { grid-column: 1 / -1; }
.tc-lessons h2 { margin: 0 0 10px; font: 700 15px var(--ui); text-transform: uppercase; letter-spacing: .05em; }
.tc-lessons h2 span { display: block; margin-top: 4px; font: 500 24px/1.2 var(--f-title, var(--font)); text-transform: none; letter-spacing: -.01em; }
.tc-lessons video { width: 100%; border-radius: 6px; background: #000; }
.tc-lessons audio { width: 100%; }
.tc-soon { margin: 0; color: var(--muted, #6b6559); font-style: italic; }
.tc-files { margin: 8px 0 0; font: 15px var(--ui); }
.tc-back { font: 15px var(--ui); }
@media (max-width: 640px) { .tc-lessons > li { grid-template-columns: 1fr; } .tc-lessons > li > img { width: 100%; } }
.tc-syn { margin: 0 0 12px; font-size: 18px; line-height: 1.55; }
.tc-transcript p:not(.tc-welcome):not(.tc-syn):not(.tc-back) { font-size: 17px; line-height: 1.6; margin: 0 0 14px; }
.tc-ts { display: inline-block; min-width: 64px; margin-right: 10px; font: 600 12px var(--ui); color: var(--hc); filter: brightness(.8); vertical-align: 1px; }

/* teachings: two filter rows + search, tags, collapsible notes, excerpts, unclear audio */
.tc-tools .wrap { flex-direction: column; gap: 10px; }
.tc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tc-lab { min-width: 96px; font: 700 12px var(--ui); text-transform: uppercase; letter-spacing: .08em; color: var(--on-charcoal); opacity: .75; }
.tc-search { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; }
.tc-search input { flex: 1; min-height: 40px; max-width: 420px; padding: 0 12px; border-radius: 6px; border: 1.5px solid rgba(239, 228, 209, .45); background: transparent; color: var(--on-charcoal); font: 15px var(--ui); }
.tc-search input::placeholder { color: rgba(239, 228, 209, .55); }
.tc-shown { font: 600 13px var(--ui); color: var(--on-charcoal); opacity: .8; }
.tc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tc-tags span { padding: 3px 9px; border-radius: 99px; background: var(--sand); border: 1.5px solid var(--sand-3); font: 600 12px var(--ui); }
.tc-notes-d { margin: auto 0 12px; }
.tc-notes-d summary { cursor: pointer; font: 600 13px var(--ui); color: var(--muted, #6b6559); padding: 6px 0; }
.tc-notes-d .tc-notes { margin: 6px 0 0; }
.tc-date { margin: -4px 0 10px; font: 600 13px var(--ui); color: var(--muted, #6b6559); }
.tc-ex { margin: 14px 0; padding: 4px 0 4px 16px; border-left: 4px solid var(--hc); }
.tc-ex p { margin: 0; font-style: italic; }
.tc-ex cite { display: block; margin-top: 4px; font: 600 12px var(--ui); font-style: normal; color: var(--muted, #6b6559); }
.tc-unclear { color: var(--muted, #6b6559); font-style: italic; }
@media (max-width: 640px) { .tc-lab { min-width: 0; width: 100%; } }

/* teachings: card links and buttons; each course's preview page */
a.tc-art { display: block; }
.tc-card h2 a { color: inherit; text-decoration: none; } .tc-card h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tc-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.tc-acts .n-btn { min-height: 46px; font-size: 16px; }
.n-btn.tc-ghost { border-color: var(--ink); color: var(--ink); background: transparent; } .n-btn.tc-ghost:hover { background: var(--ink); color: var(--sand); }
.tc-pv { padding: 40px 0 24px; }
.tc-pv-top { display: grid; grid-template-columns: minmax(260px, 440px) 1fr; gap: 36px; align-items: start; margin-bottom: 44px; }
.tc-pv-cover { width: 100%; aspect-ratio: auto; border-radius: 8px; display: block; border-top: 8px solid var(--hc); }
div.tc-pv-cover { aspect-ratio: 16 / 10; }
.tc-pv-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 20px; font: 15px/1.45 var(--ui); }
.tc-pv-facts dt { font-weight: 700; } .tc-pv-facts dd { margin: 0; }
.tc-pv-h { margin: 0 0 18px; font: 700 14px var(--ui); text-transform: uppercase; letter-spacing: .09em; color: var(--muted, #6b6559); }
.tc-pv-quotes { background: var(--sand); padding: 36px 0; margin: 0 0 44px; border-top: 8px solid var(--hc); }
.tc-pv-qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.tc-pv-qgrid .tc-ex { margin: 0; background: var(--sand-2); padding: 16px 18px; border-radius: 0 6px 6px 0; }
.tc-pv-qgrid .tc-ex p { font-size: 18px; line-height: 1.5; }
.tc-pv-sess { list-style: none; margin: 0 0 44px; padding: 0; display: grid; gap: 14px; }
.tc-pv-sess > li { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; padding-top: 14px; border-top: 3px solid var(--hc); }
.tc-pv-sess img { width: 150px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.tc-pv-n { display: flex; align-items: center; justify-content: center; width: 150px; aspect-ratio: 16 / 10; border-radius: 4px; background: var(--hc); color: var(--sand-2); font: 600 40px var(--f-title, var(--font)); }
.tc-pv-sn { margin: 0 0 2px; font: 700 12px var(--ui); text-transform: uppercase; letter-spacing: .07em; color: var(--muted, #6b6559); }
.tc-pv-sess h3 { margin: 0 0 6px; font: 500 22px/1.25 var(--f-title, var(--font)); }
.tc-pv-sess p { margin: 0 0 6px; }
.tc-pv-sess .tc-k i { font: 600 12px var(--ui); font-style: normal; padding: 2px 8px; margin-right: 4px; border-radius: 99px; background: var(--sand); border: 1.5px solid var(--sand-3); }
.tc-pv-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0 0 44px; }
.tc-pv-gal figure { margin: 0; } .tc-pv-gal img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; display: block; transition: transform .2s; }
.tc-pv-gal a:hover img { transform: scale(1.02); }
.tc-pv-gal figcaption { margin-top: 6px; font: 13px/1.4 var(--ui); color: var(--muted, #6b6559); }
.tc-pv-join { background: var(--sand); border-radius: 8px; padding: 28px; border-top: 8px solid var(--blue); margin-bottom: 24px; }
.tc-pv-join h2 { margin: 0 0 8px; font: 500 30px var(--f-title, var(--font)); }
.tc-lb { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; }
.tc-lb::backdrop { background: rgba(20, 18, 15, .85); }
.tc-lb img { max-width: 92vw; max-height: 84vh; display: block; border-radius: 6px; }
.tc-lb p { color: var(--on-charcoal, #efe4d1); font: 14px var(--ui); margin: 8px 0 0; }
@media (max-width: 760px) { .tc-pv-top { grid-template-columns: 1fr; } .tc-pv-sess > li { grid-template-columns: 96px 1fr; } .tc-pv-sess img, .tc-pv-n { width: 96px; } }

/* teachings, v3: course headers on their own art; homepage-style quotes; related courses alongside */
.hero.hero-course, .hero.hero-coursex { background: var(--charcoal); color: #fff; isolation: isolate; min-height: clamp(320px, 38vw, 480px); display: flex; align-items: flex-end;
  padding-top: clamp(80px, 9vw, 130px); padding-bottom: clamp(44px, 5vw, 72px); }
.hero.hero-course::before, .hero.hero-coursex::before { display: block; content: ""; position: absolute; inset: 0; background: var(--hero-bg) center/cover; z-index: -2; }
.hero.hero-coursex::before { inset: -24px; filter: blur(5px) saturate(1.1); }
.hero.hero-course::after, .hero.hero-coursex::after { display: block; content: ""; position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; top: 0; right: 0; left: 0; bottom: 0;
  transform: none; border-radius: 0; z-index: -1; background: linear-gradient(90deg, rgba(28, 26, 22, .86) 0%, rgba(28, 26, 22, .6) 48%, rgba(28, 26, 22, .18) 100%), linear-gradient(0deg, rgba(28, 26, 22, .55), transparent 55%); }
.hero.hero-course h1, .hero.hero-coursex h1 { color: #fff; text-shadow: 0 1px 24px rgba(0, 0, 0, .35); }
.hero.hero-course .eyebrow, .hero.hero-coursex .eyebrow, .hero.hero-course .eyebrow a, .hero.hero-coursex .eyebrow a { color: var(--butter, #f1d27a); }
.hero.hero-course .lede, .hero.hero-coursex .lede, .hero.hero-course h1 em, .hero.hero-coursex h1 em, .hero.hero-course h1 i, .hero.hero-coursex h1 i { color: #fff; }
.tc-pv { padding-top: 40px; }
.tc-pv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.tc-pv-main > section { margin: 0 0 44px; }
.tc-pv-top { display: block; }
.tc-quotes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); border-radius: 8px; overflow: hidden; }
.tc-quotes figure { padding: 28px 26px; min-height: 0; }
.tc-quotes blockquote { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.22; }
.tc-quotes figcaption { font-size: 12px; }
.tc-pv-join { max-width: none; }
.tc-pv-side { position: sticky; top: 24px; }
.tc-pv-side ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.tc-pv-side a { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); padding: 8px; border-radius: 6px; background: var(--sand); border-left: 5px solid var(--hc); }
.tc-pv-side a:hover { background: var(--sand-2); }
.tc-pv-side img, .tc-pv-side .tc-pv-n { width: 96px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; font-size: 0; }
.tc-pv-side li span { font: 500 17px/1.2 var(--f-title, var(--font)); }
.tc-pv-side small { display: block; margin-bottom: 3px; font: 700 11px var(--ui); text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6b6559); }
.tc-pv-side p a { display: inline; padding: 0; background: none; border: 0; font: 600 14px var(--ui); color: var(--blue); }
@media (max-width: 960px) { .tc-pv-grid { grid-template-columns: 1fr; } .tc-pv-side { position: static; } .tc-pv-side ul { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
.tc-pv .wrap, .wrap.tc-course, .wrap.tc-wrap { padding-left: var(--gutter, 20px); padding-right: var(--gutter, 20px); box-sizing: border-box; }

/* teachings: handouts as stacks of pages (after the project stacks) */
.tc-pv-hos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 24px; }
.tc-pv-hos figure { margin: 0; }
.tc-ho-stack { position: relative; display: block; aspect-ratio: 8.5 / 11; margin: 0 22px 14px 0; }
.tc-ho-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #fff; border-radius: 3px;
  box-shadow: 0 12px 30px rgba(60, 45, 30, .2); z-index: calc(3 - var(--i)); transform: translate(calc(var(--i) * 10px), calc(var(--i) * 8px)) rotate(calc(var(--i) * 2.5deg));
  transition: transform .5s cubic-bezier(.3, .7, .2, 1); }
.tc-ho-stack:hover img { transform: translate(calc(var(--i) * 26px), calc(var(--i) * 4px)) rotate(calc(var(--i) * 6deg)); }
.tc-ho-stack:hover img:first-child { transform: translateY(-4px) rotate(-1.5deg); }
.tc-pv-hos figcaption { font: 13px/1.4 var(--ui); color: var(--muted, #6b6559); }
.tc-pv-hos figcaption b { display: block; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.tc-lb > div { display: flex; gap: 12px; overflow-x: auto; max-width: 92vw; }
.tc-lb > div img { max-width: 92vw; max-height: 84vh; border-radius: 6px; display: block; background: #fff; }
.tc-lb.tc-lb-pages > div img { max-width: min(46vw, 700px); }
@media (max-width: 640px) { .tc-lb.tc-lb-pages > div img { max-width: 86vw; } }
@media (prefers-reduced-motion: reduce) { .tc-ho-stack img { transition: none; } }

/* Learning: short teachings (Hebrew and English side by side) and the other kinds of card */
.tx-ded { margin: 0 0 18px; padding: 14px 18px; border-left: 5px solid var(--hc); background: var(--sand); font: italic 500 20px/1.3 var(--f-quote, var(--font)); }
.tx-text { margin: 28px 0 24px; border-top: 1px solid var(--sand-3); }
.tx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px 32px; padding: 16px 0; border-bottom: 1px solid var(--sand-3); }
.tx-he { font-family: var(--f-he, "Frank Ruhl Libre", serif); font-size: 21px; line-height: 1.5; text-align: right; }
.tx-he span, .tx-en span { display: block; }
.tx-he .in { padding-right: 1.4em; } .tx-en .in { padding-left: 1.4em; }
.tx-en { font-size: 17.5px; line-height: 1.55; } .tx-en p { margin: 0; }
.tx sup a { text-decoration: none; font-size: 12px; padding: 0 1px; }
.tx-notes { margin: 0 0 18px; padding-left: 1.4em; font: 14px/1.6 var(--ui); color: var(--muted, #6b6559); }
.tx-credit { font: 13px var(--ui); color: var(--muted, #6b6559); }
.tx-dl { margin: 0 0 28px; }
.tx-stack { width: 150px; margin: 0 0 18px; }
.tx-meta { font: 13px var(--ui); color: var(--muted, #6b6559); margin: 6px 0 0; }
.tc-card.tc-k-tool .tc-art img { object-position: top left; }
.tc-card.tc-k-text .tc-art { background: var(--sand-3); } .tc-card.tc-k-text .tc-art img { object-fit: cover; object-position: top; }
@media (max-width: 760px) { .tx-row { grid-template-columns: 1fr; gap: 6px; } .tx-he .in { padding-right: 1em; } }
.tx-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 28px; }
.tx-he { font-family: var(--he); font-size: 20px; line-height: 1.55; }
.tc-pv-side .tx-dl p a.n-btn { display: inline-flex; padding: 0 18px; min-height: 44px; background: var(--blue); color: #fff; font: 600 15px var(--ui); border-radius: 6px; }
.tc-pv-side .tx-dl p a.n-btn:hover { background: var(--blue-deep); }

/* grief songs (/grief/songs/): a grid of song cards; words clamp with "Show all words"; players load on click */
.gs-wrap { padding: 32px var(--gutter, 20px) 40px; box-sizing: border-box; }
.gs-intro { max-width: 760px; margin: 0 0 28px; font-size: 18px; }
.gs-spotify { width: 100%; max-width: 760px; display: block; border: 0; border-radius: 12px; margin: 0 0 12px; }
.gs-playlists p { margin: 0 0 8px; font: 600 15px var(--ui); }
.gs-rec { display: inline-flex; gap: 8px; align-items: center; color: var(--on-charcoal); font: 600 14px var(--ui); margin-right: 18px; }
.gs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; align-items: start; }
.gs-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; background: var(--sand-2); border-radius: 8px; border-top: 6px solid var(--teal); min-width: 0; }
.gs-card[hidden] { display: none; }
.gs-card[data-origin="Traditional"] { border-top-color: var(--ochre); } .gs-card[data-origin="Unknown"] { border-top-color: var(--purple); }
.gs-card header h2 { margin: 0 0 2px; font: 500 22px/1.15 var(--f-title, var(--font)); }
.gs-by { margin: 0 0 6px; font: 13px/1.35 var(--ui); color: var(--muted, #6b6559); }
.gs-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.gs-tags span { padding: 1px 7px; border-radius: 99px; border: 1.5px solid var(--sand-3); font: 600 10.5px/1.6 var(--ui); text-transform: uppercase; letter-spacing: .04em; }
.gs-tags span.t { background: var(--sand); text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.gs-words { max-height: 10.6em; overflow: hidden; }
.gs-words.clamped { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.gs-words.open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.gs-words p { margin: 0 0 .7em; font: italic 16px/1.45 var(--f-quote, var(--font)); }
.gs-words p:last-child { margin-bottom: 0; }
.gs-part { font: 600 11px var(--ui); font-style: normal; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #6b6559); }
.gs-more { align-self: flex-start; margin-top: -4px; padding: 0; border: 0; background: none; color: var(--blue); font: 600 13px var(--ui); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.gs-more[hidden] { display: none; }
.gs-nowords, .gs-note, .gs-none, .gs-link { margin: 0; font: 13px/1.45 var(--ui); color: var(--muted, #6b6559); }
.gs-listen { margin-top: auto; }
.gs-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gs-play { display: inline-flex; gap: 7px; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--blue); color: #fff; font: 600 14px var(--ui); cursor: pointer; }
.gs-play:hover { background: var(--blue-deep); }
.gs-play.gs-alt { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.gs-play.gs-alt:hover { background: var(--blue); color: #fff; }
.gs-play[hidden] { display: none; }
.gs-out { font: 600 14px var(--ui); }
.gs-frame { margin-top: 8px; }
.gs-cap { margin: 0 0 3px; font: 600 11px var(--ui); text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #6b6559); }
.gs-frame iframe { width: 100%; border: 0; display: block; border-radius: 6px; }
.gs-frame iframe.gs-yt { aspect-ratio: 16 / 9; height: auto; }
.gs-extra { margin-top: 48px; }
.gs-extra > h2 { margin: 0 0 14px; font: 500 28px var(--f-title, var(--font)); }
.gs-mini { border-top-color: var(--purple); }
.gs-folder { margin: 16px 0 0; font: 600 14px var(--ui); }
@media (max-width: 640px) { .gs-grid { grid-template-columns: 1fr; } }

/* style reference page */
.st-rules { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; max-width: 70ch; font-size: 19px; }
.st-rules b { font-family: var(--f-heading); font-weight: 600; }
.st-h3 { font-family: var(--f-heading); font-weight: 500; font-size: 22px; letter-spacing: -.02em; margin: 0 0 16px; }
.st-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 20px; margin-bottom: 48px; }
.st-swatch { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.st-swatch .chip { display: block; height: 96px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.st-swatch figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.st-swatch figcaption span { color: var(--ink-soft); font-family: var(--f-body); line-height: 1.4; }
.st-swatch code, .st-meta code { font-family: var(--f-label); font-size: 12px; color: var(--muted); }
.st-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.st-role { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-start; padding: 28px 0; border-top: var(--soft-rule); }
.st-role:last-child { border-bottom: var(--soft-rule); }
.st-meta { flex: 0 0 260px; display: flex; flex-direction: column; gap: 4px; font-family: var(--f-heading); }
.st-meta b { font-weight: 600; font-size: 18px; }
.st-meta span { font-family: var(--f-body); font-size: 15px; color: var(--ink-soft); line-height: 1.4; }
.st-sample { flex: 1 1 420px; min-width: 0; margin: 0; }
.st-sample em { font-style: italic; color: var(--blue); }
.st-control { display: none; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--f-label); font-size: 11px; text-transform: uppercase; }
.ed-on .st-control { display: flex; }
.st-control select, .st-control input[type=color] { font: 500 14px var(--ui); text-transform: none; padding: 4px 6px; border: 1.5px solid var(--ink-soft); border-radius: 6px; background: var(--sand); color: var(--ink); }
.st-control input[type=color] { width: 54px; height: 34px; padding: 2px; }
.st-control input[type=range] { width: 150px; accent-color: var(--blue); }
.st-control output { min-width: 44px; }