/* ============================================================
   Scots Kist — stylesheet
   No framework, no JavaScript, no images. Everything you see
   that looks like ornament is drawn in CSS or inline SVG, so
   the whole site stays free to host and loads instantly.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Inter:wght@500;600;700&display=swap');

:root {
  /* core */
  --ink: #12202e;
  --ink-soft: #4a5a68;
  --ink-faint: #7c8a97;
  --navy: #16324f;
  --navy-deep: #0e2337;
  --teal: #2f6b63;
  --gold: #c8973f;
  --gold-light: #e0bd77;
  --paper: #fffdf9;
  --cream: #faf5ec;
  --line: #e7ddc9;

  /* accents, used to colour-code sections */
  --heather: #6d4a72;
  --rust: #a04c2c;
  --moss: #4f6338;
  --loch: #2c5f7c;

  --shadow-sm: 0 1px 2px rgba(18,32,46,.06), 0 2px 8px rgba(18,32,46,.05);
  --shadow-md: 0 2px 4px rgba(18,32,46,.07), 0 10px 26px rgba(18,32,46,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 18px/1.68 'Source Serif 4', Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.3rem; }
.wrap.narrow { max-width: 37rem; }

/* ---------- the tartan band, drawn in CSS ---------- */
.tartan {
  height: 12px;
  background:
    repeating-linear-gradient(90deg,
      var(--tartan-a, #16324f) 0 16px,
      transparent 16px 24px,
      var(--gold) 24px 28px,
      transparent 28px 36px,
      #8c2f39 36px 52px,
      transparent 52px 60px);
}

/* ---------- header ---------- */
header.site {
  background: rgba(255,253,249,.92);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(1.4) blur(8px);
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: .85rem; padding-bottom: .85rem;
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); }
.brand-mark {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #24557f, var(--navy-deep));
  color: var(--gold-light);
  font: 700 .95rem/1 'Inter', system-ui, sans-serif; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1.5px rgba(200,151,63,.55), var(--shadow-sm);
}
.brand-text {
  font: 700 1.3rem/1 'Fraunces', Georgia, serif;
  letter-spacing: -.01em;
}
header nav { display: flex; gap: 1.15rem; flex-wrap: wrap; }
header nav a {
  color: var(--ink-soft); text-decoration: none; position: relative;
  font: 600 .92rem/1 'Inter', system-ui, sans-serif;
  padding: .35rem 0;
}
header nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--gold); transition: right .2s ease;
}
header nav a:hover { color: var(--navy); }
header nav a:hover::after { right: 0; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.1; margin: 1.5rem 0 .7rem; }
h2 { font-size: clamp(1.35rem, 3vw, 1.6rem); line-height: 1.2; margin: 2.6rem 0 .6rem; }
h3 { font-size: 1.12rem; margin: 0 0 .35rem; letter-spacing: -.005em; }
p { margin: 0 0 1.05rem; }
.deck { font-size: 1.12rem; color: var(--ink-soft); margin-bottom: 1.7rem; }
.tiny { font: 500 .82rem/1.5 'Inter', system-ui, sans-serif; color: var(--ink-faint); }
.signoff { font-style: italic; color: var(--ink-soft); }
.more { margin: 1.3rem 0 3rem; font: 600 .95rem/1 'Inter', system-ui, sans-serif; }
a { color: var(--teal); }

/* a small diamond rule, used to separate sections */
.rule {
  display: flex; align-items: center; gap: .55rem; margin: 2.6rem 0 1.2rem;
}
.rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rule span {
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--gold); display: inline-block;
}
.rule span:nth-child(2) { background: var(--teal); }
.rule span:nth-child(3) { background: #8c2f39; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 15% 0%, #1d4470 0%, var(--navy) 45%, var(--navy-deep) 100%);
  color: #f4efe4;
  padding: 3.2rem 0 3.4rem;
  border-bottom: 3px solid var(--gold);
}
.hero::before {
  /* woven tartan wash across the panel */
  content: ""; position: absolute; inset: 0; opacity: .10; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 26px),
    repeating-linear-gradient(0deg, var(--gold) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(90deg, transparent 0 14px, #8c2f39 14px 30px, transparent 30px 46px);
}
.hero .wrap { position: relative; }
.hero h1 { color: #fff; margin-top: 0; max-width: 26ch; }
.hero .lede { font-size: 1.16rem; color: #d8e0ea; max-width: 40ch; }
.hero .kicker {
  font: 600 .78rem/1 'Inter', system-ui, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-light); margin: 0 0 1rem;
}
.hero-btns { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: .78rem 1.3rem; border-radius: 999px;
  background: var(--gold); color: #2b1f04; text-decoration: none; border: 0;
  font: 700 .95rem/1 'Inter', system-ui, sans-serif;
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 2px rgba(224,189,119,.75);
}
.btn-ghost:hover { background: rgba(224,189,119,.14); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: #1d4470; }

/* ---------- cards ---------- */
.cards {
  display: grid; gap: 1rem; margin: 1.3rem 0;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.card {
  position: relative; display: block; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.25rem 1.3rem 1.1rem;
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--accent, var(--gold));
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.card p { color: var(--ink-soft); font-size: .96rem; margin: 0 0 .8rem; }
.card .count {
  font: 700 .74rem/1 'Inter', system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent, var(--teal));
}
/* colour-code each quiz so the grid has life in it */
.card:nth-child(1) { --accent: var(--loch); }
.card:nth-child(2) { --accent: var(--heather); }
.card:nth-child(3) { --accent: var(--moss); }
.card:nth-child(4) { --accent: var(--rust); }

/* ---------- quiz page ---------- */
.crumb { font: 600 .85rem/1 'Inter', system-ui, sans-serif; margin-top: 1.6rem; }
ol.quiz { list-style: none; padding: 0; margin: 1.7rem 0 2rem; }
li.q {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.2rem 1.3rem; margin-bottom: .85rem;
  box-shadow: var(--shadow-sm);
}
.q-text { font-weight: 600; margin: 0 0 .55rem; }
.q-text::first-letter { }
ol.opts { margin: .35rem 0 .75rem 1.15rem; padding: 0; color: var(--ink-soft); }
ol.opts li { margin-bottom: .18rem; }
details { border-top: 1px dashed var(--line); padding-top: .7rem; }
summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: .4rem;
  font: 700 .85rem/1 'Inter', system-ui, sans-serif;
  color: var(--teal); background: rgba(47,107,99,.08);
  padding: .5rem .85rem; border-radius: 999px;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; font-weight: 700; font-size: 1rem; line-height: 1; }
details[open] summary::before { content: "–"; }
details[open] summary { background: rgba(200,151,63,.16); color: #7a5a12; }
.ans { margin: .7rem 0 0; font-weight: 700; color: var(--navy); font-size: 1.05rem; }

/* ---------- callout / band ---------- */
.callout {
  position: relative; background: var(--paper);
  border: 1px solid var(--line); border-left: 5px solid var(--gold);
  border-radius: 14px; padding: 1.35rem 1.45rem; margin: 2rem 0 3rem;
  box-shadow: var(--shadow-sm);
}
.band {
  position: relative; overflow: hidden; margin-top: 2.8rem; padding: 2.6rem 0;
  background:
    radial-gradient(100% 120% at 50% 0%, #f3ece0, var(--cream));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.band::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--navy) 0 18px, transparent 18px 26px, var(--gold) 26px 30px, transparent 30px 38px, #8c2f39 38px 56px, transparent 56px 64px);
  opacity: .85;
}
.callout h2, .band h2 { margin-top: 0; }

/* ---------- signup ---------- */
.signup { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.1rem 0 .65rem; }
.signup input {
  flex: 1 1 16rem; padding: .8rem 1rem;
  border: 1.5px solid var(--line); border-radius: 999px;
  font: 400 1rem/1 'Source Serif 4', Georgia, serif; background: #fff; color: var(--ink);
}
.signup input::placeholder { color: #a9b2ba; }
.signup input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,151,63,.22); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- blether list ---------- */
ol.blether-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
li.blether { border-bottom: 1px solid var(--line); padding: 1.15rem 0; }
li.blether:last-child { border-bottom: 0; }
li.blether h3 { margin: 0 0 .25rem; font-size: 1.16rem; }
li.blether a { text-decoration: none; color: var(--ink); }
li.blether a:hover h3 { color: var(--teal); text-decoration: underline; }
li.blether .meta {
  font: 700 .72rem/1 'Inter', system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem;
}
li.blether p { color: var(--ink-soft); font-size: .98rem; margin: 0; }

/* ---------- shop ---------- */
.product {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.35rem 1.45rem; margin: 1.15rem 0;
  box-shadow: var(--shadow-sm);
}
.product h2 { margin-top: 0; }
.price {
  font: 700 .95rem/1 'Inter', system-ui, sans-serif; color: var(--ink-soft);
  letter-spacing: .01em;
}
.price::before { content: "▪ "; color: var(--gold); }
.soon {
  font: 700 .68rem/1 'Inter', system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .1em; background: var(--gold); color: #2b1f04;
  padding: .3rem .55rem; border-radius: 999px; vertical-align: middle; margin-left: .35rem;
}

/* ---------- footer ---------- */
footer.site {
  position: relative; margin-top: 3.2rem; padding: 2.6rem 0 2.2rem;
  background: var(--navy-deep); color: #d6dfe9;
}
footer.site::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 12px, transparent 12px 22px, #8c2f39 22px 34px, transparent 34px 44px);
  opacity: .9;
}
footer.site .wrap { padding-top: 0; padding-bottom: 0; }
.foot-tag { font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; color: #f0e9db; }
.foot-small { font: 500 .82rem/1.5 'Inter', system-ui, sans-serif; color: #8ea3b8; margin-bottom: 0; }
footer.site a { color: var(--gold-light); }

/* ---------- print: quizzes should come off the printer cleanly ---------- */
@media print {
  .tartan, header.site, footer.site, .callout, .band, .hero-btns, .signup, .rule { display: none; }
  body { background: #fff; font-size: 12pt; }
  li.q { border: 0; box-shadow: none; padding: 0; margin-bottom: 1rem; page-break-inside: avoid; }
  details { border: 0; }
  details > * { display: block !important; }
  summary { display: none; }
}