/* ==================================================================
   The approach  (.ash-*)

   Four statements, lit one at a time on a slow clock, with a word in
   the heading that turns with them.

   Written in the same terms as the rest of the site: the display face
   for the heading, the process section's heading-left/body-right
   rhythm, and the works list's habit of stepping the other lines back
   so the one being read is the only one at full strength.

   It had been the last place the exported template's vocabulary
   survived — a hairline under every row, a mono label with a rule
   running off it, 01 to 04 down the side, and a framed stock
   photograph. None of that is anywhere else on the site.
   ================================================================== */

.ash-statement {
  --ash-ink: var(--swatch--beige-100, #e8e8e3);
  --ash-ink-dim: var(--swatch--black-50, #938f8a);
  --ash-bg: var(--swatch--black-400, #080807);

  position: relative;
  background: var(--ash-bg);
  color: var(--ash-ink);
  padding: var(--_spacing---section-space--large, clamp(4.5rem, 11vh, 9rem))
           clamp(1rem, 4vw, 3rem);
}

/* the process section's shape: the heading holds the left, the lines
   take the measure on the right */
.ash-statement__inner {
  width: min(92vw, 86rem);
  margin: 0 auto;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--site--gutter, 1.5rem);
}

.ash-statement__head {
  flex: 1;
  max-width: 13ch;
  margin: 0;
  font-family: var(--_typography---font--secondary-family, sans-serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* the word turns with the line being read */
.ash-rotator {
  display: inline-grid;
  vertical-align: baseline;
  overflow: hidden;
  height: 1em;
  /* the width animates between words so the line reflows rather than jumps */
  transition: width 620ms cubic-bezier(.22, 1, .36, 1);
}
.ash-rotator__item {
  grid-area: 1 / 1;
  display: block;
  white-space: nowrap;
  color: var(--ash-ink-dim);
  opacity: 0;
  transform: translateY(.92em);
  transition: opacity 460ms ease, transform 620ms cubic-bezier(.22, 1, .36, 1);
}
.ash-rotator__item[data-active] { opacity: 1; transform: none; color: var(--ash-ink); }
.ash-rotator__item[data-leaving] { opacity: 0; transform: translateY(-.92em); }

/* --- the lines ---------------------------------------------------
   Separated by space. The one being read is at full strength and
   steps out slightly; the rest wait. */
.ash-index {
  width: var(--column-width--6, 50%);
  flex: none;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
  gap: clamp(1.1rem, 2.6vh, 2rem);
}
.ash-index__row {
  color: var(--ash-ink-dim);
  font-family: var(--_typography---font--primary-family, sans-serif);
  font-size: clamp(1.02rem, 1.5vw, 1.4rem);
  line-height: 1.35;
  opacity: .42;
  transition: opacity 420ms ease, color 420ms ease,
              transform 560ms cubic-bezier(.22, 1, .36, 1);
}
.ash-index__row[data-active] {
  opacity: 1;
  color: var(--ash-ink);
  transform: translateX(.4rem);
}
/* reading with the pointer overrides the clock */
.ash-index:hover .ash-index__row { opacity: .3; transform: none; }
.ash-index:hover .ash-index__row:hover {
  opacity: 1;
  color: var(--ash-ink);
  transform: translateX(.4rem);
}

@media (max-width: 991px) {
  .ash-statement__inner { flex-flow: column; gap: clamp(2rem, 5vh, 3rem); }
  .ash-statement__head { max-width: 18ch; }
  .ash-index { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ash-rotator, .ash-rotator__item, .ash-index__row { transition: none; }
  .ash-index__row[data-active] { transform: none; }
}

  .ash-index__row[data-active]::after {
    transition: none;
    width: 100%;
  }
}

/* social icons */
.footer_social_icon { display: inline-flex; margin-right: 0.5rem; vertical-align: -0.28em; }
.footer_socials_link { display: inline-flex; align-items: center; }

@media (max-width: 700px) { .c-form__grid { grid-template-columns: 1fr; } }

/* ==================================================================
   Page furniture: nav scrim, nav alignment, footer pattern,
   back-to-top and the footer stamp row.
   ================================================================== */

/* --- nav scrim: soft dark gradient that fades in on scroll -------- */
.nav_scrim {
  position: fixed;
  inset: 0 0 auto;
  height: clamp(6rem, 12vh, 9rem);
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8%);
  transition: opacity 620ms cubic-bezier(.22,1,.36,1), transform 620ms cubic-bezier(.22,1,.36,1);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--swatch--black-400, #080807) 88%, transparent) 0%,
    color-mix(in srgb, var(--swatch--black-400, #080807) 62%, transparent) 38%,
    color-mix(in srgb, var(--swatch--black-400, #080807) 24%, transparent) 70%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.nav_scrim.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nav_scrim { transition: opacity 200ms linear; transform: none; } }

/* --- nav: centre the control cluster ------------------------------ */
.navbar_cta_wrap { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.navbar_cta_contain { display: flex; align-items: center; }
.navbar_wrap .g_btn_main { display: inline-flex; align-items: center; }
.navbar_wrap .g_btn_text_contain { display: flex; align-items: center; }
.navbar_wrap .g_btn_aside_wrap { display: flex; align-items: center; justify-content: center; }
.navbar_links_ul { align-items: center; }
/* the menu button is mobile-only; do not resurrect it on desktop, where its
   two label states stack and read as "MenuClose" */
@media screen and (max-width: 767px) {
  .navbar_menu_btn { align-items: center; }
}

/* fine diagonal weave + a slow dot field, drawn not downloaded */
  background-image:
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--swatch--beige-100, #e8e8e3) 5%, transparent) 0 1px,
      transparent 1px 9px
    ),
    radial-gradient(
      circle at center,
      color-mix(in srgb, var(--swatch--beige-100, #e8e8e3) 7%, transparent) 0 1px,
      transparent 1.4px
    );
  background-size: auto, 26px 26px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 10%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 10%, transparent 78%);
}
.footer_wrap_main > *, .footer_wrap > * { position: relative; z-index: 1; }


/* ==================================================================
   Micro labels: the old treatment was too small with too much
   tracking, which is what made them hard to read. Size them up,
   ease the tracking off, and lift the contrast.
   ================================================================== */
.u-text-mono,
.g_eyebrow_text,
.problems_home_label,
.works_home_content_ss,
.works_home_content_index,
.process_home_cta,
.footer_top_text,
.footer_bottom_span {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.35;
}
.u-text-style-micro, .u-text-style-xsmall { font-size: 0.76rem; letter-spacing: 0.05em; }

/* the hero copy reads as a statement, not a centred caption */
.hero_home_content_p.u-text-style-h4,
.hero_home_content,
.hero_home_main { text-align: left; }
.hero_home_content_p.u-text-style-h4 { margin-inline: 0; }

/* ==================================================================
   Button hover: the button holds its own colour — no fill flip.
   The motion is the arrow: the visible one leaves through the top-right
   corner of the chip while the staged duplicate (which the markup
   already ships at bottom-left) rides in behind it. The label leans
   toward the arrow by a couple of pixels, and the chip breathes.
   ================================================================== */
.g_btn_main { position: relative; }
.g_btn_main .g_btn_text { transition: transform 420ms cubic-bezier(.22,1,.36,1); }
.g_btn_main:hover .g_btn_text,
.g_btn_main:focus-visible .g_btn_text { transform: translateX(2px); }

.g_btn_main .g_btn_svg { transition: transform 460ms cubic-bezier(.22,1,.36,1); }
.g_btn_main:hover .g_btn_svg:not(.is-absolute),
.g_btn_main:focus-visible .g_btn_svg:not(.is-absolute) { transform: translate(130%, -130%); }
.g_btn_main:hover .g_btn_svg.is-absolute,
.g_btn_main:focus-visible .g_btn_svg.is-absolute { transform: translate(0, 0); }

/* mirrored button: the same journey, out through the top-left */
.g_btn_main .g_btn_svg.is-flip { transform: scaleX(-1); }
.g_btn_main .g_btn_svg.is-absolute.is-flip { transform: scaleX(-1) translate(-100%, 100%); }
.g_btn_main.is-back:hover .g_btn_svg.is-flip:not(.is-absolute),
.g_btn_main.is-back:focus-visible .g_btn_svg.is-flip:not(.is-absolute) { transform: scaleX(-1) translate(130%, -130%); }
.g_btn_main.is-back:hover .g_btn_svg.is-absolute.is-flip,
.g_btn_main.is-back:focus-visible .g_btn_svg.is-absolute.is-flip { transform: scaleX(-1) translate(0, 0); }

.g_btn_main .g_btn_aside_bg { transition: transform 420ms cubic-bezier(.22,1,.36,1); }
.g_btn_main:hover .g_btn_aside_bg,
.g_btn_main:focus-visible .g_btn_aside_bg { transform: scale(1.12); }

/* the About item is a <button>; without the bundle's inline reset it keeps
   the user-agent background, which shows as a grey chip on any page that
   does not load app.js */
.navbar_link, .footer_nav_text {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* nav + footer links */
.navbar_link, .footer_nav_text, .footer_socials_link, .works_home_cta_link {
  position: relative;
  transition: color 300ms ease, opacity 300ms ease;
}
.navbar_link::after, .footer_socials_link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -.18em;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  /* origin flips between states, so the line enters from the left
     and leaves through the right instead of retracting */
  transform-origin: right center;
  transition: transform 380ms cubic-bezier(.22,1,.36,1);
}
.navbar_link:hover::after, .navbar_link:focus-visible::after,
.footer_socials_link:hover::after, .footer_socials_link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
/* the row recedes, the hovered link stays lit */
.navbar_links_ul:hover .navbar_link { opacity: .4; }
.navbar_links_ul:hover .navbar_link:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .g_btn_main .g_btn_text, .g_btn_main .g_btn_svg, .g_btn_main .g_btn_aside_bg,
  .navbar_link, .navbar_link::after, .footer_socials_link::after { transition: none; }
}

/* ==================================================================
   Nav links: the 12-column grid area they sit in is not centred on
   the viewport, so centre them against the bar itself.
   ================================================================== */
/* ==================================================================
   Hero type texture — a fine grain sitting inside the letterforms,
   so the display type reads as printed rather than flat.
   ================================================================== */
/* the wordmark is SVG, so grain it with a filter instead */
/* the wordmark is a pixel face — crisp blocks, a CRT fringe and
   scanlines rather than film grain, which only softened the edges */
.hero_home_svg text { filter: url(#heroCRT); }
.hero_home_svg, .navbar_home_svg { shape-rendering: crispEdges; }

/* Nav links sit in columns 5-7 of a 12-column bar, which is left of centre.
   Widen them to the middle four and centre within — but the three cells are
   auto-placed, so widening one pushes the CTA cluster past column 12 and it
   wraps to a second row. Place all three explicitly so the bar is fixed. */
@media (min-width: 992px) {
  #layout-11 { grid-column: 1 / 5; }
  #layout-13 { grid-column: 5 / 9; justify-self: center; }
  #layout-14 { grid-column: 9 / 13; justify-self: end; }
  .navbar_links_ul { justify-content: center; }
}

/* ==================================================================
   Grid tokens. These were declared in an inline <style> inside
   index.html, so any page that is not the home page inherited the
   broken 6px fallbacks left in site.css by the export. Same values,
   somewhere every page can reach them.
   ================================================================== */
:root {
  --column-width--1: calc((100% - ((var(--site--column-count) - 1) * var(--site--gutter))) / var(--site--column-count));
  --column-width--2: calc(var(--column-width--1) * 2 + (var(--site--gutter) * 1));
  --column-width--3: calc(var(--column-width--1) * 3 + (var(--site--gutter) * 2));
  --column-width--4: calc(var(--column-width--1) * 4 + (var(--site--gutter) * 3));
  --column-width--5: calc(var(--column-width--1) * 5 + (var(--site--gutter) * 4));
  --column-width--6: calc(var(--column-width--1) * 6 + (var(--site--gutter) * 5));
  --column-width--7: calc(var(--column-width--1) * 7 + (var(--site--gutter) * 6));
  --column-width--8: calc(var(--column-width--1) * 8 + (var(--site--gutter) * 7));
  --column-margin--1: calc(var(--column-width--1) + var(--site--gutter));
  --column-margin--2: calc(var(--column-width--2) + var(--site--gutter));
}

/* The author's name and handle sit on trimmed boxes — 12px tall for a
   16px face — so stacked they read as one clump with the descender of
   the name touching the line beneath it. */
.gap_home_content_text + .gap_home_content_text { margin-top: .4rem; }

/* --- the services grid --------------------------------------------
   The marks behave the way every list on this site behaves: the whole
   set steps back and the one under the finger comes up. Nothing else
   moves. */
.problems_home_list:hover .problems_home_image { opacity: .28; }
.problems_home_item:hover .problems_home_image {
  opacity: 1;
  transform: translateY(-.2rem);
}
.problems_home_list:hover .problems_home_label { color: var(--swatch--black-200, #524d47); }
.problems_home_item:hover .problems_home_label { color: var(--swatch--beige-100, #e8e8e3); }
.problems_home_label { transition: color 380ms ease; }

@media (prefers-reduced-motion: reduce) {
  .problems_home_image, .problems_home_label { transition: none; }
  .problems_home_item:hover .problems_home_image { transform: none; }
}