@font-face { font-family:"Montserrat"; src:url("../assets/fonts/Montserrat-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../assets/fonts/Montserrat-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../assets/fonts/Montserrat-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../assets/fonts/Montserrat-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* MOKUTON — owner-supplied licensed display face. Latin only (209 glyphs);
   it contains no CJK, so the Japanese watermark uses a separate stack. */
@font-face { font-family:"Mokuton"; src:url("../assets/fonts/Mokuton-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

:root {
  --brand-black:#000000; --brand-red:#E4191E; --brand-grey:#A2A1A1; --brand-white:#FFFFFF;
  --ink:#000000; --ink-2:#121212; --ink-3:#232323;
  --ink-line:rgba(162,161,161,.30);
  --paper:#F4F3F1; --paper-2:#E7E6E4; --white:#FFFFFF;
  --red:#E4191E; --red-deep:#B71218;
  --muted:#4A4A4A;              /* 8.9:1 on paper. #A2A1A1 fails AA as body text */
  --grey-line:#A2A1A1;          /* brand grey, used for rules and structure */
  --on-ink:#A2A1A1;             /* brand grey, 7.0:1 on black */
  --on-red:rgba(255,255,255,.9);

  --display:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --body:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  /* Expressive display face. Used for a small number of deliberate moments
     only; everything functional stays on --display / --body (Montserrat). */
  --font-display:"Mokuton","Montserrat",Arial,sans-serif;
  --display-brush:var(--font-display);
  --font-ui:var(--display);

  --t-mega:clamp(1.7rem,3.8vw,3.3rem);
  --t-xl:clamp(1.6rem,3.4vw,2.9rem);
  --t-lg:clamp(1.45rem,2.5vw,2.1rem);
  --t-md:clamp(1.08rem,1.5vw,1.35rem);
  --t-body:clamp(1rem,.96rem + .2vw,1.1rem);
  --t-cap:.7rem;

  --w-narrow:720px; --w-text:980px; --w-page:1320px; --w-wide:1660px;
  --gutter:clamp(1.15rem,3.6vw,3.25rem);
  --header-h:74px;
  --ease:cubic-bezier(.22,.66,.28,1);
}
@media (max-width:900px){ :root{ --header-h:62px; } }

*,*::before,*::after{ box-sizing:border-box; }
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd,fieldset{ margin:0; }
ul[class],ol[class]{ list-style:none; padding:0; }
img,video,svg{ display:block; max-width:100%; }
picture{ display:contents; }
img,video{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
fieldset{ border:0; padding:0; min-width:0; }
legend{ padding:0; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{ font-family:var(--body); font-size:var(--t-body); line-height:1.62; color:var(--ink); background:var(--paper); overflow-wrap:break-word; }

h1,h2,h3,.display{ font-family:var(--display); font-weight:700; line-height:1.02; letter-spacing:-.02em; text-transform:uppercase; }
.display--mega{ font-size:var(--t-mega); line-height:1.0; letter-spacing:-.03em; }
.display--xl{ font-size:var(--t-xl); line-height:1.03; letter-spacing:-.025em; }
.display--lg{ font-size:var(--t-lg); line-height:1.1; letter-spacing:-.02em; }
.display--md{ font-size:var(--t-md); line-height:1.2; letter-spacing:-.01em; }
p{ max-width:64ch; }
a{ color:inherit; }

.cap{ font-family:var(--display); font-weight:600; font-size:var(--t-cap); letter-spacing:.18em; text-transform:uppercase; line-height:1.3; }
.cap--muted{ color:var(--muted); } .cap--onink{ color:var(--on-ink); } .cap--red{ color:var(--red); }
.idx{ font-family:var(--display); font-weight:700; font-variant-numeric:lining-nums tabular-nums; line-height:1; }
.lede{ font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.55; }

.c-narrow{ width:100%; max-width:var(--w-narrow); margin-inline:auto; padding-inline:var(--gutter); }
.c-text{ width:100%; max-width:var(--w-text); margin-inline:auto; padding-inline:var(--gutter); }
.c-page{ width:100%; max-width:var(--w-page); margin-inline:auto; padding-inline:var(--gutter); }
.c-wide{ width:100%; max-width:var(--w-wide); margin-inline:auto; padding-inline:var(--gutter); }

.env-ink{ background:var(--ink); color:var(--paper); }
.env-ink p{ color:var(--on-ink); }
.env-paper{ background:var(--paper); color:var(--ink); }
.env-white{ background:var(--white); }
.env-red{ background:var(--red); color:var(--white); }
.env-red p{ color:var(--on-red); }

.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.skip-link{ position:absolute; left:1rem; top:-100px; z-index:999; background:var(--red); color:var(--white); padding:.75rem 1.15rem; font-family:var(--display); font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-radius:4px; }
.skip-link:focus-visible{ top:1rem; }
:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }
.env-ink :focus-visible,.env-red :focus-visible,.footer :focus-visible{ outline-color:#FF6B70; }
.i{ width:1em; height:1em; flex:none; fill:currentColor; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:52px; padding:.8rem 1.5rem; font-family:var(--display); font-weight:600; font-size:.85rem; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; border:1.5px solid transparent; border-radius:2px; cursor:pointer; background:none; position:relative; transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }
.btn--red{ background:var(--red); color:var(--white); border-color:var(--red); }
.btn--red:hover{ background:var(--red-deep); border-color:var(--red-deep); }
.btn--ink{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--ink:hover{ background:#000; }
.btn--paper{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--paper:hover{ background:var(--white); border-color:var(--white); }
.btn--ghost-light{ color:var(--paper); border-color:rgba(244,243,241,.45); }
.btn--ghost-light:hover{ border-color:var(--paper); background:rgba(244,243,241,.09); }
.btn--ghost-ink{ color:var(--ink); border-color:rgba(0,0,0,.3); }
.btn--ghost-ink:hover{ border-color:var(--ink); background:rgba(0,0,0,.05); }
.btn--sm{ min-height:46px; padding:.55rem 1.05rem; font-size:.78rem; letter-spacing:.07em; }

.ln{ display:inline-flex; align-items:center; gap:.5rem; position:relative; font-family:var(--display); font-weight:600; font-size:.79rem; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; padding-bottom:3px; border-bottom:1.5px solid currentColor; color:var(--red); transition:gap .2s var(--ease),color .2s var(--ease); }
.ln:hover{ gap:.75rem; color:var(--red-deep); }
.ln--light{ color:var(--paper); } .ln--light:hover{ color:var(--white); }
.ln::after{ content:""; position:absolute; inset:-12px 0; }

.media{ position:relative; overflow:hidden; background:var(--ink-2); }
.media > img{ width:100%; height:100%; object-fit:cover; }
.r-none{ border-radius:0; } .r-sm{ border-radius:3px; } .r-lg{ border-radius:18px; } .r-xl{ border-radius:26px; }

.js .rv{ opacity:0; transform:translateY(22px); }
.js .rv.in{ opacity:1; transform:none; transition:opacity .7s var(--ease),transform .7s var(--ease); }
@media (prefers-reduced-motion:reduce){ .js .rv{ opacity:1; transform:none; } }

/* --------------------------------------------------------------------------
   Mokuton usage. Deliberately limited: hero accent, brand transition,
   Principles backdrop, video title, Stories word, Japan accent. Nothing
   functional (nav, forms, directory, buttons, body) ever uses it.
   Mokuton sits noticeably smaller than Montserrat at the same font-size and
   has an irregular baseline, so each use is optically compensated.
   -------------------------------------------------------------------------- */
.mk{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.005em;
  text-transform:uppercase;
}