/* A.W.T.G.G — editorial system. Native scrolling, restrained chrome, kinetic type. */
:root {
  --paper:#efefe7;
  --ink:#20211d;
  --red:#e53b27;
  --line:#cbccc1;
  --muted:#696b60;
  --pad:4.5vw;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:Inter,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --grain-bg:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")
}
.film-grain {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:9999;
  opacity:.22;
  background-image:var(--grain-bg);
  background-repeat:repeat;
  background-size:160px 160px;
  transform:translateZ(0)
}
.nowrap {
  white-space:nowrap;
  display:inline-block
}
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:95px;
  background:var(--paper)
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased
}
button,a {
  touch-action:manipulation
}
button {
  font:inherit;
  cursor:pointer;
  color:inherit
}
a {
  color:inherit
}
button:focus-visible,a:focus-visible {
  outline:3px solid var(--red);
  outline-offset:6px
}
::selection {
  color:var(--paper);
  background:var(--red)
}
h1,h2,h3,p {
  margin:0
}
h1,h2 {
  font-weight:800;
  letter-spacing:-.065em;
  line-height:.93
}
em {
  font-style:normal;
  color:var(--red)
}
.red {
  color:var(--red)
}
[hidden] {
  display:none!important
}
.skip {
  position:fixed;
  left:20px;
  top:-100px;
  z-index:200;
  background:var(--paper);
  padding:20px
}
.skip:focus {
  top:20px
}
header {
  position:absolute;
  top:0;
  width:100%;
  height:85px;
  padding:0 var(--pad);
  display:flex;
  gap:30px;
  align-items:center;
  z-index:20;
  border-bottom:1px solid var(--line)
}
.wordmark {
  text-decoration:none;
  font-size:19px;
  letter-spacing:-1px;
  font-weight:800
}
.header-note {
  margin-left:auto;
  font-size:10px;
  letter-spacing:1px
}
.header-slash {
  padding:0 15px;
  color:#919288
}
#index-toggle,#sound {
  border:0;
  background:none;
  font-size:11px;
  letter-spacing:1.2px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:8px 0;
  cursor:pointer;
  transition:color .2s
}
#index-toggle:hover,#sound:hover {
  color:var(--red)
}
.index-label {
  font-size:11px;
  letter-spacing:1.2px;
  font-weight:600
}
.index-icon {
  font-size:14px;
  line-height:1;
  display:inline-block;
  transition:transform .25s var(--ease)
}
#index-toggle:hover .index-icon {
  transform:rotate(90deg)
}
.sound-label {
  font-size:11px;
  letter-spacing:1.2px;
  font-weight:600
}
.sound-bars {
  height:12px;
  display:flex;
  align-items:center;
  gap:3px
}
.sound-bars span {
  height:4px;
  width:2px;
  background:var(--red)
}
.sound-bars span:nth-child(2) {
  height:12px
}
.sound-bars span:nth-child(3) {
  height:8px
}
#sound[aria-pressed=true] .sound-bars span {
  animation:wave .7s ease-in-out infinite alternate
}
#sound[aria-pressed=true] .sound-bars span:nth-child(even) {
  animation-delay:-.4s
}
@keyframes wave {
  to {
    transform:scaleY(.3)
  }
}
section {
  padding:110px var(--pad);
  position:relative
}
.light {
  background:var(--paper)
}
.dark {
  background:var(--ink);
  color:var(--paper)
}
.eyebrow,.meta-tag,.hero-caption,.edition,.scroll-text,.margin-note,.beliefs-hint,.scenario-index,.scenario-status,.small-note,.cost-tag,.rewrite-tracker,.promise-tag,.colophon {
  font-size:11px;
  font-weight:500;
  letter-spacing:1.2px;
  line-height:1.5;
  text-transform:uppercase
}
.eyebrow {
  display:flex;
  justify-content:space-between;
  gap:25px;
  margin-bottom:70px
}
.hero {
  min-height:100svh;
  padding-top:124px;
  padding-bottom:64px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  isolation:isolate;
  overflow:hidden
}
.hero-grid {
  position:absolute;
  inset:85px var(--pad) 65px;
  z-index:-1;
  background:linear-gradient(90deg,transparent calc(25% - .5px),var(--line) 25%,transparent calc(25% + .5px),transparent calc(75% - .5px),var(--line) 75%,transparent calc(75% + .5px));
  opacity:.45;
  pointer-events:none
}
.hero-top {
  display:flex;
  justify-content:space-between
}
.hero-top>span:last-child {
  text-align:right
}
.hero-center {
  padding:45px 0 10px;
  position:relative
}
.hero h1 {
  display:inline-flex;
  align-items:center;
  gap:clamp(10px,1.5vw,28px);
  font-family:var(--display);
  font-size:clamp(100px,19.4vw,340px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1;
  white-space:nowrap
}
.hero-acronym {
  display:block;
  animation:enter-type 1.2s var(--ease) both
}
.interactive-mark {
  display:block;
  font-size:1.37em;
  line-height:.65;
  transform:rotate(9deg);
  transform-origin:50% 80%;
  animation:enter-mark 1.5s var(--ease) both;
  will-change:transform
}
.hero-caption {
  display:flex;
  justify-content:space-between;
  padding:20px 0;
  border-top:1px solid var(--ink);
  color:var(--muted)
}
.hero-bottom {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:end;
  gap:20px;
  padding-top:60px
}
.hero-statement p {
  font-size:clamp(24px,2.5vw,40px);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:1.15
}
.scroll-link {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  text-decoration:none
}
.scroll-arrow {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid var(--ink);
  border-radius:50%;
  font-size:24px;
  transition:background .25s,color .25s
}
.scroll-link:hover .scroll-arrow {
  background:var(--ink);
  color:var(--paper)
}
.edition {
  text-align:right;
  font-size:10px;
  display:flex;
  flex-direction:column;
  gap:5px;
  color:var(--muted)
}
.hero-rule {
  display:none
}
@keyframes enter-type {
  from {
    opacity:0;
    filter:blur(18px);
    transform:translateY(32px)
  }
  to {
    opacity:1;
    filter:blur(0);
    transform:translateY(0)
  }
}
@keyframes enter-mark {
  from {
    opacity:0;
    transform:rotate(-20deg) translateY(50px)
  }
  to {
    opacity:1;
    transform:rotate(9deg) translateY(0)
  }
}
.question {
  padding-top:110px;
  padding-bottom:50px;
  overflow:hidden;
  border-top:1px solid var(--line)
}
.question .eyebrow {
  position:relative;
  z-index:2
}
.section-number {
  position:absolute;
  right:1vw;
  top:70px;
  font:700 53vw/.85 var(--display);
  letter-spacing:-.07em;
  color:#e0e1d7;
  pointer-events:none
}
.question-headline {
  position:relative;
  z-index:1
}
.question h2 {
  font-size:clamp(70px,11vw,175px);
  max-width:1000px
}
.answer {
  font-size:clamp(65px,9vw,144px);
  margin:100px 0 0 48%;
  font-weight:600;
  line-height:.95;
  letter-spacing:-.065em
}
.answer-prefix {
  display:block;
  font-size:10px;
  letter-spacing:1.3px;
  margin-bottom:25px;
  font-weight:500
}
.margin-note {
  display:block;
  margin-top:40px;
  color:var(--muted)
}
.beliefs {
  padding-top:40px;
  padding-bottom:130px
}
.beliefs-header {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:30px
}
.beliefs-header .eyebrow {
  margin-bottom:35px
}
.beliefs-hint {
  color:var(--muted)
}
.belief {
  border-top:1px solid var(--ink)
}
.belief:last-child {
  border-bottom:1px solid var(--ink)
}
.belief-trigger {
  width:100%;
  display:grid;
  grid-template-columns:1fr 6fr 1fr;
  align-items:start;
  padding:40px 0;
  border:0;
  background:none;
  text-align:left
}
.belief-num {
  font-size:12px;
  padding-top:8px
}
.belief h2 {
  font-size:clamp(38px,5.8vw,92px);
  font-weight:600;
  letter-spacing:-.05em;
  transition:transform .5s var(--ease)
}
.cross {
  font-size:36px;
  text-align:right;
  line-height:1;
  font-weight:300;
  transition:transform .4s
}
.belief-trigger:hover h2 {
  transform:translateX(12px)
}
.belief-trigger[aria-expanded=true] .cross {
  transform:rotate(45deg);
  color:var(--red)
}
.belief-detail {
  padding:5px 12.5% 45px
}
.belief-detail p {
  max-width:650px;
  font-size:22px;
  line-height:1.5;
  letter-spacing:-.025em;
  border-left:2px solid var(--red);
  padding-left:25px
}
.cost {
  padding:0;
  position:relative
}
.cost-scene {
  padding:100px var(--pad);
  min-height:100svh;
  position:relative;
  overflow:hidden
}
.cost-scene>.eyebrow {
  position:relative;
  z-index:2
}
.until-mark {
  position:absolute;
  top:18%;
  left:var(--pad);
  font:700 28vw/1 var(--display);
  color:#34352f;
  letter-spacing:-.04em;
  pointer-events:none
}
.cost-stack {
  position:relative;
  z-index:1
}
.cost-line {
  font-size:clamp(45px,7.5vw,118px);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.06em;
  margin:150px 0
}
.cost-line.offset {
  margin-left:12%
}
.cost-bottom {
  padding:60px var(--pad) 100px;
  position:relative;
  background:var(--ink)
}
.cost-bottom h2 {
  font-family:var(--display);
  font-size:19vw;
  letter-spacing:-.025em;
  line-height:1;
  margin:40px 0
}
.cost-tag {
  display:block;
  color:#b4b5a9
}
.cost-tag.right {
  text-align:right
}
.motion .cost {
  height:420svh
}
.motion .cost-scene {
  height:100svh;
  position:sticky;
  top:0;
  padding-top:65px
}
.motion .cost-stack {
  height:65svh
}
.motion .cost-line {
  position:absolute;
  top:50%;
  left:0;
  right:0;
  display:block;
  margin:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(55px);
  font-size:clamp(45px,7.5vw,118px);
  filter:none!important;
  transition:none!important
}
.motion .cost-line.offset {
  padding-left:12%
}
.motion .cost-line.is-current {
  visibility:visible
}
.motion .cost-bottom {
  position:absolute;
  bottom:0;
  width:100%;
  height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.rewrite {
  padding-top:130px
}
.rewrite-title {
  font-size:clamp(68px,9.7vw,155px);
  font-weight:600;
  line-height:.97
}
.outline {
  -webkit-text-stroke:1px var(--ink);
  color:transparent
}
.rewrite-intro {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:90px 0 65px;
  font-size:clamp(24px,3vw,45px);
  line-height:1.3;
  letter-spacing:-.04em
}
.rewrite-intro p:last-child {
  font-size:16px;
  line-height:1.6;
  letter-spacing:0
}
.rewrite-tracker {
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding:20px 0;
  color:var(--muted)
}
.tracker-counter strong {
  color:var(--red)
}
.word-list {
  border-top:1px solid var(--ink)
}
.word-row {
  display:grid;
  grid-template-columns:1fr 50px 1.35fr;
  width:100%;
  gap:25px;
  align-items:center;
  border:0;
  border-bottom:1px solid var(--ink);
  padding:32px 0;
  background:transparent;
  text-align:left;
  font-size:clamp(28px,4.8vw,77px);
  font-weight:600;
  letter-spacing:-.055em;
  transition:padding .4s,background .4s
}
.word-row:hover {
  padding-left:15px;
  background:#e7e7de
}
.old {
  position:relative;
  width:max-content
}
.old-text {
  transition:opacity .35s
}
.redact-line {
  position:absolute;
  height:5px;
  background:var(--red);
  width:108%;
  left:-4%;
  top:51%;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--ease)
}
.new {
  opacity:.24;
  transition:opacity .5s,transform .5s,color .5s
}
.word-arrow {
  font-size:30px;
  color:#85867b;
  transition:transform .4s
}
.word-row[aria-pressed=true] .redact-line {
  transform:scaleX(1)
}
.word-row[aria-pressed=true] .old-text {
  opacity:.4
}
.word-row[aria-pressed=true] .new {
  opacity:1;
  color:var(--red);
  transform:translateX(4px)
}
.word-row[aria-pressed=true] .word-arrow {
  transform:rotate(45deg);
  color:var(--red)
}
.small-note {
  margin-top:30px;
  color:var(--muted)
}
.choices {
  padding-top:90px
}
.choices-heading {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.choices h2 {
  font-size:clamp(90px,15vw,240px);
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:-.035em;
  line-height:.85
}
.choice-cross {
  font-size:21vw;
  font-weight:300;
  color:var(--red);
  line-height:1
}
.choice-intro {
  font-size:22px;
  color:#b4b5a9;
  margin:55px 0 120px
}
.decision {
  position:relative;
  border-top:1px solid #616257;
  padding:30px 0 90px
}
.scenario-meta {
  display:flex;
  justify-content:space-between;
  gap:20px
}
.scenario-status {
  color:#b4b5a9
}
.scenario-status.decided {
  color:var(--red);
  font-weight:600
}
.decision h3 {
  font-size:clamp(28px,3.7vw,58px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.045em;
  max-width:1050px;
  margin:55px 0 25px
}
.decision>p {
  font-size:18px;
  line-height:1.5;
  color:#b4b5a9
}
.options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:50px;
  border:1px solid #696a5e
}
.decision-btn {
  background:none;
  border:0;
  border-right:1px solid #696a5e;
  text-align:left;
  padding:35px;
  min-height:185px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:30px;
  transition:color .4s,background .4s
}
.decision-btn:last-child {
  border-right:0
}
.option-title {
  font-size:clamp(25px,3vw,44px);
  font-weight:500;
  letter-spacing:-.045em
}
.option-desc {
  font-size:14px;
  line-height:1.5;
  color:#b4b5a9
}
.decision-btn:hover {
  background:#30312b
}
.decision-btn[aria-pressed=true] {
  background:var(--paper);
  color:var(--ink)
}
.decision-btn[aria-pressed=true] .option-desc {
  color:#595b50
}
.options.has-selected .decision-btn:not([aria-pressed=true]) {
  color:#c1c2b7
}
.consequence-container {
  min-height:190px
}
.consequence {
  max-width:860px;
  padding:25px 0 0
}
.placeholder-text {
  font-size:16px;
  color:#b4b5a9;
  font-style:italic
}
.cost-receipt {
  display:flex;
  flex-direction:column;
  gap:12px;
  animation:receiptFade .35s var(--ease) forwards
}
@keyframes receiptFade {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}
.cost-title {
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red)
}
.cost-reflection {
  font-size:clamp(19px,2.2vw,24px);
  line-height:1.55;
  letter-spacing:-.015em;
  color:#dfdfd4
}
.mirror-wrap {
  margin-top:90px;
  padding-top:45px;
  border-top:1px solid #363730;
  max-width:960px
}
.mirror-label {
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:18px
}
.mirror-closing {
  font-size:clamp(24px,3.3vw,44px);
  line-height:1.35;
  letter-spacing:-.035em;
  color:#efefe7
}
.fracture {
  overflow:hidden;
  padding-top:60px;
  padding-bottom:150px
}
.fracture-words {
  height:660px;
  position:relative;
  font-family:var(--display);
  font-size:clamp(55px,11.8vw,185px);
  line-height:1;
  font-weight:700;
  letter-spacing:-.035em
}
.frag {
  position:absolute;
  white-space:nowrap;
  opacity:.3;
  will-change:transform;
  transform:translateX(var(--drift,0px)) rotate(var(--rotation,0deg));
  transition:opacity .35s var(--ease),color .35s var(--ease)
}
.frag:hover {
  opacity:.9;
  color:var(--paper)
}
.frag.red {
  opacity:1;
  color:var(--red)
}
.frag.red:hover {
  opacity:1;
  text-shadow:0 0 35px rgba(229,59,39,.5)
}
.frag:nth-child(1) {
  top:15px;
  left:2%;
  --rotation:-8deg
}
.frag:nth-child(2) {
  top:150px;
  left:-4%;
  --rotation:5deg
}
.frag:nth-child(3) {
  top:280px;
  left:7%;
  --rotation:-4deg
}
.frag:nth-child(4) {
  top:410px;
  left:4%;
  --rotation:7deg
}
.frag:nth-child(5) {
  top:525px;
  right:0;
  --rotation:-3deg;
  opacity:1
}
.fracture-insight {
  font-size:clamp(25px,3.5vw,54px);
  line-height:1.25;
  letter-spacing:-.04em;
  margin-top:80px;
  position:relative
}
.accountability-anchor {
  margin-top:80px;
  padding-left:28px;
  border-left:2px solid var(--red);
  max-width:820px;
  position:relative
}
.anchor-label {
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:16px
}
.anchor-text {
  font-size:clamp(20px,2.4vw,34px);
  line-height:1.45;
  letter-spacing:-.03em;
  color:#c9cac0
}
.anchor-emphasis {
  font-style:italic;
  color:var(--paper);
  display:block;
  margin-top:14px;
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-decoration-thickness:1.5px;
  text-underline-offset:5px
}
.quiet {
  padding-top:200px;
  padding-bottom:160px;
  background:var(--red);
  color:var(--ink)
}
.quiet-lead {
  font-size:clamp(25px,3vw,45px);
  line-height:1.3;
  margin:0 0 180px 35%;
  letter-spacing:-.035em
}
.quiet-title {
  font-family:var(--display);
  font-size:clamp(75px,15vw,240px);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:.83
}
.quiet-title .red {
  color:var(--paper)
}
.ending {
  padding-top:100px
}
.ending-title {
  font-size:clamp(100px,16vw,260px);
  letter-spacing:-.07em;
  line-height:.87
}
.choice-echo {
  padding:120px 0 80px 45%;
}
.choice-echo .eyebrow {
  margin-bottom:25px;
  color:var(--muted)
}
.choice-echo p {
  font-size:clamp(23px,2.4vw,38px);
  line-height:1.4;
  letter-spacing:-.03em
}
.echo-sub {
  display:block;
  font-size:clamp(12px,1.2vw,15px);
  color:var(--red);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  margin-top:20px;
  line-height:1.4
}
.promise {
  padding:110px 0 100px 23%;
}
.promise-tag {
  display:block;
  margin-bottom:45px
}
.original,.try {
  font-size:clamp(65px,9.3vw,150px);
  font-weight:800;
  letter-spacing:-.06em;
  line-height:.95
}
.original {
  position:relative;
  color:#8f9185
}
.be {
  position:relative
}
.be:after {
  content:'';
  position:absolute;
  left:-5%;
  right:-5%;
  top:50%;
  height:7px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1s var(--ease)
}
.promise.is-revised .be:after {
  transform:scaleX(1)
}
.try {
  margin-top:90px
}
.last-word {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  padding-top:60px;
  border-top:1px solid var(--ink);
  margin-top:20px
}
.last-word p {
  font-size:clamp(34px,5.8vw,92px);
  line-height:1.04;
  letter-spacing:-.06em;
  font-weight:500
}
#restart {
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  text-decoration:none;
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 0;
  color:var(--muted);
  border-bottom:1px dashed var(--line);
  white-space:nowrap;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
#restart:hover {
  color:var(--ink);
  border-bottom-style:solid;
  border-color:var(--ink);
}
.colophon {
  padding:30px var(--pad) 85px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  border-top:1px solid var(--line);
  font-size:9px
}
.reading-bar {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  padding:16px var(--pad);
  z-index:30;
  display:flex;
  gap:25px;
  align-items:center;
  background:var(--paper);
  border-top:1px solid var(--line);
  font-size:10px;
  letter-spacing:1px;
  transition:background .4s,color .4s
}
.reading-bar.bar-dark {
  background:var(--ink);
  color:var(--paper);
  border-color:#484a3e
}
.bar-left {
  display:flex;
  gap:12px;
  align-items:center;
  min-width:225px
}
.sound-indicator {
  color:#929486;
  font-size:7px
}
.sound-indicator.is-playing {
  color:var(--red)
}
.progress-track {
  flex:1;
  height:1px;
  background:#c5c7bb
}
.bar-dark .progress-track {
  background:#505246
}
#progress {
  height:2px;
  width:0;
  background:var(--red);
  transform:translateY(-.5px)
}
#percent {
  min-width:35px;
  text-align:right;
  font-variant-numeric:tabular-nums
}
.cursor-dot {
  position:fixed;
  top:0;
  left:0;
  width:9px;
  height:9px;
  margin-left:-4.5px;
  margin-top:-4.5px;
  background:var(--red);
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
  opacity:0;
  transform-origin:center center;
  will-change:transform,opacity;
  transition:opacity .2s ease;
}
.cursor-dot.is-active {
  opacity:1;
}
.cursor-dot.is-hidden {
  opacity:0!important;
  transform:scale(0)!important;
  transition:opacity .15s ease,transform .15s ease;
}
.cursor-follower {
  position:fixed;
  top:0;
  left:0;
  pointer-events:none;
  z-index:9997;
  width:72px;
  height:72px;
  margin-left:-36px;
  margin-top:-36px;
  display:grid;
  place-items:center;
  background:var(--red);
  border-radius:50%;
  opacity:0;
  scale:.25;
  transition:opacity .25s ease,scale .25s cubic-bezier(0.16,1,0.3,1);
  will-change:transform,opacity,scale;
  box-shadow:0 8px 24px rgba(229,59,39,.35);
}
.cursor-follower.is-hovered {
  opacity:1;
  scale:1;
}
.cursor-text {
  font-size:9px;
  font-weight:700;
  letter-spacing:1.2px;
  color:var(--paper);
  text-transform:uppercase;
}
#restart,
#sound,
#index-toggle,
.scroll-arrow,
#index-close {
  will-change:transform;
}
#chapter-index {
  position:fixed;
  inset:0 0 0 auto;
  width:min(680px,100%);
  max-width:100%;
  max-height:100%;
  height:100dvh;
  margin:0;
  padding:50px;
  outline:none;
  border:0;
  background:var(--red);
  color:var(--ink);
  overflow-y:auto;
  box-shadow:-20px 0 60px rgba(0,0,0,.35)
}
#chapter-index[open] {
  animation:dialogSlideIn .38s var(--ease) forwards
}
#chapter-index[open]::backdrop {
  animation:backdropFadeIn .35s var(--ease) forwards
}
#chapter-index.is-closing {
  animation:dialogSlideOut .3s var(--ease) forwards
}
#chapter-index.is-closing::backdrop {
  animation:backdropFadeOut .3s var(--ease) forwards
}
@keyframes dialogSlideIn {
  from { transform:translateX(100%); opacity:0 }
  to { transform:translateX(0); opacity:1 }
}
@keyframes dialogSlideOut {
  from { transform:translateX(0); opacity:1 }
  to { transform:translateX(100%); opacity:0 }
}
@keyframes backdropFadeIn {
  from { opacity:0 }
  to { opacity:1 }
}
@keyframes backdropFadeOut {
  from { opacity:1 }
  to { opacity:0 }
}
.index-top {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:60px
}
.index-top h2 {
  font-size:clamp(45px,5vw,75px)
}
#index-close {
  background:none;
  border:0;
  align-self:start;
  font-size:40px;
  line-height:1;
  padding:0 5px;
  min-width:44px;
  min-height:44px;
  transition:transform .3s var(--ease),color .2s;
  cursor:pointer
}
#index-close:hover {
  transform:rotate(90deg) scale(1.1)
}
#chapter-index nav a {
  display:flex;
  gap:25px;
  align-items:center;
  padding:22px 0;
  border-top:1px solid rgba(0,0,0,.4);
  text-decoration:none;
  font-size:28px;
  letter-spacing:-1px
}
#chapter-index nav a span:first-child {
  font-size:11px;
  letter-spacing:0
}
#chapter-index nav a span:last-child {
  margin-left:auto
}
#chapter-index>p {
  margin-top:45px;
  font-size:10px;
  letter-spacing:1px
}
.js .reveal-blur {
  opacity:0;
  filter:blur(14px);
  transform:translateY(32px);
  will-change:opacity,filter,transform;
  transition:opacity .9s var(--ease),filter 1.1s var(--ease),transform 1.1s var(--ease)
}
.js .reveal-blur.visible {
  opacity:1;
  filter:blur(0);
  transform:none
}
@media(min-width:1600px) {
  :root {
    --pad:6vw
  }
  .hero h1 {
    font-size:18.3vw
  }
}
@media(max-width:900px) {
  .header-note {
    display:none
  }
  #index-toggle {
    margin-left:auto
  }
  .hero-bottom {
    grid-template-columns:1.1fr 1fr
  }
  .edition {
    display:none
  }
  .hero h1 {
    font-size:19vw
  }
  .beliefs-hint {
    max-width:150px;
    text-align:right
  }
  .answer {
    margin-left:35%
  }
  .rewrite-tracker {
    flex-direction:column;
    gap:10px
  }
  .word-row {
    gap:15px;
    grid-template-columns:1fr 30px 1.35fr
  }
  .choice-cross {
    display:none
  }
  .choices h2 {
    font-size:19vw
  }
  .quiet-title {
    font-size:15.5vw
  }
  .colophon {
    font-size:9px
  }
  .choice-echo {
    padding-left:30%
  }
}
@media(max-width:600px) {
  :root {
    --pad:6vw
  }
  header {
    height:64px;
    gap:10px
  }
  .index-label,
  .sound-label {
    display:none
  }
  .wordmark {
    font-size:16px
  }
  #sound,#index-toggle {
    font-size:10px
  }
  #index-toggle {
    margin-left:auto;
    padding:8px 12px;
    font-size:20px;
    line-height:1
  }
  #sound {
    padding:10px 12px
  }
  .sound-bars {
    margin:0;
    gap:2px
  }
  .hero {
    padding-top:105px;
    min-height:92svh;
    padding-bottom:80px
  }
  .hero-grid {
    inset:72px var(--pad) 65px
  }
  .hero-top,.meta-tag {
    font-size:10px
  }
  .hero-center {
    padding:70px 0 30px
  }
  .hero h1 {
    font-size:18.7vw
  }
  .hero-caption {
    font-size:9px;
    letter-spacing:.5px;
    padding:15px 0
  }
  .hero-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:35px;
    gap:15px
  }
  .hero-statement {
    flex:1
  }
  .hero-statement p {
    font-size:22px;
    line-height:1.2
  }
  .scroll-link {
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex-shrink:0
  }
  .scroll-text {
    font-size:9px;
    max-width:95px;
    line-height:1.6
  }
  .scroll-arrow {
    width:38px;
    height:38px;
    flex-shrink:0;
    font-size:21px
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:.7px;
    margin-bottom:50px
  }
  .eyebrow>span:last-child {
    text-align:right
  }
  section {
    padding-top:85px;
    padding-bottom:85px
  }
  .question {
    padding-top:70px;
    padding-bottom:30px
  }
  .section-number {
    top:155px;
    font-size:75vw
  }
  .question h2 {
    font-size:13.5vw
  }
  .answer {
    font-size:clamp(38px,11.5vw,56px);
    margin:70px 0 0 14%;
    line-height:1
  }
  .answer-prefix {
    font-size:9px
  }
  .margin-note {
    font-size:10px
  }
  .beliefs {
    padding-bottom:90px
  }
  .beliefs-header {
    flex-direction:column;
    gap:0;
    margin-bottom:25px
  }
  .beliefs-header .eyebrow {
    margin-bottom:10px
  }
  .beliefs-hint {
    max-width:none;
    font-size:9px;
    text-align:left
  }
  .belief-trigger {
    grid-template-columns:30px 1fr 24px;
    padding:30px 0
  }
  .belief h2 {
    font-size:9.5vw
  }
  .belief-num {
    font-size:10px
  }
  .cross {
    font-size:29px
  }
  .belief-detail {
    padding:0 0 35px 30px
  }
  .belief-detail p {
    font-size:18px
  }
  .cost-scene {
    padding:75px var(--pad)
  }
  .until-mark {
    font-size:31vw;
    top:27%
  }
  .cost-line {
    font-size:12vw;
    margin:100px 0
  }
  .motion .cost-line {
    font-size:12vw
  }
  .motion .cost-line.offset {
    padding-left:0
  }
  .motion .cost-scene {
    padding-top:65px
  }
  .motion .cost {
    height:390svh
  }
  .cost-bottom h2 {
    font-size:20vw
  }
  .cost-tag {
    font-size:10px
  }
  .rewrite-title {
    font-size:13vw
  }
  .rewrite-intro {
    margin:60px 0 35px;
    font-size:25px;
    gap:20px
  }
  .rewrite-intro p:last-child {
    font-size:13px
  }
  .rewrite-tracker {
    font-size:10px
  }
  .word-row {
    grid-template-columns:1fr 18px 1.45fr;
    font-size:5.4vw;
    gap:8px;
    padding:28px 0
  }
  .word-arrow {
    font-size:20px
  }
  .redact-line {
    height:3px
  }
  .small-note {
    font-size:9px
  }
  .choices h2 {
    font-size:22vw
  }
  .choice-intro {
    font-size:18px;
    margin:35px 0 75px
  }
  .scenario-index,.scenario-status {
    font-size:9px;
    letter-spacing:.7px
  }
  .decision h3 {
    font-size:29px;
    margin-top:40px
  }
  .decision>p {
    font-size:17px
  }
  .options {
    grid-template-columns:1fr
  }
  .decision-btn {
    border-right:0;
    border-bottom:1px solid #696a5e;
    padding:25px;
    min-height:140px;
    gap:20px
  }
  .decision-btn:last-child {
    border-bottom:0
  }
  .option-title {
    font-size:28px
  }
  .option-desc {
    font-size:14px
  }
  .consequence-container {
    min-height:190px
  }
  .decision {
    padding-bottom:40px
  }
  .cost-reflection {
    font-size:18px
  }
  .mirror-wrap {
    margin-top:55px;
    padding-top:30px
  }
  .mirror-closing {
    font-size:clamp(20px,5.5vw,28px)
  }
  .accountability-anchor {
    margin-top:55px;
    padding-left:18px
  }
  .anchor-text {
    font-size:clamp(18px,4.8vw,24px)
  }
  .fracture {
    padding-top:35px;
    padding-bottom:100px
  }
  .fracture-words {
    height:370px;
    font-size:14vw
  }
  .frag:nth-child(1) {
    top:5px
  }
  .frag:nth-child(2) {
    top:80px
  }
  .frag:nth-child(3) {
    top:155px;
    left:0
  }
  .frag:nth-child(4) {
    top:230px
  }
  .frag:nth-child(5) {
    top:300px
  }
  .fracture-insight {
    font-size:26px;
    margin-top:55px
  }
  .quiet {
    padding-top:120px;
    padding-bottom:100px
  }
  .quiet-lead {
    margin:0 0 120px 15%;
    font-size:25px
  }
  .quiet-title {
    font-size:16vw
  }
  .ending-title {
    font-size:20vw
  }
  .choice-echo {
    padding:95px 0 0 15%
  }
  .choice-echo p {
    font-size:23px
  }
  .promise {
    padding:100px 0 90px 10%
  }
  .original,.try {
    font-size:14vw
  }
  .try {
    margin-top:65px
  }
  .last-word {
    flex-direction:column;
    align-items:start;
    gap:40px
  }
  .last-word p {
    font-size:9vw
  }
  .colophon {
    flex-direction:column;
    gap:10px;
    padding-bottom:80px
  }
  .reading-bar {
    padding-top:13px;
    padding-bottom:13px;
    gap:15px;
    font-size:9px;
    letter-spacing:.5px
  }
  .bar-left {
    min-width:155px;
    gap:8px
  }
  #chapter-index {
    padding:30px 25px
  }
  .index-top {
    margin-bottom:35px
  }
  #chapter-index nav a {
    font-size:25px;
    padding:20px 0
  }
}
@media(pointer:coarse) {
  .cursor-dot, .cursor-follower {
    display:none!important
  }
}
@media(pointer:fine) {
  html, body, a, button, [role="button"] {
    cursor:none
  }
  #chapter-index,
  #chapter-index * {
    cursor:auto!important
  }
  #chapter-index a,
  #chapter-index button,
  #chapter-index [role="button"],
  #chapter-index::backdrop {
    cursor:pointer!important
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .js .reveal-blur {
    opacity:1;
    filter:none;
    transform:none
  }
  .cursor-dot, .cursor-follower {
    display:none!important
  }
  .hero-acronym {
    filter:none
  }
  .interactive-mark {
    transform:rotate(9deg)
  }
  .be:after {
    transform:scaleX(1)
  }
}

/* ==========================================================================
   The Next Question: 002 / RESPECT (A.W.T.G.G Editorial System)
   ========================================================================== */
.next-question {
  padding: 120px var(--pad) 80px;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line);
  position: relative;
}

.next-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.next-question .eyebrow {
  margin-bottom: 55px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}

.next-link {
  display: block;
  text-decoration: none;
  color: var(--ink);
  padding: 20px 0 60px;
}

.next-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 8px;
}

.next-title {
  font-family: var(--display);
  font-size: clamp(55px, 9vw, 130px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
  color: var(--ink);
  margin: 0 0 35px;
}

.next-title-sub {
  color: var(--muted);
  font-weight: 600;
  transition: color 0.35s var(--ease);
}

.next-link:hover .next-title-sub {
  color: var(--ink);
}

.next-premise {
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--muted);
  max-width: 720px;
  margin: 0 0 55px;
}

.next-action {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  padding: 16px 0;
  border-bottom: 2px solid var(--ink);
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}

.next-link:hover .next-action {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateX(8px);
}

.next-arrow {
  font-size: 26px;
  color: var(--red);
  transition: transform 0.4s var(--ease), color 0.35s var(--ease);
  display: inline-block;
}

.next-link:hover .next-arrow {
  color: var(--red);
  transform: translate(6px, -4px);
}

.next-note {
  border-top: 1px solid var(--line);
  padding-top: 25px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 40px;
}

@media(max-width: 768px) {
  .next-question {
    padding: 80px var(--pad) 60px;
  }
  .next-title {
    font-size: clamp(45px, 12vw, 80px);
  }
  .next-premise {
    font-size: 18px;
  }
  .next-action {
    font-size: 11px;
    gap: 16px;
  }
  .next-arrow {
    font-size: 22px;
  }
}
@media(prefers-reduced-motion:reduce){html,body,a,button,[role=button]{cursor:auto!important}a,button,[role=button]{cursor:pointer!important}}