/* Attic Republic Strategies
   Layout: asymmetric editorial grid, left-aligned type, warm sand ground with one dark band
   on the home page. The 53 degree slope of the "A" in the logo is the recurring shape.
   Colours come from the warm office background: sand wall, charcoal cabinet, olive and brass
   artwork. The violet-to-magenta gradient of the logo is used sparingly.

   TYPEFACE
   The brand typeface is Gotham (or Proxima Nova). Both are commercial fonts, so the files are
   not included. Poppins (open licence, self-hosted, see assets/fonts) stands in for them.
   To switch: put your licensed web font files in assets/fonts/ and uncomment the @font-face
   block in fonts.css. The stack below already lists Gotham and Proxima Nova first. */

:root {
  --sand-50: #f6f0e6;
  --sand-100: #eee4d5;
  --sand-200: #e0d1bb;
  --sand-300: #cdb898;
  --ink: #2a211b;
  --ink-2: #5a4a3d;
  --ink-3: #73614f;
  --night: #241f17;
  --night-2: #2f281e;
  --on-night: #efe6d8;
  --on-night-2: #c2b4a0;
  --olive: #3b3622;
  --brass: #8f6224;
  --brass-soft: #c9a063;
  --amber: #d9a04a;
  --magenta: #d1087f;
  --violet: #320a8b;

  --f-display: "Gotham", "Proxima Nova", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: var(--f-display);

  --maxw: 1200px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* the skip link jumps to the main content and stops below the sticky header, not under it */
main { scroll-margin-top: calc(4.75rem + env(safe-area-inset-top, 0px)); }
body {
  margin: 0;
  background: var(--sand-50);
  color: var(--ink);
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* phones with a notch or status bar: the page starts below it (the preview skeleton does this
     itself for the home page, which sets --safe-top to 0px) */
  padding-top: var(--safe-top, env(safe-area-inset-top, 0px));
}
/* paints the status-bar area so scrolling text never shows through above the sticky header */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 19; background: var(--sand-50); pointer-events: none;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html:not(.js) .js-only { display: none; }
.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--sand-50); padding: .75rem 1rem; z-index: 50;
  font-family: var(--f-display);
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- type ---------- */
.label {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}
h1 {
  font-weight: 700;
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}
h2 {
  font-weight: 700;
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}
h3 {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.lede { font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.6; max-width: 42ch; }
.measure { max-width: 60ch; }
.muted { color: var(--ink-2); }
.rule-grad {
  display: block; width: 2.75rem; height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--magenta));
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--sand-50); border-bottom: 1px solid var(--sand-200);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; }
.brand { display: block; line-height: 0; }
.brand svg { height: 2.5rem; width: auto; }
.brand .markpath { fill: url(#arGrad); }
.brand .word { fill: var(--ink); }

.nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.nav a {
  font-family: var(--f-display); font-weight: 500; font-size: .875rem;
  text-decoration: none; padding: .35rem 0;
  border-bottom: 2px solid transparent; transition: border-color .15s ease;
}
.nav a:hover { border-color: var(--sand-300); }
.nav a[aria-current="page"] { border-color: var(--magenta); }
.nav a.nav-cta {
  background: var(--ink); color: var(--sand-50);
  padding: .6rem 1.1rem; border: 0; border-radius: 2px; font-weight: 500;
}
.nav a.nav-cta:hover { background: var(--olive); }
.nav a.nav-cta[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--magenta); }

.nav-toggle {
  display: none; font-family: var(--f-display); font-weight: 500; font-size: .85rem;
  background: none; border: 1px solid var(--sand-300); border-radius: 2px;
  padding: .55rem .9rem; color: var(--ink); cursor: pointer;
}
@media (max-width: 1020px) {
  .brand svg { height: 2.2rem; }
  .js .nav-toggle { display: inline-block; }
  .js .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--sand-50); border-bottom: 1px solid var(--sand-200);
    padding: 1rem max(var(--gutter), env(safe-area-inset-left, 0px)) 1.5rem;
  }
  .js .nav.open { display: block; }
  .js .nav ul { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .js .nav a { font-size: 1.05rem; }
  .site-header .wrap { position: relative; }
}

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--f-display); font-weight: 500; font-size: .95rem;
  padding: .95rem 1.5rem; background: var(--ink); color: var(--sand-50);
  border: 0; border-radius: 2px; cursor: pointer; text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.btn:hover { background: var(--olive); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05rem; height: 1.05rem; transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--sand-50); }
.btn-line:hover svg { transform: translate(2px, -2px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-display); font-weight: 500; font-size: .95rem;
  text-decoration: none; border-bottom: 2px solid var(--sand-300); padding-bottom: .15rem;
  transition: border-color .2s ease;
}
.link-arrow:hover { border-color: var(--magenta); }
.link-arrow svg { width: 1rem; height: 1rem; }
.link-arrow.back svg { transform: scaleX(-1); }

/* ---------- sections ---------- */
.section { padding-block: var(--section); }
.section.tight-top { padding-top: 0; }
.band-sand { background: var(--sand-100); }
.band-night { background: var(--night); color: var(--on-night); }

/* hero */
.hero { padding-block: clamp(2.5rem, 6vw, 5.5rem) var(--section); }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.hero-copy { display: grid; gap: 1.75rem; justify-items: start; }
.hero-copy h1 { max-width: 13ch; }
.hero-copy .lede { max-width: 38ch; }

.art-frame { justify-self: end; width: 100%; max-width: 440px; }
.art-frame > svg { width: 100%; height: auto; box-shadow: 0 30px 50px -28px rgba(42, 33, 27, .45); }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .art-frame { justify-self: start; max-width: 360px; }
}

/* animated artwork: slats slide along the 53 degree slope, then settle */
@keyframes assemble {
  0%, 26% { transform: translate(0, 0); }
  44%, 52% { transform: translate(var(--tx), var(--ty)); }
  70%, 100% { transform: translate(0, 0); }
}
@keyframes sweep {
  0%, 8% { transform: translateX(-420px); }
  46%, 100% { transform: translateX(760px); }
}
.art .s { animation: assemble 22s cubic-bezier(.65, 0, .35, 1) var(--d, 0s) infinite; }
.art .sweep { animation: sweep 14s cubic-bezier(.45, 0, .25, 1) 2s infinite both; }
.art .par {
  transform: translate(calc(var(--px, 0) * var(--k, 1) * 1px), calc(var(--py, 0) * var(--k, 1) * 1px));
  transition: transform .6s ease-out;
}

/* services artwork: a pulse runs along the thread and wakes each node */
@keyframes travel { 0%, 3% { transform: translateX(0); opacity: 0; } 5%, 72% { opacity: 1; } 75%, 100% { transform: translateX(var(--run)); opacity: 0; } }
@keyframes wake {
  0%, 14%, 100% { fill: #f6e7c8; transform: scale(1); }
  5% { fill: #d9a04a; transform: scale(1.3); }
}
.art .pulse { animation: travel 9s linear infinite; }
.art .node { animation: wake 9s ease-out var(--nd, 0s) infinite; }

/* attic scene */
@keyframes sun { 0%, 100% { transform: translate(-22px, -29px); } 50% { transform: translate(26px, 34px); } }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }
.scene .sun { animation: sun 20s ease-in-out infinite; }
.scene .glow { animation: glow 6s ease-in-out infinite; }

/* two-column statements */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); }
.pair > div { display: grid; gap: 1.25rem; align-content: start; }
.pair .rule-grad { margin-bottom: .5rem; }
@media (max-width: 760px) { .pair { grid-template-columns: minmax(0, 1fr); } }

/* why the attic */
.attic { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.attic figure { margin: 0; }
.attic svg { width: 100%; height: auto; border-radius: 2px; }
.attic-copy { display: grid; gap: 1.5rem; }
.attic-copy h2 { color: var(--on-night); }
.attic-copy p { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.65; color: var(--on-night); max-width: 40ch; }
@media (max-width: 820px) {
  .attic { grid-template-columns: minmax(0, 1fr); }
  .attic figure { max-width: 360px; }
}

/* closing call to action (Services and Who we work with only) */
.closing { display: grid; gap: 2rem; justify-items: start; }
.closing p {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.2; letter-spacing: -.025em;
  max-width: 24ch; text-wrap: balance;
}

/* ---------- inner pages ---------- */
.page-head { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem); }
.page-head .wrap { display: grid; gap: 1.75rem; justify-items: start; }
.page-head .lede { max-width: 46ch; }
/* intro text that runs the full width of the page, like the sections below it */
.page-head .wide-lede .lede { max-width: none; text-wrap: pretty; }
/* head with artwork on the right (Our services) */
.page-head .wrap.head-split {
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: center; justify-items: stretch;
}
.head-copy { display: grid; gap: 1.75rem; justify-items: start; }
@media (max-width: 900px) {
  .page-head .wrap.head-split { grid-template-columns: minmax(0, 1fr); }
  .head-art { justify-self: start; max-width: 360px; }
}

.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.about-text { display: grid; gap: 1.6rem; }
.about-text p { max-width: 62ch; }
.about .art-frame { justify-self: end; position: sticky; top: 6.5rem; }
.about-side { display: grid; gap: 1.25rem; justify-items: start; align-content: start; }
.about-side .portrait { width: 100%; }
.about-link { margin: 0; }
.portrait { margin: 0; aspect-ratio: 4 / 5; background: var(--sand-200); box-shadow: 0 30px 50px -28px rgba(42, 33, 27, .45); }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 900px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .about .art-frame { justify-self: start; position: static; max-width: 320px; }
}

.service {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--sand-300);
}
.service-head { display: grid; gap: .75rem; align-content: start; }
.num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1; letter-spacing: -.04em;
  color: var(--brass-soft); font-variant-numeric: lining-nums tabular-nums;
}
.service-body { display: grid; gap: 1.75rem; align-content: start; }
.points { columns: 2; column-gap: 2.5rem; }
.points li {
  break-inside: avoid; padding: .7rem 0 .7rem 1.6rem;
  border-top: 1px solid var(--sand-200); position: relative;
  line-height: 1.5; font-size: .98rem;
}
.points li::before {
  content: ""; position: absolute; left: 0; top: 1.15rem; width: .8rem; height: .55rem;
  background: var(--brass); clip-path: polygon(0 100%, 55% 0, 100% 0, 45% 100%);
}
@media (max-width: 860px) {
  .service { grid-template-columns: minmax(0, 1fr); }
  .service-head { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 1.25rem; }
}
@media (max-width: 560px) { .points { columns: 1; } }

/* who we work with */
.sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sector {
  display: grid; gap: 1.25rem; align-content: start;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem); border-left: 1px solid var(--sand-300);
}
.sector:first-child { padding-left: 0; border-left: 0; }
.sector:last-child { padding-right: 0; }
.sector .glyph { width: min(100%, 10rem); height: auto; margin-bottom: .5rem; }
.sector p { font-size: .98rem; }
@media (max-width: 980px) {
  .sectors { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .sector {
    padding: 2.5rem 0 0; border-left: 0; border-top: 1px solid var(--sand-300);
    grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem 2rem;
  }
  .sector:first-child { padding-top: 0; border-top: 0; }
  .sector .glyph { grid-row: 1 / span 2; width: 8rem; margin: 0; }
}
@media (max-width: 560px) {
  .sector { grid-template-columns: minmax(0, 1fr); }
  .sector .glyph { grid-row: auto; width: 9rem; }
}

/* glyph animations */
@keyframes dot {
  0%, 22%, 100% { fill: #3b3622; transform: scale(1); }
  7% { fill: #d1087f; transform: scale(2); }
  14% { fill: #b98a45; transform: scale(1.35); }
}
@keyframes ripple { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(4.6); opacity: 0; } }
.glyph .dot { transform-box: fill-box; transform-origin: center; animation: dot 5.4s ease-in-out calc(var(--i) * .2s) infinite; }
.glyph .ripple { transform-box: fill-box; transform-origin: center; animation: ripple 5.4s ease-out infinite; }

@keyframes resolve {
  0%, 10% { transform: translate(var(--vx), var(--vy)) rotate(var(--r)); fill: var(--c); }
  34%, 52% { transform: translate(0, 0) rotate(0deg); fill: var(--c); }
  64%, 78% { transform: scale(1.66); fill: #3b3622; }
  100% { transform: translate(var(--vx), var(--vy)) rotate(var(--r)); fill: var(--c); }
}
.glyph .sq { transform-box: fill-box; transform-origin: center; animation: resolve 10s cubic-bezier(.65, 0, .35, 1) calc(var(--i) * .06s) infinite; }

@keyframes gate-top { 0%, 34% { transform: translate(0, 0); } 48%, 86% { transform: translate(20px, -27px); } 100% { transform: translate(0, 0); } }
@keyframes gate-bot { 0%, 34% { transform: translate(0, 0); } 48%, 86% { transform: translate(-20px, 27px); } 100% { transform: translate(0, 0); } }
@keyframes pass {
  0% { transform: translateX(0); opacity: 0; fill: #3b3622; }
  5% { opacity: 1; }
  30%, 50% { transform: translateX(var(--stop)); fill: #3b3622; }
  62% { fill: #b98a45; }
  78% { transform: translateX(72px); opacity: 1; fill: #b98a45; }
  88%, 100% { transform: translateX(72px); opacity: 0; fill: #b98a45; }
}
@keyframes arrive { 0%, 74%, 100% { fill: #3b3622; } 82%, 90% { fill: #d1087f; } }
.glyph .gt { animation: gate-top 8s cubic-bezier(.65, 0, .35, 1) infinite; }
.glyph .gb { animation: gate-bot 8s cubic-bezier(.65, 0, .35, 1) infinite; }
.glyph .pd { animation: pass 8s cubic-bezier(.45, 0, .25, 1) var(--w, 0s) infinite; }
.glyph .mk { animation: arrive 8s ease-in-out infinite; }

/* articles */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem clamp(1.5rem, 3vw, 2.5rem); }
.card { display: grid; gap: 1rem; align-content: start; text-decoration: none; }
.card .thumb { overflow: hidden; background: var(--sand-200); aspect-ratio: 4 / 3; }
.card .thumb svg, .card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .thumb svg, .card:hover .thumb img { transform: scale(1.04); }
.card .meta { font-family: var(--f-display); font-weight: 500; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.card h2 { font-size: 1.25rem; line-height: 1.3; }
.card:hover h2 { text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 3px; text-underline-offset: .25em; }
.card p { font-size: .95rem; color: var(--ink-2); line-height: 1.6; }
.card .more { font-family: var(--f-display); font-weight: 500; font-size: .9rem; display: inline-flex; gap: .5rem; align-items: center; }
.card .more svg { width: 1rem; height: 1rem; }
.soon { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 900px; }
.soon .thumb { overflow: hidden; background: var(--sand-200); aspect-ratio: 4 / 3; box-shadow: 0 30px 50px -28px rgba(42, 33, 27, .45); }
.soon .thumb svg { width: 100%; height: 100%; object-fit: cover; }
.soon-text { display: grid; gap: .9rem; }
.soon .meta { font-family: var(--f-display); font-weight: 500; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.soon-msg { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; letter-spacing: -.02em; }
.soon-note { color: var(--ink-2); max-width: 36ch; }
@media (max-width: 640px) { .soon { grid-template-columns: minmax(0, 1fr); } .soon .thumb { max-width: 360px; } }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards { grid-template-columns: minmax(0, 1fr); } }

.article-head { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.article-head .wrap { display: grid; gap: 1.5rem; justify-items: start; }
.article-head h1 { max-width: 20ch; font-size: clamp(2rem, 4.4vw, 3.3rem); }

/* running text (articles, privacy policy) */
.prose { display: grid; gap: 1.25rem; max-width: 66ch; }
.prose h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); margin-top: 1.75rem; }
.prose h3 { margin-top: .75rem; }
.prose ul, .prose ol { padding-left: 1.4rem; display: grid; gap: .5rem; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.5rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: .8rem; height: .5rem; background: var(--brass); clip-path: polygon(0 100%, 55% 0, 100% 0, 45% 100%); }
.prose a { text-decoration-color: var(--magenta); text-underline-offset: .2em; }
.prose blockquote { margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--sand-300); color: var(--ink-2); }
.prose img { width: 100%; height: auto; }
.prose .stamp { font-size: .9rem; color: var(--ink-3); }
.prose dl { margin: 0; display: grid; gap: .9rem; }
.prose dt { font-weight: 700; }
.prose dd { margin: 0; }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: .45rem; }
.field label { font-family: var(--f-display); font-weight: 500; font-size: .85rem; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fbf8f2; border: 1px solid var(--sand-300); border-radius: 2px; padding: .85rem 1rem;
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--magenta); outline-offset: 1px; border-color: var(--ink); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.req-note { font-family: var(--f-display); font-size: .85rem; font-weight: 500; color: var(--ink-2); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #9b1c1c; box-shadow: inset 0 0 0 1px #9b1c1c; }
.consent { font-size: .9rem; color: var(--ink-2); max-width: 64ch; line-height: 1.6; }
.consent a { text-decoration-color: var(--magenta); text-underline-offset: .2em; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.status { font-family: var(--f-display); font-size: .9rem; font-weight: 500; min-height: 1.5em; }
.status.ok { color: #2f5d2a; }
.status.err { color: #9b1c1c; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.direct { display: grid; gap: 1.5rem; padding-top: .5rem; }
.direct dl { margin: 0; display: grid; gap: 1.5rem; }
.direct dt { font-family: var(--f-display); font-weight: 500; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin-bottom: .25rem; }
.direct dd { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.direct a:not(.btn) { text-decoration-color: var(--magenta); text-underline-offset: .22em; text-decoration-thickness: 2px; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .form-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.site-footer { background: var(--night); color: var(--on-night); padding-block: clamp(3.5rem, 6vw, 4.5rem) calc(2.25rem + var(--safe-bottom, env(safe-area-inset-bottom, 0px))); }
/* Logo on the left. Sitemap (two columns) and © line are right-aligned, so the last letter of
   every line ends where the divider line ends. */
.foot {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "brand nav" "rule rule" "legal legal";
  column-gap: clamp(2rem, 6vw, 5rem); row-gap: 0; align-items: start;
}
.foot-brand { grid-area: brand; }
.site-footer .brand svg { height: 3rem; }
.site-footer .brand .word { fill: var(--on-night); }
.site-footer .brand .markpath { fill: var(--on-night); }
.foot-nav { grid-area: nav; justify-self: end; }
.foot-nav ul {
  display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: max-content;
  column-gap: clamp(2.5rem, 6vw, 4.5rem); row-gap: .7rem; text-align: right; justify-content: end;
}
.foot-nav a { font-family: var(--f-display); font-weight: 500; font-size: .9rem; text-decoration: none; color: var(--on-night); }
.foot-nav a:hover, .foot-legal a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: .25em; }
.foot-rule { grid-area: rule; border: 0; border-top: 1px solid rgba(239, 230, 216, .18); margin: clamp(2.25rem, 4vw, 3rem) 0 1.5rem; width: 100%; }
.foot-legal { grid-area: legal; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1.75rem; font-size: .85rem; color: var(--on-night-2); text-align: right; }
.foot-legal a { color: var(--on-night-2); }
@media (max-width: 640px) {
  .foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "nav" "rule" "legal"; }
  .foot-nav { justify-self: start; margin-top: 2rem; }
  .foot-nav ul { text-align: left; justify-content: start; column-gap: 3rem; }
  .foot-rule { margin-block: 2rem 1.5rem; }
  .foot-legal { justify-content: flex-start; text-align: left; gap: .4rem 1.5rem; }
  .foot-legal span { flex: 1 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .art .s, .art .sweep, .scene .sun, .scene .glow,
  .glyph .dot, .glyph .ripple, .glyph .sq, .glyph .gt, .glyph .gb, .glyph .pd, .glyph .mk,
  .art .pulse, .art .node { animation: none; }
  .glyph .ripple, .art .sweep, .art .pulse { opacity: 0; }
  .glyph .gt { transform: translate(20px, -27px); }
  .glyph .gb { transform: translate(-20px, 27px); }
  .art .par { transition: none; transform: none; }
  * { transition: none !important; }
}