/* ============================================================
   chika.review — the conservator's sun-warmed bench
   wabi-sabi · asymmetric · eclectic-hybrid · sepia-nostalgic
   ============================================================ */

:root{
  --paper:#f3e9d4;        /* aged manuscript — bench surface */
  --skylight:#fbf5e7;     /* skylight cream */
  --linen:#e8d6b3;        /* raw-linen highlight — plinth/card */
  --honey:#c8a45c;        /* warm honey-amber — links/accents */
  --terracotta:#b8732e;   /* terracotta umber — CTAs/tags */
  --caramel:#8a6b3d;      /* caramel sepia — secondary text */
  --ink:#5a3f2c;          /* conservator's ink — body */
  --bitumen:#2c1f12;      /* bitumen black — display only */
  --gold:#d4af37;         /* kintsugi gold */
  --olive:#9bb37a;        /* pressed-olive green — botanicals */
  --hairline:#d4c2a3;
}

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

html{scroll-behavior:smooth}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Cardo",Georgia,serif;
  font-size:1.05rem;
  line-height:1.7;
  letter-spacing:0.4px;
  overflow-x:hidden;
  position:relative;
  /* faint vertical wood grain */
  background-image:repeating-linear-gradient(
    90deg,
    rgba(90,63,44,0.04) 0px,
    rgba(90,63,44,0.04) 1px,
    transparent 1px,
    transparent 7px),
    repeating-linear-gradient(
    90deg,
    rgba(44,31,18,0.025) 0px,
    rgba(44,31,18,0.025) 2px,
    transparent 2px,
    transparent 34px);
}

/* the sun-slow light sweep — the only always-on animation */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(112deg,
    transparent 35%,
    rgba(255,238,196,0.55) 50%,
    transparent 70%);
  background-size:280% 100%;
  mix-blend-mode:soft-light;
  animation:sun-sweep 90s ease-in-out infinite alternate;
}
@keyframes sun-sweep{
  from{background-position:120% 0%}
  to{background-position:-40% 0%}
}

/* tilted top-down bench feel */
.bench-section{
  position:relative;
  z-index:1;
  padding:6vh 12vw 8vh;
  scroll-snap-align:start;
}
@supports(transform:perspective(1px)){
  .bench-section{
    transform:perspective(2400px) rotateX(1.4deg);
    transform-origin:center top;
  }
}

html{scroll-snap-type:y proximity}

/* ----------------------- pinned brass index card ----------------------- */
.index-card{
  position:fixed;
  top:1.4rem;right:1.4rem;
  z-index:50;
  width:200px;
  background:linear-gradient(150deg,#e8d6b3,#d8c39a);
  border:1px solid var(--hairline);
  border-radius:2px;
  padding:0.85rem 1rem 1rem;
  box-shadow:2px 4px 12px rgba(44,31,18,0.22);
  transform:rotate(2.2deg);
  font-family:"Caveat",cursive;
}
.index-card__corner{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e7c873,#a87f2d);
  box-shadow:1px 2px 3px rgba(44,31,18,0.4);
}
.index-card__label{
  font-family:"Major Mono Display",monospace;
  font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--caramel);margin-bottom:0.4rem;text-align:center;
}
.index-card a{
  display:block;
  font-size:1.18rem;
  color:var(--ink);
  text-decoration:none;
  padding:0.12rem 0;
  transform:rotate(-1.4deg);
  transition:color .35s,transform .35s;
}
.index-card a:nth-child(3){transform:rotate(0.8deg)}
.index-card a:nth-child(4){transform:rotate(-0.6deg)}
.index-card a:hover{color:var(--terracotta);transform:rotate(0deg) translateX(2px)}

/* ----------------------- margins (botanical specimens + marginalia) ----------------------- */
.margin{
  position:absolute;top:0;
  width:11vw;
  display:flex;flex-direction:column;gap:3rem;
  align-items:center;
  pointer-events:none;
  z-index:2;
  padding-top:8vh;
}
.margin--left{left:0.6vw}
.margin--right{right:0.6vw}
.botanical{
  width:80%;max-width:140px;height:auto;
  color:var(--olive);
  fill:var(--olive);
  opacity:0.65;
  filter:drop-shadow(1px 2px 2px rgba(90,63,44,0.12));
}
.protractor{width:90%;max-width:120px;color:var(--caramel);opacity:0.55}
.protractor svg{width:100%;height:auto}
.marginalia{
  font-family:"Caveat",cursive;
  font-size:1.12rem;font-weight:500;
  color:var(--ink);
  line-height:1.25;
  text-align:center;
  transform:rotate(var(--mrot,-1.5deg));
  position:relative;
  padding-bottom:0.3rem;
}
.ink-rule{
  display:block;height:2px;
  background:var(--terracotta);
  margin-top:0.18rem;
  border-radius:2px;
  opacity:0.8;
  transform:skewX(-12deg);
}

/* ----------------------- hero ----------------------- */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
}
.hero__inner{position:relative;z-index:3;max-width:54vw}
.overline{
  font-family:"Major Mono Display",monospace;
  font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--caramel);
  margin-bottom:1.6rem;
}
.hero__title{
  font-family:"Cormorant Garamond",serif;
  line-height:0.92;
  letter-spacing:-0.02em;
  color:var(--bitumen);
  margin-bottom:2rem;
}
.hero__word{display:block;font-size:clamp(3.4rem,9.5vw,8rem)}
.hero__word--upright{font-weight:600;font-style:normal}
.hero__word--italic{
  font-weight:300;font-style:italic;
  color:var(--caramel);
  margin-left:0.6em;
}
.hero__sub{
  max-width:34rem;
  font-size:1.15rem;
  color:var(--ink);
  margin-bottom:2.4rem;
}
.review-stamp{
  display:inline-block;
  font-family:"Roboto Slab",serif;font-weight:700;
  font-size:1.3rem;letter-spacing:0.34em;
  color:var(--terracotta);
  border:3px double var(--terracotta);
  padding:0.35rem 1.1rem 0.3rem 1.4rem;
  transform:rotate(-6deg);
  opacity:0.78;
  border-radius:3px;
}
.scroll-cue{
  position:absolute;bottom:3vh;left:12vw;
  font-family:"Caveat",cursive;font-size:1.3rem;
  color:var(--caramel);
  transform:rotate(-2deg);
  z-index:3;
}

/* ----------------------- marble plinth headers ----------------------- */
.plinth-wrap{
  position:relative;z-index:3;
  margin:2vh 0 1vh;
  display:flex;
}
.plinth{
  position:relative;
  display:inline-block;
  font-family:"Cormorant Garamond",serif;
  font-weight:600;
  font-size:clamp(1.9rem,4vw,3.2rem);
  line-height:1.05;
  color:var(--bitumen);
  padding:1.1rem 1.8rem 1.3rem;
  border:1px solid var(--hairline);
  border-radius:2px;
  transform:rotate(var(--plinth-rot,0deg));
  box-shadow:2px 6px 16px rgba(44,31,18,0.18),
             inset 0 0 40px rgba(44,31,18,0.05);
  /* CSS-painted veined marble */
  background-color:var(--linen);
  background-image:
    radial-gradient(ellipse 80% 18% at 20% 30%, rgba(200,164,92,0.35), transparent 60%),
    radial-gradient(ellipse 60% 14% at 75% 60%, rgba(212,194,163,0.55), transparent 65%),
    radial-gradient(ellipse 120% 30% at 50% 90%, rgba(138,107,61,0.18), transparent 70%),
    radial-gradient(circle at 60% 20%, rgba(251,245,231,0.7), transparent 40%),
    linear-gradient(115deg, #ede0c2 0%, #e8d6b3 45%, #ddc9a4 100%);
}
.plinth[data-crack-variant="1"]{
  background-image:
    radial-gradient(ellipse 70% 16% at 70% 25%, rgba(200,164,92,0.4), transparent 60%),
    radial-gradient(ellipse 90% 20% at 30% 70%, rgba(212,194,163,0.5), transparent 65%),
    radial-gradient(circle at 25% 40%, rgba(251,245,231,0.75), transparent 38%),
    linear-gradient(95deg, #e8d6b3 0%, #efe2c5 50%, #dcc8a3 100%);
}
.plinth[data-crack-variant="2"]{
  background-image:
    radial-gradient(ellipse 100% 14% at 40% 40%, rgba(138,107,61,0.16), transparent 65%),
    radial-gradient(ellipse 50% 22% at 80% 70%, rgba(200,164,92,0.36), transparent 60%),
    radial-gradient(circle at 70% 25%, rgba(251,245,231,0.7), transparent 42%),
    linear-gradient(130deg, #ede1c4 0%, #e6d3af 55%, #dcc9a5 100%);
}
.plinth[data-crack-variant="3"]{
  background-image:
    radial-gradient(ellipse 60% 18% at 25% 35%, rgba(200,164,92,0.42), transparent 60%),
    radial-gradient(ellipse 80% 16% at 65% 75%, rgba(212,194,163,0.5), transparent 65%),
    radial-gradient(circle at 50% 30%, rgba(251,245,231,0.72), transparent 40%),
    linear-gradient(105deg, #e9d8b6 0%, #efe2c5 48%, #dbc7a2 100%);
}
.plinth__label{
  display:block;
  font-family:"Major Mono Display",monospace;
  font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--caramel);
  margin-bottom:0.5rem;
}
.kintsugi{
  position:absolute;
  left:0;bottom:0;
  width:100%;height:60%;
  overflow:visible;
  pointer-events:none;
}
.kintsugi__path{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.4;
  stroke-linecap:round;
  filter:drop-shadow(0 0 2px rgba(212,175,55,0.5));
  /* drawn-in state set by JS via dasharray; default fully drawn for no-JS */
}
.kintsugi__path.mending{
  transition:stroke-dashoffset 1.6s cubic-bezier(0.22,0.61,0.36,1);
}

/* ----------------------- specimen cards (asymmetric, explicitly placed) ----------------------- */
section[data-bench]{min-height:120vh}

.card{
  position:absolute;
  left:var(--x,10%);
  top:calc(var(--y,0px) + 18vh);
  width:30%;
  min-width:280px;max-width:430px;
  z-index:calc(var(--z,3) + 4);
  transform:rotate(var(--tilt,0deg));
  background-color:var(--skylight);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.14  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(160deg, #fbf5e7 0%, #f5ebd6 100%);
  border:1px solid var(--hairline);
  border-radius:3px;
  padding:1.6rem 1.7rem 1.7rem;
  box-shadow:3px 7px 18px rgba(44,31,18,0.16),
             0 1px 0 rgba(251,245,231,0.6) inset;
  overflow:hidden;
}
.card--narrow{width:24%;min-width:260px}
.card--wide{width:36%;max-width:480px}

.card__tag{
  font-family:"Major Mono Display",monospace;
  font-size:0.74rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--terracotta);
  margin-bottom:0.7rem;
}
.card__title{
  font-family:"Cormorant Garamond",serif;
  font-weight:600;font-size:1.7rem;line-height:1.1;
  color:var(--bitumen);
  margin-bottom:0.7rem;
}
.card__body{
  font-size:1.02rem;color:var(--ink);margin-bottom:1rem;
}
.card__verdict{
  font-family:"Caveat",cursive;font-size:1.18rem;font-weight:500;
  color:var(--caramel);
  border-top:1px dashed var(--hairline);
  padding-top:0.6rem;
  transform:rotate(-0.8deg);
}
/* brass pushpin */
.pin{
  position:absolute;top:9px;left:9px;
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e7c873,#a07a2c);
  box-shadow:2px 2px 0 rgba(44,31,18,0.25);
}
/* foxing spots */
.foxing{
  position:absolute;
  left:var(--fx,30%);top:var(--fy,40%);
  width:var(--fs,12px);height:var(--fs,12px);
  border-radius:48% 52% 60% 40% / 50% 40% 60% 50%;
  background:radial-gradient(circle, rgba(138,107,61,0.28), rgba(138,107,61,0) 70%);
  pointer-events:none;
}

/* pull-quotes — Roboto Slab industrial counterpoint */
.pull-quote{
  position:absolute;
  left:var(--pq-x,15%);
  top:calc(var(--pq-y,300px) + 18vh);
  width:28%;min-width:240px;max-width:360px;
  z-index:9;
  font-family:"Roboto Slab",serif;font-weight:700;
  font-size:1.35rem;line-height:1.3;
  color:var(--ink);
  padding-left:1rem;
  border-left:4px solid var(--honey);
  transform:rotate(var(--pq-rot,0deg));
}

.spacer{width:100%}

/* ----------------------- torn-paper dividers (morph) ----------------------- */
.tear{
  position:relative;z-index:4;
  margin:-1px 0;
  line-height:0;
  filter:drop-shadow(0 -2px 4px rgba(44,31,18,0.08));
}
.tear svg{width:100%;height:54px;display:block}
.tear__path{
  fill:var(--paper);
  stroke:var(--hairline);
  stroke-width:1;
}
.tear--final .tear__path{fill:var(--skylight)}
.tear--final + .skylight{margin-top:-1px}

/* ----------------------- closing skylight ----------------------- */
.skylight{
  position:relative;z-index:1;
  min-height:100vh;
  background:var(--skylight);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:8vh 12vw;
  scroll-snap-align:start;
}
.fragment{
  width:min(40vw,300px);height:auto;
  filter:drop-shadow(2px 6px 14px rgba(44,31,18,0.18));
  animation:fragment-turn 180s linear infinite;
  margin-bottom:2.6rem;
}
@keyframes fragment-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.skylight__line{
  font-family:"Cormorant Garamond",serif;
  font-weight:300;font-style:italic;
  font-size:clamp(1.6rem,4vw,2.6rem);
  color:var(--bitumen);
  max-width:38rem;line-height:1.2;
  margin-bottom:1.2rem;
}
.skylight__sub{
  font-family:"Caveat",cursive;font-size:1.3rem;
  color:var(--caramel);
  transform:rotate(-1.2deg);
  max-width:30rem;
}

/* ----------------------- responsive ----------------------- */
@media(max-width:900px){
  .bench-section{padding:5vh 6vw 7vh;transform:none}
  .margin{display:none}
  .hero__inner{max-width:100%}
  .index-card{width:150px;top:0.8rem;right:0.8rem;transform:rotate(1.6deg)}
  .index-card a{font-size:1rem}
  .card,.card--narrow,.card--wide{
    position:relative;left:auto!important;top:auto!important;
    width:100%!important;max-width:100%!important;min-width:0;
    margin:0 0 2.4rem;transform:rotate(0deg)!important;
  }
  .pull-quote{
    position:relative;left:auto!important;top:auto!important;
    width:100%!important;max-width:100%;margin:0 0 2.4rem;transform:none!important;
  }
  section[data-bench]{min-height:auto}
  .spacer{display:none}
  .plinth{font-size:1.7rem}
  .scroll-cue{left:6vw}
}

/* ----------------------- reduced motion ----------------------- */
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
  .fragment{animation:none}
  .kintsugi__path.mending{transition:none}
  html{scroll-behavior:auto}
}