:root {
  --coal: #100f0e;
  --coal-deep: #090807;
  --ink: #191614;
  --ink-soft: #211c18;
  --paper: #cbbda7;
  --paper-bright: #f0e3cd;
  --paper-dim: #a59582;
  --muted: #756a5e;
  --rule: #4d4036;
  --rust: #bd5742;
  --rust-bright: #e0765a;
  --blue: #6d9caf;
  --blue-dim: #466c7a;
  --ochre: #c5a56d;
  --olive: #92986d;
  --body-serif: "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
  --old-serif: "ＭＳ 明朝", "MS Mincho", "Yu Mincho", serif;
  --old-mono: "ＭＳ ゴシック", "MS Gothic", "Osaka-Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { background: var(--coal-deep); scroll-behavior: smooth; }
::selection { color: var(--paper-bright); background: var(--rust); }
body {
  position: relative;
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 82% 5%, rgba(109, 156, 175, .09), transparent 25rem),
    linear-gradient(180deg, #1a1512 0, var(--coal) 32rem, var(--coal-deep) 100%);
  font-family: var(--body-serif);
  line-height: 1.9;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: 10;
  border: 1px solid rgba(240, 227, 205, .09);
  content: '';
  pointer-events: none;
}
a { color: inherit; }
a:focus-visible { outline: 1px solid var(--ochre); outline-offset: 4px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin-top: 0; }

.room-shell { position: relative; min-height: 100vh; overflow: visible; }
.room-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  padding: 18px 0 13px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--old-mono);
  font-size: .73rem;
  letter-spacing: .04em;
}
.room-header::after { position: absolute; right: 0; bottom: -4px; width: 84px; border-bottom: 3px double var(--rust); content: ''; }
.room-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.room-brand-mark { display: grid; place-items: center; width: 44px; height: 44px; padding: 2px; border: 1px solid var(--rust); background: #e7dbc6; box-shadow: 4px 4px 0 rgba(0, 0, 0, .3); transform: rotate(-3deg); }
.room-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.room-brand span:last-child { color: var(--paper-bright); font-family: var(--old-serif); font-size: 1rem; letter-spacing: .14em; }
.room-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.room-nav a { color: var(--paper-dim); text-decoration: none; text-underline-offset: 4px; }
.room-nav a::before { margin-right: 5px; color: var(--rust); content: '·'; }
.room-nav a:hover, .room-nav a:focus-visible { color: var(--paper-bright); text-decoration: underline; text-decoration-style: dotted; }

.room-main { width: min(1100px, calc(100% - 48px)); margin: 0 auto; }
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 245px;
  align-items: end;
  gap: clamp(35px, 8vw, 110px);
  margin-top: 28px;
  padding: 48px 52px 52px;
  border-top: 4px solid var(--rust);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  background: linear-gradient(130deg, rgba(38, 28, 23, .95), rgba(15, 15, 15, .92));
  box-shadow: 11px 11px 0 rgba(0, 0, 0, .3);
}
.hero::before { position: absolute; top: 17px; right: 22px; color: var(--blue); content: 'FIELD NOTE 001 / PRIVATE INDEX'; font: .62rem/1 var(--old-mono); letter-spacing: .1em; }
.hero::after { position: absolute; right: 52px; bottom: 28px; left: 52px; border-bottom: 1px dotted rgba(197, 165, 109, .35); content: ''; }
.hero-copy { position: relative; z-index: 1; max-width: 690px; }
.eyebrow, .section-label, .article-kicker, .meta, .tag, .note-label { color: var(--ochre); font-family: var(--old-mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow { display: inline-block; margin: 0 0 24px; padding-bottom: 7px; border-bottom: 1px solid var(--ochre); }
.hero-warning { margin: 0 0 12px; color: var(--rust-bright); font: .69rem/1.5 var(--old-mono); letter-spacing: .08em; }
.hero-warning span { display: inline-block; margin-right: 8px; color: var(--ochre); font-size: .8rem; }
.hero h1 { max-width: 8em; margin-bottom: 23px; color: var(--paper-bright); font-family: var(--old-serif); font-size: clamp(3.4rem, 8vw, 6.8rem); font-weight: 500; letter-spacing: .02em; line-height: 1.02; text-shadow: 3px 3px 0 rgba(189, 87, 66, .18); }
.hero .lead { max-width: 35em; margin-bottom: 15px; color: var(--paper); font-size: clamp(.98rem, 1.35vw, 1.12rem); }
.hero-note { max-width: 43em; margin-bottom: 0; color: var(--paper-dim); font-size: .83rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 26px; }
.tag { padding: 4px 8px 4px 7px; border-left: 2px solid var(--rust); color: var(--paper); background: rgba(197, 165, 109, .06); }
.hero-art { position: relative; z-index: 1; align-self: center; margin: 30px 0 0; padding: 14px 14px 10px; border: 1px solid var(--ochre); background: #e6d9c2; box-shadow: 7px 7px 0 rgba(0, 0, 0, .38); transform: rotate(2.5deg); }
.hero-art img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.hero-art figcaption { margin: 10px 0 0; color: #3d3029; font: .61rem/1.5 var(--old-mono); }

.section { padding: clamp(74px, 9vw, 112px) 0 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 31%); align-items: end; gap: 32px; margin-bottom: 30px; padding-bottom: 17px; border-bottom: 1px solid var(--rule); }
.section-head h2 { margin-bottom: 0; color: var(--paper-bright); font-family: var(--old-serif); font-size: clamp(2rem, 4vw, 3.35rem); font-weight: 500; letter-spacing: .02em; line-height: 1.2; }
.section-head p { max-width: 32em; margin-bottom: 0; color: var(--paper-dim); font-size: .88rem; }
.section-label { margin-bottom: 9px; color: var(--rust-bright); }
.section-label::before { margin-right: 6px; color: var(--ochre); content: '//'; }
.article-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.article-card { position: relative; display: flex; grid-column: span 4; flex-direction: column; min-width: 0; overflow: hidden; background: var(--ink); border-top: 3px solid var(--blue-dim); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); box-shadow: 7px 7px 0 rgba(0, 0, 0, .23); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.article-card:nth-child(1) { grid-column: span 6; border-top-color: var(--rust); }
.article-card:nth-child(2) { grid-column: span 3; margin-top: 28px; border-top-color: var(--ochre); }
.article-card:nth-child(3) { grid-column: span 3; border-top-color: var(--olive); }
.article-card::before { position: absolute; top: 13px; right: 14px; z-index: 3; width: 25px; border-top: 2px solid var(--rust); content: ''; transform: rotate(-4deg); }
.article-card:hover, .article-card:focus-visible { border-color: var(--paper-dim); box-shadow: 11px 11px 0 rgba(0, 0, 0, .38); transform: translate(-2px, -4px); }
.article-card:nth-child(2):hover, .article-card:nth-child(2):focus-visible { transform: translate(-2px, 23px); }
.article-card-image { position: relative; aspect-ratio: 1.38 / 1; overflow: hidden; border-bottom: 1px solid var(--rule); background: #201c18; }
.article-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.article-card-image::before { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 9, 8, .04) 46%, rgba(10, 9, 8, .6)); content: ''; pointer-events: none; }
.article-card-image::after { position: absolute; inset: 9px; z-index: 2; border: 1px solid rgba(240, 227, 205, .3); content: ''; pointer-events: none; }
.article-card:hover .article-card-image img, .article-card:focus-visible .article-card-image img { transform: scale(1.04); }
.archive-section { padding-top: 88px; }
.archive-section .article-card:nth-child(1) { grid-column: span 5; }
.archive-section .article-card:nth-child(2) { grid-column: span 4; }
.archive-section .article-card:nth-child(3) { grid-column: span 3; }
.archive-card-image { display: block; aspect-ratio: 1.25 / 1; padding: 0; color: var(--paper-bright); font-family: var(--old-mono); }
.archive-card-image img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .88; }
.archive-card-image::before { background: linear-gradient(145deg, rgba(10, 8, 7, .55), transparent 53%), linear-gradient(0deg, rgba(10, 8, 7, .42), transparent 54%); }
.archive-card-code { position: absolute; top: 18px; left: 18px; z-index: 3; color: var(--ochre); font-size: .61rem; letter-spacing: .1em; line-height: 1.65; }
.archive-card-glyph { position: absolute; right: 18px; bottom: 12px; z-index: 3; color: var(--rust-bright); font-family: var(--old-serif); font-size: 4.7rem; line-height: .9; text-shadow: 2px 2px 0 rgba(0, 0, 0, .45); }
.archive-card-flannan { background: radial-gradient(circle at 68% 74%, rgba(197, 165, 109, .5), transparent 10%), linear-gradient(160deg, #24343b, #171310 64%); }
.archive-card-woolpit { background: radial-gradient(circle at 66% 75%, rgba(146, 152, 109, .48), transparent 14%), linear-gradient(145deg, #34352b, #171310 62%); }
.archive-card-volga { background: radial-gradient(ellipse at 64% 76%, rgba(183, 183, 165, .3), transparent 12%), linear-gradient(160deg, #302b2b, #100e0d 62%); }
.archive-card-saki { border-top-color: var(--rust); background: #201513; }
.archive-card-song { border-top-color: var(--ochre); background: #211b15; }
.archive-card-cicada { border-top-color: var(--blue); background: #151b20; }
.archive-card-air { border-top-color: var(--rust); background: #21171b; }
.archive-card-polybius { border-top-color: var(--blue); background: #171a1b; }
.archive-card-ben { border-top-color: var(--ochre); background: #191818; }
.urban-grid .article-card:nth-child(1) { grid-column: span 7; }
.urban-grid .article-card:nth-child(2) { grid-column: span 5; margin-top: 37px; }
.urban-grid .article-card:nth-child(3) { grid-column: 3 / span 8; margin-top: 12px; }
.article-card-copy { display: flex; flex: 1; flex-direction: column; padding: 19px 21px 23px; }
.article-kicker { color: var(--blue); }
.article-card h3 { margin: 11px 0 10px; color: var(--paper-bright); font-family: var(--old-serif); font-size: clamp(1.23rem, 2vw, 1.65rem); font-weight: 500; line-height: 1.42; }
.article-card p { margin-bottom: 20px; color: var(--paper-dim); font-size: .88rem; }
.read-more { margin-top: auto; padding-top: 12px; border-top: 1px dotted var(--rule); color: var(--rust-bright); font-family: var(--old-mono); font-size: .72rem; letter-spacing: .06em; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }

.manifesto { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; margin: 93px 0 112px; padding: 35px 38px 40px; border: 1px solid var(--rule); border-top: 3px double var(--ochre); background: rgba(35, 28, 23, .75); box-shadow: 8px 8px 0 rgba(0, 0, 0, .2); }
.manifesto h2 { margin-bottom: 20px; color: var(--paper-bright); font-family: var(--old-serif); font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 500; line-height: 1.28; }
.manifesto-copy { color: var(--paper-dim); font-size: 1rem; }
.manifesto-notes { display: grid; gap: 12px; }
.note { display: grid; grid-template-columns: 112px 1fr; gap: 18px; padding: 17px 0; border-top: 1px dotted var(--rule); }
.note-label { color: var(--ochre); }
.note p { margin-bottom: 0; color: var(--paper-dim); font-size: .89rem; }

.room-footer { border-top: 3px double var(--rule); }
.room-footer-inner { display: flex; justify-content: space-between; gap: 20px; width: min(1100px, calc(100% - 48px)); margin: 0 auto; padding: 23px 0 42px; color: var(--muted); font-family: var(--old-mono); font-size: .69rem; }
.room-footer a { color: var(--paper-dim); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.room-footer a:hover { color: var(--rust-bright); }

.article-page .room-main { max-width: 1100px; }
.article-hero { padding: 58px 0 39px; border-bottom: 1px solid var(--rule); }
.article-hero h1 { max-width: 16em; margin: 14px 0 17px; color: var(--paper-bright); font-family: var(--old-serif); font-size: clamp(2.55rem, 6vw, 5.2rem); font-weight: 500; letter-spacing: .01em; line-height: 1.23; text-shadow: 2px 2px 0 rgba(189, 87, 66, .2); }
.article-hero .dek { max-width: 43em; color: var(--paper-dim); font-size: 1.05rem; }
.article-hero .meta { margin-bottom: 0; color: var(--muted); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 258px; gap: clamp(34px, 7vw, 82px); align-items: start; padding: 52px 0 112px; }
.article-visual { position: relative; margin: 0 0 44px; padding: 8px 8px 0; border: 1px solid var(--rule); background: #211c18; box-shadow: 7px 7px 0 rgba(0, 0, 0, .28); transform: rotate(-.25deg); }
.article-visual::after { position: absolute; inset: 8px 8px 32px; border: 1px solid rgba(240, 227, 205, .25); content: ''; pointer-events: none; }
.article-visual img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.archive-visual { position: relative; min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 27px; color: var(--paper-bright); font-family: var(--old-mono); }
.archive-visual::before { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(240, 227, 205, .035) 18px 19px), radial-gradient(circle at 75% 72%, rgba(189, 87, 66, .25), transparent 18%); content: ''; }
.archive-visual::after { position: absolute; inset: 14px; border: 1px solid rgba(240, 227, 205, .3); content: ''; pointer-events: none; }
.archive-visual-code, .archive-visual strong, .archive-visual i { position: relative; z-index: 1; }
.archive-visual-code { color: var(--ochre); font-size: .66rem; letter-spacing: .13em; line-height: 1.7; }
.archive-visual strong { align-self: center; color: var(--rust-bright); font-family: var(--old-serif); font-size: clamp(3.2rem, 9vw, 5.8rem); font-weight: 500; letter-spacing: .08em; line-height: 1; text-align: center; text-shadow: 3px 3px 0 rgba(0, 0, 0, .42); }
.archive-visual i { align-self: flex-end; color: var(--paper-dim); font-size: .72rem; font-style: normal; letter-spacing: .13em; }
.archive-visual-flannan { background: radial-gradient(circle at 72% 68%, rgba(197, 165, 109, .58), transparent 7%), linear-gradient(160deg, #263e48, #14110f 64%); }
.archive-visual-woolpit { background: radial-gradient(circle at 70% 68%, rgba(146, 152, 109, .5), transparent 12%), linear-gradient(145deg, #3a3b2d, #171310 65%); }
.archive-visual-volga { background: radial-gradient(ellipse at 71% 70%, rgba(186, 188, 177, .36), transparent 8%), linear-gradient(160deg, #393130, #0e0d0c 63%); }
.article-visual figcaption { margin: 8px 0 5px; color: var(--muted); font-family: var(--old-mono); font-size: .65rem; letter-spacing: .01em; }
.article-body { color: var(--paper); font-size: 1.02rem; }
.article-body p { margin-bottom: 1.55em; }
.article-body h2 { margin: 2.35em 0 .75em; color: var(--paper-bright); font-family: var(--old-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.5; }
.article-body h2::before { margin-right: 8px; color: var(--rust-bright); content: '—'; }
.article-body blockquote { margin: 2.25em 0; padding: 19px 23px; border: 1px dashed rgba(197, 165, 109, .5); border-left: 3px solid var(--rust); background: rgba(189, 87, 66, .08); color: var(--paper-bright); font-family: var(--old-serif); font-size: 1.09rem; }
.evidence { margin-top: 37px; padding: 20px 22px; border: 1px dotted var(--rule); border-left: 3px solid var(--ochre); background: rgba(197, 165, 109, .06); }
.evidence h3 { margin-bottom: 10px; color: var(--ochre); font-family: var(--old-mono); font-size: .68rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.evidence p { margin-bottom: 0; color: var(--paper-dim); font-size: .84rem; }
.evidence a { color: var(--blue); }
.article-comments { margin-top: 59px; padding-top: 30px; border-top: 3px double var(--rule); }
.article-comments-heading { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 5px 18px; margin-bottom: 18px; }
.article-comments-heading .section-label { grid-column: 1 / -1; margin-bottom: 0; }
.article-comments-heading h2 { margin: 0; color: var(--paper-bright); font-family: var(--old-serif); font-size: 1.55rem; font-weight: 500; line-height: 1.35; }
.article-comments-heading p:last-child { max-width: 26em; margin: 0; color: var(--muted); font-size: .84rem; }
.comments-frame { display: block; width: 100%; min-height: 720px; border: 1px solid var(--rule); border-top-color: var(--rust); background: var(--ink); }
.ad-slot { display: none; min-height: 90px; margin: 34px 0; padding: 11px; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); background: rgba(197, 165, 109, .035); }
.ad-slot.is-active { display: block; }
.ad-slot::before { display: block; margin-bottom: 7px; color: var(--muted); content: 'ADVERTISEMENT / SPONSOR'; font: .6rem/1.4 var(--old-mono); letter-spacing: .1em; }
.policy-copy { max-width: 760px; padding: 12px 0 112px; color: var(--paper); font-size: .98rem; }
.policy-copy section { padding: 27px 0; border-top: 1px dotted var(--rule); }
.policy-copy h2 { margin: 0 0 12px; color: var(--paper-bright); font-family: var(--old-serif); font-size: 1.38rem; font-weight: 500; }
.policy-copy p { margin-bottom: 1.1em; }
.policy-copy p:last-child { margin-bottom: 0; }
.policy-copy a { color: var(--rust-bright); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.article-aside { position: sticky; top: 22px; padding-top: 2px; }
.aside-box { position: relative; padding: 26px 20px 20px; border: 1px dashed var(--rule); background: rgba(38, 29, 24, .82); box-shadow: 5px 5px 0 rgba(0, 0, 0, .22); transform: rotate(.45deg); }
.aside-box::before { position: absolute; top: 9px; left: 20px; color: var(--rust-bright); content: 'SIDE NOTE'; font: .61rem/1 var(--old-mono); letter-spacing: .12em; }
.aside-box h2 { margin-bottom: 13px; color: var(--paper-bright); font-family: var(--old-serif); font-size: 1rem; font-weight: 500; }
.aside-box p { margin-bottom: 0; color: var(--paper-dim); font-size: .84rem; }
.aside-links { display: grid; gap: 9px; margin-top: 28px; }
.aside-links a { color: var(--paper-dim); font-family: var(--old-mono); font-size: .75rem; text-decoration: underline; text-decoration-color: var(--rule); text-decoration-style: dotted; text-underline-offset: 4px; }
.aside-links a:hover { color: var(--rust-bright); }

@media (max-width: 860px) {
  .room-header { align-items: flex-start; flex-direction: column; }
  .room-nav { justify-content: flex-start; }
  .hero { grid-template-columns: 1fr 190px; padding: 42px 30px 48px; }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-card, .article-card:nth-child(1), .article-card:nth-child(2), .article-card:nth-child(3), .archive-section .article-card:nth-child(1), .archive-section .article-card:nth-child(2), .archive-section .article-card:nth-child(3), .urban-grid .article-card:nth-child(1), .urban-grid .article-card:nth-child(2), .urban-grid .article-card:nth-child(3) { grid-column: auto; margin-top: 0; }
  .manifesto { grid-template-columns: 1fr; gap: 42px; }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; order: 0; }
}

@media (max-width: 560px) {
  .room-header, .room-main, .room-footer-inner { width: min(100% - 32px, 1100px); }
  .room-header { padding: 16px 0 13px; }
  .room-nav { gap: 8px 13px; font-size: .68rem; }
  .hero { grid-template-columns: 1fr; gap: 28px; margin-top: 20px; padding: 34px 20px 39px; }
  .hero::before { position: static; order: -1; margin-bottom: -16px; }
  .hero::after { right: 20px; left: 20px; }
  .hero h1 { font-size: clamp(3.1rem, 17vw, 5rem); }
  .hero-art { justify-self: start; width: 170px; margin-top: 7px; }
  .section { padding-top: 74px; }
  .section-head { display: block; }
  .section-head > p { margin-top: 15px; }
  .article-grid { grid-template-columns: 1fr; }
  .manifesto { margin-top: 70px; margin-bottom: 82px; padding: 28px 21px 31px; }
  .note { grid-template-columns: 1fr; gap: 3px; }
  .article-hero { padding-top: 43px; }
  .article-hero h1 { font-size: clamp(2.3rem, 12vw, 4rem); }
  .article-ben-page .article-hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .article-layout { padding-top: 38px; }
  .article-comments-heading { display: block; }
  .article-comments-heading h2 { margin-top: 7px; }
  .article-comments-heading p:last-child { margin-top: 8px; }
  .comments-frame { min-height: 780px; }
  .room-footer-inner { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}