/*
===============================================================================
NEUNTER — Main CSS
===============================================================================
Structure
01 Webfonts
02 Design tokens
03 Base and background
04 Layout shell
05 Header and footer
06 Home
07 Pages and room overview
08 Article typography
09 Decisions and archive
10 Buttons and utilities
11 Responsive
===============================================================================
*/

/* 01 Webfonts --------------------------------------------------------------- */
@font-face { font-family:'Neunter Display'; src:url('../fonts/Didot-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Neunter Display'; src:url('../fonts/Didot-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Neunter Display'; src:url('../fonts/Didot-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Neunter Serif'; src:url('../fonts/IowanOldStyle-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Neunter Serif'; src:url('../fonts/IowanOldStyle-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Neunter Sans'; src:url('../fonts/HelveticaNeue-Thin.woff2') format('woff2'); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Neunter Sans'; src:url('../fonts/HelveticaNeue-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Neunter Sans'; src:url('../fonts/HelveticaNeue-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Neunter Sans'; src:url('../fonts/HelveticaNeue-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Neunter Sans'; src:url('../fonts/HelveticaNeue-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Neunter Sans'; src:url('../fonts/HelveticaNeue-Medium.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Neunter Sans'; src:url('../fonts/HelveticaNeue-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* 02 Design tokens --------------------------------------------------------- */
:root {
  --bg:#f2ede7;
  --ink:#1b1916;
  --soft-ink:#312d28;
  --muted:#5b544b;
  /*  --muted:#777168; */
  --quiet:#9a9288;
  --line:rgba(123,112,100,.23);
  --hair:rgba(100,91,82,.32);
  --accent:#72563d;
  --max:1120px;
  --article:780px;
  --display:'Neunter Display', Didot, 'Bodoni 72', 'Bodoni 72 Display', 'Iowan Old Style', Georgia, serif;
  --serif:'Neunter Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans:'Neunter Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  --shell-pad-y:20px;
  --shell-pad-x:clamp(22px,4vw,58px);
}

/* 03 Base and background --------------------------------------------------- */
* { box-sizing:border-box; }
html {
  height:100%;
  overflow:hidden;
  background-color:var(--bg);
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}

body {
  height:100%;
  margin:0;
  overflow:hidden;
  background-color:transparent;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  letter-spacing:.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  overscroll-behavior:none;
  position:relative;
  isolation:isolate;
}

body::before {
  content:'';
  position:fixed;
  top:calc(-1 * env(safe-area-inset-top, 0px));
  right:calc(-1 * env(safe-area-inset-right, 0px));
  bottom:calc(-1 * env(safe-area-inset-bottom, 0px));
  left:calc(-1 * env(safe-area-inset-left, 0px));
  z-index:0;
  pointer-events:none;
  background-color:var(--bg);
  background-image:url('../img/bg.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:0;
  animation:backgroundFadeIn 1s ease forwards;
  transform:translateZ(0);
}

@supports (background-image: image-set(url('../img/bg.webp') type('image/webp'))) {
  body::before {
    background-image:image-set(
      url('../img/bg.webp') type('image/webp'),
      url('../img/bg.png') type('image/png')
    );
  }
}

@supports (background-image: -webkit-image-set(url('../img/bg.webp') type('image/webp'))) {
  body::before {
    background-image:-webkit-image-set(
      url('../img/bg.webp') type('image/webp'),
      url('../img/bg.png') type('image/png')
    );
  }
}

@keyframes backgroundFadeIn {
  to { opacity:1; }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation:none;
    opacity:1;
  }
}
a { color:inherit; text-decoration:none; transition:color .22s ease, opacity .22s ease; }
a:hover { color:var(--accent); }
button { font:inherit; color:inherit; }

/* 04 Layout shell ---------------------------------------------------------- */
.shell { position:relative; z-index:1; height:100svh; min-height:100svh; overflow:hidden; overscroll-behavior:none; display:flex; flex-direction:column; padding:var(--shell-pad-y) var(--shell-pad-x) calc(var(--shell-pad-y) + env(safe-area-inset-bottom, 0px)); }
@supports (height: 100dvh) { .shell { height:100dvh; min-height:100dvh; } }
.site-main { position:relative; z-index:1; flex:1; width:100%; max-width:var(--max); margin:0 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.site-main::-webkit-scrollbar { display:none; }

/* 05 Header and footer ----------------------------------------------------- */
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:10; flex-shrink:0; padding:0 0 20px; background:transparent; line-height:1; }
.brand { font-size:11px; font-weight:500; letter-spacing:.33em; text-transform:uppercase; color:#292622; }
.topnav { display:flex; gap:28px; align-items:center; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.28em; color:var(--muted); }
.site-footer { position:relative; z-index:2; display:flex; justify-content:space-between; gap:24px; color:var(--muted); font-size:9px; font-weight:600; letter-spacing:.26em; flex-shrink:0; padding-top:20px; }
.site-footer a { white-space:nowrap; }
.footer-left { text-transform:uppercase; }
.footer-right { display:flex; align-items:center; justify-content:flex-end; gap:24px; }
.footer-brand { text-transform:uppercase; }
.footer-imprint { text-transform:lowercase; letter-spacing:.14em; }

/* 06 Home ----------------------------------------------------------------- */
.home { min-height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:clamp(34px,6.3vh,86px); padding:clamp(34px,6.2vh,78px) 0 clamp(34px,6.2vh,78px); }
.home-word, .home-statement, .home-actions { text-align:center; width:100%; }
.wordmark { font-family:var(--display); font-weight:400; font-size:clamp(76px,13.2vw,188px); letter-spacing:.038em; text-align:center; line-height:.86; margin:0; color:#171612; }
.home-rule { width:1px; height:78px; background:var(--hair); margin:0 auto; }
.tagline { font-family:var(--serif); font-size:clamp(19px,2.25vw,31px); line-height:1.22; text-align:center; font-weight:400; margin:0; color:var(--soft-ink); letter-spacing:.004em; }
.home-actions { display:flex; justify-content:center; gap:clamp(86px,15vw,210px); align-items:flex-start; margin:0; }
.home-link { min-width:178px; border-top:.75px solid var(--hair); padding-top:18px; font-family:var(--serif); font-size:clamp(19px,1.8vw,25px); line-height:1.08; color:var(--soft-ink); }
.home-link.secondary { color:var(--muted); }
.arrow { display:block; margin-top:14px; font-family:var(--sans); font-size:15px; color:var(--muted); }

/* 07 Pages and room overview ---------------------------------------------- */
.page { padding:8vh 0 12vh; }
.page-title { font-family:var(--display); font-size:clamp(56px,8vw,118px); font-weight:400; line-height:.94; margin:0; color:#171612; letter-spacing:.006em; }
.page-rule { width:64px; height:.75px; background:var(--hair); margin:34px 0 52px; }
.intro-copy { max-width:720px; font-family:var(--serif); font-size:clamp(22px,2.6vw,34px); line-height:1.34; color:var(--soft-ink); margin-bottom:58px; }
.room-list { border-top:.75px solid var(--line); margin-top:34px; }
.room-row { display:grid; grid-template-columns:76px 1fr auto; gap:20px; align-items:baseline; padding:28px 0; border-bottom:.75px solid var(--line); }
.room-row .num { font-family:var(--serif); font-size:27px; color:var(--muted); font-weight:400; }
.room-row .t { display:block; font-family:var(--serif); font-weight:400; font-size:clamp(28px,4vw,48px); line-height:1.05; color:var(--soft-ink); }
.room-row .l { display:block; font-size:14px; color:var(--muted); margin-top:11px; max-width:720px; }
.room-row .state { font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.room-row.is-waiting { opacity:.52; cursor:default; }
.room-row.is-waiting:hover { color:inherit; }
.room-row.is-open .state { color:var(--accent); }
.room-row.is-complete .state { color:var(--soft-ink); }
.about-copy { max-width:780px; font-family:var(--serif); font-size:clamp(24px,3vw,38px); line-height:1.3; color:var(--soft-ink); }
.about-copy p { margin:0 0 1em; }
.about-link { display:inline-block; border-top:.75px solid var(--hair); padding-top:13px; font-family:var(--sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; margin-top:28px; }
.about-actions { display:flex; flex-direction:row; align-items:flex-start; flex-wrap:wrap; column-gap:clamp(48px,6vw,90px); row-gap:28px; margin-top:32px; }
.about-actions .about-link { margin-top:0; }

/* 08 Article typography ---------------------------------------------------- */
.article { max-width:var(--article); margin:0 auto; padding:7.8vh 0 14vh; }
.article-num { font-family:var(--display); font-size:clamp(76px,10.2vw,138px); font-weight:400; line-height:.82; color:#181713; margin:0 0 22px; letter-spacing:.012em; }
.article-mark { width:56px; height:.75px; background:var(--accent); opacity:.82; margin:0 0 48px; }
.article h1 { font-family:var(--serif); font-weight:400; font-size:clamp(38px,4.85vw,66px); line-height:1.08; margin:0 0 34px; color:#2c2924; letter-spacing:-.012em; }
.lead { font-family:var(--serif); font-size:clamp(21px,2.1vw,29px); line-height:1.42; margin:0 0 70px; color:#332f2a; letter-spacing:.002em; }
.prose { font-family:var(--serif); font-size:clamp(18px,1.56vw,22px); line-height:1.92; color:#28241f; letter-spacing:.002em; }
.prose p { margin:0 0 1.34em; }
.prose .inscription { font-family:var(--sans); font-size:.68em; line-height:1.7; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:2.1em 0 1.4em; }
.article-nav { display:flex; justify-content:space-between; border-top:.75px solid var(--line); margin-top:82px; padding-top:24px; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }
.article-lock { max-width:720px; margin:10vh auto; padding:42px 0; border-top:.75px solid var(--line); border-bottom:.75px solid var(--line); }
.lock-kicker { font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.lock-title { font-family:var(--serif); font-weight:400; font-size:clamp(32px,4vw,56px); line-height:1.08; margin:24px 0; }

/* 09 Decisions and archive ------------------------------------------------- */
.threshold { margin-top:92px; padding-top:0; }
.threshold-rule { width:64px; height:.75px; background:var(--hair); margin-bottom:42px; }
.threshold-text { font-family:var(--serif); font-size:clamp(22px,2.4vw,34px); line-height:1.34; color:var(--soft-ink); margin-bottom:44px; }
.threshold-text p { margin:0 0 .24em; }
.threshold h2 { font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.6vw,48px); line-height:1.12; margin:0 0 30px; color:#2c2924; }
.choice-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; align-items:stretch; }
.choice-card { appearance:none; border:.75px solid var(--line); background:rgba(245,242,235,.16); text-align:center; padding:26px 20px 28px; cursor:pointer; transition:border-color .22s ease, transform .22s ease, background .22s ease; min-height:194px; display:grid; grid-template-rows:5.6em auto; align-items:start; justify-items:center; }
.choice-card:hover { border-color:var(--accent); transform:translateY(-1px); background:rgba(245,242,235,.32); }
.choice-label { display:flex; align-items:flex-start; justify-content:center; width:100%; font-family:var(--serif); font-size:26px; line-height:1.08; color:var(--soft-ink); margin:0; letter-spacing:-.006em; }
.choice-text { display:block; width:100%; max-width:310px; font-size:13px; line-height:1.55; color:var(--muted); margin:0 auto; text-wrap:balance; }
.choice-grid.is-single-line .choice-card { grid-template-rows:3.75em auto; min-height:178px; }
.choice-grid.is-single-line .choice-label { white-space:nowrap; }
.next-gated[hidden] { display:inline-block !important; visibility:hidden; pointer-events:none; }
.decision-result { margin-top:32px; border-top:.75px solid var(--line); padding-top:28px; }
.decision-result .archive-line { font-family:var(--serif); font-size:clamp(24px,2.8vw,38px); line-height:1.2; margin:0 0 12px; color:var(--soft-ink); }
.decision-result .transition-line { margin:0 0 24px; color:var(--muted); }
.archive-widget { border-top:.75px solid var(--line); border-bottom:.75px solid var(--line); padding:22px 0; margin:36px 0; color:var(--muted); }
.archive-widget h2 { font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; margin:0 0 14px; color:var(--soft-ink); }
.archive-widget p { margin:.18em 0; }
.archive-return { font-family:var(--serif); font-size:clamp(22px,2.55vw,36px); line-height:1.34; color:var(--soft-ink); margin:32px 0 40px; }
.archive-return p, .fixed-return p, .last-transition p, .common-close p { margin:.24em 0; }
.fixed-return, .last-transition, .common-close { font-family:var(--serif); font-size:clamp(21px,2.15vw,30px); line-height:1.42; margin:40px 0; color:var(--soft-ink); }
.common-close { max-width:680px; text-wrap:balance; }
.force-note { font-size:14px; line-height:1.6; color:var(--muted); border-top:.75px solid var(--line); margin-top:34px; padding-top:18px; }


.archive-seal { margin: 26px 0 30px; }

.decision-result .archive-seal { margin-top: 38px; }
.archive-seal-button,
.archive-copy-button {
  display: inline-block;
  border: 0;
  border-top: .75px solid var(--hair);
  background: transparent;
  padding: 13px 0 0;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.archive-seal-button:hover,
.archive-copy-button:hover { color: var(--accent); }
.archive-seal-output { margin-top: 18px; max-width: 620px; }
.archive-seal-output p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.archive-seal-link {
  width: 100%;
  border: .75px solid var(--line);
  background: rgba(245,242,235,.18);
  color: var(--soft-ink);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .02em;
  padding: 13px 14px;
  outline: none;
}
.archive-copy-button { margin-top: 20px; }

/* 10 Buttons and utilities ------------------------------------------------- */
.text-button, .quiet-reset { display:inline-block; border:0; border-top:.75px solid var(--hair); background:transparent; padding:13px 0 0; font-family:var(--sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--soft-ink); cursor:pointer; }
.text-button::after { content:' →'; }
.quiet-reset { margin-top:40px; color:var(--muted); }
[hidden] { display:none !important; }

/* 11 Responsive ------------------------------------------------------------ */
@media (max-width: 760px) {
  :root { --shell-pad-y:20px; --shell-pad-x:20px; }
  .site-header { padding-bottom:16px; align-items:flex-start; }
  .brand { font-size:10px; letter-spacing:.29em; }
  .topnav { gap:16px; font-size:9px; letter-spacing:.2em; flex-wrap:wrap; justify-content:flex-end; }
  .home { min-height:100%; justify-content:center; gap:clamp(28px,5.8vh,58px); padding:clamp(30px,5.4vh,58px) 0 clamp(30px,5.4vh,58px); }
  .wordmark { font-size:clamp(58px,17vw,96px); letter-spacing:.035em; }
  .home-rule { height:52px; margin:0 auto; }
  .tagline { font-size:clamp(18px,5.2vw,23px); line-height:1.24; max-width:330px; margin:0 auto; }
  .home-actions { gap:44px; }
  .home-link { min-width:112px; font-size:19px; padding-top:14px; text-align:center; }
  .page { padding-top:5.8vh; }
  .page-rule { width:52px; margin:28px 0 40px; }
  .room-row { grid-template-columns:46px 1fr; }
  .room-row .state { grid-column:2; margin-top:10px; }
  .article { padding-top:5.6vh; max-width:100%; }
  .article-num { font-size:clamp(76px,27vw,112px); margin-bottom:18px; }
  .article-mark { width:48px; margin-bottom:38px; }
  .article h1 { font-size:clamp(33px,10vw,45px); line-height:1.1; margin-bottom:28px; }
  .lead { font-size:clamp(20px,6vw,25px); line-height:1.36; margin-bottom:58px; }
  .prose { font-size:19px; line-height:1.84; }
  .choice-grid { grid-template-columns:1fr; }
  .choice-card { min-height:auto; grid-template-rows:auto auto; gap:18px; padding:24px 22px 26px; }
  .choice-grid.is-single-line .choice-card { grid-template-rows:auto auto; min-height:auto; }
  .choice-grid.is-single-line .choice-label { white-space:normal; }
  .choice-label { font-size:clamp(27px,8.2vw,36px); }
  .about-actions { column-gap:34px; row-gap:24px; }
  .site-footer { font-size:8px; letter-spacing:.14em; gap:14px; }
  .footer-right { gap:16px; }
  .footer-imprint { letter-spacing:.1em; }
}
@media (max-width: 420px) {
  .home-actions { gap:30px; }
  .home-link { min-width:96px; }
  .wordmark { font-size:clamp(50px,16vw,72px); }
}

/* 12 Error Pages ----------------------------------------------------------- */

  .error-page .site-main {
    display:flex;
    align-items:center;
  }

  .error-page .panel {
    margin:0;
  }


  .panel {
    width:min(760px,100%);
    border-top:.75px solid var(--line);
    border-bottom:.75px solid var(--line);
    padding:clamp(42px,7vw,84px) 0;
  }

  .code {
    font-family:var(--display);
    font-size:clamp(78px,12vw,156px);
    line-height:.82;
    font-weight:400;
    letter-spacing:.012em;
    margin:0 0 30px;
    color:#181713;
  }

  .mark { width:56px; height:.75px; background:var(--accent); opacity:.82; margin:0 0 44px; }

  .h1-error {
    font-family:var(--serif);
    font-size:clamp(36px,5.2vw,70px);
    line-height:1.08;
    font-weight:400;
    letter-spacing:-.012em;
    color:var(--soft-ink);
    margin:0 0 28px;
  }

  .p-error {
    font-family:var(--serif);
    font-size:clamp(21px,2.1vw,29px);
    line-height:1.42;
    color:#332f2a;
    margin:0 0 54px;
    max-width:680px;
  }

  @media (max-width:760px) {
    .error-page .site-main {
      align-items:flex-start;
      padding-top:10vh;
    }

    .panel { padding:38px 0 46px; }
  }