/* Efter stängning: an editorial hierarchy, not a repeated card system. */
:root{--bg:#121912;--panel:#202b22;--paper:#eeeade;--ink:#f2f0e7;--muted:#c2c9bc;--lime:#d6f778;--line:#52604f}
::selection{background:#d6f778;color:#17221a}
.wrap{width:min(1280px,calc(100% - 96px))}
header{background:#121912f5}
header .wrap{min-height:76px}
.logo{font-size:1.45rem;letter-spacing:-.065em}
nav a{padding:12px 0;border-bottom:1px solid transparent}
nav a:hover{border-color:var(--lime)}
.eyebrow{font-size:.73rem;letter-spacing:.13em;font-weight:500}
.button{padding:15px 20px;transition:background .2s,color .2s}
.button:hover{background:#e6ffad;color:var(--dark)}
.hero{display:block;min-height:0;padding:30px 0 76px}
.hero-kicker{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:25px}
.hero .eyebrow{margin:0}
.hero-audience{font-size:.8rem;color:var(--muted)}
.hero h1{font-size:clamp(3.8rem,7.6vw,7.25rem);line-height:1.14;letter-spacing:-.065em;margin:0 0 38px;font-weight:400;text-wrap:initial}
.hero h1 span{display:block}
.hero h1 em{display:block;text-align:right;font:italic 1.06em/1.12 Georgia,serif;letter-spacing:-.055em;padding-bottom:.07em;color:var(--lime)}
.hero-lower{display:grid;grid-template-columns:5fr 7fr;gap:8%;align-items:start}
.hero-intro{padding-top:7px}
.hero .lead{font-size:1.08rem;max-width:36ch;line-height:1.55;color:var(--muted);margin:0 0 27px}
.hero .lead strong{display:block;color:var(--ink);font-weight:400;margin-bottom:12px;font-size:1.32rem;line-height:1.4;letter-spacing:-.025em}
.hero .actions{display:flex;align-items:flex-start;flex-direction:column;gap:13px}
.hero .actions>a:not(.button){font-size:.88rem;min-height:44px;align-content:center}
.hero .byline{font-size:.78rem;margin-top:15px}
.hero figure img{width:100%;height:310px;aspect-ratio:2/1;object-fit:cover;object-position:50% 48%;filter:saturate(.65)}
.hero figcaption{font-size:.76rem;border-top:0;padding:12px 0 0;max-width:44ch;line-height:1.5}
.section{padding:96px 0}
.section-head{grid-template-columns:7fr 4fr;gap:10%;margin-bottom:42px}
.section-head h2{font-size:clamp(2.6rem,4.3vw,4rem);line-height:1.16;letter-spacing:-.05em}
.section-head .eyebrow{margin-bottom:18px}
.section-head>p{font-size:1rem;line-height:1.6}

/* One photographic field, with readable notes rather than an empty side panel. */
.scene-section{background:var(--bg);border-top:1px solid var(--line);padding-top:66px}
.scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;border:0;min-height:610px}
.scene-photo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.scene-photo picture,.scene-photo img{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:50% 48%}
.scene-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#10171040,transparent 40%,#101710a6)}
.scene-caption{left:26px;right:auto;bottom:20px;max-width:48%;padding:8px 12px;background:#121912;font-size:.7rem;z-index:1}
.scene-body{display:grid;grid-template-rows:auto 1fr auto;gap:22px;min-height:610px;padding:26px;background:none}
.switch{display:flex;justify-self:start;margin:0;gap:0;background:#121912}
.switch button{padding:13px 24px;border:1px solid #8b9785;font-size:.91rem;min-height:50px}
.switch button+button{border-left:0}
#scene-content{align-self:center;justify-self:end;width:min(480px,52%);min-height:0}
#scene-content:not(:has(.reading-questions)){background:var(--paper);color:var(--dark);padding:28px 30px;border-top:4px solid var(--lime)}
.visible-count{font:normal clamp(5rem,8vw,7.2rem)/1 Georgia,serif;margin:0;letter-spacing:-.065em}
.stats{color:#52604e;margin:18px 0;gap:40px}
.stats strong{color:var(--dark)}
#scene-content>.note{color:#52604e;font-size:.9rem;line-height:1.5;margin-top:14px}
.reading-questions{min-height:0;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.reading-questions li{background:var(--paper);color:var(--dark);font-size:1.1rem;line-height:1.4;padding:16px 20px;border:0;border-left:3px solid var(--lime);box-shadow:0 3px 16px #0002;max-width:100%;display:flex;gap:12px}
.reading-questions li::before{color:#465e26;margin:0;flex-shrink:0}
.reading-questions li:nth-child(even){margin-left:32px}
.scene-controls{justify-self:end;width:min(480px,52%);margin:0;min-height:44px;align-items:center;gap:18px}
.scene-controls[hidden]{display:flex;visibility:hidden}
.scene-read{background:#121912;padding:8px 13px;font-size:.85rem;color:var(--ink)}
.scene-controls .pause{background:#121912;padding:8px 14px;border-color:#8b9785}
.scene-section>.wrap>.note{max-width:80ch;font-size:.83rem;margin-top:18px}

/* The principles are the spine of the manifesto: an editorial index. */
.paper{--muted:#4e5d4b;--line:#a5b09d}
.principles-index{display:grid;grid-template-columns:4fr 7fr;gap:0 10%;align-items:start}
#principer .section-head{display:block;position:sticky;top:110px;grid-row:1;margin:0}
#principer .section-head h2{font-family:Georgia,serif;font-size:clamp(2.3rem,3.5vw,3.5rem);font-weight:400;letter-spacing:-.045em;line-height:1.2}
#principer .section-head>p{margin-top:24px;max-width:30ch}
.principles{display:block}
.principle{width:100%;grid-template-columns:44px 1fr 26px;gap:18px;padding:24px 0;min-height:88px;transition:padding .2s,background .2s}
.principle small{font:italic 1.6rem/1 Georgia,serif;color:#63705c}
.principle strong{font-size:clamp(1.12rem,1.65vw,1.4rem);line-height:1.35;letter-spacing:-.02em}
.principle>span{font-size:1.5rem}
.principle:hover{background:#e0e4d1;padding-left:12px;padding-right:12px}
.bridge{grid-column:1/-1;margin-top:42px;padding-top:23px;font-size:.87rem}
.relation-feature{grid-column:1/-1;display:grid;grid-template-columns:4fr 7fr;gap:10%;border-top:1px solid var(--line);margin-top:64px;padding-top:34px}
.relation-feature h3{font:400 clamp(1.8rem,2.6vw,2.6rem)/1.25 Georgia,serif;letter-spacing:-.035em;margin-top:16px;max-width:19ch}
.relation-feature p:not(.eyebrow){font-size:1rem;line-height:1.65;max-width:60ch}
.relation-feature p+p{margin-top:16px}
.relation-feature a{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;font-weight:600;margin-top:16px}

/* A deliberate pause in the essay: two open paths into the reflection. */
#test{background:#26382d}
#test .section-head h2{font-family:Georgia,serif;font-style:italic;font-size:clamp(3rem,5vw,4.8rem);font-weight:400;letter-spacing:-.05em}
.quiz-stage{max-width:920px}
.quiz-stage:has(.result-list){max-width:740px}
.result-row p{max-width:none}
.quiz-pick{gap:0;border-top:1px solid #7c8b75;border-bottom:1px solid #7c8b75}
.track{background:none;border:0;padding:34px 35px 32px 0;gap:18px}
.track+ .track{border-left:1px solid #7c8b75;padding-left:35px;padding-right:0}
.track:hover{background:#304637}
.track strong{font-size:2rem;letter-spacing:-.04em}
.track p{font-size:1rem;line-height:1.5;max-width:34ch;color:#d2d9ca}
.track .eyebrow{color:var(--lime)}
.track .start{padding-top:10px;font-size:.92rem}
.option{background:#1b2a21;border-color:#839179}
.option:hover{border-color:var(--lime)}
.option[aria-pressed=true]{background:var(--lime);color:var(--dark)}

/* Forms are different offers, not a compulsory staircase. */
#former{background:#dce2d1}
.forms{display:block;border-bottom:1px solid var(--line)}
.form{width:100%;padding:28px 0;grid-template-columns:60px 1fr 30px;gap:24px;align-items:start;transition:background .2s}
.form:hover{background:#ced7c1}
.form>small:first-child{font:italic 2rem/1.2 Georgia,serif;color:#536549}
.form>div{display:grid;grid-template-columns:1fr 1fr;gap:3px 40px;align-items:start}
.form small{grid-column:1;font-size:.76rem}
.form strong{grid-column:1;font-size:clamp(1.3rem,2.1vw,1.8rem);letter-spacing:-.035em;margin:3px 0;overflow-wrap:normal;hyphens:none}
.form p{grid-column:2;grid-row:1/3;font-size:1rem;padding-top:5px}
.forms-explainer{border:0;max-width:70ch;font-size:.93rem;padding-top:20px;margin-top:0}
.author{padding:80px 0;grid-template-columns:1fr 1fr;gap:12%;align-items:start}
.author h2{font:400 clamp(2.2rem,3.4vw,3.4rem)/1.22 Georgia,serif;letter-spacing:-.04em}
.closing{padding:85px 0 100px;grid-template-columns:7fr 4fr;gap:10%}
.closing .statement{font-size:clamp(1.65rem,2.7vw,2.7rem);line-height:1.4;letter-spacing:-.04em}
.closing .statement p:not(.eyebrow){padding:10px 0;border-bottom:1px solid var(--line);margin:0}
.closing .statement em{font-family:Georgia,serif;font-style:italic}
.manifest-box{background:var(--lime);color:var(--dark);padding:28px;border:0;align-self:start}
.manifest-box .eyebrow,.manifest-box p,.manifest-box .note{color:#34472b}
.manifest-box h3{font:400 2.2rem/1.16 Georgia,serif;letter-spacing:-.04em}
.manifest-box .button{background:#17221a;color:var(--ink);width:100%;gap:12px;font-size:.95rem}
.manifest-box .button:hover{background:#2d4030}
.manifest-box .note{font-size:.75rem;margin:14px 0 0}
dialog{border-radius:0;box-shadow:0 20px 70px #0006}
.dialog-content h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.035em;line-height:1.25}
.dialog-pages:empty{display:none}

@media(max-width:950px){
  .wrap{width:calc(100% - 56px)}
  .hero h1{font-size:8vw}
  .hero-lower{grid-template-columns:1fr 1fr;gap:6%}
  .hero figure img{height:320px;aspect-ratio:auto}
  .section-head{gap:6%}
  .scene{min-height:570px}
  .scene-body{min-height:570px;padding:22px}
  #scene-content,.scene-controls{width:54%}
  .scene-caption{max-width:39%;left:22px;font-size:.67rem}
  .principles-index{grid-template-columns:4fr 6fr;gap:0 6%}
  .principle{grid-template-columns:30px 1fr 20px;gap:12px}
  .form{grid-template-columns:35px 1fr 20px;gap:18px}
  .form>div{gap:3px 25px}
}

@media(max-width:600px){
  .wrap{width:calc(100% - 40px)}
  header .wrap{min-height:64px}
  .hero{padding:22px 0 42px;display:block}
  .hero-kicker{margin-bottom:22px}
  .hero-audience{display:none}
  .hero h1{font-size:clamp(2.05rem,8.9vw,3.3rem);line-height:1.18;letter-spacing:-.055em;margin-bottom:26px}
  .hero h1 em{text-align:left;font-size:1.19em;line-height:1.2;margin-top:3px}
  .hero-lower{display:flex;flex-direction:column;gap:25px}
  .hero-intro{display:contents}
  .hero .lead{font-size:1rem;line-height:1.5;margin:0;order:1}
  .hero .lead strong{font-size:1.18rem;margin-bottom:9px}
  .hero figure{order:2;width:100%}
  .hero figure img{height:190px;aspect-ratio:16/9;object-position:50% 46%}
  .hero figcaption{display:none}
  .hero .actions{order:3;gap:5px;width:100%;margin-top:-5px}
  .hero .actions .button{width:100%;min-height:50px;font-size:.95rem;padding:12px 16px}
  .hero .byline{order:4;margin:0;font-size:.75rem}
  .section{padding:52px 0}
  .section-head{margin-bottom:26px}
  .section-head h2{font-size:2.2rem}
  #blick{height:auto;min-height:100svh;padding:0;border-top:1px solid var(--line)}
  #blick>.wrap{min-height:100svh;height:auto;display:flex;flex-direction:column}
  #blick .section-head{padding:18px 70px 16px 20px;flex:none}
  #blick .section-head h2{font-size:1.65rem;line-height:1.2}
  #blick .section-head .eyebrow{font-size:.68rem;margin-bottom:6px}
  #blick .scene{flex:1;min-height:calc(100svh - 114px);display:grid}
  #blick .scene-photo{z-index:-1}
  #blick .scene-photo::after{background:linear-gradient(180deg,#12191230,transparent 45%,#121912cc)}
  #blick .scene-body{height:auto;min-height:calc(100svh - 114px);padding:12px 20px 16px;gap:14px;grid-template-rows:auto minmax(115px,1fr) auto;background:none}
  #blick .switch{display:grid;grid-template-columns:1fr 1fr;justify-self:stretch;gap:0;background:#121912}
  #blick .switch button{padding:10px 8px;min-height:48px;font-size:.86rem}
  #blick .scene-caption{left:20px;top:70px;bottom:auto;padding:4px 8px;max-width:calc(100% - 40px);font-size:.64rem;line-height:1.4}
  #blick #scene-content{width:100%;min-height:0;align-self:end;justify-self:stretch;border:0;padding:0;background:none}
  #blick #scene-content:not(:has(.reading-questions)){padding:20px;background:var(--paper);border-left:3px solid var(--lime)}
  #blick .reading-questions{gap:7px;min-height:0}
  #blick .reading-questions li{padding:10px 12px;font-size:1rem;line-height:1.35;border:0;border-left:3px solid var(--lime);gap:8px}
  #blick .reading-questions li::before{margin:0}
  #blick .reading-questions li:nth-child(even){margin-left:18px}
  #blick .reading-questions li:last-child{border-left:3px solid var(--lime)}
  #blick .visible-count{font:normal 4.4rem/1 Georgia,serif;letter-spacing:-.06em}
  #blick .stats{margin:12px 0;gap:36px}
  #blick #scene-content>.note{color:#52604e;margin-top:10px;font-size:.88rem}
  #blick .scene-controls{width:100%;min-height:44px;gap:12px}
  #blick .scene-read{font-size:.81rem;padding:8px 10px;flex:none}
  #blick .pause{min-width:84px;font-size:.81rem;padding:8px 10px;background:#121912}
  #principer{padding:46px 0 40px}
  .principles-index{display:block}
  #principer .section-head{position:static;margin-bottom:28px}
  #principer .section-head h2{font-size:2.5rem;line-height:1.18;max-width:16ch}
  #principer .section-head>p{max-width:36ch;margin-top:18px;font-size:1rem}
  .principle{grid-template-columns:30px 1fr 20px;padding:20px 0;min-height:78px;gap:14px}
  .principle small{font-size:1.35rem}
  .principle strong{font-size:1.12rem;line-height:1.4}
  .bridge{margin-top:22px;gap:12px;font-size:.84rem}
  .relation-feature{display:block;margin-top:42px;padding-top:26px}
  .relation-feature h3{font-size:2rem;margin-bottom:24px}
  #test{padding:42px 0;min-height:100svh}
  #test .section-head h2{font-size:2.7rem}
  .quiz-pick{display:block}
  .track,.track+ .track{display:flex;width:100%;border:0;padding:23px 0;gap:12px}
  .track+ .track{border-top:1px solid #7c8b75}
  .track strong{font-size:1.6rem}
  .track p{font-size:1rem;max-width:34ch}
  .track .start{font-size:.88rem;padding:0}
  #former{padding:46px 0 40px}
  #former .section-head h2{font-size:2.2rem;line-height:1.2}
  .form{padding:22px 0;grid-template-columns:28px 1fr 18px;gap:12px}
  .form>small:first-child{font-size:1.45rem}
  .form>div{display:block}
  .form strong{font-size:1.27rem;line-height:1.3;margin:7px 0}
  .form p{font-size:.95rem;line-height:1.5;padding:0}
  .author{padding:48px 0;grid-template-columns:1fr;gap:24px}
  .author h2{font-size:2.2rem;line-height:1.25}
  .closing{padding:42px 0 52px;grid-template-columns:1fr;gap:35px}
  .closing .statement{font-size:1.8rem;line-height:1.4}
  .manifest-box{padding:24px}
  .manifest-box h3{font-size:2rem}
  .manifest-box .note{margin:14px 0 0}
  dialog{width:calc(100% - 24px)}
}
@media(max-width:600px) and (max-height:600px){
  #blick .section-head{padding-top:10px;padding-bottom:10px}
  #blick .section-head h2{font-size:1.3rem}
  #blick .scene,#blick .scene-body{min-height:calc(100svh - 90px)}
  #blick .scene-body{gap:10px;padding-top:8px;padding-bottom:10px;grid-template-rows:auto minmax(70px,1fr) auto}
  #blick .scene-caption{top:64px}
  #blick #scene-content:not(:has(.reading-questions)){padding:12px 15px}
  #blick .visible-count{font-size:3rem}
  #blick .reading-questions li{display:none}
  #blick .reading-questions li:last-child{display:flex;margin-left:0;font-size:1.05rem;padding:12px}
}
@media(prefers-reduced-motion:reduce){.button,.principle,.form{transition:none}}

/* An opening spread: the room is visible; belonging is not. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:6%;row-gap:0;padding-bottom:58px}
.hero-kicker{grid-column:1/-1;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:30px}
.hero h1{grid-column:1;grid-row:2;align-self:end;font-size:clamp(2.8rem,4.9vw,5.3rem);margin:0 0 26px;letter-spacing:-.055em}
.hero h1 em{text-align:left}
.hero-lower{display:contents}
.hero-intro{grid-column:1;grid-row:3;padding:0}
.hero .room-plate{grid-column:2;grid-row:2/4;align-self:center;margin:0;width:100%;min-width:0}
.hero .room-plate img{display:block;width:100%;height:auto;aspect-ratio:680/436;object-fit:contain;filter:none}
.hero .room-plate figcaption{display:grid;grid-template-columns:auto 1fr;gap:14px;max-width:none;font-size:.88rem;line-height:1.45;align-items:baseline}
.room-plate figcaption span{font:italic 1.07rem/1.3 Georgia,serif;color:var(--lime)}

/* Comparable offers, not scores: common headings and no age ladder. */
#former{background:#e4e7da;color:#17271e}
#former .section-head{align-items:end}
#former .section-head em{font-family:Georgia,serif;font-weight:400;color:#33523b}
.profile-sheet{width:100%;border-collapse:collapse;table-layout:fixed;color:#17271e;font-size:1rem;line-height:1.5}
.profile-sheet caption{text-align:left;color:#f7f4e8;background:#24392d;padding:14px 18px;font:400 1.45rem/1.3 Georgia,serif}
.profile-sheet caption span{display:block;margin-top:3px;color:#e1e7d9;font:400 .88rem/1.5 Arial,sans-serif}
.profile-sheet thead th{color:#304933;background:#d1d9c5;font-size:.85rem;padding:11px 18px;text-align:left}
.profile-sheet thead th:first-child{width:34%}
.profile-sheet tbody th,.profile-sheet tbody td{border-bottom:1px solid #a1ae94;text-align:left;vertical-align:middle}
.profile-sheet tbody th{font-weight:400}
.profile-sheet td{padding:16px 18px}
.profile-sheet td:last-child{background:#dce2d1}
.profile-open{border:0;border-radius:0;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:18px;background:transparent;color:inherit;text-align:left;font:inherit;text-decoration:none;cursor:pointer}
.profile-open:hover,.profile-open:focus-visible{background:#cbdbb8}
.profile-open:focus-visible{outline:3px solid #274a30;outline-offset:-3px}
.profile-age{grid-column:1;color:#44593e;font-size:.84rem}
.profile-name{grid-column:1;font:400 clamp(1.2rem,1.7vw,1.65rem)/1.25 Georgia,serif;overflow-wrap:break-word;hyphens:auto}
.profile-sign{grid-column:2;grid-row:1/3;color:#455f3d;font:400 1.4rem/1 Arial,sans-serif}
.forms-source{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-weight:600;text-underline-offset:.22em}
.profile-pair{margin:16px 0;display:grid;gap:10px}
.profile-pair dt,.profile-case h3{font:600 .87rem/1.5 Arial,sans-serif;color:#43523f}
.profile-pair dd{margin:0;font-size:1rem;line-height:1.5}
.profile-case{border-left:3px solid #617345;padding-left:13px;margin:18px 0 8px}
.profile-case p{margin-top:4px}
@media(max-width:760px){
  .hero{display:flex;flex-direction:column;gap:0}
  .hero-kicker{margin-bottom:20px}
  .hero h1{align-self:stretch;font-size:clamp(2.15rem,8.2vw,3.75rem);margin-bottom:18px}
  .hero-lower{display:flex;flex-direction:column;gap:18px}
  .hero-intro{display:contents}
  .hero .lead{order:0;margin:0;max-width:40ch}
  .hero .actions{order:1;margin:0}
  .hero .room-plate{order:2}
  .hero .room-plate figcaption{display:block;font-size:.86rem;padding-top:8px}
  .room-plate figcaption span{display:inline;margin-right:.55em}
  .hero .byline{order:3;margin:0}
  .profile-sheet th:nth-child(n+2),.profile-sheet td{display:none}
  .profile-sheet thead th:first-child{width:auto}
  .profile-sheet thead th{padding:8px 14px}
  .profile-open{padding:13px 14px;min-height:62px}
  .profile-name{font-size:1.25rem}
  .profile-sheet caption{padding:12px 14px}
  .profile-sheet caption span{font-size:.9rem}
}