/* ─── Self-hosted Fonts ─────────────────────────── */
    @font-face {
      font-family: 'EFCO Brookshire';
      src: url('/fonts/EFCOBrookshireRegular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/fonts/CormorantGaramondRegular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/fonts/CormorantGaramondItalic.ttf') format('truetype');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/fonts/CormorantGaramondSemiBold.ttf') format('truetype');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cinzel Decorative';
      src: url('/fonts/CinzelDecorativeRegular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cinzel Decorative';
      src: url('/fonts/CinzelDecorativeBold.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'IM Fell English SC';
      src: url('/fonts/IMFellEnglishSCRegular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    /* ─── Reset & Base ─────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* ── Style-guide aligned palette ──
         Black base (#1a1410) per owner; Midnight Slate dominant anchor;
         Old Growth Forest for botanical zones; Bronze + Gold accents;
         Parchment for type. 60% dark / 30% neutral / 10% gold. */
      --bg-deepest:   #14110f;   /* deepest shadow — near-black, slight warmth */
      --bg-dark:      #1a1410;   /* black base (owner-approved) */
      --bg-warm:      #21201f;   /* warm-neutral dark, sits between black & slate */
      --bg-charcoal:  #2e3138;   /* slate-charcoal, secondary surface */
      --bg-slate:     var(--ts-slate);   /* Midnight Slate — primary brand anchor */
      --bg-green:     var(--ts-forest);  /* Old Growth Forest — botanical/nature zones */
      --bg-wine:      #3a2433;   /* deep slate-plum for celestial/divination zones */
      --bg-mid:       #26282e;   /* slate-tinted mid surface for cards */

      --cream:        var(--ts-parchment);   /* Ancient Parchment */
      --cream-muted:  #b8a98a;   /* muted parchment for secondary text */
      --gold:         var(--ts-gold);   /* Alchemist's Gold */
      --gold-dark:    var(--ts-bronze);   /* Alchemical Bronze */
      --green-light:  #a8c9b0;   /* botanical light accent */
      --green-mid:    #b8c9b0;
      --amethyst:     var(--ts-lavender);   /* Amethyst Dust — celestial & divination cues */
      --sage:         var(--ts-sage);   /* Sage & Moss — herbal zone identity */
      --wine-border:  var(--ts-crimson);   /* Dragon's Blood — gothic accent, candle zone */

      --font-display: 'Cinzel', 'Times New Roman', serif;
      --font-ceremonial: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
      --font-heading: 'EFCO Brookshire', Georgia, serif;
      --font-body:    'Cormorant Garamond', Georgia, serif;
      --font-label:   'IM Fell English SC', Georgia, serif;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      background: var(--bg-charcoal);
      color: var(--cream);
      font-size: 16px;
      line-height: 1.7;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    ul { list-style: none; }

    /* ─── Utility ──────────────────────────────────── */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
    .section-pad { padding: 5rem 0; }

    .section-header { text-align: center; margin-bottom: 3rem; }
    .section-header h2 {
      font-family: var(--font-heading);
      font-size: clamp(22px, 4vw, 42px);
      font-weight: 400;
      letter-spacing: 0.06em;
      color: var(--cream);
      margin-bottom: 0.6rem;
    }
    .section-header p {
      font-family: var(--font-body);
      font-size: 15px;
      font-style: italic;
      color: var(--gold-dark);
      letter-spacing: 0.1em;
    }
    .divider {
      width: 80px;
      height: 1px;
      background: var(--gold);
      margin: 1rem auto;
    }
    .ornament {
      color: var(--gold-dark);
      font-size: 14px;
      letter-spacing: 0.5em;
      text-align: center;
      margin: 1rem 0;
    }

    /* ─── Buttons ──────────────────────────────────── */
    .btn-gold {
      display: inline-block;
      background: var(--gold);
      color: var(--bg-deepest);
      border: none;
      padding: 0.7rem 2rem;
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.25s, color 0.25s;
    }
    .btn-gold:hover { background: var(--cream); color: var(--bg-deepest); }

    .btn-ghost {
      display: inline-block;
      background: transparent;
      color: var(--cream);
      border: 1px solid var(--gold-dark);
      padding: 0.7rem 2rem;
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      cursor: pointer;
      transition: border-color 0.25s, color 0.25s;
    }
    .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

    .btn-green {
      display: inline-block;
      background: var(--green-light);
      color: var(--bg-green);
      border: none;
      padding: 0.7rem 2rem;
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.25s;
    }
    .btn-green:hover { background: var(--cream); }

    /* ─── Announcement Bar ─────────────────────────── */
    .announcement {
      background: var(--gold);
      color: var(--bg-deepest);
      text-align: center;
      padding: 0.55rem 1rem;
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    /* ─── Navigation ───────────────────────────────── */
    .nav {
      background: var(--bg-deepest);
      border-bottom: 1px solid var(--gold-dark);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2rem;
      max-width: 1400px;
      margin: 0 auto;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      padding: 0.7rem 0;
    }
    .nav-logo img {
      height: 48px;
      width: auto;
      display: block;
    }

    .nav-links {
      display: flex;
      gap: 2rem;
      align-items: center;
    }
    .nav-links a {
      font-family: var(--font-display);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--cream);
      opacity: 0.8;
      transition: color 0.2s, opacity 0.2s;
      padding: 1.2rem 0;
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0.8rem;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--gold);
      transition: width 0.25s;
    }
    .nav-links a:hover { color: var(--gold); opacity: 1; }
    .nav-links a:hover::after { width: 100%; }

    /* Mobile nav toggle */
    .nav-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 0.5rem;
    }
    .nav-toggle span {
      display: block;
      width: 24px;
      height: 1px;
      background: var(--cream);
    }

    /* ─── Hero ─────────────────────────────────────── */
    .hero {
      background: var(--bg-warm);
      min-height: 92vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6rem 2rem 4rem;
      position: relative;
      overflow: hidden;
      border-bottom: 2px solid var(--gold-dark);
    }
    .hero-grid-bg {
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(0deg, rgba(237,230,218,0.03) 0px, rgba(237,230,218,0.03) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(90deg, rgba(237,230,218,0.03) 0px, rgba(237,230,218,0.03) 1px, transparent 1px, transparent 60px);
      pointer-events: none;
    }
    .hero-corner {
      position: absolute;
      width: 120px;
      height: 120px;
      border-color: var(--gold-dark);
      border-style: solid;
      opacity: 0.4;
    }
    .hero-corner-tl { top: 2rem; left: 2rem; border-width: 1px 0 0 1px; }
    .hero-corner-tr { top: 2rem; right: 2rem; border-width: 1px 1px 0 0; }
    .hero-corner-bl { bottom: 2rem; left: 2rem; border-width: 0 0 1px 1px; }
    .hero-corner-br { bottom: 2rem; right: 2rem; border-width: 0 1px 1px 0; }

    .hero-content { position: relative; z-index: 1; max-width: 760px; animation: heroFadeIn 1s 0.2s both; }
    @keyframes heroFadeIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

    .hero-eyebrow {
      font-family: var(--font-display);
      font-size: 10px;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.5rem;
    }
    .hero-title {
      font-family: var(--font-heading);
      font-size: clamp(32px, 7vw, 82px);
      font-weight: 400;
      line-height: 1.05;
      color: var(--cream);
      margin-bottom: 1rem;
      letter-spacing: 0.03em;
    }
    .hero-title em { color: var(--gold); font-style: normal; }
    .hero-sub {
      font-size: clamp(16px, 2.5vw, 20px);
      color: var(--cream-muted);
      max-width: 540px;
      margin: 0 auto 2.5rem;
      font-style: italic;
      line-height: 1.8;
    }
    .hero-btns {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ─── Tarot Entry Cards ────────────────────────── */
    .tarot-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      max-width: 1000px;
      margin: 3.5rem auto 0;
      position: relative;
      z-index: 1;
    }
    .tarot-card {
      position: relative;
      background: linear-gradient(165deg, #1f1813 0%, #15100c 100%);
      border: 1px solid var(--gold-dark);
      padding: 1.8rem 1.2rem 1.5rem;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      aspect-ratio: 3 / 4.6;
      justify-content: space-between;
      transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), border-color 0.3s, box-shadow 0.3s;
      overflow: hidden;
    }
    .tarot-card::before {
      content: '';
      position: absolute;
      inset: 6px;
      border: 1px solid rgba(201,163,75,0.25);
      pointer-events: none;
    }
    .tarot-card:hover {
      transform: translateY(-8px);
      border-color: var(--gold);
      box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,163,75,0.3);
    }
    .tarot-card:hover .tarot-symbol { color: var(--gold); transform: scale(1.08); }
    .tarot-numeral {
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.3em;
      color: var(--gold-dark);
      margin-bottom: 0.3rem;
    }
    .tarot-symbol {
      font-size: 40px;
      line-height: 1;
      color: var(--cream);
      transition: color 0.3s, transform 0.3s;
      margin: 0.8rem 0;
    }
    .tarot-name {
      font-family: var(--font-heading);
      font-size: clamp(17px, 2vw, 21px);
      font-weight: 400;
      color: var(--cream);
      letter-spacing: 0.03em;
      line-height: 1.2;
      margin-bottom: 0.4rem;
    }
    .tarot-sub {
      font-family: var(--font-body);
      font-size: 13px;
      font-style: italic;
      color: var(--cream-muted);
      line-height: 1.5;
    }
    .tarot-flourish {
      font-size: 10px;
      letter-spacing: 0.3em;
      color: var(--gold-dark);
      margin-top: 0.8rem;
    }
    /* ─── Philosophy Strip ─────────────────────────── */
    .strip {
      background: var(--bg-green);
      padding: 2rem;
      text-align: center;
      border-top: 1px solid rgba(168,201,176,0.2);
      border-bottom: 1px solid rgba(168,201,176,0.2);
    }
    .strip p {
      font-style: italic;
      font-size: clamp(15px, 2vw, 18px);
      color: var(--green-light);
      letter-spacing: 0.05em;
      max-width: 700px;
      margin: 0 auto;
    }
    .strip strong {
      color: var(--gold);
      font-style: normal;
      font-weight: 600;
    }

    /* ─── Mystery Boxes ────────────────────────────── */
    .boxes-section { background: var(--bg-charcoal); }
    .boxes-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1rem;
    }
    .box-card {
      background: var(--bg-warm);
      border: 1px solid var(--gold-dark);
      padding: 2rem 1rem 1.5rem;
      text-align: center;
      transition: border-color 0.25s, transform 0.25s;
      cursor: pointer;
    }
    .box-card:hover {
      border-color: var(--gold);
      transform: translateY(-4px);
    }
    .box-card.featured { border-color: var(--gold); }
    .box-badge {
      font-family: var(--font-display);
      font-size: 9px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--bg-deepest);
      background: var(--gold);
      padding: 0.2rem 0.7rem;
      display: inline-block;
      margin-bottom: 1rem;
    }
    .box-name {
      font-family: var(--font-display);
      font-size: 12px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.6rem;
    }
    .box-price {
      font-family: var(--font-heading);
      font-size: 34px;
      font-weight: 400;
      color: var(--cream);
      margin-bottom: 0.4rem;
      line-height: 1;
    }
    .box-desc {
      font-size: 12px;
      color: var(--gold-dark);
      font-style: italic;
      line-height: 1.6;
      margin-bottom: 1.2rem;
    }
    .boxes-cta { text-align: center; margin-top: 2.5rem; }

    /* ─── Services ─────────────────────────────────── */
    .services-section { background: var(--bg-dark); }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .service-card {
      border: 1px solid var(--wine-border);
      padding: 2.5rem 2rem;
      text-align: center;
      background: #2d1618;
      transition: border-color 0.25s;
    }
    .service-card:hover { border-color: var(--gold); }
    .service-icon {
      font-size: 2rem;
      color: var(--gold);
      margin-bottom: 1.2rem;
      display: block;
      line-height: 1;
    }
    .service-name {
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 400;
      color: var(--cream);
      margin-bottom: 0.8rem;
      letter-spacing: 0.05em;
    }
    .service-desc {
      font-size: 15px;
      color: var(--cream-muted);
      line-height: 1.8;
      font-style: italic;
      margin-bottom: 1.5rem;
    }
    .service-price {
      font-family: var(--font-display);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold-dark);
      margin-bottom: 1.2rem;
      display: block;
    }

    /* ─── Lunar / What's Aligned ───────────────────── */
    .lunar-section { background: var(--bg-wine); }
    .lunar-card {
      background: var(--bg-dark);
      border: 1px solid var(--gold-dark);
      padding: 3rem;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 3rem;
      align-items: center;
      max-width: 860px;
      margin: 0 auto;
    }
    .lunar-moon {
      font-size: 80px;
      line-height: 1;
      color: var(--gold);
      text-align: center;
    }
    .lunar-text h3 {
      font-family: var(--font-heading);
      font-size: 24px;
      font-weight: 400;
      color: var(--gold);
      margin-bottom: 0.8rem;
      letter-spacing: 0.05em;
    }
    .lunar-text p {
      font-size: 15px;
      color: var(--cream-muted);
      line-height: 1.9;
      font-style: italic;
      margin-bottom: 1.5rem;
    }

    /* ─── Testimonial ──────────────────────────────── */
    .testimonial-section { background: var(--bg-slate); }
    .testimonial-inner {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }
    .testimonial-symbol {
      font-family: var(--font-heading);
      font-size: 80px;
      color: var(--gold);
      line-height: 0.8;
      display: block;
      margin-bottom: 1.5rem;
      opacity: 0.7;
    }
    blockquote {
      font-size: clamp(17px, 2.5vw, 22px);
      font-style: italic;
      line-height: 1.8;
      color: var(--cream);
      border-left: 2px solid var(--gold);
      padding: 0 0 0 2rem;
      text-align: left;
      margin-bottom: 2rem;
    }
    .testimonial-name {
      font-family: var(--font-display);
      font-size: 10px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--gold-dark);
    }
    .testimonial-stars {
      color: var(--gold);
      font-size: 14px;
      letter-spacing: 0.2em;
      margin-bottom: 0.5rem;
    }

    /* ─── Local / Physical ─────────────────────────── */
    .local-section { background: var(--bg-green); }
    .local-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    .local-text h2 {
      font-family: var(--font-heading);
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 400;
      color: var(--green-light);
      margin-bottom: 1.2rem;
      letter-spacing: 0.04em;
    }
    .local-text p {
      color: var(--green-mid);
      font-style: italic;
      line-height: 1.9;
      margin-bottom: 1rem;
      font-size: 16px;
    }
    .local-text p:last-of-type { margin-bottom: 2rem; }
    .local-info {
      background: rgba(26,48,36,0.8);
      border: 1px solid rgba(168,201,176,0.2);
      padding: 2rem;
    }
    .local-info-row {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 0.8rem 0;
      border-bottom: 1px solid rgba(168,201,176,0.1);
      font-size: 14px;
      color: var(--green-light);
      font-style: italic;
    }
    .local-info-row:last-child { border-bottom: none; }
    .local-info-icon {
      color: var(--gold);
      min-width: 20px;
      font-style: normal;
      margin-top: 2px;
    }

    /* ─── Blog / Scroll ────────────────────────────── */
    .blog-section { background: var(--bg-charcoal); }
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .blog-card {
      background: var(--bg-mid);
      border: 1px solid var(--bg-slate);
      padding: 2rem 1.5rem;
      transition: border-color 0.25s, transform 0.25s;
      cursor: pointer;
    }
    .blog-card:hover {
      border-color: var(--gold-dark);
      transform: translateY(-3px);
    }
    .blog-tag {
      font-family: var(--font-display);
      font-size: 9px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
      display: block;
      margin-bottom: 0.8rem;
    }
    .blog-title {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 400;
      color: var(--cream);
      line-height: 1.45;
      margin-bottom: 0.8rem;
    }
    .blog-excerpt {
      font-size: 13px;
      color: var(--cream-muted);
      font-style: italic;
      line-height: 1.7;
      margin-bottom: 1rem;
    }
    .blog-date {
      font-family: var(--font-display);
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold-dark);
    }
    .blog-cta { text-align: center; margin-top: 3rem; }

    /* ─── Newsletter ───────────────────────────────── */
    .newsletter-section { background: var(--bg-warm); border-top: 1px solid var(--gold-dark); border-bottom: 1px solid var(--gold-dark); }
    .newsletter-inner {
      text-align: center;
      max-width: 540px;
      margin: 0 auto;
    }
    .newsletter-inner h2 {
      font-family: var(--font-heading);
      font-size: 30px;
      font-weight: 400;
      color: var(--cream);
      margin-bottom: 0.6rem;
    }
    .newsletter-inner p {
      font-style: italic;
      color: var(--cream-muted);
      margin-bottom: 1.8rem;
    }
    .newsletter-form {
      display: flex;
      gap: 0;
      max-width: 420px;
      margin: 0 auto;
    }
    .newsletter-form input {
      flex: 1;
      padding: 0.75rem 1.2rem;
      background: var(--bg-deepest);
      border: 1px solid var(--gold-dark);
      border-right: none;
      color: var(--cream);
      font-family: var(--font-body);
      font-style: italic;
      font-size: 14px;
      outline: none;
    }
    .newsletter-form input::placeholder { color: var(--gold-dark); }
    .newsletter-form input:focus { border-color: var(--gold); }

    /* ─── Footer ───────────────────────────────────── */
    .footer {
      background: var(--bg-deepest);
      padding: 4rem 0 2rem;
      border-top: 2px solid var(--gold-dark);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 3rem;
      margin-bottom: 3rem;
    }
    .footer-brand {
      font-family: var(--font-display);
      font-size: 18px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1rem;
    }
    .footer-tagline {
      font-size: 13px;
      font-style: italic;
      color: var(--gold-dark);
      line-height: 1.8;
      margin-bottom: 1.5rem;
    }
    .footer-social {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .footer-social a {
      font-family: var(--font-display);
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold-dark);
      border: 1px solid var(--gold-dark);
      padding: 0.4rem 0.8rem;
      transition: border-color 0.2s, color 0.2s;
    }
    .footer-social a:hover { color: var(--gold); border-color: var(--gold); }
    .footer h4 {
      font-family: var(--font-display);
      font-size: 10px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 1.2rem;
      font-weight: 400;
    }
    .footer ul li { margin-bottom: 0.6rem; }
    .footer ul a {
      font-size: 14px;
      font-style: italic;
      color: var(--gold-dark);
      transition: color 0.2s;
    }
    .footer ul a:hover { color: var(--cream); }
    .footer-bottom {
      border-top: 1px solid rgba(151,119,82,0.25);
      padding-top: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .footer-copy {
      font-family: var(--font-display);
      font-size: 9px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(151,119,82,0.5);
    }

    /* ─── Layout classes (movable to CSS so media queries can override) ── */
    .philosophy-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid rgba(151,119,82,0.2);
    }
    .coffee-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      max-width: 1000px;
      margin: 0 auto;
    }
    .social-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      max-width: 800px;
      margin: 0 auto;
    }

    /* ─── Responsive ───────────────────────────────── */
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-deepest);
        padding: 1rem 2rem;
        gap: 0.4rem;
        border-bottom: 1px solid var(--gold-dark);
        z-index: 99;
      }
      .nav-toggle { display: flex; }
      .nav { position: relative; }
      .nav-links a { padding: 0.75rem 0; }

      .boxes-grid { grid-template-columns: 1fr 1fr; }
      .services-grid { grid-template-columns: 1fr; }
      .local-grid { grid-template-columns: 1fr; gap: 2rem; }
      .blog-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
      .lunar-card { grid-template-columns: 1fr; text-align: center; }
      .hero-corner { display: none; }
      .hero { min-height: 70vh; }
      .newsletter-form { flex-direction: column; }
      .newsletter-form input { border-right: 1px solid var(--gold-dark); }
      .tarot-row { grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 460px; }
      .philosophy-grid { grid-template-columns: 1fr !important; }
      .coffee-grid { grid-template-columns: 1fr !important; }
      .social-grid { grid-template-columns: 1fr !important; }
      #specialsGrid { grid-template-columns: 1fr !important; }
      #wheelGrid { grid-template-columns: repeat(4, 1fr) !important; }
    }

    @media (max-width: 600px) {
      .form-row { grid-template-columns: 1fr; }
      #specialsGrid { grid-template-columns: 1fr !important; }
      #wheelGrid { grid-template-columns: repeat(4, 1fr) !important; }
    }

    @media (max-width: 480px) {
      .container { padding: 0 1rem; }
      .section-pad { padding: 3rem 0; }
      .tarot-row { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
      .tarot-card { padding: 1.2rem 0.7rem; aspect-ratio: unset; }
      .tarot-symbol { font-size: 32px; }
      #wheelGrid { grid-template-columns: repeat(2, 1fr) !important; }
      .modal-header { padding: 1.5rem 1rem 1rem; }
      .modal-body { padding: 1.5rem 1rem; }
      .modal-footer { padding: 1rem 1rem 1.5rem; }
      .newsletter-popup { padding: 2rem 1rem; }
      .vic-cal-header { padding: 0.75rem 1rem; }
      .vic-cal-body { padding: 0 0.5rem 1rem; }
      .form-group label { font-size: 11px; }
      .interest-tag { font-size: 14px; padding: 0.55rem 1rem; }
      .form-group input, .form-group select, .form-group textarea { font-size: 16px; }
    }

    /* ─── Mystery Box Modal ─────────────────────────── */
    .modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,12,9,0.92); z-index:500; align-items:center; justify-content:center; padding:1.5rem; }
    .modal-overlay.open { display:flex; }
    .modal-box { background:var(--bg-dark); border:1px solid var(--gold-dark); max-width:640px; width:100%; max-height:90vh; overflow-y:auto; position:relative; }
    .modal-box::before { content:''; display:block; height:3px; background:linear-gradient(90deg,transparent,var(--gold-dark),var(--gold),var(--gold-dark),transparent); }
    .modal-close { position:absolute; top:1rem; right:1rem; background:none; border:1px solid rgba(151,119,82,0.3); color:var(--gold-dark); width:28px; height:28px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:border-color 0.2s, color 0.2s; line-height:1; }
    .modal-close:hover { border-color:var(--gold); color:var(--gold); }
    .modal-header { padding:2rem 2rem 1rem; text-align:center; border-bottom:1px solid rgba(151,119,82,0.2); }
    .modal-header h3 { font-family:var(--font-heading); font-size:26px; font-weight:400; color:var(--cream); margin-bottom:0.4rem; }
    .modal-header p { font-size:14px; font-style:italic; color:var(--cream-muted); line-height:1.7; }
    .modal-body { padding:2rem; }
    .modal-footer { padding:1rem 2rem 1.5rem; border-top:1px solid rgba(151,119,82,0.2); text-align:center; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
    .form-group { margin-bottom:1rem; }
    .form-group label { display:block; font-family:var(--font-display); font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:0.4rem; }
    .form-group input, .form-group select, .form-group textarea { width:100%; background:var(--bg-deepest); border:1px solid rgba(151,119,82,0.3); color:var(--cream); font-family:var(--font-body); font-style:italic; font-size:15px; padding:0.7rem 1rem; outline:none; transition:border-color 0.2s; appearance:none; -webkit-appearance:none; }
    .form-group input::placeholder, .form-group textarea::placeholder { color:var(--gold-dark); opacity:0.6; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--gold); }
    .form-group textarea { resize:vertical; min-height:90px; }
    .form-group select { cursor:pointer; }
    .form-group select option { background:var(--bg-dark); }
    .form-checkbox-group { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.6rem; }
    .interest-tag { background:var(--bg-deepest); border:1px solid rgba(151,119,82,0.3); color:var(--cream-muted); font-family:var(--font-body); font-style:italic; font-size:13px; padding:0.45rem 0.85rem; cursor:pointer; transition:border-color 0.18s, color 0.18s, background 0.18s; user-select:none; -webkit-user-select:none; }
    .interest-tag.selected { border-color:var(--gold); color:var(--gold); background:rgba(201,163,75,0.1); }
    .form-note { font-size:12px; font-style:italic; color:rgba(151,119,82,0.6); margin-top:0.3rem; line-height:1.5; }
    .form-section-label { font-family:var(--font-display); font-size:9px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); border-bottom:1px solid rgba(151,119,82,0.2); padding-bottom:0.4rem; margin:1.5rem 0 1rem; }
    .form-submit-msg { display:none; text-align:center; padding:1.5rem 0; }
    .form-submit-msg .fs-icon { font-size:32px; margin-bottom:0.5rem; }
    .form-submit-msg h4 { font-family:var(--font-heading); font-size:20px; font-weight:400; color:var(--gold); margin-bottom:0.4rem; }
    .form-submit-msg p { font-size:14px; font-style:italic; color:var(--cream-muted); }

    /* ─── Victorian Calendar ───────────────────────── */
    .vic-cal {
      background: var(--bg-dark);
      border: 1px solid var(--gold-dark);
      overflow: hidden;
      font-family: var(--font-body);
    }
    .vic-cal::before {
      content: '';
      display: block;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--gold-dark), var(--gold), var(--gold-dark), transparent);
    }
    .vic-cal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 2rem 1rem;
      background: var(--bg-warm);
      border-bottom: 1px solid var(--gold-dark);
      position: relative;
    }
    .vic-cal-header::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 1px;
      background: var(--gold);
    }
    .vic-cal-title { text-align: center; flex: 1; }
    .vic-cal-ornament {
      font-size: 9px;
      letter-spacing: 0.3em;
      color: var(--gold-dark);
      margin-bottom: 0.4rem;
    }
    .vic-month-label {
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 400;
      color: var(--cream);
      letter-spacing: 0.08em;
    }
    .vic-nav {
      background: transparent;
      border: 1px solid var(--gold-dark);
      color: var(--gold);
      width: 34px;
      height: 34px;
      cursor: pointer;
      font-size: 14px;
      transition: border-color 0.2s, background 0.2s, color 0.2s;
      font-family: var(--font-body);
    }
    .vic-nav:hover { border-color: var(--gold); background: rgba(201,163,75,0.1); color: var(--cream); }
    .vic-cal-body { padding: 1.5rem 1.5rem 0; }
    .vic-day-labels {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      margin-bottom: 0.5rem;
    }
    .vic-day-labels span {
      text-align: center;
      font-family: var(--font-display);
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold-dark);
      padding: 0.4rem 0;
    }
    .vic-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      margin-bottom: 1.5rem;
    }
    .vic-day {
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: 1px solid transparent;
      position: relative;
      transition: border-color 0.15s, background 0.15s;
      min-height: 44px;
    }
    .vic-day:hover { border-color: var(--gold-dark); background: rgba(201,163,75,0.05); }
    .vic-day.today {
      border-color: var(--gold-dark);
      background: rgba(201,163,75,0.08);
    }
    .vic-day.today .vic-day-num { color: var(--gold); }
    .vic-day.selected {
      border-color: var(--gold);
      background: rgba(201,163,75,0.15);
    }
    .vic-day.other-month { opacity: 0.25; cursor: default; }
    .vic-day.other-month:hover { border-color: transparent; background: transparent; }
    .vic-day-num {
      font-family: var(--font-heading);
      font-size: 15px;
      font-weight: 400;
      color: var(--cream);
      line-height: 1;
    }
    .vic-day-dots {
      display: flex;
      gap: 3px;
      margin-top: 3px;
      min-height: 6px;
    }
    .vic-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--gold);
    }
    .vic-events-panel {
      border-top: 1px solid rgba(151,119,82,0.3);
      padding: 1.2rem 1.5rem 1.5rem;
      background: rgba(42,31,26,0.5);
      min-height: 120px;
    }
    .vic-events-heading {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 0.8rem;
    }
    .vic-events-icon { color: var(--gold); font-size: 14px; }
    .vic-events-date {
      font-family: var(--font-display);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-dark);
    }
    .vic-events-list { list-style: none; margin: 0; padding: 0; }
    .vic-event-item {
      padding: 0.6rem 0;
      border-bottom: 1px solid rgba(151,119,82,0.15);
      display: flex;
      gap: 0.8rem;
      align-items: flex-start;
    }
    .vic-event-item:last-child { border-bottom: none; }
    .vic-event-bullet {
      color: var(--gold);
      font-size: 10px;
      margin-top: 3px;
      flex-shrink: 0;
    }
    .vic-event-name {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 400;
      color: var(--cream);
      line-height: 1.3;
    }
    .vic-event-time {
      font-family: var(--font-display);
      font-size: 9px;
      letter-spacing: 0.15em;
      color: var(--gold-dark);
      text-transform: uppercase;
      margin-top: 2px;
    }
    .vic-no-events {
      font-style: italic;
      color: var(--cream-muted);
      font-size: 14px;
      opacity: 0.6;
      padding: 0.4rem 0;
    }
    .vic-cal-footer {
      border-top: 1px solid rgba(151,119,82,0.2);
      padding: 0.8rem 1.5rem;
      text-align: right;
      background: var(--bg-warm);
    }
    .vic-gcal-link {
      font-family: var(--font-display);
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold-dark);
      text-decoration: none;
      transition: color 0.2s;
    }
    .vic-gcal-link:hover { color: var(--gold); }
    .vic-cal-error {
      background: rgba(90,42,43,0.4);
      border: 1px solid var(--wine-border);
      padding: 0.8rem 1.5rem;
      margin: 0 1.5rem 1.5rem;
      font-size: 13px;
      font-style: italic;
      color: var(--cream-muted);
    }
    .vic-loading {
      text-align: center;
      padding: 2rem;
      font-style: italic;
      color: var(--gold-dark);
      font-size: 14px;
      letter-spacing: 0.1em;
    }

    /* ─── Newsletter Popup ─────────────────────────── */
    .nl-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15,12,9,0.85);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      opacity: 0;
      pointer-events: none;
    }
    .nl-overlay.visible {
      display: flex;
      animation: nlFadeIn 0.5s forwards;
      pointer-events: all;
    }
    @keyframes nlFadeIn { to { opacity: 1; } }

    .nl-popup {
      background: var(--bg-dark);
      border: 1px solid var(--gold-dark);
      max-width: 500px;
      width: 100%;
      position: relative;
      overflow: hidden;
      transform: translateY(20px);
      animation: nlSlideIn 0.5s 1.4s forwards;
    }
    @keyframes nlSlideIn { to { transform: translateY(0); } }
    .nl-popup::before {
      content: '';
      display: block;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--gold-dark), var(--gold), var(--gold-dark), transparent);
    }
    .nl-popup-inner { padding: 2.5rem 2.5rem 2rem; }
    .nl-popup-ornament {
      text-align: center;
      font-size: 9px;
      letter-spacing: 0.5em;
      color: var(--gold-dark);
      margin-bottom: 1rem;
    }
    .nl-popup-icon {
      text-align: center;
      font-size: 40px;
      line-height: 1;
      margin-bottom: 1rem;
      color: var(--gold);
    }
    .nl-popup h3 {
      font-family: var(--font-heading);
      font-size: clamp(22px, 4vw, 28px);
      font-weight: 400;
      color: var(--cream);
      text-align: center;
      letter-spacing: 0.04em;
      line-height: 1.3;
      margin-bottom: 0.6rem;
    }
    .nl-popup p {
      text-align: center;
      font-style: italic;
      color: var(--cream-muted);
      font-size: 14px;
      line-height: 1.8;
      margin-bottom: 1.5rem;
    }
    .nl-popup-form {
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }
    .nl-popup-form input[type="email"] {
      width: 100%;
      padding: 0.8rem 1.2rem;
      background: var(--bg-deepest);
      border: 1px solid var(--gold-dark);
      color: var(--cream);
      font-family: var(--font-body);
      font-style: italic;
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s;
    }
    .nl-popup-form input[type="email"]::placeholder { color: var(--gold-dark); }
    .nl-popup-form input[type="email"]:focus { border-color: var(--gold); }
    .nl-popup-submit {
      width: 100%;
      background: var(--gold);
      color: var(--bg-deepest);
      border: none;
      padding: 0.85rem 2rem;
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.25s;
    }
    .nl-popup-submit:hover { background: var(--cream); }
    .nl-popup-dismiss {
      display: block;
      text-align: center;
      margin-top: 0.8rem;
      font-family: var(--font-display);
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(151,119,82,0.5);
      cursor: pointer;
      transition: color 0.2s;
      border: none;
      background: none;
      width: 100%;
    }
    .nl-popup-dismiss:hover { color: var(--gold-dark); }
    .nl-popup-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: none;
      border: 1px solid rgba(151,119,82,0.3);
      color: var(--gold-dark);
      width: 28px;
      height: 28px;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.2s, color 0.2s;
      line-height: 1;
    }
    .nl-popup-close:hover { border-color: var(--gold); color: var(--gold); }
    .nl-popup-footer {
      border-top: 1px solid rgba(151,119,82,0.2);
      padding: 0.8rem 2.5rem;
      text-align: center;
      background: rgba(42,31,26,0.5);
    }
    .nl-popup-footer p {
      font-family: var(--font-display);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(151,119,82,0.4);
      margin: 0;
    }
    .nl-success {
      text-align: center;
      padding: 1rem 0;
    }
    .nl-success-icon { font-size: 32px; margin-bottom: 0.5rem; }
    .nl-success h4 {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      color: var(--gold);
      margin-bottom: 0.4rem;
    }
    .nl-success p { font-size: 13px; color: var(--cream-muted); margin: 0; }

/* ═══════════════════════════════════════════════════════
   READINGS & SERVICES SUB-PAGES  (added for /services/*)
   Uses existing variables & type system above.
═══════════════════════════════════════════════════════ */
.breadcrumb {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  text-align: center;
  padding: 1.6rem 1rem 0;
}
.breadcrumb a { color: var(--gold-dark); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: var(--cream-muted); opacity: 0.55; margin: 0 0.5rem; }

/* Sub-page hero */
.page-hero {
  position: relative;
  background: var(--bg-dark);
  text-align: center;
  padding: 3.2rem 1.5rem 3.6rem;
  border-bottom: 1px solid rgba(151,119,82,0.3);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,163,75,0.10), transparent 60%);
  pointer-events: none;
}
.page-hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.card-id { margin-bottom: 1.4rem; }
.card-id .numeral {
  font-family: var(--font-ceremonial);
  font-size: 13px; letter-spacing: 0.4em; color: var(--gold-dark);
  text-transform: uppercase;
}
.card-id .glyph {
  display: block; font-size: 2.6rem; color: var(--gold);
  line-height: 1; margin: 0.5rem 0 0.6rem;
}
.card-id .card-name {
  font-family: var(--font-label);
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cream-muted);
}
.page-hero h1 {
  font-family: var(--font-ceremonial);
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.12; color: var(--cream); letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}
.page-hero .ornament {
  color: var(--gold); font-size: 1rem; margin: 1rem 0 1.2rem; letter-spacing: 0.3em;
}
.page-hero .lede {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-style: italic; color: var(--cream-muted); line-height: 1.6;
  max-width: 600px; margin: 0 auto;
}

/* Readable prose column */
.prose { max-width: 720px; margin: 0 auto; }
.prose p { font-size: 1.12rem; color: var(--cream); margin-bottom: 1.3rem; }
.prose p.first { font-size: 1.22rem; color: var(--cream); }
.prose h2 {
  font-family: var(--font-ceremonial); font-weight: 400;
  font-size: 1.7rem; color: var(--gold); letter-spacing: 0.02em;
  margin: 2.6rem 0 1rem; text-align: center;
}
.prose h2 + .rule {
  width: 60px; height: 1px; margin: 0 auto 1.6rem;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.prose .pull {
  font-family: var(--font-body); font-style: italic;
  font-size: 1.35rem; color: var(--cream); text-align: center;
  border-left: none; padding: 1.4rem 1.5rem; margin: 2rem auto;
  max-width: 600px; position: relative;
}
.prose .pull::before, .prose .pull::after { content: "✦"; color: var(--gold-dark); display: block; font-size: 0.9rem; }

/* What to expect — detail cards */
.expect-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem; max-width: 940px; margin: 2rem auto 0;
}
.detail-card {
  background: var(--bg-mid); border: 1px solid rgba(151,119,82,0.3);
  padding: 1.8rem 1.5rem; text-align: center;
}
.detail-card .dc-icon { color: var(--gold); font-size: 1.5rem; display: block; margin-bottom: 0.7rem; }
.detail-card h3 {
  font-family: var(--font-label); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream); margin-bottom: 0.6rem;
}
.detail-card p { font-size: 1rem; color: var(--cream-muted); line-height: 1.6; }

/* Highlight note (Tarot Tuesday / magical-use / by appointment) */
.note-band {
  max-width: 720px; margin: 2.4rem auto 0;
  background: rgba(201,163,75,0.06);
  border: 1px solid var(--gold-dark);
  border-left: 3px solid var(--gold);
  padding: 1.4rem 1.6rem;
}
.note-band .nb-label {
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.5rem;
}
.note-band p { font-size: 1.05rem; color: var(--cream); margin: 0; }

/* Booking CTA band */
.booking-cta {
  background: var(--bg-green); text-align: center;
  padding: 3.4rem 1.5rem; border-top: 1px solid rgba(201,163,75,0.25);
  border-bottom: 1px solid rgba(201,163,75,0.25);
}
.booking-cta h2 {
  font-family: var(--font-ceremonial); font-weight: 400; color: var(--cream);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 0.8rem;
}
.booking-cta p { color: var(--green-light); max-width: 540px; margin: 0 auto 1.8rem; font-size: 1.1rem; }

/* Cross-links to other services */
.xlink-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem; max-width: 1040px; margin: 2rem auto 0;
}
.xlink-card {
  display: block; text-decoration: none; background: var(--bg-mid);
  border: 1px solid rgba(151,119,82,0.3); padding: 1.6rem 1.4rem; text-align: center;
  transition: border-color .25s, transform .25s, background .25s;
}
.xlink-card:hover { border-color: var(--gold); transform: translateY(-3px); background: var(--bg-warm); }
.xlink-card .xl-num { font-family: var(--font-ceremonial); color: var(--gold-dark); font-size: 11px; letter-spacing: 0.3em; }
.xlink-card .xl-glyph { display: block; color: var(--gold); font-size: 1.7rem; margin: 0.4rem 0; }
.xlink-card .xl-name { font-family: var(--font-label); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); }
.xlink-card .xl-desc { font-size: 0.95rem; color: var(--cream-muted); margin-top: 0.5rem; line-height: 1.5; }

/* Hub: service list cards (larger) */
.hub-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem; max-width: 1080px; margin: 2.4rem auto 0;
}
.hub-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--bg-mid); border: 1px solid rgba(151,119,82,0.3);
  padding: 2rem 1.8rem; transition: border-color .25s, transform .25s, background .25s;
}
.hub-card:hover { border-color: var(--gold); transform: translateY(-4px); background: var(--bg-warm); }
.hub-card .hc-top { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.9rem; }
.hub-card .hc-num { font-family: var(--font-ceremonial); color: var(--gold-dark); font-size: 12px; letter-spacing: 0.3em; }
.hub-card .hc-glyph { color: var(--gold); font-size: 1.8rem; line-height: 1; }
.hub-card .hc-name { font-family: var(--font-ceremonial); font-size: 1.45rem; color: var(--cream); letter-spacing: 0.02em; }
.hub-card .hc-desc { font-size: 1.05rem; color: var(--cream-muted); line-height: 1.6; flex-grow: 1; }
.hub-card .hc-meta { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-top: 1.1rem; }
.hub-card .hc-arrow { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); margin-top: 0.4rem; transition: color .2s; }
.hub-card:hover .hc-arrow { color: var(--gold); }

@media (max-width: 760px) {
  .expect-grid { grid-template-columns: 1fr; }
}