/* ==========================================================================
   Katachi NGA LLC
   01 Fonts   02 Tokens   03 Base   04 Type   05 Layout   06 Header
   07 Sunset band   08 Ridgeline   09 Components   10 Footer
   11 Responsive   12 Motion and print
   ========================================================================== */

/* -- 01  FONTS ------------------------------------------------------------ */

@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* -- 02  TOKENS ----------------------------------------------------------- */

:root {
  /* Brand */
  --k-accent:        #C8520A;   /* fills, rules, marks and display type of 24px or more */
  --k-accent-strong: #A44308;   /* orange for small text and links on light grounds */
  --k-accent-deep:   #803406;   /* link hover on light grounds */
  --k-accent-light:  #E8691F;   /* orange text on dark grounds */
  --k-paper:         #F5F0E8;
  --k-paper-dark:    #EDE7D7;
  --k-canvas:        #0C0C0C;
  --k-ink:           #1A1612;
  --k-bronze:        #B8924A;   /* hairlines and ornaments; text only on dark grounds */
  --k-bronze-text:   #765D2E;   /* small bronze labels on light grounds */
  --k-muted:         #6B6354;   /* captions and metadata on light grounds */
  --k-warm-light:    #F2EDE4;
  --k-warm-mid:      #E8E4DC;
  --k-on-dark:       #E8E4DC;
  --k-on-dark-muted: #A89F90;

  /* Status label colours, light grounds */
  --k-live:          #296E34;
  --k-dev:           #994C00;

  /* Atmosphere: artwork only, never text */
  --sm-sky-mid:      #0050B0;
  --sm-sky-bright:   #029BE9;
  --sm-sunset-amber: #FCC333;
  --sm-sunset-dusk:  #E4A37B;
  --sm-ridge-far:    #123870;
  --sm-valley:       #0A254D;

  /* Rules */
  --k-rule-heavy:    #9B8E78;
  --k-rule-soft:     #C9BEA8;

  /* Section colours; set per page or per band with data-section */
  --sec-dark:        #6B1E04;
  --sec-mid:         #C8520A;
  --sec-light:       #F5D4C0;
  --sec-text:        #A44308;

  /* Type */
  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo,
               Consolas, monospace;

  /* Measure and rhythm */
  --measure:   66ch;
  --gut:       clamp(1.25rem, 4vw, 3rem);
  --stack-m:   1.5rem;
  --stack-l:   3rem;
  --stack-xl:  clamp(3.5rem, 9vw, 7rem);
  --shell:     78rem;
}

[data-section="products"] { --sec-dark: #6B1E04; --sec-mid: #A83408; --sec-light: #F5D4C0; --sec-text: #A83408; }
[data-section="campus"]   { --sec-dark: #1E3A54; --sec-mid: #2A4A6B; --sec-light: #D8E8F0; --sec-text: #2A4A6B; }
[data-section="water"]    { --sec-dark: #4A3018; --sec-mid: #A87A38; --sec-light: #F5ECD8; --sec-text: #7A5A22; }
[data-section="about"]    { --sec-dark: #1A1612; --sec-mid: #8B7355; --sec-light: #E8E0D2; --sec-text: #6E5A3C; }
[data-section="home"],
[data-section="contact"]  { --sec-dark: #6B1E04; --sec-mid: #C8520A; --sec-light: #F5D4C0; --sec-text: #A44308; }


/* -- 03  BASE ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--k-paper);
  color: var(--k-ink);
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--k-rule-soft); margin: var(--stack-l) 0; }

::selection { background: var(--k-accent-strong); color: var(--k-paper); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--k-ink); color: var(--k-paper);
  padding: 0.75rem 1.25rem; font-family: var(--f-mono); font-size: 0.8125rem;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--k-accent-strong);
  outline-offset: 3px;
}
.band--ink :focus-visible,
.site-foot :focus-visible { outline-color: var(--k-accent-light); }


/* -- 04  TYPE ------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.t-display {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 6.2vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

.t-h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 24ch;
}

.t-lede {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.48;
  max-width: 48ch;
  color: var(--k-ink);
}
.t-lede p { margin: 0 0 1rem; }
.t-lede p:last-child { margin-bottom: 0; }

.t-body { max-width: var(--measure); }
.t-body p { margin: 0 0 1.15em; }
.t-body p:last-child { margin-bottom: 0; }

.t-eyebrow {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-muted);
  margin: 0 0 var(--stack-m);
  display: block;
}
.t-eyebrow--accent { color: var(--sec-text); }

.t-small { font-size: 0.9375rem; color: var(--k-muted); }

strong, b { font-weight: 600; }

:where(a) { color: var(--k-accent-strong); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:where(a:hover) { color: var(--k-accent-deep); }

.band--ink :where(a) { color: var(--k-accent-light); }
.band--ink :where(a:hover) { color: var(--k-warm-light); }


/* -- 05  LAYOUT ----------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gut);
}

.band { padding-block: var(--stack-xl); position: relative; }
.band--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.band--alt   { background: var(--k-paper-dark); }
.band--ink   { background: var(--k-canvas); color: var(--k-on-dark); }
.band--ink .t-display,
.band--ink .t-h2,
.band--ink .t-lede { color: var(--k-warm-light); }
.band--ink .t-eyebrow,
.band--ink .t-small { color: var(--k-on-dark-muted); }

/* Wide prose column beside a narrow rail of small labelled facts */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split__rail { position: sticky; top: 6.5rem; }

.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1.25rem, 2.4vw, 2rem); }

/* Spacing helpers; the site carries no inline styles */
.mt-1  { margin-top: 1rem; }
.mt-15 { margin-top: 1.5rem; }
.mt-2  { margin-top: 2rem; }
.mt-25 { margin-top: 2.5rem; }
.mt-3  { margin-top: 3rem; }
.center { text-align: center; }
.center .t-lede { margin-inline: auto; }
.measure-60 { max-width: 60ch; }
.measure-70 { max-width: 70ch; }
/* Keeps a short term such as K-12 on one line */
.nb { white-space: nowrap; }

.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2.5rem 0 0; }
.center .cta-row { justify-content: center; }
.cta-row--tight { margin-top: 2rem; }

.jump {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  margin: 2.5rem 0 0; padding: 0;
  font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase;
}
.jump span { color: var(--k-muted); }
.jump a { padding: 0.35rem 0; display: inline-block; }


/* -- 06  HEADER ----------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245, 240, 232, 0.94);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--k-rule-soft);
}

.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.25rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__text { display: block; }
.brand__word {
  font-family: var(--f-display);
  font-size: 1.5rem; font-weight: 500; letter-spacing: 0.02em;
  line-height: 1; color: var(--k-ink); display: block;
}
.brand__tag {
  font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--k-muted); display: block; margin-top: 0.28rem;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 1.9rem); }
.nav a {
  font-family: var(--f-sans);
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.005em;
  color: var(--k-ink); text-decoration: none;
  padding: 0.4rem 0; position: relative; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--k-accent);
  transform: scaleX(0); transform-origin: left; transition: transform 180ms ease;
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a:hover { color: var(--k-ink); }
.nav a[aria-current="page"] { color: var(--k-accent-strong); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--k-rule-heavy);
  color: var(--k-ink); font-family: var(--f-mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0 0.95rem; min-height: 2.75rem; cursor: pointer;
}


/* -- 07  SUNSET BAND ------------------------------------------------------ */
/* A three-pixel stripe only; never a large fill. */

.sunset-band {
  height: 3px; width: 100%;
  background: linear-gradient(90deg,
    var(--sm-valley)       0%,
    var(--sm-sky-mid)     18%,
    var(--sm-sky-bright)  36%,
    var(--sm-sunset-amber)62%,
    var(--sm-sunset-dusk) 82%,
    var(--sm-ridge-far)  100%);
  transform-origin: left;
}
.site-head .sunset-band { animation: band-draw 900ms cubic-bezier(.16,.84,.44,1) both; }

@keyframes band-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.rule-band { margin-block: var(--stack-l); }


/* -- 08  RIDGELINE -------------------------------------------------------- */
/* Backgrounds recede; content advances. */

.ground { position: relative; overflow: hidden; }
.ground > .shell { position: relative; z-index: 2; }

/* The banner's bottom padding is the ridge's room. The ridge is also capped from that padding, so its
   highest peak always stays clear of the last line of content however long the copy runs or narrow the
   screen is. 0.533 is the share of the artwork's height that shows (its highest peak sits at 196 of 420);
   1.25rem is the clear gap kept above that peak. Height is declared !important because the global img
   reset sets height:auto. */
:root { --hero-pad-b: clamp(9rem, 16vw, 12rem); }

img.ground__ridge {
  position: absolute; inset: auto 0 -1px 0; z-index: 1;
  width: 100%;
  height: min(58%, calc((var(--hero-pad-b) - 1.25rem) / 0.533)) !important;
  max-width: none;
  object-fit: fill;
  pointer-events: none; user-select: none;
  opacity: 0;
  animation: ground-in 1400ms ease-out 150ms both;
}
@keyframes ground-in { to { opacity: 1; } }

.band--hero { padding-block: clamp(4rem, 10vw, 8rem) var(--hero-pad-b); }
.band--hero .t-lede { margin-top: 2rem; }


/* -- 09  COMPONENTS ------------------------------------------------------- */

/* Status label: the words carry the meaning, never colour alone */
.flag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border: 1px solid currentColor;
  color: var(--k-muted);
  white-space: nowrap;
}
.flag::before { content: ""; width: 5px; height: 5px; background: currentColor; flex: none; }
.flag--dev  { color: var(--k-dev); }
.flag--live { color: var(--k-live); }

/* Card with a three-pixel coloured top edge */
.card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--k-ink);
  background: var(--k-paper);
  border: 1px solid var(--k-rule-soft);
  border-top: 3px solid var(--card-accent, var(--k-accent));
  padding: clamp(1.4rem, 2.6vw, 2rem);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
a.card:hover {
  color: var(--k-ink);
  transform: translateY(-3px);
  border-color: var(--k-rule-heavy);
  border-top-color: var(--card-accent, var(--k-accent));
  box-shadow: 0 12px 28px -20px rgba(26,22,18,0.55);
}
.card--campus   { --card-accent: #2A4A6B; --card-text: #2A4A6B; }
.card--products { --card-accent: #A83408; --card-text: #A83408; }
.card--design   { --card-accent: #C8520A; --card-text: #A44308; }
.card--ai       { --card-accent: #8B7355; --card-text: #6E5A3C; }

.card__idx {
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--card-text, var(--k-accent-strong));
  display: block; margin-bottom: 1rem;
}
.card__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.35rem, 2.1vw, 1.65rem); line-height: 1.15;
  margin: 0 0 0.65rem;
}
.card__body { font-size: 0.9375rem; line-height: 1.6; color: var(--k-muted); margin: 0; }
.card__flag { margin-top: 1.1rem; align-self: flex-start; }
.card__more {
  display: inline-block; margin-top: auto; padding-top: 1.15rem;
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--card-text, var(--k-accent-strong));
}
a.card:hover .card__more { text-decoration: underline; text-underline-offset: 0.25em; }

/* Entry: the workhorse block on section pages */
.entry {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3.4vw, 2.6rem);
  border-top: 1px solid var(--k-rule-soft);
}
.entry--first { border-top: 2px solid var(--sec-mid); }
.entry__meta { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.entry__name {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.15; margin: 0;
  color: var(--sec-dark);
}
.entry__kind {
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--k-muted);
}
.entry__body { max-width: 56ch; }
.entry__body p { margin: 0 0 0.9em; }
.entry__body p:last-child { margin-bottom: 0; }
.entry__body .t-small { margin-top: 1.1rem; }

/* Data list: the metadata rail */
.dl { margin: 0; font-family: var(--f-mono); font-size: 0.75rem; line-height: 1.5; }
.dl dt {
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--k-muted); margin-top: 1.1rem;
}
.dl dt:first-child { margin-top: 0; }
.dl dd { margin: 0.28rem 0 0; color: var(--k-ink); overflow-wrap: anywhere; }
.band--ink .dl dt { color: var(--k-on-dark-muted); }
.band--ink .dl dd { color: var(--k-warm-light); }

/* Principle block */
.principle { border-left: 2px solid var(--k-bronze); padding-left: clamp(1rem, 2vw, 1.6rem); }
.principle__n {
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--k-bronze-text); display: block; margin-bottom: 0.75rem;
}
.band--ink .principle__n { color: var(--k-bronze); }
.principle h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.35rem; line-height: 1.2; margin: 0 0 0.6rem; }
.principle p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--k-muted); }
.band--ink .principle p { color: var(--k-on-dark-muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem;
  font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--k-ink);
  background: var(--k-ink); color: var(--k-paper);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn:hover { background: var(--k-accent-strong); border-color: var(--k-accent-strong); color: var(--k-paper); }
.btn--ghost { background: transparent; color: var(--k-ink); }
.btn--ghost:hover { background: var(--k-ink); color: var(--k-paper); border-color: var(--k-ink); }
.band--ink .btn { background: var(--k-warm-light); border-color: var(--k-warm-light); color: var(--k-canvas); }
.band--ink .btn:hover { background: var(--k-accent-light); border-color: var(--k-accent-light); color: var(--k-canvas); }
.band--ink .btn--ghost { background: transparent; border-color: #5A5348; color: var(--k-warm-light); }
.band--ink .btn--ghost:hover { background: var(--k-warm-light); border-color: var(--k-warm-light); color: var(--k-canvas); }

/* Fact strip */
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px; background: var(--k-rule-soft);
  border: 1px solid var(--k-rule-soft);
  margin: 0;
}
.facts > div { background: var(--k-paper); padding: 1.5rem 1.25rem; }
.band--alt .facts > div { background: var(--k-paper-dark); }
.facts dt {
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--k-muted); margin: 0 0 0.55rem;
}
.facts dd { margin: 0; font-family: var(--f-display); font-size: 1.4rem; font-weight: 500; line-height: 1.15; }
.facts dd small { display: block; font-family: var(--f-sans); font-size: 0.8125rem; font-weight: 400; color: var(--k-muted); margin-top: 0.3rem; line-height: 1.5; }

/* Notice */
.notice {
  border: 1px solid var(--k-rule-soft);
  border-left: 3px solid var(--k-bronze);
  background: var(--k-warm-light);
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  font-size: 0.9375rem; line-height: 1.6;
}
.notice p { margin: 0 0 0.75em; }
.notice p:last-child { margin-bottom: 0; }
.notice__label {
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--k-bronze-text); display: block; margin-bottom: 0.6rem;
}
.notice__flag { margin: 0 0 0.5rem; }

/* Topic list on the contact page */
.topics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--k-rule-soft); max-width: 36rem; }
.topics li { border-bottom: 1px solid var(--k-rule-soft); }
.topics a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  min-height: 3.25rem; padding: 0.6rem 0.25rem;
  color: var(--k-ink); text-decoration: none;
}
.topics a::after { content: "\2192"; color: var(--k-accent-strong); flex: none; }
.topics a:hover { color: var(--k-accent-deep); background: var(--k-warm-light); }


/* -- 10  FOOTER ----------------------------------------------------------- */

.site-foot { background: var(--k-canvas); color: var(--k-on-dark-muted); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.site-foot a { color: var(--k-warm-mid); text-decoration: none; display: inline-block; padding-block: 0.3rem; }
.site-foot a:hover { color: var(--k-accent-light); text-decoration: underline; text-underline-offset: 0.2em; }
.site-foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3rem); }
.site-foot h2 {
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-on-dark-muted);
  margin: 0 0 1rem;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.site-foot__word { font-family: var(--f-display); font-size: 1.75rem; color: var(--k-warm-light); line-height: 1; margin: 0 0 0.9rem; }
.site-foot__note { margin: 0 0 1rem; font-size: 0.9375rem; max-width: 30ch; }
.site-foot__legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid #2A2620;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; justify-content: space-between;
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--k-on-dark-muted);
}


/* -- 11  RESPONSIVE ------------------------------------------------------- */

@media (max-width: 62rem) {
  .split { grid-template-columns: minmax(0,1fr); }
  .split__rail { position: static; }
  .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .site-foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 48rem) {
  .cols-2, .cols-3 { grid-template-columns: minmax(0,1fr); }
  .entry { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  .entry__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }

  /* Without scripting the links stay in view as a wrapped row */
  .site-head__inner { flex-wrap: wrap; position: relative; padding-block: 0.6rem; row-gap: 0.25rem; }
  .nav { flex-wrap: wrap; gap: 0 1.25rem; width: 100%; }
  .nav a { padding: 0.65rem 0; }

  /* With scripting the links fold behind a button */
  .js .nav-toggle { display: inline-flex; align-items: center; }
  .js .site-head__inner { flex-wrap: nowrap; padding-block: 0; row-gap: 0; }
  .js .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; width: auto;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0;
    background: var(--k-paper); border-bottom: 1px solid var(--k-rule-soft);
    padding: 0.5rem var(--gut) 1.25rem;
  }
  .js .nav[data-open="true"] { display: flex; }
  .js .nav a { padding: 0.85rem 0; border-top: 1px solid var(--k-rule-soft); font-size: 1rem; }
  .js .nav a::after { display: none; }
}

@media (max-width: 34rem) {
  .cols-4 { grid-template-columns: minmax(0,1fr); }
  .facts { grid-template-columns: minmax(0,1fr); }
  .site-foot__grid { grid-template-columns: minmax(0,1fr); }
}


/* -- 12  MOTION AND PRINT ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  img.ground__ridge { opacity: 1; }
}

@media print {
  .site-head, .site-foot, .nav-toggle, .ground__ridge, .jump { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { padding-block: 1.5rem; }
  .band--ink { background: #fff; color: #000; }
  a { color: #000; }
}