:root {
  /* Compliance text: IBM Plex Mono** from Google Fonts only for tiny specimen codes */
  --deep-carbon: #0F2F24;
  --wet-forest: #244E36;
  --moss-wash: #6F8E6D;
  --charcoal: #171916;
  --paper: #F3EDE0;
  --linen: #D8CFBC;
  --vein: #8C9188;
  --bronze: #A37C4D;
  --display: "Archivo Black", Impact, sans-serif;
  --body: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--body);
  overflow-x: hidden;
}

.material-walk { position: relative; }

.room {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(28px, 7vw) repeat(10, 1fr) minmax(28px, 7vw);
  grid-template-rows: minmax(46px, 11vh) repeat(8, 1fr) minmax(46px, 11vh);
  isolation: isolate;
}

.charcoal-room {
  background:
    radial-gradient(circle at 12% 22%, rgba(216, 207, 188, .9), transparent 27%),
    linear-gradient(105deg, var(--paper) 0%, #eee5d4 56%, var(--linen) 100%);
}

.leaf-room {
  background:
    linear-gradient(90deg, rgba(243,237,224,.98), rgba(243,237,224,.86)),
    var(--paper);
}

.stone-room {
  background:
    linear-gradient(90deg, var(--deep-carbon) 0%, #12382a 48%, var(--wet-forest) 100%);
  color: var(--paper);
}

.ledger-room {
  background:
    linear-gradient(180deg, var(--paper), #eee4d1 64%, var(--linen));
}

.paper-grain,
.paper-grain::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .38;
  background-image:
    linear-gradient(90deg, rgba(23,25,22,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(23,25,22,.025) 1px, transparent 1px);
  background-size: 17px 19px, 23px 21px;
  mix-blend-mode: multiply;
  z-index: -1;
}

.watercolor {
  position: absolute;
  border-radius: 48% 52% 57% 43% / 44% 43% 57% 56%;
  filter: blur(calc(38px - var(--focus, 0) * 23px));
  opacity: calc(.42 + var(--focus, 0) * .26);
  transform: translate3d(0, calc(var(--drift, 0px) * .45), 0) scale(calc(.98 + var(--focus, 0) * .035));
  transition: filter .4s ease, opacity .4s ease, transform .4s ease;
  pointer-events: none;
  z-index: -1;
}

.stain-charcoal {
  width: 58vw;
  height: 42vw;
  left: 43vw;
  top: 23vh;
  background: radial-gradient(circle at 42% 41%, rgba(15,47,36,.9), rgba(36,78,54,.5) 42%, transparent 71%);
}

.stain-green {
  width: 31vw;
  height: 31vw;
  left: -7vw;
  top: 42vh;
  background: radial-gradient(circle, rgba(111,142,109,.45), transparent 68%);
}

.stain-moss {
  width: 76vw;
  height: 62vw;
  right: -19vw;
  top: 2vh;
  background: radial-gradient(circle at 41% 38%, rgba(111,142,109,.5), rgba(36,78,54,.21) 45%, transparent 72%);
}

.stain-leaf-dark {
  width: 32vw;
  height: 45vw;
  left: 5vw;
  bottom: -14vw;
  background: radial-gradient(circle, rgba(15,47,36,.36), transparent 70%);
}

.stain-ledger {
  width: 52vw;
  height: 31vw;
  left: 49vw;
  top: 8vh;
  background: radial-gradient(circle, rgba(111,142,109,.28), transparent 72%);
}

.shelf-nav {
  position: fixed;
  top: 28px;
  right: 30px;
  display: grid;
  gap: 8px;
  z-index: 30;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tag {
  color: var(--charcoal);
  text-decoration: none;
  background: rgba(243,237,224,.76);
  border: 1px solid rgba(140,145,136,.45);
  padding: 8px 10px;
  min-width: 112px;
  backdrop-filter: blur(10px);
  transition: color .35s ease, background .35s ease, border-color .35s ease, transform .35s ease;
}

.tag span { color: var(--bronze); margin-right: 7px; }
.tag.is-active { background: rgba(15,47,36,.92); color: var(--paper); border-color: rgba(163,124,77,.75); transform: translateX(-6px); }

.receipt-thread {
  position: fixed;
  left: clamp(28px, 7vw, 96px);
  top: 0;
  width: 1px;
  height: var(--thread-height, 0vh);
  background: linear-gradient(var(--bronze), rgba(163,124,77,.12));
  z-index: 25;
  pointer-events: none;
}

.specimen-code {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(10px, .82vw, 13px);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(23,25,22,.58);
  filter: blur(calc(2.6px - var(--focus, 0) * 2.3px));
  opacity: calc(.32 + var(--focus, 0) * .68);
  transition: filter .35s ease, opacity .35s ease;
}

.top-left { grid-column: 2 / 7; grid-row: 2; align-self: start; }
.light { color: rgba(243,237,224,.62); }

.vertical-rule {
  width: 1px;
  background: rgba(140,145,136,.46);
  grid-row: 1 / -1;
  transform: scaleY(calc(.18 + var(--focus, 0) * .82));
  transform-origin: top;
  transition: transform .5s ease;
}
.rule-a { grid-column: 4; }
.rule-b { grid-column: 9; background: rgba(163,124,77,.45); }

.wordmark-wrap { grid-column: 2 / 12; grid-row: 5 / 8; align-self: center; position: relative; }

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(70px, 15.6vw, 258px);
  line-height: .78;
  letter-spacing: -.085em;
  color: color-mix(in srgb, var(--charcoal) calc(100% - var(--focus, 0) * 70%), var(--wet-forest));
  filter: blur(calc(9px - var(--focus, 0) * 8.2px));
  transform: translateY(calc(22px - var(--focus, 0) * 18px));
  transition: filter .35s ease, color .35s ease, transform .35s ease;
}

.shelf-caption {
  width: min(520px, 62vw);
  margin: 30px 0 0 clamp(6px, 11vw, 165px);
  font-size: clamp(14px, 1.3vw, 19px);
  line-height: 1.75;
  color: rgba(23,25,22,.68);
}

.museum-label {
  position: relative;
  padding: 17px 18px 15px;
  width: min(300px, 72vw);
  background: rgba(243,237,224,.72);
  border-left: 1px solid var(--bronze);
  box-shadow: 0 22px 60px rgba(23,25,22,.08);
  font-size: 13px;
  line-height: 1.6;
  filter: blur(calc(3.5px - var(--focus, 0) * 3.2px));
  opacity: calc(.2 + var(--focus, 0) * .78);
  transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}
.museum-label strong { display: block; font-weight: 500; margin: 4px 0; }
.museum-label em { display: block; font-style: normal; color: rgba(23,25,22,.55); }
.label-number { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.label-right { grid-column: 9 / 12; grid-row: 7 / 9; align-self: start; justify-self: end; }
.label-low-left { grid-column: 2 / 5; grid-row: 8 / 10; align-self: start; }
.torn { clip-path: polygon(0 0, 96% 0, 100% 12%, 97% 29%, 100% 48%, 96% 100%, 0 100%); }
.dark-label { background: rgba(15,47,36,.72); color: var(--paper); border-left-color: var(--bronze); }
.dark-label em { color: rgba(243,237,224,.62); }

.charcoal-block {
  grid-column: 10 / 12;
  grid-row: 3 / 5;
  display: flex;
  gap: 9px;
  transform: rotate(-6deg);
  opacity: .72;
}
.charcoal-block span { width: 24px; height: 154px; background: linear-gradient(90deg, #080907, var(--charcoal), #2c302a); box-shadow: 0 16px 34px rgba(23,25,22,.28); }

.leaf-outline {
  position: absolute;
  right: clamp(4vw, 11vw, 160px);
  top: 10vh;
  height: 78vh;
  width: min(44vw, 520px);
  fill: rgba(15,47,36,.055);
  stroke: rgba(15,47,36,.42);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(calc(7px - var(--focus, 0) * 6px));
  opacity: calc(.26 + var(--focus, 0) * .58);
  transition: filter .35s ease, opacity .35s ease;
}

.room-statement { align-self: center; z-index: 2; }
.room-statement span, .ledger-title span {
  display: block;
  font-family: var(--mono);
  font-size: clamp(11px, .9vw, 14px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 14px;
}
.room-statement strong, .ledger-title strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(64px, 10.8vw, 184px);
  line-height: .82;
  letter-spacing: -.07em;
  font-weight: 900;
}
.leaf-statement { grid-column: 2 / 8; grid-row: 4 / 8; color: var(--deep-carbon); filter: blur(calc(5px - var(--focus, 0) * 4.5px)); }
.stone-statement { grid-column: 6 / 12; grid-row: 4 / 8; color: var(--paper); filter: blur(calc(6px - var(--focus, 0) * 5px)); }

.carbon-rings { position: absolute; left: 21vw; top: 24vh; width: 160px; height: 160px; }
.carbon-rings i { position: absolute; inset: calc(var(--i, 0) * 22px); border: 1px solid rgba(36,78,54,.2); border-radius: 50%; }
.carbon-rings i:nth-child(2) { --i: 1; }
.carbon-rings i:nth-child(3) { --i: 2; border-color: rgba(163,124,77,.26); }

.marble-veins {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: rgba(140,145,136,.62);
  stroke-width: 2;
  fill: none;
  filter: blur(calc(5px - var(--focus, 0) * 4.6px));
  opacity: calc(.24 + var(--focus, 0) * .5);
}
.column-fragment { grid-column: 2 / 4; grid-row: 2 / 10; position: relative; width: min(190px, 17vw); background: linear-gradient(90deg, rgba(243,237,224,.84), rgba(216,207,188,.46)); box-shadow: 30px 0 80px rgba(0,0,0,.16); }
.column-fragment::before, .column-fragment::after { content: ""; position: absolute; left: -22px; right: -22px; height: 24px; background: rgba(216,207,188,.82); }
.column-fragment::before { top: 0; }
.column-fragment::after { bottom: 0; }
.column-fragment span { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(140,145,136,.17) 27px 28px); }
.plinth-fragment { position: absolute; right: 8vw; bottom: 10vh; width: 34vw; height: 16vh; border-top: 1px solid rgba(243,237,224,.58); background: rgba(243,237,224,.08); box-shadow: 0 30px 80px rgba(0,0,0,.2); }
.carved-rules { position: absolute; right: 7vw; top: 17vh; display: grid; gap: 18px; }
.carved-rules b { display: block; width: 120px; height: 1px; background: rgba(243,237,224,.36); }
.stone-shadow { position: absolute; left: 0; bottom: 0; width: 58vw; height: 32vh; background: radial-gradient(ellipse at bottom, rgba(0,0,0,.28), transparent 68%); }

.ledger-grid { grid-column: 2 / 12; grid-row: 3 / 8; display: grid; grid-template-columns: 1fr 1.16fr; gap: clamp(32px, 7vw, 110px); align-items: end; }
.ledger-title strong { color: var(--charcoal); }
.ledger-rows { border-top: 1px solid rgba(23,25,22,.24); }
.row {
  display: grid;
  grid-template-columns: 74px 1fr 1.1fr;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid rgba(23,25,22,.18);
  filter: blur(calc(3px - var(--focus, 0) * 2.7px));
  opacity: calc(.32 + var(--focus, 0) * .68);
}
.row span { font-family: var(--mono); font-size: 11px; color: var(--bronze); text-transform: uppercase; letter-spacing: .14em; }
.row b { font-weight: 500; color: var(--deep-carbon); }
.row i { font-style: normal; color: rgba(23,25,22,.57); }
.bronze-row { border-bottom-color: var(--bronze); }
.seal { position: absolute; right: 10vw; bottom: 12vh; width: 118px; height: 118px; border: 2px solid var(--bronze); border-radius: 50%; display: grid; place-items: center; color: var(--deep-carbon); font-family: var(--display); letter-spacing: -.05em; transform: rotate(-9deg) scale(calc(.88 + var(--focus, 0) * .12)); opacity: calc(.38 + var(--focus, 0) * .62); }
.seal small { position: absolute; bottom: 27px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--bronze); }
.final-invitation { position: absolute; left: 7vw; bottom: 10vh; max-width: 540px; margin: 0; font-size: clamp(18px, 2vw, 31px); line-height: 1.45; color: var(--wet-forest); }
.bronze-line { position: absolute; left: 7vw; right: 7vw; bottom: 7vh; height: 1px; background: var(--bronze); transform: scaleX(calc(.12 + var(--focus, 0) * .88)); transform-origin: left; }

@media (max-width: 760px) {
  .shelf-nav { right: 14px; top: 14px; transform: scale(.88); transform-origin: top right; }
  .room { grid-template-columns: 22px repeat(6, 1fr) 22px; }
  .wordmark-wrap, .ledger-grid { grid-column: 2 / 8; }
  .label-right, .label-low-left { grid-column: 2 / 8; justify-self: start; }
  .leaf-outline { right: -15vw; width: 72vw; opacity: .34; }
  .room-statement strong, .ledger-title strong { font-size: clamp(56px, 17vw, 120px); }
  .leaf-statement, .stone-statement { grid-column: 2 / 8; }
  .ledger-grid { grid-template-columns: 1fr; gap: 28px; }
  .row { grid-template-columns: 1fr; gap: 4px; }
  .column-fragment { opacity: .35; width: 30vw; }
}