/* components.css — shared nav, footer, cards, CTAs, sister-brand strip */

:root {
  --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Underline draw mechanic (universal CTA) ---------- */
.cta-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 600;
  padding-bottom: 3px;
  letter-spacing: 0.01em;
}
.cta-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0%;
  height: 1.5px;
  background: #A3AEB8;
  transition: width var(--dur-slow) var(--ease-out);
}
.cta-link:hover::after,
.cta-link:focus-visible::after,
.cta-link.active::after { width: 100%; }

.on-dark .cta-link::after,
.section-dark .cta-link::after { background: #fff; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  z-index: 100;
  background: transparent;
  transition: background var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.nav.is-scrolled,
.nav.is-solid {
  background: #D1C7BD;                          /* greige — matches new palette */
  box-shadow: 0 2px 24px rgba(0,0,0,0.12);
}

/* Nav text stays white over the peachy hero — high enough mass to read,
   and crossfades into the warm scenes alongside the background. */

.nav-logo {
  display: flex; align-items: center;
  height: 100%;
}
.nav-logo img { height: 28px; width: auto; }

/* ---------- Kastenlab wordmark — compass icon + animated SVG text ----------
   Used in both nav header and footer. Stroke-draw + fill-fade animation
   triggers on first viewport intersection (handled in reveal.js). */
.kl-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  line-height: 1;
}
.kl-wordmark-icon {
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0;
  color: currentColor;
}
.kl-wordmark-svg {
  height: 1em;
  width: auto;
  flex-shrink: 0;
  overflow: visible;
}
.kl-wordmark-text {
  fill: currentColor;
  font-family: var(--font-wordmark);
  font-weight: 700;
}
.kl-letter { fill: currentColor; }

/* Per-letter random fade — each tspan picks up a random --letter-delay
   from JS, then fades from 0 to full opacity. JS shuffles delays on every
   page load so the order is fresh each visit. */
.js .kl-letter {
  fill-opacity: 0;
  transition: fill-opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--letter-delay, 0ms);
}
.kl-wordmark.is-drawn .kl-letter {
  fill-opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .js .kl-letter {
    fill-opacity: 1 !important;
    transition: none !important;
  }
}

/* Size variants */
.kl-wordmark--nav { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: 0.08em; }
.kl-wordmark--footer { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: 0.08em; }

.nav-items {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px);
}
/* Shared hover signature for header + footer links:
   thin underline appears AND the link lifts 2px upward. */
.nav-items a {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  display: inline-block;
  transition: transform 280ms var(--ease-out);
}
.nav-items a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0%;
  height: 1.5px;
  background: var(--color-accent-light);
  transition: width var(--dur-slow) var(--ease-out);
}
.nav-items a:hover,
.nav-items a:focus-visible { transform: translateY(-2px); }
.nav-items a:hover::after,
.nav-items a:focus-visible::after,
.nav-items a.active::after { width: 100%; }


/* Mobile hamburger */
.nav-toggle {
  display: none;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  color: #fff;
}
.nav-toggle .bar {
  display: block;
  width: 22px; height: 1.5px;
  background: #fff;
  position: relative;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: '';
  position: absolute;
  left: 0; width: 22px; height: 1.5px;
  background: #fff;
}
.nav-toggle .bar::before { top: -7px; }
.nav-toggle .bar::after  { top:  7px; }

/* Full-screen mobile overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-navy);
  background-image: radial-gradient(circle at 1px 1px, rgba(139,115,85,0.20) 1px, transparent 0);
  background-size: 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 80px var(--gutter) var(--gutter);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out),
              visibility 0s linear var(--dur-mid);
}
.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.nav-overlay a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 6vw, 44px);
  color: #fff;
  letter-spacing: -0.02em;
  padding: 18px 0;
  border-bottom: 1px solid rgba(163,174,184,0.25);
  width: 100%;
  display: block;
}
.nav-overlay a:last-of-type { border-bottom: 0; }
.nav-overlay .nav-overlay-close {
  position: absolute;
  top: 16px; right: var(--gutter);
  width: 40px; height: 40px;
  font-family: var(--font-mono);
  font-size: 22px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 768px) {
  .nav-items, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

body.nav-locked { overflow: hidden; }

/* ---------- Section number eyebrow ---------- */
.section-number {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #A3AEB8;
  display: block;
  margin-bottom: 16px;
}
.section-dark .section-number,
.on-dark .section-number { color: #CACECF; }

/* ---------- Section spine: huge background numeral + small mono label ---------- */
.section-spine {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 32px);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section-spine-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(120px, 18vw, 240px);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(163,174,184,0.55);
  paint-order: stroke fill;
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
  margin-top: -0.08em;
}
.section-dark .section-spine-num,
.on-dark .section-spine-num {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(202,206,207,0.45);
}

.section-spine-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: clamp(14px, 2vw, 28px);
  min-width: 0;
  flex: 1 1 auto;
}
.section-spine-meta .section-number { margin-bottom: 0; }
.section-spine-meta h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-navy);
  margin: 0;
  max-width: 18ch;
}
.section-dark .section-spine-meta h2,
.on-dark .section-spine-meta h2 { color: #fff; }
.section-spine-meta p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-dark);
  max-width: 56ch;
}
.section-dark .section-spine-meta p { color: var(--color-pale); }

@media (max-width: 720px) {
  .section-spine { flex-direction: column; gap: 0; }
  .section-spine-num { font-size: clamp(96px, 28vw, 160px); }
  .section-spine-meta { padding-top: 0; }
}

/* ---------- Type slab — full-bleed editorial quote ---------- */
.type-slab {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 3.8vw, 58px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(47, 65, 86, 0.55);
  max-width: 22ch;
  padding: clamp(40px, 6vw, 96px) 0;
}
.type-slab .accent { color: #2F4156; font-style: normal; font-weight: 700; }
.type-slab .quote-mark {
  display: inline-block;
  font-size: 0.6em;
  vertical-align: 0.4em;
  color: rgba(47, 65, 86, 0.35);
  margin-right: 0.12em;
}

/* ---------- Mono marginalia (fixed page furniture) ---------- */
.marginalia {
  position: fixed;
  z-index: 90;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-pale);
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0.65;
}
.marginalia--left {
  left: 14px;
  top: 50%;
  writing-mode: vertical-rl;
  transform: rotate(180deg) translateY(50%);
}
.marginalia--bl {
  left: var(--gutter);
  bottom: 18px;
  display: flex;
  gap: 18px;
}
.marginalia--tr {
  right: var(--gutter);
  top: 88px;
}
.marginalia a { pointer-events: auto; color: inherit; }

@media (max-width: 900px) {
  .marginalia--left, .marginalia--bl, .marginalia--tr { display: none; }
}

/* ---------- Inline section index (for project cards) ---------- */
.work-index {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: 10px;
  display: block;
}

/* ---------- Fine-line carpentry sketches — scattered decoration ----------
   Tree rings, hammer, saw blade, vernier caliper. Hand-drawn feel,
   low contrast, walnut color. Positioned absolutely in their host sections. */
.line-sketch {
  position: absolute;
  color: var(--color-walnut, #D1C7BD);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
/* Atmospheric background image scoped to the maker text block.
   Sits as position:absolute behind all text content.
   20px inset on all sides = 20px breathing room between image edge and text block edge. */
.maker-text {
  position: relative; /* establish containing block for the bg image */
  min-width: 0;
  overflow: hidden;
}
.maker-text-bg {
  position: absolute;
  inset: -20px; /* extend 20px beyond the text block edges = text has 20px gap to image border */
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  object-position: left center; /* show the ring detail on the left of the image */
  opacity: 0.13;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
  border-radius: 2px;
}
/* Ensure all text content sits above the bg image */
.maker-text > *:not(.maker-text-bg) {
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .maker-text-bg { opacity: 0.09; }
}

.tree-rings-caption {
  position: absolute;
  right: clamp(20px, 4vw, 60px);
  top: clamp(40px, 5vw, 80px);
  margin: 0;
  font-family: 'DM Serif Display', 'Georgia', serif;
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: 0.02em;
  color: var(--color-walnut, #D1C7BD);
  opacity: 0.92;
  max-width: 16ch;
  z-index: 2;
  text-align: right;
  pointer-events: none;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .tree-rings-caption { position: static; margin-bottom: 12px; text-align: left; }
}
.line-sketch--hammer     { width: clamp(220px, 24vw, 340px); }
.line-sketch--saw        { width: clamp(200px, 22vw, 320px); }
.line-sketch--caliper    { width: clamp(280px, 38vw, 520px); display: block; margin: clamp(20px,3vw,40px) 0 0; opacity: 0.32; position: static; color: var(--color-accent, #D1C7BD); }

.section-dark .line-sketch,
.on-dark .line-sketch { color: var(--color-cream, #F1EDE6); opacity: 0.22; }

/* ---------- Sketch motifs — draftsman's marks ----------
   Used as inline SVGs with class `.sketch`. Walnut, thin stroke,
   low opacity — should feel like a pencil annotation, never shouty. */
.sketch {
  color: var(--color-accent);
  opacity: 0.55;
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
  flex-shrink: 0;
}
.on-dark .sketch,
.section-dark .sketch { color: var(--color-accent-light); opacity: 0.65; }

.sketch--compass { width: 36px; height: 36px; }
.sketch--cross   { width: 14px; height: 14px; }
.sketch--target  { width: 28px; height: 28px; }
.sketch--bracket { width: 14px; height: 70%; }
.sketch--underline { width: 100%; height: 8px; display: block; opacity: 0.7; }

/* Floating compass mark in hero corner */
.hero-compass {
  position: absolute;
  top: clamp(88px, 12vh, 132px);
  right: var(--gutter);
  width: 40px; height: 40px;
  color: var(--color-accent-light);
  opacity: 0.5;
  z-index: 2;
  pointer-events: none;
}

/* Crosshair "+" used at corner intersections (figure marks) */
.sketch-corner {
  position: absolute;
  width: 14px; height: 14px;
  color: #A3AEB8;
  opacity: 0.65;
  pointer-events: none;
}

/* Ruler tick marks along the process timeline vertical line */
.process-list .ruler-tick {
  position: absolute;
  left: clamp(70px, 9vw, 130px);
  width: 8px;
  height: 1px;
  background: #A3AEB8;
  opacity: 0.65;
}
@media (max-width: 900px) { .process-list .ruler-tick { display: none; } }

/* Section spine: small pencil-sketch underline below the section number */
.section-spine-meta .section-number-with-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Value pillar ---------- */
.pillar {
  padding: clamp(28px, 3vw, 40px);
  border-left: 2px solid #A3AEB8;
  transition: border-left-width var(--dur-mid) var(--ease-out),
              border-left-color var(--dur-mid) var(--ease-out);
}
.pillar:hover { border-left-width: 4px; border-left-color: #CACECF; }

.pillar-number {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #A3AEB8;
  margin-bottom: 16px;
}
.section-dark .pillar-number { color: #CACECF; }

.pillar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}
.pillar-title::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: var(--color-accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.pillar:hover .pillar-title::after { width: 100%; }
.section-dark .pillar-title::after { background: var(--color-accent-light); }

.pillar-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Project card ---------- */
.project-card {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--color-light-bg);
}
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.project-card:hover img,
.project-card:focus-visible img { transform: scale(1.03); }

.project-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(28, 22, 14, 0.65) 0%,
    rgba(28, 22, 14, 0.25) 45%,
    rgba(28, 22, 14, 0.00) 100%
  );
  opacity: 0;
  transition: opacity 350ms ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(18px, 2vw, 28px);
  pointer-events: none;
}
.project-card:hover .project-card-overlay,
.project-card:focus-visible .project-card-overlay {
  opacity: 1;
}
.project-card-code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.82);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.project-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: #fff;
  letter-spacing: -0.01em;
}
.project-card-loc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  margin-top: 4px;
}

/* ---------- Material / filter pills ---------- */
.material-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 4px 10px;
  border-radius: 2px;
  margin: 0 6px 8px 0;
  text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.material-tag:hover { background: var(--color-accent); color: #fff; }

.filter-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 16px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  border-radius: 2px;
}
.filter-pill.active,
.filter-pill:hover { background: var(--color-accent); color: #fff; }

/* ---------- Footer — compact 3-col + CTA layout, refined compass ----------
   Vertical spread cut ~50% so the whole footer fits on one screen.
   Stack:  Headline → Logo+Blurb row → 3 cols + CTA inline → Trust+Copyright row */

.site-footer {
  position: relative;
  background: linear-gradient(160deg,
    #080606 0%,
    #0D0A08 30%,
    #141010 60%,
    #1C1512 100%);
  color: #fff;
  border-radius: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 40px) 0 0;
  padding: clamp(40px, 5vw, 72px) clamp(32px, 5vw, 72px) clamp(20px, 2.5vw, 36px);
  overflow: hidden;
}

/* Horizontal wood grain — sits along the bottom edge of the footer,
   landscape aspect, low contrast cream so it reads as a subtle texture. */
.footer-wood-grain {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(120px, 18vh, 220px);
  color: #F1EDE6;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
.footer-wood-grain use {
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .footer-wood-grain { height: clamp(90px, 14vh, 140px); opacity: 0.08; }
}

/* 1. Editorial headline */
.footer-headline {
  font-family: 'DM Serif Display', 'Georgia', serif;
  font-weight: 400;
  font-size: clamp(24px, 4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 clamp(24px, 3vw, 44px);
  white-space: nowrap; /* force single line */
}
.footer-headline .word { display: inline; }
.footer-headline .plus {
  display: inline;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  color: #fff;
  margin: 0 0.06em;
}

/* 2. Logo + blurb row — compact */
.footer-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(24px, 4vw, 72px);
  padding-bottom: clamp(24px, 3vw, 44px);
  margin-bottom: clamp(24px, 3vw, 44px);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.footer-intro-blurb p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  max-width: 60ch;
  margin: 0;
}

/* 3. Two link columns + info box — identical hover signature throughout
   (walnut-accent underline + 2px lift, matching the header nav exactly). */
.footer-link-grid {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(260px, 1.6fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.footer-col { min-width: 0; }
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin: 0 0 16px;
}
.footer-col-list { list-style: none; margin: 0; padding: 0; }
.footer-col-list li { margin-bottom: 10px; }

/* Identical to .nav-items a — walnut accent underline + 2px lift on hover */
.footer-col-list a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  transition: transform 280ms var(--ease-out);
}
.footer-col-list a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0%;
  height: 1.5px;
  background: var(--color-accent-light);
  transition: width var(--dur-slow) var(--ease-out);
}
.footer-col-list a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0%;
  height: 1.5px;
  background: var(--color-accent-light);
  transition: width var(--dur-slow) var(--ease-out);
}
.footer-col-list a:hover,
.footer-col-list a:focus-visible { transform: translateY(-2px); }
.footer-col-list a:hover::after,
.footer-col-list a:focus-visible::after { width: 100%; }

/* Info box — compass + address + legal */
.footer-box {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 3px;
  padding: clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.footer-box-mark {
  width: 52px;
  height: 52px;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
}
.footer-box-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin: 0;
}
.footer-box-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.88);
  margin: 0;
}
.footer-box-body a { color: inherit; text-decoration: none; }
.footer-box-body a:hover { text-decoration: underline; }
.footer-box-legal {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer-box-copyright {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.38);
  margin: 0;
}

/* Atelya sister brands bottom strip */
.footer-atelya-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: clamp(16px, 2vw, 28px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.footer-atelya-mark {
  width: 16px; height: 16px;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.footer-atelya-prefix { color: rgba(255,255,255,0.38); }
.footer-atelya-brand {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 200ms;
}
.footer-atelya-brand:hover { color: #fff; }
.footer-atelya-sep { color: rgba(255,255,255,0.25); }

@media (max-width: 768px) {
  .footer-link-grid { grid-template-columns: 1fr 1fr; }
  .footer-box { grid-column: 1 / -1; }
  .footer-intro { grid-template-columns: 1fr; }
}