/* GRAMMAR index-list — Selaras. Off-white / off-black / satu pop deep rose. Radius 0 di semua elemen. */
:root {
  --canvas: #F9F8F6;
  --ink: #141414;
  --pop: #C43B5C;
  --line: rgba(20, 20, 20, .14);
  --display: "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }            /* sengaja native, tanpa smoothing */
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--display); font-size: 18px; line-height: 1.35;
  padding: 0 clamp(16px, 4vw, 56px);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Masthead: bukan hero. Satu baris brand, satu catatan, satu CTA. */
.masthead {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 32px;
  padding: 28px 0 18px; border-bottom: 1px solid var(--ink);
}
.brand { font-weight: 500; font-size: clamp(2.4rem, 5vw, 4rem); line-height: .95; margin: 0; letter-spacing: -.01em; }
.masthead__note { grid-column: 1; margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .02em; opacity: .7; }
.masthead__cta {
  grid-row: 1 / span 2; grid-column: 2; align-self: center;
  font-family: var(--mono); font-size: 12px; text-decoration: none; text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--ink); padding: 12px 18px; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.masthead__cta:active { transform: scale(.97); }
@media (hover:hover) and (pointer:fine) {
  .masthead__cta:hover { background: var(--ink); color: var(--canvas); }
}

/* Index */
.index { list-style: none; margin: 0; padding: 0; }
.row { border-bottom: 1px solid var(--line); }
.row__head {
  width: 100%; display: grid; grid-template-columns: 4ch 1fr auto; align-items: baseline; gap: 0 24px;
  padding: 22px 0; text-align: left;
}
.row__num { font-family: var(--mono); font-size: 12px; opacity: .55; }
.row__names {
  font-size: clamp(1.9rem, 5.2vw, 5rem); line-height: 1; font-weight: 500; letter-spacing: -.015em;
  transition: color 160ms ease, transform 220ms var(--ease-out);
}
.row__names em { font-style: italic; font-weight: 500; }
.row__meta { display: flex; gap: 24px; font-family: var(--mono); font-size: 12px; opacity: .7; white-space: nowrap; }
@media (hover:hover) and (pointer:fine) {
  .row__head:hover .row__names { color: var(--pop); transform: translateX(8px); }
}
.row__head[aria-expanded="true"] .row__names { color: var(--pop); }
.row__head:focus-visible { outline: 2px solid var(--pop); outline-offset: 4px; }

/* Body: melebar. Tinggi dianimasikan lewat grid-template-rows (bukan height) supaya murah. */
.row__body {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-out);
}
.row__body[hidden] { display: grid; }        /* kita kelola sendiri, jangan biarkan hidden mematikan grid */
.row__body.is-open { grid-template-rows: 1fr; }
.row__body > .row__story { overflow: hidden; min-height: 0; }
.row__story {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; padding: 0 0 36px 4ch;
  opacity: 0; transform: translateY(6px); transition: opacity 320ms ease 80ms, transform 420ms var(--ease-out) 80ms;
}
.row__body.is-open .row__story { opacity: 1; transform: none; }
/* Batas lebar foto: tanpa ini kolom 5fr di layar lebar membuat foto
   554x692px, teksnya cuma mengisi 280px, dan separuh baris jadi kosong.
   Dengan batas ini satu baris terbuka muat dalam satu layar. */
.row__figure { margin: 0; aspect-ratio: 4 / 5; background: #e9e6e1; overflow: hidden; max-width: min(34vw, 420px); }
.row__figure img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.15); }
.row__lede { font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.4; margin: 0 0 20px; max-width: 34ch; }
.row__facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; font-family: var(--mono); font-size: 12px; }
.row__facts dt { opacity: .55; text-transform: uppercase; letter-spacing: .06em; }
.row__facts dd { margin: 0; }

/* Cursor photo */
.cursor-photo {
  position: fixed; left: 0; top: 0; width: 220px; aspect-ratio: 4 / 5; pointer-events: none; z-index: 5;
  opacity: 0; transform: translate(-50%, -50%) scale(.96) rotate(-2deg);
  transition: opacity 180ms ease, transform 220ms var(--ease-out);
  will-change: transform;
}
.cursor-photo.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
.cursor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover:none), (pointer:coarse) { .cursor-photo { display: none; } }

/* Colophon */
.colophon { padding: 48px 0 40px; font-family: var(--mono); font-size: 12px; line-height: 1.6; }
.colophon p { margin: 0; }
.colophon__small { opacity: .55; }

/* Mobile */
@media (max-width: 720px) {
  .masthead { grid-template-columns: 1fr; }
  .masthead__cta { grid-row: auto; grid-column: 1; justify-self: start; }
  .row__head { grid-template-columns: 3ch 1fr; }
  .row__meta { grid-column: 2; margin-top: 8px; gap: 14px; }
  .row__story { grid-template-columns: 1fr; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .row__body, .row__story, .row__names, .cursor-photo, .masthead__cta { transition: none; }
  .cursor-photo { display: none; }
}


/* ===== Logo mark =====
   Dua cincin tipis; tumpangnya membentuk daun. Ikut warna teks lewat
   currentColor, jadi tidak perlu varian gelap/terang terpisah. */
.brand{display:flex;align-items:center;gap:.5rem}
.brand__mark{width:26px;height:18px;flex:none;overflow:visible}
@media (max-width:720px){ .brand__mark{width:22px;height:15px} }