/* ==========================================================================
   Tokens — colors here; spacing/type/radius in css/tokens.css (from Figma)
   ========================================================================== */
:root {
  /* Key colors */
  --color-flush-orange: #ff8400;
  --color-electric-violet: #8b37fe;
  --color-neutral-light: #dad5cc;
  --color-yellow: #e5ff00;
  --color-pink: #ff00bb;
  --color-green: #00ff66;
  --color-lavender: #cfa4ff; /* Scheme 3 — Contrast / Accent */

  /* Transparency */
  --transparency-neutral-darkest-10: #24201a1a;
  --transparency-neutral-lightest-15: #f6f5f126;

  /* Scheme 1 — Primary */
  --scheme-bg: #ece9e3;
  --scheme-fg: #f6f5f1;
  --scheme-text: #24201a;
  --scheme-border: #a1998a;
  --scheme-accent: #ff8400;
  --scheme-button-surface: #24201a;
  --scheme-button-text: #f6f5f1;
  --scheme-button-border: #24201a;

  /* Spacing, type and radius come from css/tokens.css (generated from the
     Figma variables, one value per breakpoint mode). The names below are the
     site's shorthand for them. Size, radius, corners and width tokens are
     used under their Figma names directly (--size-text-small, --corners-tag…). */
  --font-headline: var(--typeface-family-headline), sans-serif;
  --font-text: var(--typeface-family-text), sans-serif;

  --gap-tiny: var(--padding-gap-tiny);
  --gap-small: var(--padding-gap-small);
  --gap-medium: var(--padding-gap-medium);
  --gap-large: var(--padding-gap-large);
  --gap-huge: var(--padding-gap-huge);
  --pad-control-tiny: var(--padding-control-tiny);
  --pad-control-small: var(--padding-control-small);
  --pad-control-medium: var(--padding-control-medium);
  --pad-control-large: var(--padding-control-large);
  --pad-control-huge: var(--padding-control-huge);
  --pad-section-global: var(--padding-section-global);
  --pad-section-large: var(--padding-section-large);
  --pad-section-small: var(--padding-section-small);
  --pad-section-gallery: var(--padding-section-global);
  --pad-block-tiny: var(--padding-block-tiny);
  --pad-block-small: var(--padding-block-small);
  --pad-block-medium: var(--padding-block-medium);
  --container-max: var(--width-container-large);

  --gap-media: var(--padding-gap-media);
}

/* Scheme 3 — Contrast: everything inside resolves its roles through here */
[data-sc-scheme="scheme-3"] {
  --scheme-bg: #24201a;
  --scheme-text: #f6f5f1;
  --scheme-border: #645c4e;
}

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

body {
  margin: 0;
  background: var(--scheme-bg);
  color: var(--scheme-text);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, p { margin: 0; font-weight: inherit; }
address { font-style: normal; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

:focus-visible {
  outline: 2px solid var(--color-electric-violet);
  outline-offset: 4px;
  border-radius: var(--radius-small);
}

/* ==========================================================================
   Header / Navigation (Figma: Patterns → Navigation)
   Desktop collapses to the column headings and expands on hover/focus
   (Layout=Desktop → Desktop Expanded). The expanded panel overlays the page
   so the content below doesn't jump.
   ========================================================================== */
/* Scheme 1 — Primary (restated so a component can opt back into it) */
[data-sc-scheme="scheme-1"] {
  --scheme-bg: #ece9e3;
  --scheme-text: #24201a;
  --scheme-border: #a1998a;
}

/* Scheme 2 — Subtle */
[data-sc-scheme="scheme-2"] {
  --scheme-bg: #dad5cc;
  --scheme-text: #24201a;
  --scheme-border: #a1998a;
}

.site-header {
  /* Figma Navigation. Desktop: a slim bar (Block/Tiny padding, small logo) that opens
     into a 3/4-height takeover — Desktop Expanded — on hover (js/nav.js). */
  --nav-pad-y: var(--pad-block-tiny);
  --nav-pad-x: var(--pad-section-global);
  --nav-logo-w: 200px;
  --nav-row: 33px; /* the 200px logo's height */
  --nav-text: var(--size-text-small);
  --nav-open-h: 75vh;
  --nav-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-h: calc(var(--nav-pad-y) * 2 + var(--nav-row) + 1px);
  /* Hidden at the top of the page; slides in once you scroll (js/nav.js).
     Moved with `top`, not transform, so the fixed mobile menu still works. */
  position: fixed;
  top: calc(-1 * var(--header-h) - 2px);
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header-h);
  transition: top 0.4s var(--nav-ease);
}
.site-header.is-revealed,
.site-header:focus-within,
.site-header.is-open { top: 0; }

.site-header__inner {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  /* Expanded layout: the logo defines its own column (contact + socials beneath it);
     the navigation fills the remaining width. Rows: bar, panel space, rule. */
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [logo-start] var(--nav-logo-w) [logo-end] var(--gap-huge)
    [nav-start] minmax(0, calc(var(--container-max) - var(--nav-logo-w) - var(--gap-huge))) [nav-end]
    minmax(0, 1fr) [full-end];
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: var(--header-h);
  padding: var(--nav-pad-y) var(--nav-pad-x) 0;
  overflow: hidden;
  background: var(--scheme-bg);
  color: var(--scheme-text);
  transition: height 0.45s var(--nav-ease);
}
.site-header.is-open .site-header__inner { height: var(--nav-open-h); }

.site-header__bar {
  grid-area: 1 / logo-start / 2 / nav-end;
  position: relative;
  z-index: 1;
  pointer-events: none; /* the nav column sits beneath it when open */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-small);
  width: 100%;
  min-height: var(--nav-row);
  margin-bottom: var(--nav-pad-y);
}

.site-header__rule {
  grid-area: 3 / logo-start / 4 / nav-end;
  width: 100%;
  max-width: var(--container-max);
  height: 1px;
  margin: 0 auto;
  border: 0;
  background: var(--scheme-border);
}

.site-logo { display: block; flex-shrink: 0; }
.site-logo,
.site-header__toggle { pointer-events: auto; }
.site-logo img { display: block; width: var(--nav-logo-w); max-width: 100%; height: auto; }

/* Collapsed: the section names, as a quiet label for the hover target */
.site-header__peek {
  display: flex;
  gap: var(--gap-huge);
  font-size: var(--nav-text);
  font-weight: 600;
  line-height: normal;
  transition: opacity 0.2s ease;
}
.site-header.is-open .site-header__peek { opacity: 0; }

/* Expanded panel: four swiss columns + contact and affiliates */
.site-header__panel,
.site-header__aside {
  display: flex;
  flex-direction: column;
  gap: var(--gap-large);
  min-height: 0;
  padding-bottom: var(--nav-pad-y);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.2s ease, transform 0.45s var(--nav-ease), visibility 0s 0.45s;
}
.site-header__panel { grid-area: 1 / nav-start / 3 / nav-end; }
.site-header__aside {
  /* Under the logo, Gap/Medium below it — the same step as nav title → links */
  grid-area: 1 / logo-start / 3 / logo-end;
  padding-top: calc(var(--nav-row) + var(--gap-medium));
  gap: var(--gap-medium);
  font-size: var(--size-text-small);
  line-height: normal;
}
.site-header.is-open :is(.site-header__panel, .site-header__aside) {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease 0.12s, transform 0.45s var(--nav-ease) 0.08s, visibility 0s;
}

.site-nav {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-large);
  align-items: start;
}
.site-nav__col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
}
.site-nav__heading {
  font-size: var(--nav-text);
  font-weight: 600;
  line-height: normal;
}
a.site-nav__heading:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-nav__links {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tiny);
}

/* Magnify: the hovered link grows to full size; its neighbours grow less the further
   away they are. At rest, links match the column headers (Text/Small); the hovered
   link grows 3%. */
.site-nav__links li { --s: 0; }
.site-nav {
  --mega-rest: var(--nav-text);
  --mega-full: calc(var(--mega-rest) * 1.03);
}
.site-nav .nav-link {
  padding: 0;
  font-size: calc(var(--mega-rest) + (var(--mega-full) - var(--mega-rest)) * var(--s));
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: normal;
  transition: font-size 0.3s var(--nav-ease);
}
.site-nav .nav-link:hover { text-decoration: none; }

/* "View all" closes the Portfolio column — set apart from the list */
.nav-link--all {
  --s: 0;
  align-self: flex-start;
  font-weight: 600;
  color: var(--color-electric-violet);
}
.site-footer .nav-link--all { color: var(--color-lavender); }
.nav-link--all span { display: inline-block; transition: transform 0.2s ease; }
.nav-link--all:hover { text-decoration: none; }
.nav-link--all:hover span { transform: translateX(4px); }
.site-nav .nav-link[aria-current="page"] { font-weight: 700; }
@media (hover: hover) {
  .site-nav__links li:is(:hover, :focus-within) { --s: 1; }
  .site-nav__links li:has(+ li:is(:hover, :focus-within)),
  .site-nav__links li:is(:hover, :focus-within) + li { --s: 0.55; }
  .site-nav__links li:has(+ li + li:is(:hover, :focus-within)),
  .site-nav__links li:is(:hover, :focus-within) + li + li { --s: 0.25; }
}

.site-header__contact {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tiny);
  font-style: normal;
}
.site-header__social { display: flex; align-items: center; gap: 16px; }
.site-header__social a { display: block; transition: opacity 0.15s ease; }
.site-header__social a:hover { opacity: 0.6; }
.site-header__social img { filter: brightness(0); } /* icons are white */
.site-header__affiliates {
  display: flex;
  align-self: flex-start;
  align-items: baseline;
  gap: var(--gap-medium);
  margin-top: auto;
  font-size: var(--size-text-small);
  line-height: normal;
}
.site-header__affiliates ul { display: flex; gap: var(--gap-medium); }
.site-header__label { font-weight: 600; }
:is(.site-header__affiliates, .site-header__contact) a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Navigation Link component: Default / Hover / Current / Focus */
.nav-link {
  display: inline-block;
  padding-inline: var(--gap-tiny);
  border-radius: var(--radius-small);
  font-size: var(--nav-text);
  line-height: normal;
  white-space: nowrap;
}
.nav-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-link[aria-current="page"] { font-weight: 600; }
.nav-link:focus-visible,
.site-nav__heading:focus-visible {
  outline: 1px solid var(--color-electric-violet);
  outline-offset: 0;
}

/* Menu toggle: phones, and touch screens of any size (no hover to open it) */
.site-header__toggle {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
@media (hover: none), (pointer: coarse) {
  .site-header__toggle { display: block; }
}
.site-header__toggle span {
  position: absolute;
  left: 2px;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, width 0.2s ease;
}
.site-header__toggle span:first-child { top: 8px; }
.site-header__toggle span:last-child  { top: 14px; }
/* Open: the "<" close glyph from the comp */
.site-header.is-open .site-header__toggle span {
  top: 11px;
  left: 6px;
  width: 12px;
  transform-origin: left center;
}
.site-header.is-open .site-header__toggle span:first-child { transform: rotate(-45deg); }
.site-header.is-open .site-header__toggle span:last-child  { transform: rotate(45deg); }

/* Layout=Mobile / Mobile Open — from the Tablet mode down */
@media (max-width: 1023.98px) {
  .site-header {
    --nav-logo-w: 312.458px;
    --nav-row: 50.28px;
    --header-h: calc(var(--nav-pad-y) * 2 + var(--nav-row));
  }
  .site-header__rule,
  .site-header__peek { display: none; }
  .site-logo { flex: 1 1 0; min-width: 0; }
  .site-header__toggle { display: block; }

  .site-header.is-open .site-header__inner {
    position: fixed;
    inset: 0;
    height: auto;
    overflow-y: auto;
  }
  .site-header__inner { display: flex; flex-direction: column; }
  .site-header__panel { gap: var(--gap-huge); }
  .site-header__panel,
  .site-header__aside { flex: none; overflow: visible; padding-top: 0; }
  .site-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-huge);
    --mega-full: var(--mega-rest);
  }
  .site-header__affiliates { margin-top: 0; }
}

.nav-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__inner,
  .site-header__panel,
  .site-header__peek,
  .site-nav .nav-link,
  .ghost-field { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* ==========================================================================
   Portfolio grid
   ========================================================================== */
.portfolio {
  padding: var(--pad-section-global);
}

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-large);
}

.project-tile {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
}

.project-tile__media {
  aspect-ratio: 320 / 180;
  overflow: hidden;
  border: 1px solid var(--scheme-border);
  border-radius: var(--corners-media);
}

.project-tile__media :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma: Project Tile (Card), Default → Hover. Title & Tags is a plain
   left-aligned flex row. Staged, ~400ms in total:
     hover in  — the title slides over (250ms), then the tags fade in (200ms)
     hover out — the tags fade out (150ms), then the title slides back
   The space for the tags opens via a one-cell grid whose track animates
   0fr → 1fr (CSS can't animate width to "auto"). Tags never shrink or wrap. */
.project-tile {
  --tile-ease: cubic-bezier(0, 0, 0.58, 1); /* Figma EASE_OUT */
  --tile-slide: 0.25s;
}

.project-tile__meta {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 52px;
  transition: gap var(--tile-slide) var(--tile-ease) 0.1s;
}

.project-tile__tags {
  display: grid;
  grid-template-columns: 0fr;
  flex: 0 1 auto;
  min-width: 0;
  transition: grid-template-columns var(--tile-slide) var(--tile-ease) 0.1s;
}

.project-tile__tags .tags {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.15s var(--tile-ease);
}
.project-tile__tags .tag {
  flex: none;
  white-space: nowrap;
}

.project-tile__title {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  font-family: var(--font-headline);
  font-size: var(--size-headline-small);
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.project-tile__arrow {
  position: relative;
  flex: none;
  width: 26px;
  height: 21.4744px;
  margin-top: 6px;
}
.project-tile__arrow img {
  position: absolute;
  inset: 0;
  transition: opacity var(--tile-slide) var(--tile-ease);
}
.project-tile__arrow-hover { opacity: 0; }

.project-tile:is(:hover, :focus-visible, :focus-within) .project-tile__meta {
  gap: var(--gap-medium);
  transition-delay: 0s;
}
.project-tile:is(:hover, :focus-visible, :focus-within) .project-tile__tags {
  grid-template-columns: 1fr;
  transition-delay: 0s;
}
.project-tile:is(:hover, :focus-visible, :focus-within) .project-tile__tags .tags {
  opacity: 1;
  transition: opacity 0.2s var(--tile-ease) 0.2s;
}
.project-tile:is(:hover, :focus-visible) .project-tile__arrow-hover { opacity: 1; }

/* Tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-small);
}

.tag {
  padding: var(--pad-control-tiny) var(--pad-control-small);
  border: 0.5px solid currentColor;
  border-radius: var(--corners-tag);
  font-size: var(--size-text-tiny);
  line-height: normal;
}
.tag--orange { border-color: var(--color-flush-orange); }
.tag--violet { border-color: var(--color-electric-violet); }
.tag--yellow { border-color: var(--color-yellow); }
.tag--pink   { border-color: var(--color-pink); }
.tag--green  { border-color: var(--color-green); }
.sc-tag--pill { border-radius: var(--radius-round); }

/* ==========================================================================
   Shared: media frame + project summary (tags + short description)
   ========================================================================== */
.media {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--scheme-fg);
  border: 1px solid var(--scheme-border);
  border-radius: var(--corners-media);
}
.media :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-medium);
  width: 100%;
  max-width: 560px;
  margin-left: auto;
}
.project-summary p {
  font-size: var(--size-text-small);
  line-height: normal;
}

/* ==========================================================================
   Projects list page
   ========================================================================== */
.project-list {
  padding: var(--pad-section-global);
}

.project-list__stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
}

.project-row {
  display: flex;
  flex-direction: column;
  gap: var(--gap-large);
}

.project-row__title {
  font-family: var(--font-headline);
  font-size: var(--size-headline-medium);
  line-height: 0.85; /* 44px row @ 52px, as in the comp */
  letter-spacing: -0.06em; /* -3.12px @ 52px */
  text-transform: uppercase;
}

.project-row__media { aspect-ratio: 1600 / 437.625; }

.project-row__media :is(img, video) { transition: transform 0.4s ease; }
.project-row:hover .project-row__media :is(img, video) { transform: scale(1.02); }
.project-row:hover .project-row__title { color: var(--color-electric-violet); }

/* ==========================================================================
   Layout tree (rendered from /content by tools/render.js)
   Section > Container / Column > Component > Block. Each wrapper is a flex
   column by default; direction, gap, padding and fill/hug/fixed sizing come
   from the content as inline styles.
   ========================================================================== */
.sc-section,
.sc-container,
.sc-column,
.sc-component {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.sc-section { position: relative; }

/* Project header (js/top.js): the cover fills the rest of the first screen;
   on the first scroll the header pins while the cover grows up to 16:9 from its
   bottom edge, over the title block, then the page scrolls on */
.is-top-fill .sc-component > .sc-media { z-index: 1; aspect-ratio: auto !important; }
.is-top-run { box-sizing: border-box; }
.is-top-run > .sc-container { position: sticky; }
.is-top-run .sc-component > .sc-media { will-change: height, margin-top; }
.is-top-run .sc-component > :not(.sc-media) { will-change: opacity; }

/* Images never size their frame: the frame comes from aspect / fill */
.sc-media :is(img, video) {
  position: absolute;
  inset: 0;
}

/* ==========================================================================
   Blocks (Figma: Style Guide & Component Library → Primitives)
   Text blocks fill their wrapper; tags, buttons and action rows hug.
   ========================================================================== */
.sc-tag,
.sc-button,
.sc-actions { align-self: flex-start; }

/* Headline — Headline Size: Hero | Huge | Large | Medium | Small | Tiny */
.sc-headline {
  font-family: var(--font-headline);
  line-height: normal;
  overflow-wrap: break-word;
}
.sc-headline--hero   { font-size: var(--size-headline-hero);   letter-spacing: -0.07em; } /* -11.76px @ 168 */
.sc-headline--huge   { font-size: var(--size-headline-huge);   letter-spacing: -0.07em; } /* -8.12px @ 116 */
.sc-headline--large  { font-size: var(--size-headline-large);  letter-spacing: -0.05em; line-height: 1; }
.sc-headline--medium { font-size: var(--size-headline-medium); letter-spacing: -0.06em; text-transform: uppercase; }
.sc-headline--small  { font-size: var(--size-headline-small);  text-transform: uppercase; }
.sc-headline--tiny   { font-size: var(--size-headline-tiny); }

/* Text — Text Size: Huge | Large | Medium | Small | Tiny */
.sc-text { line-height: normal; }
.sc-text--huge   { font-size: var(--size-text-huge); }
.sc-text--large  { font-size: var(--size-text-large); }
.sc-text--medium { font-size: var(--size-text-medium); }
.sc-text--small  { font-size: var(--size-text-small); }
.sc-text--tiny   { font-size: var(--size-text-tiny); }

.sc-label { font-size: var(--size-text-tiny); line-height: normal; }

/* Button — Button Priority: Primary | Secondary | Link (State: Default | Hover)
   min-height 44px is the touch target from the component notes, on purpose
   taller than the Figma frame. */
.sc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--pad-control-medium) var(--pad-control-huge);
  border: 1px solid transparent;
  border-radius: var(--corners-button);
  font: 400 var(--size-text-small) / normal var(--font-text);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sc-button--primary {
  background:
    linear-gradient(var(--transparency-neutral-lightest-15), var(--transparency-neutral-lightest-15)),
    var(--scheme-button-surface);
  color: var(--scheme-button-text);
}
.sc-button--primary:hover { background: var(--scheme-button-surface); }
.sc-button--secondary {
  background: var(--transparency-neutral-darkest-10);
  border-color: var(--scheme-button-border);
  color: var(--scheme-text);
}
.sc-button--secondary:hover { background: transparent; }
.sc-button--tertiary {
  min-height: 0;
  padding: var(--pad-control-tiny);
  border: 0;
  border-radius: 0;
  color: var(--scheme-text);
}
/* Hover widens to 4/8 padding in Figma; the negative margin keeps it from shifting */
.sc-button--tertiary:hover {
  padding-inline: var(--gap-tiny);
  margin-inline: calc(var(--pad-control-tiny) - var(--gap-tiny));
  background:
    linear-gradient(var(--transparency-neutral-lightest-15), var(--transparency-neutral-lightest-15)),
    var(--scheme-accent);
}
.sc-button--round { border-radius: var(--radius-round); }

/* Action Row — Action Type: Buttons | Email Capture */
.sc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap-medium);
}
.sc-actions--email-capture { align-items: center; flex-wrap: nowrap; max-width: 100%; }

/* Input — Field Type: Basic | Email | Long Form */
.sc-field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tiny);
  width: 100%;
  max-width: 644px;
  padding: var(--pad-control-small) var(--pad-control-medium);
  border-radius: var(--corners-input);
}
.sc-field--email { padding-block: var(--pad-control-tiny); }
.sc-actions .sc-field { flex: 0 1 auto; width: 644px; min-width: 0; padding-inline: 0; }
.sc-field__label {
  padding-left: var(--pad-control-medium);
  font-size: var(--size-text-tiny);
  line-height: normal;
}
.sc-field__input {
  width: 100%;
  min-height: 44px;
  padding: var(--pad-control-medium) var(--pad-control-large);
  border: 1px solid #000;
  border-radius: var(--radius-medium);
  background: #fff;
  color: var(--scheme-text);
  font: 400 var(--size-text-small) / normal var(--font-text);
}
.sc-field__input::placeholder { color: var(--scheme-text); opacity: 1; }
textarea.sc-field__input { min-height: 128px; resize: vertical; }

/* Accent character in a headline (the Hero's semicolon) */
.sc-accent { color: var(--color-lavender); }

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

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: var(--gap-large);
  padding: var(--pad-block-medium) var(--pad-section-global);
  background: var(--scheme-bg);
  color: var(--scheme-text);
  font-size: var(--size-text-small);
  line-height: normal;
}

.site-footer a {
  padding-inline: var(--gap-tiny);
  border-radius: var(--radius-small);
}
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Message form: ghosted fields. Rest = ghosted; hover = a touch brighter (the message
   field opens up to the full writing state); focus (writing) = fully bright;
   filled = lavender. */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-large);
}
.ghost-field {
  --ghost-line: rgba(246, 245, 241, 0.16);
  --ghost-hint: rgba(246, 245, 241, 0.35);
  display: block;
  width: 100%;
  padding: var(--pad-control-large);
  border: 1px solid var(--ghost-line);
  border-radius: var(--corners-input);
  background: transparent;
  color: var(--scheme-text);
  font: 400 var(--size-text-small) / 1.35 var(--font-text);
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, height 0.4s var(--nav-ease, ease);
}
.ghost-field::placeholder { color: var(--ghost-hint); opacity: 1; transition: color 0.25s ease; }
.ghost-field:hover {
  --ghost-line: rgba(246, 245, 241, 0.32);
  --ghost-hint: rgba(246, 245, 241, 0.55);
}
.ghost-field:focus,
.ghost-field--message:hover:placeholder-shown {
  --ghost-line: var(--scheme-text);
  --ghost-hint: rgba(246, 245, 241, 0.55);
  outline: none;
  background: rgba(246, 245, 241, 0.05);
}
.ghost-field:not(:placeholder-shown):not(:focus) {
  --ghost-line: var(--color-lavender);
  background: rgba(207, 164, 255, 0.08);
  color: var(--color-lavender);
}

.ghost-field--message {
  height: calc(var(--size-text-small) * 1.35 * 2 + var(--pad-control-small) * 2 + 2px);
  padding: var(--pad-control-small); /* Padding/Control/Small */
  font-size: var(--size-text-small);
  resize: none;
}
.ghost-field--message:is(:hover, :focus, :not(:placeholder-shown)) { height: 220px; }

.contact-form__reply { display: flex; flex-direction: column; gap: var(--gap-small); }
.contact-form__label { font-weight: 600; }
.contact-form__row { display: flex; align-items: center; gap: var(--gap-medium); max-width: 644px; }
.ghost-field--email { flex: 1 1 auto; min-width: 0; min-height: 44px; padding-block: var(--pad-control-medium); }
.contact-form__send {
  flex: none;
  background: var(--scheme-text);
  color: var(--scheme-bg);
  transition: background-color 0.2s ease;
}
.contact-form__send:hover { background: var(--color-lavender); }
.contact-form__status { color: var(--color-lavender); }

.site-footer__upper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-huge);
}

/* Left column: everything is as wide as the logo. Right column hugs its links.
   The row spaces the two apart. */
.site-footer__identity {
  --footer-logo-w: 312.458px;
  display: flex;
  flex: 0 1 var(--footer-logo-w);
  flex-direction: column;
  gap: var(--gap-large);
  min-width: 0;
}
.site-footer__address {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tiny);
}
.site-footer__address a { padding: 0; }

.site-footer__social { display: flex; align-items: center; gap: 16px; }
.site-footer__social a { display: block; padding: 0; border-radius: var(--radius-small); opacity: 1; transition: opacity 0.15s ease; }
.site-footer__social a:hover { opacity: 0.7; }
.site-footer__social img { display: block; }
/* Social icons stay square and scale with the viewport, never under 16px */
:is(.site-header__social, .site-footer__social) li { flex: none; }
:is(.site-header__social, .site-footer__social) img {
  width: clamp(16px, 1.16vw, 20px);
  height: auto;
  aspect-ratio: 1;
}

/* Same four columns as the top nav, each as wide as its links. 2×2 from tablet
   landscape (under 1280px), 1×4 from tablet portrait (under 1024px). */
.site-footer__nav {
  display: grid;
  flex: 0 1 auto;
  grid-template-columns: repeat(4, auto);
  gap: var(--gap-large) var(--gap-huge);
}
@media (max-width: 1279.98px) {
  .site-footer__nav { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 1023.98px) {
  .site-footer__nav { grid-template-columns: auto; }
}
/* Phones: the two footer columns stack */
@media (max-width: 767.98px) {
  .site-footer__upper { flex-direction: column; }
  .site-footer__identity { flex: none; width: 100%; max-width: var(--footer-logo-w); }
  .site-footer__nav { flex: none; width: 100%; }
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
  min-width: 0;
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-small);
}
.site-footer .nav-link { white-space: normal; }
.site-footer__heading { font-weight: 600; }
a.site-footer__heading { padding: 0; }

.site-footer__logo { display: flex; }
.site-footer__logo a { display: block; padding: 0; }
.site-footer__logo img { width: 312.458px; max-width: 100%; height: auto; }

.site-footer__rule {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--scheme-border);
}

.site-footer__lower {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-small) var(--gap-large);
  flex-wrap: wrap;
}

.site-footer__credits {
  display: flex;
  gap: var(--gap-large);
  font-size: var(--size-text-tiny);
}

.site-footer__subnav { display: flex; gap: var(--gap-large); flex-wrap: wrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .portfolio__grid { grid-template-columns: 1fr; }
  .project-summary { align-items: flex-start; margin-left: 0; }
  .project-row__media { aspect-ratio: 16 / 9; }
  [data-m-aspect] { aspect-ratio: var(--m-aspect) !important; }

  /* mobile: "cols" — a row of columns becomes a single column */
  [data-m="cols"] { flex-direction: column !important; }
  [data-m="cols"] > * { flex: none !important; width: auto !important; align-self: stretch !important; }

  /* mobile: "stack" — the wrapper becomes one column of 4:3 images;
     rows nested inside it stay side by side at equal widths */
  [data-m="stack"] { flex-direction: column !important; aspect-ratio: auto !important; }
  [data-m="stack"] * { flex-basis: auto !important; }
  [data-m="stack"] > * { flex: none !important; width: auto !important; height: auto !important; align-self: stretch !important; }
  [data-m="stack"] [data-dir="row"] > * { flex: 1 1 0 !important; }
  [data-m="stack"] .sc-media { aspect-ratio: 4 / 3 !important; height: auto !important; }
}

@media (max-width: 560px) {
  .site-footer__credits { flex-direction: column; gap: var(--gap-tiny); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}