/* ==========================================================================
   Sepia Studios / black & white minimal
   ========================================================================== */

:root{
  --ink:      #0B0B0A;
  --ink-60:   rgba(11,11,10,.58);
  --ink-30:   rgba(11,11,10,.30);
  --ink-12:   rgba(11,11,10,.12);
  --paper:    #F4F2EF;

  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Times, serif;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --slow: 1.15s;
}

*, *::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-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem, .55vw + .87rem, 1.19rem);
  line-height:1.5;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,blockquote,figure,ul{ margin:0; }
ul{ list-style:none; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

::selection{ background:var(--ink); color:var(--paper); }

:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:6px;
}

em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; }

.dim{ color:var(--ink-60); }

/* ── Type scale ──────────────────────────────────────────────────────────── */

.display{
  font-size:clamp(2.65rem, 9.1vw, 10.5rem);
  font-weight:300;
  line-height:.93;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.display em{ font-size:1.04em; letter-spacing:-.02em; }

.h2{
  font-size:clamp(1.9rem, 4.6vw, 4.15rem);
  font-weight:300;
  line-height:1;
  letter-spacing:-.04em;
}

.eyebrow,
.sect__num,
.foot__label,
.head__mark,
.head__nav,
.scroll-cue{
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.lede{
  font-size:clamp(1.05rem, 1vw + .78rem, 1.45rem);
  line-height:1.4;
  letter-spacing:-.018em;
  max-width:34ch;
}

/* ── Intro curtain ───────────────────────────────────────────────────────── */

/* No JS → no curtain, no hidden content. Everything below is opt-in via .js. */
.curtain{ display:none; }

.js .curtain{
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.4rem;
  pointer-events:none;
  transition:opacity .5s var(--ease), visibility .5s;
}
.curtain__mark{
  font-size:.7rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(.5rem);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.curtain__rule{
  width:min(30vw, 200px);
  height:1px;
  background:var(--ink-12);
  position:relative;
  overflow:hidden;
}
.curtain__rule::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1s var(--ease);
}
.curtain.is-playing .curtain__mark{ opacity:1; transform:none; }
.curtain.is-playing .curtain__rule::after{ transform:scaleX(1); }
.curtain.is-done{ opacity:0; visibility:hidden; }

/* Leaving the page */
body.is-leaving main,
body.is-leaving .head,
body.is-leaving .foot{
  opacity:0;
  transition:opacity .38s ease;
}

/* ── Scroll progress hairline ────────────────────────────────────────────── */

.progress{
  position:fixed;
  top:0; left:0; right:0;
  height:1px;
  z-index:60;
  pointer-events:none;
}
.progress span{
  display:block;
  height:100%;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.head{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:baseline;
  gap:2rem;
  padding:clamp(1.1rem,2.2vw,1.7rem) var(--gut);
  mix-blend-mode:normal;
  transition:transform .5s var(--ease), opacity .4s ease;
}
.head::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, var(--paper) 32%, rgba(244,242,239,0));
  z-index:-1;
  opacity:0;
  transition:opacity .4s ease;
}
.head.is-stuck::before{ opacity:1; }
.head.is-hidden{ transform:translateY(-110%); }

.head__mark{ margin-right:auto; }
.head__nav{ display:flex; gap:clamp(1rem,2.4vw,2.4rem); }

@media (max-width:520px){
  .head{ gap:1rem; }
  .head__nav{ gap:1.1rem; }
}

/* Underline sweep on nav */
.nav-link .swap{ position:relative; }
.nav-link .swap::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-.28em;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav-link:hover .swap::after,
.nav-link[aria-current="page"] .swap::after{ transform:scaleX(1); }

/* ── Text swap (hover) ───────────────────────────────────────────────────── */

.swap{
  display:inline-block;
  position:relative;
  overflow:hidden;
  vertical-align:top;
}
.swap__a, .swap__b{
  display:block;
  transition:transform .55s var(--ease);
}
.swap__b{
  position:absolute;
  inset:0;
  transform:translateY(105%);
}
a:hover .swap__a, button:hover .swap__a{ transform:translateY(-105%); }
a:hover .swap__b, button:hover .swap__b{ transform:translateY(0); }

/* ── Reveal primitives ──────────────────────────────────────────────────── */

.reveal-lines .line{
  display:block;
  overflow:hidden;
  padding-bottom:.06em;
  margin-bottom:-.06em;
}
.reveal-lines .line > span{ display:block; }
.js .reveal-lines .line > span{
  transform:translateY(112%);
  transition:transform var(--slow) var(--ease);
}
.reveal-lines.is-in .line > span{ transform:translateY(0); }
.reveal-lines .line:nth-child(1) > span{ transition-delay:.02s; }
.reveal-lines .line:nth-child(2) > span{ transition-delay:.10s; }
.reveal-lines .line:nth-child(3) > span{ transition-delay:.18s; }
.reveal-lines .line:nth-child(4) > span{ transition-delay:.26s; }
.reveal-lines .line:nth-child(5) > span{ transition-delay:.34s; }

.js .reveal-up{
  opacity:0;
  transform:translateY(1.15rem);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-up.is-in{ opacity:1; transform:none; }
.reveal-up[data-delay="1"]{ transition-delay:.09s; }
.reveal-up[data-delay="2"]{ transition-delay:.18s; }
.reveal-up[data-delay="3"]{ transition-delay:.27s; }

/* Word-by-word scroll fade */
.statement .w{
  color:rgba(11,11,10,.17);
  transition:color .45s linear;
}
.statement .w.is-lit{ color:var(--ink); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero{
  min-height:100svh;
  padding:clamp(7rem,16vh,11rem) var(--gut) clamp(3.5rem,7vh,5.5rem);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:clamp(1.8rem,5vh,3.4rem);
  position:relative;
}
.hero .eyebrow{ color:var(--ink-60); }

/* Hero wireframe. Transparent canvas, hairline strokes, sits behind the type. */
.hero__orb{
  position:absolute;
  top:clamp(3.5rem, 10vh, 7rem);
  right:var(--gut);
  width:clamp(240px, 32vw, 520px);
  height:clamp(240px, 32vw, 520px);
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.8s var(--ease);
  /* Dissolves toward the bottom-left so the headline stays clean where they cross. */
  -webkit-mask-image:linear-gradient(to bottom left, #000 34%, rgba(0,0,0,.10) 88%);
          mask-image:linear-gradient(to bottom left, #000 34%, rgba(0,0,0,.10) 88%);
}
.hero__orb.is-in{ opacity:1; }

.hero .eyebrow,
.hero .display,
.hero__foot{ position:relative; z-index:1; }

@media (max-width:900px){
  .hero__orb{
    width:clamp(200px, 46vw, 330px);
    height:clamp(200px, 46vw, 330px);
    right:-1.25rem;
    top:clamp(4rem, 10vh, 6rem);
  }
}

.hero__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem clamp(2rem,6vw,5rem);
  border-top:1px solid var(--ink-12);
  padding-top:clamp(1.2rem,2.5vw,2rem);
}

.meta{
  display:flex;
  flex-direction:column;
  gap:.35em;
  font-size:.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-60);
  text-align:right;
}
@media (max-width:640px){
  .meta{ flex-direction:row; flex-wrap:wrap; gap:.4em 1.2em; text-align:left; }
}

.scroll-cue{
  position:absolute;
  left:50%;
  bottom:clamp(1.1rem,2.2vh,1.6rem);
  transform:translateX(-50%);
  color:var(--ink-30);
  animation:breathe 3.4s ease-in-out infinite;
}
.js .reveal-up.scroll-cue{ transform:translate(-50%, 1rem); }
.js .reveal-up.scroll-cue.is-in{ transform:translateX(-50%); }
@keyframes breathe{
  0%,100%{ opacity:.45; }
  50%{ opacity:1; }
}
@media (max-width:860px){ .scroll-cue{ display:none; } }

/* ── Marquee ─────────────────────────────────────────────────────────────── */

.marquee{
  border-top:1px solid var(--ink-12);
  border-bottom:1px solid var(--ink-12);
  overflow:hidden;
  padding:clamp(.85rem,1.6vw,1.4rem) 0;
  user-select:none;
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:slide 46s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__group{
  display:flex;
  align-items:center;
}
.marquee__group > span{
  font-size:clamp(1.5rem,4.4vw,3.6rem);
  font-weight:300;
  letter-spacing:-.035em;
  line-height:1;
  padding:0 clamp(.7rem,2vw,1.8rem);
  display:flex;
  align-items:center;
}
.marquee__group > span::after{
  content:"";
  display:inline-block;
  width:.34em;
  height:.34em;
  border-radius:50%;
  background:var(--ink);
  margin-left:clamp(.8rem,2.2vw,2rem);
}
.marquee__group > span:nth-child(even){ font-family:var(--serif); font-style:italic; }
@keyframes slide{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.sect{
  padding:clamp(5rem,14vh,11rem) var(--gut);
  border-bottom:1px solid var(--ink-12);
}
.sect__num{ color:var(--ink-60); }

.sect--statement{
  display:grid;
  gap:clamp(2rem,5vw,3.5rem);
}
.statement{
  font-size:clamp(1.6rem,3.6vw,3.05rem);
  font-weight:300;
  line-height:1.18;
  letter-spacing:-.035em;
  max-width:32ch;
  margin-left:auto;
  text-wrap:pretty;
}
@media (max-width:900px){ .statement{ margin-left:0; max-width:none; } }

.sect--split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
@media (max-width:900px){
  .sect--split{ grid-template-columns:1fr; }
}
.sect__aside{
  display:grid;
  gap:clamp(1.4rem,3vw,2.2rem);
  position:sticky;
  top:calc(clamp(1.1rem,2.2vw,1.7rem) + 4rem);
}
@media (max-width:900px){ .sect__aside{ position:static; } }

/* ── Accordion list ──────────────────────────────────────────────────────── */

.list{ border-top:1px solid var(--ink-12); }
.list__row{ border-bottom:1px solid var(--ink-12); }

.list__head{
  width:100%;
  display:flex;
  align-items:baseline;
  gap:clamp(.9rem,2.4vw,2rem);
  padding:clamp(1.1rem,2.2vw,1.6rem) 0;
  text-align:left;
}
.list__idx{
  font-size:.7rem;
  letter-spacing:.13em;
  color:var(--ink-30);
  transition:color .4s var(--ease);
  flex:none;
}
.list__title{
  font-size:clamp(1.5rem,3vw,2.4rem);
  font-weight:300;
  letter-spacing:-.038em;
  line-height:1.05;
  margin-right:auto;
  transition:transform .55s var(--ease);
}
.list__head:hover .list__title{ transform:translateX(.55rem); }
.list__head:hover .list__idx{ color:var(--ink); }

.list__sign{
  position:relative;
  width:11px; height:11px;
  flex:none;
  align-self:center;
}
.list__sign::before,
.list__sign::after{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:11px; height:1px;
  background:var(--ink);
  transition:transform .5s var(--ease);
}
.list__sign::after{ transform:rotate(90deg); }
.list__row.is-open .list__sign::after{ transform:rotate(0deg); }

/* Height is driven by JS (measured), so it animates reliably everywhere.
   Without JS the body simply stays open, so content is never hidden. */
.list__body{ overflow:hidden; }
.js .list__body{
  height:0;
  transition:height .6s var(--ease);
}
.list__body > p{
  color:var(--ink-60);
  max-width:46ch;
  padding-bottom:clamp(1.1rem,2.2vw,1.6rem);
}
.js .list__body > p{
  opacity:0;
  transition:opacity .5s var(--ease);
}
.list__row.is-open .list__body > p{ opacity:1; transition-delay:.12s; }

/* ── Tags ────────────────────────────────────────────────────────────────── */

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.tags li{
  border:1px solid var(--ink-12);
  border-radius:100px;
  padding:.55em 1.05em;
  font-size:.82rem;
  letter-spacing:-.005em;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), opacity .9s var(--ease), transform .9s var(--ease);
}
.tags li:hover{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

/* ── Pull quote ──────────────────────────────────────────────────────────── */

.sect--pull{ border-bottom:0; }
.pull{
  font-size:clamp(2rem,6.4vw,6.2rem);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.045em;
}
.pull em{ font-size:1.05em; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.foot{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(5rem,13vh,10rem) var(--gut) 0;
  display:grid;
  gap:clamp(1.6rem,4vw,2.6rem);
  overflow:hidden;
}
.foot .sect__num{ color:rgba(244,242,239,.55); }
.foot .dim{ color:rgba(244,242,239,.55); }

.foot__lead{
  font-size:clamp(1.9rem,5vw,4.4rem);
  font-weight:300;
  line-height:1;
  letter-spacing:-.042em;
}

.foot__mail{
  display:inline-block;
  justify-self:start;
  font-size:clamp(1.15rem,3.4vw,2.6rem);
  font-weight:300;
  letter-spacing:-.035em;
  border-bottom:1px solid rgba(244,242,239,.35);
  padding-bottom:.12em;
  margin-top:clamp(.5rem,2vw,1.5rem);
  transition:border-color .5s var(--ease);
  max-width:100%;
  word-break:break-word;
}
.foot__mail:hover{ border-color:var(--paper); }

.foot__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:2rem clamp(1.5rem,3vw,3rem);
  border-top:1px solid rgba(244,242,239,.18);
  padding-top:clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(2rem,6vw,4.5rem);
  font-size:.9rem;
  line-height:1.65;
}
@media (max-width:760px){
  .foot__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.foot__label{
  font-size:.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(244,242,239,.5);
  margin-bottom:.9em;
}
.foot__col a{
  position:relative;
  transition:opacity .4s ease;
}
.foot__col a:hover{ opacity:.6; }
.foot__col--end{ text-align:left; }
@media (min-width:761px){ .foot__col--end{ text-align:right; } }

.foot__wordmark{
  font-size:clamp(5rem,25vw,22rem);
  font-weight:300;
  letter-spacing:-.06em;
  line-height:1;
  margin:clamp(1.5rem,4vw,3rem) 0 -.19em;
  color:rgba(244,242,239,.10);
  user-select:none;
  pointer-events:none;
}

/* ── Interior page shell ─────────────────────────────────────────────────── */

.page-head{
  padding:clamp(8rem,20vh,14rem) var(--gut) clamp(3rem,8vh,6rem);
  display:grid;
  gap:clamp(1.6rem,4vw,2.6rem);
  border-bottom:1px solid var(--ink-12);
}

.prose{
  display:grid;
  gap:1.25em;
  max-width:62ch;
  font-size:clamp(1.02rem,.7vw + .84rem, 1.3rem);
  line-height:1.55;
  letter-spacing:-.014em;
}
.prose p.big{
  font-size:1.28em;
  line-height:1.35;
  letter-spacing:-.026em;
}

.back-link{
  border-bottom:1px solid var(--ink-30);
  padding-bottom:.1em;
  transition:border-color .4s var(--ease);
}
.back-link:hover{ border-color:var(--ink); }

/* Utility */
.mb-lg{ margin-bottom:clamp(2rem,5vw,3.5rem); }

/* Definition rows (impressum) */
.rows{ border-top:1px solid var(--ink-12); }
.rows__row{
  display:grid;
  grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);
  gap:1rem clamp(1.5rem,5vw,4rem);
  padding:clamp(1.2rem,2.4vw,1.9rem) 0;
  border-bottom:1px solid var(--ink-12);
  align-items:start;
}
@media (max-width:700px){
  .rows__row{ grid-template-columns:1fr; gap:.5rem; }
}
.rows__key{
  font-size:.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-60);
  padding-top:.35em;
}
.rows__val{
  font-size:clamp(1.05rem,1.5vw,1.4rem);
  line-height:1.45;
  letter-spacing:-.022em;
}
.rows__val a{
  border-bottom:1px solid var(--ink-30);
  padding-bottom:.05em;
  transition:border-color .4s var(--ease);
}
.rows__val a:hover{ border-color:var(--ink); }

/* Numbered principles */
.steps{
  display:grid;
  gap:clamp(1.5rem,4vw,2.6rem);
  counter-reset:step;
}
.steps > li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  padding-top:clamp(1.2rem,2.4vw,1.8rem);
  border-top:1px solid var(--ink-12);
}
@media (max-width:560px){
  .steps > li{ grid-template-columns:1fr; gap:.75rem; }
}
.steps__idx{
  font-size:.7rem;
  letter-spacing:.13em;
  color:var(--ink-30);
  padding-top:.5em;
}
.steps h3{
  font-size:clamp(1.35rem,2.6vw,2.05rem);
  font-weight:300;
  letter-spacing:-.035em;
  line-height:1.1;
  margin-bottom:.5em;
}
.steps p{
  color:var(--ink-60);
  max-width:52ch;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal-lines .line > span{ transform:none; }
  .reveal-up{ opacity:1; transform:none; }
  .reveal-up.scroll-cue{ transform:translateX(-50%); }
  .statement .w{ color:var(--ink); }
  .curtain{ display:none; }
  .marquee__track{ animation:none; }
}