/* ============================================
   
  SITE TEMPLATE — STYLESHEET

  A reusable three-page site template.
  Static HTML + CSS. No JavaScript dependencies.
  License: CC0

  TABLE OF CONTENTS

    1. Custom Properties & Reset
    2. Base Typography & Elements
    3. Skip Link (accessibility)
    4. Navigation (mobile-first hamburger)
    5. Splash Header (hero banner)
    6. Main Content & Context Paragraph
    7. Detail Cards (flexible grid)
    8. Embed Spots (third-party widgets)
    9. Prose Layout (about/bio pages)
    10. Layout Sections (highlight band, split, stats, pullquote, steps, accordion, gallery)
    11. Footer
    12. Visual Enhancements (progressive)
    13. Utilities
    14. Reduced Motion & Print

============================================ */

/* ============================================
   1. CUSTOM PROPERTIES & RESET
   ============================================ */

/* Registers --accent-hue as an animatable custom property.
   This lets the scroll-driven hue shift (Section 12)
   interpolate smoothly between colour values. */

@property --accent-hue {
  syntax: "<number>";
  initial-value: 343;
  inherits: true;
}

/* Universal box-sizing reset: border-box on everything
   so padding and borders are included in element widths. */

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

:root {

  /* COLOURS — swap these to re-theme per project.
     --color-accent is derived from --accent-hue so it
     shifts automatically with the scroll animation. */

  --color-bg: #ffffff;
  --color-text: #000000;
  --accent-hue: 343;
  --color-accent: hsl(var(--accent-hue) 76% 52%);
  --color-accent-light: hsl(var(--accent-hue) 60% 95%);
  --color-muted: #6d6d6d;
  --color-border: #dbdbdb;
  --color-header-overlay: rgba(237, 81, 83, 0.45);
  --color-white: #fff;
  --color-hotpink: #ed5153;

  /* PIXEL-FADE — controls the decorative dissolve
     edge between the splash/highlight-band and the
     page background. Adjust --pixel-unit to scale. */

  --pixel-fade-height: clamp(1.4rem, 3.8vw, 2.6rem);
  --pixel-unit: clamp(10px, 1.2vw, 18px);
  --pixel-gap: clamp(1.75rem, 4vw, 3rem);

  /* TYPOGRAPHY — system stack for body, serif for headings.
     No external font files are loaded. */

  --font-body: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-heading: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  /* SPACING — a simple four-step scale used site-wide. */

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;

  /* MAX WIDTH — constrains content areas to a readable measure. */

  --max-width: 52rem;

  /* SECTION RHYTHM — consistent vertical padding for
     every layout section so spacing stays even. */

  --space-section: 2.5rem;
}


/* ============================================
   2. BASE TYPOGRAPHY & ELEMENTS
   ============================================ */

html {
  font-size: 100%;
  scroll-behavior: smooth;

  /* Custom cursor: small accent-coloured circle with dot.
     Falls back to the default cursor if the SVG fails. */

  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='none' stroke='%23e22658' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23e22658'/%3E%3C/svg%3E") 12 12, auto;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  hanging-punctuation: first;       /* Hangs opening quotes into the margin */
  font-variant-numeric: oldstyle-nums; /* Uses "text figures" where the font supports them */
}

/* Text selection highlight uses the light accent tint. */

::selection {
  background: var(--color-accent-light);
  color: var(--color-text);
}

/* Default link styling: accent-coloured with a thin underline. */

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-accent);
}

a:hover,
a:focus-visible {
  text-decoration: none;
}

/* All images are responsive by default. */

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


/* ============================================
   3. SKIP LINK (accessibility)
   Hidden off-screen until focused via keyboard.
   Lets screen-reader and keyboard users bypass nav.
   ============================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-sm);
  z-index: 100;
  border-radius: 0 0 0.25rem 0.25rem;
}

.skip-link:focus {
  top: 0;
}


/* ============================================
   4. NAVIGATION
   Mobile-first: hamburger menu by default,
   horizontal bar at 600px+ (37.5em).
   Uses a hidden checkbox to toggle the menu
   open/closed — no JavaScript needed.
   ============================================ */

/* Nav bar: sticky, semi-transparent purple. */

.site-nav {
  background: rgba(237, 81, 83,0.95);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-sm);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 2px solid var(--color-accent);
}

/* Centres nav content and caps its width. */

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Site name in the top-left, styled as a home link. */

.site-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-white);
  text-decoration: none;
}

/* The checkbox itself is hidden; its checked/unchecked
   state controls whether .nav-links is visible. */

.nav-toggle {
  display: none;
}

/* The label acts as the visible hamburger button.
   Three child <span>s draw the three bars. */

.nav-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-xs);
}

.nav-toggle-label span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: transform 0.3s, opacity 0.3s;
}

/* Animate the three bars into an X when open. */

.nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
  opacity: 0;
}

.nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav links: hidden by default, shown as a
   dropdown when the checkbox is checked. */

.nav-links {
  list-style: none;
  display: none;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(237, 81, 83, 0.98);
  padding: 0 var(--space-sm) var(--space-sm);
}

/* Checkbox checked => show the dropdown. */

.nav-toggle:checked ~ .nav-links {
  display: flex;
}

.nav-links a {
  color: var(--color-white);
  text-decoration: none;
  padding: var(--space-xs) 0;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--color-accent-light);
}

/* Bold the link for the current page (set via aria-current in HTML). */

.nav-links a[aria-current="page"] {
  font-weight: 700;
}

/* Desktop nav: 600px+ — hide hamburger, show horizontal links. */

@media (min-width: 37.5em) {
  .nav-toggle-label {
    display: none;
  }

  .nav-links {
    display: flex;
    flex-direction: row;
    position: static;
    width: auto;
    padding: 0;
    gap: var(--space-sm);
  }

  .nav-links a {
    border-bottom: none;
    padding: var(--space-xs);
    position: relative;  /* Anchor for the ::after underline */
  }

  /* Solid underline that slides in from left on hover. */

  .nav-links a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .nav-links a:hover::after,
  .nav-links a:focus-visible::after {
    transform: scaleX(1);
  }
}



/* ============================================
   5. SPLASH HEADER
   Full-width background image with headline
   text over a dark overlay. "Above the fold."

   Replace the background image in the rule below.
   The ::before overlay ensures text stays readable.
   The ::after creates the decorative pixel-fade
   transition into the page background.
   ============================================ */

/* Mobile-first: <img class="splash-img"> is in normal flow and drives
   the container height. .splash-content sits on top via absolute positioning
   so it overlays without adding extra height. */

.splash {
  position: relative;
  overflow: visible;       /* Allows ::after to extend below */
  isolation: isolate;      /* Contains stacking context */
  text-align: center;
  color: var(--color-white);
  background: var(--color-accent);  /* fallback colour while image loads */
}

.splash-img {
  width: 100%;
  height: auto;
  display: block;
}

.splash-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-sm);
}

/* Desktop: hide the <img>, switch to CSS background-size:cover + parallax.
   Reset .splash-content to in-flow so it sizes the flex container. */

@media (min-width: 37.5em) {
  .splash {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    min-height: 60svh;
    padding: var(--space-lg) var(--space-sm);

    /* BACKGROUND IMAGE — replace per project.
       Also update the <img src> in index.html to match. */

    background: var(--color-accent) url("imgs/attack-banner_1920x1080.jpg") center / cover no-repeat;
    background-attachment: fixed;
  }

  .splash-img {
    display: none;
  }

  .splash-content {
    position: relative;
    inset: auto;
    display: block;
  }
}

/* Dark overlay + subtle dot-pattern texture.
   Ensures white headline text is readable on any image. */

.splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom, 
      rgba(237, 81, 83, 0.35),
      rgba(0, 0, 0, 0.55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='3' cy='3' r='1.2' fill='%239055a2'/%3E%3C/svg%3E");
  backdrop-filter: contrast(1.1) brightness(0.85) saturate(0.7);
  opacity: 0.96;
  pointer-events: none;
}

/* Decorative pixel-fade below the splash image.
   Four layered gradients create a dissolving-pixel
   transition from the purple header into the white page. */

.splash::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pixel-fade-height);
  transform: translateY(100%);
  background:
    linear-gradient(
      to bottom, 
      rgba(237, 81, 83, 0.88) 0%,
      rgba(237, 81, 83, 0.42) 32%, 
      rgba(237, 81, 83, 0.08) 58%, 
      transparent 78%),
    repeating-linear-gradient(
      90deg, 
      rgba(237, 81, 83, 0.88) 0 calc(var(--pixel-unit) * 1), 
      transparent calc(var(--pixel-unit) * 1) calc(var(--pixel-unit) * 2)),
    repeating-linear-gradient(
      90deg, 
      transparent 0 calc(var(--pixel-unit) * 0.6), 
      rgba(237, 81, 83, 0.6) calc(var(--pixel-unit) * 0.6) calc(var(--pixel-unit) * 1.5), 
      transparent calc(var(--pixel-unit) * 1.5) calc(var(--pixel-unit) * 2.7)),
    repeating-linear-gradient(
      0deg, 
      transparent 0 calc(var(--pixel-unit) * 0.7), 
      rgba(237, 81, 83, 0.32) calc(var(--pixel-unit) * 0.7) calc(var(--pixel-unit) * 1.5), 
      transparent calc(var(--pixel-unit) * 1.5) calc(var(--pixel-unit) * 2.2));
  background-size:
    100% 100%,
    100% 62%,
    100% 80%,
    100% 100%;
  background-position:
    0 0,
    0 0,
    0 calc(var(--pixel-unit) * 0.45),
    0 0;
  background-repeat: no-repeat;
  filter: saturate(1.05) contrast(1.08);
  pointer-events: none;
}

/* Headline content sits above the overlay. */

.splash-content {
  z-index: 1;
  max-width: var(--max-width);
}

/* Shimmer gradient on the headline text. The animation
   (defined in Section 12) slowly shifts the gradient. */

.splash h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
  background: linear-gradient(
    135deg,
    #fff 0%,
    #faeaed 30%,
    #fff 50%,
    #f0c0d0 70%,
    #fff 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 8s ease-in-out infinite;
}

.splash p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  opacity: 0.9;
}

/* Headline content sits above the overlay. */

.splash-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
}

/* Shimmer gradient on the headline text. The animation
   (defined in Section 12) slowly shifts the gradient. */

.splash h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
  background: linear-gradient(
    135deg,
    #fff 0%,
    #faeaed 30%,
    #fff 50%,
    #f0c0d0 70%,
    #fff 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 8s ease-in-out infinite;
}

.splash p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  opacity: 0.9;
}


/* ============================================
   6. MAIN CONTENT & CONTEXT PARAGRAPH
   ============================================ */

/* .content wraps the main area on every page.
   Top padding accounts for the pixel-fade overlap. */

.content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--space-section) + var(--pixel-gap)) var(--space-sm) var(--space-section);
}

/* Introductory paragraph on the home page.
   Slightly larger text, narrower measure for readability. */

.context {
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: var(--space-md);
  max-width: 42rem;
}


/* ============================================
   7. DETAIL CARDS (flexible grid)
   Uses CSS auto-fit so the grid adapts to any
   number of cards (2, 3, 4, 5, 6, etc.) without
   needing breakpoint changes. Cards fill available
   columns then wrap to the next row automatically.
   ============================================ */

.details {
  display: grid;
  gap: var(--space-md);
  /* Each card is at least 16rem wide. The grid creates
     as many columns as will fit, stretching them to
     fill leftover space evenly. */

  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Individual card styling. */

.detail-card {
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: 2px;
  padding: var(--space-sm);
  background: var(--color-white);
  position: relative;       /* Anchor for ::before overlay */

  /* Stacked-paper shadow effect (two offset layers). */

  box-shadow:
    3px 3px 0 -1px var(--color-accent-light),
    3px 3px 0 0 var(--color-border),
    6px 6px 0 -1px var(--color-accent-light),
    6px 6px 0 0 var(--color-border);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover: shadow grows, card lifts slightly. */

.detail-card:hover {
  box-shadow:
    4px 5px 0 -1px var(--color-accent-light),
    4px 5px 0 0 var(--color-border),
    8px 10px 0 -1px var(--color-accent-light),
    8px 10px 0 0 var(--color-border);
  transform: translate(-1px, -2px);
}

.detail-card h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: var(--space-xs);
}

.detail-card p {
  color: var(--color-muted);
}


/* ============================================
   8. EMBED SPOTS
   Dashed-border placeholders on the Details page
   where third-party embeds (forms, tip jars, etc.)
   can be pasted in.
   ============================================ */

/*.embed-spot {
  border: 2px dashed var(--color-accent);
  border-radius: 2px;
  padding: var(--space-md);
  margin: var(--space-md) 0;
  text-align: center;
  background: var(--color-accent-light);
}

.embed-spot p {
  color: var(--color-muted);
  font-style: italic;
}*/


/*  ============================================
    8.5 VIDEO EMBEDS
    Making the embeds work without the border box.
    ============================================ */

.split-media iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  border: 0;
}

.split-media:has(iframe) {
  position: relative;
  padding: 0;
  aspect-ratio: 16 / 9;
  min-height: unset;
  border: none;
  background: none;
} 


/* ============================================
   9. PROSE LAYOUT
   Clean typographic defaults for long-form
   content pages (bio, FAQ, about).
   ============================================ */

.prose h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.25;
  margin: var(--space-md) 0 var(--space-xs);
}

/* Remove top margin on the first heading so it
   sits flush with the top of the content area. */

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  margin-bottom: var(--space-sm);
}

.prose ul,
.prose ol {
  margin: 0 0 var(--space-sm) var(--space-md);
}

.prose li {
  margin-bottom: var(--space-xs);
}


/* ============================================
   10. LAYOUT SECTIONS
   Reusable section types. Mix and match on
   any page. Remove sections you don't need.
   ============================================ */

/* --- Highlight Band ---
   Full-width accent-coloured strip for CTAs
   or announcements. Pixel-fade edges (::before
   and ::after) match the splash header style. */

.highlight-band {
  position: relative;
  overflow: visible;
  isolation: isolate;
  margin-top: var(--pixel-gap);
  margin-bottom: var(--pixel-gap);
  background: var(--color-hotpink);
  color: var(--color-white);
  padding: var(--space-section) var(--space-sm);
  text-align: center;
}

/* Pixel-fade edges: shared styles for top and bottom. */

.highlight-band::before,
.highlight-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--pixel-fade-height);
  background:
    linear-gradient(
      to bottom,
      rgba(237, 81, 83,0.9) 0%,
      rgba(237, 81, 83,0.44) 30%,
      rgba(237, 81, 83,0.1) 56%,
      transparent 78%),
    repeating-linear-gradient(
      90deg,
      rgba(237, 81, 83,0.9) 0 calc(var(--pixel-unit) * 1),
      transparent calc(var(--pixel-unit) * 1) calc(var(--pixel-unit) * 2)),
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(var(--pixel-unit) * 0.7),
      rgba(237, 81, 83,0.68) calc(var(--pixel-unit) * 0.7) calc(var(--pixel-unit) * 1.55),
      transparent calc(var(--pixel-unit) * 1.55) calc(var(--pixel-unit) * 2.65)),
    repeating-linear-gradient(
      0deg,
      transparent 0 calc(var(--pixel-unit) * 0.7),
      rgba(255, 255, 255, 0.08) calc(var(--pixel-unit) * 0.7) calc(var(--pixel-unit) * 1.45),
      transparent calc(var(--pixel-unit) * 1.45) calc(var(--pixel-unit) * 2.2));
  background-size:
    100% 100%,
    100% 64%,
    100% 82%,
    100% 100%;
  background-position:
    0 0,
    0 0,
    0 calc(var(--pixel-unit) * 0.35),
    0 0;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Top edge: flipped vertically so it fades upward. */

.highlight-band::before {
  top: 0;
  transform: translateY(-100%) scaleY(-1);
}

/* Bottom edge: fades downward into the page. */

.highlight-band::after {
  bottom: 0;
  transform: translateY(100%);
}

.highlight-band-inner {
  display: block;
  max-width: var(--max-width);
  margin: 0 auto;
}

.highlight-band h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.3;
  margin-bottom: var(--space-xs);
}

.highlight-band p {
  font-size: 1.125rem;
  opacity: 0.9;
  margin-bottom: var(--space-md);
}

/* Button inside the highlight band. */

.highlight-band .btn {
  display: inline-block;
  background: var(--color-white);
  color: var(--color-hotpink);
  text-decoration: none;
  padding: var(--space-xs) var(--space-md);
  border-radius: 2px;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
}

.highlight-band .btn:hover {
  background: var(--color-accent-light);
  transform: translateY(-1px);
}


/* --- Split ---
   Two-column layout: text on one side, image/media
   on the other. Stacks vertically on mobile.
   Add .split--reverse to flip the order on desktop. */

.split {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-section) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 37.5em) {
  .split {
    flex-direction: row;
    align-items: center;
  }

  /* Each half takes equal space. */

  .split-text,
  .split-media {
    flex: 1;
  }

  /* Reversed layout: image left, text right. */

  .split--reverse {
    flex-direction: row-reverse;
  }
}

.split-text h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: var(--space-xs);
}

.split-text p {
  color: var(--color-muted);
  margin-bottom: var(--space-sm);
}

/* Media container: shows a dashed placeholder when
   empty; clips to rounded corners when an image is added. */

.split-media {
  border-radius: 2px;
  overflow: hidden;
  background: var(--color-accent-light);
  border: 1px dashed var(--color-border);
  min-height: 14rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-style: italic;
  font-size: 0.875rem;
}

/* Images inside the split fill the container. */

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- Stats ---
   Horizontal row of key numbers/metrics.
   Wraps on narrow screens. */

.stats {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-section) var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  text-align: center;
  list-style: none;
}

.stat {
  flex: 1;
  min-width: 8rem;
}

.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.stat-label {
  font-size: 0.875rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* --- Pullquote ---
   Styled blockquote for testimonials or key statements.
   The slight rotation gives a tactile, editorial feel. */

.pullquote {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-section) var(--space-sm);
}

.pullquote blockquote {
  border-left: 4px solid var(--color-accent);
  padding-left: var(--space-md);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.5;
  font-style: italic;
  color: var(--color-text);
  transform: rotate(-0.5deg);
}

.pullquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-style: normal;
  color: var(--color-muted);
  transform: rotate(0.5deg);   /* Counter-rotates to sit level */
}


/* --- Steps ---
   Numbered vertical process/timeline.
   Numbers are auto-generated by CSS counters. */

.steps {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-section) var(--space-sm);
}

.steps h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: var(--space-md);
}

.steps-list {
  list-style: none;
  counter-reset: step;
}

.steps-list li {
  counter-increment: step;
  position: relative;
  padding-left: 3.5rem;
  padding-bottom: var(--space-md);
  border-left: 2px solid var(--color-border);
  margin-left: 1rem;
}

/* Last step: hide the connecting line. */

.steps-list li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

/* Numbered circle badge for each step. */

.steps-list li::before {
  content: counter(step);
  position: absolute;
  left: -1.1rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

.steps-list h3 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  margin-bottom: var(--space-xs);
}

.steps-list p {
  color: var(--color-muted);
}


/* --- Accordion ---
   CSS-only FAQ using <details>/<summary>.
   The + icon rotates to x when open. */

.accordion {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-section) var(--space-sm);
}

.accordion h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: var(--space-md);
}

.accordion details {
  border-bottom: 1px solid var(--color-border);
}

.accordion summary {
  padding: var(--space-sm) 0;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

/* Hide the browser's default disclosure triangle. */

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

/* Custom + indicator on the right side. */

.accordion summary::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-accent);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* Rotate + to x when the panel is open. */

.accordion details[open] summary::after {
  transform: rotate(45deg);
}

.accordion details p {
  padding: 0 0 var(--space-sm);
  color: var(--color-muted);
}


/* --- Gallery ---
   Responsive image grid using auto-fill.
   Columns adjust automatically to fit the width. */

.gallery {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-section) var(--space-sm);
}

.gallery h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: var(--space-md);
}

.gallery-grid {
  display: grid;
  margin: 0;
  padding: 0;
  border: 0;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-xs);
}

/* Gallery images are square-cropped by default. */

.gallery-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px;
  transition: transform 0.2s ease;
}

.gallery-grid img:hover {
  transform: scale(1.03);
}

/* Placeholder squares shown when no images are loaded yet. */

.gallery-placeholder {
  background: var(--color-accent-light);
  border: 1px dashed var(--color-border);
  border-radius: 2px;
  aspect-ratio: 1;
}


/* ============================================
   11. FOOTER
   Social links + credits. Consistent on every page.
   ============================================ */

.site-footer {
  /* Gradient border that fades out at both edges. */

  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, var(--color-border), transparent) 1;
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Horizontal list of social profile links. */

.social-links {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.social-links a {
  color: var(--color-muted);
}

.social-links a:hover {
  color: var(--color-accent);
}

.credits {
  margin-top: var(--space-xs);
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

.land-acknowledgement {
  margin-top: var(--space-sm);
  font-style: italic;
}


/* ============================================
   12. VISUAL ENHANCEMENTS
   Progressive enhancements for modern browsers.
   All effects degrade gracefully — the site is
   fully usable without them.
   ============================================ */

/* Subtle colour overlay on detail cards.
   Fades out on hover to "brighten" the card. */

.detail-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: hsl(var(--accent-hue) 60% 50%);
  opacity: 0.04;
  mix-blend-mode: multiply;
  border-radius: 2px;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.detail-card:hover::before {
  opacity: 0;
}

/* Restore pointer cursor on all interactive elements
   (overrides the custom circle cursor from html). */

a, button, [role="button"], label[for], summary {
  cursor: pointer;
}

/* Shimmer animation for the splash headline gradient. */

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Scroll-driven card entrance animation.
   Cards fade/slide in as they enter the viewport.
   Only supported in Chromium 115+; ignored elsewhere. */

@supports (animation-timeline: view()) {
  .detail-card {
    animation: card-enter linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  @keyframes card-enter {
    from {
      opacity: 0;
      translate: 0 2rem;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}

/* Scroll-driven accent hue shift.
   As the user scrolls, --accent-hue animates from
   pink (343) to purple (270), shifting all accent colours.
   Only supported in Chromium 115+; ignored elsewhere. */

@supports (animation-timeline: scroll()) {
  body {
    animation: hue-shift linear both;
    animation-timeline: scroll();
  }

  @keyframes hue-shift {
    from { --accent-hue: 343; }
    to { --accent-hue: 270; }
  }
}


/* ============================================
   13. UTILITIES
   ============================================ */

/* Screen-reader-only text. Visually hidden but
   announced by assistive technology. */

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

/* Visible focus ring for keyboard navigation. */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* ============================================
   14. REDUCED MOTION & PRINT
   ============================================ */

/* Honor the user's motion preference by
   collapsing all transitions and animations. */

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

  html {
    scroll-behavior: auto;
  }
}

/* Print styles: strip nav, splash chrome, and
   decorative elements for a clean printout. */

@media print {
  .site-nav,
  .skip-link {
    display: none;
  }

  .splash {
    min-height: auto;
    padding: var(--space-md) var(--space-sm);
    color: var(--color-text);
    background: none;
  }

  .splash::before,
  .splash::after {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .site-footer {
    border-image: none;
    border-top: 1px solid #999;
  }
}