@font-face{
  font-family:"Soehne";
  src:url("/fonts/soehne-buch.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Soehne";
  src:url("/fonts/soehne-kraeftig.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Soehne";
  src:url("/fonts/soehne-dreiviertelfett.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

@view-transition { navigation: auto; }
::view-transition-old(root){
  animation: page-out .4s cubic-bezier(.16,1,.3,1) both;
}
::view-transition-new(root){
  animation: page-in .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }

:root{
    --ink:#111013;
    --paper:#f4f1ec;
    --muted:#6f6a63;
    --line:rgba(17,16,19,.12);
    --rust:#9e5a3d;
    --ease:cubic-bezier(.16,1,.3,1);
    --pad:clamp(1.25rem,4vw,3.5rem);
    --max:1180px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{max-width:100%; overflow-x:hidden}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Soehne",sans-serif;
    font-weight:400;
    font-synthesis:none;
    font-size:clamp(1rem,1.1vw,1.125rem);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{max-width:100%; display:block; height:auto}
  a{color:inherit}
  button,input,select,textarea{font:inherit; color:inherit}

  .skip{
    position:absolute; left:1rem; top:-4rem;
    background:var(--ink); color:var(--paper);
    padding:.75rem 1rem; z-index:200;
  }
  .skip:focus{top:1rem}

  /* grain */
  body::after{
    content:"";
    position:fixed; inset:0; z-index:40; pointer-events:none;
    opacity:.035;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  }

  /* first-load wordmark — once per session, then gone */
  html.is-loading{overflow:hidden}
  .loader{
    position:fixed; inset:0; z-index:60;
    background:var(--paper);
    display:grid; place-content:center;
    pointer-events:none;
    transition:opacity .8s var(--ease), visibility .8s;
  }
  .loader-mark{
    margin:0;
    display:flex; flex-direction:column; align-items:center;
    text-align:center;
    line-height:.82;
    transform:scale(1);
    transition:transform .8s var(--ease);
  }
  .loader-mark .clip{display:block; overflow:hidden}
  .loader-mark .clip span{
    display:block;
    white-space:nowrap;
    font-weight:500;
    letter-spacing:-.05em;
    font-size:clamp(2.4rem,8.6vw,5.6rem);
    transform:translate3d(0,110%,0);
    animation:mark-rise 1s var(--ease) forwards;
  }
  .loader-mark .clip:nth-child(2) span{animation-delay:.14s}
  @keyframes mark-rise{to{transform:translate3d(0,0,0)}}
  html.is-done .loader{opacity:0; visibility:hidden}
  html.is-done .loader-mark{transform:scale(1.035)}

  /* corners on the hero — type only, no chrome */
  .hero-chrome{
    position:absolute; top:0; left:0; right:0; z-index:3;
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:calc(var(--pad) + env(safe-area-inset-top, 0px)) var(--pad) var(--pad);
    pointer-events:none;
  }
  .hero-chrome a, .hero-chrome button{pointer-events:auto}
  .hero-chrome .mark{
    font-weight:500; letter-spacing:-.03em; text-decoration:none;
    min-height:44px; display:inline-flex; align-items:center;
  }
  .index-btn{
    background:none; border:0; cursor:pointer; color:var(--paper);
    font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
    min-height:44px; min-width:44px;
    padding:calc(var(--pad) + env(safe-area-inset-top, 0px)) var(--pad) var(--pad);
    position:fixed; top:0; right:0; z-index:52;
  }
  body.is-past-hero .index-btn,
  body.menu-open .index-btn{color:var(--ink)}
  body.is-past-hero .index-btn{opacity:0; pointer-events:none}
  body.menu-open .index-btn{opacity:1; pointer-events:auto}
  .index-btn::after{
    content:""; position:absolute; left:0; right:0; bottom:10px; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
    transition:transform .45s var(--ease);
  }
  .index-btn:hover::after, .index-btn:focus-visible::after{
    transform:scaleX(1); transform-origin:0 50%;
  }
  body.menu-open .index-btn{color:var(--ink); z-index:52; mix-blend-mode:normal}

  /* hairline index after the hero — a console, not a pill */
  .rail{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:flex-end; gap:clamp(1rem,3vw,2.2rem);
    padding:.85rem var(--pad) .7rem;
    color:var(--ink);
    background:color-mix(in oklch, var(--paper) 82%, transparent);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transform:translateY(-110%);
    transition:transform .6s var(--ease);
  }
  .rail.is-on{transform:none}
  .rail a{
    text-decoration:none;
    font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
    padding-bottom:.35rem;
    position:relative;
    min-height:44px; display:inline-flex; align-items:flex-end;
  }
  .rail a::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:var(--ink); transform:scaleX(0); transform-origin:0 50%;
    transition:transform .4s var(--ease);
  }
  .rail a.is-now::after, .rail a:hover::after{transform:scaleX(1)}
  .rail .write{margin-left:auto; letter-spacing:.16em}
  .rail-mark{font-weight:500; letter-spacing:-.03em; text-transform:none; font-size:1rem}

  .overlay{
    position:fixed; inset:0; z-index:51;
    background:color-mix(in oklch, var(--paper) 92%, transparent);
    backdrop-filter:blur(22px);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:var(--pad); padding-bottom:calc(var(--pad) + env(safe-area-inset-bottom, 0px));
    gap:.15rem;
    opacity:0; visibility:hidden;
    transition:opacity .45s var(--ease), visibility .45s;
  }
  body.menu-open .overlay{opacity:1; visibility:visible}
  .overlay a{
    font-size:clamp(2.2rem,8.4vw,5.2rem); font-weight:500;
    letter-spacing:-.045em; text-decoration:none; line-height:1.05;
    transform:translateY(1.1rem); opacity:0;
    overflow:visible;
    min-height:44px; display:flex; align-items:center;
    padding-left:.06em;
  }
  body.menu-open .overlay a{
    opacity:1; transform:none;
    transition:transform .7s var(--ease), opacity .7s var(--ease);
  }
  body.menu-open .overlay a:nth-child(1){transition-delay:.04s}
  body.menu-open .overlay a:nth-child(2){transition-delay:.1s}
  body.menu-open .overlay a:nth-child(3){transition-delay:.16s}
  body.menu-open .overlay a:nth-child(4){transition-delay:.22s}

  /* hero — photo is the stage, lower-third is the console */
  .hero{
    min-height:100dvh;
    display:flex; flex-direction:column; justify-content:flex-end;
    position:relative; color:var(--paper);
    isolation:isolate;
  }
  .hero img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 8%;
    z-index:-2;
  }
  /* landscape session: keep faces; desk: keep the console, not the chair */
  .hero img[src$="session.jpg"]{ object-position:center 24%; }
  .door img[src$="session.jpg"],
  .lane-media img[src$="session.jpg"],
  .strip img[src$="session.jpg"]{ object-position:center 32%; }
  .lane-media img[src$="desk.jpg"],
  .strip img[src$="desk.jpg"]{ object-position:78% 48%; }
  .hero.is-inner{ min-height:78dvh; }
  .hero::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(17,16,19,.18) 0%, rgba(17,16,19,.08) 38%, rgba(17,16,19,.78) 100%);
  }
  .lower{padding:0 var(--pad) var(--pad); position:relative; z-index:2}
  .lower-rule{
    height:1px; background:rgba(244,241,236,.28);
    transform:scaleX(0); transform-origin:0 50%;
  }
  html.is-done .lower-rule{animation:grow 1s var(--ease) .5s forwards}
  @keyframes grow{to{transform:scaleX(1)}}
  .lower-grid{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:clamp(1rem,3vw,2.5rem);
    align-items:end;
    padding-top:1.4rem;
  }
  .hero h1{
    margin:0;
    font-size:clamp(2.6rem,8.4vw,6.8rem);
    font-weight:500; letter-spacing:-.05em; line-height:.86;
  }
  .hero h1 .line{display:block; overflow:hidden}
  .hero h1 .line span{
    display:block;
    transform:translate3d(0,110%,0);
  }
  html.is-done .hero h1 .line span{
    animation:rise .95s var(--ease) forwards;
  }
  html.is-done .hero h1 .line:nth-child(2) span{animation-delay:.12s}
  @keyframes rise{to{transform:translate3d(0,0,0)}}
  .hero .lede{
    margin:0; max-width:22ch;
    font-size:clamp(.95rem,1.6vw,1.15rem);
    color:rgba(244,241,236,.86);
    opacity:0;
  }
  html.is-done .hero .lede{animation:up .8s var(--ease) 1.05s forwards}
  @keyframes up{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
  .slate{
    justify-self:end; text-align:right; opacity:0;
    display:flex; flex-direction:column; align-items:flex-end; gap:.15rem;
    color:var(--paper);
  }
  html.is-done .slate{animation:up .8s var(--ease) 1.2s forwards}
  .ghost{
    color:inherit; text-decoration:none;
    font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
    position:relative; display:inline-block; min-height:44px; line-height:44px;
  }
  .ghost::after{
    content:""; position:absolute; left:0; right:0; bottom:10px; height:1px;
    background:currentColor; transform:scaleX(.35); transform-origin:0 50%;
    transition:transform .45s var(--ease);
  }
  .ghost:hover::after{transform:scaleX(1)}
  .listen{
    display:flex; flex-wrap:wrap; gap:0 1.15rem;
    justify-content:flex-end;
  }
  .listen-links{
    display:flex; flex-wrap:wrap; gap:.35rem 1.1rem;
    max-width:none;
  }

  /* sections */
  section{padding:clamp(4.5rem,12vw,9rem) var(--pad)}
  .wrap{max-width:var(--max); margin:0 auto}
  .kicker{
    margin:0 0 .8rem;
    font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); font-weight:700;
  }
  h2{
    margin:0;
    font-size:clamp(2rem,5.4vw,4.2rem);
    font-weight:500; letter-spacing:-.04em; line-height:.95;
    text-wrap:balance;
  }
  .sub{margin:1rem 0 0; max-width:38ch; color:var(--muted)}

  .doors-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
    margin-top:2.5rem;
  }
  .door{
    display:block; text-decoration:none;
    position:relative; overflow:hidden;
    min-height:min(58vw, 420px);
    border-radius:1.6rem;
    color:var(--paper);
  }
  .door img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 8%;
    transition:transform .8s var(--ease);
  }
  .door:hover img{transform:scale(1.04)}
  .door::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 35%, rgba(17,16,19,.72) 100%);
  }
  .door span{
    position:absolute; left:1.2rem; bottom:1.2rem; z-index:1;
    font-size:clamp(1.6rem,3vw,2.2rem); font-weight:500; letter-spacing:-.03em;
  }
  .chapters{
    display:grid; grid-template-columns:1fr 1fr; gap:1rem;
    margin-top:2.4rem;
  }
  .chapter{
    padding:1.3rem 1.35rem 1.4rem;
    border:1px solid var(--line); border-radius:1.4rem;
    background:color-mix(in oklch, var(--paper) 70%, white);
  }
  .chapter h3{margin:.2rem 0 .45rem; font-size:1.35rem; font-weight:500; letter-spacing:-.03em}
  .chapter p{margin:0; color:var(--muted)}

  /* work */
  .lanes{display:grid; gap:1.25rem; margin-top:3rem}
  .lane{
    display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.25rem,4vw,3rem);
    align-items:stretch;
    padding:.5rem; border:1px solid var(--line); border-radius:1.75rem;
    background:rgba(17,16,19,.03);
  }
  .lane:nth-child(even){grid-template-columns:1.15fr 1fr}
  .lane:nth-child(even) .lane-copy{order:2}
  .lane-media, .lane-copy{border-radius:calc(1.75rem - .5rem); overflow:hidden}
  .lane-media{min-height:min(52vw,420px); position:relative}
  .lane-media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
  .lane-copy{
    background:var(--paper); padding:clamp(1.5rem,3vw,2.4rem);
    display:flex; flex-direction:column; justify-content:center;
  }
  .lane-copy h3{margin:0 0 .6rem; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:500; letter-spacing:-.03em}
  .lane-copy p{margin:0 0 1.1rem; color:var(--muted)}
  .lane-copy ul{margin:0; padding:0; list-style:none; display:grid; gap:.35rem}
  .lane-copy li{
    padding:.35rem 0;
    border-bottom:1px solid var(--line);
    font-size:.95rem;
  }
  .lane-copy li:last-child{border-bottom:0}

  /* film strip */
  .strip-head{display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.4rem}
  .strip{
    display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:.5rem; -webkit-overflow-scrolling:touch;
  }
  .strip::-webkit-scrollbar{height:2px}
  .strip::-webkit-scrollbar-thumb{background:var(--ink)}
  .strip figure{
    margin:0; flex:0 0 min(72vw,420px); scroll-snap-align:start;
    border-radius:1.4rem; overflow:hidden; position:relative;
  }
  .strip img{width:100%; height:min(62vw,520px); object-fit:cover}
  .strip figcaption{
    position:absolute; left:1rem; bottom:1rem;
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--paper);
  }

  /* music + credits */
  .split{
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem);
    align-items:center; margin-top:2.4rem;
  }
  .frame{
    padding:.5rem; border:1px solid var(--line); border-radius:1.6rem;
    background:rgba(17,16,19,.03);
  }
  .frame iframe, .frame img{
    width:100%; border:0; border-radius:calc(1.6rem - .5rem); display:block;
  }
  .credits{display:grid; gap:.8rem; margin-top:2.2rem}
  .credit{
    display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center;
    padding:1.1rem 1.2rem; text-decoration:none;
    border:1px solid var(--line); border-radius:1.2rem;
    transition:background .35s var(--ease), transform .45s var(--ease);
  }
  .credit:hover{background:#fff; transform:translateX(4px)}
  .credit .who{font-weight:500; letter-spacing:-.02em}
  .credit .title{color:var(--muted); font-size:.95rem}
  .credit .go{
    display:flex; flex-wrap:wrap; gap:.35rem .9rem;
    justify-content:flex-end;
    font-size:.85rem; color:var(--muted);
  }
  .credit .go a{color:inherit; text-decoration:none}
  .credit .go a:hover{color:var(--ink)}

  /* contact */
  #contact{background:var(--ink); color:var(--paper)}
  #contact .kicker{color:rgba(244,241,236,.55)}
  #contact .sub{color:rgba(244,241,236,.7)}
  .contact-grid{
    display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem);
    margin-top:2.5rem; align-items:start;
  }
  .doors{display:grid; gap:.9rem; margin-top:1.5rem}
  .doors a{color:var(--paper); text-decoration:none; font-size:1.15rem; letter-spacing:-.02em}
  .doors a span{display:block; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,241,236,.5); margin-bottom:.2rem}

  form{display:grid; gap:.85rem}
  .field{position:relative}
  .field input, .field select, .field textarea{
    width:100%; background:transparent;
    border:1px solid rgba(244,241,236,.18);
    border-radius:4px; padding:1.2rem 1rem .55rem;
    outline:none;
  }
  .field textarea{min-height:8rem; resize:vertical; padding-top:1.4rem}
  .field span{
    position:absolute; left:1rem; top:50%; transform:translateY(-50%);
    color:rgba(244,241,236,.5); pointer-events:none;
    transition:transform .2s var(--ease), font-size .2s var(--ease);
  }
  .field textarea + span{top:1.15rem; transform:none}
  .field input:focus + span,
  .field input:not(:placeholder-shown) + span,
  .field select:focus + span,
  .field select:valid + span,
  .field textarea:focus + span,
  .field textarea:not(:placeholder-shown) + span{
    transform:translateY(-1.15rem); font-size:.7rem;
  }
  .field input:focus, .field select:focus, .field textarea:focus{border-color:rgba(244,241,236,.7)}
  .field input:user-invalid, .field textarea:user-invalid{border-color:#c45c4a}
  .err{display:none; font-size:.8rem; color:#e7a399}
  .field input:user-invalid ~ .err, .field textarea:user-invalid ~ .err{display:block}
  .send{
    justify-self:start;
    background:transparent; color:var(--paper);
    border:0; border-bottom:1px solid rgba(244,241,236,.5);
    border-radius:0; cursor:pointer;
    padding:.2rem 0 .45rem; font-weight:500;
    min-height:44px; min-width:44px; letter-spacing:.08em; text-transform:uppercase; font-size:.82rem;
    transition:border-color .35s var(--ease);
  }
  .send:hover{border-bottom-color:var(--paper)}
  .form-note{min-height:1.4rem; font-size:.9rem; color:rgba(244,241,236,.7)}
  .form-note.is-err{color:#e7a399}
  form.is-sending .send{opacity:.55; pointer-events:none}
  form.is-done{display:none}
  .thanks{display:none; padding:1.5rem 0}
  form.is-done + .thanks{display:block}

  footer{
    background:var(--ink); color:var(--paper);
    padding:0 0 1.4rem;
    overflow:hidden;
    position:relative;
  }
  .ticker{
    overflow:hidden; border-top:1px solid rgba(244,241,236,.14);
    border-bottom:1px solid rgba(244,241,236,.14);
    padding:.7rem 0;
    font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(244,241,236,.55); white-space:nowrap;
  }
  .ticker-track{
    display:inline-flex; gap:2.4rem;
    animation:crawl 42s linear infinite;
    will-change:transform;
  }
  @keyframes crawl{to{transform:translate3d(-50%,0,0)}}
  .foot-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:1.5rem 2rem;
    align-items:end;
    padding:clamp(2.4rem,6vw,4.5rem) var(--pad) 0;
  }
  .giant-a, .giant-b{
    margin:0;
    font-size:clamp(3rem,14vw,11rem);
    font-weight:500; letter-spacing:-.055em; line-height:.78;
  }
  .giant-b{grid-column:1; justify-self:start}
  .foot-info{
    grid-column:2; grid-row:1 / span 2;
    display:flex; flex-direction:column; gap:.55rem;
    padding-bottom:.4rem;
    font-size:clamp(.95rem,1.5vw,1.1rem);
  }
  .foot-info .role{color:rgba(244,241,236,.6); max-width:18ch}
  .foot-info a{color:inherit; text-decoration:none; position:relative; width:max-content; min-height:44px; display:inline-flex; align-items:center}
  .foot-info a::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
    transition:transform .4s var(--ease);
  }
  .foot-info a:hover::after{transform:scaleX(1); transform-origin:0 50%}

  .reveal{opacity:0; transform:translateY(18px)}
  .reveal.in{opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease)}

  :focus-visible{outline:2px solid var(--rust); outline-offset:3px}

  @media (max-width:860px){
    .doors-grid, .chapters, .split, .contact-grid, .lane, .lane:nth-child(even), .lower-grid, .foot-grid{grid-template-columns:1fr}
    .lane:nth-child(even) .lane-copy{order:0}
    .lane-media{min-height:58vw}
    .slate{justify-self:start; align-items:flex-start; text-align:left}
    .lower-grid{gap:.85rem; padding-top:1rem}
    .hero h1{font-size:clamp(2.2rem,14vw,3.4rem)}
    .hero .lede{max-width:28ch}
    .rail{display:none}
    .index-btn{
      position:fixed;
      mix-blend-mode:difference;
      color:var(--paper);
      opacity:1; pointer-events:auto;
    }
    body.is-past-hero .index-btn{
      opacity:1; pointer-events:auto; color:var(--paper);
    }
    body.menu-open .index-btn{
      mix-blend-mode:normal; color:var(--ink);
    }
    .credit{grid-template-columns:1fr auto; gap:.6rem 1rem}
    .credit .n{grid-column:1 / -1; margin:0}
    .credit .go{grid-column:1 / -1; justify-content:flex-start}
    .giant-b{grid-column:auto}
    .foot-info{grid-column:auto; grid-row:auto}
    .hero-chrome{color:var(--paper)}
    body.menu-open .hero-chrome{color:var(--ink)}
    .hero img[src$="session.jpg"]{ object-position:68% 28%; }
    .sub a, .lane-copy a{min-height:44px; display:inline-flex; align-items:center}
  }

  html.no-js .loader{display:none}
  html.no-js .hero h1 .line span, html.no-js .hero .lede, html.no-js .slate, html.no-js .reveal, html.no-js .lower-rule{
    transform:none; opacity:1; animation:none;
  }
  html.no-js .rail{transform:none}

  html.is-return .loader{display:none !important}
  html.is-return .hero h1 .line span,
  html.is-return .hero .lede,
  html.is-return .slate,
  html.is-return .lower-rule{
    transform:none; opacity:1; animation:none;
  }

  @media (prefers-reduced-motion:reduce){
    *, *::before, *::after{animation:none !important; transition:none !important}
    .loader{display:none !important}
    .hero h1 .line span, .hero .lede, .slate, .reveal, .lower-rule, .ticker-track{
      transform:none !important; opacity:1 !important;
    }
    html{scroll-behavior:auto}
    .hero img{transform:none; animation:none}
    @view-transition { navigation: none; }
  }