:root {
  --ink: #22151a;
  --ink-soft: #3d2d33;
  --paper: #f3ede5;
  --paper-deep: #e8ded2;
  --white: #fffaf5;
  --red: #b44755;
  --red-dark: #7d2638;
  --orange: #e78349;
  --sage: #84928b;
  --line: rgba(34, 21, 26, .2);
  --serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 92px;
  padding: 12px clamp(20px, 4vw, 72px);
  color: var(--white);
  background: rgba(34, 21, 26, .94);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}
.brand-lockup { display: flex; align-items: center; gap: 12px; min-width: 214px; }
.brand-lockup img { width: 54px; height: 54px; object-fit: contain; background: #fff7ef; border-radius: 50%; padding: 8px; }
.brand-lockup strong { display: block; font-size: 20px; letter-spacing: .14em; }
.brand-lockup span { display: block; margin-top: 2px; color: #d9c9c5; font-size: 9px; letter-spacing: .18em; }
.primary-nav { display: flex; justify-content: flex-end; gap: clamp(14px, 1.8vw, 32px); overflow-x: auto; scrollbar-width: none; }
.primary-nav::-webkit-scrollbar { display: none; }
.primary-nav a { flex: 0 0 auto; color: #efe4df; font-size: 14px; text-decoration: none; white-space: nowrap; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: #ffad73; }

.hero { position: relative; min-height: min(780px, calc(100svh - 92px)); color: var(--white); overflow: hidden; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,12,16,.92) 0%, rgba(34,21,26,.68) 43%, rgba(34,21,26,.18) 78%), linear-gradient(0deg, rgba(34,21,26,.5), transparent 48%); }
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(26px, .3fr) minmax(520px, 1.5fr) minmax(230px, .55fr);
  align-items: end;
  gap: 50px;
  min-height: min(780px, calc(100svh - 92px));
  padding: clamp(70px, 9vw, 140px) clamp(22px, 5vw, 88px) clamp(50px, 7vw, 100px);
}
.hero-kicker { align-self: center; writing-mode: vertical-rl; color: #f4b08c; font-size: 11px; letter-spacing: .35em; }
.eyebrow, .section-index { margin: 0 0 18px; color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .22em; }
.hero .eyebrow { color: #ffb07e; }
.hero h1 { max-width: 920px; margin: 0; font-family: var(--serif); font-size: clamp(46px, 6.5vw, 104px); font-weight: 500; line-height: 1.04; letter-spacing: -.05em; }
.hero h1 em { display: block; margin-top: 20px; font-family: var(--sans); font-size: .34em; font-style: normal; font-weight: 600; letter-spacing: .04em; line-height: 1.55; }
.hero-copy > p:last-child { max-width: 760px; margin: 28px 0 0; color: #eaded8; font-size: clamp(16px, 1.35vw, 21px); }
.hero-note { padding: 28px 0 8px 26px; border-left: 1px solid rgba(255,255,255,.4); }
.hero-note span { display: block; color: #d9c8c1; font-size: 12px; letter-spacing: .16em; }
.hero-note strong { display: block; margin-top: 8px; font-family: var(--serif); font-size: 26px; font-weight: 500; }
.hero-note p { margin: 12px 0 0; color: #d9c8c1; font-size: 14px; }

.chapter-rail { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: var(--white); }
.chapter-rail > div { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; padding: 30px clamp(18px, 3vw, 48px); border-right: 1px solid var(--line); }
.chapter-rail > div:last-child { border-right: 0; }
.chapter-rail span { grid-row: 1 / 3; color: var(--red); font-family: var(--serif); font-size: 32px; line-height: 1; }
.chapter-rail strong { font-size: 15px; }
.chapter-rail small { color: #796c70; font-size: 12px; }

.section-space { padding: clamp(80px, 10vw, 160px) clamp(22px, 5vw, 90px); }
.brand-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(44px, 7vw, 120px); align-items: center; }
.feature-image { position: relative; padding: 0 0 40px 40px; }
.feature-image::before { content: ""; position: absolute; inset: 40px 40px 0 0; border: 1px solid var(--red); }
.feature-image img { position: relative; z-index: 1; aspect-ratio: 16/10; width: 100%; object-fit: cover; }
.feature-image p { position: relative; z-index: 2; display: inline-block; margin: -22px 0 0 48px; padding: 12px 18px; color: #fff; background: var(--red-dark); font-size: 11px; letter-spacing: .16em; }
.feature-copy h2, .editorial-heading h2, .service-intro h2, .archive-heading h2, .faq-section h2 { margin: 0; font-family: var(--serif); font-size: clamp(38px, 5vw, 72px); font-weight: 500; line-height: 1.18; letter-spacing: -.035em; }
.feature-copy > p:not(.section-index) { max-width: 720px; color: #695b60; font-size: 17px; }
.definition-list { margin-top: 38px; border-top: 1px solid var(--line); }
.definition-list article { display: grid; grid-template-columns: minmax(140px, .45fr) 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.definition-list h3 { margin: 0; font-size: 16px; }
.definition-list p { margin: 0; color: #74676b; font-size: 14px; }

.editorial-board { background: var(--white); }
.editorial-heading { display: grid; grid-template-columns: .35fr 1fr .75fr; gap: 32px; align-items: end; margin-bottom: 52px; }
.editorial-heading .section-index { align-self: start; }
.editorial-heading > p:last-child { margin: 0; color: #716369; }
.editorial-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(180px, auto); gap: 18px; }
.story { position: relative; overflow: hidden; min-height: 310px; background: var(--ink); color: var(--white); }
.story img { width: 100%; height: 100%; object-fit: cover; }
.story > div { position: absolute; inset: auto 0 0; padding: 60px 28px 26px; background: linear-gradient(transparent, rgba(22,11,16,.92)); }
.story span { color: #ffb07e; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.story h3 { margin: 6px 0 8px; font-family: var(--serif); font-size: 30px; font-weight: 500; }
.story p { margin: 0; color: #e7dad5; font-size: 14px; }
.story-wide { grid-column: span 7; grid-row: span 2; min-height: 640px; }
.story:not(.story-wide):not(.story-text):not(.story-image-only) { grid-column: span 5; }
.story-text { grid-column: span 3; display: flex; flex-direction: column; justify-content: end; padding: 28px; color: var(--ink); background: var(--paper-deep); }
.story-text.accent { background: var(--red-dark); color: var(--white); }
.story-image-only { grid-column: span 6; }
.story-image-only p { position: absolute; right: 18px; bottom: 14px; left: 18px; padding: 10px 12px; color: #fff; background: rgba(34,21,26,.74); font-size: 12px; }

.watch-manifesto { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); background: var(--ink); color: var(--white); }
.watch-image img { width: 100%; height: 100%; min-height: 760px; object-fit: cover; }
.watch-copy { padding: clamp(70px, 8vw, 130px) clamp(30px, 6vw, 100px); }
.section-index.light { color: #ffad73; }
.watch-copy h2 { margin: 0; font-family: var(--serif); font-size: clamp(44px, 5vw, 78px); font-weight: 500; line-height: 1.1; }
.watch-copy .lead { max-width: 620px; margin: 28px 0 50px; color: #d9c9c5; font-size: 18px; }
.rule-list article { display: grid; grid-template-columns: 48px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.2); }
.rule-list article:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
.rule-list span { color: #ffad73; font-family: var(--serif); font-size: 28px; }
.rule-list h3 { margin: 0 0 8px; font-size: 17px; }
.rule-list p { margin: 0; color: #c7b8b4; font-size: 14px; }

.service-notes { display: grid; grid-template-columns: .6fr 1.4fr; gap: clamp(50px, 8vw, 130px); }
.service-intro p:not(.section-index) { color: #706168; }
.service-columns { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-columns section { padding: 40px; }
.service-columns section + section { border-left: 1px solid var(--line); }
.service-number { margin: 0 0 46px; color: var(--red); font-family: var(--serif); font-size: 64px; line-height: 1; }
.service-columns h3 { margin: 0; font-family: var(--serif); font-size: 32px; font-weight: 500; }
.service-columns p { color: #6e6065; }
.service-columns ul { margin: 28px 0 0; padding: 0; list-style: none; }
.service-columns li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }

.access-desk { display: grid; grid-template-columns: .88fr 1.12fr; min-height: 720px; background: var(--red-dark); color: var(--white); }
.access-visual img { width: 100%; height: 100%; min-height: 720px; object-fit: cover; }
.access-content { padding: clamp(70px, 8vw, 120px); }
.access-content h2 { margin: 0; font-family: var(--serif); font-size: clamp(48px, 6vw, 86px); font-weight: 500; line-height: 1; }
.access-content > p:not(.section-index) { max-width: 820px; color: #eededb; font-size: 17px; }
.access-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 46px; border-top: 1px solid rgba(255,255,255,.28); border-left: 1px solid rgba(255,255,255,.28); }
.access-grid article { min-height: 150px; padding: 24px; border-right: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); }
.access-grid span { color: #ffc09a; font-weight: 700; }
.access-grid p { margin: 8px 0 0; color: #e5cfcb; font-size: 13px; }

.archive-section { background: #e5d6ca; }
.archive-heading { display: grid; grid-template-columns: .35fr 1.65fr; align-items: start; margin-bottom: 44px; }
.archive-body { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: stretch; }
.archive-copy { display: flex; flex-direction: column; }
.large-copy { margin: 0 0 28px; font-family: var(--serif); font-size: clamp(24px, 3vw, 42px); line-height: 1.5; }
.archive-copy > p:not(.large-copy) { color: #68585e; }
.archive-body img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.brand-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: auto; padding-top: 34px; border-top: 1px solid var(--line); }
.brand-facts div { padding-right: 18px; }
.brand-facts span { display: block; color: #7c6d72; font-size: 11px; }
.brand-facts strong { display: block; margin-top: 8px; font-size: 15px; }

.faq-section { display: grid; grid-template-columns: .55fr 1.45fr; gap: 70px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.faq-grid article { padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-grid h3 { margin: 0 0 12px; font-size: 17px; }
.faq-grid p { margin: 0; color: #706168; font-size: 14px; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; padding: 50px clamp(22px, 5vw, 90px); color: #dfd0cc; background: var(--ink); }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 46px; height: 46px; object-fit: contain; padding: 6px; background: #fff5ee; border-radius: 50%; }
.footer-brand strong, .footer-brand span { display: block; }
.footer-brand strong { color: #fff; font-size: 20px; }
.footer-brand span { font-size: 12px; }
.footer-copy { text-align: right; font-size: 12px; }
.footer-copy p { margin: 4px 0; }

@media (max-width: 1100px) {
  .masthead { grid-template-columns: 1fr; gap: 12px; padding-block: 12px; }
  .primary-nav { justify-content: flex-start; }
  html { scroll-padding-top: 132px; }
  .hero-grid { grid-template-columns: 30px 1fr; }
  .hero-note { display: none; }
  .editorial-heading, .service-notes, .faq-section { grid-template-columns: 1fr; }
  .editorial-heading { align-items: start; }
  .editorial-heading h2 { max-width: 760px; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 132px; }
  .masthead { position: relative; }
  .brand-lockup img { width: 44px; height: 44px; }
  .primary-nav { margin-right: -20px; padding-right: 20px; }
  .hero, .hero-grid { min-height: 650px; }
  .hero-grid { grid-template-columns: 1fr; align-content: end; }
  .hero-kicker { display: none; }
  .hero-shade { background: linear-gradient(0deg, rgba(24,12,17,.95) 0%, rgba(34,21,26,.25) 78%); }
  .hero h1 { font-size: clamp(42px, 13vw, 68px); }
  .chapter-rail { grid-template-columns: 1fr 1fr; }
  .chapter-rail > div:nth-child(2) { border-right: 0; }
  .chapter-rail > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .brand-feature, .watch-manifesto, .access-desk, .archive-body { grid-template-columns: 1fr; }
  .feature-image { padding: 0 0 24px 24px; }
  .editorial-grid { grid-template-columns: 1fr; }
  .story-wide, .story:not(.story-wide):not(.story-text):not(.story-image-only), .story-text, .story-image-only { grid-column: auto; min-height: 380px; }
  .watch-image img, .access-visual img { min-height: 420px; }
  .service-columns { grid-template-columns: 1fr; }
  .service-columns section + section { border-left: 0; border-top: 1px solid var(--line); }
  .archive-heading { grid-template-columns: 1fr; }
  .brand-facts, .faq-grid { grid-template-columns: 1fr; }
  .faq-grid article { border-right: 0; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-copy { text-align: left; }
}

@media (max-width: 520px) {
  .brand-lockup span { display: none; }
  .hero-copy > p:last-child { font-size: 15px; }
  .chapter-rail { grid-template-columns: 1fr; }
  .chapter-rail > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .definition-list article { grid-template-columns: 1fr; }
  .service-columns section { padding: 30px 18px; }
  .access-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}