/* ============================================================
   Scots Kist — stylesheet
   Warm palette taken from the kist banner: cream, deep teal,
   rust and gold. No framework, no JavaScript.

   NOTE: the web fonts are loaded with a <link> in the HTML <head>,
   NOT with an @import here. An @import makes the browser fetch and
   parse the font stylesheet BEFORE it will apply this one, so if that
   request hangs or is blocked (poor mobile signal, a filter, a captive
   portal) the whole page renders completely unstyled. Keeping the font
   load separate means this sheet always applies straight away.
   ============================================================ */

:root{
  color-scheme: light;
  --ink:#172b2d;
  --deep:#173b3f;
  --deep-2:#102d30;
  --green:#31584d;
  --sage:#758878;
  --cream:#f7f1e4;
  --paper:#fffaf0;
  --rust:#a75c3c;
  --rust-2:#8f4a2d;
  --gold:#b89454;
  --mist:#e7e8df;
  --muted:#5d6a66;
  --line:rgba(23,43,45,.14);
  --line-2:rgba(23,43,45,.07);
  --shadow:0 16px 45px rgba(23,43,45,.12);
  --shadow-sm:0 7px 24px rgba(23,43,45,.07);
  --radius:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream); color:var(--ink);
  font:400 17px/1.65 'Inter Tight',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:78rem;margin:0 auto;padding:0 1.6rem}
.wrap.tight{max-width:50rem}

h1,h2,h3,h4{font-family:Fraunces,Georgia,serif;font-weight:800;
  letter-spacing:-.035em;line-height:1.02}
h1{font-size:clamp(2rem,4.4vw,3.3rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.3rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.05rem}
.lbl{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--rust);display:inline-block}
.lead{font-size:1.09rem;color:var(--muted);max-width:48ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------- header ---------------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(247,241,228,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:1.2rem;padding:.8rem 1.6rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand .mk{width:2rem;height:2rem;border:1.5px solid var(--deep);border-radius:50%;
  display:grid;place-items:center;font-family:Fraunces,serif;font-weight:800;
  font-size:.68rem;color:var(--deep)}
.brand .wordmark{font-size:1.95rem;line-height:1;color:var(--deep);white-space:nowrap;
  padding-right:.15rem}
/* the script wordmark: used wherever the name appears as the logo,
   never inside a paragraph */
.wordmark{font-family:'Great Vibes','Brush Script MT','Segoe Script','Apple Chancery',
  'Lucida Handwriting',cursive;font-weight:400;font-style:normal;letter-spacing:.005em;
  text-transform:none}
footer.site h3.wordmark{font-size:2.05rem;line-height:1;color:#fff;font-weight:400;
  margin:-.25rem 0 .75rem}
header.site nav{margin-left:auto;display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
header.site nav a{text-decoration:none;font-weight:600;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:.3rem 0;border-bottom:1.5px solid transparent}
header.site nav a:hover{color:var(--rust)}
header.site nav a.on{color:var(--deep);border-bottom-color:var(--rust)}
@media(max-width:640px){
  header.site .wrap{gap:.8rem;padding:.7rem 1.1rem}
  header.site nav{gap:.8rem}
  header.site nav a{font-size:.66rem;letter-spacing:.07em}
  .brand .wordmark{font-size:1.65rem}
}

/* ---------------- the kist banner hero ---------------- */
.hero{position:relative;overflow:hidden;background:var(--deep-2);
  height:clamp(24rem,33.34vw,34rem)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 58%}
.hero-scrim{position:absolute;inset:0;background:
  radial-gradient(58% 64% at 50% 50%, rgba(9,30,32,.60) 0%, rgba(9,30,32,.32) 55%,
    rgba(9,30,32,.05) 100%),
  linear-gradient(180deg,rgba(16,45,48,.55) 0%,rgba(16,45,48,.20) 32%,
    rgba(16,45,48,.16) 62%,rgba(16,45,48,.62) 100%)}
.hero-centre{position:absolute;inset:0;z-index:2;display:grid;place-content:center;
  text-align:center;padding:2rem 1.6rem}
.script{display:block;font-family:'Great Vibes','Brush Script MT','Segoe Script',
  'Apple Chancery','Lucida Handwriting',cursive;font-weight:400;
  font-size:clamp(3.2rem,8.4vw,6.6rem);line-height:.92;color:#fffdf6;
  text-shadow:0 1px 3px rgba(8,26,28,.85), 0 4px 22px rgba(8,26,28,.75),
    0 14px 50px rgba(8,26,28,.55)}
.strap{display:block;margin-top:.9rem;font-weight:700;
  font-size:clamp(.64rem,1.3vw,.9rem);letter-spacing:.3em;text-transform:uppercase;
  color:#fdf6e6;text-shadow:0 1px 3px rgba(8,26,28,.9), 0 2px 14px rgba(8,26,28,.8)}
@media(max-width:640px){
  .hero{height:auto;min-height:28rem}
  .hero-img{object-position:20% 62%}
  .strap{letter-spacing:.2em}
}

/* The cream ribbon of links that sits along the bottom edge of the picture.
   It is the ONLY menu above the fold, and it sticks to the top when you scroll. */
.ribbon{position:sticky;top:0;z-index:50;background:var(--cream);
  border-top:2px solid var(--rust);border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  padding:.5rem .8rem}
.ribbon a{text-decoration:none;font-weight:600;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);padding:.45rem .8rem;white-space:nowrap}
.ribbon a:hover{color:var(--rust)}
.ribbon i{font-style:normal;color:var(--gold);font-size:.7rem;padding:0 .1rem}
@media(max-width:640px){
  .ribbon{gap:0;padding:.35rem .4rem}
  .ribbon a{font-size:.63rem;letter-spacing:.06em;padding:.4rem .45rem}
  .ribbon i{display:none}
}

/* ---------------- buttons ---------------- */
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.82rem;
  letter-spacing:.04em;padding:.9rem 1.4rem;background:var(--rust);color:#fff;
  border:1.5px solid var(--rust);border-radius:999px;cursor:pointer}
.btn:hover{background:var(--rust-2);border-color:var(--rust-2)}
.btn.ghost{background:rgba(247,241,228,.94);color:var(--deep);border-color:transparent}
.btn.ghost:hover{background:#fff}
.btn.line{background:transparent;color:var(--deep);border-color:rgba(23,43,45,.35)}
.btn.line:hover{border-color:var(--rust);color:var(--rust)}

/* ---------------- facts rail ---------------- */
.rail{background:var(--deep);color:var(--cream)}
.rail .wrap{display:flex;gap:2.4rem;flex-wrap:wrap;justify-content:center;
  padding:1rem 1.6rem}
.rail span{font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:#b9c7c3}
.rail b{color:#fff;font-weight:700}
@media(max-width:640px){
  .rail .wrap{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem;padding:.9rem 1.1rem}
}

/* ---------------- section furniture ---------------- */
section.block{padding:4.6rem 0 0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.4rem;
  padding-bottom:1rem;border-bottom:2px solid var(--ink);margin-bottom:1.8rem}
.head h2{margin:0}
.head a{text-decoration:none;font-weight:700;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rust);padding-bottom:.3rem;
  border-bottom:1.5px solid var(--rust);white-space:nowrap}
.head a:hover{color:var(--rust-2);border-bottom-color:var(--rust-2)}

/* ---------------- quiz shelf ---------------- */
.row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
@media(max-width:1000px){.row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.row{grid-template-columns:1fr}}
.panel{display:block;text-decoration:none;position:relative;overflow:hidden;
  background:var(--deep);aspect-ratio:3/4;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.04) saturate(1.02);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.panel::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(16,45,48,0) 30%,rgba(16,45,48,.55) 66%,rgba(16,45,48,.92) 100%)}
.panel .txt{position:absolute;inset:auto 0 0 0;padding:1.25rem 1.2rem;z-index:2}
.panel .n{font-weight:700;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold)}
.panel h3{margin:.5rem 0 .45rem;color:#fff;font-size:1.16rem}
.panel .m{font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:#c9d5d1}
.panel:hover img{transform:scale(1.06)}
.panel:hover h3{color:#f6e6c4}

/* ---------------- editorial split ---------------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;background:var(--deep);
  border-radius:var(--radius);overflow:hidden;margin-top:4.6rem;box-shadow:var(--shadow)}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.split figure{position:relative;min-height:23rem;overflow:hidden;margin:0}
.split figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.split figure{min-height:16rem}}
.split .txt{padding:3.2rem 2.4rem;color:#fff}
.split blockquote{font-family:Fraunces,Georgia,serif;font-weight:800;
  font-size:clamp(1.4rem,2.7vw,2.1rem);letter-spacing:-.035em;line-height:1.1;color:#fff;
  margin:1.1rem 0 0}
.split blockquote em{font-style:italic;color:#f0d9a8}
.split p{margin-top:1.1rem;color:#c6d3cf;max-width:46ch}
.split .btn{margin-top:1.6rem}

/* ---------------- list rows ---------------- */
.rows{border-top:2px solid var(--ink)}
.rows a{display:grid;grid-template-columns:4rem 1fr 15rem auto;gap:1.3rem;align-items:baseline;
  text-decoration:none;padding:1.4rem .2rem;border-bottom:1px solid var(--line)}
.rows a:hover{background:var(--paper)}
.rows .n{font-family:Fraunces,serif;font-weight:800;font-size:1.4rem;color:var(--rust)}
.rows h3{font-size:clamp(1.1rem,2vw,1.55rem);color:var(--ink);margin:0}
.rows a:hover h3{color:var(--rust)}
.rows .d{color:var(--muted);font-size:.95rem}
.rows .m{font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage)}
@media(max-width:820px){
  .rows a{grid-template-columns:2.6rem 1fr;gap:.9rem}
  .rows .d,.rows .m{grid-column:2}
}

/* ---------------- subscribe ---------------- */
.subscribe{background:var(--rust);color:#fff;margin-top:4.6rem}
.subscribe .wrap{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center;
  padding:3.2rem 1.6rem}
@media(max-width:820px){.subscribe .wrap{grid-template-columns:1fr;gap:1.5rem}}
.subscribe h2{color:#fff}
.subscribe .lbl{color:#f6dfae}
.subscribe p{margin-top:.9rem;color:rgba(255,255,255,.9);max-width:44ch}
form.signup{display:flex;gap:.5rem;flex-wrap:wrap;background:#fff;padding:.5rem;
  border-radius:999px}
form.signup input{flex:1 1 14rem;padding:.85rem 1.1rem;border:0;outline:0;background:transparent;
  font:400 1rem 'Inter Tight',sans-serif;color:var(--ink);min-width:0}
form.signup button{padding:.85rem 1.4rem;border:0;border-radius:999px;background:var(--deep);
  color:#fff;font-weight:700;font-size:.82rem;cursor:pointer}
form.signup button:hover{background:var(--deep-2)}
.tiny{margin-top:.8rem;font-weight:600;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
@media(max-width:620px){
  form.signup{border-radius:16px;display:block;padding:.5rem}
  form.signup input,form.signup button{width:100%}
}

/* ---------------- inner page hero ---------------- */
.page-hero{position:relative;overflow:hidden;min-height:20rem;display:flex;
  align-items:flex-end;background:var(--deep-2)}
.page-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 35%;filter:brightness(.85)}
.page-hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(0deg,rgba(16,45,48,.96) 0%,rgba(16,45,48,.78) 42%,rgba(16,45,48,.35) 100%)}
.page-hero .wrap{position:relative;z-index:2;width:100%;padding-top:6rem;padding-bottom:2.4rem}
.page-hero h1{color:#fff;max-width:22ch}
.page-hero .lead{margin-top:.9rem;color:#dae3df}
.crumb{font-weight:700;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:#f0d9a8;display:inline-block;margin-bottom:.9rem;text-decoration:none}
.crumb:hover{color:#fff}

/* ---------------- prose ---------------- */
.prose{max-width:46rem;font-size:1.06rem;color:#33443f}
.prose h2{color:var(--ink);margin:2.2rem 0 .7rem}
.prose h3{margin:1.8rem 0 .6rem;color:var(--ink)}
.prose p{margin-bottom:1.1rem}
.prose a{color:var(--rust)}
.prose ul{margin:0 0 1.1rem 1.2rem}
.prose li{margin-bottom:.4rem}
.signoff{font-style:italic;color:var(--muted);margin-top:1.8rem}

/* ---------------- quiz pages ---------------- */
.quiz-body{padding:3rem 0 0}
ol.quiz{list-style:none;counter-reset:q}
li.q{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.5rem;margin-bottom:1rem;box-shadow:var(--shadow-sm)}
li.q .qtext{font-weight:600;font-size:1.1rem;color:var(--ink);margin:0 0 .75rem;
  display:flex;gap:.85rem;align-items:baseline}
li.q .qtext .qn{font-family:Fraunces,serif;font-weight:800;color:var(--rust);flex:none;
  font-size:1rem;min-width:1.6rem}
ol.opts{list-style:upper-alpha;margin:.2rem 0 .9rem 2.5rem;color:var(--muted)}
ol.opts li{margin-bottom:.22rem}
details{border-top:1px solid var(--line);padding-top:.8rem}
summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.45rem;
  font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rust);border:1.5px solid var(--rust);border-radius:999px;padding:.45rem .9rem}
summary::-webkit-details-marker{display:none}
summary::before{content:"Show answer"}
details[open] summary::before{content:"Hide answer"}
details[open] summary{background:var(--rust);color:#fff}
.ans{margin:.9rem 0 0;font-family:Fraunces,serif;font-weight:800;color:var(--deep);
  font-size:1.12rem}

/* ---------------- shop ---------------- */
.product{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.9rem 1.8rem;margin-bottom:1.1rem;display:grid;
  grid-template-columns:1fr 15rem;gap:1.9rem;align-items:center;box-shadow:var(--shadow-sm)}
@media(max-width:760px){.product{grid-template-columns:1fr}}
.product h3{font-size:1.35rem;color:var(--ink)}
.product p{color:var(--muted);margin:.85rem 0 0;max-width:52ch}
.product .price{font-weight:700;color:var(--rust);font-size:1rem;margin-top:1rem;
  letter-spacing:.02em}
.product .soon{font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--sage);padding:.3rem .55rem;border-radius:999px;
  margin-left:.5rem;vertical-align:.15em}
.product .act{text-align:right}
@media(max-width:760px){.product .act{text-align:left}}

/* ---------------- callout ---------------- */
.callout{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--rust);
  border-radius:var(--radius);padding:1.5rem 1.6rem;margin:2.2rem 0 3rem;
  box-shadow:var(--shadow-sm)}
.callout h2,.callout h3{margin-top:0;color:var(--ink)}
.callout p{color:var(--muted);margin:.7rem 0 1.2rem}

/* ---------------- footer ---------------- */
footer.site{background:var(--deep-2);color:#c9d5d1;padding:3rem 0 2.4rem;margin-top:0}
footer.site .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.2rem}
@media(max-width:820px){footer.site .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer.site .wrap{grid-template-columns:1fr}}
footer.site h3{color:#fff;font-size:1.05rem;margin-bottom:.7rem;font-weight:600}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:.4rem 0}
footer.site a{text-decoration:none;color:#c9d5d1}
footer.site a:hover{color:#fff}
footer.site .lede{color:#9fb0ab;font-size:.92rem;max-width:44ch}
footer.site .credit{color:#7e918c;font-size:.76rem;line-height:1.6;max-width:46ch;
  margin-top:.9rem}
footer.site .small{color:#7e918c;font-size:.8rem;margin:0}

/* ---------------- print: quizzes off the printer cleanly ---------------- */
@media print{
  header.site,footer.site,.rail,.hero,.page-hero,.subscribe,.callout,.split{display:none}
  body{background:#fff;color:#000;font-size:12pt}
  li.q{border:0;box-shadow:none;padding:0;margin-bottom:1.1rem;page-break-inside:avoid}
  ol.opts{color:#333}
  details{border:0}
  details > *{display:block !important}
  summary{display:none}
  .ans{margin-top:.4rem;color:#000}
}