/* ==========================================================================
   site.css — layout and components.
   Reads roles from tokens.css. Never hard-code a colour or a size here.

   Contents
     1.  Base
     2.  Utilities
     3.  Skip link and focus
     4.  Shell, bands, margin-label grid
     5.  Type
     6.  Links
     7.  The plat (the mark, at three scales)
     8.  Header and nav
     9.  Hero
     10. Applications
     11. Custom work
     12. Contact
     13. Footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body {
  background: var(--haze);
  color: var(--indigo);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   2. Utilities
   -------------------------------------------------------------------------- */

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

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   3. Skip link and focus
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 50;
  translate: 0 -120%;
  padding: 0.75rem 1.25rem;
  background: var(--indigo);
  color: var(--haze);
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: translate var(--speed) var(--ease);
}

.skip-link:focus-visible {
  translate: 0 0;
  outline: 2px solid var(--straw);
  outline-offset: -5px;
}

/* One designed focus state, everywhere. Ring colour flips with the band, so
   it is chicory on the light ground and straw on the dark ones. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring, var(--chicory));
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   4. Shell, bands, margin-label grid
   -------------------------------------------------------------------------- */

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

.band {
  position: relative;
  padding-block: var(--band-pad);
  background: var(--surface);
  color: var(--text);
}

/* No `overflow: hidden` here. It used to clip the old absolutely-positioned
   hero square, but it also makes the band a scroll container, which silently
   breaks `position: sticky` on the margin label inside it — the label was
   being shunted down by exactly its own sticky offset. The plat field is
   drawn with inset:0 pseudo-elements, so there is nothing to clip. */
.band--dark {
  background: var(--surface);
  color: var(--text);
}

.band__grid {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 60rem) {
  .band__grid {
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 3.2fr);
    column-gap: var(--grid-gap);
  }
}

/* The section heading lives in the margin, the way a plat map labels its
   quarters. It is a real <h2> on every section but the hero. */
.band__label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (min-width: 60rem) {
  .band__label {
    position: sticky;
    top: var(--sp-7);
    align-self: start;
  }
}

/* The section number, set large, is what fills the margin column. It is
   aria-hidden and lives outside the <h2>, so it carries no meaning and is
   free to sit quietly. Without it a quarter of the page width is empty. */
.band__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--numeral);
  margin-bottom: 0.5rem;
}

.band__title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A threshold at the top of every band: the drill rows, full width. */
.band--ruled::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 10px;
  background: repeating-linear-gradient(
    to right,
    var(--rule) 0 1px,
    transparent 1px 7px
  );
}

.band__body > * + * {
  margin-top: var(--sp-5);
}

/* --------------------------------------------------------------------------
   5. Type
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--text);
}

.h1 {
  font-size: var(--size-h1);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-h1);
  max-width: 18ch;
}

.h3 {
  font-size: var(--size-h3);
  font-weight: 600;
  line-height: var(--leading-head);
  letter-spacing: var(--track-h3);
}

.lead {
  font-size: var(--size-lead);
  line-height: var(--leading-lead);
  max-width: var(--measure);
}

.small {
  font-size: var(--size-small);
  color: var(--text-muted);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.5;
}

.muted {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   6. Links
   -------------------------------------------------------------------------- */

.band__body a:not([class]),
.site-footer a:not([class]) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--speed) var(--ease);
}

.band__body a:not([class]):hover,
.site-footer a:not([class]):hover {
  color: var(--link-hover);
}

/* The one emphatic link shape on the site: outbound products and the email. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.15rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: var(--link);
  text-decoration: none;
  border-bottom: 2px solid var(--link);
  transition: color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.arrow-link::after {
  content: "\2192" / "";
}

.arrow-link:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}

@media (prefers-reduced-motion: no-preference) {
  .arrow-link::after {
    transition: translate var(--speed) var(--ease);
  }

  .arrow-link:hover::after {
    translate: 0.25rem 0;
  }
}

.arrow-link--lg {
  font-size: clamp(1.35rem, 0.95rem + 2.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: var(--track-h2);
  line-height: 1.15;
  gap: 0.4em;
  border-bottom-width: 3px;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   7. The plat — one square, subdivided, at three scales.
      Hairlines stay 1px at any size, so the big one reads as quietly as the
      small ones. No raster images anywhere on this site.
   -------------------------------------------------------------------------- */

.plat {
  display: block;
}

.plat__rule {
  fill: none;
  stroke: var(--mark-rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.plat__cell {
  fill: var(--mark-fill);
}

.plat--product {
  width: 3.25rem;
}

.plat--tiny {
  width: 1.125rem;
  flex: none;
}

.plat--tiny .plat__cell {
  fill: currentColor;
}

.plat--tiny .plat__cell--dim {
  opacity: 0.45;
}

/* --------------------------------------------------------------------------
   8. Header and nav
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--haze);
  border-bottom: 1px solid var(--sage);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  padding-block: var(--sp-4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--indigo);
  text-decoration: none;
}

.wordmark__llc {
  font-weight: 500;
  color: var(--shadow);
}

/* The real AC monogram. It is a high-contrast display mark — below about
   40px its hairlines break up — so it is never used smaller than this, and
   the favicon uses the plat instead. Flat-colour variants (indigo on the
   light header, straw on the dark footer) because the gold sits at 1.7:1
   on --haze and would vanish. */
.wordmark__mark {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

@media (min-width: 34rem) {
  .wordmark__mark {
    width: 2.75rem;
    height: 2.75rem;
  }
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(0.9rem, 3vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--shadow);
  text-decoration: none;
  transition: color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.site-nav a:hover {
  color: var(--indigo);
  border-bottom-color: var(--chicory);
}

.site-nav a[aria-current="true"] {
  color: var(--indigo);
  border-bottom-color: var(--chicory);
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

/* The plat, at full scale. Instead of one square in a corner, the whole hero
   band IS the plat: a fine grid of quarter-quarter cells, heavier section
   lines every fourth, and three cells filled. Land seen from above.
   Two repeating gradients and three solid ones — no image, no bytes. */
.hero {
  --cell: clamp(2.75rem, 6.5vw, 5.5rem);
  --section-line: calc(var(--cell) * 4);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The grid. Section lines are listed FIRST because background layers paint
   first-on-top, so the quarter-quarter lines sit under the section lines. */
.hero::before {
  background-image:
    repeating-linear-gradient(to right, var(--plat-section) 0 1px, transparent 1px var(--section-line)),
    repeating-linear-gradient(to bottom, var(--plat-section) 0 1px, transparent 1px var(--section-line)),
    repeating-linear-gradient(to right, var(--plat-fine) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(to bottom, var(--plat-fine) 0 1px, transparent 1px var(--cell));
}

/* Filled cells. Below the two-column breakpoint the text runs the full width
   of the band, so all but the top corner cell would sit behind the h1 — haze
   on --plat-cell is about 1.9:1, i.e. unreadable. Narrow screens get the one
   cell that lands above the heading; the grid carries the rest. */
.hero::after {
  background-image: linear-gradient(var(--plat-cell), var(--plat-cell));
  background-size: var(--cell) var(--cell);
  background-repeat: no-repeat;
  background-position: calc(100% - var(--cell) * 1) calc(var(--cell) * 1);
}

@media (min-width: 60rem) {
  .hero::after {
    background-image:
      linear-gradient(var(--plat-cell), var(--plat-cell)),
      linear-gradient(var(--plat-cell), var(--plat-cell)),
      linear-gradient(var(--plat-cell), var(--plat-cell));
    background-position:
      calc(100% - var(--cell) * 2) calc(var(--cell) * 1),
      calc(100% - var(--cell) * 4) calc(var(--cell) * 3),
      calc(100% - var(--cell) * 1) calc(var(--cell) * 4);
  }
}

/* The custom-work band gets the section lines only — quieter than the hero,
   but enough that the two dark bands belong to each other. */
.custom {
  --cell: clamp(2.75rem, 6.5vw, 5.5rem);
  --section-line: calc(var(--cell) * 4);
}

.custom::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--plat-fine) 0 1px, transparent 1px var(--section-line)),
    repeating-linear-gradient(to bottom, var(--plat-fine) 0 1px, transparent 1px var(--section-line));
}

.custom .shell {
  position: relative;
  z-index: 1;
}

.hero .shell {
  position: relative;
  z-index: 1;
}

.hero__body > * + * {
  margin-top: var(--sp-5);
}

.hero .lead {
  max-width: 40ch;
}

@media (min-width: 60rem) {
  .hero .band__body {
    max-width: 30rem;
  }
}

/* --------------------------------------------------------------------------
   10. Applications
   -------------------------------------------------------------------------- */

.products {
  display: grid;
  gap: 0;
}

/* Each product is its own tinted panel. The panels do the separating, so the
   drill rows that used to sit between them are gone — but each panel keeps one
   across its top edge, which is where the device now lives. */
.product {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface-inset);
  border-radius: var(--radius);
}

.product::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 10px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: repeating-linear-gradient(
    to right,
    var(--rule) 0 1px,
    transparent 1px 7px
  );
  opacity: 0.55;
}

.product + .product {
  margin-top: var(--sp-5);
}

@media (min-width: 34rem) {
  .product {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: var(--sp-5);
    align-items: start;
  }
}

/* Held to the same measure as the copy below it, so the status label sits at
   the right edge of the text column rather than drifting off on a wide screen. */
.product__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
  max-width: var(--measure);
}

/* Product names are what people scan for, so they get display scale rather
   than sitting at the same size as a paragraph heading. This is the middle of
   the type scale that was missing. */
.product__head .h3 {
  font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}

.product__body > * + * {
  margin-top: var(--sp-4);
}

.product__body p {
  max-width: var(--measure);
}

.status {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.status--live {
  color: var(--chicory);
}

/* A real screenshot, shown at close to its native pixel size so the app's own
   text stays readable. It reclaims the mark column to buy back some width.
   The caption is not decoration — it says whose screen this is and that the
   data in it is sample data. */
.shot {
  margin: 0;
}

@media (min-width: 34rem) {
  .product__body > .shot {
    /* reclaim the mark column so the screenshot keeps its width inside the
       panel; the pull is exactly the mark column plus its gap, so it lands
       flush with the panel content edge rather than breaking out of it. */
    margin-inline-start: calc(-1 * (3.25rem + var(--sp-5)));
  }
}

.shot img {
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.shot figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Runsheet: the same square, read three ways. */
.readings {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}

.readings li {
  position: relative;
  padding-left: 1.5rem;
}

.readings li + li {
  margin-top: var(--sp-3);
}

.readings li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
}

.readings b {
  font-weight: 600;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   11. Custom work
   -------------------------------------------------------------------------- */

.custom__body > * + * {
  margin-top: var(--sp-5);
}

.custom .lead {
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   12. Contact
   -------------------------------------------------------------------------- */

.contact__body > * + * {
  margin-top: var(--sp-5);
}

.contact__note {
  max-width: var(--measure-tight);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface);
  color: var(--text);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.site-footer__inner {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--grid-gap);
  }
}

.site-footer .wordmark {
  color: var(--text);
  font-size: 1rem;
}

.site-footer .wordmark__llc {
  color: var(--text-muted);
}

.footer__meta > * + * {
  margin-top: var(--sp-3);
}

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__nav a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.15rem;
  transition: color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.footer__nav a:hover {
  color: var(--link);
  border-bottom-color: var(--link);
}

.footer__colophon {
  font-size: var(--size-small);
  color: var(--text-muted);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   14. Document pages — legal notice, privacy, 404.
       Same bands, same margin labels, shorter head.
   -------------------------------------------------------------------------- */

.h1--page {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  max-width: 20ch;
}

.page-head {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.page-head .band__body > * + * {
  margin-top: var(--sp-4);
}

.doc > * + * {
  margin-top: var(--sp-4);
}

.doc p,
.doc li {
  max-width: var(--measure);
}

.doc h2 {
  font-size: var(--size-h3);
  font-weight: 600;
  line-height: var(--leading-head);
  letter-spacing: var(--track-h3);
  margin-top: var(--sp-7);
}

.doc > h2:first-child {
  margin-top: 0;
}

.doc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc ul li {
  position: relative;
  padding-left: 1.5rem;
}

.doc ul li + li {
  margin-top: var(--sp-3);
}

.doc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent);
}

.doc__back {
  margin-top: var(--sp-7);
}

/* 404 — the ways back out, divided by the same drill rows as the products. */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}

.link-list li + li {
  position: relative;
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
}

.link-list li + li::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 7px;
  background: repeating-linear-gradient(
    to right,
    var(--rule) 0 1px,
    transparent 1px 9px
  );
  opacity: 0.75;
}

.link-list p {
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--size-small);
  max-width: var(--measure);
}