/* ==========================================================================
   NIVAKANA — About page
   One continuous paper surface that travels sideways. The strips carry no
   background and no edges of their own: what made the earlier version read as
   a deck of slides was per-panel backgrounds and a dark hero among them, not
   the horizontality itself.
   ========================================================================== */

.page-about,
.page-about main{ background:var(--paper); color:var(--ink); }

.hrail{ position:relative; overflow:hidden; height:100vh; }
.hrail__track{
  display:flex; flex-wrap:nowrap; align-items:center;
  width:max-content; height:100vh;
  background:var(--paper);          /* one surface for the whole journey */
  will-change:transform;
}

/* Strips are sized by their content, not forced to the viewport, so the page
   flows past rather than clicking from slide to slide. */
.hstrip{
  position:relative; flex:0 0 auto;
  height:100vh; display:flex; align-items:center;
  padding-inline:clamp(3rem, 7vw, 9rem);
}
.hstrip--open{ padding-left:var(--gutter); }
.hstrip__inner{ position:relative; z-index:2; }
.hstrip__inner--split{ display:flex; align-items:center; gap:clamp(2rem,5vw,5rem); }

.hstrip__title{ font-size:clamp(2rem,4.4vw,4rem); line-height:1.06; letter-spacing:-.025em; }
.hstrip__portrait{ margin:0; width:clamp(190px,21vw,320px); flex:none; }
.hstrip__portrait img{
  display:block; width:100%; height:auto; aspect-ratio:854 / 1280;
  object-fit:cover; border-radius:var(--radius-lg); border:1.5px solid var(--line);
}

[data-panel-el]{ will-change:transform, opacity; }

/* ---- the statement ---- */
.hstrip--statement .hstrip__inner{ width:min(46ch, 70vw); }
.statement{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.4rem,2.8vw,2.5rem); line-height:1.2; letter-spacing:-.02em;
}
.statement .w{ display:inline-block; }
.statement__mark{ margin-top:var(--s-10,2.5rem); display:grid; place-items:center; }
.statement__mark img{ width:48px; height:auto; opacity:.5; }

/* ---- the chapters: naturally horizontal, so it belongs here ---- */
.hstrip--path .hstrip__inner{ width:min(1200px, 86vw); }
.path{ position:relative; }
.path__svg{ width:100%; height:clamp(100px,12vw,180px); color:var(--ink); overflow:visible; }
.path__line{ stroke-dasharray:1; stroke-dashoffset:1; }
.path__marks{
  list-style:none; margin:var(--s-8) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-4);
}
.path__mark{ display:grid; gap:.45rem; justify-items:start; align-content:start; }
.path__dot{ width:14px; height:14px; border-radius:50%;
  background:var(--tint); border:1.5px solid var(--line); }
.path__n{ font-size:var(--step--1); font-weight:600;
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--ink-muted); }
.path__label{ font-family:var(--font-display); font-size:var(--step-1);
  letter-spacing:-.01em; line-height:1.15; }

/* ---- her story ---- */
.hstrip--story .hstrip__inner{ width:min(1000px, 84vw); }
.arch{ margin:0; flex:none; width:clamp(200px,22vw,320px); }
.arch__media{
  position:relative; width:100%; aspect-ratio:854 / 1280;
  clip-path:inset(42% 46% 0 46% round 50% 50% 0 0);
  will-change:clip-path;
  border:1.5px solid var(--line);
  border-radius:999px 999px var(--radius-lg) var(--radius-lg);
  overflow:hidden;
}
.arch__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hstrip--story .u-lead{ max-width:46ch; }

/* ---- the books ---- */
.mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); }
.mini-card{ display:grid; gap:var(--s-4); justify-items:start; }
.mini-card img{ width:clamp(130px,13vw,210px); height:auto; display:block;
  transition:transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out); }
.mini-card:hover img{ transform:translateY(-6px); filter:drop-shadow(0 18px 30px rgba(0,0,0,.22)); }

/* ---- the close ---- */
.close__ctas{ display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:center; }

/* ==========================================================================
   THE GARDEN
   ========================================================================== */
.flower{
  position:absolute; z-index:1;
  left:var(--fx); top:var(--fy);
  transform:translate(-50%,-50%) scale(var(--fs,1));
  width:auto; height:clamp(120px, 15vw, 250px);
  pointer-events:none; user-select:none; opacity:.9;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.12));
}

.garden-bf{
  position:fixed; top:0; left:0; z-index:700;
  width:clamp(44px, 4.6vw, 74px);
  pointer-events:none; opacity:0;
  will-change:transform;
}
.garden-bf__dir{ will-change:transform; }
.garden-bf img{
  width:100%; height:auto; display:block; transform-origin:50% 50%;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.2));
  will-change:transform;
}

/* ==========================================================================
   NO HORIZONTAL — touch and reduced motion get the same content stacked
   ========================================================================== */
@media (max-width:999px){
  .hrail{ height:auto !important; overflow:visible; }
  .hrail__track{ display:block; width:auto; height:auto; transform:none !important; }
  .hstrip{
    height:auto; display:block;
    padding:clamp(3.5rem,10vw,6rem) var(--gutter);
  }
  .hstrip + .hstrip{ border-top:1.5px solid var(--hairline); }
  .hstrip__inner,
  .hstrip--statement .hstrip__inner,
  .hstrip--path .hstrip__inner,
  .hstrip--story .hstrip__inner{ width:auto; }
  .hstrip__inner--split{ display:grid; gap:var(--s-10,2.5rem); }
  .path__marks{ grid-template-columns:1fr 1fr; }
  .mini-grid{ grid-template-columns:repeat(3,1fr); }
  .flower{ height:clamp(84px,20vw,150px); opacity:.55; }
  .garden-bf{ display:none; }
}

.no-motion .hrail{ height:auto !important; overflow:visible; }
.no-motion .hrail__track{ display:block; width:auto; height:auto; transform:none !important; }
.no-motion .hstrip{ height:auto; display:block; padding:clamp(3.5rem,10vw,6rem) var(--gutter); }
.no-motion .hstrip + .hstrip{ border-top:1.5px solid var(--hairline); }
.no-motion .hstrip__inner--split{ display:grid; gap:2.5rem; }
.no-motion .path__line{ stroke-dasharray:none; stroke-dashoffset:0; }
.no-motion .arch__media{ clip-path:none; }
.no-motion .garden-bf{ display:none; }
.no-motion [data-panel-el]{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){ .garden-bf{ display:none; } }