/* ============================================================
   Montana Wonder Tours — Public Landing
   Static stylesheet. Shares the Bad Girls of Butte design DNA
   (Fraunces / Alegreya Sans, warm paper, the same token system)
   but is TEAL-FORWARD: dark teal carries the identity, gold is
   the spark, wine drops back to a quiet tertiary tint.

   Structure:
     1. Tokens
     2. Base + layout primitives (shared with the BGOB system)
     3. Typography
     4. Photo slots, buttons, chips, grid
     5. Montana Wonder Tours page styles (teal-forward)
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --paper:   #f5efe6;
  --paper-2: #ece2d3;   /* alt band */
  --paper-3: #e3d7c4;   /* deeper cream for slots */
  --ink:     #261c17;
  --ink-soft:#6a5d51;
  --line:    #d8ccb7;
  --line-2:  #c9bca4;
  --dark:    #003943;   /* dark teal — the parent-brand identity */
  --dark-2:  #002a32;
  --dark-line:#1d4f59;
  --accent:  #782d3e;   /* wine — quiet tertiary here */
  --accent-d:#5e2230;
  --gold:    #e2a31d;
  --note:    oklch(0.52 0.09 250);
  --radius:  4px;
  --maxw:    1180px;
}

/* ---------- 2. Base + layout primitives ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; height:auto; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Alegreya Sans", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.mwt{ background:var(--paper); color:var(--ink); }

.site{ container-type:inline-size; background:var(--paper); overflow:hidden; position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 64px; }
.site .wrap{ max-width:1200px; }
@container (max-width:520px){ .wrap{ padding:0 24px; } }

section{ padding:78px 0; }
@container (max-width:520px){ section{ padding:46px 0; } }

/* ---------- 3. Typography ---------- */
.eyebrow{
  font:600 11px/1 "Alegreya Sans",sans-serif;
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent);
  margin:0 0 16px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--accent); display:inline-block; }

h1,h2,h3,h4{ font-family:"Fraunces",serif; color:var(--ink); margin:0; font-weight:560; line-height:1.03; letter-spacing:-.012em; }
h1{ font-size:clamp(36px,6.2cqi,72px); }
h2{ font-size:clamp(27px,4.4cqi,44px); }
h3{ font-size:21px; }

p{ font-size:16.5px; line-height:1.62; color:var(--ink-soft); margin:15px 0 0; max-width:62ch; }
p strong{ color:var(--ink); font-weight:600; }
@container (max-width:520px){ p{ font-size:15.5px; } }

/* ---------- 4. Photo slots / buttons / chips / grid ---------- */
.ph{
  position:relative; overflow:hidden;
  background-color:var(--paper-3);
  background-image:
    linear-gradient(150deg, rgba(120,45,62,.09), rgba(0,57,67,.11)),
    repeating-linear-gradient(135deg,transparent 0 12px,rgba(0,0,0,.035) 12px 13px);
  border:1px solid var(--line-2); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:140px; color:#7c7160;
}
.ph span{
  font:500 11px/1.55 ui-monospace,"Courier New",monospace;
  letter-spacing:.05em; text-transform:uppercase; padding:0 20px; max-width:34ch;
  position:relative; z-index:1;
}
.ph.archival{ background-image:linear-gradient(155deg, rgba(0,57,67,.55), rgba(120,45,62,.45)); color:#e8dcc6; }
.ph.archival span{ color:#efe3cd; }
.ph.round{ border-radius:50%; }

/* filled photo slots (real images) */
.ph.filled{ background:#1c1915; }
.ph.filled span{ display:none; }
.ph.filled img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ph.filled.tint::after{ display:block; content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(0,57,67,.18), rgba(120,45,62,.26)); }
.ph.round.zoom img{ transform:scale(1.7); transform-origin:55% 30%; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font:600 14.5px/1 "Alegreya Sans",sans-serif;
  padding:14px 24px; border-radius:var(--radius); cursor:pointer;
  border:1.5px solid var(--accent); color:#fff; background:var(--accent);
  transition:transform .14s ease, background .14s ease, box-shadow .14s ease;
  text-decoration:none;
}
.btn:hover{ background:var(--accent-d); transform:translateY(-1px); box-shadow:0 8px 20px rgba(94,34,48,.28); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn.ghost:hover{ background:rgba(38,28,23,.06); color:var(--ink); box-shadow:none; }
.btn.lg{ padding:17px 30px; font-size:15.5px; }
.btn.gold{ background:var(--gold); border-color:var(--gold); color:#2a1d05; }
.btn.gold:hover{ background:#cf9112; box-shadow:0 8px 20px rgba(226,163,29,.3); }

.chip{ display:inline-flex; align-items:center; gap:7px; font:500 12.5px/1 "Alegreya Sans"; color:var(--ink-soft);
  border:1px solid var(--line-2); border-radius:999px; padding:8px 13px; background:var(--paper); white-space:nowrap; }

.grid{ display:grid; gap:28px; }
.cols-2{ grid-template-columns:1fr 1fr; }
@container (max-width:520px){ .cols-2{ grid-template-columns:1fr; } }

.card{ border:1px solid var(--line-2); border-radius:var(--radius); padding:26px; background:#fbf7f0; }

.link-out{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; font-weight:500; transition:color .12s; }
.link-out:hover{ color:var(--accent-d); }

/* ============================================================
   5. Montana Wonder Tours — teal-forward page styles
   ============================================================ */

/* teal-forward overrides of the shared system */
.mwt .eyebrow{ color:var(--dark); }
.mwt .eyebrow::before{ background:var(--dark); }
.mwt .btn{ background:var(--dark); border-color:var(--dark); color:#f3efe4; }
.mwt .btn:hover{ background:var(--dark-2); box-shadow:0 8px 20px rgba(0,57,67,.26); }
.mwt .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.mwt .btn.ghost:hover{ background:rgba(0,57,67,.06); }
.mwt .btn.light{ background:transparent; color:#f1ead8; border-color:rgba(241,234,216,.45); }
.mwt .btn.light:hover{ background:rgba(241,234,216,.1); color:#fff; box-shadow:none; }
.mwt .btn.gold{ background:var(--gold); border-color:var(--gold); color:#2a1d05; }
.mwt .link-out{ color:var(--dark); }
.mwt .link-out:hover{ color:var(--dark-2); }

/* ---- header ---- */
.mwt-bar{ display:flex; align-items:center; gap:20px; padding:24px 0; }
.mwt-wm{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.mwt-wm .glyph{ width:13px; height:13px; background:var(--dark); transform:rotate(45deg); flex:0 0 auto; position:relative; }
.mwt-wm .glyph::after{ content:""; position:absolute; inset:3.5px; background:var(--gold); }
.mwt-wm .wm-txt{ font-family:"Fraunces",serif; font-weight:600; font-size:20px; line-height:.95; color:var(--ink); letter-spacing:-.01em; }
.mwt-wm .wm-txt small{ display:block; font-family:"Alegreya Sans"; font-weight:600; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-top:5px; }
.mwt-nav{ display:flex; gap:28px; margin-left:auto; }
.mwt-nav a{ font-size:14.5px; color:var(--ink-soft); text-decoration:none; transition:color .12s; }
.mwt-nav a:hover{ color:var(--ink); }
@container (max-width:680px){ .mwt-nav{ display:none; } }

/* ---- hero (teal band + full-width photo strip below) ---- */
.hero-band{ background:var(--dark); color:#ece3d0; padding:96px 0 0; position:relative; overflow:hidden; }
.hero-band::before{ content:""; position:absolute; inset:0; background:
   radial-gradient(120% 90% at 85% -10%, rgba(226,163,29,.12), transparent 55%),
   radial-gradient(90% 80% at 0% 110%, rgba(120,45,62,.22), transparent 60%); pointer-events:none; }
.hero-inner{ position:relative; max-width:980px; }
.hero-eyebrow{ font:600 11px/1 "Alegreya Sans"; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:11px; margin:0 0 22px; }
.hero-eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); display:inline-block; }
.hero-band h1{ color:#fbf6ea; font-size:clamp(40px,7cqi,82px); line-height:.98; letter-spacing:-.018em; text-wrap:balance; }
.hero-lede{ font-size:clamp(18px,2.3cqi,22px); line-height:1.5; color:#c5bca6; max-width:60ch; margin:26px 0 0; }
.hero-cta{ display:flex; gap:13px; flex-wrap:wrap; margin:36px 0 88px; }
.hero-strip{ position:relative; height:300px; }
.hero-strip .ph{ position:absolute; inset:0; border-radius:0; border-left:0; border-right:0; border-bottom:0; min-height:0; }
@container (max-width:680px){ .hero-band{ padding-top:64px; } .hero-cta{ margin-bottom:54px; } .hero-strip{ height:200px; } }

/* ---- section lead measure ---- */
.lead-2{ max-width:64ch; }

/* ---- principles row ---- */
.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; background:#fbf7f0; }
.principle{ padding:34px 32px; border-right:1px solid var(--line-2); }
.principle:last-child{ border-right:0; }
.principle .n{ font-family:"Fraunces",serif; font-weight:560; font-size:15px; color:var(--gold); }
.principle h3{ font-size:22px; margin:14px 0 0; }
.principle p{ margin-top:9px; font-size:15.5px; }
@container (max-width:760px){ .principles{ grid-template-columns:1fr; } .principle{ border-right:0; border-bottom:1px solid var(--line-2); } .principle:last-child{ border-bottom:0; } }

/* ---- founder split ---- */
.founder{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:54px; align-items:center; }
.founder .ph{ min-height:480px; }
.founder .cred{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
@container (max-width:760px){ .founder{ grid-template-columns:1fr; gap:30px; } .founder .ph{ min-height:340px; } }

/* ---- tours ---- */
.tour-grid{ display:grid; grid-template-columns:1.18fr 0.82fr; gap:28px; }
@container (max-width:760px){ .tour-grid{ grid-template-columns:1fr; } }
.tour-live{ display:flex; flex-direction:column; overflow:hidden; padding:0; text-decoration:none; color:inherit; transition:transform .16s ease, box-shadow .16s ease; }
.tour-live:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(38,28,23,.16); }
.tour-live .ph{ min-height:260px; border-radius:0; border-left:0; border-right:0; border-top:0; }
.tour-live .body{ padding:28px 30px 30px; display:flex; flex-direction:column; gap:13px; }
.tour-live .status{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font:600 10.5px/1 "Alegreya Sans"; letter-spacing:.16em; text-transform:uppercase; color:#1f7a4d; background:rgba(31,122,77,.1); border:1px solid rgba(31,122,77,.28); padding:7px 11px; border-radius:999px; }
.tour-live .status .dot{ width:7px; height:7px; border-radius:50%; background:#1f7a4d; }
.tour-live .go{ margin-top:auto; font-weight:600; color:var(--dark); font-size:15px; display:inline-flex; align-items:center; gap:8px; }
.tour-live:hover .go{ color:var(--dark-2); }

.tour-soon{ border:1px dashed var(--line-2); border-radius:var(--radius); background:repeating-linear-gradient(135deg,transparent 0 13px,rgba(0,0,0,.022) 13px 14px),var(--paper-2); padding:34px 32px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.tour-soon .status{ align-self:flex-start; font:600 10.5px/1 "Alegreya Sans"; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line-2); padding:7px 11px; border-radius:999px; background:var(--paper); }
.tour-soon h3{ font-size:25px; }
.tour-soon p{ margin-top:0; }
.tour-soon .hint{ font-family:"Caveat",cursive; font-size:19px; color:var(--note); margin-top:4px; }

/* ---- contact ---- */
.contact-band{ background:var(--dark); color:#d8cfba; }
.contact-grid{ display:grid; grid-template-columns:1.12fr 0.88fr; gap:54px; align-items:start; }
@container (max-width:680px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }
.contact-band h2{ color:#fbf6ea; }
.contact-band .eyebrow{ color:var(--gold); }
.contact-band .eyebrow::before{ background:var(--gold); }
.cdetail{ display:flex; flex-direction:column; gap:24px; margin-top:6px; }
.cdetail .lbl{ font:600 11px/1 "Alegreya Sans"; letter-spacing:.2em; text-transform:uppercase; color:#86a3a8; margin:0 0 7px; }
.cdetail a{ color:#fbf6ea; text-decoration:none; font-size:19px; font-family:"Fraunces",serif; border-bottom:1px solid rgba(226,163,29,.5); padding-bottom:2px; transition:border-color .12s; }
.cdetail a:hover{ border-color:var(--gold); }
.cdetail .val{ font-size:17px; color:#e6ddc8; }
.tbd-q{ font-family:"Caveat",cursive; color:var(--gold); font-size:.82em; margin-left:6px; }

/* ---- footer ---- */
.mwt-foot{ background:var(--dark-2); color:#9fb0b2; padding:46px 0; }
.mwt-foot .row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.mwt-foot .mwt-wm .wm-txt, .mwt-foot .mwt-wm .wm-txt small{ color:#e6ddc8; }
.mwt-foot .mwt-wm .wm-txt small{ color:#7d8f91; }
.mwt-foot .glyph{ background:var(--gold); }
.mwt-foot .glyph::after{ background:var(--dark-2); }
.mwt-foot a{ color:#9fb0b2; text-decoration:none; font-size:14px; }
.mwt-foot a:hover{ color:#e6ddc8; }
.mwt-foot .fnav{ display:flex; gap:24px; margin-left:auto; flex-wrap:wrap; }
.mwt-foot .copy{ font-size:12.5px; color:#6f8082; width:100%; margin-top:8px; }