/* ============================================================
   golfamara.com — "DESERT GOLDEN HOUR" editorial design system
   ------------------------------------------------------------
   A Las Vegas golf-travel MAGAZINE. Warm desert sand + terracotta
   sunset, sunlit and inviting. Deliberately its own publication:
   - NOT amara.vegas (obsidian / champagne real-estate luxury)
   - NOT amara.golf (quiet fairway-green members' club)
   This one is warmer, lighter, more editorial-travel than either.

   Type: Fraunces (characterful old-style display serif, optical)
         Newsreader (readable editorial text serif for long-form)
         Inter (eyebrows / nav / meta — quiet structural sans)
   ============================================================ */

:root{
  /* --- warm paper base (light, sunlit — the magazine page) --- */
  --paper:#f7efe2;          /* page bg — warm desert paper */
  --paper-2:#f1e4d2;        /* raised panels / alt sections — dune */
  --paper-3:#ebd9c2;        /* deeper sand fill */
  --ink:#2a1d12;            /* primary text — roasted espresso-brown */
  --ink-soft:#5a4631;       /* secondary text — walnut */
  --muted:#947a5c;          /* tertiary / meta / captions — taupe */

  /* --- accents --- */
  --terra:#c0532a;          /* terracotta-sunset — primary accent */
  --terra-deep:#9c3f1d;     /* deeper rust (hover, dense type) */
  --ember:#e08a3c;          /* warm amber-gold (glow, dividers) */
  --sky:#7a6a8f;            /* dusk mauve — rare cool counterpoint */

  /* --- night ink (only for the hero overlay + footer) --- */
  --night:#231509;          /* deep desert dusk */

  --line:rgba(42,29,18,.14);
  --line-soft:rgba(42,29,18,.08);
  --line-strong:rgba(42,29,18,.26);

  --max:1180px;
  --measure:680px;          /* long-form reading column */
  --gut:clamp(22px,5vw,72px);

  --display:"Fraunces","Georgia",serif;
  --text:"Newsreader","Georgia","Times New Roman",serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --shadow:0 1px 0 rgba(255,255,255,.5),0 18px 40px -24px rgba(70,40,16,.4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  /* faint sunlit gradient + paper grain so flat color never reads cheap */
  background-image:
    radial-gradient(120% 80% at 92% -8%, rgba(224,138,60,.16), transparent 55%),
    radial-gradient(90% 70% at -10% 4%, rgba(192,83,42,.07), transparent 50%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--text);
  font-size:19px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---- type ---------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:560;
  line-height:1.04;letter-spacing:-.012em;color:var(--ink);
  margin:0 0 .42em;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
}
.display{
  font-size:clamp(2.9rem,8.2vw,6.4rem);
  font-weight:540;line-height:.96;letter-spacing:-.022em;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1;
}
h2{font-size:clamp(1.85rem,3.6vw,2.85rem);font-variation-settings:"opsz" 80}
h3{font-size:clamp(1.32rem,2.2vw,1.72rem);font-weight:520;font-variation-settings:"opsz" 40}

p{margin:0 0 1.15em;color:var(--ink-soft)}
.lead{
  font-family:var(--text);font-size:clamp(1.18rem,1.9vw,1.42rem);
  line-height:1.6;color:var(--ink);font-weight:380;letter-spacing:-.003em;
}

a{color:var(--terra-deep);text-decoration:none;
  text-underline-offset:.18em;text-decoration-thickness:from-font;
  transition:color .2s}
a:hover{color:var(--terra)}
/* in-body editorial links: warm underline that fills on hover */
.section p a, .lead a{
  text-decoration:underline;
  text-decoration-color:rgba(192,83,42,.34);
  text-decoration-thickness:1.5px;
}
.section p a:hover{text-decoration-color:var(--terra)}

em{font-style:italic}
strong{font-weight:600;color:var(--ink)}

.eyebrow{
  font-family:var(--ui);font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--terra);
  margin:0 0 16px;display:flex;align-items:center;gap:12px;
}
/* little ember tick before eyebrow text */
.eyebrow::before{
  content:"";width:22px;height:2px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--terra),var(--ember));
  border-radius:2px;
}

/* ---- rules / dividers --------------------------------------- */
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule-sun{
  border:0;height:0;margin:30px 0 6px;
  display:flex;align-items:center;gap:14px;color:var(--ember);
}
.rule-sun::before{content:"";height:2px;width:64px;border-radius:2px;
  background:linear-gradient(90deg,var(--terra),var(--ember))}
.rule-sun::after{content:"\2600";font-size:13px;color:var(--ember);opacity:.8}

/* ---- layout -------------------------------------------------- */
.container{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(52px,8vw,104px)}
/* long-form reading sections get a true magazine measure */
.section[style*="max-width"]{}
.prose{max-width:var(--measure)}
.prose h2{margin-top:1.7em}
.prose h2:first-of-type{margin-top:0}
.prose ul{margin:0 0 1.3em;padding:0;list-style:none}
.prose ul li{
  position:relative;padding-left:30px;margin-bottom:.7em;color:var(--ink-soft);
}
.prose ul li::before{
  content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--ember),var(--terra));
  box-shadow:0 0 0 4px rgba(224,138,60,.14);
}
.prose ul li strong{color:var(--ink)}

.grid{display:grid;gap:clamp(20px,2.6vw,34px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}

/* ---- top disclaimer strip (ADR-005 G-1) --------------------- */
/* kept genuinely prominent: warm band, terracotta keyline, dark text */
.disclaimer-strip{
  background:var(--night);
  color:#e8d6bd;
  font-family:var(--ui);
  font-size:12.5px;letter-spacing:.015em;line-height:1.5;
  text-align:center;padding:10px var(--gut);
  border-bottom:2px solid var(--terra);
}
.disclaimer-strip strong{color:#fff;font-weight:600}
.disclaimer-strip a{color:var(--ember)}
.disclaimer-strip a:hover{color:#fff}

/* ---- nav ----------------------------------------------------- */
.nav{position:sticky;top:0;z-index:40;
  background:rgba(247,239,226,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;
  height:70px;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.brand{
  font-family:var(--display);font-size:1.6rem;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;line-height:1;
  font-variation-settings:"opsz" 40,"WONK" 1;
}
.brand b{color:var(--terra);font-weight:600}
.nav__links{display:flex;gap:30px;list-style:none;margin:0;padding:0;
  font-family:var(--ui);font-size:13.5px;font-weight:500;letter-spacing:.02em}
.nav__links a{color:var(--ink-soft);position:relative;padding-block:6px}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;
  height:2px;background:linear-gradient(90deg,var(--terra),var(--ember));
  transition:right .25s ease}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{right:0}
@media(max-width:760px){.nav__links{display:none}}

/* ---- hero ---------------------------------------------------- */
.hero{position:relative;padding-block:clamp(64px,11vw,140px)}
.hero .display{max-width:15ch}
.hero .lead{max-width:58ch;margin-top:24px}

/* IMAGE HERO — warm duotone wash so disparate photos read as
   one publication; sunlit at the horizon, deepening at the base
   so white display type and the dark disclaimer both stay legible. */
.hero--cover{
  margin-inline:auto;max-width:var(--max);
  border-radius:18px;overflow:hidden;
  color:#fdf6ea;
  isolation:isolate;
  box-shadow:0 30px 70px -38px rgba(60,30,10,.6);
  padding-block:clamp(110px,18vw,210px);
}
.hero--cover::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--hero-img,url('/assets/img/hero.jpg')) center/cover no-repeat;
}
/* duotone + legibility scrim layered together */
.hero--cover::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(101deg,rgba(35,21,9,.74) 4%,rgba(35,21,9,.18) 52%,rgba(35,21,9,0) 78%),
    linear-gradient(0deg,rgba(35,21,9,.82),rgba(35,21,9,.05) 46%),
    linear-gradient(75deg,rgba(156,63,29,.34),rgba(224,138,60,.10) 60%,transparent);
  mix-blend-mode:normal;
}
.hero--cover .container{position:relative}
.hero--cover .eyebrow{color:var(--ember)}
.hero--cover .eyebrow::before{background:linear-gradient(90deg,var(--ember),#ffd9a0)}
.hero--cover .display{color:#fff;text-shadow:0 2px 30px rgba(20,10,2,.4)}
.hero--cover .lead{color:#f3e3cd}
.hero--cover .btn{border-color:rgba(253,246,234,.55);color:#fdf6ea}
.hero--cover .btn:hover{background:#fdf6ea;color:var(--night);border-color:#fdf6ea}

/* dateline / kicker under hero — magazine touch */
.dateline{
  font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:30px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;
}
.dateline span{display:inline-flex;align-items:center;gap:8px}
.dateline span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--terra)}
.hero--cover .dateline{color:#dcc6a6}
.hero--cover .dateline span::before{background:var(--ember)}

/* ---- buttons ------------------------------------------------- */
.btn{display:inline-block;font-family:var(--ui);font-size:12.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;padding:14px 28px;border-radius:999px;
  border:1.5px solid var(--terra);color:var(--terra-deep);transition:.22s;background:transparent}
.btn:hover{background:var(--terra);color:#fff;border-color:var(--terra)}
.btn--solid{background:var(--terra);color:#fff;border-color:var(--terra)}
.btn--solid:hover{background:var(--terra-deep);border-color:var(--terra-deep);color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

/* ---- editorial feature strip (homepage section headers) ------ */
.feature-head{max-width:30ch}
.feature-head h2{max-width:18ch}

/* ---- cards (the "what we cover" index tiles) ----------------- */
.card{
  position:relative;background:var(--paper-2);
  border:1px solid var(--line-soft);
  border-radius:14px;padding:30px 30px 34px;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;
  box-shadow:0 1px 0 rgba(255,255,255,.45);
  overflow:hidden;
}
/* numbered, hover-revealed sun accent in the corner */
.card::before{
  content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;
  background:radial-gradient(circle at 30% 70%,rgba(224,138,60,.5),transparent 62%);
  opacity:0;transition:opacity .35s;
}
.card:hover{transform:translateY(-4px);border-color:var(--line);
  box-shadow:0 22px 46px -28px rgba(80,40,12,.5)}
.card:hover::before{opacity:1}
.card .eyebrow{margin-bottom:14px}
.card h3{color:var(--ink);margin-bottom:.5em}
.card h3 a{color:inherit}
.card:hover h3 a{color:var(--terra-deep)}
.card p{font-size:16px;line-height:1.6;margin-bottom:0;color:var(--ink-soft)}

/* a warmer alternate section (dune band) for rhythm */
.band{
  background:
    radial-gradient(120% 100% at 100% 0%,rgba(224,138,60,.14),transparent 55%),
    var(--paper-2);
  border-block:1px solid var(--line-soft);
}

/* ---- pull / note callout (the independence + verify notes) --- */
.note{
  font-family:var(--ui);font-size:14px;line-height:1.6;color:var(--muted);
  border-left:2px solid var(--ember);padding:4px 0 4px 20px;margin:1.4em 0;
}
/* the about page "who we are not" card stays a strong panel */
.callout{
  position:relative;background:var(--night);color:#f1e2cb;
  border-radius:16px;padding:32px 34px;margin-top:30px;
  border:1px solid rgba(224,138,60,.3);
  box-shadow:0 24px 50px -30px rgba(40,20,6,.7);
}
.callout .eyebrow{color:var(--ember)}
.callout .eyebrow::before{background:linear-gradient(90deg,var(--ember),#ffd9a0)}
.callout p{color:#e8d6bd;margin-bottom:0}
.callout strong{color:#fff}

/* ---- footer -------------------------------------------------- */
.footer{
  background:var(--night);color:#bfa882;
  border-top:3px solid var(--terra);
  padding-block:clamp(48px,7vw,80px);
  font-family:var(--ui);font-size:14px;line-height:1.65;
}
.footer a{color:#ddc7a3}
.footer a:hover{color:var(--ember)}
.footer .brand{color:#fdf6ea}
.footer .brand b{color:var(--ember)}
.footer .eyebrow{color:var(--ember)}
.footer .eyebrow::before{background:linear-gradient(90deg,var(--ember),#ffd9a0)}
.footer p{color:#bfa882}
.footer__grid{display:grid;gap:32px;grid-template-columns:1.5fr repeat(3,1fr)}
@media(max-width:760px){.footer__grid{grid-template-columns:1fr 1fr}}
.footer__note{
  margin-top:42px;padding-top:24px;border-top:1px solid rgba(224,138,60,.22);
  font-size:12.5px;line-height:1.65;color:#a9926e;max-width:none;
}
.footer__note strong{color:#e8d6bd}

/* ---- reveal (progressive, motion-safe) ----------------------- */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
  .reveal.d1{animation-delay:.09s}
  .reveal.d2{animation-delay:.18s}
  .reveal.d3{animation-delay:.27s}
  @keyframes rise{to{opacity:1;transform:none}}
}
:focus-visible{outline:2.5px solid var(--terra);outline-offset:3px;border-radius:2px}

/* legacy hook left for safety; mapped to the sun divider look */
.rule-gold{
  border:0;height:2px;width:96px;border-radius:2px;margin:18px 0;
  background:linear-gradient(90deg,var(--terra),var(--ember));
}