/* ===== reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{min-height:100vh;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit;color:inherit;border:none;background:none;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:2px}

/* ===== variables ===== */
:root{
  --color-primary:#B22222;
  --color-secondary-1:#FFD700;
  --color-secondary-2:#1E3A5F;
  --color-neutral-1:#FFFFFF;
  --color-neutral-2:#F5F5F0;
  --color-neutral-3:#2C2C2C;
  --color-accent:#2E8B57;
  --color-shadow:rgba(0,0,0,0.08);
  --color-border:#D4D4D4;
  --font-heading:'Noto Sans SC','PingFang SC',sans-serif;
  --font-body:'Noto Serif SC','Source Han Serif SC',serif;
  --font-ui:'Noto Sans SC',sans-serif;
  --size-h1:48px;--size-h2:36px;--size-h3:28px;--size-h4:22px;
  --size-body:18px;--size-ui:14px;--size-small:12px;
  --line-body:1.6;
  --weight-heading:900;--weight-body:400;--weight-bold:700;
  --sp-xs:4px;--sp-sm:8px;--sp-md:16px;--sp-lg:32px;--sp-xl:64px;
  --max-width:1200px;
  --radius:2px;
  --header-h:72px;
  --header-h-m:60px;
}

/* ===== typography ===== */
body{font-family:var(--font-body);font-weight:var(--weight-body);font-size:var(--size-body);line-height:var(--line-body);color:var(--color-neutral-3);background:var(--color-neutral-1)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--weight-heading);line-height:1.2}
h1{font-size:var(--size-h1)}h2{font-size:var(--size-h2)}h3{font-size:var(--size-h3)}h4{font-size:var(--size-h4)}
p{margin-bottom:1em}
small,.text-small{font-family:var(--font-ui);font-size:var(--size-small);color:var(--color-neutral-3);opacity:.65}

/* ===== container ===== */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--sp-lg)}
.page-content{padding-top:var(--header-h);min-height:calc(100vh - 200px)}
@media(max-width:768px){.page-content{padding-top:var(--header-h-m)}}

/* ===== skip-link ===== */
.skip-link{position:fixed;top:-100%;left:var(--sp-md);z-index:9999;padding:var(--sp-sm) var(--sp-md);background:var(--color-primary);color:var(--color-neutral-1);font-family:var(--font-ui);font-size:var(--size-ui);border-radius:var(--radius);transition:top .2s}
.skip-link:focus{top:var(--sp-md)}

/* ===== progress bar ===== */
.progress-bar{position:fixed;top:0;left:0;z-index:9998;width:0;height:3px;background:var(--color-primary);pointer-events:none;transition:width .1s linear}
@media(prefers-reduced-motion:reduce){.progress-bar{display:none}}

/* ===== header ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--header-h);background:transparent;transition:background .35s,box-shadow .35s;font-family:var(--font-ui)}
.site-header[data-scrolled]{background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--color-border),0 4px 12px var(--color-shadow)}
.header__inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--sp-lg);height:100%;display:flex;align-items:center;justify-content:space-between}
.header__brand{display:flex;align-items:center;gap:var(--sp-sm);flex-shrink:0}
.brand__logo{font-family:var(--font-heading);font-weight:var(--weight-heading);font-size:22px;color:var(--color-primary);letter-spacing:.5px;transition:color .25s}
.brand__logo:hover{color:var(--color-secondary-2)}
.brand__subtitle{font-family:var(--font-ui);font-size:var(--size-small);color:rgba(255,255,255,.7);display:none;transition:color .35s}
.site-header[data-scrolled] .brand__subtitle{color:var(--color-border)}
@media(min-width:640px){.brand__subtitle{display:inline-block}}

/* ===== navigation ===== */
.header__nav{display:flex;align-items:center}
.nav__list{display:flex;gap:var(--sp-lg)}
.nav__link{font-family:var(--font-ui);font-size:var(--size-ui);color:rgba(255,255,255,.9);padding:var(--sp-xs) 0;position:relative;transition:color .25s,border-color .25s;letter-spacing:.3px;border-bottom:2px solid transparent}
.site-header[data-scrolled] .nav__link{color:var(--color-neutral-3)}
.nav__link:hover,.nav__link:focus-visible{color:var(--color-primary)}
.nav__link[aria-current="page"]{color:var(--color-primary);border-bottom-color:var(--color-primary)}

/* ===== mobile toggle ===== */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;background:transparent;border:none;cursor:pointer;z-index:910}
.nav-toggle__bar{display:block;width:100%;height:2px;background:var(--color-primary);border-radius:1px;transition:transform .3s,opacity .3s}
.site-header[data-scrolled] .nav-toggle__bar{background:var(--color-neutral-3)}
@media(prefers-reduced-motion:reduce){.nav-toggle__bar{transition:none}}

/* ===== mobile nav open state ===== */
@media(max-width:768px){
  .nav-toggle{display:flex}
  .header__nav{position:fixed;top:0;left:0;right:0;bottom:0;z-index:905;background:var(--color-neutral-1);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s}
  .header__nav[data-open]{opacity:1;pointer-events:auto}
  .nav__list{flex-direction:column;gap:var(--sp-lg);text-align:center}
  .nav__link{font-size:20px;color:var(--color-neutral-3);border-bottom:none;padding:var(--sp-sm) var(--sp-md)}
  .nav__link[aria-current="page"]{color:var(--color-primary);border-bottom:none;background:var(--color-neutral-2);border-radius:var(--radius)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-header{height:var(--header-h-m)}
  .header__inner{padding:0 var(--sp-md)}
}

/* ===== footer ===== */
.site-footer{background:var(--color-secondary-2);color:var(--color-neutral-1);font-family:var(--font-ui);padding:var(--sp-xl) 0 var(--sp-lg)}
.footer__inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--sp-lg);display:grid;grid-template-columns:1fr;gap:var(--sp-lg)}
@media(min-width:640px){.footer__inner{grid-template-columns:2fr 1fr 2fr}}
.footer__logo{font-family:var(--font-heading);font-weight:var(--weight-heading);font-size:22px;color:var(--color-primary);letter-spacing:.5px}
.footer__logo:hover{color:var(--color-secondary-1)}
.footer__tagline{font-size:var(--size-ui);color:rgba(255,255,255,.6);margin-top:var(--sp-xs)}
.footer__links{display:flex;flex-direction:column;gap:var(--sp-sm);padding-top:var(--sp-xs)}
.footer__link{font-size:var(--size-ui);color:rgba(255,255,255,.8);transition:color .25s}
.footer__link:hover,.footer__link:focus-visible{color:var(--color-accent)}
.footer__info{display:flex;flex-direction:column;gap:var(--sp-xs);font-size:var(--size-small);color:rgba(255,255,255,.5);padding-top:var(--sp-xs)}
.footer__copyright,.footer__icp,.footer__contact{margin:0}
.footer__contact{font-size:var(--size-small);word-break:break-all}
@media(max-width:639px){.footer__inner{text-align:center}.footer__links{align-items:center}}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--sp-sm) var(--sp-lg);font-family:var(--font-ui);font-size:var(--size-ui);font-weight:var(--weight-bold);border:2px solid transparent;border-radius:var(--radius);transition:background .25s,border-color .25s,color .25s,box-shadow .25s;cursor:pointer;min-height:44px}
.btn--primary{background:var(--color-primary);color:var(--color-neutral-1);border-color:var(--color-primary)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--color-secondary-2);border-color:var(--color-secondary-2);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.btn--secondary{background:var(--color-secondary-2);color:var(--color-neutral-1);border-color:var(--color-secondary-2)}
.btn--secondary:hover,.btn--secondary:focus-visible{background:var(--color-primary);border-color:var(--color-primary)}
.btn--outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn--outline:hover,.btn--outline:focus-visible{background:var(--color-primary);color:var(--color-neutral-1)}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* ===== card ===== */
.card{background:var(--color-neutral-1);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:0 2px 8px var(--color-shadow);padding:var(--sp-lg);transition:box-shadow .25s,border-color .25s}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);border-color:var(--color-secondary-2)}
.card__title{font-family:var(--font-heading);font-weight:var(--weight-heading);font-size:var(--size-h4);color:var(--color-secondary-2);margin-bottom:var(--sp-sm)}
.card__body{font-size:var(--size-body);color:var(--color-neutral-3);line-height:var(--line-body)}
@media(prefers-reduced-motion:reduce){.card{transition:none}}

/* ===== coord ===== */
.coord{font-family:var(--font-ui);font-size:var(--size-small);font-weight:var(--weight-bold);color:var(--color-secondary-1);letter-spacing:1px;text-transform:uppercase;display:inline-block;padding:2px 6px;border:1px solid var(--color-secondary-1);border-radius:var(--radius);background:rgba(255,215,0,.06)}

/* ===== rule ===== */
.rule{display:block;height:0;border:none;border-top:1px solid var(--color-border);margin:var(--sp-lg) 0;width:100%}

/* ===== index ===== */
.index{font-family:var(--font-heading);font-weight:var(--weight-heading);font-size:var(--size-h2);color:var(--color-primary);line-height:1;margin-right:var(--sp-sm)}

/* ===== breadcrumb ===== */
.breadcrumb{display:flex;flex-wrap:wrap;gap:var(--sp-sm);font-family:var(--font-ui);font-size:var(--size-small);color:var(--color-border);padding:var(--sp-md) 0}
.breadcrumb__item{display:flex;align-items:center;gap:var(--sp-sm)}
.breadcrumb__item::after{content:'/';color:var(--color-border)}
.breadcrumb__item:last-child::after{content:none}
.breadcrumb__link{color:var(--color-secondary-2);transition:color .25s}
.breadcrumb__link:hover{color:var(--color-primary)}

/* ===== grid ===== */
.grid{display:grid;gap:var(--sp-lg)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
@media(min-width:640px){.grid--2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.grid--3{grid-template-columns:1fr 1fr 1fr}}
.grid__col{min-width:0}

/* ===== responsive images placeholder base ===== */
.img-holder{position:relative;overflow:hidden;background:var(--color-neutral-2);border:1px solid var(--color-border);border-radius:var(--radius);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--color-border);font-family:var(--font-ui);font-size:var(--size-ui)}
.img-holder--portrait{aspect-ratio:3/4}
.img-holder--wide{aspect-ratio:21/9}

/* ===== utilities ===== */
.text-center{text-align:center}
.text-primary{color:var(--color-primary)}
.text-secondary{color:var(--color-secondary-2)}
.text-accent{color:var(--color-accent)}
.mt-lg{margin-top:var(--sp-lg)}
.mb-lg{margin-bottom:var(--sp-lg)}
.py-xl{padding-top:var(--sp-xl);padding-bottom:var(--sp-xl)}

/* ===== reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ===== responsive adjustments ===== */
@media(max-width:480px){
  :root{--size-h1:32px;--size-h2:26px;--size-h3:22px;--size-h4:18px;--size-body:16px}
  .container{padding:0 var(--sp-md)}
  .card{padding:var(--sp-md)}
}