/* ============================================================
   CHINESE RADICALS · LANDING №1
   Brutalist newsprint · cream paper · pure ink · one vermilion scream
   ============================================================ */

:root{
  --paper:        #F1ECE0;
  --paper-deep:   #E7E0CE;
  --ink:          #0C0C0C;
  --ink-soft:     #2A2622;
  --red:          #D5251C;
  --rule:         3px;
  --rule-hard:    6px;
  --rule-mean:    10px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; }
html{ background:var(--paper); }
body{
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(25% - 1px),
      rgba(12,12,12,0.045) calc(25% - 1px),
      rgba(12,12,12,0.045) 25%
    ),
    radial-gradient(rgba(12,12,12,0.05) 1px, transparent 1px) 0 0 / 3px 3px,
    var(--paper);
  color:var(--ink);
  font-family:"PT Serif", "Tinos", Georgia, serif;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

/* paper grain overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(12,12,12,0.08) 1px, transparent 1.5px),
    radial-gradient(rgba(213,37,28,0.04) 1px, transparent 1.5px);
  background-size: 2px 2px, 5px 5px;
  background-position: 0 0, 1px 1px;
  mix-blend-mode:multiply;
  opacity:.55;
  z-index:1000;
}

/* ====== UTILITY TYPE ====== */
.display{
  font-family:"Anton","Archivo Black",Impact,sans-serif;
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:.88;
  text-transform:uppercase;
  margin:0;
  font-size:clamp(48px, 7vw, 110px);
}
.display--red{ color:var(--red); }

.filemark, .cta__pre, .masthead__bar, .hero__meta, .foot__nav{
  font-family:"JetBrains Mono","IBM Plex Mono", ui-monospace, monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  border-bottom:var(--rule-hard) solid var(--ink);
  padding:14px 36px;
}
.masthead__bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  gap:16px;
  flex-wrap:wrap;
}
.masthead__filemark{ color:var(--red); font-weight:700; }
.masthead__nav{ display:flex; gap:18px; }
.masthead__nav a:hover{ color:var(--red); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding:40px 36px 56px;
  position:relative;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap:48px;
  align-items:start;
}
.hero__headline{ position:relative; }
.hero__hanzi{
  font-family:"PT Serif",serif;
  font-weight:700;
  font-size:clamp(40px, 5vw, 64px);
  line-height:1;
  color:var(--red);
  letter-spacing:-0.02em;
  margin-bottom:6px;
}
.hero__wordmark{
  font-family:"Anton",Impact,sans-serif;
  font-weight:400;
  font-size:clamp(64px, 11vw, 140px);
  line-height:.85;
  letter-spacing:-0.02em;
  margin:0 0 24px;
}
.hero__amp{
  color:var(--red);
  display:inline-block;
  transform:translateY(-0.05em);
  padding:0 .04em;
}
.hero__deck{
  font-size:19px;
  line-height:1.45;
  max-width:38ch;
  margin:24px 0 28px;
  font-style:italic;
  padding-left:18px;
  border-left:var(--rule-hard) solid var(--red);
}
.hero__cta-row{
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
}
.hero__meta{
  font-size:11px;
  padding:8px 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}

.hero__plate{
  margin:0;
  position:relative;
}
.hero__plate img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border:var(--rule-hard) solid var(--ink);
  filter: contrast(1.08) saturate(1.05);
  background:var(--paper);
}
.hero__plate::after{
  content:"";
  position:absolute;
  inset:14px -14px -14px 14px;
  background:var(--red);
  z-index:-1;
}
.hero__plate figcaption{
  margin-top:10px;
  font-size:10px;
  border-top:1px solid var(--ink);
  padding-top:6px;
}

/* CTA */
.cta{
  display:inline-grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  background:var(--ink);
  color:var(--paper);
  padding:14px 22px;
  border:3px solid var(--ink);
  transition: transform .14s ease, background .14s ease;
  position:relative;
}
.cta::before{
  content:"";
  position:absolute;
  inset:6px -6px -6px 6px;
  background:var(--red);
  z-index:-1;
}
.cta:hover{
  transform:translate(-4px,-4px);
  background:var(--red);
  color:var(--paper);
}
.cta__pre{
  font-size:10px;
  letter-spacing:.14em;
  opacity:.85;
  text-align:left;
  line-height:1;
}
.cta__big{
  font-family:"Anton",Impact,sans-serif;
  font-size:26px;
  letter-spacing:-0.01em;
  line-height:1;
}
.cta__arrow{ display:block; width:22px; height:22px; flex:0 0 22px; }
.cta--small .cta__arrow{ width:18px; height:18px; flex:0 0 18px; }
.cta--small{ padding:10px 16px; margin-top:14px; }
.cta--small .cta__big{ font-size:20px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  padding:36px 36px 60px;
  background:var(--paper);
}
.foot__rule{
  height:0;
  border-top:var(--rule) solid var(--ink);
  border-bottom:var(--rule) solid var(--ink);
  margin-bottom:32px;
  padding-top:4px;
}
.foot__cols{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:28px;
  align-items:start;
}
.foot__col--right{ text-align:right; font-size:10px; line-height:1.8; }
.foot__col--right p{ margin:0; }
.foot__wordmark{
  font-family:"Anton",Impact,sans-serif;
  font-size:40px;
  margin:0;
  letter-spacing:-0.01em;
  line-height:.9;
}
.foot__sub{ margin:6px 0; font-size:14px; }
.foot__nav{
  list-style:none;
  margin:0; padding:0;
  font-size:13px;
  letter-spacing:.1em;
  display:flex;
  gap:32px;
  flex-wrap:wrap;
  border-top:var(--rule) solid var(--ink);
  padding-top:18px;
}
.foot__nav li{ padding:0; }
.foot__nav a::before{ content:"› "; color:var(--red); }
.foot__nav a:hover{ color:var(--red); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__plate{ max-width:520px; }
}

@media (max-width: 720px){
  .masthead, .hero, .foot{
    padding-left:20px; padding-right:20px;
  }
  .hero{ padding-top:28px; }
  .hero__deck{ font-size:17px; padding-left:14px; }
  .foot__cols{ grid-template-columns:1fr; }
  .foot__col--right{ text-align:left; }
  .cta__big{ font-size:22px; }
}

@media (max-width: 420px){
  body{ font-size:16px; }
  .hero__wordmark{ font-size:60px; }
  .cta{ width:100%; }
}

/* ============================================================
   DOC PAGES (privacy / terms / support)
   ============================================================ */
.nav{
  border-bottom:var(--rule-hard) solid var(--ink);
  padding:14px 36px;
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  font-family:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:11px;
}
.nav__brand{
  display:flex; align-items:center; gap:10px;
}
.nav__seal{
  display:inline-grid; place-items:center;
  width:32px; height:32px;
  background:var(--red); color:var(--paper);
  font-family:"PT Serif",serif; font-weight:700;
  font-size:18px;
  line-height:1;
}
.nav__wordmark{
  font-family:"Anton",Impact,sans-serif;
  font-size:18px; letter-spacing:.02em;
}
.nav__wordmark small{
  display:block;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:2px;
}
.nav__links{
  margin-left:auto;
  display:flex; gap:20px;
}
.nav__links a{ color:var(--ink); border-bottom:1px solid transparent; padding-bottom:1px; }
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--red); border-bottom-color:var(--red); }

.doc{
  max-width:780px;
  margin:0 auto;
  padding:48px 36px 64px;
}
.doc__header{
  border:var(--rule) solid var(--ink);
  padding:24px 28px;
  margin-bottom:36px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:start;
  background:var(--paper);
  position:relative;
}
.doc__header::before, .doc__header::after{
  content:"";
  position:absolute; left:-1px; right:-1px; height:5px;
  background:repeating-linear-gradient(to right, var(--ink) 0 8px, transparent 8px 14px);
}
.doc__header::before{ top:-1px; transform:translateY(-7px); }
.doc__header::after{ bottom:-1px; transform:translateY(7px); }
.doc__title{
  font-family:"Anton",Impact,sans-serif;
  font-size:clamp(40px,6vw,64px);
  letter-spacing:-0.01em;
  line-height:.92;
  margin:0;
  text-transform:uppercase;
}
.doc__title small{
  display:block;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--red);
  font-weight:400;
  text-transform:uppercase;
  margin-top:10px;
}
.doc__meta{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-align:right;
}
.doc__meta b{ color:var(--ink); font-weight:700; display:inline-block; margin-left:6px; }
.doc__meta div{ padding:2px 0; }

.doc .lede{
  font-style:italic;
  font-size:19px;
  line-height:1.5;
  padding-left:18px;
  border-left:var(--rule-hard) solid var(--red);
  margin:0 0 32px;
  max-width:60ch;
}

.doc h2{
  font-family:"Anton",Impact,sans-serif;
  font-size:24px;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:36px 0 12px;
  display:flex;
  align-items:baseline;
  gap:14px;
}
.doc__article{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;
  letter-spacing:.22em;
  color:var(--red);
  background:var(--paper-deep);
  padding:3px 8px;
  text-transform:uppercase;
  letter-spacing:.2em;
}
.doc h3{
  font-family:"PT Serif",serif;
  font-weight:700;
  font-size:18px;
  margin:24px 0 8px;
}
.doc p{ margin:0 0 14px; max-width:64ch; }
.doc ul{
  margin:0 0 18px;
  padding-left:22px;
  list-style:none;
}
.doc li{ position:relative; padding:4px 0; max-width:64ch; }
.doc li::before{
  content:"§";
  position:absolute; left:-22px;
  color:var(--red);
  font-family:"PT Serif",serif;
  font-weight:700;
}
.doc a{ color:var(--red); border-bottom:1px solid var(--red); }
.doc a:hover{ background:var(--red); color:var(--paper); }
.doc strong{ font-weight:700; color:var(--ink); }
.doc code{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.92em;
  background:var(--paper-deep);
  padding:1px 6px;
}
.doc .rule{
  border:0;
  border-top:var(--rule) solid var(--ink);
  margin:32px 0;
}
.doc__sig{
  margin-top:42px;
  padding-top:18px;
  border-top:var(--rule) solid var(--ink);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.doc__sig p{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}

.stamp{
  display:inline-block;
  padding:6px 14px;
  border:3px solid var(--red);
  color:var(--red);
  font-family:"Anton",Impact,sans-serif;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:transparent;
}
.stamp--rotate-r{ transform:rotate(5deg); }
.stamp--rotate-l{ transform:rotate(-7deg); }
.stamp--filed{ color:var(--ink); border-color:var(--ink); }

/* FAQ (support page) */
.faq details{
  border:var(--rule) solid var(--ink);
  margin-bottom:8px;
  background:var(--paper);
}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  font-family:"Anton",Impact,sans-serif;
  font-size:18px;
  letter-spacing:.02em;
  text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"＋"; color:var(--red); font-family:"JetBrains Mono",ui-monospace,monospace; }
.faq details[open] summary::after{ content:"−"; }
.faq details[open] summary{ border-bottom:1px dashed var(--ink); }
.faq .faq__body{ padding:14px 16px 18px; }

/* btn (used on support page CTAs) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:14px 22px;
  font-family:"Anton",Impact,sans-serif;
  font-size:16px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--paper-deep);
  border:3px solid var(--ink);
}
.btn--primary{ background:var(--ink); color:var(--paper); }
.btn:hover{ background:var(--red); color:var(--paper); border-color:var(--red); }

/* shared footer (doc pages have this richer footer; index has the slim version) */
.doc ~ .foot, .foot__inner, .foot__brand, .foot__legal{}
.foot__inner{
  max-width:780px; margin:0 auto;
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  padding:24px 36px 0;
}
.foot__brand{ display:flex; align-items:center; gap:12px; }
.foot__brand .nav__brand{ display:flex; }
.foot__brand p{ margin:0; font-style:italic; color:var(--ink-soft); font-size:14px; }
.foot__legal{
  border-top:1px dashed var(--ink);
  padding:14px 36px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.wrap{ max-width:780px; margin:0 auto; }

@media (max-width: 720px){
  .nav{ padding:14px 20px; }
  .doc{ padding:32px 20px 48px; }
  .doc__header{ grid-template-columns:1fr; padding:20px; }
  .doc__meta{ text-align:left; }
}