/* ============================================================
   amara.golf — "THE MEMBERS' BOOK"
   Independent editorial on the private & luxury golf clubs of Las Vegas.

   Design intent: the privately-printed annual of a desert golf
   society. Deep fairway-green paper-stock, brass hairline rules,
   a literary high-contrast serif, generous measure and air.

   Deliberately a DIFFERENT PUBLICATION from its siblings:
   - amara.vegas is obsidian / champagne real-estate.
   - golfamara.com is warm desert travel.
   This one is pine-green, engraved, quiet, editorial.
   ============================================================ */

:root{
  /* ---- ink & paper (deep fairway green stock) ---- */
  --ink:#0b1410;          /* page — deep pine, near-black green */
  --ink-2:#0f1c15;        /* raised panels — pine */
  --ink-3:#16271d;        /* hairline fills / wells */
  --ink-4:#1d3327;        /* hover wells */

  /* ---- text ---- */
  --bone:#f3efe2;         /* primary text — warm ivory paper */
  --bone-dim:#cfd3c4;     /* secondary — sage ivory */
  --muted:#8b9788;        /* tertiary / meta — moss grey */

  /* ---- brass metal ---- */
  --brass:#b58f4a;        /* primary metal — antique brass */
  --brass-2:#dcb878;      /* polished brass — hover/glow */
  --brass-deep:#705527;   /* engraved brass on ivory — AA text (5.6:1) */

  /* ---- light editorial band (the "tipped-in plate") ---- */
  --paper:#ece6d6;        /* warm ivory page for light sections */
  --paper-2:#e3dcc8;
  --paper-ink:#1a2a20;    /* dark green ink on paper */
  --paper-ink-2:#3c4d42;

  /* ---- lines ---- */
  --line:rgba(243,239,226,.13);
  --line-soft:rgba(243,239,226,.07);
  --line-strong:rgba(243,239,226,.24);
  --line-brass:rgba(181,143,74,.42);

  /* ---- metrics ---- */
  --max:1180px;
  --measure:64ch;
  --gut:clamp(22px,5vw,72px);

  /* ---- type families ---- */
  --display:"Fraunces","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* ---- modular scale (1.25 major-third, fluid) ---- */
  --step--1:clamp(.82rem,.80rem + .12vw,.90rem);
  --step-0: clamp(1.02rem,.99rem + .16vw,1.12rem);
  --step-1: clamp(1.22rem,1.14rem + .40vw,1.45rem);
  --step-2: clamp(1.5rem,1.32rem + .9vw,2.05rem);
  --step-3: clamp(1.9rem,1.55rem + 1.7vw,2.9rem);
  --step-4: clamp(2.6rem,1.9rem + 3.6vw,4.9rem);
  --step-5: clamp(3.2rem,2.1rem + 5.6vw,6.4rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone-dim);
  font-family:var(--text);font-size:var(--step-0);line-height:1.72;
  font-weight:400;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
::selection{background:var(--brass);color:var(--ink)}

/* ---- type ---- */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:430;line-height:1.06;
  letter-spacing:-.008em;color:var(--bone);margin:0 0 .5em;
  font-optical-sizing:auto;
}
.display{
  font-size:var(--step-5);font-weight:380;line-height:.98;
  letter-spacing:-.02em;text-wrap:balance;
}
h2{font-size:var(--step-3);font-weight:420}
h3{font-size:var(--step-2);font-weight:440}
h4{font-size:var(--step-1);font-weight:480}

p{margin:0 0 1.15em;color:var(--bone-dim)}
a{color:var(--brass-2);text-decoration:none;
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .2s ease}
a:hover{color:var(--bone);text-decoration:underline;
  text-decoration-color:var(--line-brass)}

/* prose link affordance inside article bodies */
.prose a{text-decoration:underline;text-decoration-color:var(--line-brass);
  text-decoration-thickness:1px}
.prose a:hover{text-decoration-color:var(--brass-2)}

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

.eyebrow{
  font-family:var(--text);font-size:var(--step--1);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
  margin:0 0 18px;display:flex;align-items:center;gap:.85em;
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--brass);
  flex:0 0 auto;opacity:.8;
}
.eyebrow--plain::before{display:none}

.lead{
  font-family:var(--display);font-weight:360;
  font-size:var(--step-2);line-height:1.32;color:var(--bone);
  letter-spacing:-.008em;text-wrap:pretty;
}

/* ---- rules / dividers ---- */
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule-brass{
  height:1px;border:0;width:84px;margin:22px 0;
  background:linear-gradient(90deg,var(--brass) 0 36%,transparent);
}
/* engraved double-rule, used as a section mark */
.rule-eng{
  border:0;height:4px;margin:0;width:100%;
  background:
    linear-gradient(var(--line-brass),var(--line-brass)) top/100% 1px no-repeat,
    linear-gradient(var(--line),var(--line)) bottom/100% 1px no-repeat;
}

/* ---- layout ---- */
.container{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(60px,9vw,132px)}
.section--tight{padding-block:clamp(44px,6vw,84px)}
.measure{max-width:var(--measure)}
.grid{display:grid;gap:clamp(22px,3vw,44px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

/* ============================================================
   DISCLAIMER STRIP  (ADR-005 G-1 — wording is preserved verbatim
   in markup; this only styles it)
   ============================================================ */
.disclaimer-strip{
  background:var(--ink-2);
  border-bottom:1px solid var(--line-brass);
  font-size:12px;color:var(--muted);text-align:center;
  padding:10px var(--gut);letter-spacing:.05em;
  font-family:var(--text);
}
.disclaimer-strip strong{
  color:var(--brass);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:11px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:40;
  background:rgba(11,20,16,.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:72px;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.brand{
  font-family:var(--display);font-size:1.6rem;font-weight:440;
  color:var(--bone);letter-spacing:.005em;line-height:1;
}
.brand b{color:var(--brass);font-weight:440}
.nav__links{display:flex;gap:34px;list-style:none;margin:0;padding:0;
  font-family:var(--text);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:500}
.nav__links a{color:var(--bone-dim);position:relative;padding-block:4px}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;
  width:0;height:1px;background:var(--brass);transition:width .25s ease}
.nav__links a:hover{color:var(--brass-2);text-decoration:none}
.nav__links a:hover::after{width:100%}
@media(max-width:760px){.nav__links{display:none}}

/* ============================================================
   HERO — asymmetric editorial plate
   ============================================================ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero__in{
  position:relative;max-width:var(--max);margin:0 auto;
  padding:clamp(64px,12vw,150px) var(--gut) clamp(52px,9vw,108px);
}
/* index number / kicker that sits at the head of the plate */
.hero__no{
  font-family:var(--display);font-size:var(--step--1);
  color:var(--brass);letter-spacing:.32em;text-transform:uppercase;
  display:block;margin-bottom:26px;
}
.hero .display{max-width:15ch;margin-bottom:0}
.hero .lead{max-width:58ch;margin-top:30px}

/* full-bleed image hero (duotone-treated, asymmetric copy) */
.hero--cover{position:relative;isolation:isolate}
.hero--cover .hero__in{
  min-height:clamp(440px,62vh,640px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero--cover::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--hero-img,url('/assets/img/hero.jpg')) center 38%/cover no-repeat;
  /* duotone: desaturate the warm stock so it reads as one publication */
  filter:grayscale(.55) brightness(.62) contrast(1.04) sepia(.12);
}
/* pine/brass colour wash + legibility scrim */
.hero--cover::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(72deg,rgba(11,20,16,.94) 0%,rgba(11,20,16,.72) 42%,rgba(11,20,16,.30) 100%),
    linear-gradient(180deg,rgba(11,20,16,0) 30%,rgba(11,20,16,.86) 100%),
    radial-gradient(120% 80% at 92% 6%,rgba(181,143,74,.20),transparent 55%);
  mix-blend-mode:normal;
}

/* ---- buttons (links only — no purchase/booking actions, G-8) ---- */
.btn-row{display:flex;gap:14px 28px;flex-wrap:wrap;margin-top:40px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--text);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:15px 30px;border-radius:1px;
  border:1px solid var(--line-brass);color:var(--brass-2);
  background:transparent;transition:.25s ease}
.btn::after{content:"\2192";font-size:1.1em;transition:transform .25s ease}
.btn:hover{background:var(--brass);border-color:var(--brass);
  color:var(--ink);text-decoration:none}
.btn:hover::after{transform:translateX(3px)}
.btn--ghost{border-color:transparent;padding-inline:0;color:var(--bone-dim)}
.btn--ghost:hover{background:transparent;color:var(--brass-2)}

/* ============================================================
   CONTENTS LEDGER — the signature element.
   A numbered "table of contents" list with leader dots, like the
   index page of a printed members' book. Replaces 3-card sameness.
   ============================================================ */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ledger__row{border-bottom:1px solid var(--line)}
.ledger__row a{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:baseline;gap:0 clamp(16px,3vw,40px);
  padding:clamp(22px,3vw,34px) 0;color:var(--bone);
  transition:padding-left .3s ease;
}
.ledger__row a:hover{padding-left:14px;text-decoration:none;color:var(--bone)}
.ledger__no{
  font-family:var(--display);font-size:var(--step-1);color:var(--brass);
  font-weight:430;font-variant-numeric:lining-nums;min-width:2.4ch;
}
.ledger__body{min-width:0}
.ledger__title{
  font-family:var(--display);font-size:var(--step-2);color:var(--bone);
  font-weight:440;line-height:1.1;display:block;letter-spacing:-.01em;
}
.ledger__row a:hover .ledger__title{color:var(--brass-2)}
.ledger__desc{
  display:block;margin-top:8px;color:var(--bone-dim);
  font-size:var(--step--1);line-height:1.6;max-width:62ch;
}
.ledger__meta{
  font-family:var(--text);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
  align-self:center;padding-left:8px;
}
.ledger__cue{
  font-family:var(--display);color:var(--brass);font-size:var(--step-1);
  opacity:0;transform:translateX(-6px);transition:.25s ease;align-self:center;
}
.ledger__row a:hover .ledger__cue{opacity:1;transform:none}
@media(max-width:680px){
  .ledger__row a{grid-template-columns:auto 1fr;gap:0 18px}
  .ledger__meta,.ledger__cue{display:none}
}

/* ============================================================
   CARDS (used sparingly — coverage summary, callouts)
   ============================================================ */
.card{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:2px;padding:clamp(26px,3vw,38px);
  position:relative;transition:.28s ease;
}
.card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--brass),transparent 60%);
  opacity:.5;transition:opacity .28s ease;
}
.card:hover{border-color:var(--line-strong);background:var(--ink-3);
  transform:translateY(-3px)}
.card:hover::before{opacity:1}
.card .eyebrow{margin-bottom:14px}
.card h3{color:var(--bone);margin-bottom:.35em}
.card h3 a{color:inherit}
.card h3 a:hover{color:var(--brass-2);text-decoration:none}
.card p{font-size:var(--step--1);margin-bottom:0;color:var(--bone-dim)}

/* a quiet "note" callout (disclosures / read-this-first) */
.note{
  border:1px solid var(--line-brass);background:var(--ink-2);
  border-radius:2px;padding:clamp(24px,3vw,34px);position:relative;
}
.note::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--brass),transparent);
}
.note .eyebrow{margin-bottom:12px}
.note p{margin-bottom:0;font-size:var(--step--1)}

/* ============================================================
   LONG-FORM PROSE — refined editorial article body
   ============================================================ */
.prose{max-width:var(--measure)}
.prose h2{
  margin-top:1.9em;margin-bottom:.5em;
  font-size:var(--step-2);font-weight:430;
  position:relative;padding-top:.6em;
}
.prose h2::before{
  content:"";position:absolute;left:0;top:0;width:42px;height:1px;
  background:var(--brass);opacity:.7;
}
.prose > h2:first-child{margin-top:0}
.prose p{font-size:var(--step-0);line-height:1.78;color:var(--bone-dim)}
.prose p:first-of-type{color:var(--bone)}
/* drop cap on the opening paragraph of a long article */
.prose--lede > p:first-of-type::first-letter{
  font-family:var(--display);float:left;font-weight:380;
  font-size:3.4em;line-height:.72;padding:.06em .12em 0 0;
  color:var(--brass);
}
/* fine print / source notes */
.fineprint{
  color:var(--muted);font-size:var(--step--1);line-height:1.62;
  padding-left:18px;border-left:1px solid var(--line);
}

/* small meta dateline / index marker beside a section */
.dateline{
  font-family:var(--text);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}

/* a two-column editorial split: heading rail + body */
.split{display:grid;gap:clamp(28px,5vw,72px);
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}
.split__rail{position:sticky;top:96px}
@media(max-width:860px){
  .split{grid-template-columns:1fr}
  .split__rail{position:static}
}

/* ============================================================
   LIGHT EDITORIAL BAND — the "tipped-in plate" on ivory paper.
   Gives the dark book a moment of contrast, like a printed insert.
   ============================================================ */
.plate{
  background:var(--paper);color:var(--paper-ink);
  border-block:1px solid var(--brass-deep);
}
.plate h1,.plate h2,.plate h3{color:var(--paper-ink)}
.plate p{color:var(--paper-ink-2)}
.plate .eyebrow{color:var(--brass-deep)}
.plate .eyebrow::before{background:var(--brass-deep)}
.plate a{color:var(--brass-deep)}
.plate a:hover{color:var(--paper-ink)}
.plate .lead{color:var(--paper-ink)}
.plate .rule-brass{background:linear-gradient(90deg,var(--brass-deep) 0 36%,transparent)}
.plate strong{color:var(--paper-ink)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink-2);border-top:1px solid var(--line-brass);
  padding-block:clamp(52px,7vw,88px);font-size:14px;color:var(--muted);
  font-family:var(--text)}
.footer a{color:var(--bone-dim)}
.footer a:hover{color:var(--brass-2)}
.footer__grid{display:grid;gap:36px;
  grid-template-columns:1.5fr repeat(2,1fr)}
@media(max-width:760px){.footer__grid{grid-template-columns:1fr 1fr}}
.footer .brand{font-size:1.8rem}
.footer .eyebrow{margin-bottom:14px;font-size:11px}
.footer__col p{line-height:2}
.footer__note{
  margin-top:46px;padding-top:26px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.65;color:var(--muted);max-width:92ch;
}
.footer__note strong{color:var(--bone-dim);font-weight:600}

/* ============================================================
   MOTION — progressive, fully reduced-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:.2s}
  .reveal.d3{animation-delay:.32s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---- focus (accessible, high-contrast) ---- */
:focus-visible{outline:2px solid var(--brass-2);outline-offset:3px;border-radius:1px}
.plate :focus-visible{outline-color:var(--brass-deep)}