/* DanexGen — shared site styles (tokens, nav, footer, buttons, section shell) */

:root{
  --sumi:#1B201C;
  --sumi-soft:#242B25;
  --koke:#4F6A54;
  --washi:#F2EDE3;
  --washi-deep:#E8E1D2;
  --kin:#B99A5B;
  --ishi:#8A8D86;
  --tier-kiwami:#93A778;
  --tier-wakaba:#7CA070;
  --tier-miyabi:#5F7D5C;
  --tier-fuji:#3E5C46;
  --tier-gyoku:#B99A5B;
  --serif:'Shippori Mincho', serif;
  --sans:'Zen Kaku Gothic New', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--washi);color:var(--sumi);font-family:var(--sans);line-height:1.6;font-weight:400;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:700;color:var(--koke);}
.eyebrow.on-dark{color:var(--kin);}
h1,h2,h3{font-family:var(--serif);font-weight:600;}
.btn{display:inline-block;padding:14px 30px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;border-radius:2px;border:1px solid transparent;transition:opacity .15s ease;}
.btn:hover{opacity:.85;}
.btn-kin{background:var(--kin);color:var(--sumi);}
.btn-koke{background:var(--koke);color:var(--washi);}
.btn-outline-dark{border-color:rgba(242,237,227,.4);color:var(--washi);}
.btn-outline-light{border-color:var(--sumi);color:var(--sumi);}

/* ---------- announcement bar ---------- */
.announce{background:var(--sumi-soft);color:var(--washi);text-align:center;padding:10px 20px;font-size:12px;letter-spacing:.1em;}
.announce strong{color:var(--kin);font-weight:700;}
.announce a{border-bottom:1px solid var(--kin);margin-left:6px;white-space:nowrap;}

/* ---------- nav ---------- */
header.site{background:var(--sumi);color:var(--washi);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;max-width:1180px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:54px;width:54px;}
.brand .word{font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:.28em;text-transform:uppercase;}
.brand .word span{color:var(--kin);}
nav.links{display:flex;align-items:center;gap:34px;}
nav.links a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--washi);opacity:.85;}
nav.links a:hover{opacity:1;}
nav.links a.active{opacity:1;border-bottom:1px solid var(--kin);padding-bottom:4px;}
.portal-btn{border:1px solid var(--kin);color:var(--kin);padding:9px 18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;border-radius:2px;}
.nav-toggle{display:none;background:none;border:none;color:var(--washi);font-size:22px;cursor:pointer;}

/* ---------- nav dropdown (Shop mega-menu) ---------- */
.has-dropdown{position:relative;}
.has-dropdown > a{display:inline-flex;align-items:center;gap:6px;}
.has-dropdown .caret{font-size:9px;transition:transform .15s ease;display:inline-block;}
.has-dropdown:hover .caret{transform:rotate(180deg);}
.dropdown-panel{position:absolute;top:100%;left:0;margin-top:20px;background:var(--sumi-soft);border:1px solid rgba(242,237,227,.14);min-width:230px;padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s ease, transform .15s ease, visibility .15s;z-index:60;}
.has-dropdown:hover .dropdown-panel, .has-dropdown:focus-within .dropdown-panel{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown-panel a{display:block;padding:11px 22px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(242,237,227,.75);opacity:1;}
.dropdown-panel a:hover{color:var(--kin);background:rgba(255,255,255,.03);}
.dropdown-panel a.featured{color:var(--kin);font-weight:700;border-bottom:1px solid rgba(242,237,227,.14);margin-bottom:6px;padding-bottom:15px;}
.dropdown-panel a.external{border-top:1px solid rgba(242,237,227,.14);margin-top:6px;padding-top:15px;}

/* ---------- hero shell (each page sets its own .hero::before background-image) ---------- */
.hero{position:relative;background:var(--sumi);color:var(--washi);padding:110px 32px 130px;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center 65%;}
.hero-inner{position:relative;max-width:1180px;margin:0 auto;text-align:center;}
.hero h1{font-size:56px;line-height:1.2;max-width:820px;margin:20px auto 0;}
.hero .sub{max-width:560px;margin:26px auto 0;font-size:16px;font-weight:300;color:rgba(242,237,227,.82);}
.hero .ctas{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.hero.short{padding:90px 32px 70px;}
.hero.short .hero-inner{max-width:760px;}
.photo-note{position:relative;margin-top:64px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ishi);}
@media (max-width:560px){
  .hero h1{font-size:36px;}
  .hero{padding:80px 20px 90px;}
}

/* ---------- washi-mode page header (forms/reading pages — no photo hero) ---------- */
.page-head{padding:150px 0 20px;text-align:center;}
.page-head .eyebrow{justify-content:center;}
.page-head h1{font-size:44px;margin-top:14px;}
.page-head .sub{max-width:560px;margin:20px auto 0;font-size:15.5px;color:var(--ishi);font-weight:300;}
@media (max-width:560px){
  .page-head{padding:130px 0 10px;}
  .page-head h1{font-size:32px;}
}

/* ---------- section shell ---------- */
section{padding:100px 0;}
section.tight{padding:80px 0;}
.section-head{max-width:640px;}
.section-head h2{font-size:34px;margin-top:10px;}
.section-head p{font-size:15px;color:var(--ishi);margin-top:14px;font-weight:300;}
.section-head.centered{max-width:640px;margin:0 auto;text-align:center;}
.on-sumi{background:var(--sumi);color:var(--washi);}
.on-sumi .section-head p{color:rgba(242,237,227,.7);}

/* ---------- footer ---------- */
footer.site{background:var(--sumi);color:var(--washi);padding:70px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;}
.foot-brand .brand{padding:0;margin-bottom:14px;}
.foot-brand p{font-size:13px;color:var(--ishi);font-weight:300;max-width:260px;}
.foot-col h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--kin);margin-bottom:16px;}
.foot-col a, .foot-col p{display:block;font-size:13px;color:rgba(242,237,227,.82);margin-bottom:10px;font-weight:300;}
.foot-col a:hover{color:var(--washi);}
.foot-bottom{margin-top:60px;padding-top:24px;border-top:1px solid rgba(242,237,227,.12);display:flex;justify-content:space-between;font-size:11px;letter-spacing:.08em;color:var(--ishi);flex-wrap:wrap;gap:10px;}

@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  .portal-btn{display:none;}
  .nav-toggle{display:block;}

  /* ---------- mobile nav menu ---------- */
  header.site{position:relative;}
  header.site.nav-open .nav{flex-wrap:wrap;row-gap:16px;}
  header.site.nav-open .portal-btn{display:block;flex:0 0 100%;order:10;text-align:center;}
  nav.links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--sumi-soft);
    border-top:1px solid rgba(242,237,227,.12);
    box-shadow:0 16px 28px rgba(0,0,0,.35);
    z-index:70;
    max-height:calc(100vh - 90px);
    overflow-y:auto;
  }
  header.site.nav-open nav.links{display:flex;}
  nav.links a{padding:16px 32px;border-bottom:1px solid rgba(242,237,227,.08);opacity:1;}
  nav.links a.active{border-bottom:1px solid rgba(242,237,227,.08);}
  .has-dropdown{width:100%;}
  .has-dropdown > a{justify-content:space-between;width:100%;}
  .dropdown-panel{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:0;
    border:none;
    min-width:0;
    max-height:0;
    overflow:hidden;
    padding:0;
    transition:max-height .2s ease;
    background:rgba(0,0,0,.15);
  }
  .has-dropdown.dropdown-open .caret{transform:rotate(180deg);}
  .has-dropdown.dropdown-open .dropdown-panel{max-height:500px;padding:6px 0;}
  .dropdown-panel a{padding:12px 44px;border-bottom:none;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .foot-grid{grid-template-columns:1fr;gap:32px;}
  .brand .word{font-size:16px;}
}