/* ============================================================
   KAMIMOTO GUIDE STYLESHEET
   Shared CSS for all editorial guide pages (/guides/**).
   Every value below is copied verbatim from the Kamimoto
   homepage (index.html) design system, or — where marked
   NEW COMPONENT — built using only those same tokens
   (colours, fonts, radii, spacing, button/pill shapes) so
   guide pages look like part of the same site.
   Do not add new colours, fonts, gradients or shadows here.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS (copied from index.html :root) ---------- */
:root{
  --bg:#ffffff;
  --bg-alt:#f8f7f4;
  --bg-dark:#0f0e0c;
  --bg-banner-1:#1a1510;
  --bg-banner-2:#2e2418;
  --ink:#111111;
  --ink-soft:#555;
  --ink-mute:#999;
  --accent:#c8b99a;
  --accent-soft:#e8d4b0;
  --display:'Cormorant Garamond',serif;
}

/* ---------- 2. RESET + BASE (copied) ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#fff;font-family:'Plus Jakarta Sans',sans-serif;color:#111;overflow-x:hidden}

/* ---------- 3. NAV (copied verbatim from index.html) ---------- */
.nav{
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid #f0ede8;
  padding:0 2.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:58px;
  position:sticky;
  top:0;
  z-index:999;
  width:100%;
}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;letter-spacing:0.04em;color:#111;text-decoration:none}
.nav-center{display:flex;align-items:center;gap:28px}
.nav-center a{font-size:12.5px;color:#555;text-decoration:none;letter-spacing:0.01em;transition:color 0.2s;cursor:pointer}
.nav-center a:hover{color:#111}
.nav-right{display:flex;align-items:center;gap:8px}
.pill{border-radius:100px;font-size:12px;padding:8px 18px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;letter-spacing:0.01em;line-height:1;transition:all 0.2s;border:none}
.pill-dark{background:#111;color:#fff}
.pill-dark:hover{background:#333}
.pill-outline{background:transparent;color:#111;border:1.5px solid #ccc}
.pill-outline:hover{border-color:#111}
.pill-lang{background:transparent;color:#888;border:1px solid #e0ddd8;font-size:11px;padding:6px 12px}
.pill-lang:hover{color:#111;border-color:#111}
.pill-lang .lang-on{color:#111;font-weight:600}

/* Mobile burger (NEW COMPONENT — built from nav tokens above) */
.nav-burger{display:none;background:transparent;border:none;cursor:pointer;width:38px;height:38px;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:8px}
.nav-burger span{display:block;width:21px;height:2px;background:#111;margin:0;border-radius:2px;transition:all .2s;flex:0 0 2px}
.nav-mobile-menu{display:none;position:fixed;inset:58px 0 0 0;background:#fff;z-index:998;padding:24px 1.5rem;flex-direction:column;gap:2px;overflow-y:auto}
.nav-mobile-menu.open{display:flex}
.nav-mobile-menu a{font-size:14px;color:#333;text-decoration:none;padding:14px 4px;border-bottom:1px solid #f0ede8}
.nav-mobile-menu .pill{margin-top:14px;text-align:center}

/* ---------- 4. SECTIONS (copied) ---------- */
.sec{padding:60px 2.5rem}
.sec-alt{background:#f8f7f4}
.sec-dark{background:#0f0e0c}
.sec-label{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#c8b99a;margin-bottom:8px;font-weight:600}
.sec-h{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:400;color:#111;line-height:1.1;margin-bottom:6px}
.sec-h-light{color:#f8f4ee}
.sec-sub{font-size:13px;color:#999;margin-bottom:36px;line-height:1.65}
.sec-sub-light{color:#555}
.divider{height:1px;background:#f0ede8;margin:0 2.5rem}

/* ---------- 5. FAQ (copied verbatim) ---------- */
.faq-wrap{max-width:900px;margin:0 auto}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.fq{padding:20px 0;border-bottom:1px solid #f0ede8;cursor:pointer;transition:background 0.15s}
.fq:nth-child(odd){padding-right:36px}
.fq:nth-child(even){padding-left:36px;border-left:1px solid #f0ede8}
.fq-top{display:flex;align-items:flex-start;gap:10px;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.fq-top:focus-visible{outline:2px solid #c8b99a;outline-offset:5px;border-radius:6px}
.fq-ic{width:34px;height:34px;border-radius:9px;background:#f5f2ec;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.fq-q{font-size:13.5px;font-weight:600;color:#111;line-height:1.45;flex:1;padding-top:6px}
.fq-arr{font-size:11px;color:#bbb;flex-shrink:0;margin-top:8px;transition:transform 0.25s}
.fq.open .fq-arr{transform:rotate(180deg);color:#888}
.fq-a{font-size:12.5px;color:#777;line-height:1.75;margin-top:12px;display:none;padding-left:44px}
.fq.open .fq-a{display:block}

/* ---------- 6. FINAL CTA BANNER (copied verbatim, reused as-is) ---------- */
.cta-banner{
  border-radius:20px;
  margin:0 2.5rem 60px;
  background:linear-gradient(120deg,#1a1510 0%,#2e2418 50%,#1a1510 100%);
  padding:52px 3.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  overflow:hidden;
  position:relative;
}
.cta-banner::before{content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(200,185,154,0.05)}
.cta-banner::after{content:'';position:absolute;left:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:rgba(200,185,154,0.04)}
.cb-left h2{font-family:'Cormorant Garamond',serif;font-size:40px;color:#f8f4ee;font-weight:400;line-height:1.1;margin-bottom:8px}
.cb-left h2 em{font-style:italic;color:#c8b99a}
.cb-left p{font-size:13px;color:#6a5e52}
.cb-btns{display:flex;gap:10px;flex-shrink:0}
.h-fill{background:#c8b99a;color:#111;border:none;border-radius:100px;padding:12px 28px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:0.02em;transition:background 0.2s;text-decoration:none;display:inline-block}
.h-fill:hover{background:#d4c8aa}
.h-ghost{background:transparent;color:#f8f4ee;border:1.5px solid rgba(248,244,238,0.3);border-radius:100px;padding:12px 26px;font-size:12px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:border-color 0.2s;text-decoration:none;display:inline-block}
.h-ghost:hover{border-color:rgba(248,244,238,0.6)}

/* ---------- 7. FOOTER (copied verbatim) ---------- */
.footer{background:#0a0907;padding:48px 2.5rem 32px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;align-items:start}
.fl-logo{font-family:'Cormorant Garamond',serif;font-size:22px;color:#f0ebe2;margin-bottom:10px;display:block;text-decoration:none}
.fl-tagline{font-size:12px;color:#8a8580;line-height:1.7}
.fl-col h4{font-size:10px;color:#6a6560;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.fl-col a{display:block;font-size:12.5px;color:#7a7570;text-decoration:none;margin-bottom:10px;transition:color 0.2s}
.fl-col a:hover{color:#c8b99a}
.footer-bottom{background:#070605;padding:14px 2.5rem;display:flex;justify-content:space-between;align-items:center}
.fb-copy{font-size:11px;color:#5a5550}
.fb-socials{display:flex;gap:18px}
.fb-socials a{font-size:11px;color:#5a5550;text-decoration:none;transition:color 0.2s}
.fb-socials a:hover{color:#c8b99a}

/* Floating WhatsApp (copied) */
.wa-float{position:fixed;bottom:22px;right:22px;background:#25d366;color:#fff;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;border:none;box-shadow:0 8px 24px rgba(37,211,102,0.45);transition:transform 0.2s;z-index:900;text-decoration:none}
.wa-float:hover{transform:scale(1.08)}


/* ============================================================
   NEW COMPONENTS — editorial guide article
   Built only from the tokens/patterns above: same radii (100px
   pills / 12–20px cards), same accent gold, same Cormorant
   display + Plus Jakarta Sans body, same soft off-white
   backgrounds, same 2.5rem side padding used by .sec.
   ============================================================ */

/* Article max-width wrapper: guides read as a single editorial
   column, not the full-bleed homepage sections. */
.article-wrap{max-width:760px;margin:0 auto;padding:0 2.5rem}

/* --- Breadcrumb (compact, above the title) --- */
.breadcrumb{max-width:760px;margin:0 auto;padding:18px 2.5rem 0;font-size:11.5px;color:#999;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.breadcrumb a{color:#888;text-decoration:none;transition:color .15s}
.breadcrumb a:hover{color:#111}
.breadcrumb .sep{color:#ccc}
.breadcrumb .current{color:#555}

/* --- Compact article header (H1 + author block) --- */
.article-header{max-width:760px;margin:0 auto;padding:14px 2.5rem 8px}
.article-h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:38px;line-height:1.12;color:#111;margin-bottom:16px}
.article-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.author-photo{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#f0ede8}
.author-block{display:flex;flex-direction:column;gap:1px}
.author-name{font-size:12.5px;font-weight:600;color:#111}
.author-role{font-size:11px;color:#999}
.article-dates{font-size:11px;color:#aaa;margin-left:auto;text-align:right}
.article-dates .dot{margin:0 4px}
.reading-time{font-size:11px;color:#aaa}

/* --- Quick answer --- */
.quick-answer{max-width:760px;margin:22px auto 0;padding:0 2.5rem}
.quick-answer-box{background:#f8f7f4;border-left:3px solid #c8b99a;border-radius:0 14px 14px 0;padding:18px 22px;font-size:13.5px;line-height:1.75;color:#333}
.quick-answer-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#c8b99a;font-weight:700;margin-bottom:8px;display:block}

/* --- Opening / supporting / proof-of-service photographs --- */
.article-photo{max-width:760px;margin:28px auto;padding:0 2.5rem}
.article-photo img{width:100%;height:auto;border-radius:16px;display:block;background:#f0ede8}
.article-photo figcaption{font-size:11.5px;color:#999;margin-top:8px;line-height:1.5}

/* --- Low-pressure CTA (inline, between content) --- */
.article-cta{max-width:760px;margin:30px auto;padding:0 2.5rem}
.article-cta-box{background:#faf8f3;border:1px solid #ece8e0;border-radius:16px;padding:24px 26px;text-align:left}
.article-cta-box p{font-size:13.5px;color:#444;line-height:1.7;margin-bottom:14px}
.article-cta-box p strong{color:#111}
.article-cta-link{font-size:12.5px;font-weight:600;color:#111;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.article-cta-link:hover{color:#c8b99a}

/* --- Main article content typography --- */
.article-body{max-width:760px;margin:0 auto;padding:6px 2.5rem 10px;font-size:14.5px;line-height:1.85;color:#333}
.article-body h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:25px;color:#111;margin:34px 0 12px}
.article-body h3{font-size:14.5px;font-weight:700;color:#111;margin:22px 0 8px}
.article-body p{margin-bottom:16px}
.article-body ul,.article-body ol{margin:0 0 16px 20px}
.article-body li{margin-bottom:8px}
.article-body a{color:#111;text-decoration:underline;text-decoration-color:#c8b99a;text-underline-offset:2px}
.article-body blockquote{border-left:3px solid #c8b99a;padding-left:16px;margin:20px 0;color:#555;font-style:italic}
.article-photo-inline{padding:0;margin:26px 0}

/* Always-visible search-question sections. These are editorial article
   paragraphs, not accordion controls. */
.answer-list{max-width:760px;margin:0 auto;padding:0 2.5rem 18px}
.answer-section{padding:26px 0;border-bottom:1px solid #f0ede8}
.answer-section:first-child{padding-top:10px}
.answer-section h2{font-family:'Cormorant Garamond',serif;font-size:25px;line-height:1.2;font-weight:600;color:#111;margin:0 0 10px}
.answer-section p{font-size:14.5px;line-height:1.85;color:#444;margin:0}
.answer-kamimoto{background:#faf8f3;border:1px solid #ece8e0;border-radius:14px;padding:22px 24px;margin-top:14px}
.answer-kamimoto+.answer-kamimoto{margin-top:12px}
.answer-kamimoto .answer-label{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#9b8965;font-weight:700;margin-bottom:7px}

/* --- Map section (conditional, disabled by default) --- */
.article-map{max-width:760px;margin:8px auto 30px;padding:0 2.5rem;display:none}
.article-map.enabled{display:block}
.map-heading{font-family:'Cormorant Garamond',serif;font-size:22px;color:#111;margin-bottom:6px}
.map-intro{font-size:13px;color:#777;line-height:1.65;margin-bottom:16px}
.map-embed-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#f0ede8}
.map-embed-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-fallback{font-size:12.5px;color:#888;margin-top:10px}
.map-link-list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.map-link-list a{font-size:13px;color:#111;text-decoration:none;font-weight:500;display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid #ece8e0;padding-bottom:8px}
.map-link-list a:hover{color:#c8b99a}
/* When the map is disabled, no empty space should render at all —
   the whole .article-map block stays display:none (see above),
   so nothing between the mid-article CTA and the FAQ is left blank. */

/* --- FAQ section heading (article version, sits above .faq-wrap) --- */
.article-faq-intro{max-width:760px;margin:0 auto;padding:0 2.5rem 8px;text-align:left}
.article-faq-intro .sec-h{font-size:28px}

/* --- About Kamimoto / About the author --- */
.about-block{max-width:760px;margin:0 auto;padding:26px 2.5rem;border-top:1px solid #f0ede8}
.about-block h3{font-family:'Cormorant Garamond',serif;font-size:18px;color:#111;margin-bottom:8px;font-weight:600}
.about-block p{font-size:12.5px;color:#777;line-height:1.75}
.about-block strong{color:#111}
.about-author{display:flex;gap:14px;align-items:flex-start}
.about-author img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#f0ede8}

/* --- Related guides --- */
.related-guides{max-width:900px;margin:0 auto;padding:40px 2.5rem}
.related-heading{font-family:'Cormorant Garamond',serif;font-size:24px;color:#111;margin-bottom:18px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related-card{border-radius:14px;overflow:hidden;text-decoration:none;display:block;background:#f8f7f4;border:1px solid #f0ede8;transition:border-color .15s}
.related-card:hover{border-color:#c8b99a}
.related-card img{width:100%;height:120px;object-fit:cover;display:block;background:#eee}
.related-card-body{padding:12px 14px}
.related-card-label{font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;color:#c8b99a;font-weight:600;margin-bottom:4px}
.related-card-title{font-size:12.5px;font-weight:600;color:#111;line-height:1.4}

/* --- Guide listing: same restrained editorial system as articles --- */
.guide-hub-header{max-width:900px;margin:0 auto;padding:42px 2.5rem 32px}
.guide-hub-header h1{font-family:'Cormorant Garamond',serif;font-size:42px;line-height:1.08;font-weight:600;color:#111;max-width:680px;margin:0 0 14px}
.guide-hub-header p{font-size:14px;line-height:1.75;color:#777;max-width:650px}
.guide-hub-main{max-width:1100px;margin:0 auto;padding:24px 2.5rem 70px}
.guide-hub-heading{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid #f0ede8;padding-bottom:14px;margin-bottom:24px}
.guide-hub-heading h2{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;color:#111}
.guide-hub-heading span{font-size:11px;color:#999}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.guide-card{display:block;color:#111;text-decoration:none;border:1px solid #ece8e0;border-radius:16px;overflow:hidden;background:#fff;transition:border-color .2s,transform .2s}
.guide-card:hover{border-color:#c8b99a;transform:translateY(-2px)}
.guide-card-image{aspect-ratio:16/10;overflow:hidden;background:#f0ede8}
.guide-card-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s}
.guide-card:hover .guide-card-image img{transform:scale(1.02)}
.guide-card-copy{padding:22px 24px 24px}
.guide-card-tag{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#9b8965;font-weight:700;margin-bottom:9px}
.guide-card-copy h2{font-family:'Cormorant Garamond',serif;font-size:26px;line-height:1.15;font-weight:600;margin:0 0 10px}
.guide-card-copy p{font-size:12.5px;line-height:1.7;color:#777;margin:0 0 16px}
.guide-card-link{font-size:12px;font-weight:600;color:#111}

/* ---------- 8. MOBILE RESPONSIVE ---------- */
@media(max-width:768px){
  .nav{padding:0 1rem;height:52px}
  .nav-center{display:none}
  .nav-right .pill-outline{display:none}
  .nav-logo{font-size:18px}
  .pill-dark{font-size:11px;padding:7px 14px}
  .nav-burger{display:flex}

  .sec{padding:40px 1.2rem}
  .sec-h{font-size:28px}

  .breadcrumb{padding:14px 1.2rem 0;font-size:11px}
  .article-header{padding:12px 1.2rem 4px}
  .article-h1{font-size:28px}
  .article-dates{margin-left:0;text-align:left;width:100%;order:3}
  .quick-answer{padding:0 1.2rem}
  .article-photo{padding:0 1.2rem;margin:20px auto}
  .article-cta{padding:0 1.2rem}
  .article-body{padding:6px 1.2rem 10px;font-size:14px}
  .article-body h2{font-size:22px}
  .answer-list{padding:0 1.2rem 14px}
  .answer-section h2{font-size:22px}
  .article-map{padding:0 1.2rem}
  .article-faq-intro{padding:0 1.2rem 8px}
  .about-block{padding:22px 1.2rem}

  .faq-grid{grid-template-columns:1fr !important}
  .fq:nth-child(even){padding-left:0;border-left:none}
  .fq:nth-child(odd){padding-right:0}

  .cta-banner{flex-direction:column;gap:24px;padding:36px 1.5rem;margin:0 1rem 40px;text-align:center}
  .cb-left h2{font-size:30px}
  .cb-btns{justify-content:center}

  .footer{grid-template-columns:1fr !important;gap:28px;padding:36px 1.5rem 24px}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;padding:12px 1.5rem}

  .related-guides{padding:32px 1.2rem}
  .related-grid{grid-template-columns:1fr !important}
  .guide-hub-header{padding:30px 1.2rem 22px}
  .guide-hub-header h1{font-size:30px}
  .guide-hub-main{padding:20px 1.2rem 50px}
  .guide-grid{grid-template-columns:1fr}
  .guide-card-copy{padding:19px 20px 21px}
  .guide-card-copy h2{font-size:24px}
}

@media(max-width:480px){
  .article-h1{font-size:24px}
  .sec-h{font-size:24px}
}