:root{
  --ink:#0b0a08;
  --ink-2:#141210;
  --ink-3:#1e1b17;
  --washi:#ece6d8;
  --washi-2:#d8d0bd;
  --washi-3:#a89f8a;
  --vermilion:#b8332a;
  --gold:#c9a961;
  --yellow:#f3cf3d;
  --indigo:#1e4a9c;
  --line: rgba(236,230,216,0.14);
  --line-strong: rgba(236,230,216,0.35);
  --accent: var(--vermilion);
  --bg: var(--ink);
  --fg: var(--washi);
  --muted: var(--washi-3);
  --serif: "Shippori Mincho", "Noto Serif JP", serif;
  --sans: "Inter", "Noto Sans JP", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
html[data-theme="paper"]{
  --bg: var(--washi);
  --fg: var(--ink);
  --muted: #5a5245;
  --line: rgba(11,10,8,0.12);
  --line-strong: rgba(11,10,8,0.45);
}
html[data-accent="gold"]{ --accent: var(--gold); }
html[data-accent="washi"]{ --accent: var(--washi); }
html[data-accent="indigo"]{ --accent: var(--indigo); }
html[data-accent="yellow"]{ --accent: var(--yellow); }
html[data-heading="noto"]{ --serif: "Noto Serif JP", serif; }

/* ===== GREEN (MOSS) THEME ===== */
html[data-theme="moss"]{
  --ink:#16432c;        /* vivid forest green */
  --ink-2:#1b5234;      /* surface */
  --ink-3:#256546;      /* raised surface */
  --bg: var(--ink);
  --fg: #f1ecde;
  --muted:#a9c6ad;      /* light sage */
  --line: rgba(241,236,222,0.16);
  --line-strong: rgba(241,236,222,0.34);
}
/* logo legibility on dark green */
html[data-theme="moss"] .brand .brand-mark{ filter: brightness(0) invert(0.82) sepia(0.18) saturate(0.6) hue-rotate(70deg); }
html[data-theme="moss"] .hero-logo{ filter: brightness(0) invert(0.92) sepia(0.10) hue-rotate(60deg); }
html[data-theme="moss"] .footer-logo{ filter: brightness(0) invert(0.92); }
/* green-tinted placeholder surfaces */
html[data-theme="moss"] .filmstrip .frame{ background:var(--ink-3); border-color:var(--line) }
html[data-theme="moss"] .samurai{ background:#134026 }
html[data-theme="moss"] .sp-item{ background:#163f28 }
html[data-theme="moss"] .sp-item:hover{ background:#1f5436 }

*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--bg); color:var(--fg); font-family:var(--sans); -webkit-font-smoothing:antialiased; font-feature-settings:"palt"}
body{overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* film grain overlay */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:200; mix-blend-mode:overlay; opacity:.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html[data-grain="off"] .grain{display:none}

/* ---------- TOP BAR ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px;
  
  
background: var(--bg); border-bottom: 1px solid var(--line);}
.brand{display:flex; align-items:center; gap:14px; font-family:var(--serif); font-weight:500; letter-spacing:.04em}
.brand .brand-mark{
  width:36px; height:36px; object-fit:contain;
  filter: brightness(0) saturate(100%) invert(31%) sepia(12%) saturate(640%) hue-rotate(3deg) brightness(94%) contrast(86%);
  mix-blend-mode: normal;
}
.brand .kanji{font-size:22px; line-height:1}
.brand .latin{font-size:11px; letter-spacing:.32em; color:#eee; padding-top:4px}
.navlinks{display:flex; gap:34px; font-family:var(--sans); font-size:11px; letter-spacing:.28em; font-weight:600}
.navlinks a{color:var(--accent)}
.navlinks a{position:relative; padding:6px 0}
.navlinks a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .35s cubic-bezier(.2,.8,.2,1)}
.navlinks a:hover::after{right:0}
.navlinks .num{font-family:var(--mono); color:color-mix(in srgb, var(--accent), transparent 35%); margin-right:6px; font-size:9px}
.topbar .right{display:flex; gap:18px; align-items:center; font-size:11px; letter-spacing:.2em}
.topbar .dot{width:6px; height:6px; background:var(--accent); border-radius:50%; display:inline-block; margin-right:8px; animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100vh; padding:120px 40px 60px;
  display:grid; grid-template-columns: 1fr auto 1fr; gap:40px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(184,51,42,0.08), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(201,169,97,0.06), transparent 55%);
  pointer-events:none;
}

/* left meta column */
.hero-meta{
  display:flex; flex-direction:column; justify-content:space-between;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--muted); text-transform:uppercase;
  padding-top:20px;
}
.hero-meta .top{display:flex; flex-direction:column; gap:18px}
.hero-meta .row{display:flex; gap:12px; align-items:baseline}
.hero-meta .k{color:var(--muted); min-width:70px}
.hero-meta .v{color:var(--fg); font-family:var(--sans); letter-spacing:.05em}
.hero-meta .mark{
  font-family:var(--serif); font-size:14px; letter-spacing:.3em;
  writing-mode:vertical-rl; align-self:flex-start;
  padding:30px 0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
  color:var(--fg);
}

/* center — vertical kanji */
.hero-title{
  display:flex; flex-direction:row-reverse; gap:28px; justify-content:center; align-items:flex-start;
  padding:0 20px;
}
/* hero logo wrap (new, with logo image) */
.hero-logo-wrap{
  position:relative; width: clamp(280px, 30vw, 460px); aspect-ratio:1;
  display:grid; place-items:center;
  margin-right: 40px;
}
.hero-logo{
  width: 72%; height: 72%; object-fit:contain; position:relative; z-index:2;
  filter: brightness(0) invert(0.92) sepia(0.08);
}
html[data-theme="paper"] .hero-logo{ filter: none; }
.hero-ring{
  position:absolute; inset:0; border:1px solid var(--line-strong); border-radius:50%;
  animation: spinSlow 120s linear infinite;
}
.hero-ring::before, .hero-ring::after{
  content:""; position:absolute; width:8px; height:8px; background:var(--accent); border-radius:50%;
}
.hero-ring::before{top:-4px; left:50%; transform:translateX(-50%)}
.hero-ring::after{bottom:-4px; left:50%; transform:translateX(-50%)}
.hero-ring-2{
  position:absolute; inset:-28px; border:1px dashed var(--line);
  border-radius:50%;
  animation: spinSlow 240s linear infinite reverse;
}
@keyframes spinSlow { from{transform:rotate(0)} to{transform:rotate(360deg)} }

.hero-kanji-mini{
  writing-mode:vertical-rl; font-family:var(--serif); font-weight:500;
  font-size: clamp(48px, 5vw, 72px); line-height:1.1; letter-spacing:.05em;
  color: var(--muted);
}

.hero-kanji{
  writing-mode:vertical-rl; font-family:var(--serif); font-weight:500;
  font-size: clamp(120px, 15vw, 220px);
  line-height:1.02; letter-spacing:.02em;
  color:var(--fg);
  text-shadow: 0 0 80px rgba(184,51,42,0.1);
}
.hero-kanji .stroke{display:block; position:relative}
.hero-kanji .stroke::before{
  content:""; position:absolute; left:-6px; top:8%; width:1px; height:84%;
  background:var(--accent); opacity:.6;
}
.hero-kanji .stroke.no-line::before{display:none}

.hero-sub{
  writing-mode:vertical-rl; font-family:var(--serif); font-size:18px;
  letter-spacing:.35em; color:var(--muted); padding-top:40px;
  font-weight:400;
}

/* right column — tagline + lockup */
.hero-right{
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
  text-align:right; padding-top:20px;
}
.hero-tag{
  font-family:var(--serif); font-size:22px; line-height:1.8; letter-spacing:.08em;
  max-width:360px; font-weight:400;
}
.hero-tag .em{ color:var(--accent); font-weight:500}
.hero-lockup{
  display:flex; flex-direction:column; gap:6px; align-items:flex-end;
}
.hero-lockup .big{font-family:var(--serif); font-size:54px; letter-spacing:.04em; font-weight:500}
.hero-lockup .sub{font-family:var(--sans); font-size:10px; letter-spacing:.4em; color:var(--muted); text-transform:uppercase}
.hero-lockup .rule{width:60px; height:1px; background:var(--accent); margin-top:14px}

/* film strip at bottom */
.filmstrip{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; gap:8px; padding:12px 20px;
  border-top:1px solid var(--line); background: color-mix(in srgb, var(--bg), black 10%);
  font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.15em;
  justify-content:space-between; align-items:center;
}
.filmstrip .frames{display:flex; gap:6px}
.filmstrip .frame{width:28px; height:18px; background:var(--ink-3); border:1px solid var(--line); position:relative; overflow:hidden}
html[data-theme="paper"] .filmstrip .frame{background:#c8c0ac; border-color:rgba(0,0,0,.1)}
.filmstrip .frame::before, .filmstrip .frame::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--bg);
}
.filmstrip .frame::before{top:2px} .filmstrip .frame::after{bottom:2px}
.filmstrip .marquee{
  flex:1; overflow:hidden; position:relative; margin:0 20px; height:14px;
}
.filmstrip .marquee-track{
  position:absolute; white-space:nowrap; animation: marquee 40s linear infinite;
}
.filmstrip .marquee-track span{margin-right:40px}
.filmstrip .marquee-track .sep{color:var(--accent)}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- SECTION HEADER ---------- */
.section{padding:120px 40px; position:relative; border-bottom:1px solid var(--line)}
.section-head{
  display:grid; grid-template-columns: 120px 1fr auto; gap:40px;
  align-items:end; margin-bottom:80px;
  padding-bottom:24px; border-bottom:1px solid var(--line);
}
.section-num{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.2em}
.section-title{font-family:var(--serif); font-size:64px; letter-spacing:.02em; line-height:1; font-weight:500}
.section-title .jp{display:block; font-size:18px; letter-spacing:.5em; color:var(--muted); margin-bottom:14px; font-weight:400}
.section-aside{font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.2em; text-transform:uppercase; text-align:right; line-height:1.8}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns: 1fr 1fr; gap:80px; align-items:start}
.about-lead{font-family:var(--serif); font-size:26px; line-height:2; letter-spacing:.08em; font-weight:400}
.about-lead .accent{color:var(--accent)}
.about-body{font-family:var(--serif); font-size:14px; line-height:2.1; color:var(--muted); letter-spacing:.04em}
.about-body p + p{margin-top:1.6em}
.about-logo{display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:36px; padding-bottom:32px; border-bottom:1px solid var(--line)}
.about-logo img{width:150px; height:auto; filter: brightness(0) invert(0.92) sepia(0.10) hue-rotate(60deg)}
.about-logo-cap{font-family:var(--mono); font-size:10px; letter-spacing:.28em; color:var(--muted); text-transform:uppercase}
.about-facts{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin-top:40px; border:1px solid var(--line)}
.fact{background:var(--bg); padding:20px}
.fact .k{font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.2em; text-transform:uppercase}
.fact .v{font-family:var(--serif); font-size:16px; margin-top:8px; letter-spacing:.05em}

/* ---------- FILMS ---------- */
.film-list{display:flex; flex-direction:column}
.film-row{
  display:grid; grid-template-columns: 60px 1fr 2fr 1fr 100px;
  gap:40px; align-items:center;
  padding:32px 0; border-top:1px solid var(--line);
  transition: all .5s cubic-bezier(.2,.8,.2,1);
  cursor:pointer; position:relative;
}
.film-row:last-child{border-bottom:1px solid var(--line)}
.film-row:hover{padding-left:20px}
.film-row .poster{
  width:80px; aspect-ratio:2/3;
  background:
    repeating-linear-gradient(135deg, var(--ink-3) 0 4px, var(--ink-2) 4px 8px);
  border:1px solid var(--line-strong);
  position:relative;
  transition: transform .5s;
}
html[data-theme="paper"] .film-row .poster{
  background: repeating-linear-gradient(135deg, #d8d0bd 0 4px, #c8c0ac 4px 8px);
}
.film-row:hover .poster{transform:scale(1.08)}
.film-row .poster::after{content:"POSTER"; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--mono); font-size:8px; color:var(--muted); letter-spacing:.2em}
.film-row .num{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.15em}
.film-row .title{font-family:var(--serif); font-size:28px; letter-spacing:.04em; line-height:1.3; font-weight:500}
.film-row .title .en{display:block; font-family:var(--sans); font-size:11px; color:var(--muted); letter-spacing:.3em; margin-top:8px; text-transform:uppercase; font-weight:400}
.film-row .meta{font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.15em; line-height:1.9}
.film-row .meta .year{color:var(--fg); font-size:14px; letter-spacing:.1em}
.film-row .cta{font-family:var(--sans); font-size:10px; letter-spacing:.3em; text-align:right; display:flex; align-items:center; gap:8px; justify-content:flex-end}
.film-row .cta .arrow{transition:transform .4s}
.film-row:hover .cta .arrow{transform:translateX(6px)}

/* ---------- SAMURAI ---------- */
.samurai{
  background: var(--ink-2); position:relative; overflow:hidden;
}
html[data-theme="paper"] .samurai{background:#e0d8c2}
.samurai::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent, rgba(184,51,42,0.05) 60%, transparent),
    radial-gradient(circle at 80% 50%, rgba(184,51,42,0.08), transparent 50%);
  pointer-events:none;
}
.samurai-layout{display:grid; grid-template-columns: 1.4fr 1fr; gap:80px; align-items:center; position:relative}
.samurai-visual{
  aspect-ratio: 4/5; position:relative;
  background:
    repeating-linear-gradient(90deg, var(--ink-3) 0 2px, var(--ink) 2px 14px);
  border:1px solid var(--line-strong);
  overflow:hidden;
}
html[data-theme="paper"] .samurai-visual{
  background: repeating-linear-gradient(90deg, #c8c0ac 0 2px, #d8d0bd 2px 14px);
}
.samurai-visual::before{
  content:"剣"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--serif); font-size:clamp(200px, 28vw, 400px); color:rgba(184,51,42,0.15);
  font-weight:900; line-height:1;
}
.samurai-visual .corners{position:absolute; inset:16px; pointer-events:none}
.samurai-visual .corners span{position:absolute; width:16px; height:16px; border:1px solid var(--accent)}
.samurai-visual .corners span:nth-child(1){top:0; left:0; border-right:none; border-bottom:none}
.samurai-visual .corners span:nth-child(2){top:0; right:0; border-left:none; border-bottom:none}
.samurai-visual .corners span:nth-child(3){bottom:0; left:0; border-right:none; border-top:none}
.samurai-visual .corners span:nth-child(4){bottom:0; right:0; border-left:none; border-top:none}
.samurai-visual .label{
  position:absolute; bottom:20px; left:20px; font-family:var(--mono); font-size:10px;
  color:var(--muted); letter-spacing:.2em; text-transform:uppercase;
}
.samurai-visual .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border:1px solid var(--fg); border-radius:50%;
  display:grid; place-items:center;
  transition: all .4s;
}
.samurai-visual .play:hover{background:var(--fg); color:var(--bg)}
.samurai-visual .play svg{width:18px; height:18px}

.samurai-copy h3{font-family:var(--serif); font-size:56px; letter-spacing:.04em; line-height:1.1; font-weight:500; margin-bottom:12px}
.samurai-copy .en{font-family:var(--sans); font-size:11px; letter-spacing:.4em; color:var(--accent); margin-bottom:30px; text-transform:uppercase}
.samurai-copy p{font-family:var(--serif); font-size:15px; line-height:2; color:var(--muted); letter-spacing:.04em; margin-bottom:20px}
.samurai-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:32px}
.samurai-tag{font-family:var(--mono); font-size:10px; letter-spacing:.15em; padding:6px 14px; border:1px solid var(--line-strong); color:var(--fg)}
.samurai-programs{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin-top:40px; border:1px solid var(--line)}
.sp-item{padding:20px; background:var(--ink); cursor:pointer; transition:background .3s}
html[data-theme="paper"] .sp-item{background:#e0d8c2}
.sp-item:hover{background:var(--ink-3)}
html[data-theme="paper"] .sp-item:hover{background:#d0c8b2}
.sp-item .k{font-family:var(--mono); font-size:9px; color:var(--accent); letter-spacing:.2em}
.sp-item .v{font-family:var(--serif); font-size:20px; margin-top:6px; letter-spacing:.05em}
.sp-item .d{font-family:var(--sans); font-size:11px; color:var(--muted); margin-top:6px; letter-spacing:.1em}

/* ---------- ACTORS ---------- */
.actor-grid{display:grid; grid-template-columns: repeat(6, 1fr); gap:24px 18px}
.actor{cursor:pointer; position:relative}
.actor .portrait{
  aspect-ratio: 3/4; position:relative; overflow:hidden;
  background: repeating-linear-gradient(180deg, var(--ink-3) 0 3px, var(--ink-2) 3px 10px);
  border:1px solid var(--line);
  transition: all .5s cubic-bezier(.2,.8,.2,1);
}
html[data-theme="paper"] .actor .portrait{
  background: repeating-linear-gradient(180deg, #c8c0ac 0 3px, #d0c8b2 3px 10px);
}
.actor:hover .portrait{border-color:var(--accent); transform:translateY(-6px)}
.actor .portrait::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,10,8,0.9));
  opacity:0; transition:opacity .4s;
}
html[data-theme="paper"] .actor .portrait::after{
  background: linear-gradient(180deg, transparent 50%, rgba(236,230,216,0.95));
}
.actor:hover .portrait::after{opacity:1}
.actor .portrait .placeholder{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:.25em;
}
.actor .portrait .role{
  position:absolute; bottom:14px; left:14px; right:14px;
  font-family:var(--mono); font-size:9px; color:var(--fg); letter-spacing:.2em;
  opacity:0; transform:translateY(6px); transition:all .4s .05s; z-index:2;
}
.actor:hover .portrait .role{opacity:1; transform:translateY(0)}
.actor .info{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.actor .name{font-family:var(--serif); font-size:20px; letter-spacing:.05em; font-weight:500}
.actor .name .en{display:block; font-family:var(--sans); font-size:9px; color:var(--muted); letter-spacing:.3em; margin-top:4px; text-transform:uppercase; font-weight:400}
.actor .num{font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.15em}

/* ---------- NEWS ---------- */
.news-layout{display:grid; grid-template-columns: 1fr 1fr; gap:60px}
.news-layout--list-only{grid-template-columns: 1fr}
.news-feature{
  border:1px solid var(--line-strong); padding:40px; position:relative;
  display:flex; flex-direction:column; justify-content:space-between; min-height:420px;
  transition: border-color .4s;
}
.news-feature:hover{border-color:var(--accent)}
.news-feature .tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--accent);
  display:inline-flex; align-items:center; gap:8px;
}
.news-feature .tag::before{content:""; width:6px; height:6px; background:var(--accent); border-radius:50%}
.news-feature .date{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:20px; letter-spacing:.15em}
.news-feature h4{font-family:var(--serif); font-size:32px; letter-spacing:.04em; line-height:1.4; font-weight:500; margin-top:16px}
.news-feature p{font-family:var(--serif); font-size:14px; line-height:2; color:var(--muted); margin-top:18px}
.news-feature .more{font-family:var(--sans); font-size:10px; letter-spacing:.3em; margin-top:30px; display:flex; align-items:center; gap:10px}

.news-list{display:flex; flex-direction:column}
.news-item{
  display:grid; grid-template-columns: 80px 1fr auto; gap:20px;
  padding:24px 0; border-top:1px solid var(--line);
  align-items:baseline; cursor:pointer;
  transition: padding .4s;
}
.news-item:last-child{border-bottom:1px solid var(--line)}
.news-item:hover{padding-left:14px}
.news-item .date{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.1em}
.news-item .cat{font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--accent); text-transform:uppercase}
.news-item .ttl{font-family:var(--serif); font-size:15px; letter-spacing:.04em; line-height:1.5}
.news-item .arr{font-family:var(--mono); color:var(--muted)}

/* ---------- FOOTER ---------- */
.footer{
  padding:80px 40px 40px; background:var(--ink); color:var(--washi);
  border-top:1px solid var(--line);
}
html[data-theme="paper"] .footer{background:var(--ink); color:var(--washi); --line: rgba(236,230,216,0.14); --muted: var(--washi-3)}
.footer-top{display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:60px; margin-bottom:60px}
.footer-brand .big{font-family:var(--serif); font-size:72px; letter-spacing:.04em; line-height:1}
.footer-logo{
  width: 180px; max-width:100%;
  filter: brightness(0) invert(1);
  margin-bottom: 8px;
}
.footer-brand .en{font-family:var(--sans); font-size:11px; letter-spacing:.4em; color:var(--muted); margin-top:14px}
.footer-brand .desc{font-family:var(--serif); font-size:13px; line-height:2; color:var(--muted); margin-top:24px; max-width:380px}
.footer-col h5{font-family:var(--mono); font-size:10px; letter-spacing:.25em; color:var(--muted); margin-bottom:18px; text-transform:uppercase}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:10px}
.footer-col a{font-family:var(--serif); font-size:14px; letter-spacing:.05em; transition:color .3s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{
  padding-top:30px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.15em;
}
.footer-bottom .socials{display:flex; gap:18px}
.footer-bottom .socials a{display:flex; align-items:center; gap:6px}

/* ---------- CONTACT strip ---------- */
.contact-strip{
  padding:100px 40px; border-bottom:1px solid var(--line);
  text-align:center; position:relative; overflow:hidden;
}
.contact-strip .line-marker{font-family:var(--mono); font-size:10px; color:var(--accent); letter-spacing:.3em; margin-bottom:24px}
.contact-strip h3{font-family:var(--serif); font-size:clamp(48px, 7vw, 96px); letter-spacing:.06em; font-weight:500; line-height:1.2}
.contact-strip h3 .alt{color:var(--accent); font-style:italic}
.contact-strip .cta-big{
  display:inline-flex; align-items:center; justify-content:center; gap:16px; margin-top:50px;
  padding:22px 48px; border:1px solid var(--fg);
  font-family:var(--sans); font-size:12px; letter-spacing:.4em;
  transition: all .4s;
}
.contact-strip .cta-big:hover{background:var(--fg); color:var(--bg)}
.contact-strip .cta-big[style*="default"]:hover{background:transparent; color:var(--fg)}
.contact-strip .contact-note{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--muted); margin-top:24px}

/* ---------- Tweaks panel ---------- */
.tweaks{
  position:fixed; bottom:24px; right:24px; z-index:300;
  width:280px; padding:18px;
  background: color-mix(in srgb, var(--bg), black 20%);
  border:1px solid var(--line-strong);
  font-family:var(--mono); font-size:11px; color:var(--fg);
  backdrop-filter: blur(8px);
  display:none;
}
.tweaks.on{display:block}
.tweaks h6{font-size:10px; letter-spacing:.25em; color:var(--accent); margin-bottom:14px; text-transform:uppercase}
.tweak-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px}
.tweak-row > span{color:var(--muted); letter-spacing:.15em; font-size:10px}
.tweak-opts{display:flex; gap:4px}
.tweak-opts button{
  background:transparent; border:1px solid var(--line-strong); color:var(--fg);
  padding:4px 8px; font-family:var(--mono); font-size:9px; letter-spacing:.15em;
  cursor:pointer; transition: all .2s;
}
.tweak-opts button.active{background:var(--accent); border-color:var(--accent); color:#fff}
.tweak-opts button:hover:not(.active){border-color:var(--fg)}

/* ---------- CONTENT DECK / SITEMAP ---------- */
.sitemap{padding:100px 40px; border-bottom:1px solid var(--line)}
.sitemap-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:20px}
.sm-card{
  padding:24px; border:1px solid var(--line);
  aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:space-between;
  transition: all .4s; cursor:pointer; position:relative; overflow:hidden;
}
.sm-card:hover{border-color:var(--accent); transform:translateY(-4px)}
.sm-card .num{font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.2em}
.sm-card .kanji{font-family:var(--serif); font-size:32px; letter-spacing:.05em; margin-top:20px; line-height:1.1}
.sm-card .en{font-family:var(--sans); font-size:10px; letter-spacing:.35em; color:var(--accent); margin-top:10px; text-transform:uppercase}
.sm-card .desc{font-family:var(--serif); font-size:11px; color:var(--muted); line-height:1.7; margin-top:12px}


/* tagline-strip (hopepunk blurb above films) */
.tagline-strip{
  display:grid; grid-template-columns: 160px 1fr; gap:40px; align-items:start;
  padding:30px 0 60px; margin-bottom:40px;
  border-bottom:1px solid var(--line);
}
.tl-label{font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--accent); padding-top:6px}
.tl-body{font-family:var(--serif); font-size:17px; line-height:2; color:var(--muted); letter-spacing:.06em}
.tl-body em{color:var(--accent); font-style:normal; font-weight:600}

/* upgraded film-row poster styling */
.film-row .poster{background-blend-mode: luminosity}
.film-row .poster::after{display:none}
.film-row .poster[style*="flyer"]{background-blend-mode: normal !important}
.film-row .poster[style*="normal17"]{background-blend-mode: normal !important}

/* film credit block */
.film-credit{
  margin-top:60px; padding:40px; border:1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg), black 6%);
}
.credit-head{border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:24px}
.credit-title{font-family:var(--serif); font-size:26px; letter-spacing:.04em; font-weight:500}
.credit-sub{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.18em; margin-top:6px}
.credit-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 40px}
.cg-row{display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:baseline; padding:6px 0; border-bottom:1px dashed var(--line)}
.cg-k{font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.2em}
.cg-v{font-family:var(--serif); font-size:13px; letter-spacing:.04em; line-height:1.6}

/* samurai-visual with bg */
.samurai-visual{background-color:var(--ink-3)}
.samurai-visual::before{opacity:0.3}
.samurai-visual.has-photo::before{display:none}

/* actor dept */
.actor-dept{display:flex; flex-direction:column; gap:40px}
.dept-row{display:flex; align-items:baseline; gap:20px; padding:20px 0; border-top:1px solid var(--line-strong); margin-top:20px}
.dept-row:first-child{margin-top:0}
.dept-label{font-family:var(--serif); font-size:22px; letter-spacing:.08em; font-weight:500}
.dept-en{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.15em}

/* actor portrait with real image */
.actor .portrait{background-size:cover; background-position:center top; background-repeat:no-repeat}
.actor .portrait .placeholder{display:none}
.actor .socials-mini{
  position:absolute; top:14px; right:14px; display:flex; gap:6px;
  opacity:0; transition:opacity .3s; z-index:3;
}
.actor:hover .socials-mini{opacity:1}
.actor .socials-mini a{
  width:28px; height:28px; display:grid; place-items:center;
  background: rgba(11,10,8,0.55); border-radius:6px;
  overflow:hidden; transition:transform .2s;
}
.actor .socials-mini a img{width:18px; height:18px; object-fit:contain; display:block}
.actor .socials-mini a:hover{transform:scale(1.12)}
/* social icons below photo */
.actor .socials-row{display:flex; gap:10px; margin-top:10px}
.actor .socials-row a{width:24px; height:24px; display:grid; place-items:center; transition:transform .2s}
.actor .socials-row a img{width:20px; height:20px; object-fit:contain; display:block}
.actor .socials-row a:hover{transform:scale(1.14)}

/* contact sub */
.contact-sub{font-family:var(--serif); font-size:15px; color:var(--muted); margin-top:24px; letter-spacing:.06em; line-height:2}

/* footer address */
.footer-address{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.12em; margin-top:14px; line-height:1.8}

/* news feature with bg */
.news-feature{background-size:cover; background-position:center; position:relative}

@media (max-width: 900px){
  .tagline-strip{grid-template-columns:1fr}
  .credit-grid{grid-template-columns:1fr}
  .cg-row{grid-template-columns:100px 1fr}
  .dept-row{flex-direction:column; gap:6px}
}

/* ---------- MOBILE NAV (hamburger + drawer) ---------- */
.menu-btn{
  display:none; width:44px; height:44px; padding:11px; gap:5px;
  background:transparent; border:1px solid var(--line-strong); cursor:pointer;
  flex-direction:column; justify-content:center; align-items:stretch;
}
.menu-btn span{display:block; height:1.5px; background:var(--fg); transition:transform .35s, opacity .25s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed; inset:0; z-index:90;
  background:var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  padding:88px 28px 40px;
  transform:translateY(-100%); opacity:0; pointer-events:none;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s;
}
.drawer.open{transform:translateY(0); opacity:1; pointer-events:auto}
.drawer-nav{display:flex; flex-direction:column}
.drawer-nav a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:18px;
  padding:22px 4px; border-top:1px solid var(--line);
  font-family:var(--serif);
}
.drawer-nav a:last-child{border-bottom:1px solid var(--line)}
.drawer-nav .dn-num{font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.15em}
.drawer-nav .dn-en{font-family:var(--sans); font-size:13px; letter-spacing:.32em}
.drawer-nav .dn-jp{font-size:22px; letter-spacing:.12em; font-weight:500}
.drawer-foot{
  margin-top:36px; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--muted); display:flex; align-items:center; gap:8px;
}

/* ===================================================== */
/* ================= TABLET (≤900px) =================== */
/* ===================================================== */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr; padding:100px 28px 90px; min-height:auto}
  .hero-meta{display:none}
  .hero-title{justify-content:center}
  .hero-right{align-items:center; text-align:center; padding-top:36px}
  .hero-tag{max-width:none}
  .section{padding:80px 28px}
  .section-head{grid-template-columns:1fr; gap:16px; align-items:start}
  .section-aside{text-align:left}
  .section-title{font-size:46px}
  .about-grid, .news-layout, .samurai-layout{grid-template-columns:1fr; gap:44px}
  .film-row{grid-template-columns:64px 1fr; gap:20px}
  .film-row .num{display:none}
  .film-row .meta{grid-column:2; padding-top:4px}
  .film-row .cta{display:none}
  .actor-grid{grid-template-columns:repeat(3,1fr); gap:30px 18px}
  .footer-top{grid-template-columns:1fr 1fr; gap:30px}
  .sitemap-grid{grid-template-columns:repeat(3,1fr)}
  .topbar{
    flex-direction:column; align-items:stretch; gap:0; padding:0;
  }
  .topbar .brand{padding:13px 22px}
  .topbar .right{display:none}
  .navlinks{
    display:flex; gap:0; width:100%;
    border-top:1px solid var(--line);
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{
    flex:0 0 auto; padding:13px 18px; font-size:11px; letter-spacing:.2em;
    border-right:1px solid var(--line); white-space:nowrap;
    display:flex; align-items:center; gap:6px;
  }
  .navlinks a::after{display:none}
  .navlinks .num{font-size:9px; color:var(--accent); margin-right:0}
  .menu-btn{display:none}
  .hero{padding:140px 28px 90px}
}

/* ===================================================== */
/* ================= PHONE (≤640px) ==================== */
/* ===================================================== */
@media (max-width: 640px){
  body{font-size:16px}

  /* top bar two rows: brand + scrollable menu */
  .topbar .brand{padding:11px 18px}
  .navlinks a{padding:13px 16px; font-size:11px; letter-spacing:.18em}
  .brand .brand-mark{width:30px; height:30px}
  .brand .latin{font-size:12px; letter-spacing:.26em}

  /* push hero below the taller (2-row) bar */
  .hero{padding:118px 22px 76px; gap:30px}
  .hero-title{flex-direction:column; align-items:center; gap:18px; padding:0}
  .hero-logo-wrap{width:min(64vw,260px); margin-right:0}
  .hero-ring-2{inset:-18px}
  .hero-kanji-mini{writing-mode:horizontal-tb; font-size:34px; letter-spacing:.3em; display:flex; gap:6px}
  .hero-sub{writing-mode:horizontal-tb; padding-top:0; font-size:13px; letter-spacing:.4em}
  .hero-right{padding-top:18px; gap:30px}
  .hero-tag{font-size:25px; line-height:1.7}
  .hero-lockup{align-items:center}
  .hero-lockup .big{font-size:40px}
  .hero-lockup .rule{margin-inline:auto}

  /* filmstrip — keep it slim */
  .filmstrip{padding:9px 14px; font-size:9px}
  .filmstrip .frames, .filmstrip > div:last-child{display:none}
  .filmstrip .marquee{margin:0}

  /* sitemap cards — 2 up, shorter */
  .section{padding:64px 22px}
  .sitemap{padding:60px 22px}
  .sitemap-grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .sm-card{padding:18px; aspect-ratio:auto; min-height:150px}
  .sm-card .kanji{font-size:26px; margin-top:14px}

  /* section header */
  .section-head{margin-bottom:48px; padding-bottom:18px}
  .section-title{font-size:36px}
  .section-title .jp{font-size:14px; letter-spacing:.4em; margin-bottom:10px}

  /* about */
  .about-lead{font-size:21px; line-height:1.95}
  .about-facts{grid-template-columns:1fr 1fr}
  .about-body{font-size:14px}

  /* films */
  .tagline-strip{padding:24px 0 40px; margin-bottom:30px}
  .tl-body{font-size:15px}
  .film-row{grid-template-columns:58px 1fr; gap:16px; padding:24px 0}
  .film-row .poster{width:58px}
  .film-row .title{font-size:21px}
  .film-row .title .en{font-size:10px; letter-spacing:.2em}
  .film-row .meta{font-size:10px}
  .film-credit{padding:24px; margin-top:40px}
  .credit-title{font-size:19px}
  .credit-grid{grid-template-columns:1fr; gap:2px}
  .cg-row{grid-template-columns:96px 1fr; gap:12px}

  /* samurai */
  .samurai-copy h3{font-size:34px}
  .samurai-visual{aspect-ratio:3/4}
  .samurai-programs{grid-template-columns:1fr}
  .samurai-tags{gap:6px}
  .samurai-tag{font-size:9px; padding:6px 10px}

  /* actors */
  .actor-grid{grid-template-columns:repeat(3,1fr); gap:30px 10px}
  .actor .name{font-size:13px; letter-spacing:.02em}
  .actor .name .en{font-size:8px; letter-spacing:.18em}
  .actor .info{margin-top:10px; padding-top:10px}
  .actor .num{font-size:9px}
  .actor .socials-mini{opacity:1}
  .dept-label{font-size:19px}
  .dept-row{flex-direction:column; gap:6px; align-items:flex-start}

  /* news */
  .news-feature{min-height:300px; padding:28px}
  .news-feature h4{font-size:24px}
  .news-item{grid-template-columns:64px 1fr; gap:6px 14px; padding:18px 0}
  .news-item .cat{grid-row:1; grid-column:2}
  .news-item .ttl{grid-row:2; grid-column:1 / -1}
  .news-item .arr{display:none}

  /* contact */
  .contact-strip{padding:72px 22px}
  .contact-strip h3{font-size:42px}
  .contact-strip .cta-big{width:100%; justify-content:center; padding:20px}

  /* footer */
  .footer{padding:60px 22px 36px}
  .footer-top{grid-template-columns:1fr; gap:34px}
  .footer-logo{width:150px}
  .footer-bottom{flex-direction:column; gap:16px; align-items:flex-start}
  .footer-bottom .socials{flex-wrap:wrap; gap:14px}
}

/* larger tap targets on touch devices */
@media (hover: none){
  .drawer-nav a, .sm-card, .film-row, .actor, .news-item{min-height:44px}
}


/* ============================================================
   SUBPAGE STYLES (jyuku / screening / contact)
   ============================================================ */
.subhero{
  position:relative; padding:150px 40px 60px;
  border-bottom:1px solid var(--line); overflow:hidden;
}
.subhero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 78% 30%, color-mix(in srgb, var(--accent), transparent 88%), transparent 60%),
    radial-gradient(ellipse at 15% 90%, rgba(241,236,222,0.05), transparent 55%);
}
.subhero-inner{position:relative; max-width:1400px; margin:0 auto}
.crumb{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-bottom:30px; display:flex; gap:10px; align-items:center}
.crumb a{color:var(--muted); transition:color .3s}
.crumb a:hover{color:var(--accent)}
.crumb .sep{opacity:.5}
.subhero-kicker{font-family:var(--mono); font-size:12px; letter-spacing:.4em; color:var(--accent); text-transform:uppercase; margin-bottom:22px}
.subhero-title{font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:.02em; font-size:clamp(48px,7vw,104px)}
.subhero-title .en{display:block; font-family:var(--sans); font-size:clamp(13px,1.4vw,18px); letter-spacing:.42em; color:var(--muted); text-transform:uppercase; margin-top:20px; font-weight:400}
.subhero-lead{font-family:var(--serif); font-size:clamp(17px,1.7vw,21px); line-height:2; letter-spacing:.06em; color:var(--fg); max-width:760px; margin-top:34px}
.subhero-lead .accent{color:var(--accent)}

.page-section{padding:90px 40px; border-bottom:1px solid var(--line); position:relative}
.page-wrap{max-width:1400px; margin:0 auto}
.page-section .ps-head{display:grid; grid-template-columns:120px 1fr; gap:40px; align-items:end; margin-bottom:54px; padding-bottom:22px; border-bottom:1px solid var(--line)}
.page-section .ps-num{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.2em}
.page-section .ps-title{font-family:var(--serif); font-size:clamp(28px,3.4vw,46px); letter-spacing:.03em; line-height:1.15; font-weight:500}
.page-section .ps-title .jp{display:block; font-size:14px; letter-spacing:.5em; color:var(--muted); margin-bottom:12px; font-weight:400}

.prose{font-family:var(--serif); font-size:15px; line-height:2.1; letter-spacing:.04em; color:var(--muted); max-width:820px}
.prose strong{color:var(--fg); font-weight:600}
.prose em{color:var(--accent); font-style:normal}
.prose p + p{margin-top:1.5em}

/* feature gallery (jyuku) */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.feature-card{background:var(--bg); padding:0; position:relative; overflow:hidden}
.feature-card .ph{aspect-ratio:4/3; background:var(--ink-3); background-size:cover; background-position:center; position:relative}
.feature-card .cap{padding:18px 20px}
.feature-card .cap .t{font-family:var(--serif); font-size:17px; letter-spacing:.04em}
.feature-card .cap .e{font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; margin-top:6px}

/* spec list */
.spec{display:grid; grid-template-columns:1fr 1fr; gap:10px 50px; max-width:980px}
.spec-row{display:grid; grid-template-columns:120px 1fr; gap:18px; align-items:baseline; padding:14px 0; border-bottom:1px dashed var(--line)}
.spec-k{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--accent); text-transform:uppercase}
.spec-v{font-family:var(--serif); font-size:14px; line-height:1.8; letter-spacing:.03em}
.spec-v small{display:block; color:var(--muted); font-size:12px; margin-top:3px}

/* instructors */
.inst-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px; max-width:760px}
.inst{display:flex; gap:22px; align-items:center; border:1px solid var(--line); padding:20px}
.inst .pic{width:96px; height:120px; flex:0 0 auto; background:var(--ink-3); background-size:cover; background-position:center top; border:1px solid var(--line)}
.inst .nm{font-family:var(--serif); font-size:21px; letter-spacing:.05em}
.inst .nm .en{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; margin-top:6px}
.inst .rl{font-family:var(--serif); font-size:12px; color:var(--muted); margin-top:8px; line-height:1.6}

/* venue list */
.venue-list{column-count:2; column-gap:50px; max-width:1000px}
.venue-item{break-inside:avoid; display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-family:var(--serif); font-size:13.5px; letter-spacing:.03em; line-height:1.6}
.venue-item .pin{color:var(--accent); font-family:var(--mono); font-size:10px; padding-top:3px}

/* price cards */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); max-width:980px}
.price-card{background:var(--bg); padding:26px 22px}
.price-card .pk{font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--accent); text-transform:uppercase}
.price-card .pv{font-family:var(--serif); font-size:19px; letter-spacing:.04em; margin-top:12px; line-height:1.5}
.price-card .pd{font-family:var(--serif); font-size:12px; color:var(--muted); margin-top:8px; line-height:1.7}

/* form embed + cta */
.form-embed{border:1px solid var(--line-strong); background:color-mix(in srgb, var(--bg), black 6%); padding:8px; max-width:820px}
.form-embed iframe{width:100%; border:0; display:block; background:#fff}
.cta-row{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:8px}
.btn-laquer{
  display:inline-flex; align-items:center; gap:14px; padding:18px 36px;
  border:1px solid var(--fg); font-family:var(--sans); font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  transition:all .35s;
}
.btn-laquer:hover{background:var(--fg); color:var(--bg)}
.btn-accent{border-color:var(--accent); color:var(--accent)}
.btn-accent:hover{background:var(--accent); color:#0d150f}
.mail-line{font-family:var(--mono); font-size:14px; letter-spacing:.1em; color:var(--fg)}
.mail-line .lab{color:var(--muted); margin-right:10px; font-size:11px; letter-spacing:.2em}

.note{font-family:var(--serif); font-size:12.5px; color:var(--muted); line-height:1.9; letter-spacing:.03em; margin-top:24px; max-width:820px}

@media (max-width: 900px){
  .subhero{padding:128px 22px 48px}
  .page-section{padding:64px 22px}
  .page-section .ps-head{grid-template-columns:1fr; gap:14px; margin-bottom:36px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .spec{grid-template-columns:1fr; gap:0}
  .inst-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .venue-list{column-count:1}
}
@media (max-width: 640px){
  .feature-grid{grid-template-columns:1fr}
  .spec-row{grid-template-columns:90px 1fr; gap:12px}
  .btn-laquer{padding:15px 26px; letter-spacing:.24em}
}