/* ============================================================
   jahnbolla.com — shared design system
   Single source of truth for tokens + shared components.
   Linked FIRST on every page; page-specific <style> blocks may
   still override during the progressive migration.
   ============================================================ */

/* ── RESET ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* ── DESIGN TOKENS ── */
:root{
  /* greens */
  --green-deep:#26361f;   /* dark editorial bands, footer */
  --green-dark:#3a5432;   /* headings */
  --green:#4a6741;        /* accents / links */
  --green-light:#e8f0e4;  /* tint blocks */
  --green-wash:#f0f4ec;   /* faint alt-section wash */
  /* golds */
  --gold:#b8975a;         /* decorative / on-dark / hairlines */
  --gold-deep:#8f6f3c;    /* accessible gold TEXT on light */
  --gold-light:#d4af70;   /* hover / on-dark */
  /* neutrals */
  --w:#fdfcf9;
  --off:#f7f4ee;
  --sand:#efe8da;         /* warm alt background */
  /* text */
  --text:#1e1e18;
  --text-mid:#5a5748;
  --text-soft:#9a9580;
  /* lines */
  --border:rgba(74,103,65,0.15);
  --border-gold:rgba(184,151,90,0.30);
  /* feedback */
  --red:#c0392b;
  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-ui:.3s;
  --dur-reveal:.7s;
  /* radius */
  --r-sm:6px;
  --r-card:10px;
  --r-lg:12px;
  /* elevation — resting card lift so cards float above the bands (green-tinted) */
  --shadow-card:0 10px 30px -8px rgba(38,54,31,.22);
  --shadow-lift:0 22px 48px -12px rgba(38,54,31,.30);
  /* section band tones (deliberate tonal rhythm — clearly distinct from paper) */
  --band-green:#cadeba;   /* soft sage band — deeper than --green-light so cards stay visible on hover */
  --band-sand:#ecdcbb;    /* warm sand band */
  /* display type (loaded per page that uses it) */
  --font-display:'Fraunces','Cormorant',serif;
}

/* ── LANGUAGE VISIBILITY ── */
[data-lang="es"]{display:none}
body.es [data-lang="en"]{display:none}
body.es [data-lang="es"]{display:block}
body.es span[data-lang="es"]{display:inline}
body.es span[data-lang="en"]{display:none}
span[data-lang="es"]{display:none}

/* ============================================================
   SHARED COMPONENTS
   Available to every page. Existing inline rules still win until
   a section is migrated to these classes (then delete the inline).
   ============================================================ */

/* ── BUTTONS ── */
.btn{
  display:inline-block;
  padding:0.72rem 2rem 0.78rem;
  font-family:'Jost',sans-serif;
  font-size:18px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  text-decoration:none;border:none;cursor:pointer;line-height:1.2;
  border-radius:var(--r-sm);
  transition:all var(--dur-ui) var(--ease);
}
.btn-primary{background:var(--green-dark);color:var(--w)}
.btn-primary:hover{background:var(--green);transform:translateY(-2px);box-shadow:0 8px 22px rgba(58,84,50,.25)}
.btn-gold{background:var(--gold);color:var(--w)}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 8px 22px rgba(184,151,90,.3)}
.btn-outline{background:var(--w);color:var(--green-dark);border:1.5px solid var(--green-dark)}
.btn-outline:hover{background:var(--green-dark);color:var(--w)}

/* ── LABELS / EYEBROWS / HEADINGS ── */
.sec-label{
  font-family:'Jost',sans-serif;
  font-size:13px;font-weight:400;
  letter-spacing:0.34em;text-transform:uppercase;
  color:var(--green);margin-bottom:1rem;
}
.sec-h{
  font-family:'Cormorant',serif;
  font-size:clamp(2.5rem,5.5vw,4.2rem);font-weight:400;
  color:var(--green-dark);line-height:1.12;margin-bottom:1.3rem;
}
.sec-h em{font-style:italic;font-weight:300}
/* card / component title — one size everywhere */
.title-card{font-family:'Cormorant',serif;font-size:26px;font-weight:500;color:var(--green-dark);line-height:1.2}
/* statement — the ONLY Fraunces role: italic display moments (crest bands) */
.statement{font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(2.8rem,6.5vw,5rem);line-height:1.08;color:var(--green-dark)}
.statement em{font-style:italic}
.sec-sub{
  font-family:'Cormorant',serif;
  font-size:clamp(1.4rem,2.2vw,1.75rem);font-weight:400;
  color:var(--green-dark);line-height:1.3;margin-bottom:1rem;
}
.sec-sub em{font-style:italic}
.sec-body{
  font-family:'Cormorant Garamond',serif;
  font-size:18px;color:var(--text-mid);line-height:1.85;
  max-width:620px;margin-left:auto;margin-right:auto;
  text-align:center;
}

/* ── PILLS & DIVIDERS ── */
.pill{
  display:inline-block;
  font-family:'Jost',sans-serif;
  font-size:12px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  border:1.5px solid var(--border-gold);color:var(--gold-deep);
  padding:0.3rem 0.85rem;border-radius:var(--r-sm);
}
.hr-gold{
  width:120px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  margin:1.4rem 0;
}

/* ── UNIFIED CARD ── */
.card{
  background:var(--w);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:1.9rem 1.8rem;
  box-shadow:var(--shadow-card);
  transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease),background var(--dur-ui) var(--ease);
}
.card:hover{background:var(--green-light);transform:translateY(-3px);box-shadow:var(--shadow-lift)}

/* ── DARK EDITORIAL BAND ── */
.dark-band{
  background:var(--green-deep);
  position:relative;overflow:hidden;
}
.dark-band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(74,103,65,.45),transparent 70%);
  pointer-events:none;
}

/* ── DISPLAY TYPE (oversized editorial statements) ── */
.display{font-family:var(--font-display);font-weight:400;letter-spacing:.01em}

/* Crisp, proper bold everywhere — Cormorant Garamond 700 is now loaded, so
   <strong>/<b> use the real weight instead of a blurry synthesised faux-bold. */
strong,b{font-weight:700}
body{font-synthesis-weight:none}

/* ── ANDALUSIAN LATTICE (embossed relief texture) ──
   Drop a <div class="andaluz-layer">…inline svg…</div> as the first child
   of a position:relative section; keep real content at z-index >= 1. */
.andaluz-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.andaluz-layer svg{position:absolute;width:100%;height:100%}
/* one-class lattice background — HALF: fades in from the right, behind content.
   The page now sits on one warm --off "paper" ground, so the fade blends to
   --off everywhere; no per-tone overrides needed. */
/* Hand-drawn Andalusian TILE texture (azulejo), muted 4-colour, seamless repeat.
   Rendered on a ::before so we get a true low opacity + a smooth mask fade that
   works on both light paper and the dark-green band. --tile-op / --tile-size
   are tunable per section. */
.andaluz,.andaluz-left{position:relative;isolation:isolate}
.andaluz::before,.andaluz-left::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("andaluz-tiles.svg") repeat;
  background-size:var(--tile-size,320px);
  opacity:var(--tile-op,.12);
}
/* fades in from the RIGHT, leaving the left (text) side clean */
.andaluz::before{-webkit-mask-image:linear-gradient(to left,#000 4%,transparent 60%);mask-image:linear-gradient(to left,#000 4%,transparent 60%)}
/* fades in from the LEFT instead */
.andaluz-left::before{-webkit-mask-image:linear-gradient(to right,#000 4%,transparent 60%);mask-image:linear-gradient(to right,#000 4%,transparent 60%)}
/* full-bleed tile FILL for a dark crest band's .andaluz-layer (RSVP band, story end-card).
   Tone-on-tone, no side fade — for centred compositions. */
.andaluz-layer.tiled{background:url("andaluz-tiles.svg") repeat;background-size:300px;opacity:.14}

/* ── GREEN DUOTONE (tint photos toward the palette) ── */
.duotone{position:relative;overflow:hidden}
.duotone > img{filter:grayscale(1) contrast(1.04) brightness(1.02);display:block;width:100%;height:100%;object-fit:cover}
.duotone::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--green-deep);mix-blend-mode:color;opacity:.62}
.duotone::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(160deg,rgba(74,103,65,.25),rgba(38,54,31,.55))}

/* ── SECTION BANDS (deliberate tonal rhythm over the --off paper ground) ── */
.bg-green{background-color:var(--band-green)}
.bg-sand{background-color:var(--band-sand)}

/* ── SCROLL REVEAL ──
   Applied to content ATOMS (headings, cards, notes) — never to whole
   section bands, so backgrounds stay solid and the page reads as one
   continuous surface. --rd is a per-element stagger delay set in JS so
   siblings in a row/grid cascade. */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-reveal) var(--ease) var(--rd,0s),
             transform var(--dur-reveal) var(--ease) var(--rd,0s);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none;will-change:auto}

/* ── REDUCED MOTION (accessibility) ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}