/* Sekala Niskala — site.css
   Layout and page-specific rules ONLY. Uses tokens from tokens.css and the
   components from components.css; it never restyles a component's identity. */

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--blue);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, canvas, svg { max-width: 100%; }
main { display: block; }

/* Generic focus ring for interactive elements not covered by components.css */
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

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

/* -------------------------------------------------------------- Container */
.ds-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 5vw, var(--space-8));  /* generous, responsive gutters */
}

/* ------------------------------------------------------- Section rhythm */
/* Vertical padding lives INSIDE the coloured block (the .ds-container), so the
   heading never touches the top or edges of its colour band. */
main > .ds-section > .ds-container { padding-block: clamp(var(--space-8), 9vw, var(--space-9)); }

/* Blue sections: full-bleed blue-frame bands, blue content column */
.ds-section[data-theme="blue"] { background: var(--blue-frame); }
.ds-section[data-theme="blue"] > .ds-container { background: var(--blue); }

/* Hero: block padding on its own container (the id keeps specificity above the
   generic container rule). */
#top > .ds-container.ds-hero { padding-block: clamp(var(--space-8), 11vw, var(--space-9)) clamp(var(--space-7), 7vw, var(--space-8)); }

/* Lighter dot-matrix weight for the h1 (the 900 default reads too heavy). */
.ds-hero h1 { font-weight: 400; letter-spacing: 0; }

/* Thin typing caret (the block default is too chunky). */
.ds-caret { width: .09em; margin-left: .12em; }

/* ---------------------------------------------------- Section header grid */
.ds-section__head {
  display: grid;
  grid-template-columns: 2fr 1fr;   /* ≈ 8 / 4 of 12 */
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-6);
}
.ds-section__intro .ds-legend { display: block; margin-bottom: var(--space-3); }
.ds-section__intro h2, .ds-section__intro h3 { margin: 0; }
.ds-section__plate { align-self: start; max-width: 420px; width: 100%; justify-self: end; }
@media (max-width: 900px) {
  .ds-section__head { grid-template-columns: 1fr; }
  /* Show the guardian plate on mobile too, stacked under the heading, centred and sized down. */
  .ds-section__plate { justify-self: center; max-width: 280px; margin-top: var(--space-5); }
}

/* Body blocks */
.ds-section__body > p, .ds-section__body .t-lead { max-width: var(--measure); }
.ds-section__body .t-lead { margin: 0 0 var(--space-5); }
.ds-section__body .t-body { margin: 0 0 var(--space-4); }

/* ------------------------------------------------------------------ Plates */
/* Clip the parallax scale inside the poleng frame's inner image box. */
.ds-plate__img { overflow: hidden; }

/* ------------------------------------------------------------------ Cards */
.ds-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); align-items: stretch; }  /* 2×2 for four projects */
@media (max-width: 760px) { .ds-cards { grid-template-columns: 1fr; } }
/* Push the motif to the bottom so every card's plate lines up across the row,
   regardless of how long each description is. Capped so it doesn't dominate. */
.ds-card .ds-plate { margin-top: auto; margin-inline: auto; max-width: 300px; width: 100%; }
/* Centre the card text to match the centred motif. */
.ds-card { text-align: center; align-items: center; }
.ds-card__body { margin-inline: auto; }

/* --------------------------------------------------------------- Terminal */
.about-term { max-width: 460px; margin-top: var(--space-6); }

/* ---------------------------------------------------------------- Contact */
.contact-email { display: inline-block; color: var(--ink); text-decoration: none; word-break: break-word; }
.contact-email:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------------- Nav */
.site-header { position: sticky; top: 0; z-index: 50; }
.ds-nav.ds-container { padding-block: var(--space-5); }   /* horizontal comes from .ds-container */
.site-menu-btn {
  display: none;
  border: 0; background: transparent; cursor: pointer; color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}

@media (max-width: 900px) {
  .ds-nav { grid-template-columns: auto 1fr; gap: var(--space-4); }
  .ds-nav__side { display: none; }
  .ds-nav__mark { grid-column: 1; align-items: flex-start; }
  .ds-nav__mark b { font-size: 28px; }
  .site-menu-btn { display: inline-flex; grid-column: 2; justify-self: end; align-self: center; }
}

/* -------------------------------------------------------- Mobile menu */
.site-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--blue-night); color: var(--paper);
  display: flex; flex-direction: column; padding: var(--space-6);
}
.site-menu[hidden] { display: none; }
.site-menu__close {
  align-self: flex-end; border: 0; background: transparent; cursor: pointer; color: var(--paper);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em;
}
.site-menu__nav { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-8); }
.site-menu__nav a {
  color: var(--paper); text-decoration: none;
  font-family: var(--font-display); font-variation-settings: "ROND" 0; font-weight: 800; font-size: 44px; line-height: .95;
}
.site-menu__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
html.menu-open { overflow: hidden; }

/* Static (non-link) rows: work & education entries with no destination.
   No arrow column, no pointer, no hover highlight. */
.ds-row--static { grid-template-columns: 14ch 1fr auto; cursor: default; }
.ds-row--static:hover { background: transparent; }

/* ---------------------------------------------------- Rows on mobile */
/* The component's 760px grid puts the title block in the 24px arrow column,
   which overflows. Re-flow: dates + arrow on the first line, title full width. */
@media (max-width: 760px) {
  .ds-row { grid-template-columns: 1fr auto; column-gap: var(--space-4); }
  .ds-row > .ds-meta { grid-column: 1; }
  .ds-row > span:not(.ds-meta) { grid-column: 1 / -1; min-width: 0; }
  .ds-row > svg { grid-column: 2; grid-row: 1; align-self: center; }
}

/* ----------------------------------------------------------------- Footer */
.site-footer.ds-section > .ds-container { padding-block: var(--space-6); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }