:root {
  --navy:        #102D4D;
  --navy-deep:   #0A1F38;
  --navy-soft:   #1B3D63;

  --ink:         #1A2735;
  --ink-black:   #191C20;
  --ink-mid:     #3D4C5E;
  --ink-soft:    #5B6B7D;

  --accent:      #C15F3C;
  --accent-deep: #A04A2C;
  --accent-tint: #F6EBE3;

  --gold:        #C9A35C;
  --gold-hi:     #E9D7A0;
  --gold-deep:   #8A6B30;
  --gold-grad:   linear-gradient(128deg,#EBDCA8 0%,#D9BC78 38%,#C39B4F 72%,#B58E45 100%);

  --cream:       #F5F4EF;
  --cream-hi:    #FCFCFA;
  --cream-line:  #E7E5DD;
  --line:        #DFE6EE;
  --off:         #F6F8FB;
  --white:       #FFFFFF;
  --wa:          #168F44;

  --bg:          var(--cream);
  --bg-alt:      var(--cream-hi);
  --surface:     var(--off);
  --accent-2:    var(--accent-tint);
  --on-accent:   var(--white);

  --font-display: var(--serif, 'Instrument Serif', Georgia, serif);
  --font-body:    var(--sans,  'Instrument Sans', system-ui, sans-serif);
  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Instrument Sans', system-ui, sans-serif;

  --fs-hero:  clamp(3.25rem, 9vw, 8rem);
  --fs-h2:    clamp(2rem, 5vw, 4rem);
  --fs-h3:    1.5rem;
  --fs-stat:  clamp(2.5rem, 6vw, 5rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.8125rem;

  --s-1:8px;  --s-2:16px; --s-3:24px; --s-4:32px;
  --s-6:48px; --s-8:64px; --s-12:96px; --s-16:128px;
  --section-pad: clamp(52px, 7vw, 88px); /* tightened 2026-07-23 — 128px bands read as dead space */
  --gutter:      clamp(20px, 5vw, 80px);

  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-card: 20px;
  --radius-pill: 200px;

  --shadow-sm:   0 1px 2px rgba(16,45,77,.06), 0 2px 8px rgba(16,45,77,.06);
  --shadow-md:   0 4px 14px rgba(16,45,77,.10), 0 14px 38px rgba(16,45,77,.12);
  --shadow-lift: var(--shadow-md);
  --shadow-lg:   0 10px 30px rgba(7,20,38,.28), 0 30px 70px rgba(7,20,38,.30);

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entrance easing — scroll reveals */
}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-size:1rem; font-weight:600;
  line-height:1; text-decoration:none; cursor:pointer;
  border:0; border-radius:var(--radius-pill); padding:16px 32px;
  transition:transform .2s var(--ease), background .2s var(--ease),
             color .2s var(--ease);
}
.btn-primary { background:var(--ink); color:var(--on-accent); }
.btn-primary:hover { background:var(--accent); transform:translateY(-2px); }
.btn-accent  { background:var(--accent); color:var(--on-accent); }
.btn-accent:hover { background:var(--accent-deep); transform:translateY(-2px); }
.btn-ghost   { background:transparent; color:currentColor;
               box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.btn:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

.cat-card {
  position:relative; display:flex; flex-direction:column; gap:var(--s-2);
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-card);
  padding:var(--s-4); min-height:340px; text-decoration:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cat-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.cat-card h3 { margin-top:auto; font-size:1.375rem; font-weight:400;
  font-family:var(--font-display); letter-spacing:-.01em; }
.cat-card p  { color:var(--ink-soft); }
.cat-card__icon { width:56px; height:56px; }
.cat-card--featured { background:var(--accent-tint); border-color:transparent; }

.cat-link { font-weight:600; color:var(--accent); }
.cat-link .arrow { display:inline-block; opacity:0; transform:translateX(-6px);
  transition:.25s var(--ease); }
.cat-card:hover .cat-link .arrow { opacity:1; transform:translateX(0); }

.badge { position:absolute; top:var(--s-3); right:var(--s-3);
  background:var(--accent); color:var(--white);
  font-size:.6875rem; font-weight:700; letter-spacing:.08em;
  padding:4px 10px; border-radius:var(--radius-pill); }

.flip { perspective:1200px; cursor:pointer; }
.flip__inner {
  position:relative; height:100%; min-height:220px;
  transform-style:preserve-3d; transition:transform .6s var(--ease);
}
.flip:hover .flip__inner,
.flip.is-flipped .flip__inner { transform:rotateY(180deg); }
.flip__front, .flip__back {
  position:absolute; inset:0; backface-visibility:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:var(--s-2);
}
.flip__back { transform:rotateY(180deg); }

@media (hover:none){
  .flip:hover .flip__inner { transform:none; }
  .flip.is-flipped .flip__inner { transform:rotateY(180deg); }
}

@media (prefers-reduced-motion:reduce){
  .btn, .cat-card, .cat-card:hover { transform:none; }
  .flip__inner { transition:none; }
}