/* ============================================================================
   The Tavern & Inn Co. — Design System stylesheet
   This is the single entry point. Every rendered design receives this file's
   @import closure, so the imports below ARE the design system's surface.
   "London's historic pubs, properly kept."
   ============================================================================ */

/* Fonts — Google Fonts: Fraunces (display) + Spectral (body) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Spectral:wght@300;400;500;600&display=swap');

/* Tokens — public brand (:root) + internal sibling (.brand-internal) */
@import url('./tokens/tokens.css');
@import url('./tokens/tokens-internal.css');

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.65;
  letter-spacing:.005em;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   Type scale
   Display = Fraunces 500, often UPPERCASE, tight leading, slight negative track.
   --------------------------------------------------------------------------- */
.display, h1, h2, h3{
  font-family:var(--display);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.01em;
  line-height:0.98;
  margin:0 0 .4em;
}
h1, .display-1{ font-size:clamp(2.6rem, 6vw, 5rem); text-transform:uppercase; line-height:0.96; }
h2, .display-2{ font-size:clamp(1.9rem, 3.4vw, 2.9rem); }
h3, .display-3{ font-size:clamp(1.3rem, 2vw, 1.7rem); letter-spacing:-0.005em; }

/* Eyebrow — the small tracked label above a headline */
.eyebrow{
  font-family:var(--body);
  text-transform:uppercase;
  font-weight:500;
  letter-spacing:.28em;
  font-size:.72rem;
  color:var(--grey);
  margin:0 0 1rem;
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow .diamond{ color:var(--accent); }

/* Lede / standfirst — large, light, for intros */
.lede{
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1.15rem, 1.8vw, 1.5rem);
  line-height:1.45;
  color:var(--ink-soft);
  max-width:var(--measure);
  margin:0 0 1.5rem;
}

p{ max-width:var(--measure); margin:0 0 1.2rem; }
.measure{ max-width:var(--measure); }

a{ color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent); transition:color .15s, border-color .15s; }
a:hover{ color:var(--accent-deep); border-color:var(--accent-deep); }

small, .meta, .caption{ color:var(--grey); font-size:.8rem; }

/* ---------------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------------- */
.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-pad); }
.section--alt{ background:var(--paper-2); }

/* Eyebrow → Headline → Lede stack opens most sections */
.section-head{ max-width:var(--measure); margin-bottom:clamp(2rem,4vw,3.5rem); }

/* Hairline rules — divide with these, not boxes */
.rule{ border:0; border-top:1px solid var(--line); margin:0; }
.rule--soft{ border-top-color:var(--line-soft); }

/* ◆ diamond motif — eyebrow lead, divider, footer mark. Sparing. */
.diamond{ display:inline-block; line-height:1; }
.divider{
  display:flex; align-items:center; gap:1rem;
  color:var(--line); margin-block:clamp(2rem,5vw,4rem);
}
.divider::before, .divider::after{ content:""; flex:1; border-top:1px solid var(--line); }
.divider .diamond{ color:var(--accent); font-size:.8rem; }

/* ---------------------------------------------------------------------------
   Buttons — understated outline. Uppercase, tracked. Clay/ink on hover.
   No fills, no shadows.
   --------------------------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--body);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.8rem;
  line-height:1;
  padding:.95em 1.6em;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  border-radius:0;
  transition:color .15s, border-color .15s, background .15s;
}
.btn:hover{ color:var(--accent-deep); border-color:var(--accent-deep); background:transparent; }
.btn-light{ border-color:var(--line); color:var(--ink); }       /* on dark/paper-2 panels */
.btn-light:hover{ border-color:var(--accent); color:var(--accent); }
.btn--accent{ border-color:var(--accent); color:var(--accent); }
.btn--accent:hover{ border-color:var(--accent-deep); color:var(--accent-deep); }

/* ---------------------------------------------------------------------------
   Cards — white or paper-2, hairline border. Flat: no shadows, no heavy radius.
   --------------------------------------------------------------------------- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  padding:clamp(1.4rem, 2.5vw, 2rem);
  border-radius:2px;
}
.card--paper{ background:var(--paper-2); }
.card h3{ margin-top:0; }
.card .eyebrow{ margin-bottom:.6rem; }

/* ---------------------------------------------------------------------------
   Nav — fixed, paper bg, hairline border fades in on scroll.
   Wordmark left, uppercase tracked links right.
   --------------------------------------------------------------------------- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.1rem var(--gutter);
  background:var(--bg);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{ border-bottom-color:var(--line); }
.nav__links{ display:flex; gap:1.8rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-family:var(--body); text-transform:uppercase; letter-spacing:.16em;
  font-size:.74rem; color:var(--ink); border-bottom:0;
}
.nav__links a:hover{ color:var(--accent); }

/* ---------------------------------------------------------------------------
   Wordmark — "The Tavern & Inn Co." Fraunces, UPPERCASE, 600, tracking .04em.
   The ampersand is italic and NOT uppercased — its signature detail.
   --------------------------------------------------------------------------- */
.wordmark{
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink);
  font-size:1.05rem;
  border-bottom:0;
  white-space:nowrap;
}
.wordmark .amp{
  font-style:italic;
  text-transform:none;   /* never uppercase the ampersand */
  font-weight:500;
}

/* ---------------------------------------------------------------------------
   Footer — wordmark + tagline, link columns, fine-print row.
   --------------------------------------------------------------------------- */
.footer{ background:var(--bg); border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,5rem); }
.footer__cols{ display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:2rem; }
.footer__tagline{ color:var(--grey); font-weight:300; margin-top:.6rem; }
.footer__col h4{ font-family:var(--body); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--grey); margin:0 0 1rem; }
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.footer__col a{ color:var(--ink-soft); border-bottom:0; font-size:.9rem; }
.footer__col a:hover{ color:var(--accent); }
.footer__fineprint{ display:flex; align-items:center; gap:1rem; color:var(--grey); font-size:.78rem; margin-top:clamp(2rem,4vw,3rem); padding-top:1.2rem; border-top:1px solid var(--line-soft); }

/* ---------------------------------------------------------------------------
   Texture — signature subtle paper-grain overlay (~3.5%, multiply).
   Add class .grain to a positioned element, or use the body::after below.
   --------------------------------------------------------------------------- */
.grain{ position:relative; }
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:multiply; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Imagery placeholder — labelled frame for real venue shots (to come) */
.photo-frame{
  display:grid; place-items:center;
  aspect-ratio:4/3;
  background:var(--paper-2);
  border:1px solid var(--line);
  color:var(--grey);
  font-size:.8rem; text-transform:uppercase; letter-spacing:.16em;
}