/* Thistle Compliance
   ------------------------------------------------------------------
   Direction: "The Certificate". Scottish STL compliance runs on paper
   with a fixed anatomy — a reference, an issue date, an expiry date, an
   inspector's registration, a status. That anatomy is this site's
   structural device: the ruled label/value record. Borders, rules and
   status colour are only ever spent on things that genuinely are
   records. Prose is never boxed.

   Two faces, each with a job. Newsreader carries display: it is a
   Scotch Roman, the style that came out of Edinburgh type foundries in
   the early 1800s and still sets official documents. Archivo carries
   body copy and every figure, with tabular numerals throughout.
   ------------------------------------------------------------------ */

@font-face { font-display: swap; }

:root {
  /* thistle-derived, semantic where it matters */
  --ink:          #201436;  /* violet-black — the plant's shadow */
  --ink-2:        #3A2B52;
  --thistle:      #7D3C86;  /* the flower — brand and action */
  --thistle-deep: #5A2461;
  --thistle-lift: #9A55A3;
  --wash:         #EFE7F3;  /* palest heather */
  --bract:        #54634A;  /* leaf sage — semantically "in date" (5.45:1 on its wash) */
  --bract-wash:   #E8EEE3;
  --due:          #8A5A12;  /* amber — "renewal due" */
  --due-wash:     #FBF0DC;
  --expiry:       #A82F1C;  /* the red of an expiry stamp */
  --expiry-wash:  #FAEAE7;

  --paper:        #F4F2F6;  /* violet-grey stock, not cream */
  --surface:      #FFFFFF;  /* the certificate sits on white */
  --rule:         #DDD6E4;  /* the ruled line of a form */
  --rule-firm:    #B9AEC4;
  --muted:        #635A70;

  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --display: "Newsreader", Georgia, "Times New Roman", serif;

  --wrap: 58rem;
  --gutter: 22px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  font-synthesis-weight: none;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 12px; top: 12px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px;
}

a { color: var(--thistle-deep); text-underline-offset: 2px; }
a:hover { color: var(--thistle); }
:focus-visible { outline: 3px solid var(--thistle); outline-offset: 2px; }

/* ================= masthead ================= */

.site-head { background: var(--surface); border-bottom: 1px solid var(--rule); }

.head-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--ink);
}
.brand svg { width: 46px; height: 46px; color: var(--thistle); flex: none; }
.brand-name {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.05;
}
.brand-strap {
  display: block;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.004em;
}

.head-call { text-align: right; }
.tel {
  font-size: 1.28rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.tel:hover { color: var(--thistle); text-decoration: underline; }
.hours { display: block; font-size: 0.79rem; color: var(--muted); }
.muted { display: block; font-size: 0.79rem; font-weight: 400; color: var(--muted); }

.site-nav { background: var(--ink); border-top: 3px solid var(--thistle); }
.site-nav .wrap { display: flex; flex-wrap: wrap; }
.site-nav a {
  color: #CFC2DC;
  text-decoration: none;
  padding: 13px 18px;
  font-size: 0.93rem;
  font-weight: 500;
}
.site-nav a:first-child { padding-left: 0; }
.site-nav a:hover { color: #fff; }
.site-nav a.here {
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--thistle-lift);
}

/* ================= type ================= */

main { padding-block: 46px 72px; }

h1 {
  font-family: var(--display);
  font-size: clamp(2.15rem, 5.8vw, 3.3rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.019em;
  margin: 0 0 20px;
  max-width: 20ch;
  text-wrap: balance;
  hyphens: none;
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.45rem, 3.5vw, 1.85rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.012em;
  margin: 52px 0 16px;
  max-width: 34ch;
  text-wrap: balance;
}

h3 {
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  margin: 30px 0 10px;
}

p, ul, ol { max-width: 66ch; }
p { margin: 0 0 17px; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: 8px; }
strong { font-weight: 650; }

.lead {
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-2);
  max-width: 54ch;
  letter-spacing: -0.011em;
}

.num { font-variant-numeric: tabular-nums; }

/* ================= the record: the site's core device ================= */

.record {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  /* a hard offset, the way a printed form sits on the page — not a soft blur */
  box-shadow: 5px 5px 0 rgba(32, 20, 54, 0.11);
  margin: 30px 0 34px;
  max-width: 42rem;
}

.record-head {
  background: var(--ink);
  color: #fff;
  font-family: var(--display);
  padding: 10px 18px;
  font-size: 0.78rem;
  font-weight: 600;
  /* uppercase is confined to this band, where it is the document's own
     voice — never used as an eyebrow above a heading */
  text-transform: uppercase;
  letter-spacing: 0.11em;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.record-head .ref { color: #B99FC8; font-weight: 500; }

.record-row {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  gap: 4px 18px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.97rem;
}
.record-row:last-child { border-bottom: 0; }
.record-row dt, .record-row .k {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.88rem;
  margin: 0;
}
.record-row dd, .record-row .v {
  margin: 0;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.record-row.is-key { background: var(--wash); }
.record-row.is-key .v { font-weight: 700; }

.record-foot {
  padding: 13px 18px;
  border-top: 1.5px solid var(--ink);
  background: var(--paper);
  font-size: 0.87rem;
  color: var(--muted);
}

dl.record-body { margin: 0; }

.record-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 15px 18px;
  border-bottom: 1.5px solid var(--ink);
  background: var(--due-wash);
}
.record-status .verdict {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--due);
}
.record-status .when {
  font-size: 0.95rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.record-status.is-valid   { background: var(--bract-wash); }
.record-status.is-valid .verdict { color: var(--bract); }

/* ================= status chips ================= */

.chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1.5px solid currentColor;
  white-space: nowrap;
  vertical-align: 1px;
}
.chip-valid   { color: var(--bract);  background: var(--bract-wash); }
.chip-due     { color: var(--due);    background: var(--due-wash); }
.chip-expired { color: var(--expiry); background: var(--expiry-wash); }

/* ================= licence timeline ================= */

.timeline { margin: 30px 0 34px; max-width: 42rem; }
.timeline .record { margin: 0; }
.timeline-plot { padding: 20px 18px 10px; }
.timeline svg { display: block; width: 100%; height: auto; }
.timeline figcaption {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 10px;
  max-width: 60ch;
}

/* ================= document validity list ================= */

.docs {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  max-width: 42rem;
  border-top: 1px solid var(--rule);
}
.docs li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.docs .doc-name { font-weight: 550; }
.docs .doc-every {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.docs .doc-note {
  grid-column: 1 / -1;
  font-size: 0.86rem;
  color: var(--muted);
}

/* ================= notices ================= */

.notice {
  border-left: 4px solid var(--thistle);
  background: var(--wash);
  padding: 17px 20px;
  margin: 26px 0;
  max-width: 62rem;
}
.notice p { margin: 0; max-width: 62ch; }
.notice p + p { margin-top: 11px; }
.notice-warn { border-left-color: var(--expiry); background: var(--expiry-wash); }

.penalty {
  border: 1.5px solid var(--expiry);
  background: var(--surface);
  box-shadow: 5px 5px 0 rgba(168, 47, 28, 0.14);
  margin: 30px 0;
  max-width: 42rem;
}
.penalty-head {
  background: var(--expiry);
  color: #fff;
  font-family: var(--display);
  padding: 11px 20px;
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: -0.008em;
}
.penalty-body { padding: 18px 20px; }
.penalty-body p { margin: 0 0 13px; }
.penalty-body p:last-child { margin-bottom: 0; }

/* ================= buttons ================= */

.btn {
  display: inline-block;
  background: var(--thistle);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 24px;
  margin: 5px 9px 5px 0;
  border: 2px solid var(--thistle);
}
.btn:hover { background: var(--thistle-deep); border-color: var(--thistle-deep); color: #fff; }
.btn-secondary { background: transparent; color: var(--thistle-deep); border-color: var(--rule-firm); }
.btn-secondary:hover { background: var(--wash); color: var(--thistle-deep); border-color: var(--thistle); }

.actions {
  margin: 28px 0 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.actions .btn { margin: 0; }

.btn-tel {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  padding: 11px 24px;
  text-decoration: none;
}
.btn-tel:hover { background: var(--thistle-deep); border-color: var(--thistle-deep); color: #fff; }
.btn-tel .n {
  font-size: 1.16rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.btn-tel .l { font-size: 0.76rem; font-weight: 500; color: #C3B2D2; }

/* secondary drops to a plain link so the two CTAs stop competing */
.actions .quiet {
  font-size: 0.96rem;
  font-weight: 550;
  color: var(--thistle-deep);
}

/* ================= closing call to action ================= */

.cta {
  border-top: 3px solid var(--thistle);
  background: var(--surface);
  padding: 22px 24px 8px;
  margin: 44px 0 0;
  max-width: 42rem;
}
.cta-lead {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 4px;
  max-width: 34ch;
}

/* ================= tables ================= */

.scroll { overflow-x: auto; margin: 22px 0; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 26rem;
  font-size: 0.95rem;
  background: var(--surface);
}
caption {
  text-align: left;
  font-size: 0.9rem;
  color: var(--muted);
  padding-bottom: 8px;
}
th, td {
  text-align: left;
  padding: 11px 18px 11px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
thead th {
  /* sentence case, weight and colour do the work — not caps */
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--ink);
  background: var(--wash);
  border-bottom: 1.5px solid var(--ink);
}
tbody th { font-weight: 550; }
td { font-variant-numeric: tabular-nums; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 1.5px solid var(--rule-firm); }

/* ================= steps (a genuine sequence, so numbered) ================= */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 30px 0;
  max-width: 46rem;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0 18px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps li::before {
  content: counter(step);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--thistle);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.steps strong { display: block; margin-bottom: 3px; font-weight: 650; }
.steps p { margin: 0; font-size: 0.96rem; color: var(--ink-2); }

/* ================= council index ================= */

.council-list { list-style: none; padding: 0; max-width: 42rem; border-top: 1px solid var(--rule); }
.council-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding: 15px 0;
  margin: 0;
}
.council-list a { font-weight: 650; font-size: 1.06rem; text-decoration: none; }
.council-list a:hover { text-decoration: underline; }
.council-list .meta { font-size: 0.83rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ================= source line ================= */

.src {
  font-size: 0.86rem;
  color: var(--muted);
  border-left: 3px solid var(--rule-firm);
  padding-left: 15px;
  max-width: 58ch;
}

/* ================= unconfirmed values ================= */

mark.todo {
  background: #FBF0DC;
  color: #8A5A12;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border: 1px dashed #C79A3E;
  white-space: nowrap;
}

/* ================= forms ================= */

form { max-width: 34rem; background: var(--surface); border: 1.5px solid var(--ink);
       box-shadow: 5px 5px 0 rgba(32, 20, 54, 0.11); }
form > * { padding-inline: 20px; }
.form-head {
  background: var(--ink); color: #fff; padding: 10px 20px;
  font-family: var(--display);
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.11em;
}
.field { padding-block: 14px 0; }
form > .field:last-of-type { padding-bottom: 4px; }
label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.92rem; }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.84rem; }
input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--rule-firm);
  background: var(--paper);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--thistle); background: #fff; }
.form-actions { padding-block: 18px 20px; }
button {
  font: inherit;
  font-weight: 650;
  background: var(--thistle);
  color: #fff;
  border: 2px solid var(--thistle);
  padding: 13px 26px;
  cursor: pointer;
}
button:hover { background: var(--thistle-deep); border-color: var(--thistle-deep); }
.form-actions .hint { margin-top: 12px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= footer ================= */

.site-foot {
  background: var(--ink);
  color: #BFB2CE;
  margin-top: 72px;
  padding-block: 44px 34px;
  font-size: 0.92rem;
}
.site-foot a { color: #DCC9E8; }
.site-foot .foot-head { font-size: 0.9rem; font-weight: 650; margin: 0 0 11px; color: #fff; max-width: none; }
.site-foot p { margin: 0 0 12px; max-width: 38ch; }
.site-foot .tel { color: #fff; font-size: 1.14rem; }
.site-foot .hours { color: #9788A6; }
.foot-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.foot-brand svg { width: 34px; height: 34px; color: var(--thistle-lift); flex: none; }
.foot-brand span { font-family: var(--display); font-weight: 600; color: #fff; font-size: 1.22rem; letter-spacing: -0.012em; }
.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 30px;
  padding-bottom: 28px;
  border-bottom: 1px solid #392B4C;
}
ul.plain { list-style: none; padding: 0; }
.foot-legal { font-size: 0.85rem; color: #9788A6; }
.foot-note { font-size: 0.82rem; color: #9788A6; max-width: 76ch; margin-top: 20px; }

/* ================= preview banner ================= */

.preview-banner {
  background: #8A5A12;
  color: #FBF0DC;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 11px 20px;
  text-align: center;
}
.preview-banner strong { color: #FFE9A8; }

/* ================= responsive ================= */

@media (max-width: 46rem) {
  .record-row { grid-template-columns: 1fr; gap: 2px; }
  .record-row dt, .record-row .k { font-size: 0.82rem; }
}

@media (max-width: 34rem) {
  body { font-size: 16.5px; }
  .head-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .head-call { text-align: left; }
  .btn { display: block; text-align: center; margin-right: 0; }
  /* .btn-tel is also a .btn, so the rule above would flatten its two stacked
     lines onto one. Keep it flex and let it fill the width. */
  .btn-tel { display: flex; align-items: center; }
  .actions { display: block; }
  .actions .btn { margin-bottom: 10px; }
  .steps li { grid-template-columns: 1.9rem 1fr; gap: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}