:root{
  --paper:#F4F0E6;--paper-deep:#E8E1D4;--ink:#0F0E11;--ink-soft:#34333A;
  --red:#D40F06;--blue:#0D67B4;--yellow:#ECC320;--olive:#93A441;--sky:#4C95E3;
  --sans:"Jost",Arial,sans-serif;--serif:"Source Serif 4",Georgia,serif;
  --rule:rgba(15,14,17,.2);--max:1440px;--ease:cubic-bezier(.22,1,.36,1)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif)}
a{color:inherit}.skip-link{position:fixed;left:12px;top:-100px;z-index:9999;background:var(--ink);color:var(--paper);padding:10px 14px;font:500 13px var(--sans)}.skip-link:focus{top:12px}
.shell{width:min(calc(100% - 96px),var(--max));margin-inline:auto}
.site-header{height:80px;position:sticky;top:0;z-index:200;display:grid;grid-template-columns:190px 1fr auto;align-items:center;padding:0 42px;background:rgba(244,240,230,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.brand{font:600 14px/1 var(--sans);letter-spacing:.09em;text-decoration:none;white-space:nowrap}.desktop-nav{display:flex;justify-content:center;align-items:center;gap:26px;font:500 14px/1 var(--sans)}.desktop-nav a{text-decoration:none;position:relative;padding:31px 0 30px;white-space:nowrap}.desktop-nav a.active:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);position:absolute;left:-13px;top:36px}.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:22px;height:1px;background:var(--ink);transition:right 180ms ease}.desktop-nav a:hover:after,.desktop-nav a:focus-visible:after,.desktop-nav a.active:after{right:0}
.header-actions{display:flex;align-items:center;gap:22px}.language-switch{display:flex;gap:8px;align-items:center;font:500 12px var(--sans)}.language-switch button{border:0;background:none;padding:4px 0;color:var(--ink);opacity:.45;cursor:pointer}.language-switch button.is-active{opacity:1;text-decoration:underline;text-underline-offset:5px}.menu-button{display:none;border:0;background:none;font:600 12px var(--sans);letter-spacing:.06em}
.mobile-menu{position:fixed;inset:0;z-index:500;background:var(--paper);padding:20px;transform:translateY(-101%);visibility:hidden;pointer-events:none;overflow-y:auto;transition:transform 360ms var(--ease),visibility 0s linear 360ms}.mobile-menu.is-open{transform:none;visibility:visible;pointer-events:auto;transition:transform 360ms var(--ease),visibility 0s}.mobile-menu-top{display:flex;justify-content:space-between;align-items:center}.menu-close{border:0;background:none;font:600 12px var(--sans)}.mobile-menu nav{display:grid;margin-top:72px}.mobile-menu nav a{font:500 clamp(36px,10vw,58px)/1.08 var(--sans);letter-spacing:-.04em;text-decoration:none;padding:7px 0}.mobile-menu nav a.active{color:var(--red)}.mobile-menu-footer{margin-top:60px;display:flex;justify-content:space-between;align-items:end}
.section-pad{padding-block:clamp(88px,10vw,160px)}.section-index,.kicker{font:600 11px/1.2 var(--sans);letter-spacing:.11em}.section-index{display:block;margin-bottom:28px}.kicker{margin:0 0 20px}.light{color:var(--paper)}
.public-hero{min-height:calc(100vh - 80px);display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center;padding-block:72px 96px}.hero-copy{grid-column:1/7}.hero-copy h1{margin:0;font:500 clamp(68px,8.6vw,150px)/.78 var(--sans);letter-spacing:-.06em}.hero-copy h1 span{display:block}.hero-lead{max-width:620px;font:400 clamp(24px,2vw,34px)/1.3 var(--serif);margin:48px 0 22px}.hero-body{max-width:560px;font-size:17px;line-height:1.65}.hero-senses{grid-column:8/13;min-height:560px;position:relative}.sense-orbit{position:absolute;inset:50px 20px 70px 30px;border:1.5px solid var(--ink);border-radius:50%;transform:rotate(-17deg)}.sense-orbit:after{content:"";position:absolute;left:19%;top:16%;width:58%;height:68%;border:1.5px solid var(--ink);border-radius:50%;transform:rotate(51deg)}.orb{position:absolute;border-radius:50%}.orb-red{width:96px;height:96px;background:var(--red);right:8%;top:9%}.orb-blue{width:72px;height:72px;background:var(--blue);left:17%;top:33%}.orb-yellow{width:118px;height:118px;background:var(--yellow);right:22%;bottom:8%}.orb-black{width:52px;height:52px;background:var(--ink);left:42%;bottom:28%}.sense-word{position:absolute;font:600 11px var(--sans);letter-spacing:.12em;background:var(--paper);padding:4px 7px}.s1{left:4%;top:8%}.s2{right:1%;top:39%}.s3{left:0;bottom:13%}.s4{right:5%;bottom:0}.s5{left:47%;top:50%}
.dark{background:var(--ink);color:var(--paper)}.speel-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}.speel-copy{grid-column:1/6}.speel-copy h2,.outside-copy h2,.living h2,.next h2,.components h2,.section-head h2{font:500 clamp(44px,5vw,78px)/.94 var(--sans);letter-spacing:-.045em;margin:0 0 34px}.speel-copy .lead,.outside-copy .lead,.living .lead{font:400 23px/1.45 var(--serif)}.speel-copy>p:not(.kicker):not(.lead){font-size:16px;line-height:1.65;max-width:52ch}.project-facts{margin-top:52px;border-top:1px solid rgba(244,240,230,.28)}.project-facts div{padding:18px 0;border-bottom:1px solid rgba(244,240,230,.18)}.project-facts span{display:block;font:600 10px var(--sans);letter-spacing:.11em;opacity:.55;margin-bottom:7px}.project-facts strong{font:500 15px/1.4 var(--sans)}.source-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px}.source-links a{font:500 12px var(--sans);text-underline-offset:5px}
.route{grid-column:7/13;position:relative;min-height:760px}.route-line{position:absolute;left:48%;top:4%;bottom:5%;width:2px;background:linear-gradient(var(--red),var(--yellow),var(--blue),var(--paper));transform:rotate(7deg);opacity:.9}.route-node{position:absolute;width:190px;border:0;background:none;color:var(--paper);text-align:left;cursor:pointer;font-family:var(--sans)}.route-node:before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--paper);border:5px solid var(--ink);box-shadow:0 0 0 2px var(--paper)}.route-node b{display:block;font:500 42px/.95 var(--sans);letter-spacing:-.04em}.route-node span{display:block;font:500 13px/1.3 var(--sans);margin-top:6px}.route-node:hover span,.route-node:focus-visible span{text-decoration:underline;text-underline-offset:4px}.n1{left:0;top:4%}.n1:before{right:-30px;top:18px}.n2{right:2%;top:19%}.n2:before{left:-35px;top:17px}.n3{left:2%;top:35%}.n3:before{right:-27px;top:18px}.n4{right:0;top:50%}.n4:before{left:-35px;top:17px}.n5{left:0;top:65%}.n5:before{right:-30px;top:18px}.n6{right:2%;top:80%}.n6:before{left:-35px;top:17px}.route-node.is-active:before{background:var(--yellow)}.route-detail{position:absolute;left:52%;top:35%;width:44%;border-top:1px solid rgba(244,240,230,.35);padding-top:18px}.route-detail>span{font:600 10px var(--sans);letter-spacing:.12em;opacity:.55}.route-detail h3{font:500 28px/1.05 var(--sans);margin:7px 0}.route-detail p{font-size:14px;line-height:1.5;margin:7px 0}.route-detail p:last-child{font-family:var(--serif);font-size:15px;line-height:1.55;opacity:.78}
.section-head{display:grid;grid-template-columns:7fr 4fr;gap:8.33%;align-items:end}.section-head>p{font-size:16px;line-height:1.65;max-width:48ch;margin:0 0 8px}.sense-grid{display:grid;grid-template-columns:repeat(5,1fr);margin-top:72px;border-top:1px solid var(--rule)}.sense-card{min-height:330px;padding:24px 18px 26px;border-right:1px solid var(--rule);position:relative}.sense-card:first-child{border-left:1px solid var(--rule)}.sense-card .shape{display:block;width:74px;height:74px;margin-bottom:64px}.sense-card small{font:600 10px var(--sans);letter-spacing:.11em}.sense-card h3{font:500 20px/1.1 var(--sans);margin:10px 0 13px}.sense-card p{font-size:14px;line-height:1.55;margin:0}.see .shape{background:var(--red);border-radius:50%}.hear .shape{border:3px solid var(--blue);border-radius:50%;box-shadow:inset 0 0 0 13px var(--paper),inset 0 0 0 16px var(--blue)}.move .shape{border:3px solid var(--ink);border-radius:50% 0 50% 50%;transform:rotate(28deg)}.smell .shape{background:var(--olive);border-radius:60% 40% 60% 40%}.play .shape{background:linear-gradient(90deg,var(--ink) 0 22%,var(--paper) 22% 40%,var(--ink) 40% 62%,var(--paper) 62% 80%,var(--ink) 80%);border:1px solid var(--ink)}
.components{background:var(--paper-deep)}.components-head{max-width:950px}.component-list{margin-top:72px}.component-row{display:grid;grid-template-columns:110px 260px 1fr 160px;gap:30px;align-items:start;padding:26px 0;border-top:1px solid rgba(15,14,17,.25)}.component-row:last-child{border-bottom:1px solid rgba(15,14,17,.25)}.component-year{font:500 34px/.95 var(--sans);letter-spacing:-.04em}.component-row h3{font:500 20px/1.15 var(--sans);margin:0}.component-row p{margin:0;max-width:60ch;font-size:15px;line-height:1.6}.component-sense{justify-self:end;font:600 10px var(--sans);letter-spacing:.11em;text-transform:uppercase;padding:7px 9px;border:1px solid var(--ink)}.outside-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}.outside-copy{grid-column:1/5;position:sticky;top:130px}.outside-main{grid-column:6/13;margin:0}.outside-main img,.outside-wall img,.outside-context img,.outside-panel img{display:block;width:100%;height:100%;object-fit:cover}.outside-main picture{display:block;aspect-ratio:16/8.2;overflow:hidden}.outside-wall{grid-column:6/10;margin:90px 0 0}.outside-wall picture{display:block;aspect-ratio:4/3;overflow:hidden}.outside-context{grid-column:10/13;margin:180px 0 0}.outside-context picture{display:block;aspect-ratio:3/4;overflow:hidden}.outside-panel{grid-column:6/13;margin:42px 0 0}.outside-panel picture{display:block;aspect-ratio:12/5;overflow:hidden}.outside-copy>p:not(.kicker):not(.lead){font-size:15px;line-height:1.6;opacity:.8}
.living-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.living-grid>div:first-child{grid-column:1/7}.living-copy{grid-column:8/13;padding-top:58px}.living-copy p{font-size:15px;line-height:1.65}.living-years{grid-column:1/13;display:grid;grid-template-columns:1fr 1fr;margin-top:70px;border-top:1px solid var(--rule)}.living-years div{padding:28px 0;border-bottom:1px solid var(--rule);display:flex;gap:34px;align-items:baseline}.living-years div:first-child{border-right:1px solid var(--rule);padding-right:30px}.living-years div:last-child{padding-left:30px}.living-years b{font:500 42px/1 var(--sans);letter-spacing:-.045em}.living-years span{font:500 14px var(--sans)}
.next{border-top:1px solid var(--rule)}.next-grid{display:grid;grid-template-columns:7fr 4fr;gap:8.33%;align-items:end}.next-copy p{font-size:16px;line-height:1.65}.text-link{font:500 13px var(--sans);text-underline-offset:6px}.site-footer{background:var(--ink);color:var(--paper);padding:52px 0}.footer-grid{display:grid;grid-template-columns:1fr auto 50px;gap:40px;align-items:end}.footer-wordmark{font:600 14px var(--sans);letter-spacing:.09em}.footer-meta{display:flex;gap:24px;font:400 12px var(--sans);opacity:.65}.footer-meta p{margin:0}.checker{width:40px;height:40px;background:conic-gradient(var(--paper) 25%,var(--ink) 0 50%,var(--paper) 0 75%,var(--ink) 0) 0 0/20px 20px;border:1px solid var(--paper)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity 560ms var(--ease),transform 560ms var(--ease)}.reveal.is-visible{opacity:1;transform:none}.delay{transition-delay:90ms}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media(max-width:1180px){
  .site-header{grid-template-columns:1fr auto;padding-inline:28px}.desktop-nav,.site-header>.header-actions>.language-switch{display:none}.menu-button{display:block}.shell{width:min(calc(100% - 56px),var(--max))}
  .public-hero{grid-template-columns:repeat(6,1fr);min-height:auto;padding-block:80px 110px}.hero-copy{grid-column:1/4}.hero-senses{grid-column:4/7;min-height:490px}.hero-copy h1{font-size:clamp(64px,10vw,116px)}
  .route-node{width:165px}.route-detail{left:50%;width:48%}
  .sense-grid{grid-template-columns:repeat(3,1fr)}.sense-card:nth-child(4),.sense-card:nth-child(5){border-top:1px solid var(--rule)}.sense-card:nth-child(4){grid-column:1/2}
}
@media(max-width:767px){
  .shell{width:calc(100% - 40px)}.site-header{height:64px;padding-inline:20px}.section-pad{padding-block:86px}
  .public-hero{grid-template-columns:repeat(4,1fr);gap:12px;padding-block:58px 86px}.hero-copy{grid-column:1/5}.hero-senses{grid-column:1/5;min-height:390px;margin-top:30px}.hero-copy h1{font-size:clamp(62px,20vw,102px)}.hero-lead{margin-top:38px;font-size:23px}.hero-body{font-size:15px}.sense-word{font-size:9px}.orb-red{width:72px;height:72px}.orb-yellow{width:82px;height:82px}
  .speel-grid{grid-template-columns:repeat(4,1fr);gap:12px}.speel-copy{grid-column:1/5}.route{grid-column:1/5;min-height:auto;margin-top:72px;display:grid;grid-template-columns:1fr;gap:0}.route-line{left:11px;top:0;bottom:0;transform:none}.route-node{position:relative;inset:auto!important;width:auto;padding:0 0 30px 46px}.route-node:before{left:2px!important;right:auto!important;top:11px!important;width:14px;height:14px}.route-node b{font-size:30px}.route-detail{position:relative;left:auto;top:auto;width:auto;margin:14px 0 0 46px;padding-bottom:18px}
  .section-head{grid-template-columns:1fr;gap:24px}.sense-grid{grid-template-columns:1fr 1fr;margin-top:48px}.sense-card{min-height:290px;border-top:1px solid var(--rule)}.sense-card:nth-child(odd){border-left:1px solid var(--rule)}.sense-card:nth-child(even){border-left:0}.sense-card .shape{margin-bottom:44px}.sense-card:last-child{grid-column:1/3}
  .component-row{grid-template-columns:72px 1fr;gap:12px 18px}.component-year{font-size:27px}.component-row h3{font-size:18px}.component-row p{grid-column:2/3}.component-sense{grid-column:2/3;justify-self:start}
  .outside-grid{grid-template-columns:repeat(4,1fr);gap:12px}.outside-copy{grid-column:1/5;position:static}.outside-main{grid-column:1/5;margin-top:48px}.outside-wall{grid-column:1/4;margin-top:36px}.outside-context{grid-column:3/5;margin-top:94px}.outside-panel{grid-column:1/5;margin-top:34px}.outside-context picture{aspect-ratio:3/4}.outside-panel picture{aspect-ratio:2.3/1}
  .living-grid{grid-template-columns:repeat(4,1fr);gap:12px}.living-grid>div:first-child,.living-copy,.living-years{grid-column:1/5}.living-copy{padding-top:12px}.living-years{grid-template-columns:1fr}.living-years div:first-child{border-right:0;padding-right:0}.living-years div:last-child{padding-left:0}.living-years b{font-size:34px}
  .next-grid{grid-template-columns:1fr;gap:24px}.speel-copy h2,.outside-copy h2,.living h2,.next h2,.components h2,.section-head h2{font-size:clamp(40px,13vw,62px)}
  .footer-grid{grid-template-columns:1fr 40px}.footer-meta{grid-column:1/2;grid-row:2}.checker{grid-column:2;grid-row:1/3}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.mobile-menu{transition:none}}


/* v1.1 — tablet / small-laptop SpeelSpoor route fix.
   The original absolute timeline works on wide desktop, but can collide around
   768–1180px. At those widths the route becomes a deliberate two-column
   editorial timeline instead of squeezing the desktop composition. */
@media (min-width:768px) and (max-width:1180px) {
  .speel-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }

  .speel-copy {
    grid-column: 1 / 7;
    max-width: 760px;
  }

  .route {
    grid-column: 1 / 7;
    min-height: auto;
    margin-top: 76px;
    display: grid;
    grid-template-columns: minmax(210px, .85fr) minmax(300px, 1.15fr);
    grid-template-rows: repeat(6, auto);
    column-gap: clamp(48px, 8vw, 96px);
    row-gap: 0;
    align-items: start;
    position: relative;
  }

  .route-line {
    left: 12px;
    top: 10px;
    bottom: 8px;
    width: 2px;
    transform: none;
  }

  .route-node {
    position: relative;
    inset: auto !important;
    width: auto;
    grid-column: 1;
    padding: 0 0 38px 52px;
    min-height: 94px;
  }

  .route-node:before {
    left: 2px !important;
    right: auto !important;
    top: 12px !important;
    width: 15px;
    height: 15px;
  }

  .route-node b {
    font-size: clamp(32px, 4vw, 44px);
  }

  .route-detail {
    grid-column: 2;
    grid-row: 1 / span 6;
    position: sticky;
    left: auto;
    top: 118px;
    width: auto;
    margin: 0;
    padding: 22px 0 28px;
    align-self: start;
    border-top: 1px solid rgba(244,240,230,.35);
    border-bottom: 1px solid rgba(244,240,230,.16);
  }

  .route-detail h3 {
    font-size: clamp(30px, 4vw, 44px);
    margin: 10px 0 12px;
  }

  .route-detail p {
    max-width: 42ch;
  }
}

/* Mobile keeps the single-column timeline and explicitly clears tablet grid placement. */
@media (max-width:767px) {
  .route-detail {
    grid-column: auto;
    grid-row: auto;
    position: relative;
    top: auto;
  }
}



/* v1.4 — definitive SpeelSpoor timeline layout.
   Tablet and desktop use real grid columns rather than overlapping absolute
   coordinates. Timeline nodes can never occupy the project-detail column. */
@media (min-width:768px) {
  .route {
    min-height: auto;
    display: grid;
    grid-template-columns: minmax(190px, .88fr) minmax(280px, 1.12fr);
    grid-template-rows: repeat(6, minmax(96px, auto));
    column-gap: clamp(38px, 5vw, 78px);
    row-gap: 0;
    align-items: start;
    position: relative;
  }

  .route-line {
    left: 17px;
    top: 14px;
    bottom: 18px;
    width: 2px;
    transform: rotate(1.5deg);
    transform-origin: top center;
    z-index: 0;
  }

  .route-node,
  .route-node.n1,
  .route-node.n2,
  .route-node.n3,
  .route-node.n4,
  .route-node.n5,
  .route-node.n6 {
    position: relative;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto;
    grid-column: 1;
    padding: 0 0 30px 54px;
    min-height: 96px;
    z-index: 2;
  }

  .route-node.n1 { grid-row: 1; }
  .route-node.n2 { grid-row: 2; }
  .route-node.n3 { grid-row: 3; }
  .route-node.n4 { grid-row: 4; }
  .route-node.n5 { grid-row: 5; }
  .route-node.n6 { grid-row: 6; }

  .route-node:before,
  .route-node.n1:before,
  .route-node.n2:before,
  .route-node.n3:before,
  .route-node.n4:before,
  .route-node.n5:before,
  .route-node.n6:before {
    left: 7px !important;
    right: auto !important;
    top: 12px !important;
    width: 15px;
    height: 15px;
  }

  .route-node b {
    font-size: clamp(31px, 3vw, 43px);
  }

  .route-detail {
    grid-column: 2;
    grid-row: 1 / span 6;
    position: sticky;
    left: auto !important;
    right: auto !important;
    top: 112px;
    width: auto !important;
    margin: 0;
    padding: 18px 0 24px;
    align-self: start;
    z-index: 3;
    background: var(--ink);
    border-top: 1px solid rgba(244,240,230,.35);
    border-bottom: 1px solid rgba(244,240,230,.14);
  }

  .route-detail h3 {
    font-size: clamp(30px, 3vw, 44px);
    margin: 9px 0 12px;
  }

  .route-detail p {
    max-width: 38ch;
  }
}

@media (min-width:768px) and (max-width:1180px) {
  .speel-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }

  .speel-copy {
    grid-column: 1 / 7;
    max-width: 760px;
  }

  .route {
    grid-column: 1 / 7;
    margin-top: 72px;
  }
}

@media (max-width:767px) {
  .route-detail {
    grid-column: auto;
    grid-row: auto;
    position: relative;
    top: auto;
  }
}