*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{line-height:1.6;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.8;background:var(--ground-cream);color:var(--ink-green);min-height:100vh}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:2px}
ul,ol{list-style:none}
button{font-family:inherit;font-size:inherit}
h1,h2,h3,h4,h5{font-family:var(--font-display);line-height:1.15;color:var(--ink-green);scroll-margin-top:calc(var(--space-6) + 20px)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin-bottom:var(--space-4)}
:focus-visible{outline:3px solid var(--signal-orange);outline-offset:3px;border-radius:2px}
::selection{background:var(--signal-orange);color:var(--ink-green)}
:root{--pitch-deep:#0B3D2E;--signal-orange:#FF6B35;--ground-cream:#F5F0E8;--linen:#EDE8DD;--ink-green:#0A1B14;--mist-line:#D2DCD5;--snow:#FFFFFF;--danger-red:#E23B30;--safe-green:#2E9E6B;--index-gold:#D9984A;--font-display:'Anton','Noto Sans SC','Helvetica Neue',sans-serif;--font-body:'Inter','Noto Sans SC','PingFang SC',sans-serif;--font-mono:'Roboto Mono',SFMono-Regular,Consolas,monospace;--fs-h1:clamp(2.5rem,6vw,5.5rem);--fs-h2:clamp(1.75rem,4vw,3rem);--fs-h3:clamp(1.25rem,2.5vw,1.75rem);--fs-body:1rem;--fs-mono:0.875rem;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--header-width:280px;--content-max:1200px;--border-thick:4px;--shadow-hard:6px 6px 0 var(--ink-green);--shadow-card:8px 8px 0 rgba(11,61,46,0.16);--ease-sharp:cubic-bezier(0.2,0.8,0.2,1);--dur:0.16s;--dur-slow:0.3s}
.skip-link{position:fixed;left:-9999px;top:0;z-index:400;background:var(--signal-orange);color:var(--ink-green);padding:0.75rem 1.25rem;font-family:var(--font-mono);font-weight:700;font-size:0.85rem;text-decoration:none;border-bottom-right-radius:4px;border:2px solid var(--ink-green)}
.skip-link:focus{left:var(--header-width)}
.site-header{position:fixed;top:0;left:0;width:var(--header-width);height:100vh;background-color:var(--pitch-deep);color:var(--snow);border-right:var(--border-thick) solid var(--signal-orange);padding:var(--space-6) var(--space-5);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6);z-index:200;overflow-y:auto}
.site-header::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:140px;pointer-events:none;background:linear-gradient(135deg,transparent 46%,rgba(255,255,255,0.035) 46%,rgba(255,255,255,0.035) 50%,transparent 50%),linear-gradient(45deg,transparent 46%,rgba(255,107,53,0.06) 46%,rgba(255,107,53,0.06) 50%,transparent 50%);background-size:24px 24px;z-index:-1}
.site-header::after{content:'01';position:absolute;bottom:8px;right:6px;font-family:var(--font-mono);font-size:5.5rem;line-height:1;color:rgba(255,255,255,0.045);pointer-events:none;z-index:-1}
.site-header__brand{display:flex;flex-direction:column;gap:var(--space-3)}
.brand-lockup{display:flex;align-items:center;gap:var(--space-4);text-decoration:none;color:var(--snow)}
.brand-lockup:visited{color:var(--snow)}
.brand-lockup__mark{position:relative;display:inline-block;width:44px;height:44px;border-radius:50%;background:var(--signal-orange);border:2px solid var(--snow);flex-shrink:0;box-shadow:1px 1px 0 rgba(255,255,255,0.3)}
.brand-lockup__mark::before{content:'';position:absolute;width:18px;height:11px;background:var(--snow);border-radius:9px 2px 2px 9px;bottom:7px;left:10px;transform:rotate(-8deg)}
.brand-lockup__mark::after{content:'';position:absolute;width:7px;height:7px;background:var(--snow);border-radius:50%;right:5px;top:10px}
.brand-lockup__text{display:flex;flex-direction:column;gap:2px}
.brand-lockup__name{font-family:var(--font-display);font-size:1.4rem;letter-spacing:0.06em;line-height:1.1;color:var(--snow)}
.brand-lockup__slogan{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.15em;color:rgba(255,255,255,0.65)}
.site-header__meta{display:flex;flex-direction:column;gap:3px;border-left:3px solid var(--signal-orange);padding-left:var(--space-3);font-family:var(--font-mono);font-size:0.72rem;color:rgba(255,255,255,0.7);line-height:1.4}
.meta-status{display:inline-flex;align-items:center;gap:6px;color:var(--snow);font-weight:600}
.meta-status__dot{width:8px;height:8px;border-radius:50%;background:var(--safe-green);box-shadow:0 0 0 3px rgba(46,158,107,0.25);flex-shrink:0}
.meta-line{color:rgba(255,255,255,0.55)}
.site-header__nav{flex:1;display:flex;flex-direction:column}
.site-nav{display:flex;flex-direction:column;gap:6px;counter-reset:navIndex}
.site-nav__link{display:block;position:relative;padding:11px 12px;border-left:3px solid transparent;color:rgba(255,255,255,0.75);text-decoration:none;font-weight:500;font-size:0.95rem;letter-spacing:0.04em;transition:background var(--dur) var(--ease-sharp),color var(--dur),border-color var(--dur),padding-left var(--dur);background:transparent;counter-increment:navIndex}
.site-nav__link::before{content:counter(navIndex,decimal-leading-zero);font-family:var(--font-mono);font-size:0.62rem;color:var(--index-gold);margin-right:10px;display:inline-block;letter-spacing:0;vertical-align:middle;transition:color var(--dur)}
.site-nav__link:hover{color:var(--snow);background:rgba(255,255,255,0.06);padding-left:18px;border-left-color:var(--signal-orange)}
.site-nav__link[aria-current="page"]{color:var(--signal-orange);background:rgba(255,107,53,0.12);border-left-color:var(--signal-orange);font-weight:700}
.site-nav__link[aria-current="page"]::before{color:var(--signal-orange)}
.nav-toggle{display:none}
.site-main{margin-left:var(--header-width);min-height:100vh;background:var(--ground-cream);padding:var(--space-6) var(--space-5) var(--space-8)}
.site-footer{margin-left:var(--header-width);background-color:var(--pitch-deep);color:var(--snow);border-top:var(--border-thick) solid var(--signal-orange);padding:var(--space-7) var(--space-6) var(--space-5)}
.site-footer__inner{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 0.7fr;gap:var(--space-7)}
.footer-brand{display:flex;flex-direction:column;gap:var(--space-4)}
.brand-lockup--footer .brand-lockup__mark{width:40px;height:40px}
.footer-brand__desc{color:rgba(255,255,255,0.7);font-size:0.95rem;max-width:42ch}
.footer-trust{font-family:var(--font-mono);font-size:0.72rem;color:rgba(255,255,255,0.45);border-left:3px solid var(--index-gold);padding-left:var(--space-4);margin-bottom:0}
.footer-heading{font-family:var(--font-body);font-size:0.85rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--signal-orange);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid rgba(255,255,255,0.12)}
.footer-list{display:flex;flex-direction:column;gap:8px}
.footer-list a{color:rgba(255,255,255,0.7);text-decoration:none;padding:2px 0;transition:color var(--dur),padding-left var(--dur)}
.footer-list a:hover{color:var(--signal-orange);padding-left:6px}
.footer-list li{color:rgba(255,255,255,0.6);font-size:0.9rem;line-height:1.7}
.footer-list--contact li{position:relative;padding-left:var(--space-4)}
.footer-list--contact li::before{content:'◆';position:absolute;left:0;top:0.25em;color:var(--signal-orange);font-size:0.6rem}
.footer-contact__note{margin-top:var(--space-2);font-family:var(--font-mono);font-size:0.72rem;color:rgba(255,255,255,0.45);padding-top:var(--space-2);border-top:1px dashed rgba(255,255,255,0.15)}
.footer-nav,.footer-contact{display:flex;flex-direction:column;gap:var(--space-3)}
.site-footer__bottom{max-width:var(--content-max);margin:var(--space-6) auto 0;padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,0.12);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3);font-family:var(--font-mono);font-size:0.75rem;color:rgba(255,255,255,0.5)}
.footer-copy{margin-bottom:0}
.footer-icp{color:rgba(255,255,255,0.35)}
.container{width:100%;max-width:var(--content-max);margin:0 auto;padding-left:var(--space-5);padding-right:var(--space-5)}
.container--narrow{max-width:880px}
.grid{display:grid;gap:var(--space-5)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem 1.5rem;border:2px solid var(--ink-green);background:transparent;color:var(--ink-green);font-family:var(--font-body);font-weight:700;font-size:0.9rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:all var(--dur) var(--ease-sharp)}
.btn:hover{background:var(--pitch-deep);color:var(--snow)}
.btn:active{transform:translate(2px,2px)}
.btn--primary{background:var(--signal-orange);border-color:var(--ink-green);box-shadow:5px 5px 0 var(--ink-green)}
.btn--primary:hover{background:var(--pitch-deep);border-color:var(--pitch-deep);color:var(--snow);box-shadow:2px 2px 0 var(--ink-green)}
.btn--ghost{border-color:var(--snow);color:var(--snow);background:transparent}
.btn--ghost:hover{background:var(--snow);color:var(--pitch-deep)}
.card{background:var(--snow);border:2px solid var(--ink-green);box-shadow:var(--shadow-card);padding:var(--space-5)}
.card--dark{background:var(--pitch-deep);color:var(--snow);border-color:var(--pitch-deep)}
.card--orange{background:var(--signal-orange);border-color:var(--ink-green);color:var(--ink-green)}
.breadcrumbs{font-family:var(--font-mono);font-size:0.75rem;margin-bottom:var(--space-6);color:rgba(10,27,20,0.6)}
.breadcrumbs__list{display:flex;flex-wrap:wrap;gap:6px;padding:0}
.breadcrumbs__item:not(:last-child)::after{content:'/';margin-left:6px;color:rgba(10,27,20,0.35)}
.breadcrumbs__link{color:var(--pitch-deep);text-decoration:none;font-weight:600}
.breadcrumbs__link:hover{color:var(--signal-orange)}
.breadcrumbs__item[aria-current="page"]{color:rgba(10,27,20,0.55)}
.section{margin-bottom:var(--space-7)}
.section__header{display:flex;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-5)}
.section__index{font-family:var(--font-mono);font-size:clamp(2.5rem,5vw,4.5rem);font-weight:700;line-height:1;color:var(--index-gold);filter:drop-shadow(2px 2px 0 rgba(217,152,74,0.25))}
.section__title{font-family:var(--font-display);font-size:var(--fs-h2);color:var(--ink-green);margin-bottom:0}
.section__intro{max-width:68ch;font-size:1.05rem;color:rgba(10,27,20,0.72)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:2px solid var(--ink-green);font-family:var(--font-mono);font-size:0.7rem;font-weight:700;letter-spacing:0.04em;background:var(--snow);color:var(--ink-green)}
.tag--success{background:var(--safe-green);border-color:var(--safe-green);color:var(--snow)}
.tag--error{background:var(--danger-red);border-color:var(--danger-red);color:var(--snow)}
.tag--gold{background:var(--index-gold);border-color:var(--index-gold);color:var(--ink-green)}
.accordion{display:flex;flex-direction:column;gap:var(--space-3)}
.accordion__item{background:var(--snow);border:2px solid var(--ink-green);box-shadow:5px 5px 0 rgba(11,61,46,0.1)}
.accordion__trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);background:transparent;border:none;padding:var(--space-4) var(--space-5);font-family:var(--font-body);font-weight:700;font-size:1rem;color:var(--ink-green);cursor:pointer;text-align:left}
.accordion__trigger::after{content:'+';font-size:1.3rem;line-height:1;color:var(--signal-orange);transition:transform var(--dur) var(--ease-sharp);flex-shrink:0;font-weight:700}
.accordion__trigger[aria-expanded="true"]::after{content:'−'}
.accordion__panel{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-sharp)}
.accordion__panel-inner{padding:0 var(--space-5) var(--space-4);border-top:1px dashed var(--mist-line)}
.image-frame{display:block;position:relative;width:100%;overflow:hidden;background:var(--linen);border:2px solid var(--ink-green);aspect-ratio:4/3}
.image-frame--portrait{aspect-ratio:3/4}
.image-frame--wide{aspect-ratio:16/7}
.image-frame--cover img{width:100%;height:100%;object-fit:cover}
.image-frame--motion::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 0%,rgba(255,107,53,0.05) 45%,rgba(255,107,53,0.12) 50%,rgba(255,107,53,0.05) 55%,transparent 100%);z-index:1;pointer-events:none}
.image-placeholder{display:flex;align-items:center;justify-content:center;min-height:160px;background:var(--linen);border:2px dashed var(--mist-line);color:rgba(10,27,20,0.4);font-family:var(--font-mono);font-size:0.75rem}
.scroll-progress{position:fixed;top:0;right:0;height:3px;width:calc(100% - var(--header-width));background:transparent;z-index:500;pointer-events:none}
.scroll-progress::before{content:'';position:absolute;top:0;left:0;bottom:0;width:100%;transform-origin:left;transform:scaleX(var(--progress,0));background:var(--signal-orange)}
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease-sharp),transform var(--dur-slow) var(--ease-sharp)}
[data-reveal].is-revealed{opacity:1;transform:none}
.whistle-ripple{position:fixed;border-radius:50%;border:3px solid var(--signal-orange);width:90px;height:90px;margin:-45px 0 0 -45px;pointer-events:none;z-index:1000;animation:whistle-ring 0.55s var(--ease-sharp) forwards}
@keyframes whistle-ring{0%{transform:scale(0.15);opacity:0.9}100%{transform:scale(3);opacity:0}}
.whistle-status{position:fixed;right:var(--space-5);bottom:var(--space-5);padding:10px 18px;background:var(--pitch-deep);border:2px solid var(--signal-orange);color:var(--snow);font-family:var(--font-mono);font-size:0.8rem;box-shadow:5px 5px 0 rgba(0,0,0,0.25);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity var(--dur),transform var(--dur);z-index:600}
.whistle-status.is-visible{opacity:1;transform:translateY(0)}
@media (max-width:991px){
  .skip-link:focus{left:0}
  .site-header{position:sticky;top:0;width:100%;height:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-3);padding:0.6rem 1rem;border-right:none;border-bottom:3px solid var(--signal-orange)}
  .site-header__brand{flex:1;margin-bottom:0}
  .site-header__nav{flex:0 0 auto;display:flex;align-items:center}
  .nav-toggle{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;background:rgba(255,255,255,0.08);border:2px solid rgba(255,255,255,0.4);border-radius:4px;color:var(--snow);font-family:var(--font-body);font-weight:600;font-size:0.85rem;cursor:pointer;transition:background var(--dur),border-color var(--dur);margin-left:var(--space-2)}
  .nav-toggle:hover{background:rgba(255,255,255,0.15);border-color:var(--snow)}
  .nav-toggle__bars{display:inline-flex;flex-direction:column;justify-content:center;gap:3px;width:18px}
  .nav-toggle__bars span{display:block;height:2px;background:var(--snow);border-radius:1px;transition:transform var(--dur) var(--ease-sharp),opacity var(--dur)}
  .nav-toggle__text{font-size:0.75rem;letter-spacing:0.1em}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .site-nav{position:absolute;top:100%;left:0;right:0;background:var(--pitch-deep);border-top:1px solid rgba(255,255,255,0.1);border-bottom:3px solid var(--signal-orange);padding:var(--space-3) var(--space-4) var(--space-4);display:none;box-shadow:0 12px 24px rgba(0,0,0,0.35)}
  .site-nav[data-open="true"]{display:flex}
  .site-nav__link{padding:13px 12px;font-size:1rem}
  .site-header__meta{display:none}
  .site-main{margin-left:0;padding-top:var(--space-5)}
  .site-footer{margin-left:0}
  .site-footer__inner{grid-template-columns:1fr 1fr;gap:var(--space-5)}
  .footer-brand{grid-column:1/-1}
  .scroll-progress{width:100%}
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .site-footer__inner{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
  .site-footer__bottom{flex-direction:column;align-items:flex-start}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .section__header{flex-direction:column;gap:var(--space-2)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
  .whistle-ripple{animation:none;opacity:0}
}