/* ===== self-hosted fonts (no Google requests) ===== */
/* Hanken Grotesk italic latin-ext - self-hosted (OFL) */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Hanken Grotesk italic latin - self-hosted (OFL) */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-italic-latin.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;
}
/* Hanken Grotesk normal latin-ext - self-hosted (OFL) */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Hanken Grotesk normal latin - self-hosted (OFL) */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-normal-latin.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;
}

/* ==========================================================================
   oferpelz.com - Direction C: "Show, Don't Tell" (MAQUETTE)
   --------------------------------------------------------------------------
   Radically few words. Every sentence is Ofer's or a plain fact.
   The feeling comes from space, type, texture, and the real work
   (playable music, real photos) - not from copy.

   DESIGN TOKENS - same family as A (warm paper, rust), aired out.
   Token names match A so the shared book/ page drops in unchanged.
   ========================================================================== */

:root {
  /* Surfaces - warm paper, not clinical white */
  --paper:        #f7f4ee;
  --paper-soft:   #f1ece2;
  --paper-deep:   #e9e2d4;
  --ink-panel:    #201d1a;   /* the one dark room (the album) */

  /* Ink - warm, never pure black */
  --heading:      #29241f;
  --text:         #4a443c;
  --muted:        #8a8175;
  --muted-soft:   #b3aa9c;

  /* Brand accent - warm rust */
  --accent:       #b8552f;
  --accent-deep:  #97431f;
  --accent-contrast: #f7f4ee;

  /* Lines */
  --line:         #e2dccd;
  --line-strong:  #d2c9b8;

  /* Type - Hanken Grotesk (decided; free stand-in for Sofia Pro) */
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-eyebrow: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  /* Width system (Jul 9, design pass): two tiers, one logic.
     HOME = the stage: wide visual compositions (hero, cards, album panel).
     INNER PAGES = the book: an 850px justified reading column.
     The NAV stretches near the screen edges everywhere - it bridges the two. */
  --content: 53.125rem;      /* the book column, 850px - every reading page */
  --stage: 72rem;            /* the stage, ~1150px - home sections + album panel */
  --nav: 88rem;              /* nav cap ~1400px; below that it rides the gutters */
  --measure: 34rem;          /* legacy token - paragraphs now run the full content width */
  --section-gap: clamp(4.5rem, 12vw, 8.5rem);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* book typesetting - every wrapped line reaches the edge of its box (Ofer, Jul 9) */
p, blockquote, .door, .offer { text-align: justify; hyphens: auto; }
.lead, .spine-line, .vid-more, .note-date { text-align: left; hyphens: manual; }
.concert-line .lead { text-align: center; }
.foot p, .thanks p { text-align: center; }

/* ---------- shared atoms ---------- */
.eyebrow {
  font-family: var(--font-eyebrow);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
h1, h2, h3 { font-family: var(--font-display); color: var(--heading); font-weight: 600; line-height: 1.08; }

.btn-book {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent-contrast);
  background: var(--accent);
  padding: .78rem 1.6rem;
  border-radius: 2rem;
  transition: background .2s ease;
}
@media (hover: hover) { .btn-book:hover { background: var(--accent-deep); } }

.btn-quiet {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--heading);
  padding: .72rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 2rem;
  transition: border-color .2s ease, color .2s ease;
}
@media (hover: hover) { .btn-quiet:hover { border-color: var(--accent); color: var(--accent); } }

.text-link {
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
@media (hover: hover) { .text-link:hover { border-bottom-color: var(--accent); } }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  /* bar bleeds full width; its items stretch to the gutters (capped only on very wide screens) */
  padding: 1rem max(var(--gutter), calc((100% - var(--nav)) / 2));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
}
.topbar.solid { border-bottom-color: var(--line); }
/* the logo - "ofer pelz", option A: plain small letters (Ofer, Jul 9 - tried B airy, came back to A) */
.topbar .brand { font-family: var(--font-display); color: var(--heading); }
.brand { font-weight: 600; font-size: 1.12rem; letter-spacing: .02em; }
.topbar nav { display: flex; align-items: center; gap: 1.6rem; }
.topbar .anchor { font-size: .92rem; color: var(--text); }
@media (hover: hover) { .topbar .anchor:hover { color: var(--accent); } }
.topbar .lang { font-family: var(--font-eyebrow); font-size: .82rem; color: var(--muted-soft); letter-spacing: .08em; border-left: 1px solid var(--line-strong); padding-left: 1.1rem; }
.topbar .lang .on { color: var(--heading); font-weight: 600; }
@media (hover: hover) { .topbar .lang:hover { color: var(--accent); } }
.topbar .btn-book { padding: .5rem 1.15rem; font-size: .82rem; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: .4rem; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--heading); margin: 5px 0; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  min-height: calc(92vh - 4rem);
  padding: clamp(2rem, 6vw, 4rem) var(--gutter);
  max-width: var(--stage); margin: 0 auto;
}
.hero h1 { font-size: clamp(3rem, 8vw, 5.2rem); letter-spacing: -.02em; }
.hero .spine-line {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  color: var(--accent);
  margin-top: .6rem;
  font-weight: 500;
}
.hero .eyebrow { display: block; margin-top: 1.4rem; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }
.hero .figure img { border-radius: .4rem; }

/* ---------- sections ---------- */
.section {
  max-width: var(--stage);
  margin: 0 auto;
  padding: var(--section-gap) var(--gutter) 0;
}
.section > .rule { border: none; border-top: 1px solid var(--line); margin-bottom: var(--section-gap); }
.section .eyebrow { display: block; margin-bottom: 1.4rem; }
.section .lead {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.35;
  color: var(--heading);
  max-width: 44rem;   /* display line, not body text - stays a readable length on the wide stage */
}
/* paragraphs run the full column - book feel (Ofer, Jul 9); no narrower measure */

/* offers */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.6rem; }
.offer {
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1.5rem 1.4rem 1.6rem;
  background: var(--paper);
  transition: border-color .2s ease;
}
@media (hover: hover) { .offer:hover { border-color: var(--accent); } }
.offer h2, .offer h3 { font-size: 1.12rem; margin-bottom: .5rem; line-height: 1.3; }
.offer p { font-size: .95rem; color: var(--text); }
.section .booking { display: flex; align-items: center; gap: 1.4rem; margin-top: 2.4rem; }

/* somatic image */
.body-image { margin-top: 2.6rem; max-width: 34rem; }
.body-image img { border-radius: .4rem; }
.body-image figcaption { font-size: .72rem; color: var(--muted-soft); margin-top: .5rem; }

/* in concert - one quiet line */
.concert-line { text-align: center; padding-bottom: 0; }
.concert-line .lead { margin: 0 auto; }
.concert-line .text-link { display: inline-block; margin-top: 1.6rem; }

/* ---------- album (the one dark room) ---------- */
.album-panel {
  background: var(--ink-panel);
  margin-top: var(--section-gap);
}
.album-panel .inner {
  max-width: var(--stage); margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 6rem) var(--gutter);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}
.album-panel .cover img { border-radius: .4rem; }
.album-panel .eyebrow { color: var(--muted-soft); display: block; margin-bottom: 1.2rem; }
.album-panel h2 { color: var(--paper); font-size: clamp(2rem, 5vw, 3rem); }
.album-panel .fact { color: var(--muted-soft); margin: .9rem 0 1.8rem; }
.album-panel iframe { border-radius: .6rem; border: 0; width: 100%; }
.album-panel .cta-row { display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; margin-top: 1.6rem; align-items: center; }
.album-panel .live { color: var(--muted-soft); font-size: .95rem; margin-top: 1.8rem; }

/* ---------- about ---------- */
.about-grid {
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 6vw, 4.5rem); align-items: center;
}
.about-grid .portrait img { border-radius: .4rem; }
.about-grid .credit { font-size: .72rem; color: var(--muted-soft); margin-top: .5rem; }
.about-grid p + p { margin-top: 1rem; }
.about-grid .text-link { display: inline-block; margin-top: 1.4rem; }

/* ---------- contact ---------- */
.contact { padding-bottom: var(--section-gap); }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.4rem; }
.door {
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: 1.7rem 1.6rem;
  transition: border-color .2s ease;
}
@media (hover: hover) { .door:hover { border-color: var(--accent); } }
.door.primary { background: var(--paper-soft); }
.door .dn { font-family: var(--font-eyebrow); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .6rem; }
.door strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--heading); display: block; margin-bottom: .5rem; }
.door .dd { font-size: .95rem; color: var(--text); }
.contact .direct { margin-top: 1.8rem; font-size: .95rem; color: var(--muted); }
.contact .direct a { color: var(--accent); }

.newsletter { margin-top: 2.8rem; max-width: 30rem; }
.newsletter p { font-size: .95rem; color: var(--muted); margin-bottom: .9rem; }
.signup { display: flex; gap: .6rem; }
.signup input {
  flex: 1; font-family: var(--font-body); font-size: .95rem;
  padding: .7rem 1rem; border: 1px solid var(--line-strong);
  border-radius: 2rem; background: var(--paper); color: var(--heading);
}
.signup input:focus { outline: none; border-color: var(--accent); }
.signup button {
  font-family: var(--font-eyebrow); font-size: .85rem; font-weight: 600;
  padding: .7rem 1.3rem; border: none; border-radius: 2rem;
  background: var(--heading); color: var(--paper); cursor: pointer;
}
.socials { margin-top: 2.2rem; display: flex; gap: 1.6rem; }
.socials a { font-family: var(--font-eyebrow); font-size: .82rem; letter-spacing: .08em; color: var(--muted); }
@media (hover: hover) { .socials a:hover { color: var(--accent); } }

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  padding: 2rem var(--gutter) 2.6rem;
  text-align: center;
  font-size: .82rem;
  color: var(--muted-soft);
}
.foot a { color: var(--muted); }
@media (hover: hover) { .foot a:hover { color: var(--accent); } }
.foot-contact { margin-bottom: .5rem; }

/* ---------- sub-page scaffold ---------- */
.page {
  max-width: var(--content); margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter) 5rem;
}
.page .eyebrow { display: block; margin-bottom: 1.2rem; }
.page h1 { font-size: clamp(2.1rem, 5.5vw, 3.1rem); margin-bottom: 1.2rem; }
.page .lead {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.8vw, 1.6rem);
  line-height: 1.4; color: var(--heading);
  margin-bottom: 2.2rem;
}
.page h2 { font-size: 1.4rem; margin: 3rem 0 .9rem; }
.page h3 { font-size: 1.05rem; margin: 2.2rem 0 .7rem; color: var(--heading); }
.page p + p { margin-top: 1rem; }
.page .pill {
  display: inline-block; font-family: var(--font-eyebrow); font-size: .78rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent);
  padding: .35rem .9rem; border-radius: 2rem; margin-bottom: 1.6rem;
}
.page .check {
  background: var(--paper-deep); border-radius: .4rem;
  padding: .6rem 1rem; font-size: .88rem; color: var(--muted);
  margin: 1rem 0;
}
/* padding-left keeps the ol numbers inside the box (the global reset removes it) */
.page .tracklist { columns: 2; gap: 2.5rem; font-size: .9rem; color: var(--muted); margin-top: 1rem; padding-left: 1.6rem; }
.page .tracklist li { margin-bottom: .3rem; }
.page blockquote {
  border-left: 2px solid var(--line-strong);
  padding-left: 1.2rem; margin: 1.4rem 0; color: var(--heading);
}
.page blockquote cite { display: block; font-size: .82rem; color: var(--muted); font-style: normal; margin-top: .4rem; }

/* ---------- video embeds (music page + home featured) ---------- */
.video-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: .5rem; overflow: hidden; background: var(--paper-deep);
  margin: 1.4rem 0 .6rem;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* lite video facade - just the thumbnail; the real player loads on tap.
   Without JS the facade is a plain link to the video on YouTube. */
.video-lite { display: block; cursor: pointer; }
.video-lite img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.play-badge {
  position: absolute; top: 50%; left: 50%;
  width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem;
  border-radius: 50%;
  background: rgba(32, 29, 26, .78);
  transition: background .25s ease, transform .25s ease;
}
.play-badge::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid; border-width: .55rem 0 .55rem .95rem;
  border-color: transparent transparent transparent var(--paper);
}
@media (hover: hover) {
  .video-lite:hover .play-badge { background: var(--accent); transform: scale(1.06); }
}
.video-slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; aspect-ratio: 16 / 9;
  border: 1px dashed var(--line-strong); border-radius: .5rem;
  background: var(--paper-soft); color: var(--muted);
  font-size: .95rem; padding: 1rem;
  margin: 1.4rem 0 .6rem;
}
.vid-more { font-size: .92rem; color: var(--muted); }
.page .project { margin-top: 2.4rem; }
.page .project h3 { font-size: 1.15rem; margin-bottom: .7rem; }

/* home featured video (in concert) */
.concert-line .video-embed,
.concert-line .video-slot { max-width: 44rem; margin: 2.2rem auto .4rem; }

/* ---------- sub-page rhythm: rules between major blocks, card grids ---------- */
.page hr.rule { border: none; border-top: 1px solid var(--line); margin: 3.4rem 0 0; }
.page .offers { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.8rem; }
.page .offer h2, .offer h3 { font-size: 1.12rem; margin-bottom: .5rem; line-height: 1.3; }
.offer .offer-cta { display: inline-block; margin-top: .9rem; color: var(--accent); font-weight: 500; font-size: .95rem; }

/* ---------- notes ---------- */
.note { padding-top: 2.6rem; }
.note + .note { margin-top: 2.6rem; border-top: 1px solid var(--line); }
.note h2 { margin: 0 0 .2rem; }
.note-date {
  font-family: var(--font-eyebrow); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-soft); margin-bottom: 1.1rem;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: unset; padding-top: 3rem; }
  .hero .figure { order: -1; max-width: 17rem; }
  .offers { grid-template-columns: 1fr; }
  .album-panel .inner { grid-template-columns: 1fr; }
  .album-panel .cover { max-width: 20rem; }
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .portrait { max-width: 17rem; }
  .doors { grid-template-columns: 1fr; }
  /* tracklist stays two columns on phones (Ofer, Jul 10) - tighter gap */
  .page .tracklist { gap: 1.6rem; }

  .topbar nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start;
    gap: 1.1rem; padding: 1.4rem var(--gutter) 1.8rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .topbar.menu-open nav { display: flex; }
  .nav-toggle { display: block; }
}

/* ---------- albums + catalogue (added 2026-07-08) ---------- */

/* album detail page */
.page .album-cover { margin: 2.2rem 0; max-width: 22rem; }
.page .album-cover.wide { max-width: 100%; }
.page .album-cover img { border-radius: .4rem; }

.page .credits-list { list-style: none; margin-top: 1rem; }
.page .credits-list li { font-size: .92rem; color: var(--text); padding: .2rem 0; }

.page .link-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; }

.page .back-line { margin-top: 2rem; font-size: .95rem; }

/* the albums page - a middle width so the 3x3 covers breathe */
.page.page-wide { max-width: 62rem; }

/* albums index - 3x3 cover grid, one short identical line per album.
   Every cover renders as an IDENTICAL square (aspect-ratio + object-fit:cover
   crops any non-square source). 3 columns on desktop AND tablet;
   single column only on phones. */
.album-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem 1.2rem; margin-top: 2.4rem;
}
.album-tile { display: block; text-align: center; }
.album-tile img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: .4rem;
  transition: opacity .2s ease;
}
@media (hover: hover) { .album-tile:hover img { opacity: .85; } }
.album-tile .at-line {
  display: block; font-size: .85rem; color: var(--text); margin-top: .55rem;
}
@media (hover: hover) { .album-tile:hover .at-line { color: var(--accent); } }
@media (max-width: 640px) {
  .album-tiles { grid-template-columns: 1fr; gap: 2rem; }
  .album-tile img { max-width: 20rem; margin: 0 auto; }
}

/* traductions image pair */
.img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.img-pair img { border-radius: .4rem; }
@media (max-width: 600px) { .img-pair { grid-template-columns: 1fr; } }

/* list of works */
.cat-nav {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 2rem 0 .4rem;
  scroll-margin-top: 5rem;
}
.cat-nav a {
  font-family: var(--font-eyebrow); font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 2rem;
  padding: .38rem .95rem;
  transition: border-color .2s ease, color .2s ease;
}
@media (hover: hover) { .cat-nav a:hover { border-color: var(--accent); color: var(--accent); } }

.page h2[id] { scroll-margin-top: 5rem; }

.work-entry { margin-top: 2.4rem; }
.work-entry h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.work-entry p { font-size: .88rem; line-height: 1.55; color: var(--muted); }
.work-entry p:first-of-type { font-size: .95rem; color: var(--text); }
.work-entry p + p { margin-top: .15rem; }
.work-entry .work-meta { font-style: italic; color: var(--muted-soft); font-size: .84rem; margin-top: .45rem; }
.works-note { font-size: .9rem; color: var(--muted); }

.cat-top { margin-top: 2.4rem; font-size: .8rem; }
.cat-top a { color: var(--muted-soft); transition: color .2s ease; }
@media (hover: hover) { .cat-top a:hover { color: var(--accent); } }

/* discreet catalogue link + external marker */
.quiet-line { margin-top: 1.2rem; font-size: .9rem; color: var(--muted); }
.ext-mark { font-size: .8em; opacity: .6; }

/* ==========================================================================
   CREATIVE PASS - 2026-07-09
   One alive element (the hero listening-lines canvas), a breath of paper
   grain, and a single shared motion language: soft reveals on scroll,
   drawn underlines, cards that lift, a cross-fade between pages.
   All of it steps back under prefers-reduced-motion, and the site reads
   fully with JavaScript off.
   ========================================================================== */

/* page-to-page cross-fade (browsers with MPA view transitions; others ignore) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* quiet details */
::selection { background: color-mix(in srgb, var(--accent) 24%, var(--paper)); color: var(--heading); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: .15rem; }
h1, h2, h3 { text-wrap: balance; }

/* paper grain - fixed, everywhere, barely there */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 70;
  pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* the alive element - listening lines in the hero.
   Layering (Ofer, Jul 10): the tree image sits BEHIND the lines,
   so the lines pass over it and the two blend into one picture.
   multiply blend melts the image's grey background into the paper. */
.hero { position: relative; }
#heroLines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
  /* touch-ok: decorative canvas, pointer-events none - never a tap target */
  opacity: 0; transition: opacity 1.8s ease;
}
#heroLines.on { opacity: 1; }
.hero .figure { position: relative; z-index: -2; }
.hero .figure img {
  mix-blend-mode: multiply;
  /* feather the edges so the photo dissolves into the paper */
  -webkit-mask-image: radial-gradient(ellipse 72% 76% at 50% 48%, black 52%, transparent 94%);
  mask-image: radial-gradient(ellipse 72% 76% at 50% 48%, black 52%, transparent 94%);
}

/* drawn underlines - links ink themselves in */
.text-link {
  border-bottom: none; padding-bottom: 1px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s ease, color .25s ease;
}
@media (hover: hover) { .text-link:hover { border-bottom: none; background-size: 100% 1px; } }

.topbar .anchor { position: relative; transition: color .25s ease; }
.topbar .anchor::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
@media (hover: hover) { .topbar .anchor:hover::after { transform: scaleX(1); } }

/* buttons breathe */
.btn-book, .btn-quiet {
  transition: background .25s ease, border-color .25s ease, color .25s ease,
              transform .25s ease, box-shadow .3s ease;
}
@media (hover: hover) { .btn-book:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--accent) 60%, transparent); } }
@media (hover: hover) { .btn-quiet:hover { transform: translateY(-1px); } }
.btn-book:active, .btn-quiet:active { transform: translateY(0); box-shadow: none; }

/* cards lift toward the hand */
.offer, .door {
  transition: border-color .3s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
/* hover styles live behind (hover: hover) so touch screens navigate on the
   first tap - iOS otherwise spends the first tap "hovering" (Ofer, Jul 10) */
@media (hover: hover) {
  .offer:hover, .door:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -20px rgba(41, 36, 31, .35);
  }
}

/* album covers rise slightly instead of dimming */
.album-tile img { transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease; }
@media (hover: hover) { .album-tile:hover img { opacity: 1; transform: translateY(-4px); box-shadow: 0 18px 34px -20px rgba(41, 36, 31, .45); } }

/* the dark room gets one warm ember, static */
.album-panel {
  background:
    radial-gradient(58rem 30rem at 18% 12%, rgba(184, 85, 47, .12), transparent 62%),
    var(--ink-panel);
}

/* topbar settles with a soft shadow once scrolled */
.topbar.solid { box-shadow: 0 10px 30px -24px rgba(41, 36, 31, .5); }

/* mobile menu slides in instead of popping */
@media (max-width: 860px) {
  .topbar.menu-open nav { animation: menuDown .28s ease both; }
}
@keyframes menuDown {
  from { /* touch-ok: .28s, starts on the menu tap itself, rows 67px tall */
         opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* reveal on scroll - JS adds data-reveal; without JS everything is visible.
   Desktop only (hover: hover): on touch screens an element still settling
   swallows the first tap (Ofer, Jul 12) - phones get the page still. */
@media (hover: hover) {
  html.js [data-reveal] {
    opacity: 0; transform: translateY(16px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
  }
  html.js [data-reveal].revealed { opacity: 1; transform: none; }
  html.js hr.rule[data-reveal] { transform: scaleX(.55); transform-origin: left; }
  html.js hr.rule[data-reveal].revealed { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  @media (hover: hover) { .btn-book:hover, .btn-quiet:hover, .offer:hover, .door:hover, .album-tile:hover img { transform: none; } }
}
@media print {
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  body::after, #heroLines { display: none; }
}

/* ==========================================================================
   SOMATIC LISTENING PAGE - design run 2026-07-10
   The reading path goes deeper: doors (cards) → closer (Ofer's texts) →
   lineage (Feldenkrais / Gendlin, the IFF films). Images melt into the
   paper like the home tree - no hard rectangles anywhere.
   ========================================================================== */

/* an image that dissolves into the page (reusable).
   Busy photos get a paper-colored vignette (inset shadow) instead of a
   radial mask - the photo stays readable, only its edges melt away. */
.blend-figure { margin: 2.6rem auto 0; max-width: 37rem; }
.blend-figure .blend-wrap { position: relative; }
.blend-figure img { mix-blend-mode: multiply; }
.blend-figure .blend-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 34px 22px var(--paper);
}
.blend-figure figcaption {
  font-size: .72rem; color: var(--muted-soft);
  margin-top: .3rem; text-align: center;
}

/* cards on the somatic page: two links each (book now / read closer) */
.offer .offer-links { margin-top: .9rem; display: flex; flex-direction: column; gap: .15rem; }
.offer .offer-more {
  font-size: .85rem; color: var(--muted);
  transition: color .25s ease;
}
@media (hover: hover) { .offer .offer-more:hover { color: var(--accent); } }

/* the "closer" layer - soft panels, one per way in */
.closer {
  background: var(--paper-soft);
  border-radius: .6rem;
  padding: 1.9rem 1.8rem 1.7rem;
  margin-top: 1.6rem;
  scroll-margin-top: 5.5rem;
}
.closer .eyebrow { display: block; margin-bottom: .9rem; color: var(--accent); }
.closer p + p { margin-top: 1rem; }
.closer .quiet-line { margin-top: 1.3rem; }

/* the lineage - two figures, their films */
.figure-block { margin-top: 3rem; scroll-margin-top: 5.5rem; }
.figure-block h3 { font-size: 1.15rem; margin-bottom: .8rem; }
.figure-block .ext { font-size: .88rem; color: var(--muted); }
.figure-block .ext a { color: var(--muted); border-bottom: 1px solid var(--line-strong); transition: color .25s ease, border-color .25s ease; }
@media (hover: hover) { .figure-block .ext a:hover { color: var(--accent); border-bottom-color: var(--accent); } }
.film-note { font-size: .78rem; color: var(--muted-soft); margin-top: .4rem; }

/* ===== press photos (about page) ===== */
.press-grid { columns: 3 190px; column-gap: 1.4rem; margin: 1.4rem 0 2.2rem; }
.press-grid figure { margin: 0 0 1.4rem; break-inside: avoid; }
.press-grid img { width: 100%; height: auto; display: block; }
.press-grid figcaption { font-size: .82rem; color: var(--muted); margin-top: .5rem; line-height: 1.5; }

/* ===== plain photo on a page (no blend, no vignette) ===== */
.photo-figure { margin: 2.6rem auto; max-width: 37rem; }
.photo-figure img { width: 100%; height: auto; display: block; }
.photo-figure figcaption { font-size: .78rem; color: var(--muted-soft); margin-top: .5rem; text-align: right; }

/* ==========================================================================
   PHONE PASS - 2026-07-12
   Ofer, from his iPhone 12: everything is small and hard to click,
   the nav included. Two moves:
   1. The menu becomes a table of contents - full-width rows in the
      display face, one per destination, the book button a real button.
      The hamburger grows to a proper finger target and becomes an X.
   2. Everything tappable grows to finger size (44px+), and the small
      type steps up one size on phones.
   ========================================================================== */

@media (max-width: 860px) {
  /* the top bar - a bigger name, a real menu button */
  .topbar .brand { font-size: 1.3rem; padding: .4rem 0; }
  .nav-toggle {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0;
    margin-right: -13px;   /* the lines stay visually on the gutter */
  }
  .nav-toggle span { width: 24px; margin: 3.5px 0; transition: transform .25s ease, opacity .2s ease; }
  /* the hamburger becomes an X while the menu is open (line pitch = 9px) */
  .topbar.menu-open .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .topbar.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .topbar.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  /* the menu - a table of contents, not a stack of small words */
  .topbar nav {
    gap: 0; align-items: stretch;
    padding: .3rem var(--gutter) 1.7rem;
  }
  .topbar .anchor {
    font-family: var(--font-display);
    font-size: 1.35rem; font-weight: 500; color: var(--heading);
    width: 100%; padding: .95rem 0;
  }
  .topbar .anchor + .anchor { border-top: 1px solid var(--line); }
  .topbar .anchor::after { content: none; }
  .topbar nav .btn-book {
    width: 100%; text-align: center;
    font-size: 1.02rem; padding: 1rem 1.5rem;
    margin-top: 1.1rem;
  }
  .topbar .lang {
    border-left: none; align-self: center;
    font-size: 1rem; letter-spacing: .12em;
    color: var(--muted);
    padding: 1.15rem .8rem 0;
  }
}

/* finger-size targets + one step up for the small type */
@media (max-width: 640px) {
  body { font-size: 1.125rem; }   /* 17px -> 18px on phones */

  /* buttons - taller, and the hero pair shares the row full-width */
  .btn-book, .btn-quiet { font-size: 1rem; padding: .95rem 1.9rem; }
  .cta-row .btn-book, .cta-row .btn-quiet { flex: 1 1 11rem; text-align: center; }

  /* cards - the small links inside get air and size */
  .offer p { font-size: 1rem; }
  .offer .offer-cta { font-size: 1rem; padding: .25rem 0; }
  .offer .offer-links { gap: .55rem; margin-top: 1.1rem; }
  .offer .offer-more { font-size: .95rem; padding: .25rem 0; }
  .door .dd { font-size: 1rem; }
  .contact .direct { font-size: 1rem; }
  .quiet-line { font-size: 1rem; }
  .vid-more { font-size: 1rem; }

  /* newsletter - stacked, full-width, tall enough to hit */
  .newsletter p { font-size: 1rem; }
  .signup { flex-direction: column; gap: .8rem; }
  .signup input, .signup button { width: 100%; padding: .95rem 1.2rem; font-size: 1rem; }

  /* social links become quiet pills - real targets, same voice */
  .socials { flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
  .socials a {
    border: 1px solid var(--line-strong); border-radius: 2rem;
    padding: .68rem 1.1rem; color: var(--text);
  }

  /* footer - readable fine print, tappable links */
  .foot { font-size: .92rem; }
  .foot a { display: inline-block; padding: .35rem .2rem; }

  /* albums index - the line under each cover */
  .album-tile .at-line { font-size: 1rem; margin-top: .65rem; padding: .2rem 0; }

  /* list of works - bigger pills, bigger entries */
  .cat-nav { gap: .6rem; }
  .cat-nav a { font-size: .88rem; padding: .62rem 1.05rem; }
  .cat-top { font-size: .9rem; }
  .cat-top a { display: inline-block; padding: .5rem 0; }
  .work-entry p { font-size: .95rem; }
  .work-entry p:first-of-type { font-size: 1.02rem; }
  .page .tracklist { font-size: .95rem; }

  /* the book form - chips a thumb can land on
     (.field .choices outweighs the page's own inline styles) */
  .field .choices { gap: .8rem; }
  .field .choices label { padding: .8rem 1.2rem; font-size: 1.02rem; }
  .intake-form button.send { width: 100%; padding: 1.05rem 2rem; }
  /* the book page's quiet bar - same small words, real targets */
  header.quiet-bar .back { display: inline-block; font-size: .92rem; padding: .7rem .35rem; }
}