/* ==========================================================================
   DAC 2027 - Deaf Academy Conference, Vilnius
   Design system. Shared by the static prototype and the WordPress theme.

   House rules, enforced throughout:
     - square corners, no soft shadows; depth comes from overlapping colour
     - no gradients as decoration
     - gold text never sits on white or bone (2.2:1)
     - every focus ring is visible and contrasts with its own background
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand, sampled from the supplied logo artwork. */
  --dac-green: #274a2a;
  --dac-green-deep: #0e1a11;
  --dac-gold: #d8a828;
  --dac-bone: #f6f3ea;
  --dac-white: #ffffff;

  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 76rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);

  --text-meta: 0.9375rem;
  --text-base: 1.125rem;              /* 18px, per the accessibility brief */
  --text-lead: clamp(1.25rem, 1.07rem + 0.6vw, 1.5rem);

  --display-xl: clamp(2.75rem, 12.5vw, 9rem);
  --display-lg: clamp(2.25rem, 1.3rem + 4vw, 4.25rem);
  --display-md: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  --display-sm: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);

  --rule: 2px;
  --measure: 62ch;                    /* keeps lines under ~72 characters */

  /* Per-surface theming. Every panel re-declares these three. */
  --surface: var(--dac-bone);
  --ink: var(--dac-green);
  --ink-quiet: #4d6350;
  --accent: var(--dac-green);
  --focus: var(--dac-green-deep);

  /* Fine grain so the flat colours do not read as sterile. */
  --noise: 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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--dac-bone);
  color: var(--dac-green);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

/* Leading has to clear Lithuanian diacritics in both directions. Measured in
   Oswald at 1em: plain caps rise 0.81, a caron rises 1.06, an ogonek drops 0.26.
   So an ogonek over the next line's caps needs 1.07 to stay clear, and over a
   caron it needs 1.32. 1.12 clears the real headings with margin; anything near
   0.9 looks fine in English and collides the moment the page is translated. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  font-size: var(--display-xl);
  letter-spacing: -0.005em;
}

h2 {
  font-size: var(--display-lg);
}

h3 {
  font-size: var(--display-md);
}

h4 {
  font-size: var(--display-sm);
}

p,
li {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

ul,
ol {
  padding: 0;
}

/* --------------------------------------------------------------------------
   3. Focus. Never removed; recoloured per surface so it always contrasts.
   -------------------------------------------------------------------------- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--rule) solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--dac-gold);
  color: var(--dac-green-deep);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--dac-green-deep);
}

/* --------------------------------------------------------------------------
   4. Surfaces and layout
   -------------------------------------------------------------------------- */

/* --wolf-body / --wolf-lines keep the mark two-tone on every surface. The
   silhouette alone is not recognisable at large sizes - the inner lines are
   what make it read as a wolf, so they are never flattened away. */

.panel--green {
  --surface: var(--dac-green);
  --ink: var(--dac-white);
  --ink-quiet: #c3d2c5;
  --accent: var(--dac-gold);
  --focus: var(--dac-gold);
  --wolf-body: var(--dac-gold);
  --wolf-lines: var(--dac-green);
}

.panel--deep {
  --surface: var(--dac-green-deep);
  --ink: var(--dac-white);
  --ink-quiet: #a9bcac;
  --accent: var(--dac-gold);
  --focus: var(--dac-gold);
  --wolf-body: var(--dac-gold);
  --wolf-lines: var(--dac-green-deep);
}

.panel--gold {
  --surface: var(--dac-gold);
  --ink: var(--dac-green-deep);
  --ink-quiet: #3d3110;
  --accent: var(--dac-green-deep);
  --focus: var(--dac-green-deep);
  --wolf-body: var(--dac-green);
  --wolf-lines: var(--dac-gold);
}

.panel--bone {
  --surface: var(--dac-bone);
  --ink: var(--dac-green);
  --ink-quiet: #4d6350;
  --accent: var(--dac-green);
  --focus: var(--dac-green-deep);
  --wolf-body: var(--dac-green);
  --wolf-lines: var(--dac-bone);
}

.panel--green,
.panel--deep,
.panel--gold,
.panel--bone {
  background: var(--surface);
  color: var(--ink);
}

/* Grain overlay. Decorative only, never intercepts pointer or a11y tree. */
.grain {
  position: relative;
  isolation: isolate;
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: 0.055;
  pointer-events: none;
}

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

.section__head {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section__head p {
  max-width: var(--measure);
  margin-top: 1rem;
  font-size: var(--text-lead);
  color: var(--ink-quiet);
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1.15em;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.9rem 1.5rem;
  border: var(--rule) solid transparent;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.btn svg {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}

.btn--primary {
  background: var(--dac-gold);
  border-color: var(--dac-gold);
  color: var(--dac-green-deep);
}

.btn--primary:hover {
  background: var(--dac-green-deep);
  border-color: var(--dac-gold);
  color: var(--dac-gold);
}

.btn--outline {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}

.btn--outline:hover {
  background: var(--ink);
  color: var(--surface);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--dac-green-deep);
  color: var(--dac-white);
  --focus: var(--dac-gold);
  border-bottom: var(--rule) solid transparent;
  transition: background 200ms linear, border-color 200ms linear;
}

body[data-surface="gold"] .site-header {
  background: var(--dac-green-deep);
  border-bottom-color: var(--dac-gold);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
  transition: padding 180ms ease;
}

.site-header[data-scrolled="true"] .site-header__inner {
  padding-block: 0.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--dac-gold);
  text-decoration: none;
}

.brand__mark {
  width: auto;
  height: 3rem;
  transition: height 180ms ease;
}

.site-header[data-scrolled="true"] .brand__mark {
  height: 2.25rem;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.brand__name span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--dac-white);
}

/* Navigation */

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: var(--rule) solid var(--dac-gold);
  color: var(--dac-gold);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav__toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  list-style: none;
}

.nav__list a {
  display: block;
  padding-block: 0.35rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: var(--rule) solid transparent;
}

.nav__list a:hover,
.nav__list a[aria-current="page"] {
  border-bottom-color: var(--dac-gold);
  color: var(--dac-gold);
}

.nav__cta {
  padding: 0.55rem 1rem;
  font-size: 0.9375rem;
}

/* Language switcher */

.lang ul {
  display: flex;
  align-items: center;
  list-style: none;
}

.lang li + li::before {
  content: "/";
  padding-inline: 0.4rem;
  color: var(--dac-white);
  opacity: 0.45;
}

.lang a {
  display: inline-block;
  padding-block: 0.35rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--dac-white);
  opacity: 0.6;
}

.lang a:hover {
  opacity: 1;
}

.lang a[aria-current="true"] {
  color: var(--dac-gold);
  opacity: 1;
}

@media (max-width: 60rem) {
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    align-content: start;
    padding: 6rem var(--gutter) var(--gutter);
    background: var(--dac-green);
    visibility: hidden;
  }

  .site-nav[data-open="true"] {
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li + li {
    border-top: 1px solid rgb(255 255 255 / 0.2);
  }

  .nav__list a {
    padding-block: 1rem;
    font-size: 1.375rem;
  }

  /* Switcher sits above the navigation links on small screens. */
  .lang {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.2);
  }

  .lang a {
    font-size: 1.25rem;
  }

  .nav__cta {
    margin-top: 1.5rem;
    justify-content: center;
    padding: 1rem;
    font-size: 1.125rem;
  }

  .nav__close {
    position: absolute;
    top: 1rem;
    right: var(--gutter);
  }
}

@media (min-width: 60.0625rem) {
  .nav__toggle {
    display: none;
  }

  /* DOM order is switcher, links, call to action - which is what the mobile
     panel needs. On desktop the switcher moves between them. */
  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    visibility: visible !important;
  }

  .nav__list { order: 1; }
  .lang { order: 2; }
  .nav__cta { order: 3; }
}

/* --------------------------------------------------------------------------
   7. Hero. The one orchestrated moment on the site.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  /* minmax(0,...) not 1fr: a grid track defaults to min-content, which the
     display headline would push wider than the viewport, dragging the whole
     page into horizontal overflow. */
  grid-template-columns: minmax(0, 1fr);
}

.hero__main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(3.5rem, 8vw, 7rem);
}

.hero__title {
  position: relative;
  z-index: 1;
}

.hero__title span {
  display: block;
}

/* Oversized year, bled off the panel edge. Decorative: the reading path above
   it stays fully visible, which the poster's cropped type would not allow. */
.hero__year {
  position: absolute;
  right: -0.05em;
  bottom: -0.24em;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(7rem, 19vw, 15rem);
  font-weight: 700;
  line-height: 0.75;
  letter-spacing: -0.02em;
  color: var(--dac-green-deep);
  opacity: 0.42;
  pointer-events: none;
  user-select: none;
}

.hero__dateline {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--display-md);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dac-gold);
}

.hero__lede {
  position: relative;
  z-index: 1;
  max-width: 34ch;
  font-size: var(--text-lead);
  color: var(--dac-white);
}

.hero__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

.hero__mark {
  display: grid;
  place-items: center;
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
}

.markwolf {
  width: auto;
  height: clamp(13rem, 34vw, 26rem);
}

.markwolf__body {
  fill: var(--wolf-body);
}

.markwolf__lines {
  fill: var(--wolf-lines);
}

@media (min-width: 55rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 1fr);
    min-height: min(84vh, 46rem);
  }

  .hero__main {
    padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  }

  /* Two columns: the headline now has roughly 58vw to live in, so it is sized
     against that rather than the full viewport. The longest word must never be
     cut - a clipped word is a reading problem, not a style. */
  .hero__title {
    font-size: clamp(3.5rem, 8vw, 8.5rem);
  }
}

/* --------------------------------------------------------------------------
   8. Hero intro. Runs once, on load. Nothing else on the page animates.
   -------------------------------------------------------------------------- */

/* The starting state is keyed off an attribute that scripting sets on <html>.
   If the script never runs - blocked, failed, disabled - the attribute is
   absent and the hero simply renders finished. Content must never depend on
   an animation completing. */

@media (prefers-reduced-motion: no-preference) {
  :root[data-intro="pending"] .hero__mark {
    clip-path: inset(0 0 0 100%);
  }

  :root[data-intro="pending"] .markwolf__body,
  :root[data-intro="pending"] .hero__title span,
  :root[data-intro="pending"] .hero__dateline {
    opacity: 0;
  }

  :root[data-intro="pending"] .markwolf__lines {
    clip-path: inset(0 100% 0 0);
  }

  :root[data-intro="done"] .hero__mark {
    clip-path: inset(0 0 0 0);
    transition: clip-path 700ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
  }

  :root[data-intro="done"] .hero__title span,
  :root[data-intro="done"] .hero__dateline,
  :root[data-intro="done"] .markwolf__body {
    opacity: 1;
    transition: opacity 450ms ease-out;
  }

  :root[data-intro="done"] .hero__title span:nth-child(1) { transition-delay: 60ms; }
  :root[data-intro="done"] .hero__title span:nth-child(2) { transition-delay: 150ms; }
  :root[data-intro="done"] .hero__title span:nth-child(3) { transition-delay: 240ms; }
  :root[data-intro="done"] .hero__dateline { transition-delay: 360ms; }
  :root[data-intro="done"] .markwolf__body { transition-delay: 480ms; }

  /* The howl: revealed once, outward from the body. */
  :root[data-intro="done"] .markwolf__lines {
    clip-path: inset(0 0 0 0);
    transition: clip-path 850ms cubic-bezier(0.16, 1, 0.3, 1) 780ms;
  }
}

/* --------------------------------------------------------------------------
   9. Countdown
   -------------------------------------------------------------------------- */

.countdown {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-block: var(--rule) solid var(--dac-green-deep);
}

.countdown__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.countdown__label {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.countdown__value {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.countdown__value b {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.countdown__unit {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   10. Sign-language video. First-class content, not a sidebar extra.
   -------------------------------------------------------------------------- */

.signvideo {
  max-width: 62rem;
  margin-inline: auto;
}

.signvideo__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  padding: 0.4rem 0.75rem;
  background: var(--dac-green);
  color: var(--dac-white);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.signvideo__badge svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--dac-gold);
}

.signvideo__intro {
  max-width: var(--measure);
  margin: 1rem 0 1.5rem;
  font-size: var(--text-lead);
  color: var(--ink-quiet);
}

.signvideo__frame {
  background: var(--dac-green);
  border: var(--rule) solid var(--dac-green);
}

.signvideo__frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--dac-green);
}

.signvideo__transcript {
  border: var(--rule) solid var(--dac-green);
  border-top: 0;
}

.signvideo__transcript summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.125rem;
  background: var(--dac-green);
  color: var(--dac-white);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.signvideo__transcript summary::-webkit-details-marker {
  display: none;
}

.signvideo__transcript summary svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: var(--dac-gold);
  transition: transform 150ms ease;
}

.signvideo__transcript[open] summary svg {
  transform: rotate(180deg);
}

.signvideo__transcript .prose {
  padding: 1.5rem 1.125rem;
}

/* --------------------------------------------------------------------------
   11. Status board. Solid tile = confirmed, outlined tile = still to come.
       State is carried by fill, icon and words - never by colour alone.
   -------------------------------------------------------------------------- */

.status {
  display: grid;
  gap: var(--rule);
  grid-template-columns: 1fr;
  list-style: none;
}

.status__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: var(--rule) solid var(--dac-gold);
}

.status__item h3 {
  font-size: var(--display-sm);
  letter-spacing: 0.05em;
}

.status__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

.status__state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status__state svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

.status__item--set {
  background: var(--dac-gold);
  color: var(--dac-green-deep);
}

.status__item--pending {
  background: transparent;
  color: var(--dac-white);
}

.status__item--pending .status__state {
  color: var(--dac-gold);
}

@media (min-width: 40rem) {
  .status {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .status {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   12. Split feature (Vilnius). Photography is cut by the wolf silhouette
       rather than framed in a rounded card.
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.wolfmark {
  display: grid;
  place-items: center;
}

.wolfmark .markwolf {
  height: clamp(15rem, 32vw, 28rem);
}

/* Photography cut by the wolf, for when real images of Vilnius arrive.
   Set --photo to a url(). The howl lines are drawn over the top separately so
   the mark still reads as a wolf rather than a flat blob. */
.wolfframe {
  width: min(100%, 22rem);
  margin-inline: auto;
  aspect-ratio: 424.62 / 1000;
  background: var(--photo, var(--wolf-body));
  background-size: cover;
  background-position: center;
  clip-path: url(#wolf-clip);
}

@media (min-width: 55rem) {
  .split {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   13. Facts list
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  gap: var(--rule);
  margin-top: 2rem;
  list-style: none;
}

.facts li {
  display: flex;
  gap: 0.875rem;
  padding: 1rem 0;
  border-top: 1px solid rgb(255 255 255 / 0.22);
}

.facts svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15rem;
  fill: var(--dac-gold);
}

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */

.field {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.field label {
  font-weight: 600;
}

.field__hint {
  font-size: var(--text-meta);
  color: var(--ink-quiet);
}

.field input,
.field textarea {
  padding: 0.8rem 0.9rem;
  background: var(--dac-white);
  border: var(--rule) solid var(--dac-green);
  color: var(--dac-green-deep);
  font: inherit;
  font-size: 1.0625rem;
}

/* Form feedback. Icon plus words, never colour on its own. */
.formnotice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  max-width: 30rem;
  margin-bottom: 1.5rem;
  padding: 0.875rem 1rem;
  border-left: 4px solid var(--accent);
  background: rgb(39 74 42 / 0.07);
  font-weight: 500;
}

.formnotice svg {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.15rem;
  fill: var(--accent);
}

.signup {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.signup form {
  max-width: 30rem;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
  list-style: none;
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: var(--rule) solid currentColor;
  font-weight: 600;
  text-decoration: none;
}

.social svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

@media (min-width: 55rem) {
  .signup {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.site-footer__grid {
  display: grid;
  gap: 2.5rem;
}

.site-footer__mark {
  width: auto;
  height: 4rem;
  color: var(--dac-gold);
}

.site-footer__blurb {
  max-width: 26ch;
  margin-top: 1rem;
}

.site-footer h2 {
  margin-bottom: 1rem;
  font-size: var(--display-sm);
  color: var(--dac-gold);
  letter-spacing: 0.06em;
}

.site-footer ul {
  list-style: none;
}

.site-footer li + li {
  margin-top: 0.5rem;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.2);
  font-size: var(--text-meta);
  color: var(--ink-quiet);
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   16. Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.rule {
  height: var(--rule);
  background: var(--dac-gold);
  border: 0;
}

/* The howl lines lifted straight out of the mark, used once as a section
   ornament. Deliberately not repeated elsewhere - the motif only carries
   weight while it stays rare. */
.howl-divider {
  display: block;
  width: clamp(9rem, 18vw, 14rem);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  color: var(--accent);
}

.howl-divider svg {
  width: 100%;
  height: auto;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   17. Motion
       The brief allows one orchestrated moment and forbids "everything moves":
       no fade-and-slide on every section, no hover-lift on every card, no
       parallax, no auto-scrolling carousels. What is here:

         a. the hero intro, once on load (section 8)
         b. the howl revealing itself as it scrolls into view - the signature
            motif, and the only scroll-driven effect on the page
         c. page-to-page view transitions
         d. state changes the user asked for: hover, focus, opening the menu

       Everything below degrades to the finished state when the feature is
       unsupported, and is cut entirely under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

/* d. User-initiated state changes. */

.btn,
.nav__list a,
.lang a,
.social a {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

@media (max-width: 60rem) {
  .site-nav {
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  }

  .site-nav[data-open="true"] {
    opacity: 1;
    transform: none;
  }
}

/* b. The howl, revealed on scroll. Wrapped in @supports so browsers without
      scroll-driven animations simply show the finished mark. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The timeline is declared on the HTML wrapper, not on the SVG group that
       gets animated. view() resolves against the element's own layout box, and
       an SVG <g> has none - the timeline never advances and the lines stay at
       the start of the animation, permanently hidden. Naming it on the wrapper
       and referencing it from the child avoids that. */
    .wolfmark,
    .howl-divider {
      view-timeline-name: --dac-howl-tl;
      view-timeline-axis: block;
    }

    .wolfmark .markwolf__lines,
    .howl-divider svg {
      animation: dac-howl linear both;
      animation-timeline: --dac-howl-tl;
      animation-range: entry 20% cover 45%;
    }
  }
}

@keyframes dac-howl {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

/* c. Cross-document view transitions. Chrome and Safari honour this; everything
      else navigates normally. The header and footer are named so they stay put
      instead of cross-fading with the page body. */

@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: dac-header;
}

.site-footer {
  view-transition-name: dac-footer;
}

/* --------------------------------------------------------------------------
   18. Motion preferences. Cuts every non user-initiated movement.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* View transitions are driven by the UA, not by the rules above, so they
     have to be stopped separately. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}