/* ============================================================
   Artcol — Subpage shared styles
   Tone: quiet, editorial, mincho-led, parchment-on-ink.
   ============================================================ */

:root{
  --bg:#0c0c0c;
  --bg-2:#141414;
  --bg-3:#1c1c1c;
  --ink:#f6f2e8;
  --ink-2:#8a8578;
  --ink-3:#4a4740;
  --line:#232220;
  --accent:#e8c98a;
  --accent-2:#c94a2d;
  --accent-3:#d6d1c2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Shippori Mincho","Noto Serif JP",serif;-webkit-font-smoothing:antialiased;font-feature-settings:"palt"}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
.mono{font-family:"JetBrains Mono",monospace}
.en{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400}
.sans{font-family:"Noto Sans JP",sans-serif}

/* ===== TOPBAR ===== */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 36px;display:flex;justify-content:space-between;align-items:center;mix-blend-mode:difference;pointer-events:none}
.topbar > *{pointer-events:auto}
.brand{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:16px;letter-spacing:.18em;color:#fff}
.brand small{display:block;font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;font-size:11px;letter-spacing:.2em;color:#fff;margin-top:2px;opacity:.7}
.topbar nav{display:flex;gap:22px;font-family:"Noto Sans JP",sans-serif;font-size:12px;font-weight:500;color:#fff;letter-spacing:.08em}
.topbar nav a{position:relative}
.topbar nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#fff;opacity:.6}

/* ===== PAGE HEADER (shared subpage hero) ===== */
.page-head{padding:180px 60px 96px;position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.page-head::before{content:"";position:absolute;top:0;left:60px;right:60px;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.page-head::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:80px;background:var(--accent);opacity:.6}
.page-head .crumb{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;color:var(--ink-2);margin-bottom:28px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-head .crumb a{color:var(--ink-2)}
.page-head .crumb a:hover{color:var(--accent)}
.page-head .crumb .sep{color:var(--ink-3)}
.page-head .crumb .cur{color:var(--accent)}

.page-head .num{font-family:"Instrument Serif",serif;font-style:italic;font-size:18px;color:var(--accent);letter-spacing:.05em;margin-bottom:14px;display:flex;align-items:center;gap:14px}
.page-head .num::before{content:"";width:40px;height:1px;background:var(--accent)}
.page-head .num .mono{font-family:"JetBrains Mono",monospace;font-style:normal;font-size:12px;letter-spacing:.2em}

.page-head h1{font-family:"Shippori Mincho",serif;font-weight:500;font-size:clamp(48px,8vw,120px);line-height:1.1;letter-spacing:-.025em;margin:0 0 30px;max-width:1280px;text-wrap:balance}
.page-head h1 em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;color:var(--accent)}
.page-head .lede{font-family:"Shippori Mincho",serif;font-size:18px;line-height:2;color:var(--ink-2);max-width:720px;margin:0}
.page-head .lede strong{color:var(--ink);font-weight:500}

.page-head .side{position:absolute;top:100px;right:60px;writing-mode:vertical-rl;font-family:"Zen Old Mincho",serif;font-size:13px;color:var(--ink-3);letter-spacing:.5em}

/* ===== WRAP ===== */
.wrap{max-width:1180px;margin:0 auto;padding:0 60px}
.wrap-narrow{max-width:840px;margin:0 auto;padding:0 60px}

/* ===== SECTION CHROME ===== */
.sec{padding:120px 0;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.sec-head{margin-bottom:60px;display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.sec-ord{font-family:"Instrument Serif",serif;font-style:italic;font-size:15px;color:var(--accent);letter-spacing:.25em;text-transform:uppercase}
.sec-head h2{font-family:"Shippori Mincho",serif;font-weight:600;font-size:clamp(32px,4.5vw,56px);line-height:1.25;letter-spacing:-.01em;margin:12px 0 0;max-width:900px;text-wrap:balance}
.sec-head h2 em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;color:var(--accent)}
.sec-head .meta{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-3);letter-spacing:.15em;white-space:nowrap}

/* ===== DEFINITION LIST ===== */
.dl{display:grid;grid-template-columns:220px 1fr;gap:0;border-top:1px solid var(--line)}
.dl .dt{padding:22px 0;border-bottom:1px solid var(--line);font-family:"Zen Old Mincho",serif;font-weight:600;font-size:13px;letter-spacing:.15em;color:var(--ink-2)}
.dl .dt .en{display:block;font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;font-size:11px;color:var(--ink-3);letter-spacing:.05em;margin-top:3px}
.dl .dd{padding:22px 0;border-bottom:1px solid var(--line);font-family:"Shippori Mincho",serif;font-size:15px;line-height:1.9;color:var(--ink)}
.dl .dd .sub{display:block;font-size:13px;color:var(--ink-2);margin-top:4px}
.dl .dd .mono{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--accent);letter-spacing:.05em}

/* ===== CARD GRID ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cards .card{padding:40px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);position:relative;transition:background .2s}
.cards .card:hover{background:var(--bg-2)}
.cards .card .ord{font-family:"Instrument Serif",serif;font-style:italic;font-size:38px;color:var(--accent);line-height:.9;margin-bottom:20px}
.cards .card .role{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.22em;color:var(--ink-2);margin-bottom:12px}
.cards .card h3{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:20px;line-height:1.45;margin:0 0 14px}
.cards .card p{font-family:"Shippori Mincho",serif;font-size:13.5px;line-height:1.95;color:var(--ink-2);margin:0}

/* ===== TABLE ===== */
.tbl{width:100%;border-collapse:collapse;font-family:"Shippori Mincho",serif;font-size:14px}
.tbl th,.tbl td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-family:"Zen Old Mincho",serif;font-weight:600;font-size:12px;letter-spacing:.15em;color:var(--ink-2);background:var(--bg-2);width:180px}
.tbl td{color:var(--ink);line-height:1.8}
.tbl td .sub{font-size:12px;color:var(--ink-2);display:block;margin-top:4px}

/* ===== CTA strip ===== */
.cta-strip{padding:140px 60px;background:var(--bg-2);border-top:1px solid var(--line);text-align:center}
.cta-strip .ord{font-family:"Instrument Serif",serif;font-style:italic;font-size:14px;color:var(--accent);letter-spacing:.25em;margin-bottom:24px}
.cta-strip h2{font-family:"Shippori Mincho",serif;font-weight:600;font-size:clamp(34px,5vw,64px);line-height:1.2;letter-spacing:-.015em;margin:0 0 28px}
.cta-strip h2 em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;color:var(--accent)}
.cta-strip p{font-family:"Shippori Mincho",serif;font-size:16px;line-height:1.9;color:var(--ink-2);max-width:560px;margin:0 auto 40px}
.cta-strip .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;font-family:"Zen Old Mincho",serif;font-weight:600;font-size:13px;letter-spacing:.12em;transition:all .2s;cursor:pointer;border:1px solid transparent}
.btn::after{content:"→";font-family:"Instrument Serif",serif;font-style:italic}
.btn-pri{background:var(--accent);color:#000}
.btn-pri:hover{background:var(--accent-3);transform:translateY(-2px)}
.btn-gh{border:1px solid var(--ink-3);color:var(--ink)}
.btn-gh:hover{border-color:var(--accent);color:var(--accent)}

/* ===== FOOTER ===== */
footer{padding:72px 60px 36px;background:#070707;color:var(--ink-3);border-top:1px solid var(--line);font-family:"Noto Sans JP",sans-serif;font-size:13px}
.f-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.f-brand .bb{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:20px;letter-spacing:.18em;color:var(--ink);margin-bottom:8px}
.f-brand .en-tag{font-family:"Instrument Serif",serif;font-style:italic;font-size:12px;color:var(--accent);letter-spacing:.25em;margin-bottom:18px;display:block}
.f-brand p{line-height:1.9;max-width:340px}
.f-col h5{font-family:"Zen Old Mincho",serif;font-weight:600;color:var(--ink);font-size:12px;margin:0 0 14px;letter-spacing:.15em}
.f-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.f-col a:hover{color:var(--accent)}
.disc{max-width:840px;margin:0 auto 24px;text-align:center;font-family:"Instrument Serif",serif;font-style:italic;font-size:12px;color:var(--ink-3);line-height:1.8}
.f-bot{max-width:1280px;margin:0 auto;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;font-size:11px;flex-wrap:wrap;gap:12px}

/* ===== RESPONSIVE ===== */
@media (max-width:960px){
  .topbar{padding:16px 20px}
  .topbar nav{display:none}
  .page-head{padding:140px 24px 72px}
  .page-head::before{left:24px;right:24px}
  .page-head .side{display:none}
  .wrap,.wrap-narrow{padding:0 24px}
  .sec{padding:80px 0}
  .cards{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr}
  .dl .dt{padding-bottom:6px;border-bottom:0}
  .dl .dd{padding-top:6px}
  .tbl th{width:120px;padding:12px}
  .tbl td{padding:12px}
  .cta-strip{padding:100px 24px}
  .f-grid{grid-template-columns:1fr;gap:40px}
  footer{padding:56px 24px 28px}
  .f-bot{flex-direction:column;align-items:flex-start}
}