/* ==========================================================================
   Gotland Style — base, components, utilities
   Depends on tokens.css. Nothing here declares a raw colour: every value
   comes through a token so both themes resolve as complete sets.
   ========================================================================== */

/* --- fonts -------------------------------------------------------------- */
/* Subset to Latin + Swedish diacritics, ~15 kB each. See docs/TYPOGRAPHY.md. */
@font-face{font-family:Academico;font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/academico-regular.woff2") format("woff2")}
@font-face{font-family:Academico;font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/academico-bold.woff2") format("woff2")}
@font-face{font-family:Academico;font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/academico-italic.woff2") format("woff2")}
@font-face{font-family:Lato;font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/lato-light.woff2") format("woff2")}
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/lato-regular.woff2") format("woff2")}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/lato-bold.woff2") format("woff2")}
@font-face{font-family:Lato;font-style:normal;font-weight:900;font-display:swap;
  src:url("../fonts/lato-black.woff2") format("woff2")}

/* --- reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Academico,Georgia,"Times New Roman",serif;
  font-size:var(--step-0);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance;line-height:1.16}
p{margin:0 0 var(--gap-3)}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
ul,ol{margin:0}
a{color:inherit}
:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--guld);outline-offset:3px;border-radius:1px}
::selection{background:var(--blatt);color:var(--bg)}

/* paper grain — cheap, and the only decoration allowed to cover the page */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before{mix-blend-mode:screen}

/* --- layout ------------------------------------------------------------- */
.wrap{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.measure{max-width:var(--measure)}
.stack>*+*{margin-top:var(--gap-3)}
.section{padding-block:var(--gap-6);border-bottom:1px solid var(--hair)}
.section:last-of-type{border-bottom:0}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.75rem,4.5vw,4rem);align-items:center}
.split--wide-left{grid-template-columns:1.35fr .65fr}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,2rem)}
@media(max-width:54em){.split,.split--wide-left,.duo{grid-template-columns:1fr}}

/* --- type utilities ----------------------------------------------------- */
.sans{font-family:Lato,system-ui,-apple-system,sans-serif}
.label{font-family:Lato,system-ui,sans-serif;font-weight:700;font-size:.625rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--guld)}
.label--quiet{color:var(--fg-3)}
.lede{font-size:var(--step-1);color:var(--fg-2);max-width:54ch}
.num{font-variant-numeric:tabular-nums}
.pull{font-style:italic;font-size:var(--step-3);line-height:1.36;
  border-inline-start:2px solid var(--guld);padding-inline-start:1.6rem;margin:0 0 var(--gap-3)}
.prose p{max-width:var(--measure);color:var(--fg-2)}
.prose strong{color:var(--fg);font-weight:700}
.prose a{color:var(--blatt);text-underline-offset:.2em}

/* --- marks -------------------------------------------------------------- */
/* Five framings of one ram, generated by tools/build-marks.py. They are sized
   by height and never by width: the five have five aspect ratios, and what has
   to line up is the masthead's optical line, not the box. Inline the <svg>
   rather than linking it — an <img> cannot see the page's tokens, so a linked
   mark would sit at its Kalkvit fallback on a Tjära page.
   Floors, per mark, in docs/HERALDRY.md. */
.mark{display:block;width:auto;height:36px;flex:none}
.mark--sm{height:24px}
.mark--lg{height:clamp(88px,13vw,132px)}

/* --- masthead ----------------------------------------------------------- */
.mast{border-bottom:1px solid var(--hair)}
.mast__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;padding-block:1.25rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand__name{font-size:1.375rem;letter-spacing:.3em;text-transform:uppercase}
.nav{display:flex;flex-wrap:wrap;gap:0 1.375rem;font-family:Lato,sans-serif;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--fg-3);transition:color .15s}
.nav a:hover{color:var(--guld)}
.nav a[aria-current="page"]{color:var(--fg)}

/* --- theme toggle ------------------------------------------------------- */
.themetoggle{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  background:transparent;border:1px solid var(--hair-2);color:var(--fg-2);
  font:700 .625rem/1 Lato,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  padding:.5rem .75rem;transition:border-color .15s,color .15s}
.themetoggle:hover{border-color:var(--guld);color:var(--guld)}
.themetoggle__dot{width:9px;height:9px;border-radius:50%;background:var(--guld);
  box-shadow:inset 0 0 0 9px var(--guld);transition:box-shadow .2s}
[data-theme="dark"] .themetoggle__dot{box-shadow:inset 2.5px -2.5px 0 0 var(--guld);background:transparent}

/* --- hero --------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair)}
.hero__bg{position:absolute;inset:0;opacity:var(--hero-img)}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--bg) var(--hero-veil),transparent),var(--bg))}
.hero__in{position:relative;padding-block:clamp(4rem,15vh,10rem) clamp(2.75rem,8vh,5rem)}
.hero h1{font-size:var(--step-5);line-height:1.02;letter-spacing:-.02em;max-width:16ch}
.hero h1 em{font-style:italic;color:var(--guld)}

/* --- section heads ------------------------------------------------------ */
.sec-top{display:flex;align-items:baseline;gap:1.125rem;margin-bottom:var(--gap-5)}
.sec-top h2{font-size:var(--step-4)}
.sec-top__n{margin-inline-start:auto;font-family:Lato,sans-serif;font-weight:700;
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}

/* --- plate (framed line art) -------------------------------------------- */
/* Etchings need a paper panel under them or they wash out. Photographs do not. */
.plate{background:var(--bg-2);padding:1rem;
  box-shadow:0 1px 0 var(--plate-shadow),0 14px 34px -22px var(--plate-shadow)}
.plate img{width:100%}
.etch{filter:var(--etch-filter);mix-blend-mode:var(--etch-blend)}
.photo{filter:var(--photo-filter)}
figcaption{font-family:Lato,sans-serif;font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3);margin-top:.75rem}
figcaption b{color:var(--fg-2);font-weight:700}
.figrow{display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}

/* dry-stone-wall divider, cut from the source plate */
.rule-wall{height:26px;margin-block:var(--gap-5) 0;
  background:url("../img/detalj-stenmur.jpg") center/auto 100% repeat-x;
  opacity:.5;mix-blend-mode:multiply}
[data-theme="dark"] .rule-wall{mix-blend-mode:screen;filter:invert(1);opacity:.32}

/* --- tiles (parish grid) ------------------------------------------------ */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));
  gap:1px;background:var(--hair)}
.tiles a{background:var(--bg-2);padding:1rem 1.0625rem 1.125rem;
  text-decoration:none;transition:background .15s}
.tiles a:hover{background:var(--bg-3)}
.tiles__nm{font-size:1.25rem}
.tiles__mt{font-family:Lato,sans-serif;font-size:.625rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-3);margin-top:.375rem}
.tiles__mt b{color:var(--guld);font-weight:700}

/* --- rows (updates, listings) ------------------------------------------- */
.rows{border-top:1px solid var(--hair)}
.rows a{display:grid;grid-template-columns:6rem 1fr auto;gap:1.25rem;align-items:baseline;
  padding-block:.9375rem;border-bottom:1px solid var(--hair);
  text-decoration:none;transition:padding-inline-start .18s}
.rows a:hover{padding-inline-start:.75rem}
.rows a:hover .rows__t{color:var(--guld)}
.rows time{font-family:Lato,sans-serif;font-size:.6875rem;letter-spacing:.09em;
  color:var(--fg-3);font-variant-numeric:tabular-nums}
.rows__t{font-size:1.125rem}
.rows__k{font-family:Lato,sans-serif;font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3)}
@media(max-width:40em){.rows a{grid-template-columns:1fr;gap:.25rem}}

/* --- data table --------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--hair-2)}
table{width:100%;border-collapse:collapse;font-family:Lato,sans-serif;font-size:.875rem}
th{text-align:start;font-size:.625rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-3);font-weight:700;padding:.6875rem .875rem;background:var(--bg-3);
  border-bottom:1px solid var(--hair-2);white-space:nowrap}
td{padding:.6875rem .875rem;border-bottom:1px solid var(--hair);vertical-align:baseline}
tbody tr:hover{background:var(--bg-2)}
tbody tr:last-child td{border-bottom:0}
.cell-nm{font-family:Academico,serif;font-size:1.0625rem;white-space:nowrap}
.cell-nm a{text-decoration:none}
.cell-nm a:hover{color:var(--blatt)}
.cell-n{font-variant-numeric:tabular-nums;white-space:nowrap}
.dim{color:var(--fg-3)}

/* --- chips (archive status) --------------------------------------------- */
.chip{display:inline-block;font-family:Lato,sans-serif;font-size:.625rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:.1875rem .4375rem;white-space:nowrap}
.chip--ok{background:var(--ok-soft);color:var(--ok)}
.chip--warn{background:var(--warn-soft);color:var(--warn)}
.chip--idle{background:var(--idle-soft);color:var(--idle)}

/* --- stat strip --------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.25rem,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair)}
.stat{background:var(--bg-2);padding:.875rem 1rem}
.stat__v{font-size:1.875rem;line-height:1.05;font-variant-numeric:tabular-nums}
.stat__k{font-family:Lato,sans-serif;font-size:.625rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3);margin-top:.3125rem;font-weight:700}

/* --- A–Ö register ------------------------------------------------------- */
.az{display:flex;flex-wrap:wrap;gap:.3125rem}
.az a{font-family:Lato,sans-serif;font-weight:700;font-size:.8125rem;
  width:2.125rem;height:2.125rem;display:grid;place-items:center;text-decoration:none;
  color:var(--fg-2);border:1px solid var(--hair-2);background:var(--bg-2)}
.az a:hover{background:var(--blatt);border-color:var(--blatt);color:var(--bg)}
.az a[aria-disabled="true"]{opacity:.35;pointer-events:none}

/* --- definition list (facts) -------------------------------------------- */
.facts{border-top:2px solid var(--hair-2);padding-top:.875rem}
.facts dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5625rem 1rem;
  font-family:Lato,sans-serif;font-size:.84375rem}
.facts dt{color:var(--fg-3);letter-spacing:.05em;font-size:.6875rem;
  text-transform:uppercase;font-weight:700;padding-top:.1875rem}
.facts dd{margin:0;color:var(--fg)}

/* --- arms panel --------------------------------------------------------- */
.arms{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.25rem);
  align-items:center;background:var(--bg-2);
  border-inline-start:3px solid var(--baner);padding:1.5rem 1.75rem}
.arms__bl{font-style:italic;font-size:var(--step-2);line-height:1.44;max-width:46ch;margin:0}
.arms__src{font-family:Lato,sans-serif;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);margin-top:1rem}
@media(max-width:38em){.arms{grid-template-columns:1fr}}

/* --- callout ------------------------------------------------------------ */
.note{background:var(--guld-soft);border-inline-start:3px solid var(--guld);
  padding:1.125rem 1.375rem;font-family:Lato,sans-serif;font-size:.875rem;color:var(--fg-2)}
.note b{color:var(--fg)}
.note--blue{background:var(--blatt-soft);border-inline-start-color:var(--blatt)}

/* --- footer ------------------------------------------------------------- */
.foot{padding-block:var(--gap-4) 4.5rem;display:flex;flex-wrap:wrap;gap:1.875rem;
  justify-content:space-between;align-items:flex-end}
.foot p{margin:0;max-width:46ch;font-family:Lato,sans-serif;font-size:.78125rem;
  color:var(--fg-3);line-height:1.75}

/* --- skip link ---------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--bg);
  color:var(--fg);padding:.75rem 1rem;font-family:Lato,sans-serif;font-size:.8125rem;
  border:1px solid var(--guld)}
.skip:focus{left:.5rem;top:.5rem}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}