/* Quiet Coast — shared chrome + content-page styles.
   Used by the content pages (story, faqs, terms, shipping-returns, size-guide).
   index.html keeps its own inline styles. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
:root {
  --cream:#F5F1EB; --linen:#EDE8DF; --white:#FDFAF6;
  --brown:#2C1F14; --brown-mid:#6B5344; --brown-light:#A8917E;
  --blue:#8FA8B2; --blue-light:#C2D4DA; --sand:#C9AA87; --terracotta:#B5614A;
  --serif:'DM Serif Display', Georgia, serif;
  --sans:'Montserrat', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.25,0.46,0.45,0.94);
}
body { font-family: var(--sans); background: var(--cream); color: var(--brown); overflow-x: hidden; }
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display:block; width:100%; }
a { text-decoration:none; color:inherit; }
button { font-family: var(--sans); cursor:pointer; border:none; background:none; }
.eyebrow { font-size:0.6rem; font-weight:500; letter-spacing:0.28em; text-transform:uppercase; }

/* ─── NAV ─── */
#nav { position:fixed; inset:0 0 auto 0; z-index:200; display:flex; align-items:center; justify-content:flex-end; padding:1.5rem 3rem; background:transparent; }
.nav-logo { display:none; }
.nav-logo-img { height:56px; width:auto; object-fit:contain; mix-blend-mode:multiply; }
.nav-hamburger { display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.nav-hamburger span { display:block; width:22px; height:1px; background:var(--brown); transition:background .3s, transform .3s, opacity .3s; }
.nav-hamburger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav-hamburger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-drawer-overlay { position:fixed; inset:0; z-index:189; background:rgba(0,0,0,0.25); opacity:0; pointer-events:none; transition:opacity .35s var(--ease-out); }
.nav-drawer-overlay.open { opacity:1; pointer-events:all; }
.nav-drawer { position:fixed; top:0; right:0; bottom:0; width:33.333%; z-index:190; background:var(--cream); display:flex; flex-direction:column; padding:4rem 3rem 3rem; transform:translateX(100%); transition:transform .42s var(--ease-out); }
.nav-drawer.open { transform:translateX(0); }
.nav-drawer-links { display:flex; flex-direction:column; gap:0.6rem; margin-top:4rem; }
.nav-drawer-links a { font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.2rem); color:var(--brown); padding:0.9rem 0; border-bottom:1px solid rgba(44,31,20,0.09); transition:opacity .2s; }
.nav-drawer-links a:hover { opacity:0.55; }
.nav-drawer-info { display:flex; flex-direction:column; gap:0.55rem; margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid rgba(44,31,20,0.12); }
.nav-drawer-info-title { font-family:var(--sans); font-size:0.6rem; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; color:var(--brown-light); margin-bottom:0.35rem; }
.nav-drawer-info a { font-family:var(--sans); font-size:0.82rem; letter-spacing:0.03em; color:var(--brown-mid); transition:opacity .2s; }
.nav-drawer-info a:hover { opacity:0.6; }
.nav-drawer-cart { display:flex; align-items:center; gap:0.75rem; margin-top:auto; padding:0.9rem 1.4rem; background:var(--brown); color:var(--cream); font-family:var(--sans); font-size:0.62rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; cursor:pointer; width:100%; justify-content:center; transition:background .2s; }
.nav-drawer-cart:hover { background:var(--brown-mid); }
.nav-bag { display:none !important; }
@media (max-width:768px){ .nav-drawer{ width:82%; } .nav-drawer-links a{ font-size:1.7rem; } }

/* ─── PAGE HEADER + CONTENT ─── */
.page { max-width:760px; margin:0 auto; padding:9rem 2rem 5rem; }
.page-wide { max-width:1000px; }
.page-eyebrow { color:var(--brown-light); margin-bottom:1.1rem; }
.page-title { font-family:var(--serif); font-size:clamp(2.4rem,5.5vw,4rem); line-height:1.02; color:var(--brown); }
.page-title em { font-style:italic; }
.page-intro { font-size:0.95rem; font-weight:300; line-height:1.9; color:var(--brown-mid); margin-top:1.5rem; max-width:620px; }
.page-rule { height:1px; background:rgba(44,31,20,0.12); margin:3rem 0; border:none; }

.prose h2 { font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--brown); margin:2.5rem 0 1rem; }
.prose h3 { font-family:var(--sans); font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--brown-light); margin:2rem 0 0.75rem; }
.prose p { font-size:0.9rem; font-weight:300; line-height:1.95; color:var(--brown-mid); margin-bottom:1.1rem; }
.prose ul { list-style:none; margin:0 0 1.2rem; padding:0; }
.prose li { position:relative; padding-left:1.2rem; font-size:0.9rem; font-weight:300; line-height:1.8; color:var(--brown-mid); margin-bottom:0.5rem; }
.prose li::before { content:'\2014'; position:absolute; left:0; color:var(--sand); }
.prose a { color:var(--brown); border-bottom:1px solid rgba(44,31,20,0.35); transition:border-color .2s; }
.prose a:hover { border-color:var(--brown); }
.prose strong { font-weight:500; color:var(--brown); }
.note { font-size:0.72rem; font-style:italic; color:var(--brown-light); line-height:1.7; margin-top:1.5rem; padding-left:1rem; border-left:2px solid var(--sand); }

/* Accordion (FAQs) */
.faq { border-top:1px solid rgba(44,31,20,0.12); }
.faq details { border-bottom:1px solid rgba(44,31,20,0.12); }
.faq summary { cursor:pointer; padding:1.25rem 0; font-family:var(--serif); font-size:1.05rem; color:var(--brown); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--brown-light); font-size:1.2rem; flex-shrink:0; }
.faq details[open] summary::after { content:'\2013'; }
.faq-body { padding:0 0 1.4rem; font-size:0.88rem; font-weight:300; line-height:1.9; color:var(--brown-mid); }
.faq-body a { color:var(--brown); border-bottom:1px solid rgba(44,31,20,0.35); }

/* Size table */
.size-table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:0.82rem; }
.size-table th, .size-table td { text-align:left; padding:0.85rem 1rem; border-bottom:1px solid rgba(44,31,20,0.12); }
.size-table th { font-size:0.58rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--brown-light); }
.size-table td { font-weight:300; color:var(--brown-mid); }
.size-table td:first-child { font-family:var(--serif); font-size:0.95rem; color:var(--brown); }

/* ─── FOOTER ─── */
footer { background:#1a2744; color:var(--cream); padding:6rem 6rem 4rem; border-top:1px solid rgba(245,241,235,0.06); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:5rem; max-width:1100px; margin:0 auto 5rem; align-items:start; }
.footer-logo { margin-bottom:1.4rem; }
.footer-logo img { height:100px; width:auto; object-fit:contain; opacity:0.75; }
.footer-tagline { font-family:var(--serif); font-size:0.85rem; font-style:italic; font-weight:300; line-height:1.8; color:rgba(245,241,235,0.62); max-width:220px; }
.footer-col-title { font-size:0.58rem; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color:rgba(245,241,235,0.62); margin-bottom:1.8rem; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:1rem; }
.footer-links a { font-size:0.82rem; font-weight:300; color:rgba(245,241,235,0.62); transition:color .2s; }
.footer-links a:hover { color:var(--cream); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid rgba(245,241,235,0.07); max-width:1100px; margin:0 auto; }
.footer-copy { font-size:0.62rem; letter-spacing:0.05em; color:rgba(245,241,235,0.28); }
.footer-legal { display:flex; gap:2rem; }
.footer-legal a { font-size:0.62rem; color:rgba(245,241,235,0.28); transition:color .2s; }
.footer-legal a:hover { color:rgba(245,241,235,0.6); }

@media (max-width:768px){
  #nav { padding:1.25rem 1.5rem; }
  .page { padding:7.5rem 1.5rem 4rem; }
  footer { padding:3.5rem 1.5rem 2rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .footer-bottom { flex-direction:column; gap:1rem; text-align:center; }
  .footer-legal { flex-wrap:wrap; justify-content:center; }
}
@media (max-width:480px){ .footer-grid { grid-template-columns:1fr; } }