/* The Aikido Path — independent aikido resource. Traditional budo editorial theme.
   Content is visible with CSS alone; nothing is gated on JavaScript. */

:root{
  --indigo:#1f3352;          /* hakama indigo */
  --indigo-deep:#16243c;
  --indigo-soft:#2c456b;
  --washi:#f6f2e9;           /* warm off-white paper */
  --washi-2:#efe8da;
  --sumi:#20242b;            /* ink black */
  --sumi-soft:#414852;
  --vermilion:#b23a2e;       /* seal red accent */
  --vermilion-deep:#8f2c22;
  --gold:#b98a3c;
  --line:#d9cfbc;
  --line-dark:#33445f;
  --maxw:1140px;
  --measure:44rem;
  --serif:"Shippori Mincho", Georgia, "Times New Roman", serif;
  --sans:"Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow:0 1px 2px rgba(22,36,60,.06), 0 10px 30px rgba(22,36,60,.08);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--washi);color:var(--sumi);
  font-family:var(--sans);font-size:1.05rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .15s}
a:hover{color:var(--vermilion)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.2rem)}

/* ---- skip link ---- */
.skip{position:absolute;left:-999px;top:0;background:var(--indigo);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:0 0 6px 0}
.skip:focus{left:0}

/* ---- header / nav ---- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(246,242,233,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.nav-wrap{display:flex;align-items:center;gap:1rem;min-height:66px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--indigo);font-weight:700;margin-right:auto}
.brand-kanji{display:grid;place-items:center;width:38px;height:38px;background:var(--indigo);color:var(--washi);
  border-radius:8px;font-family:var(--serif);font-size:1.35rem;line-height:1}
.brand-text{font-family:var(--serif);font-size:1.24rem;letter-spacing:.01em;color:var(--sumi)}
.nav-checkbox{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nav-toggle{display:none;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--indigo);
  padding:.35rem .6rem;border:1px solid var(--line);border-radius:8px;user-select:none}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem;margin:0;padding:0}
.site-nav a{display:block;text-decoration:none;color:var(--sumi-soft);font-weight:600;font-size:.94rem;
  padding:.5rem .7rem;border-radius:7px;letter-spacing:.01em}
.site-nav a:hover{color:var(--indigo);background:var(--washi-2)}
.site-nav li.active a,.site-nav a[aria-current="page"]{color:var(--vermilion);box-shadow:inset 0 -2px 0 var(--vermilion)}

/* ---- hero (home) ---- */
.hero{position:relative;background:var(--indigo-deep);color:var(--washi);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero-overlay{position:relative;
  background:linear-gradient(100deg,rgba(16,24,36,.86) 0%,rgba(16,24,36,.55) 60%,rgba(16,24,36,.2) 100%)}
.hero-overlay .wrap{padding-block:clamp(3.4rem,9vw,6.6rem)}
.kicker{font-family:var(--serif);text-transform:uppercase;letter-spacing:.24em;font-size:.78rem;
  color:var(--gold);margin:0 0 .8rem}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:1.1;
  margin:0 0 1rem;max-width:16ch;color:#fff}
.hero .lead{font-size:clamp(1.05rem,2vw,1.28rem);max-width:52ch;color:#eee7d8;margin:0 0 1.7rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--vermilion);color:#fff;text-decoration:none;font-weight:700;
  padding:.72rem 1.4rem;border-radius:8px;border:1px solid transparent;letter-spacing:.01em;transition:transform .12s,background .15s}
.btn:hover{background:var(--vermilion-deep);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:rgba(246,242,233,.6);color:var(--washi)}
.btn-ghost:hover{background:rgba(246,242,233,.12);color:#fff;border-color:var(--washi)}

/* ---- interior page head ---- */
.page-head{background:var(--indigo);color:var(--washi);border-bottom:3px solid var(--vermilion)}
.page-head .wrap{padding-block:clamp(2.4rem,6vw,4rem)}
.page-head .kicker{color:var(--gold)}
.page-head h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.12;
  margin:0 0 .8rem;color:#fff;max-width:22ch}
.page-head .lead{font-size:clamp(1.02rem,1.7vw,1.2rem);max-width:60ch;color:#e9e1d2;margin:0}
.page-hero{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.2rem)}
.page-hero img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:0 0 12px 12px;box-shadow:var(--shadow)}

/* ---- article ---- */
.article{padding-block:clamp(2rem,5vw,3.4rem);max-width:calc(var(--measure) + 6rem)}
.article > .lead{font-size:1.2rem;line-height:1.7;color:var(--sumi-soft);font-family:var(--serif);
  border-left:3px solid var(--vermilion);padding-left:1.1rem;margin:0 0 2rem}
.article h1{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.14;margin:.2rem 0 1rem;color:var(--indigo-deep)}
.article h2{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.2;
  margin:2.4rem 0 .7rem;color:var(--indigo-deep);padding-bottom:.35rem;border-bottom:1px solid var(--line)}
.article h3{font-family:var(--serif);font-size:1.2rem;margin:1.6rem 0 .5rem;color:var(--sumi)}
.article p{margin:0 0 1.15rem}
.article ul,.article ol{margin:0 0 1.3rem;padding-left:1.4rem}
.article li{margin:.4rem 0}
.article ul li::marker{color:var(--vermilion)}
.article ol li::marker{color:var(--indigo);font-weight:700}
.article strong{color:var(--sumi)}
.note{background:var(--washi-2);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:6px;padding:.85rem 1.1rem;font-size:.92rem;color:var(--sumi-soft)}

/* ---- glossary ---- */
.glossary{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:.1rem 1.2rem;margin:0 0 1.4rem;
  border-top:1px solid var(--line)}
.glossary dt{font-weight:700;font-family:var(--serif);color:var(--indigo-deep);padding:.6rem 0;border-bottom:1px solid var(--line)}
.glossary dd{margin:0;padding:.6rem 0;border-bottom:1px solid var(--line);color:var(--sumi-soft)}

/* ---- figures ---- */
figure.media{margin:1.6rem 0 1.8rem}
figure.media img{width:100%;border-radius:10px;box-shadow:var(--shadow)}
figure.media figcaption{font-size:.88rem;color:var(--sumi-soft);font-style:italic;margin-top:.55rem;text-align:center}

/* ---- 404 ---- */
.article-404{text-align:center;padding-block:clamp(3rem,8vw,5rem)}
.article-404 h1{color:var(--indigo-deep)}
.article-404 .btn{margin:.3rem}

/* ---- footer ---- */
.site-footer{background:var(--indigo-deep);color:#d5ddea;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;padding-block:2.8rem}
.fcol h3{font-family:var(--serif);font-size:1rem;color:#fff;margin:0 0 .8rem;letter-spacing:.02em}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin:.35rem 0}
.fcol a{color:#c3cede;text-decoration:none;font-size:.93rem}
.fcol a:hover{color:#fff;text-decoration:underline}
.fbrand .brand-mark{font-family:var(--serif);font-size:1.6rem;color:var(--washi)}
.fbrand .brand-name{font-family:var(--serif);font-size:1.15rem;color:#fff;margin:.3rem 0 .6rem}
.fdisclaimer{font-size:.84rem;color:#9fb0c6;line-height:1.6;max-width:36ch}
.footer-base{border-top:1px solid var(--line-dark);padding-block:1.2rem}
.footer-base p{margin:0;font-size:.84rem;color:#8fa1ba}

/* ---- responsive ---- */
@media (max-width:820px){
  .nav-toggle{display:inline-flex;align-items:center;order:3}
  .site-nav{flex-basis:100%;max-height:0;overflow:hidden;transition:max-height .28s ease}
  .nav-checkbox:checked ~ .site-nav{max-height:34rem}
  .site-nav ul{flex-direction:column;gap:.1rem;padding:.4rem 0 .8rem}
  .site-nav a{padding:.6rem .4rem;border-bottom:1px solid var(--line)}
  .site-nav li.active a,.site-nav a[aria-current="page"]{box-shadow:none;border-left:3px solid var(--vermilion);padding-left:.6rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.6rem}
  .fbrand{grid-column:1 / -1}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .glossary{grid-template-columns:1fr}
  .glossary dt{border-bottom:none;padding-bottom:0}
  .glossary dd{padding-top:.1rem}
  .hero-cta .btn{width:100%;text-align:center}
}

/* Safeguard: never hide content waiting on JS (belt-and-braces; no AOS used) */
[data-aos]{opacity:1 !important;transform:none !important}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none !important}}