/* Lexuria Publishing front door, lexuria.co.uk. Kitchen Table Guides redesign, built by Felix 10 Nov 2026
   from Charta's comp stylesheet (Deliverables/2026-11-10-charta-lexuria-site-ktg-design/comps/ktg-comp.css).
   Phone first: the base rules are the 375px layout; 768px and 1100px only add.
   Every colour is a GL-003 §2 token. Spacing GL-003 §4, radius and touch GL-003 §12, web type GL-003 §3 (v43).
   No new hex, no new font, no new type size. Fonts are own-origin (site/) or embedded (preview/). */

@font-face { font-family: "Playfair Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/PlayfairDisplay-Bold.ttf") format("truetype"); }
@font-face { font-family: "Playfair Display"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/PlayfairDisplay-Italic.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/SourceSans3-Regular.ttf") format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/SourceSans3-SemiBold.ttf") format("truetype"); }

:root {
  color-scheme: light;
  --color-primary: #1B2A4A;
  --color-accent: #E8A838;
  --color-accent-text: #825E24;
  --color-neutral-0: #FFFFFF;
  --color-neutral-1: #F7F3EE;
  --color-neutral-2: #E8E2D9;
  --color-neutral-3: #9E9488;   /* decorative only (GL-003 §2) */
  --color-muted: #6E655C;
  --color-neutral-4: #3D3530;
  --color-neutral-5: #1B1410;
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --touch: 44px;
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --text-h2: 20px; --text-small: 14px;
  --text-web-body: 18px; --text-web-h1: 30px; --text-web-h2: 24px;
  --measure: 68ch; --page-w: 1120px;
  /* KTG motif: the table edge. A decorative use of --color-accent-text as a fill (flagged for Iris). */
  --ktg-wood: var(--color-accent-text);
  --ktg-shadow: 0 6px 14px -6px rgb(27 42 74 / 0.45);   /* Primary navy at 45%: the one shadow */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-neutral-1); color: var(--color-neutral-4); font-family: var(--font-body); font-size: var(--text-web-body); line-height: 1.6; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; color: var(--color-neutral-5); line-height: 1.25; margin: 0; font-variant-numeric: lining-nums; }
h1 { font-size: var(--text-web-h1); color: var(--color-primary); }
h2 { font-size: var(--text-web-h2); }
p { margin: 0 0 var(--space-sm); max-width: var(--measure); }
a { color: var(--color-primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-sm); top: -100px; background: var(--color-neutral-0); color: var(--color-primary); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-md); z-index: 10; }
.skip-link:focus { top: var(--space-sm); }
.wrap { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--space-sm); }
svg.ktg-art { display: block; width: 100%; height: auto; }
/* KTG art fills (Charta's SVG <style>, moved here once; build.py strips the per-SVG copy) */
.ktg-art .p{fill:var(--color-primary,#1B2A4A)}
.ktg-art .a{fill:var(--color-accent,#E8A838)}
.ktg-art .wd{fill:var(--color-accent-text,#825E24)}
.ktg-art .w{fill:var(--color-neutral-0,#FFFFFF)}
.ktg-art .o{fill:var(--color-neutral-1,#F7F3EE)}
.ktg-art .l{fill:var(--color-neutral-2,#E8E2D9)}
.ktg-art .d{fill:var(--color-neutral-3,#9E9488)}
.ktg-art .m{fill:var(--color-muted,#6E655C)}
.ktg-art .sp{fill:none;stroke:var(--color-primary,#1B2A4A);stroke-linecap:round;stroke-linejoin:round}
.ktg-art .sa{fill:none;stroke:var(--color-accent,#E8A838);stroke-linecap:round;stroke-linejoin:round}
.ktg-art .sl{fill:none;stroke:var(--color-neutral-2,#E8E2D9);stroke-linecap:round}
.ktg-art .sm{fill:none;stroke:var(--color-muted,#6E655C);stroke-linecap:round}
.ktg-art .sw{fill:none;stroke:var(--color-neutral-0,#FFFFFF);stroke-linecap:round}

/* Header: unchanged from the live site */
.site-header { background: var(--color-neutral-0); border-bottom: 4px solid var(--color-accent); }
.site-header .wrap { display: flex; align-items: center; min-height: 88px; padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.logo-link { display: inline-block; line-height: 0; padding: var(--space-2xs); }
.logo-link svg { width: 188px; height: auto; display: block; }
.lx-word { font-family: var(--font-heading); font-weight: 700; }
.lx-desc { font-family: var(--font-body); font-weight: 600; }
.site-header .wrap { flex-wrap: wrap; justify-content: space-between; column-gap: var(--space-sm); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2xs); }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-xs); font-weight: 600; text-decoration: none; border-radius: var(--radius-sm); }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* Plain pages (Legal): unchanged from the live site */
.intro { padding: var(--space-xl) 0 var(--space-lg); }
.intro p.lead { margin-top: var(--space-sm); }
address { font-style: normal; margin: 0 0 var(--space-sm); max-width: var(--measure); }

/* Hero: the kitchen table. Phone order: series line, h1, lead, scene. */
.ktg-hero { background: var(--color-neutral-0); padding: var(--space-lg) 0 0; }
.series { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-bottom: var(--space-md); }
.series-mark { display: block; width: 232px; }
.draft-tag { font-size: var(--text-small); font-weight: 600; color: var(--color-neutral-5); background: var(--color-neutral-1); border: 1px dashed var(--color-muted); border-radius: var(--radius-sm); padding: 2px var(--space-xs); }
.ktg-hero p.lead { margin: var(--space-sm) 0 0; }
.hero-art { margin: var(--space-lg) calc(-1 * var(--space-sm)) 0; }
.hero-art svg { border-radius: 0; }
.hero-art--spot { max-width: 200px; margin: var(--space-md) 0 var(--space-md); }
/* The table edge: the KTG signature under every hero, 12px of wood. */
.table-edge { height: 12px; background: var(--ktg-wood); box-shadow: inset 0 -4px 0 rgb(27 42 74 / 0.25); }

/* Spot illustrations beside headings */
.spot { flex: 0 0 auto; display: block; width: 72px; }
.spot--sm { width: 56px; }
.spot--xs { width: 48px; }
.spot--md { width: 88px; }
.section-head, .group-head, .mini-head { display: flex; align-items: flex-end; gap: var(--space-sm); }
.section-head { margin-bottom: var(--space-md); padding-bottom: var(--space-xs); border-bottom: 2px solid var(--color-neutral-2); }
.group-head { margin-bottom: var(--space-sm); }
.group + .group { margin-top: var(--space-xl); }
.group h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent-text); padding-bottom: 6px; }

/* Finder and free slot */
.pre-guides { padding-top: var(--space-lg); }
.finder .mini-head { margin-bottom: var(--space-xs); }
.finder h2 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-web-body); color: var(--color-neutral-5); padding-bottom: 4px; }
.finder ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.finder a { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--touch); padding: 0 var(--space-sm) 0 var(--space-xs); background: var(--color-neutral-0); border: 1px solid var(--color-primary); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; }
.finder a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.finder a svg { flex-shrink: 0; }
.free-slot { display: flex; gap: var(--space-sm); align-items: flex-start; border: 2px dashed var(--color-muted); border-radius: var(--radius-md); background: var(--color-neutral-0); padding: var(--space-md) var(--space-sm); margin-top: var(--space-lg); }
.free-slot .tag { display: inline-block; font-size: var(--text-small); font-weight: 600; color: var(--color-neutral-5); background: var(--color-neutral-2); border-radius: var(--radius-sm); padding: var(--space-2xs) var(--space-xs); margin-bottom: var(--space-xs); }
.free-slot h2 { font-size: var(--text-h2); margin-bottom: var(--space-xs); }
.free-slot p { margin: 0; }
.free-slot .spot--md { width: 64px; }

section { padding: var(--space-xl) 0; }
section.band { background: var(--color-neutral-0); border-top: 1px solid var(--color-neutral-2); border-bottom: 1px solid var(--color-neutral-2); }

/* Guide cards: every guide shown as its real cover. Phone: cover beside the title. */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); grid-template-columns: 1fr; }
.card {
  background: var(--color-neutral-0); border: 1px solid var(--color-neutral-2); border-radius: var(--radius-md);
  padding: var(--space-sm); display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--space-sm); row-gap: var(--space-sm);
  grid-template-areas: "cover head" "summary summary" "more more"; scroll-margin-top: var(--space-md);
}
.card:target { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.card-cover { grid-area: cover; align-self: start; }
.card-cover img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border-bottom: 5px solid var(--ktg-wood); box-shadow: var(--ktg-shadow); background: var(--color-primary); }
.card-head { grid-area: head; display: flex; flex-direction: column; gap: var(--space-2xs); }
.card h4 { font-size: var(--text-h2); line-height: 1.3; }
.meta { font-size: var(--text-small); color: var(--color-muted); margin: 0; }
.card .summary { grid-area: summary; margin: 0; }
.card-more { grid-area: more; display: flex; flex-direction: column; gap: var(--space-xs); }
.button { display: flex; align-items: center; justify-content: center; text-align: center; min-height: var(--touch); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-neutral-0); font-weight: 600; text-decoration: none; line-height: 1.3; }
.button:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.look-inside { margin: 0; }
.look-inside summary { display: list-item; padding: 10px 0; min-height: var(--touch); cursor: pointer; width: fit-content; color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.look-inside summary:hover { text-decoration-thickness: 2px; }
.look-inside img { display: block; width: 100%; max-width: 360px; height: auto; margin-top: var(--space-xs); border: 1px solid var(--color-neutral-2); border-radius: var(--radius-sm); background: var(--color-neutral-0); }

/* How buying works: three numbered steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); counter-reset: none; }
.steps li { display: flex; gap: var(--space-sm); align-items: flex-start; background: var(--color-neutral-1); border-radius: var(--radius-md); padding: var(--space-sm); }
.steps p { margin: 0; }
.step-n { flex: 0 0 auto; width: var(--touch); height: var(--touch); display: grid; place-items: center; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-neutral-0); font-family: var(--font-heading); font-weight: 700; font-size: var(--text-web-h2); font-variant-numeric: lining-nums; border-bottom: 4px solid var(--color-accent); }

/* Footer: unchanged from the live site */
.site-footer { background: var(--color-neutral-0); border-top: 1px solid var(--color-neutral-2); padding: var(--space-lg) 0; font-size: var(--text-small); color: var(--color-muted); }
.site-footer p { margin: 0 0 var(--space-xs); }
.site-footer a { color: var(--color-primary); }

/* Scam landing page */
.scam-body { padding: var(--space-lg) var(--space-sm) var(--space-xl); }
.scam-graphic { max-width: 420px; margin: 0 auto var(--space-lg); }
.scam-graphic svg { display: block; width: 100%; height: auto; }
.feature { background: var(--color-neutral-0); border: 1px solid var(--color-neutral-2); border-radius: var(--radius-md); padding: var(--space-md) var(--space-sm); display: grid; gap: var(--space-md); }
.feature-cover { width: 160px; }
.feature-cover img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border-bottom: 6px solid var(--ktg-wood); box-shadow: var(--ktg-shadow); }
.feature h2 { margin-bottom: var(--space-xs); }
.feature ul { padding-left: var(--space-md); margin: var(--space-sm) 0; max-width: var(--measure); }
.feature li + li { margin-top: var(--space-2xs); }
.buy-row { margin-top: var(--space-sm); }
.back { display: inline-flex; align-items: center; min-height: var(--touch); margin-top: var(--space-md); font-weight: 600; }

/* Free slot, live: the chapters are on Gumroad, so the dashed "coming soon" frame becomes a solid one */
.free-slot--live { border: 1px solid var(--color-neutral-2); }
.free-slot ul { list-style: none; margin: var(--space-xs) 0 0; padding: 0; }
.free-slot li a { display: flex; align-items: center; min-height: var(--touch); padding: var(--space-2xs) 0; font-weight: 600; }

/* Help and questions page (Wren's copy, 10 Nov) */
.ktg-hero--plain { padding-bottom: var(--space-xl); }
.qa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.qa-list, .callout { max-width: calc(var(--measure) + 2 * var(--space-md)); }
.qa { background: var(--color-neutral-0); border: 1px solid var(--color-neutral-2); border-radius: var(--radius-md); padding: var(--space-md) var(--space-sm); scroll-margin-top: var(--space-md); }
.qa:target { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.qa h3 { font-size: var(--text-h2); line-height: 1.3; margin-bottom: var(--space-sm); }
.qa ul, .qa ol { padding-left: var(--space-md); margin: 0 0 var(--space-sm); max-width: var(--measure); }
.qa li + li { margin-top: var(--space-xs); }
.qa blockquote { margin: 0 0 var(--space-sm); padding: var(--space-sm); max-width: var(--measure); background: var(--color-neutral-1); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.qa blockquote p:last-child, .qa > :last-child { margin-bottom: 0; }
.qa-guide { margin: var(--space-sm) 0 0; padding-top: var(--space-xs); border-top: 1px solid var(--color-neutral-2); }
.qa-guide a { display: block; min-height: var(--touch); padding: var(--space-xs) 0 0; font-weight: 600; }
.callout { background: var(--color-neutral-0); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-sm); margin-bottom: var(--space-md); }
.callout p { margin: 0; }
.help-contact { padding-bottom: var(--space-xl); }
cite { font-style: italic; }

@media (min-width: 768px) {
  :root { --text-web-h1: 36px; }
  .wrap { padding: 0 var(--space-lg); }
  .logo-link svg { width: 240px; }
  .ktg-hero { padding-top: var(--space-xl); }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-xl); align-items: end; }
  .hero-grid .intro-text { padding-bottom: var(--space-xl); }
  .hero-art { margin: 0; }
  .hero-art svg { border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .hero-grid--scam { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: center; }
  .hero-art--spot { max-width: 220px; margin: 0 0 var(--space-lg); }
  .series-mark { width: 268px; }
  .pre-guides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; padding-top: var(--space-xl); }
  .free-slot { margin-top: 0; padding: var(--space-md); }
  .free-slot .spot--md { width: 88px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  /* From 768px the cover stands on its own shelf at the top of the card. */
  .card { grid-template-columns: 1fr; grid-template-areas: "cover" "head" "summary" "more"; grid-template-rows: auto auto 1fr auto; padding: 0 0 var(--space-md); overflow: hidden; row-gap: var(--space-sm); }
  .card-cover { background: var(--color-neutral-1); padding: var(--space-md) var(--space-md) 0; border-bottom: 10px solid var(--ktg-wood); display: flex; justify-content: center; }
  .card-cover img { width: 200px; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .card-head, .card .summary, .card-more { padding: 0 var(--space-md); }
  .card .summary { flex: 1; }
  .card-more { margin-top: auto; }
  .button { display: inline-flex; align-self: flex-start; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
  .steps li { flex-direction: column; padding: var(--space-md); }
  .qa { padding: var(--space-md); }
  .scam-body { padding: var(--space-xl) var(--space-lg); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-xl); align-items: start; }
  .scam-graphic { margin: 0; }
  .feature { padding: var(--space-md); grid-template-columns: 180px minmax(0, 1fr); align-items: start; }
  .feature-cover { width: 100%; }
  .back { grid-column: 2; margin-top: 0; }
}

@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spot { width: 88px; }
  .spot--sm { width: 64px; }
  .spot--xs { width: 56px; }
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { .skip-link, .button { display: none; } body { background: var(--color-neutral-0); } }