/* ══ tokens ═══════════════════════════════════════════════ */
:root{
  --ink:#0e0d12;
  --ink-2:#191721;
  --porcelain:#f7f4ee;
  --porcelain-2:#ece7dc;
  --vermilion:#e23a2e;
  --gold:#e9b23c;
  --brass:#8a6a1f;
  --cool:#2b6cb0;
  --paper-dim:#6f6a60;
  --ink-dim:#b5ada0;

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

  --pad:clamp(20px,5vw,76px);
  --band:clamp(70px,10vh,128px);
  --rule:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--porcelain);
  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{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--vermilion);color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ══ language ═════════════════════════════════════════════ */
.lang{
  position:fixed;z-index:40;
  top:clamp(14px,2.2vw,30px);
  right:clamp(14px,2.2vw,30px);
  display:flex;align-items:center;gap:11px;
  padding:9px 14px;
  /* sits on the ink hero and on the porcelain sheet, so it carries its own block */
  background:var(--ink);
  box-shadow:0 0 0 1px rgba(233,178,60,.5),0 10px 26px -14px rgba(14,13,18,.7);
}
.lang__rule{width:1px;height:12px;background:currentColor;opacity:.35;color:var(--gold)}
.lang__opt{
  appearance:none;border:0;background:none;cursor:pointer;
  padding:4px 2px;
  font:700 12px/1 var(--face);
  letter-spacing:.14em;
  color:#a49b8c;
  border-bottom:var(--rule) solid transparent;
  transition:color .28s ease,border-color .28s ease;
}
.lang__opt:hover{color:var(--porcelain)}
.lang__opt.is-on{color:var(--gold);border-bottom-color:var(--gold)}

/* ══ hero ═════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(96px,14vh,160px) var(--pad) clamp(88px,12vh,140px);
  background:
    radial-gradient(70% 55% at 78% 32%,#221d2c 0%,#131119 52%,var(--ink) 100%);
  overflow:hidden;
  isolation:isolate;
}
#pendulum{
  position:absolute;inset:0;z-index:-1;
  width:100%;height:100%;
  opacity:.95;
}
@media (max-width:1000px){#pendulum{opacity:.7}}
/* poster framing */
.hero__frame{
  position:absolute;
  inset:clamp(12px,1.6vw,22px);
  z-index:1;pointer-events:none;
  border:1px solid rgba(233,178,60,.34);
  box-shadow:inset 0 0 0 5px rgba(14,13,18,0),inset 0 0 0 6px rgba(233,178,60,.13);
}
.hero__corner{
  position:absolute;z-index:1;pointer-events:none;
  width:clamp(26px,3vw,44px);height:clamp(26px,3vw,44px);
  background:var(--gold);
}
.hero__corner--tl{
  top:clamp(12px,1.6vw,22px);left:clamp(12px,1.6vw,22px);
  clip-path:polygon(0 0,100% 0,0 100%);
}
.hero__corner--br{
  bottom:clamp(12px,1.6vw,22px);right:clamp(12px,1.6vw,22px);
  background:var(--vermilion);
  clip-path:polygon(100% 0,100% 100%,0 100%);
}

.hero__inner{position:relative;z-index:2;max-width:min(900px,100%)}

.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:.79rem;letter-spacing:.05em;
  color:var(--gold);
  margin-bottom:clamp(18px,2.6vh,28px);
  animation:in .85s .05s both cubic-bezier(.2,.8,.2,1);
}
.eyebrow::before{
  content:"";width:10px;height:10px;
  background:var(--vermilion);
  box-shadow:0 0 0 1px rgba(233,178,60,.6);
}

.title{
  max-width:19ch;
  font-size:clamp(2.5rem,9.4vw,6.6rem);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.036em;
  color:var(--porcelain);
  margin-bottom:clamp(26px,3.6vh,40px);
  animation:in 1s .14s both cubic-bezier(.16,.9,.2,1);
}
.lead{
  max-width:48ch;
  color:#cfc7b8;
  font-size:clamp(1rem,1.4vw,1.18rem);
  padding-left:clamp(14px,1.6vw,22px);
  border-left:var(--rule) solid var(--vermilion);
  animation:in .9s .5s both cubic-bezier(.2,.8,.2,1);
}
.marks{
  display:flex;flex-wrap:wrap;
  gap:clamp(10px,2vw,30px);
  margin-top:clamp(24px,3.4vh,38px);
  animation:in .9s .68s both cubic-bezier(.2,.8,.2,1);
}
.marks li{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.81rem;
  color:#e6dfd1;
}
.marks li::before{
  content:"";width:8px;height:8px;
  background:var(--gold);
}
.marks li:nth-child(2)::before{background:var(--cool)}
.marks li:nth-child(3)::before{background:var(--vermilion)}

.cue{
  position:absolute;z-index:2;
  left:var(--pad);bottom:clamp(20px,3vh,36px);
  font-size:.71rem;letter-spacing:.12em;
  color:#7d7669;
  animation:in .9s .9s both ease;
}
.cue span::after{
  content:"";display:block;
  width:26px;height:var(--rule);margin-top:9px;
  background:var(--gold);
  transform-origin:left;
  animation:reach 2.5s ease-in-out infinite;
}
@keyframes reach{0%,100%{transform:scaleX(.35);opacity:.5}50%{transform:scaleX(1);opacity:1}}
@keyframes in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}

/* ══ checker rule (Werkstätte border) ═════════════════════ */
.checker{
  position:relative;
  height:clamp(26px,3.4vw,44px);
  background:var(--ink);
  overflow:hidden;
}
.checker i{
  position:absolute;inset:0;
  animation:shift 24s linear infinite;
}
.checker i:nth-child(1){
  background-image:conic-gradient(var(--porcelain) 25%,transparent 0 50%,var(--porcelain) 0 75%,transparent 0);
  background-size:clamp(26px,3.4vw,44px) clamp(26px,3.4vw,44px);
}
.checker i:nth-child(2){
  background-image:conic-gradient(var(--gold) 25%,transparent 0 50%,var(--vermilion) 0 75%,transparent 0);
  background-size:clamp(13px,1.7vw,22px) clamp(13px,1.7vw,22px);
  opacity:.5;
  animation-duration:15s;animation-direction:reverse;
}
@keyframes shift{to{background-position:-176px 0}}
.checker--flip i:nth-child(1){animation-direction:reverse}
.checker--flip i:nth-child(2){animation-direction:normal}

/* ══ sheet ════════════════════════════════════════════════ */
.sheet{
  background:
    linear-gradient(180deg,var(--porcelain),var(--porcelain-2) 96%);
}
.hold{max-width:1220px;margin:0 auto;padding:0 var(--pad)}
.band{
  padding-block:var(--band);
  border-top:var(--rule) solid var(--ink);
}
.band:first-child{border-top:0}

.h2{
  font-size:clamp(1.85rem,4.4vw,3.2rem);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.032em;
  max-width:20ch;
  text-wrap:balance;
}
.band--split{display:grid;gap:clamp(26px,4vw,64px)}
@media (min-width:940px){
  .band--split{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);align-items:start}
}
.band:not(.band--split) .h2{margin-bottom:clamp(28px,4vh,46px)}
.prose{display:grid;gap:1.05em;max-width:50ch;color:#514c44}
.prose p:first-child::first-letter{
  float:left;
  font-size:3.1em;
  line-height:.82;
  font-weight:800;
  color:var(--vermilion);
  padding:.04em .12em 0 0;
}

/* ══ matrix of practices ══════════════════════════════════ */
.matrix{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--rule);
  background:var(--ink);
  border:var(--rule) solid var(--ink);
}
@media (max-width:920px){.matrix{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.matrix{grid-template-columns:1fr}}
.cell{
  position:relative;
  padding:clamp(22px,2.6vw,36px);
  background:var(--porcelain);
  transition:background .32s ease,color .32s ease;
}
.cell__glyph{
  display:block;
  width:20px;height:20px;
  margin-bottom:clamp(16px,2vw,22px);
  background:var(--ink);
  box-shadow:0 0 0 4px var(--porcelain),0 0 0 5px var(--ink);
  transition:background .32s ease,box-shadow .32s ease,transform .5s cubic-bezier(.2,.8,.2,1);
}
.cell:nth-child(3n-1) .cell__glyph{background:var(--vermilion)}
.cell:nth-child(3n) .cell__glyph{background:var(--gold)}
.cell h3{
  font-size:clamp(1.04rem,1.55vw,1.24rem);
  font-weight:700;letter-spacing:-.014em;
  margin-bottom:9px;
}
.cell p{color:#5b564d;font-size:.94rem;transition:color .32s ease}

/* the poster move: a cell inverts to vermilion under the pointer */
.cell:hover{background:var(--vermilion);color:var(--porcelain)}
.cell:hover p{color:#ffe9e5}
.cell:hover .cell__glyph{
  background:var(--porcelain);
  box-shadow:0 0 0 4px var(--vermilion),0 0 0 5px var(--porcelain);
  transform:rotate(45deg) scale(1.05);
}

/* ══ rungs ════════════════════════════════════════════════ */
.rungs{display:grid}
.rung{
  display:grid;
  gap:6px clamp(22px,4vw,56px);
  padding-block:clamp(20px,2.6vh,30px);
  border-top:1px solid rgba(14,13,18,.2);
  align-items:baseline;
}
.rung:last-child{border-bottom:1px solid rgba(14,13,18,.2)}
@media (min-width:860px){
  .rung{grid-template-columns:70px minmax(0,.72fr) minmax(0,1.28fr)}
}
.rung__mark{display:block;width:60px}
.rung__mark svg{width:100%;height:auto;display:block}
.rung__mark rect{fill:none;stroke:var(--brass);stroke-width:2}
.rung:hover .rung__mark rect{fill:var(--gold);stroke:var(--brass)}
.rung h3{font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:700}
.rung p{color:#5b564d;font-size:.95rem;max-width:58ch}

/* ══ contact ══════════════════════════════════════════════ */
.closing{
  background:var(--ink);
  padding-block:clamp(54px,8vh,100px);
}
.card{
  position:relative;
  padding:clamp(26px,4vw,56px);
  background:linear-gradient(158deg,#1b1824,#121019 62%,var(--ink));
  box-shadow:
    inset 0 0 0 1px rgba(233,178,60,.55),
    inset 0 0 0 6px rgba(247,244,238,.05),
    inset 0 0 0 7px rgba(233,178,60,.2);
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;top:0;left:0;
  width:clamp(30px,3.4vw,52px);height:clamp(30px,3.4vw,52px);
  background:var(--vermilion);
  clip-path:polygon(0 0,100% 0,0 100%);
}
.card__h{
  font-size:clamp(1.5rem,3.2vw,2.35rem);
  font-weight:800;letter-spacing:-.03em;
  color:var(--porcelain);
  margin-bottom:6px;
}
.card__entity{
  color:var(--gold);
  font-weight:700;
  letter-spacing:.015em;
  margin-bottom:clamp(20px,3vw,34px);
}
.contact{
  display:grid;gap:1px;
  background:rgba(247,244,238,.16);
  border:1px solid rgba(247,244,238,.16);
}
@media (min-width:620px){
  .contact{grid-template-columns:1fr 1fr}
  /* the full address takes its own row and stays on one line */
  .contact__row:first-child{grid-column:span 2}
}
.contact__row{padding:clamp(14px,1.6vw,20px);background:rgba(14,13,18,.75)}
.contact dt{
  font-size:.72rem;letter-spacing:.06em;
  color:#918977;margin-bottom:6px;
}
.contact dd{
  margin:0;font-size:1rem;font-weight:500;
  color:var(--porcelain);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

/* ══ foot ═════════════════════════════════════════════════ */
.foot{
  background:var(--ink);
  color:#7d7669;
  font-size:.76rem;text-align:center;
  padding:20px var(--pad) 28px;
  border-top:1px solid rgba(247,244,238,.1);
}

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

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .eyebrow,.title,.lead,.marks,.cue,.cue span::after,.checker i{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .cell,.cell__glyph{transition:none}
}