/* ============================================================
   RELIEQ — sistem desain
   Ink & Vellum: bagian gelap adalah sampul buku, bagian terang
   adalah halamannya. Rel vertikal di kiri adalah punggung buku.
   ============================================================ */

:root{
  /* warna */
  --ink:        #101F1B;
  --ink-soft:   #1B302A;
  --ink-line:   #2C443C;
  --vellum:     #EDE7DB;
  --vellum-2:   #E1D9C9;
  --vellum-3:   #D2C7B2;
  --umber:      #2A2620;
  --umber-soft: #5C534494;
  --brass:      #A88450;
  --brass-lt:   #C9A879;
  --sepia:      #6E6151;

  /* huruf */
  --display: "Newsreader", "Bitstream Charter", Georgia, serif;
  --body:    "Spectral", "Bitstream Charter", Georgia, serif;
  --util:    "Archivo", "Carlito", "Helvetica Neue", Arial, sans-serif;

  /* ukuran */
  --rail: 74px;
  --pad: clamp(1.5rem, 5vw, 5.5rem);
  --measure: 36rem;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--vellum);
  color:var(--umber);
  font-family:var(--body);
  font-size:clamp(1.06rem,1rem + .34vw,1.22rem);
  line-height:1.78;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  padding-left:var(--rail);
}

img{ max-width:100%; height:auto; display:block; }

::selection{ background:var(--brass); color:var(--vellum); }

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:1px;
}

/* ---------- tipografi ---------- */

h1,h2,h3,h4{ font-family:var(--display); font-weight:500; margin:0; line-height:1.14;
  text-wrap:balance; letter-spacing:-.005em; }

.display-xl{ font-size:clamp(2.3rem,1.5rem + 3.2vw,4.5rem); letter-spacing:-.016em; line-height:1.1; }
.display-l { font-size:clamp(1.95rem,1.3rem + 2.6vw,3.3rem); letter-spacing:-.012em; }
.display-m { font-size:clamp(1.65rem,1.2rem + 1.8vw,2.6rem); }
.display-s { font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem); }

.eyebrow{
  font-family:var(--util);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 1.4rem;
}
.eyebrow--muted{ color:var(--sepia); }

.lede{
  font-size:clamp(1.18rem,1.05rem + .62vw,1.5rem);
  line-height:1.65;
  font-weight:300;
}

.prose p{ margin:0 0 1.15em; max-width:var(--measure); }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ font-weight:500; color:var(--umber); }

.muted{ color:var(--sepia); }
.center{ text-align:center; }
.center .prose p{ margin-left:auto; margin-right:auto; }

/* ornamen: garis dengan belah ketupat di tengah */
.orn{
  display:flex; align-items:center; justify-content:center; gap:.85rem;
  margin:2rem 0;
}
.orn::before,.orn::after{
  content:""; height:1px; width:clamp(38px,7vw,84px);
  background:linear-gradient(90deg,transparent,var(--brass));
}
.orn::after{ transform:scaleX(-1); }
.orn i{ width:7px; height:7px; background:var(--brass); transform:rotate(45deg); }
.center .orn{ margin-inline:auto; }

/* ---------- rel punggung buku ---------- */

.spine{
  position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:60;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; padding:1.6rem 0;
  border-right:1px solid rgba(168,132,80,.28);
}
.spine::after{
  content:""; position:absolute; inset:14px auto 14px 50%;
  width:1px; transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(168,132,80,.30) 12%,rgba(168,132,80,.30) 88%,transparent);
}
.spine__mark{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--display); font-size:1.02rem;
  letter-spacing:.62em; text-transform:uppercase;
  color:var(--brass-lt); text-decoration:none; position:relative; z-index:1;
  background:var(--ink); padding:1.1rem 0;
  transition:color .35s var(--ease);
}
.spine__mark:hover{ color:var(--vellum); }
.spine__folio{
  font-family:var(--util); font-size:.62rem; letter-spacing:.28em;
  color:var(--brass); background:var(--ink); padding:.8rem 0; position:relative; z-index:1;
}

/* ---------- navigasi ---------- */

.nav{
  position:fixed; top:0; left:var(--rail); right:0; z-index:50;
  display:flex; align-items:center; justify-content:flex-end; gap:2.4rem;
  padding:1.5rem var(--pad);
  transition:background .45s var(--ease), padding .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(16,31,27,.94);
  backdrop-filter:saturate(140%) blur(10px);
  padding-block:.85rem;
  border-bottom-color:rgba(168,132,80,.22);
}
.nav__mark{ display:none; }
.nav__links{ display:flex; align-items:center; gap:2rem; }
.nav a{
  font-family:var(--util); font-size:.8rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--vellum-2); text-decoration:none; position:relative;
  padding-block:.35rem;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--brass); transition:right .4s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ right:0; }
.nav a[aria-current="page"]{ color:var(--brass-lt); }

/* nav di atas latar terang */
.nav--onlight:not(.is-stuck) a{ color:var(--umber); }
.nav--onlight:not(.is-stuck) .nav__mark{ color:var(--ink); }
.nav--onlight:not(.is-stuck) .nav__toggle span{ background:var(--ink); }

.nav__toggle{
  display:none; width:34px; height:22px; border:0; background:none;
  padding:0; cursor:pointer; position:relative;
}
.nav__toggle span{
  position:absolute; left:0; right:0; height:1.5px; background:var(--vellum);
  transition:transform .4s var(--ease), opacity .25s;
}
.nav__toggle span:nth-child(1){ top:2px; }
.nav__toggle span:nth-child(2){ top:10px; }
.nav__toggle span:nth-child(3){ top:18px; }
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ---------- kerangka halaman ---------- */

.section{ padding:clamp(4.5rem,9vw,9rem) var(--pad); }
.section--tight{ padding-block:clamp(3.2rem,6vw,5.5rem); }
.section--ink{ background:var(--ink); color:var(--vellum-2); }
.section--ink h1,.section--ink h2,.section--ink h3{ color:var(--vellum); }
.section--ink .muted{ color:#A9A08D; }
.section--ink .eyebrow--muted{ color:#8E8471; }
.section--ink .prose strong{ color:var(--vellum); }
.section--tone{ background:var(--vellum-2); }

.wrap{ max-width:1180px; margin-inline:auto; }
.wrap--narrow{ max-width:780px; margin-inline:auto; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.grid-2--tilt{ grid-template-columns:.85fr 1.15fr; }

.head{ margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.head .display-l,.head .display-m{ margin-bottom:1.4rem; }

/* ---------- tombol ---------- */

.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--util); font-size:.84rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 2.1rem; border:1px solid var(--brass); color:var(--brass);
  background:none; cursor:pointer; position:relative; overflow:hidden;
  transition:color .4s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--brass);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.btn:hover::before{ transform:scaleX(1); }
.btn span{ position:relative; z-index:1; }
.btn:hover{ color:var(--ink); }
.btn--solid{ background:var(--brass); color:var(--ink); }
.btn--solid::before{ background:var(--ink); }
.btn--solid:hover{ color:var(--brass); }
.btn--ghost{ border-color:currentColor; color:inherit; }
.btn--ghost::before{ background:currentColor; }
.section--ink .btn--ghost:hover{ color:var(--ink); }
.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.center .btn-row{ justify-content:center; }

.link{
  font-family:var(--util); font-size:.8rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; text-decoration:none;
  color:var(--brass); border-bottom:1px solid rgba(168,132,80,.4);
  padding-bottom:.3rem; transition:border-color .3s;
}
.link:hover{ border-color:var(--brass); }

/* ---------- hero halaman judul ---------- */

.hero{
  min-height:100svh; background:var(--ink); color:var(--vellum);
  display:flex; flex-direction:column; justify-content:center;
  padding:8rem var(--pad) 4rem; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(115% 78% at 50% 6%, rgba(201,168,121,.13), transparent 62%);
  pointer-events:none;
}
.hero__inner{ position:relative; max-width:1120px; margin-inline:auto; text-align:center; }
.hero h1{ color:var(--vellum); }
.hero .lede{ color:#B9B0A0; max-width:42rem; margin:0 auto; text-wrap:pretty; }
.hero__folio{
  position:absolute; left:0; right:0; bottom:2.4rem; text-align:center;
  font-family:var(--util); font-size:.62rem; letter-spacing:.34em; color:var(--brass);
}
.hero--page{ min-height:64svh; }

/* garis vertikal yang menetes dari hero */
.hero__drop{
  width:1px; height:clamp(46px,7vw,84px); margin:2.8rem auto 0;
  background:linear-gradient(180deg,var(--brass),transparent);
  transform-origin:top; animation:drop 1.4s .9s var(--ease) both;
}
@keyframes drop{ from{ transform:scaleY(0);} to{ transform:scaleY(1);} }

/* ---------- kartu paket ---------- */

.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.2vw,2rem); align-items:stretch; }
.tiers--two{ grid-template-columns:repeat(2,1fr); }
.tier{
  background:var(--vellum); padding:clamp(1.6rem,2.6vw,2.3rem);
  border:1px solid var(--vellum-3); display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.tier:hover{ transform:translateY(-6px); border-color:var(--brass);
  box-shadow:0 22px 44px -26px rgba(42,38,32,.42); }
.section--tone .tier{ background:var(--vellum); }
.tier__img{ margin:0 0 1.6rem; }
.tier__img{ background:transparent; }
.tier__img img{
  width:100%; aspect-ratio:1.12; object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 26px 30px rgba(42,38,32,.30)) drop-shadow(0 6px 10px rgba(42,38,32,.18));
}
.tier__name{
  font-family:var(--util); font-size:.8rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--brass); margin-bottom:.7rem;
}
.tier__tag{ font-family:var(--display); font-size:1.62rem; line-height:1.25; margin-bottom:1rem; }
.tier__price{
  font-family:var(--util); font-size:.9rem; letter-spacing:.13em;
  color:var(--sepia); text-transform:uppercase; margin-bottom:1.3rem;
}
.tier__desc{ font-size:1.04rem; color:var(--sepia); margin:0 0 1.8rem; }
.tier__list{ list-style:none; margin:0 0 2rem; padding:0; font-size:1.02rem; }
.tier__list li{ padding:.55rem 0 .55rem 1.3rem; position:relative; border-top:1px solid var(--vellum-2); }
.tier__list li::before{
  content:""; position:absolute; left:0; top:1.15rem;
  width:5px; height:5px; background:var(--brass); transform:rotate(45deg);
}
.tier__foot{ margin-top:auto; }
.tier--flag{ position:relative; }
.tier--flag{ border-color:var(--brass); }
.tier--flag::after{
  content:"Paling banyak dipilih"; position:absolute; top:-1px; right:-1px;
  font-family:var(--util); font-size:.58rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; background:var(--brass); color:var(--ink);
  padding:.42rem .8rem;
}

/* ---------- deskripsi paket panjang ---------- */

.pkg{ padding:clamp(4rem,8vw,7.5rem) var(--pad); border-top:1px solid var(--vellum-3); }
.pkg--ink{ background:var(--ink); color:var(--vellum-2); border-top-color:var(--ink-line); }
.pkg--ink h2{ color:var(--vellum); }
.pkg__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center; max-width:1180px; margin-inline:auto; }
.pkg__grid--rev > .pkg__media{ order:2; }
.pkg__price{
  font-family:var(--display); font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
  color:var(--brass); margin:.4rem 0 1.8rem;
}
.pkg__fit{ margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--vellum-3); font-size:1.06rem; }
.pkg--ink .pkg__fit{ border-top-color:var(--ink-line); }
.pkg__fit p{ margin:0 0 .7rem; max-width:none; }
.pkg__fit b{ font-family:var(--util); font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); display:block; margin-bottom:.2rem; }

/* ---------- tabel spesifikasi ---------- */

.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--vellum-3); }
table.spec{ width:100%; min-width:880px; border-collapse:collapse; font-size:1rem; }
table.spec th,table.spec td{ padding:1.15rem 1.25rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--vellum-2); }
table.spec thead th{
  background:var(--ink); color:var(--vellum); font-family:var(--util);
  font-size:.8rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  position:sticky; top:0; z-index:2;
}
table.spec tbody th{
  font-family:var(--util); font-weight:500; font-size:.86rem; letter-spacing:.04em;
  color:var(--umber); background:var(--vellum-2); width:22%;
  position:sticky; left:0; z-index:1;
}
table.spec tbody tr:hover td{ background:#F4EFE5; }
table.spec .num{ font-variant-numeric:tabular-nums; }
table.addon{ width:100%; border-collapse:collapse; font-size:1.06rem; }
table.addon td{ padding:1.05rem 0; border-bottom:1px solid var(--vellum-3); vertical-align:top; }
table.addon td:last-child{ text-align:right; white-space:nowrap; padding-left:1.5rem; color:var(--brass); font-family:var(--util); font-size:.98rem; }

/* ---------- langkah proses ---------- */

.steps{ counter-reset:step; border-top:1px solid var(--ink-line); }
.step{
  counter-increment:step; display:grid; grid-template-columns:5.5rem 1fr;
  gap:clamp(1.5rem,4vw,3.5rem); padding:clamp(2rem,4vw,3rem) 0;
  border-bottom:1px solid var(--ink-line); align-items:start;
}
.step__no{
  font-family:var(--display); font-size:clamp(1.8rem,1.4rem + 1.4vw,2.7rem);
  color:var(--brass); line-height:1;
}
.step__no::before{ content:counter(step,decimal-leading-zero); }
.step h3{ margin-bottom:.8rem; }
.step p{ max-width:44rem; margin:0; color:#A9A08D; }
.section--tone .steps,.section--tone .step{ border-color:var(--vellum-3); }
.section--tone .step p{ color:var(--sepia); }

/* ---------- prinsip ---------- */

.tenets{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); }
.tenet{ background:var(--ink); padding:clamp(1.8rem,3.4vw,2.7rem); }
.tenet h3{ font-family:var(--display); font-size:1.45rem; margin-bottom:.75rem; color:var(--vellum); }
.tenet p{ margin:0; font-size:1.05rem; color:#A9A08D; }
.tenet__no{ font-family:var(--util); font-size:.62rem; letter-spacing:.28em; color:var(--brass); display:block; margin-bottom:1rem; }

/* ---------- karya ---------- */

.work{ padding:clamp(3.5rem,7vw,6.5rem) var(--pad); border-top:1px solid var(--vellum-3); }
.work__grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; max-width:1180px; margin-inline:auto; }
.work__grid--rev > .work__media{ order:2; }
.work__meta{ list-style:none; margin:2rem 0 0; padding:0; font-size:1rem; }
.work__meta li{ display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; padding:.65rem 0; border-top:1px solid var(--vellum-3); }
.work__meta b{ font-family:var(--util); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--sepia); padding-top:.2rem; }
.quote{
  font-family:var(--display); font-size:clamp(1.15rem,1rem + .7vw,1.55rem);
  line-height:1.45; font-style:italic; color:var(--umber);
  border-left:2px solid var(--brass); padding-left:1.5rem; margin:2rem 0 0;
}
.chaptersM{ font-size:1rem; color:var(--sepia); margin-top:1.6rem; }

/* ---------- formulir ---------- */

.form{ display:grid; gap:1.5rem; }
.field{ display:grid; gap:.55rem; }
.field label{
  font-family:var(--util); font-size:.76rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sepia);
}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:1.1rem; color:var(--umber);
  background:transparent; border:0; border-bottom:1px solid var(--vellum-3);
  padding:.75rem 0; width:100%; transition:border-color .3s;
}
.field textarea{ resize:vertical; min-height:6.5rem; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--brass);
}
.field input::placeholder,.field textarea::placeholder{ color:#A79C88; }
.field--half{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.field__err{ font-family:var(--util); font-size:.7rem; letter-spacing:.06em; color:#9C4A3C; min-height:1rem; }
.form__note{ font-size:.98rem; color:var(--sepia); margin:0; }
.form__ok{
  display:none; border:1px solid var(--brass); padding:1.2rem 1.4rem;
  font-size:.95rem; background:#F4EFE5;
}
.form__ok.is-on{ display:block; }

.contact__list{ list-style:none; margin:0; padding:0; }
.contact__list li{ padding:1.15rem 0; border-top:1px solid var(--ink-line); }
.contact__list b{ font-family:var(--util); font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); display:block; margin-bottom:.35rem; }
.contact__list a{ color:var(--vellum); text-decoration:none; font-size:1.12rem; border-bottom:1px solid rgba(201,168,121,.35); }
.contact__list a:hover{ border-bottom-color:var(--brass-lt); }

/* ---------- FAQ ---------- */

.faq{ border-top:1px solid var(--vellum-3); }
.faq details{ border-bottom:1px solid var(--vellum-3); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.5rem 2.5rem 1.5rem 0;
  font-family:var(--display); font-size:clamp(1.1rem,1rem + .45vw,1.35rem);
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:2.05rem;
  width:11px; height:11px; border-right:1px solid var(--brass); border-bottom:1px solid var(--brass);
  transform:rotate(45deg); transition:transform .35s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:2.35rem; }
.faq .faq__a{ padding:0 2.5rem 1.8rem 0; color:var(--sepia); font-size:1.08rem; }
.faq .faq__a p{ margin:0 0 .9rem; max-width:46rem; }
.faq .faq__a p:last-child{ margin:0; }

/* ---------- pita penutup ---------- */

.cta{ background:var(--ink); color:var(--vellum); padding:clamp(4rem,8vw,7rem) var(--pad); text-align:center; }
.cta h2{ color:var(--vellum); max-width:20ch; margin-inline:auto; }
.cta p{ color:#A9A08D; max-width:36rem; margin:1.4rem auto 0; }

/* ---------- kaki ---------- */

.foot{ background:var(--ink); color:#8E8471; border-top:1px solid var(--ink-line); padding:clamp(2.8rem,5vw,4rem) var(--pad) 2.2rem; }
.foot__grid{ max-width:1180px; margin-inline:auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.foot h4{ font-family:var(--util); font-size:.66rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); margin:0 0 1.1rem; }
.foot ul{ list-style:none; margin:0; padding:0; font-size:1rem; }
.foot li{ margin-bottom:.6rem; }
.foot a{ color:#A9A08D; text-decoration:none; transition:color .3s; }
.foot a:hover{ color:var(--vellum); }
.foot__mark{ font-family:var(--display); font-size:1.4rem; letter-spacing:.4em; color:var(--vellum); margin:0 0 .9rem; }
.foot__bar{
  max-width:1180px; margin:2.8rem auto 0; padding-top:1.5rem;
  border-top:1px solid var(--ink-line); display:flex; flex-wrap:wrap;
  gap:1rem; justify-content:space-between;
  font-family:var(--util); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}

/* ---------- animasi masuk ---------- */

.rise{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.rise.is-in{ opacity:1; transform:none; }
.rise[data-d="1"]{ transition-delay:.1s; }
.rise[data-d="2"]{ transition-delay:.2s; }
.rise[data-d="3"]{ transition-delay:.3s; }

@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; transition:none; }
  .hero__drop{ animation:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- responsif ---------- */

@media (max-width:1080px){
  .tiers{ grid-template-columns:1fr; }
  .tier--flag::after{ top:auto; bottom:0; }
}

@media (max-width:900px){
  :root{ --rail:0px; }
  body{ padding-left:0; }
  .spine{ display:none; }
  .nav{ left:0; justify-content:space-between; background:rgba(16,31,27,.94); backdrop-filter:blur(10px); padding-block:1rem; }
  .nav__mark{
    display:block; font-family:var(--display); font-size:1rem;
    letter-spacing:.42em; text-transform:uppercase; color:var(--vellum); text-decoration:none;
  }
  .nav__mark::after{ display:none; }
  .nav__toggle{ display:block; }
  .nav__links{
    position:fixed; inset:0; height:100svh; padding:6rem var(--pad) 3rem;
    background:var(--ink); flex-direction:column; align-items:flex-start;
    justify-content:center; gap:1.9rem; overflow-y:auto;
    transform:translateY(-101%); transition:transform .5s var(--ease); z-index:-1;
  }
  .nav.is-open .nav__links{ transform:none; }
  .nav__links a{ font-size:1rem; letter-spacing:.16em; }
  .grid-2,.grid-2--tilt,.pkg__grid,.work__grid,.foot__grid{ grid-template-columns:1fr; }
  .pkg__grid--rev > .pkg__media,.work__grid--rev > .work__media{ order:0; }
  .tenets{ grid-template-columns:1fr; }
  .field--half{ grid-template-columns:1fr; }
  .work__meta li{ grid-template-columns:1fr; gap:.2rem; }
}

@media (max-width:560px){
  .step{ grid-template-columns:1fr; gap:.6rem; }
  .btn{ width:100%; justify-content:center; }
  table.spec tbody th{ position:static; }
}

@media print{
  .nav,.spine,.hero__drop{ display:none; }
  body{ padding-left:0; background:#fff; color:#000; }
}

/* gambar sampul potret pada bagian paket */
.pkg__media img{
  width:100%; height:auto; margin-inline:auto;
  filter:drop-shadow(0 30px 36px rgba(42,38,32,.30)) drop-shadow(0 8px 12px rgba(42,38,32,.16));
}
.pkg--ink .pkg__media img{
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 8px 14px rgba(0,0,0,.35));
}
.work__media img{
  width:100%;
  filter:drop-shadow(0 28px 34px rgba(42,38,32,.28)) drop-shadow(0 7px 11px rgba(42,38,32,.15));
}
figure.tier img{
  width:100%; aspect-ratio:1.5; object-fit:contain;
  filter:drop-shadow(0 20px 26px rgba(42,38,32,.26));
}


/* ---------- dulu & sekarang ---------- */

.pairs{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(.8rem,1.6vw,1.4rem); }
.pair{ margin:0; cursor:pointer; }
.pair__box{
  position:relative; aspect-ratio:1; overflow:hidden;
  border:1px solid var(--ink-line); background:var(--ink-soft);
}
.pair__box img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .9s var(--ease);
}
.pair__box img.now{ opacity:0; }
.pair.is-now .pair__box img.now{ opacity:1; }
.pair.is-now .pair__box img.then{ opacity:0; }
.pair__tag{
  position:absolute; left:0; bottom:0; z-index:2;
  font-family:var(--util); font-size:.58rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; background:var(--ink); color:var(--brass);
  padding:.42rem .75rem;
}
.pair figcaption{
  margin-top:.9rem; font-family:var(--util); font-size:.82rem;
  letter-spacing:.1em; color:#A9A08D;
}
.pairs__hint{
  font-family:var(--util); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass); margin-top:2rem;
}

/* ---------- pita foto lebar ---------- */

.band{ position:relative; height:clamp(260px,38vw,460px); overflow:hidden; background:var(--ink); }
.band img{ width:100%; height:100%; object-fit:cover; opacity:.62; }
.band__cap{
  position:absolute; inset:auto 0 0 0; padding:clamp(1.5rem,4vw,3rem) var(--pad);
  background:linear-gradient(180deg,transparent,rgba(16,31,27,.9));
  font-family:var(--display); font-size:clamp(1.15rem,1rem + .8vw,1.7rem);
  color:var(--vellum); font-style:italic;
}
.band__cap span{ display:block; max-width:34rem; margin-inline:auto; text-align:center; }

.figure-side img{ border:1px solid var(--vellum-3); }
.figure-side figcaption{
  margin-top:.9rem; font-family:var(--util); font-size:.82rem;
  letter-spacing:.1em; color:var(--sepia);
}

@media (max-width:1080px){ .pairs{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .pairs{ grid-template-columns:repeat(2,1fr); } }


/* ---------- penyesuaian untuk WordPress ----------
   Beberapa gaya sebaris pada teks yang bisa disunting dihapus oleh
   penyaring keamanan WordPress, jadi aturannya dipindah ke sini. */

.contact__list a{ color:var(--umber); border-bottom:1px solid rgba(168,132,80,.4); }
.contact__list a:hover{ border-bottom-color:var(--brass); }
.contact__list li{ border-top:1px solid var(--vellum-3); }
.section--ink .contact__list a{ color:var(--vellum); border-bottom-color:rgba(201,168,121,.35); }
.section--ink .contact__list a:hover{ border-bottom-color:var(--brass-lt); }
.section--ink .contact__list li{ border-top-color:var(--ink-line); }

figure.tier .tier__tag{ font-size:1.3rem; }
figure.tier .tier__desc{ margin:0; }
.chaptersM b{
  font-family:var(--util); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sepia); font-weight:600;
}
.foot__grid > div > p{ margin:0; font-size:1rem; max-width:26rem; }
table.addon td .muted{ font-size:.9rem; }
.tablewrap + .muted{ font-size:.95rem; }