/* ══ tokens ═══════════════════════════════════════════════
   Pastel strata drawn over an indigo ink line.
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#241f3d;
  --ink-soft:#5b5578;
  --paper:#fff8f2;
  --blush:#ffd7c9;
  --butter:#ffe9a6;
  --mint:#beebd5;
  --peri:#d2d6ff;
  --raspberry:#d92662;

  --face:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --pad:clamp(20px,5vw,72px);
  --deep:clamp(86px,13vh,160px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 clamp(15.5px,1.05vw,17.5px)/1.6 var(--face);
  overflow-x:hidden;
}
h1,h2,h3,p,dl,dt,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--raspberry);color:#fff}
:focus-visible{outline:3px solid var(--raspberry);outline-offset:3px}

/* ══ language ═════════════════════════════════════════════ */
.switch{
  position:fixed;z-index:50;
  top:clamp(14px,2.2vw,26px);right:clamp(14px,2.2vw,26px);
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}
.switch__pin{width:7px;height:7px;background:var(--raspberry);border-radius:50%}
.switch__opt{
  appearance:none;border:0;background:none;cursor:pointer;padding:0;
  font:700 12px/1 var(--face);letter-spacing:.12em;
  color:#9a94ae;
  transition:color .25s ease;
}
.switch__opt:hover{color:var(--ink)}
.switch__opt.is-on{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* ══ strata ═══════════════════════════════════════════════ */
.stratum{
  position:relative;
  padding-block:var(--deep);
  overflow:hidden;
  isolation:isolate;
}
.stratum--surface{background:var(--paper);padding-top:clamp(70px,11vh,120px)}
.stratum--one{background:var(--blush)}
.stratum--two{background:var(--butter)}
.stratum--three{background:var(--mint)}
.stratum--bed{background:var(--peri)}

.hold{position:relative;z-index:3;max-width:1180px;margin:0 auto;padding:0 var(--pad)}

/* ── the contact between two layers ── */
.contact-line{
  position:absolute;
  top:-1px;left:0;right:0;
  width:100%;height:clamp(44px,6vw,76px);
  z-index:4;
}
/* the boundary paints the layer above down onto this one */
.stratum--one .contact-line__fill{fill:var(--paper)}
.stratum--two .contact-line__fill{fill:var(--blush)}
.stratum--three .contact-line__fill{fill:var(--butter)}
.stratum--bed .contact-line__fill{fill:var(--mint)}
.contact-line__ink{fill:none;stroke:var(--ink);stroke-width:2.5;vector-effect:non-scaling-stroke}
.contact-line__dash{
  fill:none;stroke:var(--raspberry);stroke-width:1.5;
  stroke-dasharray:7 7;vector-effect:non-scaling-stroke;opacity:.8;
}

/* ── the drifting body of each layer ── */
.grain{
  position:absolute;
  inset:-24% 0;
  z-index:1;
  pointer-events:none;
  opacity:.5;
  will-change:transform;
}
.grain--sky{
  background-image:
    repeating-linear-gradient(0deg,rgba(36,31,61,.1) 0 1px,transparent 1px 34px);
  opacity:.5;
}
.grain--dots{
  background-image:radial-gradient(rgba(36,31,61,.3) 1.4px,transparent 1.5px);
  background-size:26px 26px;
}
.grain--brick{
  background-image:
    repeating-linear-gradient(0deg,rgba(36,31,61,.22) 0 2px,transparent 2px 40px),
    repeating-linear-gradient(90deg,rgba(36,31,61,.22) 0 2px,transparent 2px 92px);
  background-position:0 0,0 0;
}
.grain--rock{
  background-image:
    repeating-linear-gradient(115deg,rgba(36,31,61,.22) 0 2px,transparent 2px 15px),
    repeating-linear-gradient(65deg,rgba(36,31,61,.12) 0 2px,transparent 2px 27px);
  opacity:.4;
}
.grain--wave{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 24 C 15 8 30 8 45 24 S 75 40 90 24 S 120 8 135 24' fill='none' stroke='%23241f3d' stroke-opacity='.3' stroke-width='2'/%3E%3C/svg%3E");
}

/* ── inclusions ── */
.pebble{
  position:absolute;z-index:1;pointer-events:none;
  border:2.5px solid var(--ink);
  will-change:transform;
}
.pebble--a{width:96px;height:96px;border-radius:50%;right:12%;bottom:12%}
.pebble--b{width:46px;height:46px;right:26%;bottom:26%;transform:rotate(18deg)}
.pebble--c{width:120px;height:66px;border-radius:60px 24px 70px 30px;left:6%;bottom:12%;opacity:.7}
.pebble--d{width:70px;height:70px;border-radius:50% 50% 50% 8px;right:8%;top:22%;border-color:var(--raspberry)}

/* ══ the surface ══════════════════════════════════════════ */
.tag{
  display:inline-block;
  font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 12px;
  border:2px solid var(--ink);
  background:var(--butter);
  margin-bottom:clamp(20px,3.6vh,34px);
}
.horizon{
  display:block;
  height:3px;
  background:var(--ink);
  transform-origin:left;
  transform:scaleX(var(--draw,0));
  margin-bottom:clamp(14px,2vh,22px);
}
.title{
  font-size:clamp(1.95rem,8.4vw,7.2rem);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.035em;
  margin-bottom:clamp(22px,3.4vh,40px);
  /* an outline that fills from the bottom on arrival */
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
  background-image:linear-gradient(0deg,
    var(--ink) 0 var(--fill,0%),transparent var(--fill,0%) 100%);
  -webkit-background-clip:text;background-clip:text;
}
@supports not (-webkit-text-stroke:1px black){
  .title{color:var(--ink);background-image:none}
}
.brief{
  max-width:46ch;
  font-size:clamp(1.02rem,1.5vw,1.26rem);
  line-height:1.5;
}
.keys{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:clamp(22px,3.4vh,36px);
}
.keys li{
  padding:7px 14px;
  font-size:.82rem;
  border:2px solid var(--ink);
  background:var(--paper);
  box-shadow:3px 3px 0 var(--ink);
}
.keys li:nth-child(2){background:var(--mint)}
.keys li:nth-child(3){background:var(--peri)}

@media (max-width:700px){
  /* the surface inclusions crowd the copy on a phone */
  .pebble--a,.pebble--b{display:none}
  .pebble--c,.pebble--d{opacity:.45}
}

/* ══ shared section furniture ═════════════════════════════ */
.label{margin-bottom:clamp(16px,2.4vh,26px)}
.label span{
  display:inline-block;
  font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;
  padding:5px 11px 4px;
  background:var(--ink);
  color:var(--paper);
}
.label--pale span{background:var(--raspberry)}

.head{
  font-size:clamp(1.8rem,4.3vw,3.1rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  max-width:20ch;
  margin-bottom:clamp(24px,3.8vh,44px);
  text-wrap:balance;
}
.text{display:grid;gap:1.05em;max-width:52ch;font-size:clamp(1rem,1.3vw,1.14rem)}
.text p:last-child{
  font-weight:600;
  border-left:4px solid var(--raspberry);
  padding-left:14px;
}

/* ══ hatched sample boxes ═════════════════════════════════ */
.cores{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,26px);
}
@media (max-width:900px){.cores{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cores{grid-template-columns:1fr}}
.core{
  position:relative;
  padding:clamp(20px,2.4vw,30px);
  background:var(--paper);
  border:2.5px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}
.core:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--raspberry)}
/* each sample carries its own hatch, as on a printed section */
.core__swatch{
  display:block;
  height:34px;
  margin-bottom:clamp(14px,2vw,20px);
  border:2px solid var(--ink);
}
.core--h1 .core__swatch{background:repeating-linear-gradient(45deg,var(--ink) 0 2px,var(--paper) 2px 8px)}
.core--h2 .core__swatch{background:repeating-linear-gradient(-45deg,var(--raspberry) 0 2px,var(--paper) 2px 9px)}
.core--h3 .core__swatch{background:radial-gradient(var(--ink) 1.6px,var(--paper) 1.7px) 0 0/10px 10px}
.core--h4 .core__swatch{background:repeating-linear-gradient(90deg,var(--ink) 0 2px,var(--paper) 2px 10px)}
.core--h5 .core__swatch{
  background:
    repeating-linear-gradient(0deg,var(--ink) 0 2px,transparent 2px 12px),
    repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 24px),
    var(--paper);
}
.core--h6 .core__swatch{
  background:repeating-linear-gradient(45deg,var(--ink) 0 2px,var(--paper) 2px 7px,var(--ink) 7px 9px,var(--paper) 9px 16px);
}
.core h3{
  font-size:clamp(1.02rem,1.5vw,1.2rem);
  font-weight:700;letter-spacing:-.014em;
  margin-bottom:8px;
}
.core p{font-size:.94rem;color:var(--ink-soft)}

/* ══ the descent ══════════════════════════════════════════ */
.steps{display:grid;gap:clamp(16px,2.4vh,26px);counter-reset:none}
.steps li{
  position:relative;
  max-width:62ch;
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,30px);
  background:var(--paper);
  border:2.5px solid var(--ink);
}
@media (min-width:860px){
  /* each step sits a little deeper and a little further in */
  .steps li:nth-child(2){margin-left:7%}
  .steps li:nth-child(3){margin-left:14%}
  .steps li:nth-child(4){margin-left:21%}
}
.steps li::before{
  content:"";
  position:absolute;
  left:-2.5px;top:-2.5px;bottom:-2.5px;
  width:10px;
  background:var(--raspberry);
}
.steps li:nth-child(2)::before{background:var(--butter)}
.steps li:nth-child(3)::before{background:var(--peri)}
.steps li:nth-child(4)::before{background:var(--ink)}
.steps h3{font-size:clamp(1.04rem,1.5vw,1.22rem);font-weight:700;margin-bottom:7px}
.steps p{color:var(--ink-soft);font-size:.95rem}

/* ══ bedrock ══════════════════════════════════════════════ */
.entity{
  font-size:clamp(1.5rem,4.2vw,3rem);
  font-weight:800;letter-spacing:-.032em;
  line-height:1.02;
  margin-bottom:clamp(24px,3.8vh,42px);
}
.record{
  display:grid;
  border:2.5px solid var(--ink);
  background:var(--paper);
  box-shadow:8px 8px 0 var(--ink);
  max-width:1180px;
}
.record > div{
  display:grid;
  gap:3px clamp(18px,3vw,44px);
  padding:clamp(14px,1.8vw,20px);
  border-bottom:2px solid var(--ink);
}
.record > div:last-child{border-bottom:0}
@media (min-width:720px){.record > div{grid-template-columns:118px 1fr;align-items:baseline}}
.record dt{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
}
.record dd{
  margin:0;font-size:clamp(.95rem,1.15vw,1.04rem);font-weight:600;
  overflow-wrap:anywhere;
}
.rights{margin-top:clamp(22px,3.4vh,34px);font-size:.78rem;color:var(--ink-soft)}

/* ══ reveal + motion prefs ════════════════════════════════ */
.rise{opacity:0;transform:translateY(16px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1)}
.rise.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .title{--fill:100%}
  .horizon{--draw:1}
  .grain,.pebble{transform:none!important}
  .rise{opacity:1;transform:none;transition:none}
  .core{transition:none}
}