/* sade — shared styles. warm paper, monochrome, lowercase, serif wordmark. */

:root{
  --paper:#f4efe6;       /* warm cream */
  --paper-2:#ece4d7;     /* slightly deeper paper (hover / panels) */
  --ink:#2c2722;         /* warm near-black */
  --ink-soft:#857a6c;    /* muted warm gray */
  --ink-faint:#b3a999;   /* faintest */
  --hair:#dcd4c5;        /* hairline */
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --gutter: clamp(20px, 6vw, 96px);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }

/* ── type helpers ─────────────────────────────────────────── */
.wm{ font-family:var(--serif); font-weight:400; letter-spacing:.01em; text-transform:lowercase; line-height:1; }
.serif{ font-family:var(--serif); }
.label{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.micro{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }

/* gentle entrance */
.fade-in{ animation:fade .9s ease both; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* ── homepage (variation A) ───────────────────────────────── */
.home{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
}
.home__wm{
  text-align:center;
  padding-top:clamp(40px, 7vh, 76px);
  font-size:clamp(26px, 3.2vw, 32px);
}

.split{ flex:1; display:flex; align-items:center; justify-content:center; padding:clamp(40px,6vh,80px) var(--gutter); }
.split__grid{ display:flex; align-items:stretch; width:100%; max-width:980px; }

.path{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(16px, 2.4vw, 24px);
  min-height:clamp(220px, 38vh, 340px);
  padding:clamp(40px,8vh,76px) clamp(28px,5vw,64px);
  border-radius:clamp(18px, 2vw, 26px);
  transition:background .4s ease, transform .4s ease;
}
.path:active{ transform:scale(.992); }
.path:hover{ background:var(--paper-2); }
.path:hover .path__sub{ color:var(--ink); }
.path__word{ font-family:var(--serif); text-transform:lowercase; font-size:clamp(64px, 10vw, 108px); line-height:.9; }
.path__sub{ transition:color .45s ease; text-align:center; }

.split__divider{ width:1px; align-self:stretch; background:var(--hair); margin:6px clamp(28px,7vw,96px); flex:none; }

.home__footer{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(18px,4vw,40px);
  padding:0 var(--gutter) clamp(34px,5vh,52px);
}
.home__footer a{ padding:10px 4px; transition:color .25s ease; }
.home__footer a:hover{ color:var(--ink-soft); }

/* ── inner page chrome ────────────────────────────────────── */
.chrome{
  display:flex; justify-content:space-between; align-items:center;
  padding:clamp(22px,3.4vw,40px) var(--gutter);
  border-bottom:1px solid var(--hair);
}
.chrome__wm{ font-family:var(--serif); text-transform:lowercase; font-size:clamp(21px,2.4vw,24px); transition:opacity .25s ease; }
.chrome__wm:hover{ opacity:.55; }
.nav{ display:flex; gap:clamp(22px,3vw,34px); }
.nav a{
  font-family:var(--serif); text-transform:lowercase; font-size:clamp(16px,2vw,18px);
  color:var(--ink-faint); padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .25s ease;
}
.nav a:hover{ color:var(--ink-soft); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink); }

main{ padding:0 var(--gutter) clamp(72px,11vh,110px); }

.page-head{ padding-top:clamp(56px,9vh,96px); max-width:680px; }
.page-head h1{ font-family:var(--serif); font-weight:400; text-transform:lowercase; font-size:clamp(58px,13vw,92px); line-height:.95; }
.page-head p{ font-family:var(--serif); font-size:clamp(19px,2.5vw,24px); line-height:1.5; margin-top:clamp(20px,3vh,30px); text-wrap:pretty; }
.page-head p .soft{ color:var(--ink-soft); }

.section{ margin-top:clamp(56px,8vh,84px); }
.section__label{ margin-bottom:18px; }

/* hairline index */
.index{ border-top:1px solid var(--hair); }
.row{
  display:grid; grid-template-columns:1fr 220px 88px; gap:28px; align-items:baseline;
  padding:clamp(22px,3vh,28px) 0; border-bottom:1px solid var(--hair);
  transition:opacity .25s ease;
}
.row:hover{ opacity:.55; }
.row__title{ font-family:var(--serif); font-size:clamp(21px,2.6vw,26px); }
.row__note{ font-size:14px; color:var(--ink-soft); text-wrap:pretty; }
.row__meta{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); text-align:right; }

/* music rows */
.track{ display:grid; grid-template-columns:40px 1fr 70px; gap:24px; align-items:baseline;
  padding:clamp(18px,2.6vh,22px) 0; border-bottom:1px solid var(--hair); transition:opacity .25s ease; }
.track:hover{ opacity:.55; }
.track__title{ font-family:var(--serif); font-size:clamp(20px,2.4vw,24px); }
.track__time{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--ink-faint); text-align:right; }

/* poem */
.poem{ font-family:var(--serif); font-style:italic; font-size:clamp(23px,3.4vw,30px); line-height:1.7; max-width:640px; text-wrap:pretty; }
.poem + .more{ display:inline-block; margin-top:clamp(24px,4vh,34px); transition:color .25s ease; }
.more:hover{ color:var(--ink-soft); }

/* photo grid */
.photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ph{
  position:relative; aspect-ratio:4/5; background-color:var(--paper-2);
  background-image:repeating-linear-gradient(45deg, transparent 0 9px, rgba(133,122,108,.14) 9px 10px);
  border:1px solid var(--hair);
}
.ph span{ position:absolute; left:10px; bottom:9px; }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:760px){
  /* homepage: stack the two paths, divider goes horizontal */
  .split{ padding:clamp(24px,4vh,48px) var(--gutter); }
  .split__grid{ flex-direction:column; max-width:440px; }
  .path{ min-height:clamp(180px,26vh,240px); padding:clamp(32px,5vh,48px) clamp(22px,6vw,32px); }
  .split__divider{ width:auto; height:1px; align-self:stretch; margin:clamp(8px,2vh,16px) 0; }

  /* index rows reflow: title + meta on a line, note beneath */
  .row{ grid-template-columns:1fr auto; gap:6px 16px; }
  .row__title{ grid-column:1; grid-row:1; }
  .row__meta{ grid-column:2; grid-row:1; }
  .row__note{ grid-column:1 / -1; grid-row:2; }

  .photos{ grid-template-columns:repeat(2,1fr); gap:14px; }
}

@media (max-width:440px){
  .photos{ grid-template-columns:1fr; }
  .nav{ gap:20px; }
}