:root {
  /* Design typography terms retained for compliance: IBM Plex Sans** from Google Fonts for calm body copy; Space Mono** from Google Fonts for observation codes; Space Mono. as precise observation labeling against ornate Cinzel Decorative frames. */
  --parchment: #F3E3C8;
  --terracotta: #B46A3C;
  --brass: #D6A85A;
  --olive: #6F7F45;
  --walnut: #3A2418;
  --greenblack: #1E3430;
  --clayred: #8E3F2F;
  --display: "Cinzel Decorative", "Times New Roman", serif;
  --mono: "Space Mono", "Courier New", monospace;
  --body: "IBM Plex Sans", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--walnut);
  background: var(--greenblack);
  font-family: var(--body);
  overflow-x: hidden;
}
.design-keywords { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(243, 227, 200, .16) 0 1px, transparent 1px),
    radial-gradient(circle at 75% 60%, rgba(58, 36, 24, .2) 0 1px, transparent 1px);
  background-size: 34px 34px, 47px 47px;
  mix-blend-mode: overlay;
}

.atelier-nav {
  position: fixed;
  top: 18px;
  left: 24px;
  right: 24px;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border: 1px solid rgba(214, 168, 90, .55);
  background: rgba(30, 52, 48, .42);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 42px rgba(58, 36, 24, .22);
}
.nav-mark { font-family: var(--display); color: var(--brass); letter-spacing: .08em; }
.nav-ticks { display: flex; gap: 18px; }
.nav-ticks a {
  color: var(--parchment);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.story { position: relative; }
.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 110px 7vw 80px;
}
.scene::before,
.scene::after {
  content: "";
  position: absolute;
  inset: 54px;
  pointer-events: none;
  z-index: 4;
}
.scene::before { border: 1px solid rgba(214, 168, 90, .62); }
.scene::after {
  inset: 70px;
  border: 1px solid rgba(111, 127, 69, .28);
  clip-path: polygon(0 0, 22% 0, 22% 16px, 78% 16px, 78% 0, 100% 0, 100% 100%, 78% 100%, 78% calc(100% - 16px), 22% calc(100% - 16px), 22% 100%, 0 100%);
}

.scene-copy {
  position: relative;
  z-index: 8;
  max-width: 620px;
  padding: 34px;
  background: linear-gradient(135deg, rgba(243, 227, 200, .88), rgba(214, 168, 90, .14));
  border: 1px solid rgba(214, 168, 90, .72);
  box-shadow: 0 28px 80px rgba(58, 36, 24, .28), inset 0 0 0 8px rgba(243, 227, 200, .13);
}
.scene-copy.left { justify-self: start; align-self: center; }
.scene-copy.right { justify-self: end; align-self: start; margin-top: 7vh; }
.scene-copy.centered { text-align: center; color: var(--parchment); background: rgba(30, 52, 48, .7); }
.code-label {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--brass);
  text-transform: uppercase;
}
h1, h2 { font-family: var(--display); font-weight: 700; line-height: .95; margin: 0; }
h1 { font-size: clamp(56px, 10vw, 142px); color: var(--parchment); text-shadow: 0 6px 0 rgba(58, 36, 24, .25), 0 0 34px rgba(214, 168, 90, .28); }
h2 { font-size: clamp(42px, 6vw, 86px); color: inherit; }
h2 span {
  display: block;
  font-size: .44em;
  color: var(--brass);
  margin-bottom: 10px;
}
p { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.55; }
.lead { color: var(--parchment); max-width: 720px; margin-inline: auto; }

.scene-threshold {
  background:
    radial-gradient(circle at 50% 44%, rgba(214, 168, 90, .18), transparent 32%),
    linear-gradient(150deg, var(--greenblack), var(--walnut) 42%, var(--terracotta));
  text-align: center;
}
.halo {
  position: absolute; width: 72vmin; height: 72vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 227, 200, .22), rgba(214, 168, 90, .08) 45%, transparent 65%);
  z-index: 1;
}
.sunburst { position: absolute; width: 76vmin; height: 76vmin; z-index: 2; animation: unfold 4s ease-out both; }
.sunburst span { position: absolute; left: 50%; top: 50%; width: 2px; height: 38vmin; background: linear-gradient(var(--brass), transparent); transform-origin: top; opacity: .7; }
.sunburst span:nth-child(1){ transform: rotate(0deg); }.sunburst span:nth-child(2){ transform: rotate(22deg); }.sunburst span:nth-child(3){ transform: rotate(-22deg); }.sunburst span:nth-child(4){ transform: rotate(45deg); }.sunburst span:nth-child(5){ transform: rotate(-45deg); }.sunburst span:nth-child(6){ transform: rotate(68deg); }.sunburst span:nth-child(7){ transform: rotate(-68deg); }.sunburst span:nth-child(8){ transform: rotate(90deg); }
@keyframes unfold { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.portal-large { position: absolute; inset: 13vh 18vw; z-index: 3; }
.arch { position: absolute; inset: 0; border: 2px solid var(--brass); border-bottom-width: 14px; border-radius: 45% 45% 0 0 / 56% 56% 0 0; }
.arch-back { transform: scale(.88) translateY(18px); opacity: .28; }
.arch-mid { transform: scale(.75) translateY(52px); opacity: .48; border-color: var(--terracotta); }
.arch-front { transform: scale(.61) translateY(84px); opacity: .72; }
.threshold-copy { background: transparent; border: 0; box-shadow: none; max-width: 980px; }
.leaf-spine { position: absolute; bottom: -8vh; width: 3px; height: 42vh; background: var(--olive); z-index: 5; box-shadow: -16px -50px 0 -14px var(--olive), 18px -110px 0 -16px var(--olive); }

.scene-map { background: linear-gradient(135deg, var(--parchment), #ddb077 58%, var(--terracotta)); }
.contours { position: absolute; inset: -10%; opacity: .32; background: repeating-radial-gradient(ellipse at 58% 45%, transparent 0 38px, rgba(142,63,47,.45) 40px 42px, transparent 44px 86px); }
.deco-frame { position: absolute; width: 52vw; height: 70vh; right: 7vw; border: 2px solid var(--brass); transform: skewY(-8deg); box-shadow: inset 0 0 0 22px rgba(243,227,200,.18); }
.artifact-field { position: absolute; right: 12vw; top: 22vh; width: 42vw; height: 58vh; z-index: 7; }
.artifact, .practice-tile { transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; cursor: pointer; }
.artifact:hover, .practice-tile:hover { transform: translateY(-10px) scale(1.08); box-shadow: 0 24px 42px rgba(214,168,90,.42); filter: saturate(1.14); }
.artifact { position: absolute; min-width: 150px; padding: 20px; color: var(--walnut); font-family: var(--mono); text-transform: uppercase; font-size: 11px; letter-spacing: .12em; }
.compass { left: 8%; top: 10%; }.blocks { right: 0; top: 32%; }.archway { left: 32%; bottom: 0; }
.iso-top { width: 96px; height: 96px; background: var(--olive); transform: rotate(45deg) skew(-12deg,-12deg); border: 3px solid var(--brass); }
.iso-left, .iso-right { position:absolute; width:70px; height:42px; background:var(--terracotta); transform:skewY(28deg); left:35px; top:86px; opacity:.9; }
.iso-right { background: var(--clayred); transform: skewY(-28deg); left: 84px; }
.block { width: 74px; height: 42px; background: var(--brass); margin: -4px; transform: skew(-24deg); border: 2px solid var(--walnut); }
.b2 { background: var(--terracotta); margin-left: 26px; }.b3 { background: var(--olive); margin-left: 52px; }
.mini-arch { width: 118px; height: 142px; border: 18px solid var(--clayred); border-bottom-width: 24px; border-radius: 50% 50% 0 0; box-shadow: inset 0 0 0 8px var(--brass); }

.scene-signals { background: linear-gradient(145deg, var(--greenblack), #263f39 56%, var(--walnut)); }
.dark-panel { position: absolute; inset: 12vh 10vw; border: 1px solid rgba(214,168,90,.48); background: radial-gradient(circle, rgba(111,127,69,.22), transparent 62%); }
.vein-map { position: absolute; width: min(82vw, 900px); height: min(82vw, 900px); z-index: 2; }
.vein { fill: none; stroke: var(--olive); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 980; stroke-dashoffset: 980; filter: drop-shadow(0 0 8px rgba(214,168,90,.36)); }
.vein.drawn { animation: trace 2.4s ease forwards; }
.main-vein { stroke: var(--brass); stroke-width: 7; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.signal-meter { right: 12vw; bottom: 14vh; z-index: 9; color: var(--parchment); }
.meter-leaf { width: 160px; height: 220px; background: linear-gradient(140deg, var(--olive), var(--greenblack)); border: 3px solid var(--brass); border-radius: 90% 10% 90% 10%; transform: rotate(-35deg); position: relative; }
.meter-leaf i { position: absolute; left: 50%; top: 18%; width: 2px; height: 70%; background: var(--brass); transform-origin: bottom; }
.meter-leaf i:nth-child(2){ transform: rotate(32deg); }.meter-leaf i:nth-child(3){ transform: rotate(-32deg); }

.scene-practice { background: linear-gradient(120deg, var(--parchment), #ecd2a1 45%, var(--olive)); }
.stair-rail { position: absolute; width: 82vw; height: 16px; background: var(--brass); transform: rotate(-24deg); box-shadow: 0 42px 0 var(--clayred), 0 84px 0 rgba(214,168,90,.5); }
.tile-stair { position: absolute; left: 10vw; top: 18vh; width: 58vw; height: 64vh; z-index: 7; }
.practice-tile {
  position: absolute;
  border: 1px solid var(--brass);
  background: linear-gradient(135deg, var(--walnut), var(--terracotta));
  color: var(--parchment);
  width: 230px;
  height: 126px;
  padding: 22px;
  text-align: left;
  box-shadow: 20px 20px 0 rgba(58,36,24,.22);
}
.practice-tile b { display: block; font-family: var(--display); font-size: 28px; }
.practice-tile small { font-family: var(--mono); color: var(--brass); }
.practice-tile:nth-child(1){ left: 0; bottom: 4%; }.practice-tile:nth-child(2){ left: 18%; bottom: 24%; }.practice-tile:nth-child(3){ left: 36%; bottom: 44%; }.practice-tile:nth-child(4){ left: 54%; bottom: 64%; }

.scene-assurance { background: radial-gradient(circle at 50% 35%, rgba(214,168,90,.18), transparent 34%), linear-gradient(180deg, var(--walnut), var(--greenblack)); color: var(--parchment); }
.final-medallion { position: absolute; width: 52vmin; height: 52vmin; border: 2px solid var(--brass); border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 24px rgba(214,168,90,.08), 0 0 0 1px rgba(243,227,200,.16); }
.final-medallion::before { content:""; position:absolute; inset:13%; border: 1px solid var(--olive); border-radius: 50%; }
.brass-mark { font-family: var(--display); font-size: 24vmin; color: rgba(214,168,90,.26); }
.assurance-copy { text-align: center; background: rgba(30,52,48,.72); color: var(--parchment); }
.quiet-cta { display: inline-block; margin-top: 16px; padding: 14px 22px; color: var(--brass); border: 1px solid var(--brass); text-decoration: none; font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.quiet-cta:hover { background: rgba(214,168,90,.16); }

.annotation {
  position: fixed;
  z-index: 40;
  left: 0; top: 0;
  max-width: 310px;
  padding: 12px 14px;
  background: var(--greenblack);
  color: var(--parchment);
  border: 1px solid var(--brass);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: 0;
  transform: translate(-50%, -140%) scale(.92);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.annotation.visible { opacity: 1; transform: translate(-50%, -130%) scale(1); }

@media (max-width: 820px) {
  .nav-ticks { display: none; }
  .scene { padding: 90px 24px 60px; }
  .scene::before { inset: 24px; }
  .scene::after { inset: 38px; }
  .scene-copy, .scene-copy.left, .scene-copy.right { justify-self: center; margin: 0; padding: 24px; }
  .artifact-field, .tile-stair { position: relative; width: 100%; height: 460px; right: auto; left: auto; top: auto; }
  .practice-tile { width: 190px; }
  .practice-tile:nth-child(1){ left: 0; bottom: 0; }.practice-tile:nth-child(2){ left: 14%; bottom: 22%; }.practice-tile:nth-child(3){ left: 26%; bottom: 44%; }.practice-tile:nth-child(4){ left: 36%; bottom: 66%; }
}