/* Iris Editorial Design System — combined entry point for recipes site.
   Dark-first, architectural editorial layout: Anton headlines, 1px lines,
   warm grayscale, single dusty accent. Custom layout rules below tokens. */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:ital,wght@0,400;0,500;1,400&family=Space+Grotesk:wght@400;500&display=swap');

/* ---- Color tokens ---- */
:root {
  --gray-page:        #131210;
  --gray-surface:     #1b1a18;
  --gray-elevated:    #242220;
  --gray-line:        #343230;
  --gray-line-strong: #42403e;
  --gray-500:         #5a5856;
  --gray-400:         #767472;
  --gray-200:         #cfccc9;
  --gray-100:         #f0eeec;

  --rose-500:  #c18091;  --rose-700:  #a84e6c;  --rose-900:  #98224b;
  --steel-500: #7c909f;  --steel-700: #5b7286;  --steel-900: #2c475f;
  --plum-500:  #7a577f;  --plum-700:  #623a70;  --plum-900:  #4e2b64;
  --sage-500:  #6f9088;  --sage-700:  #407565;  --sage-900:  #245549;

  --background:      var(--gray-page);
  --surface:         var(--gray-surface);
  --surface-hover:   var(--gray-elevated);
  --divider:         var(--gray-line);
  --divider-strong:  var(--gray-line-strong);
  --text-muted:      var(--gray-500);
  --text-secondary:  var(--gray-400);
  --text-body:       var(--gray-200);
  --text-primary:    var(--gray-100);

  /* One site, one accent: Steel Blue for this recipe collection. */
  --accent:     var(--steel-500);
  --accent-700: var(--steel-700);
  --accent-900: var(--steel-900);
}

/* ---- Typography tokens ---- */
:root {
  --font-display:  'Anton', 'Arial Narrow', sans-serif;
  --font-subtitle: 'Space Grotesk', ui-sans-serif, sans-serif;
  --font-body:     'Inter', ui-sans-serif, system-ui, sans-serif;

  --text-xs:   .75rem;
  --text-sm:   .8125rem;
  --text-base: .875rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  3rem;
  --text-5xl:  4.5rem;
  --text-6xl:  6rem;
  --text-7xl:  8rem;
  --text-8xl:  10rem;

  --subtitle-size:     .9375rem;
  --subtitle-weight:   500;
  --subtitle-tracking: .01em;

  --display-size: clamp(3.5rem, 12vw, var(--text-8xl));
  --h1-size:      clamp(3rem,   9vw, var(--text-7xl));
  --h2-size:      clamp(2.5rem, 7vw, var(--text-6xl));
  --h3-size:      clamp(2rem,   5vw, var(--text-5xl));
}

/* ---- Spacing tokens ---- */
:root {
  --gutter:   56px;
  --hairline: 1px;
  --radius:   0px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  56px;
  --space-9:  80px;
  --space-10: 96px;

  --tag-pad-y: 9px;
  --tag-pad-x: 16px;
}

/* ---- Base ---- */
:root { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--text-primary); }

.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--text-primary);
  margin: 0;
}
.display { font-size: var(--display-size); line-height: .92; }
h1, .h1 { font-size: var(--h1-size); line-height: .92; }
h2, .h2 { font-size: var(--h2-size); line-height: .94; }
h3, .h3 { font-size: var(--h3-size); line-height: .96; }

.subtitle {
  font-family: var(--font-subtitle);
  font-weight: var(--subtitle-weight);
  font-size: var(--subtitle-size);
  letter-spacing: var(--subtitle-tracking);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.eyebrow {
  font-family: var(--font-subtitle);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--accent { color: var(--accent); }

.lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--text-body);
}

.meta {
  font-family: var(--font-subtitle);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.tag {
  display: inline-block;
  font-family: var(--font-subtitle);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border: var(--hairline) solid var(--divider-strong);
  border-radius: var(--radius);
  padding: var(--tag-pad-y) var(--tag-pad-x);
}

.rule { height: var(--hairline); background: var(--divider); border: 0; margin: 0; }

/* ---- Links ---- */
a {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: var(--hairline) solid var(--divider-strong);
  transition: border-color .15s ease, color .15s ease;
}
a:hover { border-color: var(--accent); color: var(--accent); }

.nav-logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-primary);
  border-bottom: 0;
}

/* ---- Layout primitives ---- */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) var(--gutter);
}

.page--narrow {
  max-width: 760px;
}

.line-grid-2, .line-grid-3, .line-grid-4 { display: grid; }
.line-grid-2 { grid-template-columns: repeat(2, 1fr); }
.line-grid-3 { grid-template-columns: repeat(3, 1fr); }
.line-grid-4 { grid-template-columns: repeat(4, 1fr); }
.line-grid-2 > * + *,
.line-grid-3 > * + *,
.line-grid-4 > * + * { border-left: var(--hairline) solid var(--divider); }

/* ---- Cover ---- */
.cover {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: end;
  justify-items: start;
  background: var(--gray-page);
  overflow: hidden;
}

.cover__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
}

.cover__overlay {
  position: absolute;
  inset: 0;
  background: rgba(19,18,16,.55);
}

.cover__title {
  position: relative;
  z-index: 1;
  padding: var(--space-8) var(--gutter);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.cover__title h1 {
  font-size: clamp(4.5rem, 18vw, var(--text-8xl));
  line-height: .86;
}

.cover__scroll {
  position: absolute;
  bottom: var(--space-8);
  right: var(--gutter);
  z-index: 2;
  width: 1px;
  height: 64px;
  background: var(--divider-strong);
}

/* ---- Index ---- */
.section {
  border-top: var(--hairline) solid var(--divider);
}

.section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: var(--hairline) solid var(--divider);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card-grid > * + * { border-left: var(--hairline) solid var(--divider); }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-6);
  min-height: 280px;
  transition: background .15s ease;
}

.card:hover { background: var(--surface-hover); }

.card a {
  display: block;
  border-bottom: 0;
}

.card a:hover h3 { color: var(--accent); }

.card h3 {
  font-size: var(--text-3xl);
  line-height: .98;
  margin-bottom: var(--space-3);
}

.card p {
  margin: 0;
  color: var(--text-body);
}

.card .meta {
  margin-top: auto;
  color: var(--accent);
}

/* ---- Recipe page ---- */
.recipe-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: var(--space-7) 0;
  padding: var(--space-5) 0;
  border-top: var(--hairline) solid var(--divider);
  border-bottom: var(--hairline) solid var(--divider);
}

.recipe-meta > div + div {
  padding-left: var(--space-5);
  border-left: var(--hairline) solid var(--divider);
}

.recipe-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.recipe-body > * + * {
  padding-left: var(--space-8);
  border-left: var(--hairline) solid var(--divider);
}

.recipe-part {
  border-top: var(--hairline) solid var(--divider);
  margin-top: var(--space-9);
  padding-top: var(--space-7);
}

.recipe-part h2 {
  font-size: var(--h3-size);
  line-height: .96;
  margin-bottom: var(--space-6);
  color: var(--text-primary);
}

.recipe-body h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
  color: var(--accent);
}

.recipe-body ul, .recipe-body ol {
  margin: 0;
  padding-left: var(--space-5);
}

.recipe-body li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
}

.recipe-body ol li::marker {
  font-family: var(--font-subtitle);
  font-weight: 500;
  color: var(--accent);
}

.back {
  display: inline-block;
  margin-bottom: var(--space-6);
  font-family: var(--font-subtitle);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  border-bottom: var(--hairline) solid var(--divider-strong);
}

.back:hover { color: var(--accent); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  :root { --gutter: 28px; }
  .card-grid { grid-template-columns: 1fr; }
  .card-grid > * + * { border-left: 0; border-top: var(--hairline) solid var(--divider); }
  .recipe-body { grid-template-columns: 1fr; }
  .recipe-body > * + * { padding-left: 0; border-left: 0; border-top: var(--hairline) solid var(--divider); padding-top: var(--space-7); }
  .recipe-meta { grid-template-columns: 1fr; }
  .recipe-meta > div + div { padding-left: 0; border-left: 0; border-top: var(--hairline) solid var(--divider); padding-top: var(--space-4); }
}