/* ===================== SHARED DESIGN SYSTEM ===================== */
/* Used by every page — header, footer, mobile nav, base tokens & reset.   */
/* Page-specific layout (hero, sections, sidebar...) stays in each page's  */
/* own <style> block. Edit here to change header/footer everywhere.       */

:root{
  --paper:#faf6f1;
  --paper-2:#f2ebe2;
  --ink:#241417;
  --ink-soft:#6f5f60;
  --rose:#b8384f;
  --rose-deep:#5e1a29;
  --rose-line:#e7cdd0;
  --blush:#f3dfe1;
  --gold:#a97c34;
  --line:#e6ddd2;
  --white:#ffffff;
  --display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a,button{touch-action:manipulation;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
::selection{background:var(--blush);}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--rose-deep);color:var(--white);padding:12px 20px;z-index:200;font-size:.85rem;font-weight:700;}
.skip-link:focus{left:16px;top:16px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation-duration:.01ms !important;transition-duration:.01ms !important;}}

/* ===================== HEADER ===================== */
header.site{background:rgba(250,246,241,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:150;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:22px 32px;max-width:1180px;margin:0 auto;}
.logo{display:flex;align-items:baseline;gap:2px;font-family:var(--display);font-size:1.3rem;letter-spacing:.01em;color:var(--ink);}
.logo b{color:var(--rose);font-style:italic;font-weight:400;}
nav.primary{display:flex;gap:38px;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);}
nav.primary > div,nav.primary > a{position:relative;padding:10px 0;cursor:default;}
nav.primary > div.active,nav.primary > a.active{color:var(--rose);}
nav.primary > div.active::after,nav.primary > a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rose);}
.header-actions{display:flex;align-items:center;gap:22px;}
.icon-btn{width:20px;height:20px;opacity:.75;}
.btn-signin{font-size:.8rem;letter-spacing:.04em;font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;}

.megamenu{display:none;position:absolute;top:calc(100% + 26px);left:50%;transform:translateX(-50%);background:var(--white);box-shadow:0 24px 60px rgba(50,20,28,.14);padding:36px;width:820px;border:1px solid var(--line);}
.megamenu::before{content:"";position:absolute;top:-26px;left:0;right:0;height:26px;}
nav.primary > div:hover .megamenu,nav.primary > div:focus-within .megamenu{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px;}
.megamenu h4{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;font-weight:700;}
.megamenu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.megamenu li a{font-size:.86rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink);font-family:var(--sans);}
.megamenu li a:hover{color:var(--rose);}
.megamenu .browse-all{margin-top:6px;display:inline-block;font-size:.78rem;font-weight:600;color:var(--rose);border-bottom:1px solid var(--rose);padding-bottom:1px;}

/* ===================== FOOTER ===================== */
footer.site{background:var(--ink);color:rgba(255,246,241,.75);padding:72px 0 34px;}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-top .logo{color:var(--paper);}
.footer-top .logo b{color:var(--rose);}
.footer-top > div:first-child p{font-size:.86rem;margin-top:16px;max-width:32ch;color:rgba(255,246,241,.65);}
.footer-top h5{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,246,241,.58);margin:0 0 18px;font-weight:600;}
.footer-top a{display:block;font-size:.85rem;color:rgba(255,246,241,.8);margin-bottom:12px;}
.footer-bottom{margin-top:26px;padding-top:0;font-size:.76rem;color:rgba(255,246,241,.58);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ===================== MOBILE MENU (button + full-screen panel) ===================== */
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .25s ease, opacity .2s ease;}
body.nav-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.nav-open .menu-toggle span:nth-child(2){opacity:0;}
body.nav-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mobile-nav{position:fixed;inset:0;width:100%;height:100%;background:var(--paper);z-index:120;overflow-y:auto;padding:90px 24px 40px;opacity:0;visibility:hidden;transition:opacity .25s ease;display:flex;flex-direction:column;gap:4px;}
body.nav-open .mobile-nav{opacity:1;visibility:visible;}
.mobile-nav-backdrop{display:none;}
body.nav-open{overflow:hidden;}
.mobile-nav .mn-group{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:14px;display:flex;flex-direction:column;}
.mobile-nav h4{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:18px 0 10px;}
.mobile-nav h4:first-child{margin-top:0;}
.mobile-nav a{padding:12px 4px;font-size:1rem;color:var(--ink);border-radius:4px;min-height:44px;display:flex;align-items:center;}
.mobile-nav a:active{background:var(--blush);}
.mobile-nav a.mn-top{font-family:var(--display);font-size:1.15rem;}
.mobile-nav a.browse-all,.mobile-nav a[href$="/"]:last-of-type{color:var(--rose);font-weight:600;}

/* ===================== ARTICLE LAYOUT — SIDEBAR ("On This Page" + side lists) ===================== */
/* Mandatory on every content page: a sticky sidebar with an "On This Page" jump  */
/* nav plus 1-2 relevant link lists, next to the main article content.            */
.layout{display:grid;grid-template-columns:240px 1fr;gap:56px;padding:40px 0 80px;align-items:start;}
aside.sidebar{position:sticky;top:100px;}
aside.sidebar h4{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 14px;}
aside.sidebar h4:not(:first-child){margin-top:28px;}
aside.sidebar ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:2px;}
aside.sidebar ul:last-child{margin-bottom:0;}
aside.sidebar a{display:block;padding:8px 10px;border-radius:6px;font-size:.88rem;color:var(--ink-soft);}
aside.sidebar a:hover{background:var(--blush);color:var(--rose-deep);}
aside.sidebar a.current{background:var(--rose-deep);color:var(--white);font-weight:600;}
.content{min-width:0;}
.content p.lede{font-size:1.02rem;color:var(--ink-soft);max-width:68ch;margin-bottom:36px;}

@media (max-width:900px){
  .layout{grid-template-columns:1fr;padding:24px 0 48px;}
  aside.sidebar{position:static;display:flex;overflow-x:auto;gap:8px;padding-bottom:10px;}
  aside.sidebar ul{flex-direction:row;margin:0;}
  aside.sidebar h4{display:none;}
}

/* ===================== RESPONSIVE — HEADER / FOOTER / NAV ===================== */
@media (max-width:900px){
  nav.primary,.header-actions .btn-signin,.header-actions .icon-btn{display:none;}
  .menu-toggle{display:flex;}
  .header-inner{padding:16px 20px;}
  .wrap{padding:0 20px;}
  .footer-top{grid-template-columns:repeat(2,1fr);gap:36px 24px;}
}

@media (max-width:640px){
  .header-inner{padding:14px 16px;}
  .wrap{padding:0 16px;}
  .logo{font-size:1.15rem;}
  .footer-top{grid-template-columns:1fr;gap:32px;}
}