@charset "UTF-8";
/* ==================================================================
   余烬 EMBER — Editorial Design System
   ================================================================== */

:root {
  --paper: #f6f2ea;
  --paper-2: #ede6d9;
  --paper-3: #e3dbc9;
  --ink: #17140f;
  --ink-2: #4b4438;
  --ink-3: #8a8070;
  --line: rgba(23, 20, 15, .16);
  --line-soft: rgba(23, 20, 15, .075);
  --ember: #d2542a;
  --ember-soft: #eda57d;
  --head-bg: rgba(246, 242, 234, .84);
  --shadow: rgba(23, 20, 15, .10);
  --night: #14120f;

  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", Georgia, "Times New Roman", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  --max: 1560px;
  --gut: clamp(1.35rem, 5vw, 6rem);
  --fs-hero: clamp(3.9rem, 11.4vw, 11rem);
  --fs-xl: clamp(2.7rem, 6.2vw, 6.2rem);
  --fs-lg: clamp(1.9rem, 3.5vw, 3.3rem);
  --fs-md: clamp(1.35rem, 2.1vw, 2rem);
  --fs-body: clamp(1rem, 1.02vw, 1.14rem);
  --fs-label: .68rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

[data-theme="dark"] {
  --paper: #14120f;
  --paper-2: #1d1a15;
  --paper-3: #272219;
  --ink: #f3eee2;
  --ink-2: #c2b9a6;
  --ink-3: #8b8270;
  --line: rgba(243, 238, 226, .17);
  --line-soft: rgba(243, 238, 226, .08);
  --ember: #ea7343;
  --ember-soft: #f2ad83;
  --head-bg: rgba(20, 18, 15, .84);
  --shadow: rgba(0, 0, 0, .45);
  --night: #0d0c0a;
}

/* ------------------------------ reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}
body.is-locked { overflow: hidden; }
::selection { background: var(--ember); color: #fff; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 999; padding: .7rem 1.1rem; background: var(--ink); color: var(--paper); font-size: .82rem; }
.skip-link:focus { top: 1rem; }

/* paper grain */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9; pointer-events: none;
  opacity: .038; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .028; }

/* ------------------------------ layout ------------------------------ */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.sec { position: relative; padding-block: clamp(5.5rem, 10vw, 11rem); }
.sec--tight { padding-block: clamp(4rem, 7vw, 7rem); }
.rule { height: 1px; background: var(--line); border: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-3);
}
.eyebrow::before { content: ""; width: 1.9rem; height: 1px; background: var(--ember); }
.display {
  font-family: var(--serif); font-weight: 700; line-height: 1.12;
  letter-spacing: -.025em; -webkit-text-stroke: .012em currentColor;
}
.accent { color: var(--ember); font-style: italic; text-shadow: .015em 0 currentColor; }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.3rem); color: var(--ink-2); line-height: 1.9; }
.muted { color: var(--ink-3); }
.num { font-family: var(--serif); font-size: .9rem; color: var(--ember); letter-spacing: .04em; }

/* ------------------------------ header ------------------------------ */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  padding-block: 1.15rem;
  transition: padding .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.site-head.is-stuck {
  padding-block: .7rem;
  background: var(--head-bg);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line);
}
.head__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: baseline; gap: .7rem; flex-shrink: 0; }
.brand__cn { font-family: var(--serif); font-size: 1.72rem; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.brand__en { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); }
.brand__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); align-self: center; }

.nav { display: flex; align-items: center; gap: clamp(1.3rem, 2.4vw, 2.6rem); }
.nav a {
  position: relative; font-size: .84rem; font-weight: 500; letter-spacing: .06em;
  color: var(--ink-2); padding-block: .4rem;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--ember); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav a:hover, .nav a.is-active { color: var(--ink); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }

.head__tools { display: flex; align-items: center; gap: .7rem; }
.icon-btn {
  position: relative; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line);
  color: var(--ink); transition: background .35s, border-color .35s, transform .35s var(--ease);
}
.icon-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tgl-moon { display: none; }
[data-theme="dark"] .tgl-sun { display: none; }
[data-theme="dark"] .tgl-moon { display: block; }
.btn-menu { display: none; }

/* mobile overlay */
.mobile-nav {
  position: fixed; inset: 0; z-index: 115; background: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem var(--gut) 3rem;
  opacity: 0; visibility: hidden; transform: translateY(-2%);
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility .5s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a {
  display: flex; align-items: baseline; gap: 1.2rem;
  font-family: var(--serif); font-size: clamp(2.2rem, 9vw, 4rem); font-weight: 700;
  padding-block: .35rem; border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a span { font-family: var(--sans); font-size: .7rem; color: var(--ember); letter-spacing: .1em; }
.mobile-nav__foot { margin-top: auto; padding-top: 2rem; font-size: .78rem; color: var(--ink-3); letter-spacing: .08em; }

/* ------------------------------ cursor / progress ------------------------------ */
#cur-dot, #cur-ring { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; border-radius: 50%; opacity: 0; }
#cur-dot { width: 6px; height: 6px; background: var(--ember); transform: translate(-50%, -50%); }
#cur-ring { width: 38px; height: 38px; border: 1px solid var(--ember); transform: translate(-50%, -50%); transition: width .3s, height .3s, opacity .3s, background .3s; }
#cur-ring.is-big { width: 64px; height: 64px; background: color-mix(in srgb, var(--ember) 12%, transparent); }
@media (hover: none), (pointer: coarse) { #cur-dot, #cur-ring { display: none; } }
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--ember); z-index: 210; transition: width .1s linear; }

/* ------------------------------ hero ------------------------------ */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 7.5rem; overflow: hidden; }
.hero__bgword {
  position: absolute; right: calc(var(--gut) * -.35); top: 16%;
  font-family: var(--serif); font-size: clamp(7rem, 19vw, 21rem); font-weight: 700;
  line-height: .8; color: var(--ink); opacity: .028; pointer-events: none; white-space: nowrap;
  letter-spacing: -.06em; user-select: none;
}
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(1rem, 3vw, 4rem); }
.hero__copy { position: relative; z-index: 2; padding-block: 2rem; }
.hero__kicker { margin-bottom: clamp(1.8rem, 3.5vw, 3.2rem); }
.hero h1 { font-size: var(--fs-hero); margin-bottom: clamp(1.6rem, 3vw, 2.8rem); }
.hero h1 .l { display: block; overflow: hidden; }
.hero h1 .l > span { display: block; }
.hero h1 .l2 { padding-left: clamp(0rem, 6vw, 7rem); }
.hero__desc { max-width: 30rem; margin-bottom: clamp(2rem, 3.5vw, 3.2rem); }
.hero__cta { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem); flex-wrap: wrap; }

.btn {
  position: relative; display: inline-flex; align-items: center; gap: .9rem;
  padding: 1.05rem 2rem; border-radius: 100px; font-size: .88rem; font-weight: 600;
  letter-spacing: .05em; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ember); transform: translateY(0); transition: transform .55s var(--ease); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.btn--solid { color: #fff; box-shadow: 0 12px 34px -14px var(--ember); }
.btn--solid:hover { transform: translateY(-3px); box-shadow: 0 20px 42px -16px var(--ember); }
.btn--solid:hover::before { transform: translateY(101%); }
.btn--solid:hover { color: var(--ink); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(5px); }
.btn--text { padding: .6rem 0; color: var(--ink); }
.btn--text::before { height: 1px; top: auto; bottom: 0; background: var(--ember); transform: scaleX(.25); transform-origin: left; }
.btn--text::after { display: none; }
.btn--text:hover::before { transform: scaleX(1); }

.hero__art { position: relative; display: grid; place-items: center; }
.hero__art .ef { width: min(100%, 40rem); transform: translate3d(calc(var(--mx, 0) * 1px), calc((var(--par, 0) + var(--my, 0)) * 1px), 0); will-change: transform; }
.hero__art::after {
  content: "N° 12"; position: absolute; right: 2%; bottom: 4%;
  font-family: var(--serif); font-size: .8rem; letter-spacing: .3em; color: var(--ink-3);
}
.ef { position: relative; line-height: 0; }
.ef svg { width: 100%; height: auto; }
.ef--sun svg { animation: float 9s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(2deg); } }

.hero__rail {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-top: auto; padding-block: 1.3rem; border-top: 1px solid var(--line);
  font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.hero__rail span { display: inline-flex; align-items: center; gap: .6rem; }
.hero__rail .scroll-cue { gap: .8rem; }
.scroll-cue i { display: block; width: 1px; height: 28px; background: var(--ember); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%, 100% { transform: scaleY(.3); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ------------------------------ section head ------------------------------ */
.sec__head { display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 20rem); gap: clamp(1rem, 3vw, 3rem); align-items: start; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.sec__head .idx { font-family: var(--serif); font-size: .95rem; color: var(--ember); padding-top: .5rem; }
.sec__title { font-size: var(--fs-xl); margin-top: 1.4rem; }
.sec__aside { padding-top: .6rem; }
.sec__aside .link-more { margin-top: 1.4rem; }
.link-more { display: inline-flex; align-items: center; gap: .7rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; border-bottom: 1px solid var(--line); padding-bottom: .4rem; transition: gap .4s var(--ease), border-color .4s; }
.link-more:hover { gap: 1.2rem; border-color: var(--ember); color: var(--ember); }
.link-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ------------------------------ manifesto ------------------------------ */
.manifesto { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.manifesto__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.manifesto__quote { font-family: var(--serif); font-size: clamp(2.1rem, 4.6vw, 4.6rem); font-weight: 700; line-height: 1.36; letter-spacing: -.02em; max-width: 20ch; }
.manifesto__quote em { color: var(--ember); font-style: normal; }
.manifesto__side { padding-bottom: .6rem; }
.manifesto__side .sig { font-family: var(--serif); font-size: 1.35rem; margin-top: 1.1rem; }

/* ------------------------------ columns list ------------------------------ */
.cols { border-top: 1px solid var(--line); }
.col-row {
  position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1fr) 3rem;
  align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.6rem, 2.8vw, 2.6rem); border-bottom: 1px solid var(--line);
  transition: padding .5s var(--ease), background .5s var(--ease);
  overflow: hidden;
}
.col-row::before { content: ""; position: absolute; inset: 0; background: var(--paper-2); opacity: 0; transition: opacity .5s var(--ease); z-index: -1; }
.col-row:hover { padding-inline: 1.4rem; }
.col-row:hover::before { opacity: 1; }
.col-row__n { font-family: var(--serif); font-size: .86rem; color: var(--ember); }
.col-row__t { font-family: var(--serif); font-size: var(--fs-md); font-weight: 700; letter-spacing: -.01em; transition: color .4s; }
.col-row:hover .col-row__t { color: var(--ember); }
.col-row__d { font-size: .9rem; color: var(--ink-3); line-height: 1.75; }
.col-row__arrow { justify-self: end; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: background .4s, color .4s, transform .5s var(--ease); }
.col-row:hover .col-row__arrow { background: var(--ember); color: #fff; border-color: var(--ember); transform: rotate(-45deg); }
.col-row__arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.col-row__ghost { position: absolute; right: 5rem; top: 50%; width: 7rem; opacity: 0; transform: translate(20px, -50%); transition: opacity .5s, transform .6s var(--ease); pointer-events: none; }
.col-row:hover .col-row__ghost { opacity: .5; transform: translate(0, -50%); }

/* ------------------------------ story rail ------------------------------ */
.rail-sec { background: var(--paper-2); }
[data-theme="dark"] .rail-sec { background: var(--paper-2); }
.rail__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.rail__ctrl { display: flex; gap: .6rem; }
.rail__ctrl button { width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: background .35s, color .35s, border-color .35s; }
.rail__ctrl button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rail__ctrl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rail {
  display: flex; gap: clamp(1.1rem, 2vw, 2rem); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
  padding-bottom: 1.5rem; scrollbar-width: none; cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail__item { flex: 0 0 clamp(17rem, 30vw, 27rem); scroll-snap-align: start; }
.rail__visual {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper);
  border: 1px solid var(--line-soft);
}
.rail__visual .ef { position: absolute; inset: 8% 8% 12%; display: grid; place-items: center; transition: transform 1.1s var(--ease); }
.rail__visual:hover .ef { transform: scale(1.09) rotate(-2deg); }
.rail__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--paper) 78%, transparent)); pointer-events: none; }
.rail__tag { position: absolute; z-index: 2; top: 1.1rem; left: 1.2rem; font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.rail__n { position: absolute; z-index: 2; bottom: 1rem; right: 1.2rem; font-family: var(--serif); font-size: 3.4rem; font-weight: 700; color: var(--ink); opacity: .1; line-height: 1; }
.rail__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 1.2rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.rail__title { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.95rem); font-weight: 700; line-height: 1.35; margin-top: .5rem; transition: color .4s; }
.rail__item:hover .rail__title { color: var(--ember); }
.rail__ex { font-size: .86rem; color: var(--ink-3); line-height: 1.7; margin-top: .6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rail__bar { height: 2px; background: var(--line); margin-top: 2.5rem; position: relative; }
.rail__bar i { position: absolute; left: 0; top: 0; height: 100%; width: 20%; background: var(--ember); transition: transform .3s var(--ease), width .3s; }

/* ------------------------------ journal list ------------------------------ */
.journal { border-top: 1px solid var(--line); }
.jrow {
  position: relative; display: grid;
  grid-template-columns: 3.5rem 8rem minmax(0, 1.15fr) minmax(0, 1fr) 5rem 2.5rem;
  align-items: center; gap: clamp(.8rem, 2vw, 2rem);
  padding-block: clamp(1.6rem, 2.6vw, 2.4rem); border-bottom: 1px solid var(--line);
  transition: background .45s var(--ease), padding .45s var(--ease);
}
.jrow:hover { background: var(--paper-2); padding-inline: 1.1rem; }
.jrow__n { font-family: var(--serif); font-size: .86rem; color: var(--ember); }
.jrow__cat { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.jrow__t { font-family: var(--serif); font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 700; line-height: 1.4; transition: color .4s; }
.jrow:hover .jrow__t { color: var(--ember); }
.jrow__ex { font-size: .86rem; color: var(--ink-3); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jrow__time { font-size: .76rem; color: var(--ink-3); letter-spacing: .06em; text-align: right; }
.jrow__go { justify-self: end; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .4s, color .4s, transform .5s var(--ease); }
.jrow:hover .jrow__go { background: var(--ember); color: #fff; border-color: var(--ember); transform: rotate(-45deg); }
.jrow__go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ------------------------------ stats ------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: clamp(2.2rem, 4vw, 3.8rem) clamp(1rem, 2vw, 2rem); border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat__num { font-family: var(--serif); font-size: clamp(3rem, 6vw, 5.6rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.stat__num sup { font-size: .32em; color: var(--ember); vertical-align: super; margin-left: .15em; }
.stat__label { margin-top: 1rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

/* ------------------------------ quote block ------------------------------ */
.night-block { background: var(--night); color: #f3eee2; position: relative; overflow: hidden; }
.night-block .eyebrow { color: rgba(243, 238, 226, .5); }
.night-block .eyebrow::before { background: var(--ember); }
.quote__in { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); }
.quote__mark { font-family: var(--serif); font-size: 9rem; line-height: .8; color: var(--ember); opacity: .8; }
.quote__text { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 3.9rem); font-weight: 700; line-height: 1.45; letter-spacing: -.015em; max-width: 24ch; }
.quote__by { margin-top: clamp(2rem, 4vw, 3.5rem); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 238, 226, .5); }
.quote__art { position: absolute; right: -6rem; top: 50%; width: clamp(20rem, 38vw, 40rem); transform: translateY(-50%); opacity: .18; pointer-events: none; }

/* ------------------------------ newsletter ------------------------------ */
.news { position: relative; overflow: hidden; }
.news__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.news__t { font-size: clamp(2.4rem, 5.4vw, 5.2rem); }
.news__d { margin-top: 1.5rem; max-width: 32rem; }
.news__form { display: flex; align-items: stretch; border-bottom: 1px solid var(--ink); margin-top: clamp(2rem, 4vw, 3.5rem); max-width: 32rem; }
.news__form input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 1rem 0; font-size: 1rem; outline: none; }
.news__form input::placeholder { color: var(--ink-3); }
.news__form button { display: inline-flex; align-items: center; gap: .6rem; padding-inline: 1.2rem; font-size: .85rem; font-weight: 600; color: var(--ember); }
.news__form button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.news__ok { margin-top: 1.2rem; font-size: .85rem; color: var(--ember); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s var(--ease); }
.news__ok.is-on { opacity: 1; transform: none; }
.news__art { width: 100%; }

/* ------------------------------ footer ------------------------------ */
.site-foot { border-top: 1px solid var(--line); padding-top: clamp(4rem, 7vw, 7rem); }
.foot__big { font-family: var(--serif); font-size: clamp(5rem, 20vw, 20rem); font-weight: 700; line-height: .82; letter-spacing: -.05em; color: var(--ink); opacity: .94; }
.foot__big em { font-style: normal; color: var(--ember); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(3rem, 5vw, 5rem); }
.foot__note { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.5; max-width: 16ch; }
.foot__col h4 { font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 1.4rem; }
.foot__col a, .foot__col p { display: block; font-size: .9rem; color: var(--ink-2); padding-block: .35rem; transition: color .35s, transform .35s var(--ease); }
.foot__col a:hover { color: var(--ember); transform: translateX(5px); }
.foot__bot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-block: 1.6rem; font-size: .74rem; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.to-top { display: inline-flex; align-items: center; gap: .6rem; }
.to-top svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ------------------------------ page / article ------------------------------ */
.page-hero { padding-top: clamp(9rem, 15vw, 14rem); padding-bottom: clamp(3rem, 6vw, 6rem); border-bottom: 1px solid var(--line); }
.page-hero__top { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.8rem; }
.page-hero h1 { font-size: clamp(3rem, 9vw, 8.5rem); }
.page-hero__sub { margin-top: 1.8rem; max-width: 42rem; }
.page-hero__art { position: absolute; right: 2%; top: 22%; width: clamp(12rem, 24vw, 26rem); opacity: .3; pointer-events: none; }

.prose { max-width: 46rem; margin-inline: auto; font-size: clamp(1.02rem, 1.18vw, 1.16rem); line-height: 2.05; color: var(--ink-2); }
.prose > * + * { margin-top: 1.7rem; }
.prose h2 { font-family: var(--serif); font-size: clamp(1.7rem, 2.8vw, 2.5rem); font-weight: 700; color: var(--ink); line-height: 1.4; margin-top: 3.2rem; letter-spacing: -.01em; }
.prose h3 { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 700; color: var(--ink); margin-top: 2.4rem; }
.prose p { text-wrap: pretty; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--ember); border-bottom: 1px solid var(--ember); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { position: relative; padding-left: 1.2rem; margin-top: .7rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .95em; width: 5px; height: 5px; border-radius: 50%; background: var(--ember); }
.prose ol { counter-reset: ol; }
.prose ol li { counter-increment: ol; }
.prose ol li::before { content: counter(ol, decimal-leading-zero); position: absolute; left: -1.4rem; font-family: var(--serif); font-size: .8rem; color: var(--ember); }
.prose blockquote { font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 700; line-height: 1.6; color: var(--ink); border-left: 2px solid var(--ember); padding-left: 1.8rem; margin-block: 2.8rem; }
.prose hr { height: 1px; background: var(--line); border: 0; margin-block: 3rem; }
.prose .dropcap::first-letter, .prose.has-drop > p:first-of-type::first-letter { font-family: var(--serif); float: left; font-size: 4.2em; line-height: .82; padding: .08em .14em 0 0; color: var(--ember); font-weight: 700; }

.article-head { padding-top: clamp(9rem, 14vw, 13rem); }
.article-head h1 { font-size: clamp(2.6rem, 6.5vw, 6rem); max-width: 22ch; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 2.2rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.article-meta span { display: inline-flex; align-items: center; gap: .5rem; }
.article-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--ember); }
.article-art { margin-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2); display: grid; place-items: center; padding: clamp(1rem, 3vw, 3rem); }
.article-art .ef { width: min(100%, 34rem); }
.article-body { padding-block: clamp(3.5rem, 7vw, 7rem); }
.article-foot { border-top: 1px solid var(--line); padding-block: clamp(3rem, 5vw, 5rem); }
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.related__card { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.related__card .ef { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 1.2rem; background: var(--paper-2); }
.related__card h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; line-height: 1.45; transition: color .35s; }
.related__card:hover h3 { color: var(--ember); }
.related__card small { display: block; margin-top: .7rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.archive-list { border-top: 1px solid var(--line); }
.empty-note { padding-block: 4rem; color: var(--ink-3); }

.e404 { min-height: 80svh; display: grid; place-items: center; text-align: center; position: relative; }
.e404__n { font-family: var(--serif); font-size: clamp(9rem, 28vw, 26rem); font-weight: 700; line-height: .8; letter-spacing: -.06em; color: var(--ink); opacity: .07; }
.e404__in { position: absolute; }
.e404__in h1 { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 1rem; }

/* ------------------------------ reveal ------------------------------ */
[data-reveal] { opacity: 0; transform: translateY(30px); filter: blur(6px); transition: opacity .95s var(--ease), transform 1.05s var(--ease), filter .95s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
[data-reveal="mask"] { clip-path: inset(0 100% 0 0); opacity: 1; transform: none; filter: none; transition: clip-path 1.1s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }

/* ------------------------------ responsive ------------------------------ */
@media (max-width: 1180px) {
  .sec__head { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 15rem); }
  .jrow { grid-template-columns: 3rem 7rem minmax(0, 1.1fr) minmax(0, .85fr) 4rem 2.2rem; }
  .jrow__ex { display: none; }
  .col-row__ghost { display: none; }
}
@media (max-width: 980px) {
  .hero { padding-top: 8rem; min-height: auto; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { position: absolute; right: -14%; top: 4%; width: 62%; opacity: .35; z-index: 0; }
  .hero__copy { padding-block: 4rem 6rem; }
  .hero__rail { margin-top: 1rem; }
  .foot__grid { grid-template-columns: repeat(2, 1fr); }
  .quote__in { grid-template-columns: 4rem 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 820px) {
  .nav, .head__tools .btn-cta { display: none; }
  .btn-menu { display: grid; }
  .sec__head { grid-template-columns: 3rem 1fr; }
  .sec__aside { grid-column: 2; }
  .manifesto__in, .news__in { grid-template-columns: 1fr; }
  .news__art { display: none; }
  .col-row { grid-template-columns: 3rem 1fr 2.6rem; }
  .col-row__d { display: none; }
  .jrow { grid-template-columns: 2.6rem minmax(0, 1fr) 2.2rem; gap: 1rem; }
  .jrow__cat, .jrow__time, .jrow__ex { display: none; }
  .related { grid-template-columns: 1fr; }
  .quote__in { grid-template-columns: 1fr; }
  .quote__mark { font-size: 5rem; }
}
@media (max-width: 620px) {
  :root { --fs-hero: clamp(3.1rem, 15vw, 5rem); }
  .hero h1 .l2 { padding-left: 1.5rem; }
  .hero__art { width: 82%; right: -24%; top: 2%; opacity: .22; }
  .hero__rail { flex-wrap: wrap; gap: .8rem 1.5rem; font-size: .6rem; }
  .hero__rail .hide-sm { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__big { font-size: 26vw; }
  .rail__item { flex-basis: 78vw; }
  .col-row { padding-block: 1.3rem; }
  .jrow { padding-block: 1.2rem; }
  .article-meta { gap: .7rem; font-size: .7rem; }
  .prose blockquote { padding-left: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}
@media print {
  .site-head, .site-foot, #cur-dot, #cur-ring, #progress, .rail__ctrl, .news__form { display: none !important; }
  body { background: #fff; color: #000; }
}