:root{
  --ink:#151A20;
  --bone:#E8E1D6;
  --copper:#B87546;
  --sage:#687871;
  --stone:#969A9A;
  --surface:#1C2228;
  --border:rgba(232,225,214,.16);
  --display:"Noto Serif TC","Noto Serif CJK TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
  --body:"Inter","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --editorial:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --rail:292px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{background:#101419}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--bone);
  font-family:var(--body);
  background:
    radial-gradient(900px 600px at 54% 28%,rgba(184,117,70,.045),transparent 65%),
    #101419;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
  opacity:.08;
  background-image:repeating-radial-gradient(circle at 0 0,rgba(255,255,255,.1) 0 1px,transparent 1px 4px);
  mix-blend-mode:soft-light;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
a:focus-visible{outline:2px solid var(--bone);outline-offset:5px}
button,a{touch-action:manipulation}

.shell{
  width:min(1600px,100%);
  min-height:98px;
  display:grid;
  grid-template-columns:240px minmax(0,1fr) var(--rail);
  align-items:center;
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  background:linear-gradient(180deg,rgba(8,11,14,.34),rgba(8,11,14,0));
  pointer-events:none;
}
.shell a,.shell-utility{pointer-events:auto}
.identity{
  min-height:98px;
  padding:20px 0 0 54px;
  display:flex;
  align-items:flex-start;
}
.identity strong{
  font-family:var(--body);
  font-size:43px;
  font-weight:300;
  line-height:1;
  letter-spacing:-.055em;
}
.identity strong span{font-weight:200;color:rgba(232,225,214,.86)}
.top-chapters{
  align-self:stretch;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
}
.top-chapters a{
  min-width:104px;
  min-height:58px;
  padding:11px 20px 9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-left:1px solid rgba(232,225,214,.055);
  color:rgba(232,225,214,.38);
  position:relative;
  transition:color .35s ease,opacity .35s ease;
}
.top-chapters a:last-child{border-right:1px solid rgba(232,225,214,.08)}
.top-chapters b{
  font-family:var(--editorial);
  font-weight:500;
  letter-spacing:.07em;
  font-size:13px;
}
.top-chapters span{font-size:11px;color:rgba(150,154,154,.66);margin-top:2px}
.top-chapters a:after{
  content:"";
  position:absolute;
  left:34%;
  right:34%;
  bottom:5px;
  height:1px;
  background:var(--bone);
  transform:scaleX(0);
  transition:transform .35s var(--ease);
}
.top-chapters a:hover{color:rgba(232,225,214,.7)}
.top-chapters a[aria-current]{color:rgba(232,225,214,.82)}
.top-chapters a[aria-current] span{color:rgba(232,225,214,.85)}
.top-chapters a[aria-current]:after{transform:scaleX(1)}
.shell-utility{
  align-self:stretch;
  border-left:1px solid rgba(232,225,214,.12);
  border-bottom:1px solid rgba(232,225,214,.1);
  padding:27px 28px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  font-size:9px;
  letter-spacing:.12em;
  color:rgba(150,154,154,.62);
  background:rgba(11,15,18,.78);
  backdrop-filter:blur(12px);
}
.shell-utility .current-state{letter-spacing:.04em;color:rgba(232,225,214,.72)}

main{
  width:min(1600px,100%);
  margin:auto;
  min-height:calc(100vh - 40px);
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--rail);
  outline:none;
  border-bottom:1px solid rgba(232,225,214,.12);
}
.stage{
  position:relative;
  min-height:calc(100vh - 40px);
  overflow:hidden;
  isolation:isolate;
  border-right:1px solid rgba(232,225,214,.12);
  background:#151A20;
}
.world{
  position:absolute;
  inset:0;
  z-index:-5;
  overflow:hidden;
  background:
    radial-gradient(900px 660px at 56% 34%,rgba(184,117,70,.09),transparent 64%),
    radial-gradient(720px 540px at 8% 48%,rgba(104,120,113,.11),transparent 62%),
    linear-gradient(125deg,#171D23 0%,#151A20 47%,#10151A 100%);
  transition:filter .65s ease,background .65s ease;
}
.world:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(8,11,14,.35) 0%,rgba(8,11,14,.04) 36%,rgba(8,11,14,.12) 65%,rgba(8,11,14,.55) 100%),
    linear-gradient(0deg,rgba(7,10,12,.54) 0%,transparent 38%);
}
.ambient{position:absolute;border-radius:50%;filter:blur(90px);transition:all .7s var(--ease)}
.ambient-warm{width:48%;height:64%;right:7%;top:9%;background:rgba(184,117,70,.13)}
.ambient-cool{width:42%;height:62%;left:-9%;bottom:2%;background:rgba(104,120,113,.11)}
.window-glow{
  position:absolute;
  right:8%;
  top:0;
  width:35%;
  height:73%;
  opacity:.38;
  background:
    linear-gradient(90deg,transparent 48%,rgba(232,225,214,.08) 49% 49.5%,transparent 50%),
    linear-gradient(0deg,transparent 52%,rgba(232,225,214,.07) 52.5% 53%,transparent 53.5%),
    linear-gradient(145deg,rgba(232,225,214,.09),rgba(184,117,70,.06) 48%,transparent 72%);
  clip-path:polygon(7% 0,100% 0,100% 100%,0 86%);
  transition:opacity .6s ease,transform .7s var(--ease);
}
.desk-plane{
  position:absolute;
  left:18%;
  right:3%;
  bottom:-7%;
  height:35%;
  transform:skewX(-7deg);
  background:linear-gradient(180deg,rgba(54,48,42,.34),rgba(14,18,21,.8) 70%);
  box-shadow:0 -1px rgba(232,225,214,.06);
}
.work-screen{
  position:absolute;
  right:10%;
  top:25%;
  width:34%;
  height:39%;
  border:1px solid rgba(232,225,214,.08);
  background:
    linear-gradient(90deg,rgba(232,225,214,.05) 1px,transparent 1px) 0 0/24px 100%,
    linear-gradient(180deg,rgba(104,120,113,.13),rgba(13,17,20,.78));
  box-shadow:0 28px 60px rgba(0,0,0,.34);
  transform:perspective(900px) rotateY(-6deg);
  opacity:.36;
  transition:all .72s var(--ease);
}
.work-screen:after{
  content:"";
  position:absolute;
  left:7%;right:7%;bottom:9%;height:18%;
  background:
    repeating-linear-gradient(90deg,rgba(184,117,70,.35) 0 8%,rgba(104,120,113,.3) 8% 16%,rgba(232,225,214,.12) 16% 24%);
  opacity:.45;
}
.small-screen{
  position:absolute;
  left:15%;
  top:28%;
  width:20%;
  height:24%;
  border:1px solid rgba(232,225,214,.05);
  background:linear-gradient(145deg,rgba(104,120,113,.08),rgba(10,14,17,.82));
  opacity:.3;
  transition:all .72s var(--ease);
}
.practical-light{
  position:absolute;
  left:44%;
  top:34%;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(232,181,130,.22),rgba(184,117,70,.09) 35%,transparent 70%);
  filter:blur(12px);
  opacity:.6;
  transition:all .72s var(--ease);
}

.presence{
  position:absolute;
  left:30%;
  top:7%;
  width:47%;
  height:82%;
  margin:0;
  z-index:-1;
  transition:
    left .78s var(--ease),
    top .78s var(--ease),
    width .78s var(--ease),
    height .78s var(--ease),
    opacity .62s ease,
    filter .62s ease,
    transform .78s var(--ease);
  filter:saturate(.78) brightness(.96);
  transform:rotate(-1deg) scale(1.015);
}
.human-proxy{
  position:absolute;
  inset:0;
  filter:drop-shadow(0 35px 45px rgba(0,0,0,.38));
}
.proxy-head{
  position:absolute;
  width:24%;
  aspect-ratio:.82;
  left:44%;
  top:11%;
  border-radius:48% 49% 44% 46%;
  background:
    radial-gradient(circle at 63% 35%,rgba(232,225,214,.06),transparent 25%),
    linear-gradient(155deg,#272D30,#101417 78%);
  transform:rotate(5deg);
}
.proxy-neck{
  position:absolute;
  width:10%;
  height:18%;
  left:50%;
  top:30%;
  background:linear-gradient(160deg,#252A2D,#111518);
  transform:rotate(5deg);
}
.proxy-body{
  position:absolute;
  left:16%;
  right:9%;
  bottom:0;
  height:61%;
  border-radius:42% 42% 6% 6%/27% 27% 4% 4%;
  background:
    radial-gradient(circle at 58% 10%,rgba(232,225,214,.04),transparent 24%),
    linear-gradient(145deg,#252B2E 0%,#14191C 62%,#0E1215 100%);
}
.proxy-arm{
  position:absolute;
  right:4%;
  top:37%;
  width:41%;
  height:12%;
  border-radius:60px;
  background:linear-gradient(165deg,#22282B,#101417);
  transform:rotate(-27deg);
  transform-origin:left center;
}
.presence figcaption{
  position:absolute;
  left:2%;
  bottom:8px;
  display:flex;
  gap:8px;
  align-items:center;
  font-size:7px;
  letter-spacing:.06em;
  color:rgba(150,154,154,.26);
  opacity:.58;
}
.presence figcaption span{color:rgba(232,225,214,.54)}

#content{
  position:relative;
  min-height:calc(100vh - 40px);
  padding:176px 52px 92px;
  z-index:3;
}
.chapter-copy{animation:focus-in .62s var(--ease) both}
.chapter-index{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 14px;
  font-family:var(--editorial);
  font-size:13px;
  color:rgba(232,225,214,.7);
}
.chapter-index span{display:block;width:28px;height:1px;background:rgba(232,225,214,.58)}
.chapter-word{
  margin:0;
  font-family:var(--editorial);
  font-size:clamp(78px,8.3vw,132px);
  line-height:.84;
  font-weight:500;
  letter-spacing:.015em;
  color:var(--bone);
  text-shadow:0 16px 60px rgba(0,0,0,.26);
}
.chapter-cn{
  margin:18px 0 26px;
  font-family:var(--display);
  font-size:34px;
  line-height:1;
  letter-spacing:.08em;
}
.intro{
  max-width:370px;
  margin:0 0 13px;
  font-family:var(--display);
  font-size:16px;
  line-height:1.82;
  color:rgba(232,225,214,.82);
}
.draft{font-size:9px;color:rgba(150,154,154,.44);margin:0}
.eyebrow{font-size:9px;letter-spacing:.1em;color:rgba(150,154,154,.62)}
.continuation{
  margin-top:24px;
  padding-top:13px;
  max-width:360px;
  min-height:44px;
  border-top:1px solid rgba(232,225,214,.14);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:rgba(232,225,214,.78);
}
.continuation span,.work-bottom a span{color:rgba(150,154,154,.62);font-size:9px}

.live-copy{
  max-width:390px;
  position:relative;
  z-index:6;
}
.live-copy .chapter-index{
  margin-bottom:10px;
  opacity:.72;
}
.live-copy .chapter-word{
  font-size:clamp(54px,5.5vw,84px);
  line-height:.9;
  letter-spacing:.075em;
  color:rgba(232,225,214,.82);
  text-shadow:0 16px 54px rgba(0,0,0,.34);
}
.live-copy .chapter-cn{
  margin:12px 0 30px;
  font-size:21px;
  letter-spacing:.14em;
  color:rgba(232,225,214,.72);
}
.live-copy .intro{
  max-width:345px;
  font-size:17px;
  line-height:1.9;
  text-shadow:0 3px 24px rgba(0,0,0,.45);
}
.live-fragment{
  position:absolute;
  left:53px;
  bottom:104px;
  width:270px;
  z-index:6;
  padding-top:13px;
  border-top:1px solid rgba(232,225,214,.1);
  opacity:.72;
}
.live-fragment p:not(.eyebrow){font-family:var(--display);font-size:13px;line-height:1.7;color:rgba(232,225,214,.67)}
.live-fragment a{font-size:10px;color:rgba(232,225,214,.75)}

.think-copy{max-width:540px}
.think-copy .chapter-word{font-size:clamp(76px,8vw,124px)}
.question{
  max-width:500px;
  margin:25px 0 13px;
  font-family:var(--display);
  font-size:24px;
  line-height:1.45;
}
.thought-note{
  max-width:440px;
  margin-top:24px;
  padding-left:18px;
  border-left:1px solid rgba(184,117,70,.62);
  color:rgba(232,225,214,.66);
}
.thought-note p{font-size:12px;line-height:1.85;margin:0 0 8px}
.thought-note span{font-size:8px;color:rgba(150,154,154,.48)}
.question-fragment{
  position:absolute;
  right:47px;
  bottom:74px;
  width:285px;
  padding:16px 18px;
  background:rgba(12,16,19,.54);
  border:1px solid rgba(232,225,214,.1);
  backdrop-filter:blur(10px);
}
.question-fragment>span,.question-fragment small{font-size:9px;color:rgba(150,154,154,.56)}
.question-fragment p{font-family:var(--display);font-size:18px;line-height:1.45;margin:8px 0}

.make-copy{max-width:430px}
.work-object{
  position:absolute;
  left:27%;
  right:3.7%;
  bottom:55px;
  z-index:4;
  padding:17px 22px 15px;
  background:rgba(12,16,19,.67);
  border:1px solid rgba(232,225,214,.14);
  backdrop-filter:blur(12px);
}
.work-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end}
.work-heading div{display:flex;flex-direction:column}
.work-heading span{font-size:8px;letter-spacing:.14em;color:rgba(150,154,154,.64)}
.work-heading strong{font-family:var(--editorial);font-size:27px;font-weight:500;letter-spacing:.02em}
.work-heading small{font-family:var(--display);font-size:10px;line-height:1.55;color:rgba(232,225,214,.58)}
.arc{
  list-style:none;
  padding:0;
  margin:14px 0 12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.arc li{padding-top:9px;border-top:1px solid rgba(232,225,214,.14)}
.arc span{font-size:8px;color:rgba(150,154,154,.6)}
.arc p{margin:6px 0 0;font-size:9px;line-height:1.55;color:rgba(232,225,214,.66)}
.work-bottom{
  padding-top:10px;
  border-top:1px solid rgba(232,225,214,.1);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  color:rgba(150,154,154,.68);
}
.work-bottom p{margin:0}.work-bottom strong{display:block;color:rgba(232,225,214,.78);font-weight:500}
.work-bottom a{display:flex;gap:18px;align-items:center}

.share-copy{max-width:440px}
.relationship{
  position:absolute;
  right:5%;
  top:39%;
  width:38%;
  z-index:4;
  padding:21px 22px;
  background:rgba(12,16,19,.62);
  border:1px solid rgba(232,225,214,.1);
  backdrop-filter:blur(12px);
}
.relationship h2{
  margin:8px 0 16px;
  font-family:var(--editorial);
  font-size:34px;
  font-weight:500;
}
.relationship h2 span{display:block;font-family:var(--body);font-size:12px;font-weight:400;color:rgba(232,225,214,.68)}
.relationship p{font-size:11px;line-height:1.7;color:rgba(232,225,214,.63)}
.pending{display:block;font-size:8px;color:rgba(150,154,154,.48)}

.stage-signature{
  position:absolute;
  left:52px;
  bottom:28px;
  z-index:5;
  display:flex;
  flex-direction:column;
  font-size:7px;
  letter-spacing:.3em;
  line-height:1.65;
  color:rgba(232,225,214,.32);
}

.chapter-rail{
  min-height:calc(100vh - 40px);
  padding-top:98px;
  background:rgba(11,15,18,.98);
  position:relative;
  display:flex;
  flex-direction:column;
}
.rail-heading{
  height:64px;
  padding:20px 25px;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid rgba(232,225,214,.1);
  font-size:8px;
  letter-spacing:.14em;
  color:rgba(150,154,154,.56);
}
.rail-current{color:rgba(232,225,214,.68);letter-spacing:.06em}
.rail-nav{display:flex;flex-direction:column}
.rail-nav a{
  min-height:142px;
  padding:17px 18px 15px 22px;
  display:grid;
  grid-template-columns:28px 1fr 82px 13px;
  gap:8px;
  align-items:center;
  position:relative;
  border-bottom:1px solid rgba(232,225,214,.075);
  color:rgba(232,225,214,.38);
  opacity:.72;
  transition:
    background .42s ease .08s,
    color .42s ease .08s,
    opacity .42s ease .08s,
    transform .42s var(--ease);
}
.rail-nav a:before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:1px;
  background:var(--bone);
  transform:scaleY(0);
  transition:transform .35s var(--ease);
}
.rail-nav a:hover{
  background:rgba(232,225,214,.018);
  color:rgba(232,225,214,.8);
  opacity:.94;
}
.rail-nav a[aria-current]{
  background:linear-gradient(90deg,rgba(184,117,70,.035),rgba(232,225,214,.009));
  color:rgba(232,225,214,.9);
  opacity:1;
}
.rail-nav a[aria-current]:before{transform:scaleY(1)}
.rail-index{
  align-self:start;
  padding-top:4px;
  font-family:var(--editorial);
  font-size:11px;
  color:rgba(232,225,214,.68);
}
.rail-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.rail-copy small{
  font-size:7px;
  color:rgba(150,154,154,.34);
  white-space:nowrap;
  transition:color .35s ease,opacity .35s ease;
}
.rail-copy b{
  font-family:var(--editorial);
  font-size:19px;
  font-weight:500;
  line-height:1.2;
  margin-top:7px;
}
.rail-copy em{
  font-style:normal;
  font-family:var(--display);
  font-size:10px;
  margin-top:2px;
  color:rgba(232,225,214,.5);
}
.rail-nav a:hover .rail-copy small,
.rail-nav a[aria-current] .rail-copy small{color:rgba(150,154,154,.62)}
.rail-preview{
  width:82px;
  height:58px;
  display:block;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(232,225,214,.06);
  opacity:.34;
  filter:saturate(.72) brightness(.72);
  transition:opacity .42s ease,transform .45s var(--ease),filter .42s ease;
}
.rail-nav a:hover .rail-preview{
  opacity:.72;
  filter:saturate(.82) brightness(.86);
  transform:scale(1.018);
}
.rail-nav a[aria-current] .rail-preview{
  opacity:.88;
  filter:saturate(.9) brightness(.92);
  transform:scale(1.018);
}
.rail-preview:before,.rail-preview:after,.rail-preview i{display:none}
.preview-live{background:url('/reference/LIVE.png') center/cover no-repeat}
.preview-think{background:url('/reference/THINK.png') center/cover no-repeat}
.preview-make{background:url('/reference/MAKE.png') center/cover no-repeat}
.preview-share{background:url('/reference/SHARE.png') center/cover no-repeat}
.rail-arrow{
  font-size:12px;
  color:rgba(232,225,214,.56);
  opacity:0;
  transform:translateX(-5px);
  transition:opacity .35s ease,transform .35s var(--ease);
}
.rail-nav a:hover .rail-arrow,
.rail-nav a[aria-current] .rail-arrow{
  opacity:.72;
  transform:translateX(0);
}
.rail-utility{
  margin-top:auto;
  min-height:74px;
  padding:18px 24px;
  border-top:1px solid rgba(232,225,214,.1);
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:rgba(232,225,214,.54);
  font-size:10px;
}
.rail-utility small{font-size:8px;color:rgba(150,154,154,.4);margin-top:2px}

body[data-chapter=think] .presence{
  left:44%;
  top:15%;
  width:30%;
  height:58%;
  opacity:.5;
  filter:saturate(.66) brightness(.72);
  transform:rotate(.6deg) scale(.94);
}
body[data-chapter=think] .work-screen{
  right:6%;
  top:20%;
  width:41%;
  height:49%;
  opacity:.66;
  filter:brightness(.86);
  transform:perspective(900px) rotateY(-3deg) translateZ(0);
}
body[data-chapter=think] .small-screen{left:12%;top:36%;opacity:.14}
body[data-chapter=think] .practical-light{left:50%;top:31%;opacity:.62}
body[data-chapter=think] .world{filter:brightness(.88) saturate(.86)}

body[data-chapter=make] .presence{
  left:17%;
  top:18%;
  width:27%;
  height:49%;
  opacity:.58;
  filter:saturate(.74) brightness(.84);
}
body[data-chapter=make] .work-screen{
  right:6%;
  top:12%;
  width:49%;
  height:51%;
  opacity:.92;
  transform:perspective(900px) rotateY(-2deg);
}
body[data-chapter=make] .small-screen{left:auto;right:7%;top:16%;width:13%;height:18%;opacity:.5}
body[data-chapter=make] .practical-light{left:37%;top:33%;opacity:.75}

body[data-chapter=share] .presence{
  left:31%;
  top:18%;
  width:31%;
  height:58%;
  opacity:.7;
}
body[data-chapter=share] .work-screen{
  right:8%;
  top:19%;
  width:38%;
  height:43%;
  opacity:.76;
  transform:perspective(900px) rotateY(-4deg);
}
body[data-chapter=share] .ambient-warm{right:-2%;top:3%;width:58%;height:72%;opacity:.82}
body[data-chapter=share] .window-glow{opacity:.55;transform:scale(1.03)}
body[data-chapter=share] .practical-light{left:44%;top:36%;opacity:.8}

footer{
  width:min(1600px,100%);
  margin:auto;
  height:40px;
  padding:0 24px 0 52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.07em;
  color:rgba(150,154,154,.36);
}
.skip{position:fixed;top:-80px;left:20px;z-index:100;background:var(--bone);color:var(--ink);padding:10px}
.skip:focus{top:12px}
.no-script{padding:24px}

@keyframes focus-in{
  from{opacity:0;transform:translateY(18px)}
  55%{opacity:.72}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:1180px){
  :root{--rail:280px}
  .identity{padding-left:30px}
  .identity strong{font-size:36px}
  .top-chapters a{min-width:92px;padding-inline:14px}
  #content{padding-left:34px}
  .stage-signature,.live-fragment{left:34px}
  .chapter-word{font-size:clamp(68px,8.4vw,110px)}
  .rail-nav a{grid-template-columns:27px 1fr 72px 12px;padding-left:17px}
  .rail-preview{width:72px;height:55px}
}

@media(max-width:900px){
  :root{--rail:0px}
  .shell{
    min-height:auto;
    padding:18px 20px 10px;
    grid-template-columns:1fr auto;
    gap:13px;
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    background:transparent;
  }
  .identity{padding:0;min-height:0}
  .identity strong{font-size:34px}
  .shell-utility{border:0;padding:4px 0;min-height:0;align-self:start}
  .shell-utility>span:first-child{display:none}
  .top-chapters{
    grid-column:1/-1;
    order:3;
    justify-content:space-between;
    border-top:1px solid rgba(232,225,214,.08);
  }
  .top-chapters a{
    min-width:0;
    flex:1;
    min-height:51px;
    padding:9px 6px 7px;
  }
  .top-chapters b{font-size:12px}
  .top-chapters span{font-size:9px}
  main{display:block;min-height:0}
  .stage{min-height:auto;border-right:0}
  .chapter-rail{display:none;padding-top:0}
  #content{min-height:0;padding:72px 20px 76px}
  .chapter-word{font-size:clamp(62px,20vw,96px)}
  .chapter-cn{font-size:27px;margin-top:13px}
  .intro{font-size:14px;max-width:310px}
  .presence{
    left:34%!important;
    top:16%!important;
    width:62%!important;
    height:52%!important;
    opacity:.42!important;
    filter:saturate(.7) brightness(.82)!important;
  }
  .work-screen{
    right:3%!important;
    top:28%!important;
    width:52%!important;
    height:33%!important;
    opacity:.38!important;
  }
  .window-glow{right:-10%;width:54%}
  .live-fragment{
    position:relative;
    left:auto;bottom:auto;
    margin-top:70px;
    width:265px;
  }
  .question{font-size:19px;max-width:330px}
  .thought-note{max-width:330px}
  .question-fragment{
    position:relative;right:auto;bottom:auto;
    margin-top:50px;width:100%;max-width:320px;
  }
  .work-object{
    position:relative;left:auto;right:auto;bottom:auto;
    margin-top:62px;padding:15px;
  }
  .work-heading{align-items:flex-start;flex-direction:column;gap:6px}
  .work-heading strong{font-size:23px}
  .arc{grid-template-columns:1fr;gap:9px}
  .relationship{
    position:relative;right:auto;top:auto;
    width:100%;max-width:330px;margin:62px 0 0;
  }
  .stage-signature{left:20px;bottom:20px}
  footer{padding:0 20px;height:36px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* Generated Fason scene integration — temporary prototype assets */
.scene-media{
  position:absolute;
  inset:0;
  z-index:-6;
  overflow:hidden;
  background:#11161b;
}
.scene-photo{
  position:absolute;
  inset:-1.5%;
  opacity:0;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  filter:saturate(.82) brightness(.84) contrast(1.025);
  transform:scale(1.035);
  transition:
    opacity 1.15s ease,
    transform 1.6s var(--ease),
    filter 1.05s ease;
  will-change:opacity,transform;
}
.scene-live{background-image:url('/media/LIVE.png');background-position:center 48%}
.scene-live-hand{background-image:url('/media/LIVE_PUT_DOWN_HAND.png');background-position:center 48%}
.scene-live-camera{background-image:url('/media/LIVE_CAMERA.png');background-position:center 48%}
.scene-think{background-image:url('/media/THINK.png');background-position:center center}
.scene-make{background-image:url('/media/MAKE.png');background-position:center center}
.scene-share{background-image:url('/media/SHARE.png');background-position:center center}

.scene-grade{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,11,14,.72) 0%,rgba(8,11,14,.48) 23%,rgba(8,11,14,.12) 51%,rgba(8,11,14,.08) 72%,rgba(8,11,14,.3) 100%),
    linear-gradient(180deg,rgba(8,11,14,.28) 0%,transparent 24%,transparent 64%,rgba(8,11,14,.52) 100%);
  transition:background .65s ease;
}
body[data-chapter=live] .scene-live,
body[data-chapter=think] .scene-think,
body[data-chapter=make] .scene-make,
body[data-chapter=share] .scene-share{
  opacity:1;
  transform:scale(1);
}
body[data-chapter=live] .scene-live{filter:saturate(.86) brightness(.88) contrast(1.02)}
body[data-chapter=think] .scene-think{filter:saturate(.72) brightness(.72) contrast(1.04)}
body[data-chapter=make] .scene-make{filter:saturate(.8) brightness(.8) contrast(1.035)}
body[data-chapter=share] .scene-share{filter:saturate(.82) brightness(.82) contrast(1.025)}

body[data-chapter=think] .scene-grade{
  background:
    linear-gradient(90deg,rgba(8,11,14,.77) 0%,rgba(8,11,14,.52) 31%,rgba(8,11,14,.2) 58%,rgba(8,11,14,.2) 100%),
    linear-gradient(180deg,rgba(8,11,14,.3),transparent 28%,rgba(8,11,14,.44) 100%);
}
body[data-chapter=make] .scene-grade{
  background:
    linear-gradient(90deg,rgba(8,11,14,.76) 0%,rgba(8,11,14,.46) 27%,rgba(8,11,14,.08) 58%,rgba(8,11,14,.2) 100%),
    linear-gradient(180deg,rgba(8,11,14,.26),transparent 38%,rgba(8,11,14,.5) 100%);
}
body[data-chapter=share] .scene-grade{
  background:
    linear-gradient(90deg,rgba(8,11,14,.7) 0%,rgba(8,11,14,.4) 26%,rgba(8,11,14,.1) 58%,rgba(8,11,14,.18) 100%),
    radial-gradient(circle at 78% 35%,rgba(104,120,113,.07),transparent 38%),
    linear-gradient(180deg,rgba(8,11,14,.24),transparent 36%,rgba(8,11,14,.46) 100%);
}

/* The generated scene now carries the human / room information. */
.world,
.presence{
  display:none;
}

/* Generated-image chapter previews replace the earlier art-direction mock thumbnails. */
.preview-live{background:url('/media/LIVE.png') center/cover no-repeat}
.preview-think{background:url('/media/THINK.png') center/cover no-repeat}
.preview-make{background:url('/media/MAKE.png') center/cover no-repeat}
.preview-share{background:url('/media/SHARE.png') center/cover no-repeat}

/* Let the scene breathe a little more now that a real image occupies the stage. */
.live-copy{
  padding:12px 14px 16px 0;
}
.live-copy .intro{
  color:rgba(232,225,214,.9);
}
.live-fragment{
  background:linear-gradient(90deg,rgba(9,12,15,.26),transparent);
  text-shadow:0 2px 18px rgba(0,0,0,.52);
}
.think-copy,
.make-copy,
.share-copy{
  text-shadow:0 3px 26px rgba(0,0,0,.5);
}
.question-fragment,
.work-object,
.relationship{
  box-shadow:0 18px 55px rgba(0,0,0,.18);
}

@media(max-width:900px){
  .scene-photo{
    inset:0;
    background-position:center center;
    transform:scale(1.02);
  }
  body[data-chapter=live] .scene-live,
  body[data-chapter=think] .scene-think,
  body[data-chapter=make] .scene-make,
  body[data-chapter=share] .scene-share{
    transform:scale(1);
  }
  .scene-grade{
    background:
      linear-gradient(180deg,rgba(8,11,14,.34) 0%,rgba(8,11,14,.2) 28%,rgba(8,11,14,.44) 70%,rgba(8,11,14,.78) 100%),
      linear-gradient(90deg,rgba(8,11,14,.55),rgba(8,11,14,.12));
  }
}


/* LIVE scene-life prototype: sparse still-to-still micro moments, not a slideshow. */
.scene-live-hand{
  background-image:url('/media/LIVE_PUT_DOWN_HAND.png');
  background-position:center 48%;
}
.scene-live-camera{
  background-image:url('/media/LIVE_CAMERA.png');
  background-position:center 48%;
}
.scene-live-window{
  background-image:url('/media/LIVE_CHILL_LOOKWINDOW.png');
  background-position:center 48%;
}
.scene-live-transition{
  z-index:1;
  background-image:url('/media/LIVE_WALKING.png');
  background-position:center 48%;
  pointer-events:none;
}

body[data-chapter=live][data-live-moment=hand] .scene-live,
body[data-chapter=live][data-live-moment=camera] .scene-live,
body[data-chapter=live][data-live-moment=window] .scene-live{
  opacity:0;
  transform:scale(1.012);
}

body[data-chapter=live][data-live-moment=hand] .scene-live-hand,
body[data-chapter=live][data-live-moment=camera] .scene-live-camera,
body[data-chapter=live][data-live-moment=window] .scene-live-window{
  opacity:1;
  transform:scale(1);
  filter:saturate(.84) brightness(.87) contrast(1.025);
}

.live-exit .scene-live-transition{
  animation:live-pass .68s var(--ease) both;
}

@keyframes live-pass{
  0%{opacity:0;transform:scale(1.018);filter:saturate(.78) brightness(.82)}
  16%{opacity:.72}
  58%{opacity:.58;transform:scale(1.006)}
  100%{opacity:0;transform:scale(1);filter:saturate(.72) brightness(.76)}
}

@media(prefers-reduced-motion:reduce){
  .scene-live-hand,
  .scene-live-camera,
  .scene-live-window,
  .scene-live-transition{
    display:none!important;
  }
  body[data-chapter=live] .scene-live{
    opacity:1!important;
    transform:none!important;
  }
}



/* Pass B — MAKE / JOURNEY depth proof */
.featured-journey{
  view-transition-name:journey-work;
  overflow:visible;
}
.journey-entry{
  margin:16px 0 2px;
  min-height:52px;
  padding:11px 14px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  border-top:1px solid rgba(232,225,214,.12);
  border-bottom:1px solid rgba(232,225,214,.08);
  background:linear-gradient(90deg,rgba(232,225,214,.025),transparent);
  color:rgba(232,225,214,.78);
  transition:background .35s ease,color .35s ease;
}
.journey-entry:hover{
  background:linear-gradient(90deg,rgba(184,117,70,.1),rgba(232,225,214,.025));
  color:var(--bone);
}
.journey-entry span{
  font-family:var(--editorial);
  font-size:18px;
  letter-spacing:.04em;
}
.journey-entry b{
  font-family:var(--display);
  font-size:10px;
  font-weight:400;
  color:rgba(232,225,214,.52);
}
.journey-entry i{
  font-style:normal;
  font-size:14px;
}

body[data-view=depth]{
  --rail:248px;
  background:#0d1115;
}
body[data-view=depth] .shell{
  position:fixed;
  background:linear-gradient(180deg,rgba(8,11,14,.9) 0%,rgba(8,11,14,.5) 58%,rgba(8,11,14,0) 100%);
}
body[data-view=depth] .chapter-rail{
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  min-height:100vh;
  z-index:12;
  background:rgba(9,13,16,.96);
}
body[data-view=depth] .rail-nav a{
  min-height:126px;
}
body[data-view=depth] .rail-utility{
  margin-top:auto;
}
body[data-view=depth] .stage{
  background:
    linear-gradient(180deg,#131920 0,#10151a 38%,#0d1115 100%);
}
body[data-view=depth] .scene-media{
  top:0;
  left:0;
  right:0;
  bottom:auto;
  height:100vh;
}
body[data-view=depth] .scene-make{
  background-position:center 40%;
  filter:saturate(.72) brightness(.62) contrast(1.04);
}
body[data-view=depth] .scene-grade{
  background:
    linear-gradient(90deg,rgba(7,10,13,.82) 0%,rgba(7,10,13,.57) 27%,rgba(7,10,13,.15) 58%,rgba(7,10,13,.35) 100%),
    linear-gradient(180deg,rgba(7,10,13,.46) 0%,transparent 30%,rgba(7,10,13,.22) 67%,#0d1115 100%);
}
body[data-view=depth] #content{
  min-height:0;
  padding:0;
}
body[data-view=depth] .stage-signature{
  display:none;
}

.journey-depth{
  position:relative;
  z-index:4;
  color:var(--bone);
}
.journey-hero-panel{
  view-transition-name:journey-work;
  min-height:100vh;
  padding:178px 54px 64px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  isolation:isolate;
}
.journey-hero-panel:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,rgba(232,225,214,.14),transparent 82%);
}
.journey-hero-copy{
  max-width:650px;
}
.journey-kicker{
  margin:18px 0 0;
  font-family:var(--editorial);
  font-size:clamp(62px,8vw,122px);
  line-height:.78;
  letter-spacing:.04em;
  color:rgba(232,225,214,.92);
}
.journey-hero-copy h1{
  margin:18px 0 0;
  font-family:var(--display);
  font-size:clamp(30px,4vw,54px);
  font-weight:500;
  letter-spacing:.04em;
}
.journey-thesis{
  margin:25px 0 0;
  font-family:var(--display);
  font-size:22px;
  color:rgba(232,225,214,.78);
}
.journey-summary{
  max-width:500px;
  margin:16px 0 0;
  font-family:var(--display);
  font-size:14px;
  line-height:1.9;
  color:rgba(232,225,214,.62);
}
.journey-hero-copy .draft{
  margin-top:14px;
}
.journey-hero-state{
  position:absolute;
  right:46px;
  bottom:63px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:8px;
  letter-spacing:.14em;
  color:rgba(232,225,214,.36);
}
.journey-hero-state i{
  font-style:normal;
  color:rgba(184,117,70,.66);
}

.journey-story{
  padding:0 52px 72px;
  display:grid;
  grid-template-columns:185px minmax(0,1fr);
  gap:46px;
  background:
    linear-gradient(180deg,#0d1115 0%,#11171c 48%,#0d1115 100%);
}
.journey-map{
  position:sticky;
  top:126px;
  align-self:start;
  padding-top:72px;
}
.journey-map>p{
  margin:0 0 17px;
  font-size:8px;
  letter-spacing:.18em;
  color:rgba(150,154,154,.46);
}
.journey-map a{
  min-height:66px;
  padding:12px 0;
  display:grid;
  grid-template-columns:28px 1fr;
  grid-template-rows:auto auto;
  column-gap:11px;
  border-top:1px solid rgba(232,225,214,.09);
  color:rgba(232,225,214,.42);
}
.journey-map a:last-child{
  border-bottom:1px solid rgba(232,225,214,.09);
}
.journey-map a:hover{
  color:rgba(232,225,214,.82);
}
.journey-map span{
  grid-row:1/3;
  font-family:var(--editorial);
  font-size:12px;
  color:rgba(184,117,70,.7);
}
.journey-map b{
  font-family:var(--editorial);
  font-size:14px;
  font-weight:500;
  letter-spacing:.04em;
}
.journey-map em{
  font-style:normal;
  font-family:var(--display);
  font-size:10px;
  color:rgba(150,154,154,.58);
}

.journey-acts{
  min-width:0;
}
.journey-act{
  min-height:84vh;
  padding:86px 0;
  display:grid;
  grid-template-columns:minmax(300px,1.05fr) minmax(290px,.95fr);
  gap:42px;
  align-items:center;
  scroll-margin-top:110px;
  border-bottom:1px solid rgba(232,225,214,.08);
}
.memory-plate{
  min-height:520px;
  position:relative;
  display:block;
  overflow:hidden;
  border:1px solid rgba(232,225,214,.09);
  color:inherit;
  text-decoration:none;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:0 38px 80px rgba(0,0,0,.2);
  transition:transform .42s var(--ease),filter .36s ease,border-color .32s ease;
}
.act-control .memory-plate{
  background-image:
    linear-gradient(160deg,rgba(14,19,23,.05),rgba(7,10,13,.72)),
    url('https://i.ytimg.com/vi/72PxFN8IW74/maxresdefault.jpg');
}
.act-rupture .memory-plate{
  background-image:
    linear-gradient(160deg,rgba(14,19,23,.04),rgba(7,10,13,.72)),
    url('https://i.ytimg.com/vi/nmROYifrnEU/maxresdefault.jpg');
  filter:saturate(.78) brightness(.88);
}
.act-faith .memory-plate{
  background-image:
    linear-gradient(160deg,rgba(14,19,23,.04),rgba(7,10,13,.72)),
    url('https://i.ytimg.com/vi/lplHxU4iQ-Q/maxresdefault.jpg');
  filter:saturate(.72) brightness(.82);
}
.memory-plate:hover,
.memory-plate:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(232,225,214,.2);
  filter:saturate(.92) brightness(.94);
  outline:none;
}
.memory-plate:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(8,11,14,.08),rgba(8,11,14,.28) 54%,rgba(8,11,14,.75)),
    radial-gradient(circle at 54% 28%,rgba(184,117,70,.08),transparent 44%);
}
.memory-number{
  position:absolute;
  left:20px;
  top:14px;
  z-index:2;
  font-family:var(--editorial);
  font-size:88px;
  line-height:1;
  color:rgba(232,225,214,.1);
}
.memory-label{
  position:absolute;
  left:20px;
  bottom:16px;
  z-index:2;
  font-size:7px;
  letter-spacing:.12em;
  color:rgba(232,225,214,.34);
}
.act-copy{
  max-width:470px;
}
.act-index{
  margin:0 0 14px;
  font-size:9px;
  letter-spacing:.16em;
  color:rgba(184,117,70,.82);
}
.act-copy h2{
  margin:0;
  font-family:var(--display);
  font-size:clamp(34px,4vw,54px);
  font-weight:500;
}
.act-copy blockquote{
  margin:24px 0 21px;
  padding-left:18px;
  border-left:1px solid rgba(232,225,214,.26);
  font-family:var(--display);
  font-size:18px;
  line-height:1.7;
  color:rgba(232,225,214,.78);
}
.act-copy>p:not(.act-index){
  margin:0;
  font-family:var(--display);
  font-size:14px;
  line-height:1.95;
  color:rgba(232,225,214,.62);
}
.act-shift{
  display:block;
  margin-top:28px;
  padding-top:14px;
  border-top:1px solid rgba(232,225,214,.1);
  font-size:9px;
  line-height:1.7;
  letter-spacing:.04em;
  color:rgba(150,154,154,.68);
}

.journey-ending{
  min-height:66vh;
  padding:96px 54px 118px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(700px 480px at 18% 44%,rgba(184,117,70,.07),transparent 66%),
    #0c1014;
}
.journey-ending h2{
  max-width:620px;
  margin:12px 0 18px;
  font-family:var(--display);
  font-size:clamp(32px,4vw,54px);
  font-weight:500;
}
.journey-ending>p:not(.eyebrow){
  max-width:560px;
  margin:0;
  font-family:var(--display);
  font-size:14px;
  line-height:1.9;
  color:rgba(232,225,214,.58);
}
.journey-actions{
  max-width:560px;
  margin-top:34px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid rgba(232,225,214,.12);
  padding-top:17px;
}
.journey-actions a{
  min-height:44px;
  display:flex;
  align-items:center;
  font-size:10px;
  color:rgba(232,225,214,.68);
}
.journey-actions a:hover{color:var(--bone)}

::view-transition-group(journey-work){
  animation-duration:.72s;
  animation-timing-function:var(--ease);
}
::view-transition-old(journey-work),
::view-transition-new(journey-work){
  height:100%;
  object-fit:cover;
}

@media(max-width:1100px){
  body[data-view=depth]{--rail:220px}
  .journey-story{
    grid-template-columns:150px minmax(0,1fr);
    gap:30px;
    padding-inline:34px;
  }
  .journey-act{
    grid-template-columns:1fr;
    gap:28px;
  }
  .memory-plate{min-height:430px}
}

@media(max-width:900px){
  body[data-view=depth] .shell{
    position:relative;
    left:auto;
    transform:none;
    background:transparent;
  }
  body[data-view=depth] .chapter-rail{
    display:none;
  }
  body[data-view=depth] .scene-media{
    height:76vh;
  }
  .journey-hero-panel{
    min-height:76vh;
    padding:92px 20px 48px;
  }
  .journey-hero-state{
    position:static;
    margin-top:34px;
    font-size:7px;
  }
  .journey-story{
    display:block;
    padding:0 20px 56px;
  }
  .journey-map{
    position:relative;
    top:auto;
    padding:34px 0 16px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }
  .journey-map>p{
    grid-column:1/-1;
  }
  .journey-map a{
    min-height:70px;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    border-right:1px solid rgba(232,225,214,.08);
    padding:10px;
  }
  .journey-map a:last-child{border-bottom:0}
  .journey-map span{grid-row:auto}
  .journey-act{
    min-height:0;
    padding:58px 0 72px;
    display:block;
  }
  .memory-plate{
    min-height:48vh;
    margin-bottom:32px;
    background-size:cover;
  }
  .act-control .memory-plate,
  .act-rupture .memory-plate,
  .act-faith .memory-plate{background-position:center}
  .journey-ending{
    min-height:60vh;
    padding:78px 20px 92px;
  }
  .journey-actions{
    flex-direction:column;
    gap:4px;
  }
}

@media(prefers-reduced-motion:reduce){
  .featured-journey,
  .journey-hero-panel{
    view-transition-name:none!important;
  }
}


/* MAKE spatial workbench — prototype direction */
body[data-chapter=make][data-view=chapter] #content{
  overflow:hidden;
}
.make-workbench-copy{
  position:relative;
  z-index:8;
  max-width:360px;
}
.make-hint{
  margin:24px 0 0;
  font-size:8px;
  letter-spacing:.08em;
  color:rgba(150,154,154,.48);
}
.make-workbench{
  position:absolute;
  inset:98px 0 0;
  z-index:7;
  pointer-events:none;
}
.make-node{
  position:absolute;
  width:156px;
  min-height:44px;
  padding:0;
  display:block;
  border:0;
  background:none;
  color:var(--bone);
  text-align:left;
  font:inherit;
  cursor:pointer;
  pointer-events:auto;
  isolation:isolate;
}
.make-node:focus-visible{
  outline:0;
}
.make-anchor{
  position:absolute;
  left:0;
  top:19px;
  width:62px;
  height:24px;
  display:flex;
  align-items:center;
  gap:7px;
  pointer-events:none;
}
.make-anchor:before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  border:1px solid rgba(232,225,214,.62);
  background:rgba(13,17,21,.78);
  box-shadow:0 0 0 5px rgba(13,17,21,.28);
  transition:
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    transform .35s var(--ease);
}
.make-anchor i{
  display:block;
  width:24px;
  height:1px;
  background:rgba(232,225,214,.22);
  transform-origin:left center;
  transition:width .35s var(--ease),background .3s ease;
}
.make-anchor b{
  font-family:var(--editorial);
  font-size:10px;
  font-weight:500;
  color:rgba(232,225,214,.52);
}
.make-node-card{
  width:138px;
  min-height:52px;
  margin-left:57px;
  padding:10px 11px 9px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(232,225,214,.08);
  background:rgba(10,14,17,.56);
  backdrop-filter:blur(10px);
  box-shadow:0 16px 34px rgba(0,0,0,.12);
  transition:
    width .42s var(--ease),
    padding .42s var(--ease),
    background .36s ease,
    border-color .36s ease,
    box-shadow .42s ease,
    transform .42s var(--ease);
}
.make-node-card small{
  font-size:6px;
  line-height:1.3;
  letter-spacing:.11em;
  color:rgba(150,154,154,.48);
  white-space:nowrap;
}
.make-node-card strong{
  margin-top:5px;
  font-family:var(--editorial);
  font-size:17px;
  font-weight:500;
  line-height:1.08;
  letter-spacing:.02em;
  white-space:nowrap;
}
.make-node-card em{
  margin-top:2px;
  font-family:var(--display);
  font-size:9px;
  font-style:normal;
  color:rgba(232,225,214,.54);
}
.make-node-more{
  max-height:0;
  margin-top:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-4px);
  transition:
    max-height .46s var(--ease),
    margin-top .4s var(--ease),
    opacity .3s ease,
    transform .4s var(--ease);
}
.make-node-more q{
  display:block;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid rgba(232,225,214,.09);
  font-family:var(--display);
  font-size:11px;
  line-height:1.65;
  color:rgba(232,225,214,.7);
  quotes:none;
}
.make-status,
.make-action{
  display:block;
  margin-top:9px;
  font-size:7px;
  line-height:1.45;
  color:rgba(150,154,154,.5);
}
.make-action{
  color:rgba(232,225,214,.72);
}
.make-node:hover,
.make-node:focus-visible,
.make-node:focus-within{
  z-index:10;
}
.make-node:hover .make-anchor:before,
.make-node:focus-visible .make-anchor:before,
.make-node:focus-within .make-anchor:before{
  background:var(--bone);
  border-color:var(--bone);
  box-shadow:0 0 0 6px rgba(232,225,214,.07);
  transform:scale(1.04);
}
.make-node:hover .make-anchor i,
.make-node:focus-visible .make-anchor i,
.make-node:focus-within .make-anchor i{
  width:34px;
  background:rgba(232,225,214,.52);
}
.make-node:hover .make-node-card,
.make-node:focus-visible .make-node-card,
.make-node:focus-within .make-node-card{
  width:278px;
  padding:13px 15px 14px;
  border-color:rgba(232,225,214,.16);
  background:rgba(9,13,16,.86);
  box-shadow:0 28px 72px rgba(0,0,0,.3);
  transform:translateY(-4px);
}
.make-node:hover .make-node-more,
.make-node:focus-visible .make-node-more,
.make-node:focus-within .make-node-more{
  max-height:150px;
  margin-top:4px;
  opacity:1;
  transform:translateY(0);
}

/* spatial anchors are scene-specific prototype coordinates, not permanent taxonomy */
.make-node-journey{left:59%;top:25%}
.make-node-myths{left:38%;top:60%}
.make-node-slot-a{left:67%;top:66%}
.make-node-slot-b{left:49%;top:77%}

.make-node-myths .make-anchor:before{
  border-color:rgba(184,117,70,.72);
}
.make-node-slot{
  opacity:.48;
}
.make-node-slot:hover,
.make-node-slot:focus-visible{
  opacity:.78;
}
.make-node-slot .make-node-card{
  background:rgba(10,14,17,.38);
  border-style:dashed;
}

body[data-chapter=make][data-view=chapter] .scene-grade:after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(232,225,214,.08),transparent 13%);
  transition:opacity .32s ease,background .4s ease;
}
body[data-chapter=make][data-view=chapter][data-make-focus] .scene-make{
  filter:saturate(.72) brightness(.72) contrast(1.04);
}
body[data-chapter=make][data-view=chapter][data-make-focus] .scene-grade:after{
  opacity:1;
}
body[data-chapter=make][data-view=chapter][data-make-focus=journey] .scene-grade:after{
  background:radial-gradient(circle at 69% 34%,rgba(232,225,214,.11),transparent 14%);
}
body[data-chapter=make][data-view=chapter][data-make-focus=myths] .scene-grade:after{
  background:radial-gradient(circle at 47% 69%,rgba(184,117,70,.12),transparent 13%);
}
body[data-chapter=make][data-view=chapter][data-make-focus=slot-a] .scene-grade:after{
  background:radial-gradient(circle at 76% 73%,rgba(232,225,214,.07),transparent 12%);
}
body[data-chapter=make][data-view=chapter][data-make-focus=slot-b] .scene-grade:after{
  background:radial-gradient(circle at 57% 82%,rgba(232,225,214,.07),transparent 12%);
}

@media(max-width:1180px){
  .make-node-journey{left:54%;top:27%}
  .make-node-myths{left:34%;top:59%}
  .make-node-slot-a{left:62%;top:66%}
  .make-node-slot-b{left:45%;top:77%}
  .make-node:hover .make-node-card,
  .make-node:focus-visible .make-node-card,
  .make-node:focus-within .make-node-card{width:238px}
}

@media(max-width:900px){
  body[data-chapter=make][data-view=chapter] #content{
    overflow:visible;
    padding-bottom:42px;
  }
  .make-workbench-copy{
    max-width:310px;
  }
  .make-hint{
    display:none;
  }
  .make-workbench{
    position:relative;
    inset:auto;
    margin-top:48px;
    padding:0 20px 58px;
    display:grid;
    gap:12px;
    pointer-events:auto;
  }
  .make-node{
    position:relative;
    left:auto!important;
    top:auto!important;
    width:100%;
    min-height:0;
    opacity:1;
  }
  .make-anchor{
    left:0;
    top:16px;
  }
  .make-node-card{
    width:calc(100% - 56px);
    margin-left:56px;
    min-height:56px;
  }
  .make-node:hover .make-node-card,
  .make-node:focus-visible .make-node-card,
  .make-node:focus-within .make-node-card{
    width:calc(100% - 56px);
  }
  .make-node-more{
    max-height:120px;
    margin-top:4px;
    opacity:1;
    transform:none;
  }
  .make-node-card q{
    font-size:10px;
  }
  body[data-chapter=make][data-view=chapter] .scene-grade:after{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .make-node-card,
  .make-node-more,
  .make-anchor:before,
  .make-anchor i{
    transition:none!important;
  }
}


/* THINK depth — thought trail, not article template */
.thought-note{
  display:block;
  text-decoration:none;
  transition:
    border-color .32s ease,
    color .32s ease,
    transform .36s var(--ease),
    background .32s ease;
}
.thought-note:hover,
.thought-note:focus-visible{
  border-left-color:rgba(232,225,214,.72);
  background:linear-gradient(90deg,rgba(232,225,214,.025),transparent);
  transform:translateX(3px);
}
.featured-thought{
  view-transition-name:thought-thread;
}

body[data-view=depth][data-depth=thought]{
  --rail:248px;
  background:#0d1115;
}
body[data-view=depth][data-depth=thought] .scene-think{
  background-position:center 42%;
  filter:saturate(.58) brightness(.5) contrast(1.05);
}
body[data-view=depth][data-depth=thought] .scene-grade{
  background:
    linear-gradient(90deg,rgba(7,10,13,.84) 0%,rgba(7,10,13,.58) 28%,rgba(7,10,13,.24) 58%,rgba(7,10,13,.38) 100%),
    radial-gradient(circle at 69% 34%,rgba(104,120,113,.09),transparent 28%),
    linear-gradient(180deg,rgba(7,10,13,.5) 0%,transparent 28%,rgba(7,10,13,.28) 66%,#0d1115 100%);
}

.thought-depth{
  position:relative;
  z-index:4;
  color:var(--bone);
}
.thought-hero-panel{
  view-transition-name:thought-thread;
  min-height:100vh;
  padding:174px 54px 64px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  isolation:isolate;
}
.thought-hero-panel:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,rgba(232,225,214,.14),transparent 82%);
}
.thought-hero-copy{
  max-width:770px;
}
.thought-kicker{
  margin:16px 0 18px;
  font-family:var(--editorial);
  font-size:clamp(56px,7.2vw,108px);
  line-height:.8;
  letter-spacing:.045em;
  color:rgba(232,225,214,.9);
}
.thought-hero-copy h1{
  max-width:760px;
  margin:0;
  font-family:var(--display);
  font-size:clamp(28px,3.6vw,48px);
  line-height:1.45;
  font-weight:500;
}
.thought-lede{
  max-width:620px;
  margin:24px 0 0;
  font-family:var(--display);
  font-size:15px;
  line-height:1.95;
  color:rgba(232,225,214,.66);
}
.thought-hero-copy .draft{
  margin-top:15px;
}
.thought-thread-mark{
  position:absolute;
  right:44px;
  bottom:64px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:7px;
  letter-spacing:.15em;
  color:rgba(232,225,214,.34);
}
.thought-thread-mark i{
  display:block;
  width:22px;
  height:1px;
  background:rgba(104,120,113,.58);
}

.thought-trail{
  padding:0 52px 84px;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:58px;
  background:
    radial-gradient(720px 560px at 76% 30%,rgba(104,120,113,.055),transparent 66%),
    linear-gradient(180deg,#0d1115 0%,#11171c 50%,#0d1115 100%);
}
.thought-question-sticky{
  position:sticky;
  top:126px;
  align-self:start;
  padding-top:74px;
}
.thought-question-sticky>p{
  margin:0 0 18px;
  font-size:8px;
  letter-spacing:.18em;
  color:rgba(150,154,154,.46);
}
.thought-question-sticky blockquote{
  margin:0;
  padding:0 0 0 15px;
  border-left:1px solid rgba(104,120,113,.72);
  font-family:var(--display);
  font-size:17px;
  line-height:1.7;
  color:rgba(232,225,214,.74);
}
.thought-question-sticky span{
  display:block;
  margin:22px 0 0 16px;
  font-size:9px;
  line-height:1.75;
  color:rgba(150,154,154,.58);
}

.thought-steps{
  min-width:0;
}
.thought-step{
  min-height:86vh;
  padding:92px 0 96px;
  scroll-margin-top:112px;
  border-bottom:1px solid rgba(232,225,214,.08);
}
.thought-step-index{
  margin:0 0 17px;
  font-size:9px;
  letter-spacing:.16em;
  color:rgba(104,120,113,.92);
}
.thought-step h2{
  max-width:720px;
  margin:0 0 28px;
  font-family:var(--display);
  font-size:clamp(30px,4vw,52px);
  line-height:1.42;
  font-weight:500;
}
.thought-step>p:not(.thought-step-index):not(.thought-turn){
  max-width:670px;
  margin:0;
  font-family:var(--display);
  font-size:14px;
  line-height:2;
  color:rgba(232,225,214,.62);
}
.thought-scraps{
  max-width:760px;
  margin:42px 0 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.thought-scraps span{
  min-height:74px;
  padding:15px 16px;
  display:flex;
  align-items:flex-end;
  border-top:1px solid rgba(232,225,214,.13);
  background:
    linear-gradient(180deg,rgba(232,225,214,.02),transparent),
    rgba(9,13,16,.28);
  font-family:var(--display);
  font-size:11px;
  line-height:1.65;
  color:rgba(232,225,214,.54);
}
.thought-scraps span:nth-child(2),
.thought-scraps span:nth-child(3){
  transform:translateY(12px);
}
.thought-turn{
  max-width:720px;
  margin:52px 0 0;
  padding:18px 0 0;
  border-top:1px solid rgba(232,225,214,.12);
  font-family:var(--display);
  font-size:18px;
  line-height:1.75;
  color:rgba(232,225,214,.78);
}
.thought-turn strong{
  font-weight:500;
  color:var(--bone);
}

.thought-principle{
  max-width:650px;
  margin:46px 0 0;
  padding:25px 28px 27px;
  border:1px solid rgba(232,225,214,.1);
  background:
    linear-gradient(135deg,rgba(104,120,113,.09),rgba(232,225,214,.015)),
    rgba(9,13,16,.56);
}
.thought-principle small{
  display:block;
  font-size:7px;
  letter-spacing:.15em;
  color:rgba(150,154,154,.52);
}
.thought-principle strong{
  display:block;
  margin-top:12px;
  font-family:var(--display);
  font-size:clamp(22px,3vw,34px);
  line-height:1.55;
  font-weight:500;
  color:rgba(232,225,214,.82);
}

.thought-flow{
  max-width:780px;
  margin:44px 0 0;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:stretch;
  gap:8px;
}
.thought-flow>span{
  min-height:114px;
  padding:13px 12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-top:1px solid rgba(232,225,214,.14);
  border-bottom:1px solid rgba(232,225,214,.07);
  color:rgba(232,225,214,.7);
  font-family:var(--display);
  font-size:11px;
  line-height:1.45;
}
.thought-flow b{
  font-family:var(--editorial);
  font-size:12px;
  font-weight:500;
  color:rgba(104,120,113,.86);
}
.thought-flow em{
  font-style:normal;
  font-family:var(--body);
  font-size:7px;
  letter-spacing:.12em;
  color:rgba(150,154,154,.46);
}
.thought-flow>i{
  align-self:center;
  font-style:normal;
  font-size:10px;
  color:rgba(150,154,154,.35);
}

.thought-ending{
  min-height:64vh;
  padding:96px 54px 116px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(720px 520px at 16% 46%,rgba(104,120,113,.075),transparent 66%),
    #0c1014;
}
.thought-ending h2{
  max-width:680px;
  margin:12px 0 18px;
  font-family:var(--display);
  font-size:clamp(32px,4vw,54px);
  line-height:1.45;
  font-weight:500;
}
.thought-ending>p:not(.eyebrow){
  max-width:620px;
  margin:0;
  font-family:var(--display);
  font-size:14px;
  line-height:1.95;
  color:rgba(232,225,214,.6);
}
.thought-actions{
  max-width:620px;
  margin-top:34px;
  padding-top:17px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  border-top:1px solid rgba(232,225,214,.12);
}
.thought-actions a{
  min-height:44px;
  display:flex;
  align-items:center;
  font-size:10px;
  color:rgba(232,225,214,.68);
}
.thought-actions a:hover{color:var(--bone)}

::view-transition-group(thought-thread){
  animation-duration:.68s;
  animation-timing-function:var(--ease);
}
::view-transition-old(thought-thread),
::view-transition-new(thought-thread){
  height:100%;
  object-fit:cover;
}

@media(max-width:1100px){
  .thought-trail{
    grid-template-columns:180px minmax(0,1fr);
    gap:36px;
    padding-inline:34px;
  }
  .thought-flow{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .thought-flow>i{display:none}
}

@media(max-width:900px){
  body[data-view=depth][data-depth=thought] .scene-media{
    height:76vh;
  }
  .thought-hero-panel{
    min-height:76vh;
    padding:92px 20px 48px;
  }
  .thought-thread-mark{
    position:static;
    margin-top:34px;
  }
  .thought-trail{
    display:block;
    padding:0 20px 58px;
  }
  .thought-question-sticky{
    position:relative;
    top:auto;
    padding:36px 0 8px;
  }
  .thought-question-sticky blockquote{
    max-width:320px;
  }
  .thought-step{
    min-height:0;
    padding:62px 0 74px;
  }
  .thought-scraps{
    grid-template-columns:1fr;
  }
  .thought-scraps span:nth-child(2),
  .thought-scraps span:nth-child(3){
    transform:none;
  }
  .thought-flow{
    grid-template-columns:1fr 1fr;
  }
  .thought-ending{
    min-height:58vh;
    padding:78px 20px 90px;
  }
  .thought-actions{
    flex-direction:column;
    gap:4px;
  }
}

@media(max-width:560px){
  .thought-flow{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .featured-thought,
  .thought-hero-panel{
    view-transition-name:none!important;
  }
  .thought-note{
    transition:none!important;
  }
}


/* THINK feedback refinement — clearer entry, quieter teaser, calmer depth typography */
.featured-thought{
  margin-top:22px;
  max-width:430px;
  padding:14px 0 13px 18px;
  border-left:1px solid rgba(184,117,70,.62);
  border-top:1px solid rgba(232,225,214,.06);
  border-bottom:1px solid rgba(232,225,214,.06);
  background:linear-gradient(90deg,rgba(232,225,214,.018),transparent 78%);
}
.featured-thought p{
  margin:0;
}
.thought-entry-label{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font-size:9px!important;
  color:rgba(232,225,214,.72)!important;
}
.thought-entry-label b{
  font-weight:500;
  letter-spacing:.03em;
}
.thought-entry-label i{
  font-style:normal;
  font-size:13px;
  transition:transform .3s var(--ease);
}
.featured-thought:hover .thought-entry-label i,
.featured-thought:focus-visible .thought-entry-label i{
  transform:translateX(4px);
}
.quiet-question-fragment{
  width:250px;
  padding:12px 0 0;
  right:5%;
  bottom:64px;
  border:0;
  border-top:1px solid rgba(232,225,214,.08);
  background:none;
  backdrop-filter:none;
  box-shadow:none;
  opacity:.42;
  pointer-events:none;
}
.quiet-question-fragment>span{
  font-size:7px;
  letter-spacing:.12em;
  color:rgba(150,154,154,.46);
}
.quiet-question-fragment p{
  margin:8px 0 5px;
  font-size:14px;
  line-height:1.45;
  color:rgba(232,225,214,.62);
}
.quiet-question-fragment small{
  font-size:7px;
  color:rgba(150,154,154,.42);
}

/* Depth should feel like following a thought, not entering a poster/article hero. */
.thought-hero-panel{
  min-height:82vh;
  padding-top:158px;
}
.thought-kicker{
  font-size:clamp(42px,5.2vw,72px);
  margin:12px 0 18px;
}
.thought-hero-copy h1{
  max-width:690px;
  font-size:clamp(24px,2.8vw,36px);
  line-height:1.55;
}
.thought-lede{
  max-width:590px;
  font-size:14px;
}
.thought-trail{
  grid-template-columns:200px minmax(0,1fr);
  gap:46px;
}
.thought-question-sticky blockquote{
  font-size:15px;
}
.thought-step{
  min-height:68vh;
  padding:76px 0 82px;
}
.thought-step h2{
  max-width:650px;
  margin-bottom:24px;
  font-size:clamp(26px,3vw,38px);
  line-height:1.5;
}
.thought-step>p:not(.thought-step-index):not(.thought-turn){
  max-width:650px;
  font-size:14px;
}
.thought-turn{
  max-width:650px;
  margin-top:42px;
  font-size:16px;
}
.thought-principle{
  max-width:610px;
}
.thought-principle strong{
  font-size:clamp(20px,2.5vw,28px);
}
.thought-ending h2{
  font-size:clamp(28px,3.2vw,42px);
}

@media(max-width:900px){
  .quiet-question-fragment{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    max-width:300px;
    margin-top:46px;
    opacity:.5;
  }
  .thought-hero-panel{
    min-height:68vh;
  }
  .thought-step{
    padding:54px 0 64px;
  }
}


/* Three-part shell experiment — LIVE / MAKE / SHARE */
body[data-view=chapter] .top-chapters a{
  min-width:132px;
  padding-inline:24px;
}
body[data-view=chapter] .rail-nav{
  flex:1;
}
body[data-view=chapter] .rail-nav a{
  flex:1;
  min-height:156px;
}
body[data-view=chapter] .rail-copy b{
  font-size:21px;
}
body[data-view=chapter] .rail-preview{
  width:88px;
  height:62px;
}

/* SHARE is an outward continuation, not another deep content tier. */
.share-outlets{
  width:min(430px,40%);
  padding:22px 24px 18px;
}
.share-outlets h2{
  margin:8px 0 18px;
  font-family:var(--display);
  font-size:28px;
  line-height:1.4;
  font-weight:500;
}
.share-channel-list{
  margin:8px 0 16px;
  border-top:1px solid rgba(232,225,214,.12);
}
.share-channel{
  min-height:76px;
  padding:14px 0 12px;
  display:grid;
  grid-template-columns:82px 1fr;
  grid-template-rows:auto auto;
  column-gap:14px;
  border-bottom:1px solid rgba(232,225,214,.1);
}
.share-channel>span{
  grid-row:1/3;
  align-self:start;
  padding-top:2px;
  font-family:var(--editorial);
  font-size:15px;
  color:rgba(232,225,214,.72);
}
.share-channel strong{
  font-family:var(--display);
  font-size:14px;
  font-weight:500;
  color:rgba(232,225,214,.78);
}
.share-channel small{
  margin-top:5px;
  font-size:8px;
  letter-spacing:.03em;
  color:rgba(150,154,154,.52);
}
.share-outlets .pending{
  margin-top:4px;
}
.share-outlets .continuation{
  max-width:none;
  margin-top:18px;
}

@media(max-width:1180px){
  body[data-view=chapter] .top-chapters a{
    min-width:116px;
    padding-inline:18px;
  }
  body[data-view=chapter] .rail-preview{
    width:76px;
    height:56px;
  }
}

@media(max-width:900px){
  body[data-view=chapter] .top-chapters a{
    min-width:0;
    padding-inline:6px;
  }
  .share-outlets{
    width:100%;
    max-width:340px;
  }
}


/* SHARE outward-continuation experiment — channels as paths, not cards */
.share-presence-copy{
  max-width:430px;
  z-index:8;
}
.share-presence-copy .intro{
  max-width:390px;
}
.share-field{
  position:absolute;
  inset:118px 34px 54px 34%;
  z-index:7;
  pointer-events:none;
}
.share-origin{
  position:absolute;
  left:4%;
  top:12%;
  display:grid;
  grid-template-columns:auto 90px auto;
  align-items:center;
  gap:10px;
  font-size:7px;
  letter-spacing:.14em;
  color:rgba(150,154,154,.42);
}
.share-origin i{
  display:block;
  height:1px;
  background:linear-gradient(90deg,rgba(232,225,214,.12),rgba(232,225,214,.4),rgba(232,225,214,.06));
}
.share-origin b{
  font-weight:500;
  color:rgba(232,225,214,.52);
}
.share-route{
  position:absolute;
  left:12%;
  right:2%;
  min-height:108px;
  display:grid;
  grid-template-columns:1fr 118px;
  align-items:center;
  pointer-events:auto;
  cursor:default;
  outline:none;
}
.share-route-youtube{top:30%}
.share-route-instagram{top:57%}
.share-route:before{
  content:"";
  position:absolute;
  left:-34px;
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(232,225,214,.48);
  background:rgba(10,14,17,.62);
  box-shadow:0 0 0 7px rgba(10,14,17,.2);
  transition:
    background .3s ease,
    border-color .3s ease,
    transform .36s var(--ease),
    box-shadow .36s ease;
}
.share-route-line{
  position:absolute;
  left:-24px;
  right:0;
  top:50%;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(232,225,214,.36),rgba(232,225,214,.12) 52%,rgba(232,225,214,.04));
  transition:
    background .36s ease,
    transform .46s var(--ease),
    opacity .36s ease;
}
.share-route-copy{
  position:relative;
  z-index:2;
  width:245px;
  padding:12px 16px 11px 14px;
  background:rgba(9,13,16,.34);
  backdrop-filter:blur(6px);
  transition:
    transform .42s var(--ease),
    background .36s ease,
    width .42s var(--ease);
}
.share-route-copy small{
  display:block;
  font-size:6px;
  letter-spacing:.13em;
  color:rgba(150,154,154,.44);
}
.share-route-copy strong{
  display:block;
  margin-top:5px;
  font-family:var(--editorial);
  font-size:24px;
  line-height:1;
  font-weight:500;
  color:rgba(232,225,214,.8);
}
.share-route-copy em{
  display:block;
  margin-top:3px;
  font-family:var(--display);
  font-size:10px;
  font-style:normal;
  color:rgba(232,225,214,.5);
}
.share-route-copy>span{
  display:block;
  max-height:0;
  margin-top:0;
  overflow:hidden;
  opacity:0;
  font-size:8px;
  color:rgba(232,225,214,.56);
  transition:
    max-height .4s var(--ease),
    margin-top .35s var(--ease),
    opacity .3s ease;
}
.share-route-end{
  position:relative;
  z-index:2;
  justify-self:end;
  padding-left:18px;
  border-left:1px solid rgba(232,225,214,.08);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  opacity:.42;
  transition:opacity .34s ease,transform .4s var(--ease);
}
.share-route-end span{
  font-size:6px;
  letter-spacing:.12em;
  color:rgba(150,154,154,.52);
}
.share-route-end b{
  font-family:var(--editorial);
  font-size:13px;
  font-weight:500;
  color:rgba(232,225,214,.52);
}
.share-route:hover:before,
.share-route:focus-visible:before,
.share-route:focus-within:before{
  background:var(--bone);
  border-color:var(--bone);
  transform:scale(1.08);
  box-shadow:0 0 0 7px rgba(232,225,214,.05);
}
.share-route:hover .share-route-line,
.share-route:focus-visible .share-route-line,
.share-route:focus-within .share-route-line{
  background:linear-gradient(90deg,rgba(232,225,214,.72),rgba(232,225,214,.24) 54%,rgba(232,225,214,.08));
  transform:scaleX(1.02);
}
.share-route:hover .share-route-copy,
.share-route:focus-visible .share-route-copy,
.share-route:focus-within .share-route-copy{
  width:292px;
  transform:translateX(4px);
  background:rgba(9,13,16,.7);
}
.share-route:hover .share-route-copy>span,
.share-route:focus-visible .share-route-copy>span,
.share-route:focus-within .share-route-copy>span{
  max-height:40px;
  margin-top:8px;
  opacity:1;
}
.share-route:hover .share-route-end,
.share-route:focus-visible .share-route-end,
.share-route:focus-within .share-route-end{
  opacity:.72;
  transform:translateX(3px);
}

.share-return{
  position:absolute;
  left:12%;
  bottom:0;
  width:min(360px,70%);
  padding-top:13px;
  border-top:1px solid rgba(232,225,214,.09);
}
.share-return>span{
  display:block;
  font-size:7px;
  letter-spacing:.09em;
  color:rgba(150,154,154,.46);
}
.share-return .continuation{
  margin-top:8px;
  max-width:none;
}
.share-return .continuation b{
  font-weight:500;
}

/* SHARE should visually open toward the outside edge rather than become a social dashboard. */
body[data-chapter=share][data-view=chapter] .scene-share{
  background-position:center 46%;
  filter:saturate(.82) brightness(.83) contrast(1.02);
  transform:scale(1.006);
}
body[data-chapter=share][data-view=chapter] .scene-grade{
  background:
    linear-gradient(90deg,rgba(8,11,14,.72) 0%,rgba(8,11,14,.44) 27%,rgba(8,11,14,.12) 54%,rgba(8,11,14,.04) 78%,rgba(8,11,14,.08) 100%),
    radial-gradient(circle at 82% 35%,rgba(104,120,113,.08),transparent 34%),
    linear-gradient(180deg,rgba(8,11,14,.24),transparent 38%,rgba(8,11,14,.43) 100%);
}
body[data-chapter=share][data-view=chapter] .scene-grade:after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .36s ease,background .44s ease;
}
body[data-chapter=share][data-view=chapter][data-share-focus=youtube] .scene-grade:after{
  opacity:1;
  background:
    radial-gradient(circle at 77% 40%,rgba(232,225,214,.09),transparent 18%),
    linear-gradient(90deg,transparent 42%,rgba(232,225,214,.025) 76%,transparent);
}
body[data-chapter=share][data-view=chapter][data-share-focus=instagram] .scene-grade:after{
  opacity:1;
  background:
    radial-gradient(circle at 73% 67%,rgba(184,117,70,.09),transparent 17%),
    linear-gradient(90deg,transparent 42%,rgba(184,117,70,.02) 76%,transparent);
}
body[data-chapter=share][data-view=chapter][data-share-focus] .share-presence-copy{
  opacity:.84;
  transition:opacity .32s ease;
}

@media(max-width:1180px){
  .share-field{
    inset-inline-start:30%;
  }
  .share-route-copy{
    width:215px;
  }
  .share-route:hover .share-route-copy,
  .share-route:focus-visible .share-route-copy,
  .share-route:focus-within .share-route-copy{
    width:252px;
  }
}

@media(max-width:900px){
  .share-field{
    position:relative;
    inset:auto;
    margin-top:46px;
    padding:0 20px 64px;
    display:grid;
    gap:18px;
    pointer-events:auto;
  }
  .share-origin{
    position:relative;
    left:auto;
    top:auto;
    grid-template-columns:auto 1fr auto;
    margin-bottom:4px;
  }
  .share-route{
    position:relative;
    left:auto;
    right:auto;
    top:auto!important;
    min-height:96px;
    grid-template-columns:1fr 90px;
    padding-left:24px;
  }
  .share-route:before{
    left:0;
  }
  .share-route-line{
    left:10px;
  }
  .share-route-copy{
    width:auto;
    min-width:0;
  }
  .share-route:hover .share-route-copy,
  .share-route:focus-visible .share-route-copy,
  .share-route:focus-within .share-route-copy{
    width:auto;
  }
  .share-route-copy>span{
    max-height:40px;
    margin-top:8px;
    opacity:1;
  }
  .share-return{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    margin-top:8px;
  }
}

@media(prefers-reduced-motion:reduce){
  .share-route:before,
  .share-route-line,
  .share-route-copy,
  .share-route-copy>span,
  .share-route-end,
  .share-presence-copy,
  body[data-chapter=share][data-view=chapter] .scene-grade:after{
    transition:none!important;
  }
}


/* SHARE v2 — transmission scene: work first, platforms second */
.share-transmission-copy{
  max-width:410px;
  z-index:9;
}
.share-transmission-copy .intro{
  max-width:370px;
}

.transmission-field{
  position:absolute;
  inset:102px 18px 38px 31%;
  z-index:7;
  overflow:hidden;
  pointer-events:none;
}
.transmission-field:before{
  content:"";
  position:absolute;
  right:-6%;
  top:2%;
  bottom:2%;
  width:28%;
  background:
    linear-gradient(90deg,transparent,rgba(232,225,214,.025) 42%,rgba(232,225,214,.08)),
    radial-gradient(circle at 100% 42%,rgba(232,225,214,.09),transparent 46%);
  opacity:.72;
  pointer-events:none;
}
.transmission-field:after{
  content:"";
  position:absolute;
  right:6%;
  top:9%;
  bottom:13%;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(232,225,214,.12) 20%,rgba(232,225,214,.26) 52%,rgba(232,225,214,.08) 82%,transparent);
  opacity:.7;
}
.transmission-path{
  position:absolute;
  left:2%;
  right:7%;
  top:47%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  opacity:.5;
  pointer-events:none;
}
.transmission-path span{
  font-size:6px;
  letter-spacing:.16em;
  color:rgba(150,154,154,.5);
}
.transmission-path i{
  display:block;
  height:1px;
  position:relative;
  background:linear-gradient(90deg,rgba(232,225,214,.1),rgba(232,225,214,.3) 42%,rgba(232,225,214,.05));
}
.transmission-path i:after{
  content:"";
  position:absolute;
  right:0;
  top:-2px;
  width:5px;
  height:5px;
  border-top:1px solid rgba(232,225,214,.34);
  border-right:1px solid rgba(232,225,214,.34);
  transform:rotate(45deg);
}

.work-piece{
  position:absolute;
  pointer-events:auto;
  cursor:default;
  outline:none;
  transform-origin:center;
  transition:
    transform .48s var(--ease),
    opacity .34s ease,
    filter .34s ease;
}
.work-piece:before{
  content:"";
  position:absolute;
  inset:-11px;
  border:1px solid rgba(232,225,214,.07);
  opacity:.6;
  transition:border-color .34s ease,opacity .34s ease,transform .42s var(--ease);
}
.piece-face{
  position:relative;
  min-width:230px;
  min-height:128px;
  padding:18px 18px 15px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    linear-gradient(160deg,rgba(232,225,214,.035),rgba(232,225,214,0) 44%),
    rgba(9,13,16,.64);
  border-top:1px solid rgba(232,225,214,.16);
  border-bottom:1px solid rgba(232,225,214,.08);
  backdrop-filter:blur(8px);
  box-shadow:0 26px 56px rgba(0,0,0,.18);
}
.piece-face small{
  position:absolute;
  left:18px;
  top:15px;
  font-size:6px;
  letter-spacing:.14em;
  color:rgba(150,154,154,.5);
}
.piece-face strong{
  font-family:var(--editorial);
  font-size:29px;
  line-height:1;
  font-weight:500;
  color:rgba(232,225,214,.88);
}
.piece-face em{
  margin-top:5px;
  font-family:var(--display);
  font-size:12px;
  font-style:normal;
  color:rgba(232,225,214,.58);
}
.piece-face>span{
  margin-top:12px;
  font-size:7px;
  letter-spacing:.05em;
  color:rgba(150,154,154,.48);
}
.piece-destination{
  position:absolute;
  left:calc(100% + 18px);
  top:50%;
  min-width:112px;
  transform:translateY(-50%) translateX(-10px);
  opacity:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  transition:
    opacity .3s ease,
    transform .42s var(--ease);
}
.piece-destination:before{
  content:"";
  position:absolute;
  right:calc(100% + 7px);
  top:50%;
  width:18px;
  height:1px;
  background:rgba(232,225,214,.2);
}
.piece-destination span{
  font-size:6px;
  letter-spacing:.1em;
  color:rgba(150,154,154,.52);
}
.piece-destination b{
  font-family:var(--editorial);
  font-size:14px;
  font-weight:500;
  color:rgba(232,225,214,.72);
}

.piece-journey{
  left:12%;
  top:16%;
  transform:rotate(-1.3deg);
}
.piece-myths{
  left:36%;
  top:44%;
  transform:rotate(.9deg) scale(.92);
}
.piece-between{
  left:60%;
  top:66%;
  transform:rotate(-1deg) scale(.82);
}
.piece-myths .piece-face{
  min-width:210px;
  min-height:112px;
}
.piece-myths .piece-face strong{
  font-family:var(--display);
  font-size:22px;
}
.piece-between .piece-face{
  min-width:190px;
  min-height:96px;
}
.piece-between .piece-face strong{
  font-family:var(--display);
  font-size:20px;
}

.work-piece:hover,
.work-piece:focus-visible,
.work-piece:focus-within{
  z-index:12;
  filter:none;
}
.work-piece:hover:before,
.work-piece:focus-visible:before,
.work-piece:focus-within:before{
  border-color:rgba(232,225,214,.18);
  opacity:1;
  transform:scale(1.02);
}
.piece-journey:hover,
.piece-journey:focus-visible,
.piece-journey:focus-within{
  transform:translate(8px,-5px) rotate(-.5deg) scale(1.04);
}
.piece-myths:hover,
.piece-myths:focus-visible,
.piece-myths:focus-within{
  transform:translate(8px,-5px) rotate(.3deg) scale(.98);
}
.piece-between:hover,
.piece-between:focus-visible,
.piece-between:focus-within{
  transform:translate(8px,-4px) rotate(-.2deg) scale(.88);
}
.work-piece:hover .piece-destination,
.work-piece:focus-visible .piece-destination,
.work-piece:focus-within .piece-destination{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

.outside-edge{
  position:absolute;
  right:1.5%;
  top:18%;
  writing-mode:vertical-rl;
  display:flex;
  gap:12px;
  align-items:center;
  opacity:.36;
}
.outside-edge span{
  font-size:6px;
  letter-spacing:.15em;
  color:rgba(150,154,154,.46);
}
.outside-edge b{
  font-family:var(--display);
  font-size:10px;
  font-weight:400;
  color:rgba(232,225,214,.42);
}

.transmission-return{
  position:absolute;
  left:13%;
  bottom:0;
  width:260px;
}
.transmission-return .continuation{
  justify-content:space-between;
}

/* When one piece is touched, the scene behaves like a transmission rather than a menu. */
body[data-chapter=share][data-view=chapter][data-share-focus] .work-piece{
  opacity:.34;
  filter:saturate(.72) brightness(.82);
}
body[data-chapter=share][data-view=chapter][data-share-focus=journey] .piece-journey,
body[data-chapter=share][data-view=chapter][data-share-focus=myths] .piece-myths,
body[data-chapter=share][data-view=chapter][data-share-focus=between] .piece-between{
  opacity:1;
  filter:none;
}
body[data-chapter=share][data-view=chapter][data-share-focus] .scene-share{
  filter:saturate(.72) brightness(.73) contrast(1.03);
}
body[data-chapter=share][data-view=chapter][data-share-focus=journey] .scene-grade:after{
  opacity:1;
  background:
    radial-gradient(circle at 52% 27%,rgba(232,225,214,.08),transparent 19%),
    linear-gradient(90deg,transparent 48%,rgba(232,225,214,.025) 77%,transparent);
}
body[data-chapter=share][data-view=chapter][data-share-focus=myths] .scene-grade:after{
  opacity:1;
  background:
    radial-gradient(circle at 66% 51%,rgba(104,120,113,.09),transparent 18%),
    linear-gradient(90deg,transparent 48%,rgba(104,120,113,.025) 77%,transparent);
}
body[data-chapter=share][data-view=chapter][data-share-focus=between] .scene-grade:after{
  opacity:1;
  background:
    radial-gradient(circle at 80% 72%,rgba(184,117,70,.09),transparent 16%),
    linear-gradient(90deg,transparent 48%,rgba(184,117,70,.022) 77%,transparent);
}

@media(max-width:1180px){
  .transmission-field{
    inset-inline-start:27%;
  }
  .piece-journey{left:8%}
  .piece-myths{left:32%}
  .piece-between{left:57%}
}

@media(max-width:900px){
  .transmission-field{
    position:relative;
    inset:auto;
    margin-top:44px;
    padding:22px 20px 70px;
    overflow:visible;
    display:grid;
    gap:18px;
    pointer-events:auto;
  }
  .transmission-field:before,
  .transmission-field:after{
    display:none;
  }
  .transmission-path{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    margin-bottom:8px;
  }
  .work-piece{
    position:relative;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    width:calc(100% - 46px);
  }
  .piece-face,
  .piece-myths .piece-face,
  .piece-between .piece-face{
    min-width:0;
    min-height:104px;
  }
  .piece-destination{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    opacity:.58;
    margin-top:8px;
    padding-left:16px;
  }
  .piece-destination:before{
    right:auto;
    left:0;
    top:8px;
    width:9px;
  }
  .outside-edge{
    display:none;
  }
  .transmission-return{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    margin-top:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .work-piece,
  .work-piece:before,
  .piece-destination{
    transition:none!important;
  }
}


/* Pass C — collaborate utility + mobile validation */
.global-collab{
  flex:0 0 auto;
  padding-left:12px;
  border-left:1px solid rgba(232,225,214,.08);
  font-size:8px;
  letter-spacing:.06em;
  color:rgba(232,225,214,.54);
  white-space:nowrap;
}
.global-collab:hover,
.global-collab[aria-current]{
  color:rgba(232,225,214,.88);
}
.rail-utility{
  transition:background .3s ease,color .3s ease;
}
.rail-utility:hover,
.rail-utility[aria-current]{
  background:rgba(232,225,214,.025);
  color:rgba(232,225,214,.84);
}
.rail-utility[aria-current]{
  border-left:1px solid rgba(232,225,214,.5);
}

/* Utility route stays inside the Fason world but prioritises speed and clarity. */
body[data-view=utility]{
  background:#0d1115;
}
body[data-view=utility] .stage{
  overflow:visible;
  background:#0d1115;
}
body[data-view=utility] .scene-media{
  height:100vh;
  bottom:auto;
  opacity:.72;
}
body[data-chapter=collaborate] .scene-share{
  opacity:1;
  transform:scale(1);
  filter:saturate(.58) brightness(.42) contrast(1.06);
}
body[data-chapter=collaborate] .scene-grade{
  background:
    linear-gradient(90deg,rgba(7,10,13,.92) 0%,rgba(7,10,13,.82) 34%,rgba(7,10,13,.64) 64%,rgba(7,10,13,.72) 100%),
    linear-gradient(180deg,rgba(7,10,13,.28) 0%,rgba(7,10,13,.18) 38%,#0d1115 100%);
}
body[data-view=utility] .stage-signature{
  display:none;
}
body[data-view=utility] #content{
  min-height:100vh;
  padding:142px 54px 120px;
}
body[data-view=utility] .chapter-rail{
  background:rgba(9,13,16,.985);
}
body[data-view=utility] .rail-nav a{
  opacity:.46;
}
body[data-view=utility] .rail-utility{
  color:rgba(232,225,214,.88);
}

.collab-page{
  position:relative;
  z-index:5;
  width:min(100%,980px);
  margin:0 auto;
}
.collab-hero{
  min-height:64vh;
  padding:36px 0 72px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-bottom:1px solid rgba(232,225,214,.12);
}
.collab-hero h1{
  max-width:790px;
  margin:13px 0 18px;
  font-family:var(--display);
  font-size:clamp(30px,4vw,52px);
  line-height:1.38;
  font-weight:500;
}
.collab-en{
  max-width:690px;
  margin:0;
  font-family:var(--editorial);
  font-size:17px;
  line-height:1.65;
  color:rgba(232,225,214,.66);
}
.collab-positioning{
  max-width:680px;
  margin:32px 0 0;
  font-family:var(--display);
  font-size:14px;
  line-height:1.95;
  color:rgba(232,225,214,.68);
}
.collab-en-small{
  margin-top:9px;
  font-size:13px;
  color:rgba(150,154,154,.56);
}

.collab-grid,
.collab-proof,
.collab-ways,
.collab-principles,
.collab-context{
  padding:70px 0;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:52px;
  border-bottom:1px solid rgba(232,225,214,.1);
}
.collab-section-head{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:14px;
  align-items:start;
}
.collab-section-head>span{
  padding-top:3px;
  font-family:var(--editorial);
  font-size:12px;
  color:rgba(184,117,70,.76);
}
.collab-section-head h2{
  margin:7px 0 0;
  font-family:var(--display);
  font-size:clamp(22px,2.6vw,34px);
  line-height:1.5;
  font-weight:500;
}
.collab-copy p{
  max-width:590px;
  margin:0;
  font-family:var(--display);
  font-size:14px;
  line-height:1.95;
  color:rgba(232,225,214,.66);
}
.collab-copy .collab-en{
  margin-top:15px;
  font-family:var(--editorial);
  font-size:13px;
  line-height:1.8;
  color:rgba(150,154,154,.54);
}

.collab-proof-list{
  display:grid;
  gap:10px;
}
.collab-proof-list a{
  min-height:138px;
  padding:19px 20px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto 1fr;
  column-gap:20px;
  border-top:1px solid rgba(232,225,214,.14);
  border-bottom:1px solid rgba(232,225,214,.06);
  background:rgba(232,225,214,.014);
  transition:background .3s ease,transform .36s var(--ease);
}
.collab-proof-list a:hover{
  background:rgba(232,225,214,.03);
  transform:translateX(3px);
}
.collab-proof-list small{
  grid-column:1/-1;
  font-size:7px;
  letter-spacing:.14em;
  color:rgba(150,154,154,.46);
}
.collab-proof-list strong{
  margin-top:8px;
  font-family:var(--editorial);
  font-size:23px;
  font-weight:500;
}
.collab-proof-list> a:nth-child(2) strong{
  font-family:var(--display);
  font-size:20px;
}
.collab-proof-list span{
  max-width:430px;
  margin-top:9px;
  font-family:var(--display);
  font-size:11px;
  line-height:1.7;
  color:rgba(232,225,214,.56);
}
.collab-proof-list b{
  grid-column:2;
  grid-row:2/4;
  align-self:end;
  font-size:8px;
  font-weight:500;
  color:rgba(232,225,214,.56);
}

.collab-way-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:rgba(232,225,214,.08);
}
.collab-way-list>div{
  min-height:112px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:#10151a;
}
.collab-way-list strong{
  font-family:var(--editorial);
  font-size:18px;
  font-weight:500;
  color:rgba(232,225,214,.8);
}
.collab-way-list span{
  font-size:9px;
  line-height:1.5;
  color:rgba(150,154,154,.54);
}

.collab-principle-list{
  display:grid;
  gap:0;
}
.collab-principle-list p{
  margin:0;
  padding:18px 0;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:14px;
  border-top:1px solid rgba(232,225,214,.1);
  font-size:11px;
  line-height:1.75;
  color:rgba(232,225,214,.6);
}
.collab-principle-list p:last-child{
  border-bottom:1px solid rgba(232,225,214,.1);
}
.collab-principle-list b{
  font-family:var(--editorial);
  font-size:12px;
  font-weight:500;
  color:rgba(184,117,70,.72);
}
.collab-principle-list strong{
  font-weight:500;
  color:rgba(232,225,214,.82);
}

.collab-context-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.collab-context-row>div{
  min-height:128px;
  padding:18px 0;
  display:flex;
  flex-direction:column;
  border-top:1px solid rgba(232,225,214,.12);
  border-bottom:1px solid rgba(232,225,214,.08);
}
.collab-context-row small{
  font-size:7px;
  letter-spacing:.14em;
  color:rgba(150,154,154,.48);
}
.collab-context-row strong{
  margin-top:8px;
  font-family:var(--editorial);
  font-size:21px;
  font-weight:500;
}
.collab-context-row span{
  margin-top:auto;
  font-size:9px;
  color:rgba(150,154,154,.54);
}
.collab-note{
  grid-column:2;
  margin:18px 0 0;
  font-size:8px;
  line-height:1.7;
  color:rgba(150,154,154,.46);
}

.collab-contact{
  min-height:58vh;
  padding:86px 0 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.collab-contact h2{
  margin:11px 0 17px;
  font-family:var(--display);
  font-size:clamp(27px,3.6vw,45px);
  line-height:1.45;
  font-weight:500;
}
.collab-contact>p:not(.eyebrow){
  max-width:610px;
  margin:0;
  font-family:var(--display);
  font-size:13px;
  line-height:1.85;
  color:rgba(232,225,214,.62);
}
.collab-contact .collab-en{
  margin-top:8px;
  font-family:var(--editorial);
  font-size:12px;
  color:rgba(150,154,154,.5);
}
.collab-contact-pending{
  width:min(100%,560px);
  min-height:64px;
  margin-top:30px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px dashed rgba(232,225,214,.14);
  color:rgba(150,154,154,.48);
}
.collab-contact-pending span{
  font-size:7px;
  letter-spacing:.14em;
}
.collab-contact-pending b{
  font-family:var(--editorial);
  font-size:13px;
  font-weight:500;
}
.collab-back{
  width:min(100%,560px);
  min-height:48px;
  margin-top:14px;
  padding:0 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(232,225,214,.1);
  font-size:10px;
  color:rgba(232,225,214,.64);
}

/* Mobile validation: navigation remains direct; utility is reachable without the hidden rail. */
@media(max-width:900px){
  .shell-utility{
    gap:10px;
    align-items:center;
  }
  .shell-utility .current-state{
    max-width:126px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8px;
  }
  .global-collab{
    min-height:32px;
    padding:8px 0 8px 10px;
    display:flex;
    align-items:center;
  }

  body[data-view=utility] .shell{
    position:relative;
  }
  body[data-view=utility] .scene-media{
    height:66vh;
  }
  body[data-view=utility] #content{
    padding:52px 20px 82px;
  }
  .collab-page{
    width:100%;
  }
  .collab-hero{
    min-height:62vh;
    padding:28px 0 52px;
  }
  .collab-hero h1{
    font-size:clamp(28px,8.5vw,38px);
  }
  .collab-en{
    font-size:15px;
  }
  .collab-positioning{
    margin-top:26px;
  }
  .collab-grid,
  .collab-proof,
  .collab-ways,
  .collab-principles,
  .collab-context{
    padding:54px 0;
    display:block;
  }
  .collab-section-head{
    margin-bottom:30px;
  }
  .collab-section-head h2{
    font-size:25px;
  }
  .collab-way-list{
    grid-template-columns:1fr;
  }
  .collab-way-list>div{
    min-height:94px;
  }
  .collab-context-row{
    grid-template-columns:1fr;
    gap:0;
  }
  .collab-note{
    margin-top:18px;
  }
  .collab-contact{
    min-height:56vh;
    padding:66px 0 24px;
  }

  /* Keep chapter-first screens readable on narrow viewports. */
  body[data-view=chapter] .chapter-copy{
    max-width:360px;
  }
  body[data-view=chapter] .chapter-word{
    font-size:clamp(60px,18vw,88px);
  }
  body[data-chapter=make][data-view=chapter] .scene-make,
  body[data-chapter=share][data-view=chapter] .scene-share{
    background-position:58% center;
  }
}

@media(max-width:560px){
  .identity strong{
    font-size:30px;
  }
  .shell{
    padding-inline:16px;
  }
  .shell-utility .current-state{
    display:none;
  }
  .global-collab{
    border-left:0;
    padding-left:0;
  }
  .top-chapters a{
    min-height:48px;
  }
  .top-chapters b{
    font-size:11px;
  }
  body[data-view=utility] #content{
    padding-inline:16px;
  }
  .collab-proof-list a{
    grid-template-columns:1fr;
  }
  .collab-proof-list b{
    grid-column:1;
    grid-row:auto;
    margin-top:16px;
  }
  .collab-contact-pending{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
}


/* Collaborate tone pass — show, don't tell */
.collab-quiet{
  width:min(100%,900px);
}
.collab-hero-quiet{
  min-height:48vh;
  padding-bottom:58px;
}
.collab-hero-quiet h1{
  margin-bottom:20px;
  font-family:var(--editorial);
  font-size:clamp(52px,7vw,88px);
  line-height:.95;
  font-weight:500;
  letter-spacing:.01em;
}
.collab-facts{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin:0 0 24px;
  border-top:1px solid rgba(232,225,214,.12);
  border-bottom:1px solid rgba(232,225,214,.08);
}
.collab-facts span{
  min-height:38px;
  padding:11px 15px 10px 0;
  margin-right:15px;
  font-size:8px;
  letter-spacing:.07em;
  color:rgba(232,225,214,.58);
}
.collab-facts span:not(:last-child){
  border-right:1px solid rgba(232,225,214,.08);
  padding-right:15px;
}
.collab-hero-quiet .collab-positioning{
  max-width:620px;
  margin-top:0;
  font-size:13px;
}
.collab-hero-quiet .collab-en-small{
  margin-top:7px;
  font-size:11px;
}

.collab-section-quiet{
  padding:58px 0;
  display:block;
}
.collab-section-title{
  margin-bottom:28px;
  display:flex;
  align-items:baseline;
  gap:14px;
}
.collab-section-title>span{
  font-family:var(--editorial);
  font-size:11px;
  color:rgba(184,117,70,.68);
}
.collab-section-title h2{
  margin:0;
  font-family:var(--display);
  font-size:17px;
  line-height:1.4;
  font-weight:500;
  color:rgba(232,225,214,.72);
}
.collab-section-quiet .collab-proof-list{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.collab-section-quiet .collab-proof-list a{
  min-height:150px;
}
.collab-section-quiet .collab-proof-list strong{
  font-size:21px;
}
.collab-section-quiet .collab-proof-list span{
  max-width:360px;
  font-size:10px;
}
.collab-section-quiet .collab-proof-list b{
  font-size:7px;
}

.collab-way-list-quiet{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
}
.collab-way-list-quiet>div{
  min-height:96px;
}
.collab-way-list-quiet strong{
  font-size:16px;
}
.collab-way-list-quiet span{
  font-size:8px;
}

.collab-contact-quiet{
  min-height:42vh;
  padding-top:70px;
}
.collab-contact-quiet h2{
  margin:8px 0 12px;
  font-family:var(--editorial);
  font-size:clamp(28px,3vw,40px);
  line-height:1.25;
}
.collab-contact-quiet>p:not(.eyebrow){
  font-size:12px;
  line-height:1.7;
}
.collab-contact-quiet .collab-contact-pending{
  margin-top:24px;
}

@media(max-width:900px){
  .collab-hero-quiet{
    min-height:46vh;
    padding-bottom:44px;
  }
  .collab-hero-quiet h1{
    font-size:clamp(48px,15vw,72px);
  }
  .collab-facts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .collab-facts span{
    margin:0;
    padding:10px 10px 10px 0;
    border-right:0!important;
  }
  .collab-facts span:nth-child(odd){
    border-right:1px solid rgba(232,225,214,.08)!important;
  }
  .collab-facts span:nth-child(n+3){
    border-top:1px solid rgba(232,225,214,.07);
  }
  .collab-section-quiet{
    padding:46px 0;
  }
  .collab-section-quiet .collab-proof-list{
    grid-template-columns:1fr;
  }
  .collab-way-list-quiet{
    grid-template-columns:1fr;
  }
  .collab-contact-quiet{
    min-height:38vh;
    padding-top:58px;
  }
}


/* Collaborate discovery pass — visible utility, not a fourth chapter */
.shell-collab{
  align-self:stretch;
  position:relative;
  min-height:98px;
  padding:20px 25px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  border-left:1px solid rgba(232,225,214,.12);
  border-bottom:1px solid rgba(232,225,214,.1);
  background:rgba(11,15,18,.8);
  backdrop-filter:blur(12px);
  color:rgba(232,225,214,.68);
  transition:
    background .32s ease,
    color .32s ease;
}
.shell-collab:before{
  content:"";
  position:absolute;
  left:0;
  top:20px;
  bottom:20px;
  width:1px;
  background:rgba(184,117,70,.55);
  transform:scaleY(.42);
  transform-origin:center;
  transition:transform .34s var(--ease),background .3s ease;
}
.shell-collab-kicker{
  font-size:7px;
  line-height:1;
  letter-spacing:.15em;
  color:rgba(150,154,154,.5);
}
.shell-collab-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.shell-collab-main b{
  font-family:var(--display);
  font-size:16px;
  line-height:1.15;
  font-weight:500;
  letter-spacing:.02em;
  color:rgba(232,225,214,.86);
}
.shell-collab-main i{
  font-style:normal;
  font-size:16px;
  color:rgba(232,225,214,.58);
  transform:translateX(-2px);
  transition:transform .32s var(--ease),color .3s ease;
}
.shell-collab:hover,
.shell-collab[aria-current]{
  background:rgba(17,22,27,.96);
  color:var(--bone);
}
.shell-collab:hover:before,
.shell-collab[aria-current]:before{
  transform:scaleY(1);
  background:var(--copper);
}
.shell-collab:hover .shell-collab-main i,
.shell-collab[aria-current] .shell-collab-main i{
  transform:translateX(2px);
  color:rgba(232,225,214,.9);
}

.rail-utility{
  min-height:96px;
  padding:17px 20px 17px 22px;
  position:relative;
  display:grid;
  grid-template-columns:64px 1fr 14px;
  align-items:center;
  gap:10px;
  border-top:1px solid rgba(232,225,214,.11);
  border-left:0;
  background:rgba(232,225,214,.012);
}
.rail-utility:before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:1px;
  background:rgba(184,117,70,.5);
  transform:scaleY(.5);
  transition:transform .34s var(--ease),background .3s ease;
}
.rail-utility-index{
  align-self:start;
  padding-top:4px;
  font-size:6px;
  letter-spacing:.14em;
  color:rgba(150,154,154,.4);
}
.rail-utility-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.rail-utility-copy b{
  font-family:var(--editorial);
  font-size:17px;
  line-height:1.1;
  font-weight:500;
  color:rgba(232,225,214,.76);
}
.rail-utility-copy em{
  margin-top:4px;
  font-family:var(--display);
  font-size:9px;
  font-style:normal;
  color:rgba(232,225,214,.46);
}
.rail-utility-arrow{
  font-size:14px;
  color:rgba(232,225,214,.5);
  transition:transform .32s var(--ease),color .3s ease;
}
.rail-utility:hover,
.rail-utility[aria-current]{
  background:rgba(232,225,214,.026);
}
.rail-utility:hover:before,
.rail-utility[aria-current]:before{
  transform:scaleY(1);
  background:var(--copper);
}
.rail-utility:hover .rail-utility-copy b,
.rail-utility[aria-current] .rail-utility-copy b{
  color:rgba(232,225,214,.94);
}
.rail-utility:hover .rail-utility-arrow,
.rail-utility[aria-current] .rail-utility-arrow{
  transform:translateX(3px);
  color:rgba(232,225,214,.86);
}

/* Mobile: collaboration stays visible even though the chapter rail disappears. */
@media(max-width:900px){
  .shell-collab{
    min-height:46px;
    min-width:154px;
    padding:8px 12px 8px 14px;
    justify-self:end;
    gap:4px;
    border:1px solid rgba(232,225,214,.1);
    background:rgba(11,15,18,.48);
    backdrop-filter:blur(9px);
  }
  .shell-collab:before{
    top:8px;
    bottom:8px;
  }
  .shell-collab-kicker{
    font-size:6px;
  }
  .shell-collab-main b{
    font-size:13px;
  }
  .shell-collab-main i{
    font-size:13px;
  }
}

@media(max-width:560px){
  .shell-collab{
    min-width:138px;
    padding-inline:11px;
  }
  .shell-collab-kicker{
    letter-spacing:.11em;
  }
}


/* Collaborate discovery pass 2 — clearer client CTA, same restrained language */
.shell-collab{
  background:
    linear-gradient(180deg,rgba(184,117,70,.055),rgba(184,117,70,.018)),
    rgba(11,15,18,.86);
  border-bottom-color:rgba(184,117,70,.18);
}
.shell-collab:after{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(184,117,70,.11);
  pointer-events:none;
  opacity:.78;
  transition:border-color .3s ease,opacity .3s ease;
}
.shell-collab-kicker{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:7px;
  letter-spacing:.12em;
  color:rgba(232,225,214,.55);
}
.shell-collab-kicker>i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 0 4px rgba(184,117,70,.08);
  flex:0 0 auto;
}
.shell-collab-main b{
  font-family:var(--editorial);
  font-size:19px;
  letter-spacing:.01em;
  color:rgba(232,225,214,.94);
}
.shell-collab-main i{
  color:rgba(184,117,70,.92);
}
.shell-collab:hover,
.shell-collab[aria-current]{
  background:
    linear-gradient(180deg,rgba(184,117,70,.085),rgba(184,117,70,.03)),
    rgba(17,22,27,.98);
}
.shell-collab:hover:after,
.shell-collab[aria-current]:after{
  border-color:rgba(184,117,70,.24);
  opacity:1;
}

.rail-utility{
  min-height:108px;
  background:
    linear-gradient(90deg,rgba(184,117,70,.045),rgba(232,225,214,.012) 54%),
    rgba(232,225,214,.012);
  border-top-color:rgba(184,117,70,.16);
}
.rail-utility-index{
  color:rgba(184,117,70,.72);
}
.rail-utility-copy b{
  font-size:19px;
  color:rgba(232,225,214,.9);
}
.rail-utility-copy em{
  margin-top:5px;
  font-size:8px;
  letter-spacing:.04em;
  color:rgba(150,154,154,.58);
}
.rail-utility-arrow{
  color:rgba(184,117,70,.9);
}

@media(max-width:900px){
  .shell-collab{
    min-width:182px;
    padding:9px 14px 9px 15px;
    background:
      linear-gradient(180deg,rgba(184,117,70,.07),rgba(184,117,70,.025)),
      rgba(11,15,18,.62);
    border-color:rgba(184,117,70,.18);
  }
  .shell-collab:after{
    inset:5px;
  }
  .shell-collab-kicker{
    font-size:6px;
    gap:6px;
  }
  .shell-collab-kicker>i{
    width:4px;
    height:4px;
    box-shadow:0 0 0 3px rgba(184,117,70,.08);
  }
  .shell-collab-main b{
    font-size:15px;
  }
}

@media(max-width:560px){
  .shell-collab{
    min-width:166px;
  }
  .shell-collab-main b{
    font-size:14px;
  }
}


/* SHARE v3 — published media surfaces, not MAKE-style project cards */
.share-published-copy{
  max-width:405px;
  z-index:9;
}
.share-published-copy .intro{
  max-width:345px;
}

.share-published-field{
  position:absolute;
  inset:106px 26px 38px 32%;
  z-index:8;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(235px,.72fr);
  grid-template-rows:1fr auto;
  gap:22px 28px;
  align-items:end;
  pointer-events:none;
}

.share-youtube-cluster,
.share-instagram-cluster{
  position:relative;
  pointer-events:auto;
  outline:none;
  transition:opacity .3s ease,filter .34s ease,transform .42s var(--ease);
}

.share-youtube-cluster{
  align-self:center;
  min-width:0;
  view-transition-name:journey-work;
}

.share-platform-mark{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 13px;
}
.share-platform-mark svg{
  width:20px;
  height:15px;
  fill:none;
  stroke:rgba(232,225,214,.7);
  stroke-width:1.2;
}
.share-platform-mark svg path{
  fill:rgba(232,225,214,.72);
  stroke:none;
}
.share-platform-mark span{
  font-family:var(--editorial);
  font-size:15px;
  font-weight:500;
  color:rgba(232,225,214,.78);
}
.share-platform-mark small{
  margin-left:auto;
  font-size:6px;
  letter-spacing:.14em;
  color:rgba(150,154,154,.42);
}

.youtube-playlist-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.youtube-film{
  min-width:0;
  transition:transform .38s var(--ease),opacity .3s ease;
}
.film-frame{
  position:relative;
  aspect-ratio:16/9;
  display:block;
  overflow:hidden;
  border:1px solid rgba(232,225,214,.09);
  background:#0a0e11;
}
.film-frame i{
  position:absolute;
  inset:0;
  display:block;
  background-position:center;
  background-size:cover;
  filter:saturate(.7) brightness(.68) contrast(1.04);
  transform:scale(1.03);
  transition:transform .46s var(--ease),filter .36s ease;
}
.film-01 .film-frame i{background-image:url('https://i.ytimg.com/vi/lplHxU4iQ-Q/maxresdefault.jpg');background-position:center}
.film-02 .film-frame i{background-image:url('https://i.ytimg.com/vi/nmROYifrnEU/maxresdefault.jpg');background-position:center}
.film-03 .film-frame i{background-image:url('https://i.ytimg.com/vi/72PxFN8IW74/maxresdefault.jpg');background-position:center}
.film-frame:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(7,10,13,.02),rgba(7,10,13,.12) 58%,rgba(7,10,13,.56)),
    linear-gradient(90deg,rgba(7,10,13,.18),transparent 44%);
}
.film-frame b{
  position:absolute;
  right:9px;
  bottom:7px;
  z-index:2;
  font-family:var(--editorial);
  font-size:11px;
  font-weight:500;
  color:rgba(232,225,214,.76);
}
.film-meta{
  min-height:74px;
  padding:10px 3px 0;
  display:flex;
  flex-direction:column;
}
.film-meta small{
  font-size:6px;
  letter-spacing:.13em;
  color:rgba(150,154,154,.4);
}
.film-meta strong{
  margin-top:5px;
  font-family:var(--display);
  font-size:11px;
  line-height:1.45;
  font-weight:500;
  color:rgba(232,225,214,.74);
}
.film-meta em{
  margin-top:2px;
  font-family:var(--display);
  font-size:8px;
  line-height:1.4;
  font-style:normal;
  color:rgba(150,154,154,.48);
}

.share-youtube-cluster:hover .youtube-film,
.share-youtube-cluster:focus-visible .youtube-film,
.share-youtube-cluster:focus-within .youtube-film{
  opacity:.72;
}
.share-youtube-cluster:hover .youtube-film:hover,
.share-youtube-cluster:focus-visible .youtube-film,
.share-youtube-cluster:focus-within .youtube-film{
  opacity:1;
}
.youtube-film:hover{
  transform:translateY(-4px);
}
.youtube-film:hover .film-frame i{
  transform:scale(1.06);
  filter:saturate(.82) brightness(.78) contrast(1.03);
}

.share-destination{
  margin-top:15px;
  padding-top:11px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px 16px;
  border-top:1px solid rgba(232,225,214,.1);
}
.share-destination>span{
  font-size:7px;
  letter-spacing:.08em;
  color:rgba(150,154,154,.5);
}
.share-destination>b,
.share-destination>a{
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  font-family:var(--editorial);
  font-size:13px;
  font-weight:500;
  color:rgba(232,225,214,.66);
}
.share-destination>a:hover{
  color:rgba(232,225,214,.92);
}
.share-destination>small{
  font-size:6px;
  color:rgba(150,154,154,.34);
}

.share-instagram-cluster{
  align-self:center;
  min-width:0;
  padding-left:6px;
}
.instagram-mark svg{
  width:18px;
  height:18px;
  stroke-width:1.25;
}
.instagram-moments{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  align-items:end;
}
.ig-moment{
  position:relative;
  aspect-ratio:9/16;
  display:block;
  overflow:hidden;
  border:1px solid rgba(232,225,214,.08);
  background:#0b0f12;
  transition:transform .38s var(--ease),opacity .3s ease;
}
.ig-moment i{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  filter:saturate(.72) brightness(.68) contrast(1.02);
  transform:scale(1.04);
  transition:transform .42s var(--ease),filter .34s ease;
}
.ig-01 i{background-image:url('/media/LIVE_CHILL_LOOKWINDOW.png');background-position:50% 42%}
.ig-02 i{background-image:url('/media/LIVE_CAMERA.png');background-position:50% 45%}
.ig-03 i{background-image:url('/media/LIVE_WALKING.png');background-position:51% 44%}
.ig-moment:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 44%,rgba(7,10,13,.48));
}
.ig-moment b{
  position:absolute;
  left:7px;
  bottom:6px;
  z-index:2;
  font-family:var(--editorial);
  font-size:9px;
  font-weight:500;
  color:rgba(232,225,214,.62);
}
.ig-moment:nth-child(2){transform:translateY(-10px)}
.ig-moment:nth-child(3){transform:translateY(5px)}
.share-instagram-cluster:hover .ig-moment,
.share-instagram-cluster:focus-visible .ig-moment,
.share-instagram-cluster:focus-within .ig-moment{
  opacity:.76;
}
.share-instagram-cluster:hover .ig-moment:hover{
  opacity:1;
  transform:translateY(-5px);
}
.share-instagram-cluster:hover .ig-moment:nth-child(2):hover{
  transform:translateY(-15px);
}
.share-instagram-cluster:hover .ig-moment:nth-child(3):hover{
  transform:translateY(0);
}
.ig-moment:hover i{
  transform:scale(1.08);
  filter:saturate(.84) brightness(.78);
}

.published-return{
  grid-column:1/-1;
  position:relative;
  left:auto;
  bottom:auto;
  width:min(320px,100%);
  margin:0;
}

body[data-chapter=share][data-view=chapter][data-share-focus] .share-youtube-cluster,
body[data-chapter=share][data-view=chapter][data-share-focus] .share-instagram-cluster{
  opacity:.28;
  filter:saturate(.65) brightness(.78);
}
body[data-chapter=share][data-view=chapter][data-share-focus=youtube] .share-youtube-cluster,
body[data-chapter=share][data-view=chapter][data-share-focus=instagram] .share-instagram-cluster{
  opacity:1;
  filter:none;
  transform:translateY(-2px);
}
body[data-chapter=share][data-view=chapter][data-share-focus=youtube] .scene-grade:after{
  opacity:1;
  background:
    radial-gradient(circle at 59% 43%,rgba(232,225,214,.075),transparent 25%),
    linear-gradient(90deg,transparent 45%,rgba(232,225,214,.02) 75%,transparent);
}
body[data-chapter=share][data-view=chapter][data-share-focus=instagram] .scene-grade:after{
  opacity:1;
  background:
    radial-gradient(circle at 82% 55%,rgba(184,117,70,.085),transparent 21%),
    linear-gradient(90deg,transparent 54%,rgba(184,117,70,.018) 80%,transparent);
}

@media(max-width:1180px){
  .share-published-field{
    inset-inline-start:29%;
    grid-template-columns:minmax(0,1.4fr) minmax(210px,.72fr);
    gap:18px 20px;
  }
  .film-meta strong{font-size:10px}
  .share-platform-mark small{display:none}
}

@media(max-width:900px){
  .share-published-field{
    position:relative;
    inset:auto;
    margin-top:42px;
    padding:0 20px 68px;
    display:block;
    pointer-events:auto;
  }
  .share-youtube-cluster,
  .share-instagram-cluster{
    margin-top:34px;
  }
  .share-youtube-cluster:first-child{margin-top:0}
  .youtube-playlist-strip{
    gap:8px;
  }
  .film-meta{
    min-height:66px;
  }
  .share-instagram-cluster{
    max-width:420px;
  }
  .instagram-moments{
    width:min(100%,330px);
    gap:8px;
  }
  .published-return{
    margin-top:42px;
  }
}

@media(max-width:560px){
  .share-published-field{
    padding-inline:16px;
  }
  .youtube-playlist-strip{
    grid-template-columns:1fr;
    gap:16px;
  }
  .youtube-film{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(110px,.65fr);
    gap:12px;
    align-items:center;
  }
  .film-meta{
    min-height:0;
    padding-top:0;
  }
  .share-destination{
    grid-template-columns:1fr;
  }
  .share-destination>b,
  .share-destination>a{
    grid-column:1;
    grid-row:auto;
    margin-top:7px;
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .instagram-moments{
    width:100%;
  }
  .share-platform-mark span{
    font-size:14px;
  }
}


/* Desktop context rail — global chapters live in the top nav; rail navigates current content */
.context-rail-content{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.context-rail-stack,
.context-rail-nav{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.context-rail-label{
  min-height:54px;
  margin:0;
  padding:18px 22px 15px;
  border-bottom:1px solid rgba(232,225,214,.075);
  font-size:7px;
  letter-spacing:.15em;
  color:rgba(150,154,154,.5);
}

.context-media-row{
  appearance:none;
  width:100%;
  min-height:148px;
  padding:18px 17px 17px 22px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 86px 13px;
  gap:10px;
  align-items:center;
  position:relative;
  border:0;
  border-bottom:1px solid rgba(232,225,214,.075);
  background:transparent;
  color:rgba(232,225,214,.58);
  text-align:left;
  cursor:pointer;
  font:inherit;
  transition:background .32s ease,color .32s ease,opacity .32s ease;
}
.context-media-row:before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:1px;
  background:var(--copper);
  transform:scaleY(.18);
  transform-origin:center;
  opacity:.5;
  transition:transform .32s var(--ease),opacity .3s ease;
}
.context-media-row:hover,
.context-media-row:focus-visible{
  background:linear-gradient(90deg,rgba(184,117,70,.035),rgba(232,225,214,.012));
  color:rgba(232,225,214,.9);
  outline:none;
}
.context-media-row:hover:before,
.context-media-row:focus-visible:before{
  transform:scaleY(1);
  opacity:.95;
}
.context-media-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.context-media-copy small{
  font-size:6px;
  letter-spacing:.13em;
  color:rgba(150,154,154,.42);
}
.context-media-copy b{
  margin-top:8px;
  font-family:var(--editorial);
  font-size:20px;
  line-height:1.12;
  font-weight:500;
  color:rgba(232,225,214,.8);
}
.context-media-copy em{
  margin-top:4px;
  font-family:var(--display);
  font-size:9px;
  line-height:1.45;
  font-style:normal;
  color:rgba(150,154,154,.52);
}
.context-media-row>i{
  font-style:normal;
  font-size:13px;
  color:rgba(232,225,214,.45);
  transition:transform .3s var(--ease),color .3s ease;
}
.context-media-row:hover>i,
.context-media-row:focus-visible>i{
  transform:translateX(3px);
  color:rgba(232,225,214,.8);
}

.context-media-thumb{
  width:86px;
  height:64px;
  display:block;
  border:1px solid rgba(232,225,214,.07);
  background-position:center;
  background-size:cover;
  filter:saturate(.72) brightness(.72);
  opacity:.68;
  transition:filter .32s ease,opacity .32s ease,transform .36s var(--ease);
}
.context-media-row:hover .context-media-thumb,
.context-media-row:focus-visible .context-media-thumb{
  filter:saturate(.84) brightness(.86);
  opacity:.96;
  transform:scale(1.018);
}
.rail-media-journey .context-media-thumb,
.rail-media-live-journey .context-media-thumb{
  background-image:url('https://i.ytimg.com/vi/lplHxU4iQ-Q/maxresdefault.jpg');
  background-position:center;
}
.rail-media-myths .context-media-thumb,
.rail-media-live-making .context-media-thumb{
  background-image:url('/media/LIVE_PUT_DOWN_HAND.png');
  background-position:48% 48%;
}
.rail-media-youtube .context-media-thumb{
  background-image:url('https://i.ytimg.com/vi/lplHxU4iQ-Q/maxresdefault.jpg');
  background-position:center;
}
.rail-media-instagram .context-media-thumb{
  aspect-ratio:9/16;
  height:82px;
  width:52px;
  justify-self:end;
  background-image:url('/media/LIVE_CHILL_LOOKWINDOW.png');
  background-position:51% 43%;
}

.context-rail-row{
  min-height:106px;
  padding:17px 20px 16px 22px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 15px;
  grid-template-rows:auto auto;
  column-gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(232,225,214,.075);
  color:rgba(232,225,214,.56);
  transition:background .3s ease,color .3s ease;
}
.context-rail-row>span{
  grid-row:1/3;
  align-self:start;
  padding-top:4px;
  font-family:var(--editorial);
  font-size:11px;
  color:rgba(184,117,70,.72);
}
.context-rail-row>b{
  font-family:var(--editorial);
  font-size:16px;
  line-height:1.15;
  font-weight:500;
  color:rgba(232,225,214,.74);
}
.context-rail-row>em{
  grid-column:2;
  font-family:var(--display);
  font-size:9px;
  line-height:1.4;
  font-style:normal;
  color:rgba(150,154,154,.5);
}
.context-rail-row>i{
  grid-column:3;
  grid-row:1/3;
  font-style:normal;
  color:rgba(232,225,214,.38);
  transition:transform .3s var(--ease),color .3s ease;
}
.context-rail-row:hover,
.context-rail-row:focus-visible{
  background:rgba(232,225,214,.018);
  color:rgba(232,225,214,.9);
  outline:none;
}
.context-rail-row:hover>i,
.context-rail-row:focus-visible>i{
  transform:translateY(2px);
  color:rgba(232,225,214,.72);
}
.context-rail-next{
  margin-top:auto;
  border-top:1px solid rgba(184,117,70,.12);
  background:linear-gradient(90deg,rgba(184,117,70,.025),transparent);
}
.context-rail-next:hover>i{
  transform:translateX(3px);
}

/* Rail hover mirrors focus on the main canvas. */
body[data-chapter=make][data-make-focus=journey] .rail-media-journey,
body[data-chapter=make][data-make-focus=myths] .rail-media-myths,
body[data-chapter=share][data-share-focus=youtube] .rail-media-youtube,
body[data-chapter=share][data-share-focus=instagram] .rail-media-instagram{
  background:linear-gradient(90deg,rgba(184,117,70,.045),rgba(232,225,214,.014));
}
body[data-chapter=make][data-make-focus=journey] .rail-media-journey:before,
body[data-chapter=make][data-make-focus=myths] .rail-media-myths:before,
body[data-chapter=share][data-share-focus=youtube] .rail-media-youtube:before,
body[data-chapter=share][data-share-focus=instagram] .rail-media-instagram:before{
  transform:scaleY(1);
  opacity:1;
}

/* Collaborate uses the rail as a page index; its global utility CTA would only duplicate the current page. */
body[data-view=utility] .rail-utility{
  display:none;
}

@media(max-width:900px){
  .context-rail-content{
    display:none;
  }
}


/* Mobile validation pass — preserve the desktop concept, remove prototype noise */
@media(max-width:900px){
  /* On mobile, prioritise real/current work instead of showing scalability test slots. */
  .make-node-slot{
    display:none;
  }

  /* Keep the chapter opening concise before the vertical content flow begins. */
  body[data-view=chapter] #content{
    padding-top:58px;
  }
  .make-workbench{
    margin-top:40px;
    padding-bottom:48px;
  }
  .share-published-field{
    margin-top:36px;
    padding-bottom:56px;
  }

  /* Tappable public destinations should read as actions without relying on hover. */
  .share-destination>b,
  .journey-actions a,
  .collab-back,
  .continuation{
    min-height:44px;
    display:flex;
    align-items:center;
  }

  /* Keep the image world present, but let text win on narrow screens. */
  body[data-chapter=live][data-view=chapter] .scene-live{
    background-position:54% 48%;
  }
  body[data-chapter=make][data-view=chapter] .scene-make{
    background-position:57% 46%;
  }
  body[data-chapter=share][data-view=chapter] .scene-share{
    background-position:58% 46%;
  }
}

@media(max-width:390px){
  .shell{
    padding-inline:14px;
  }
  .identity strong{
    font-size:28px;
  }
  .shell-collab{
    min-width:148px;
    padding-inline:10px;
  }
  .shell-collab-kicker{
    font-size:5.5px;
    letter-spacing:.09em;
  }
  .shell-collab-main b{
    font-size:13px;
  }
  .top-chapters a{
    padding-inline:4px!important;
  }
  .top-chapters b{
    font-size:11px;
  }
  #content{
    padding-inline:16px;
  }
}


/* Mobile top chapter nav — open editorial treatment, no bounding boxes */
@media(max-width:900px){
  .top-chapters{
    border-top:0;
    border-bottom:0;
    position:relative;
  }
  .top-chapters a{
    border-left:0!important;
    border-right:0!important;
  }
  .top-chapters a + a:before{
    content:"";
    position:absolute;
    left:0;
    top:14px;
    bottom:14px;
    width:1px;
    background:rgba(232,225,214,.07);
  }
}


/* Content pass — only real/current MAKE objects remain */
@media(min-width:901px){
  .make-node-journey{left:44%;top:20%}
  .make-node-myths{left:66%;top:50%}
}

/* Journey media labels stay readable over real thumbnails. */
.memory-label{
  right:20px;
  max-width:220px;
}
.memory-plate:hover .memory-label,
.memory-plate:focus-visible .memory-label{
  color:rgba(232,225,214,.72);
}

/* Prototype-only draft labels are no longer part of current public surfaces. */
.draft:empty{display:none}