:root{
  --paper:#f4ead9;--ink:#172721;--rust:#9e3027;
  --mono:"Courier New",monospace;--edge:clamp(21px,5vw,91px);
  color:var(--ink);background:var(--paper);font-family:system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:300px}
a{text-decoration:none;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid #d98063;outline-offset:5px}
.skip{position:fixed;top:8px;left:8px;padding:12px;z-index:10;background:var(--paper);color:var(--ink);transform:translateY(-130%)}
.skip:focus{transform:translateY(0)}
.hero{
  position:relative;isolation:isolate;min-height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;padding:115px var(--edge) clamp(54px,9vh,105px);
  background:#14231f;color:#fff4dc;
}
.scene,.mist,.hero::after{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scene{z-index:-3;object-fit:cover;object-position:50% center;transform-origin:38% 43%;animation:approach 16s ease-out both}
@keyframes approach{from{transform:scale(1.045)}to{transform:scale(1.145)}}
.mist{
  z-index:-2;inset:12% -18% -10%;width:136%;height:98%;opacity:.48;
  background:radial-gradient(ellipse 45% 17% at 72% 82%,#acbaa34a,transparent 72%),
    radial-gradient(ellipse 40% 14% at 26% 68%,#9fb8ac28,transparent 70%);
  animation:drift 15s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translateX(-8%)}to{transform:translateX(10%)}}
.hero::after{content:"";z-index:-1;background:linear-gradient(0deg,#07110ff0,transparent 48%),linear-gradient(180deg,#09120c85,transparent 24%),linear-gradient(90deg,transparent 54%,#09151148)}
.hero.paused :is(.scene,.mist){animation-play-state:paused}
.top{position:absolute;inset:0 var(--edge) auto;height:86px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #f4ead93e}
.brand{display:flex;align-items:center;gap:12px;font:700 13px var(--mono);letter-spacing:.19em;white-space:nowrap}
.seal{display:grid;place-items:center;width:39px;height:39px;border:1px solid #eab8a4;outline:1px solid #bf5243;outline-offset:2px;border-radius:50%;background:#9e3027;color:#fff4dc;font:700 22px/1 Georgia,serif;letter-spacing:0}
.status{font:700 11px var(--mono);letter-spacing:.13em;padding:11px 14px;border:1px solid #f4ead98c;background:#17272165}
.top-actions{display:flex;align-items:center;gap:8px}
.social{display:grid;place-items:center;width:44px;height:44px;border:1px solid #f4ead98c;background:#17272165}
.social:hover{background:#f5e9cd;color:var(--ink)}
.title-ink{
  position:absolute;top:clamp(108px,16vh,190px);right:var(--edge);margin:0;display:flex;align-items:flex-start;gap:17px;
  writing-mode:vertical-rl;letter-spacing:.06em;font:800 clamp(65px,9vw,140px)/.95 Georgia,"Yu Mincho",serif;
  text-shadow:0 3px 18px #0c1613b0;
}
.title-ink span{font:500 clamp(12px,1.3vw,20px)/1 Georgia,"Yu Mincho",serif;letter-spacing:.25em}
.hero-copy{max-width:680px}
h1,h2{margin:0;font-weight:560;letter-spacing:-.07em;line-height:.94}
h1{font-size:clamp(57px,7.5vw,128px);text-shadow:0 4px 25px #10140ee0}
.hero-copy p{margin:15px 0 22px;font:600 clamp(13px,2vw,18px)/1.4 Georgia,serif;color:#e4dcc8}
.scroll,.motion{font:700 10px var(--mono);letter-spacing:.14em;color:#f5e9cd}
.scroll{display:inline-flex;align-items:center;gap:10px}
.scroll span{display:grid;place-items:center;width:31px;height:31px;border:1px solid #fff4dc85;font-size:15px}
.scroll:hover span{background:#f5e9cd;color:#172721}
.motion{position:absolute;bottom:24px;right:var(--edge);border:1px solid #f4ead956;background:#10201b83;padding:7px 9px;cursor:pointer}
.motion[hidden]{display:none}
.wrap{width:min(calc(100% - var(--edge) * 2),1260px);margin-inline:auto}
.chapter{padding-block:clamp(35px,7vw,94px)}
.chapters{display:flex;gap:23px;align-items:center;border-bottom:1px solid #756a5444}
.chapters a{display:flex;align-items:center;gap:7px;padding:0 4px 13px;font:700 10px var(--mono);letter-spacing:.1em}
.chapters a span{font:700 23px Georgia,serif}
.chapters [aria-current],.chapters a:hover{border-bottom:2px solid var(--rust);color:var(--rust)}
.chapter-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(13px,4vw,60px);align-items:center}
.chapter-grid h2,.photo-inner h2{font-size:clamp(39px,6.6vw,100px)}
.ink-note{font:700 19px Georgia,serif;color:var(--rust);margin:0 0 12px;letter-spacing:.22em}
.body-copy{max-width:305px;color:#4c5147;font:17px/1.65 Georgia,serif;margin:22px 0}
.text-link,.save{display:inline-flex;gap:13px;align-items:center;font-size:13px;font-weight:750}
.text-link{color:#802b24;border-bottom:1px solid #802b2455;padding-bottom:5px}
.ink-art{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.photo-section{background:#14221d;color:#fff4dc;padding-block:clamp(36px,7vw,88px)}
.photo-inner{display:grid;grid-template-columns:.7fr 1fr;align-items:center;gap:clamp(20px,8vw,120px)}
.photo-inner figure{margin:0;max-width:380px;border:1px solid #fff4dc70;padding:8px}
.photo-inner figure img{display:block;width:100%;height:clamp(290px,42vw,480px);object-fit:cover;object-position:50% 52%}
.photo-inner figcaption{padding:9px 1px 1px;font:700 9px var(--mono);letter-spacing:.13em;color:#e5d5b6}
.photo-inner .ink-note{color:#e39380}
.save{margin-top:23px;border:1px solid #f4ead97c;padding:11px 12px}
.save:hover{background:var(--paper);color:var(--ink)}
footer{min-height:83px;display:flex;align-items:center;justify-content:space-between;gap:15px;font:700 10px var(--mono)}
footer .brand{font-size:10px}
footer .seal{width:25px;height:25px;font-size:15px}
@media(max-width:650px){
  .hero{min-height:91svh;padding-bottom:54px}
  .scene{object-position:39% center}
  .hero::after{background:linear-gradient(0deg,#07110ff6,transparent 53%),linear-gradient(180deg,#09120c85,transparent 20%)}
  .top{height:67px}.brand{gap:8px;font-size:11px}
  .seal{width:30px;height:30px;font-size:18px}.status{padding:7px 8px;font-size:9px}
  .title-ink{top:83px;gap:8px;font-size:51px}.title-ink span{font-size:10px}
  h1{font-size:clamp(45px,12vw,66px)}
  .hero-copy p{margin:11px 0 17px}
  .motion{bottom:14px;padding:5px 6px;font-size:8px}
  .chapter-grid,.photo-inner{grid-template-columns:1fr}
  .chapter-grid{padding-top:24px}
  .body-copy{font-size:15px;margin:13px 0}
  .photo-inner>div{grid-row:1}
  .photo-inner figure{width:min(100%,360px)}
  footer .brand{letter-spacing:.07em}footer .brand .seal{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene,.mist{animation:none}
}