/* Bukas Studio: shared chrome. The header, the footer and the About sheet, the same on every page.
 *
 * Markup comes from assets/chrome.js; this file is the only place they are styled.
 * Both carry their own colour and type values, scoped to .ft and .about, so the
 * homepage (inline tokens) and the work pages (tokens.css) render them identically.
 */
.hdr, .ft, .about {
  --c-ink: #10110F;
  --c-ink-2: #1A1B18;
  --c-warm: #EEEDE8;
  --c-warm-2: rgb(238 237 232 / 0.62);
  --c-warm-3: rgb(238 237 232 / 0.38);
  --c-acid: #C2FB49;
  --c-rule: rgb(238 237 232 / 0.12);
  --c-display: Archivo, "Arial Narrow", ui-sans-serif, sans-serif;
  --c-body: "General Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --c-gut: clamp(1rem, 2.4vw, 2rem);
  --c-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --c-ease-io: cubic-bezier(0.76, 0, 0.18, 1);
  font-family: var(--c-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.ft :is(h2, h3, p, dl, dd), .about :is(h2, h3, p, dl, dd) { margin: 0; }
.hdr :focus-visible, .ft :focus-visible, .about :focus-visible { outline: 2px solid var(--c-acid); outline-offset: 3px; }

/* ---- header: fixed, recolours to the section under it (data-tone) ---- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem var(--c-gut); color: var(--c-warm); background: rgb(16 17 15 / 0); transition: color 300ms var(--c-ease), background-color 300ms var(--c-ease); }
.hdr.light { color: var(--c-ink); }
/* once scrolled, the header carries its own ground, so copy never runs under the nav */
.hdr.solid { background: rgb(16 17 15 / 0.94); }
.hdr.solid.light { background: rgb(242 241 236 / 0.94); }
.hdr.solid.acid { background: rgb(179 209 99 / 0.96); } /* the muted acid of the call's screens */
.hdr a { color: inherit; }
.brand { justify-self: start; display: block; line-height: 0; }
.brand svg { height: 1.5rem; width: auto; }
.hdr .logo .lo { fill: var(--c-acid); }
.hdr.acid .logo .lo { fill: currentColor; } /* acid on acid vanishes: mono lockup over the call */
.hdr-nav { display: flex; gap: 1.25rem; font-size: 0.875rem; }
.hdr-nav a { text-decoration: none; opacity: 0.86; transition: opacity 200ms; }
.hdr-nav a:hover, .hdr-nav a:focus-visible { opacity: 1; text-decoration: underline; text-decoration-color: var(--c-acid); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.hdr .hdr-cta { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 2px; background: var(--c-warm); color: var(--c-ink); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background 300ms var(--c-ease), color 300ms var(--c-ease); }
.hdr.light .hdr-cta { background: var(--c-ink); color: var(--c-warm); }
.hdr .hdr-cta:hover { background: var(--c-acid); color: var(--c-ink); }
.hdr-cta svg { width: 0.75em; height: 0.75em; flex: none; }
/* phones keep one link, the price, between the lockup and the main action */
@media (max-width: 720px) {
  .hdr { grid-template-columns: 1fr auto auto; }
  .hdr .hdr-cta { grid-column: 3; }
  .hdr-nav a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; } /* 44px to tap, no taller header */
  .hdr-nav a:not([href$="#services"]) { display: none; }
}
@media (max-width: 340px) { .hdr { grid-template-columns: 1fr auto; } .hdr .hdr-cta { grid-column: 2; } .hdr-nav { display: none; } }

/* ---- footer ---------------------------------------------------------- */
.ft { padding: 3rem var(--c-gut) 1.5rem; background: var(--c-ink); color: var(--c-warm); }
.ft a { color: inherit; }
.ft-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2rem; }
.ft-nav a { display: block; padding: 0.35rem 0; border-bottom: 1px solid var(--c-rule); font-family: var(--c-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.5; letter-spacing: -0.03em; text-decoration: none; transition: color 250ms; }
.ft-nav a:hover, .ft-nav a:focus-visible { color: var(--c-acid); }
.ft-col h3 { margin-bottom: 0.75rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-warm-3); }
.ft-col p, .ft-col a { display: block; font-size: 0.875rem; color: var(--c-warm-2); }
.ft-col a { color: var(--c-warm); text-decoration-color: var(--c-acid); text-underline-offset: 0.25em; margin-bottom: 0.25rem; }
.ft-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 5rem; font-size: 0.8125rem; color: var(--c-warm-2); }
.ft-bar a { text-decoration: none; color: var(--c-warm); }
.ft-logo { margin-top: 3rem; }
.ft-logo svg { display: block; width: 100%; height: auto; }
.ft-logo .lo { fill: var(--c-acid); }
@media (max-width: 720px) { .ft-grid { grid-template-columns: 1fr; } }

/* ---- about: a sheet from the right ----------------------------------- */
.about { position: fixed; inset: 0 0 0 auto; width: min(30rem, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--c-ink-2); color: var(--c-warm); overflow-y: auto; overscroll-behavior: contain; translate: 100% 0; transition: translate 700ms var(--c-ease-io), overlay 700ms allow-discrete, display 700ms allow-discrete; }
.about:focus, .about:focus-visible { outline: none; } /* the Close button carries the focus ring */
.about[open] { display: flex; flex-direction: column; translate: 0 0; }
@starting-style { .about[open] { translate: 100% 0; } }
.about::backdrop { background: rgb(16 17 15 / 0); transition: background 700ms var(--c-ease), overlay 700ms allow-discrete, display 700ms allow-discrete; }
.about[open]::backdrop { background: rgb(16 17 15 / 0.6); }
@starting-style { .about[open]::backdrop { background: rgb(16 17 15 / 0); } }
.about-top { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--c-gut); font-size: 0.875rem; color: var(--c-warm-2); }
.about-x { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border: 0; background: none; color: var(--c-warm); font: inherit; cursor: pointer; }
.about-x:hover, .about-x:focus-visible { text-decoration: underline; text-decoration-color: var(--c-acid); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.about-word { padding: 0.75rem var(--c-gut) 1.5rem; border-bottom: 1px solid var(--c-rule); }
.about-word h2 { font-family: var(--c-display); font-stretch: 62.5%; text-transform: uppercase; font-weight: 800; letter-spacing: -0.01em; font-size: clamp(5.5rem, 26vw, 8rem); line-height: 0.8; color: var(--c-warm); }
.senses { display: grid; gap: 0.75rem; margin: 1.25rem 0 0; }
.senses div { display: grid; grid-template-columns: 4.75rem 1fr; gap: 1rem; }
.senses dt { font-family: var(--c-display); font-weight: 600; font-size: 1.0625rem; }
.senses dd { color: var(--c-warm-2); }
.senses i { color: var(--c-warm-3); }
.senses span { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: var(--c-warm-3); }
.about-word .line { margin-top: 1.5rem; max-width: 34ch; font-family: var(--c-display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.02em; }
.about-who { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: end; padding: 1.5rem var(--c-gut) 0; }
.about-who img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 2px; }
.about-who h3 { font-family: var(--c-display); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: -0.035em; }
.about-who .role { margin-top: 0.25rem; font-size: 0.875rem; color: var(--c-warm-2); }
.about-bio { padding: 1rem var(--c-gut) 2rem; }
.about-bio p { max-width: 38ch; color: var(--c-warm-2); }
.about-bio p + p { margin-top: 0.75rem; }
.about-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.about-acts a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 2px; background: var(--c-warm); color: var(--c-ink); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background 250ms; }
.about-acts a:hover, .about-acts a:focus-visible { background: var(--c-acid); }
.about-acts a.ghost { background: none; color: var(--c-warm); box-shadow: inset 0 0 0 1px rgb(238 237 232 / 0.3); }
.about-acts a.ghost:hover, .about-acts a.ghost:focus-visible { background: var(--c-acid); color: var(--c-ink); box-shadow: none; }
.about-acts svg { width: 0.75rem; height: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .about, .about::backdrop { transition: none; } }