/* ============================================================
 * Alcedo Productions — site styles
 * Built on the Alcedo tokens in css/tokens/ (copied verbatim from
 * brand/tokens/). Nothing here invents a color, radius or motion
 * curve: every value is a token or a documented composition of them.
 * ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text);
}

h1, h2, h3, p, figure, dl, dd { margin: 0; }

svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--amber-wash-strong); color: var(--text); }

:focus-visible {
  outline: var(--bw-accent) solid var(--amber);
  outline-offset: 3px;
}

/* --- layout primitives ------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.label {
  font-size: var(--fs-label);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-mute);
}

.dim { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.faint { color: var(--text-faint); }
.amber { color: var(--amber); }
.green { color: var(--green); }

.alc-dot.hollow {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--text-mute);
}
/* Not-live-yet: the dot system's hollow ring, in the branch accent. Reads at a
   glance as "not the green LIVE dot", in form as well as in hue. */
.alc-dot.ring {
  background: transparent;
  box-shadow: none;
  border: 1.5px solid var(--accent);
}

/* Status token: dot + uppercase label (the house status pattern) */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

/* Inline link — hairline underline that warms to amber */
.lnk {
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.lnk:hover { color: var(--amber); border-bottom-color: var(--amber); }

.arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
}

/* --- topbar ------------------------------------------------ */
.topbar { border-bottom: 1px solid var(--border-soft); }

.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 62px;
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.brand .glyph { width: 34px; height: 17px; flex: none; }

/* Kingfisher mark: body stays cream, beak + eye carry the branch accent. */
#glyph .beak { stroke: var(--accent); }
#glyph .eye { fill: var(--accent); }

.wordmark {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wordmark);
  font-size: var(--fs-body-lg);
  color: var(--text);
}

.nav {
  display: flex;
  gap: var(--space-5);
}
.nav a {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-mute);
  transition: color var(--dur-fast) var(--ease);
}
.nav a:hover { color: var(--amber); }

/* --- sections ---------------------------------------------- */
/* short pages (404) keep the footer on the bottom edge, not mid-screen */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { display: block; flex: 1 0 auto; }

.section { padding-top: var(--space-16); }

.sec-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.sec-head::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px dashed var(--border);
}
.sec-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(17px, 2.4vw, var(--fs-title));
  letter-spacing: var(--ls-display);
  white-space: nowrap;
}
.sec-title .p { color: var(--amber); }
.sec-note { white-space: nowrap; }

/* --- masthead lockup ---------------------------------------- */
/* The mark at size: bird and wordmark read as ONE lockup, so the page
   opens on the brand and the plate below stays Machinate's. */
/* margin, not padding: the narrow-width .wrap rule resets padding wholesale */
.masthead { margin-top: var(--space-14); }

.lockup {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 32px);
}

/* #mark is the perched bird (DESIGN_RULES keeps the bare glyph for <24px).
   Its artwork starts 10% in from the viewBox edge, so the box is pulled
   back by that much to optically align with the copy underneath. */
.mark {
  --mark-w: clamp(148px, 13vw, 188px);
  flex: none;
  width: var(--mark-w);
  height: calc(var(--mark-w) * 0.48);
  margin-left: calc(var(--mark-w) * -0.1);
}
#mark .beak { stroke: var(--accent); }
#mark .eye { fill: var(--accent); }
#mark .perch { stroke: var(--text-faint); }

.lockup .wordmark {
  font-size: clamp(26px, 4.4vw, 42px);
  line-height: var(--lh-tight);
}

/* --- hero plate -------------------------------------------- */
.hero { padding-top: var(--space-12); }

.plate {
  position: relative;
  background: var(--bg-card);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-sm);
}

.plate-head,
.plate-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-8);
}
.plate-head { border-bottom: 1px dashed var(--border); }
.plate-foot { border-top: 1px dashed var(--border); }

.crumb {
  font-size: var(--fs-caption);
  color: var(--text-dim);
  white-space: nowrap;
}
.crumb .sep { color: var(--text-faint); }

.plate-body {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-12) var(--space-8);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(32px, 6.6vw, 54px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.hero-title .p { color: var(--amber); }

.hero-tag {
  margin-top: var(--space-4);
  font-size: clamp(15px, 1.9vw, var(--fs-subtitle));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--text);
}

.hero-copy {
  margin-top: var(--space-6);
  max-width: 46ch;
  color: var(--text-dim);
}
.hero-copy p + p { margin-top: var(--space-4); }
.hero-copy strong { color: var(--text); font-weight: var(--fw-regular); }

/* Code note — the house style for inline detail */
.note {
  margin-top: var(--space-8);
  max-width: 340px;
  background: var(--bg-sunk);
  border: var(--bw-hair) solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-caption);
  line-height: 1.9;
}
.note-h { color: var(--amber); }
.note-row {
  display: grid;
  grid-template-columns: 68px 14px minmax(0, 1fr);
  color: var(--text-mute);
}
.note-row .v { color: var(--text); }
.note-row .v.null { color: var(--text-faint); }

/* --- the schematic ----------------------------------------- */
.fig { align-self: center; }
.fig svg { width: 100%; height: auto; }

.d-gridline { stroke: var(--grid-strong); stroke-width: 1; fill: none; }

.d-link {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.2;
}
.d-link-live { stroke: var(--amber); stroke-width: 1.4; }
.d-link-plan {
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.2;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
}

.d-node { fill: none; stroke: var(--text-dim); stroke-width: 1.4; }
.d-node-in { fill: none; stroke: var(--text-faint); stroke-width: 1.2; }
.d-core { fill: var(--text); }
.d-port { stroke: var(--text-faint); stroke-width: 1.2; }

.d-build-wash { fill: var(--amber-wash-strong); }
.d-build { fill: none; stroke: var(--amber); stroke-width: 1.5; }
.d-build-open {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  opacity: 0.55;
}
.d-build-core { fill: var(--amber); }

.d-ghost {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.2;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
}

.d-anno {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  fill: var(--text-mute);
}
.d-anno.live { fill: var(--amber); }
.d-anno.plan { fill: var(--text-faint); }

/* --- work card --------------------------------------------- */
.card {
  display: block;
  background: var(--bg-card);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.card:hover,
.card:focus-visible {
  border-color: var(--amber);
  background-color: var(--amber-wash);
}
.card:hover .arrow { transform: translateX(3px); }
.card:hover .card-link { color: var(--amber); }

.card-in {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--space-10);
}

.card-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-title);
  letter-spacing: var(--ls-display);
}

.meta {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card-copy { color: var(--text-dim); max-width: 58ch; }

.card-link {
  margin-top: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  transition: color var(--dur-fast) var(--ease);
}

/* --- track record ------------------------------------------ */
.lede {
  max-width: 62ch;
  color: var(--text-dim);
  margin-bottom: var(--space-10);
}
.lede strong { color: var(--text); font-weight: var(--fw-regular); }

.track { display: block; }

.tr {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0 var(--space-5);
}
.tr-year {
  font-size: var(--fs-caption);
  color: var(--text-mute);
  padding-top: 2px;
  letter-spacing: 0.04em;
}
.tr-body {
  position: relative;
  border-left: var(--bw-hair) solid var(--border-soft);
  padding: 0 0 var(--space-8) var(--space-6);
}
.tr:last-child .tr-body { border-left-color: transparent; padding-bottom: 0; }
.tr-body::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 7px;
  width: 5px;
  height: 5px;
  background: var(--text-faint);
  transition: background-color var(--dur) var(--ease);
}
.tr:hover .tr-body::before { background: var(--amber); }
.tr-org { color: var(--text); }
.tr-line { color: var(--text-dim); font-size: var(--fs-caption); }

/* --- contact form ------------------------------------------- */
.panel {
  background: var(--bg-card);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
}

.form {
  position: relative;      /* anchors the honeypot */
  display: grid;
  gap: var(--space-6);
  max-width: 680px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
.field { display: grid; gap: var(--space-2); }

.form input,
.form textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: var(--ls-body);
  color: var(--text);
  background: var(--bg-deep);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease);
}
.form textarea { min-height: 124px; resize: vertical; }
/* House rule: focus moves the border to the accent — no glow ring. */
.form input:focus,
.form textarea:focus { border-color: var(--amber); outline: none; }

/* Button canon: mono, uppercase, wide-tracked, square, accent-framed. */
.btn {
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--amber);
  background: var(--amber-wash);
  border: var(--bw-hair) solid var(--amber);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--amber-wash-strong); }
.btn[disabled] {
  color: var(--text-mute);
  background: transparent;
  border-color: var(--border);
  cursor: default;
}

.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.form-status {
  min-height: 1.2em;
  font-size: var(--fs-caption);
  color: var(--text-dim);
}
.form-status.is-ok { color: var(--green); }
.form-status.is-error { color: var(--red); }

/* honeypot — visually hidden, out of the tab order, still fillable by bots */
.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- footer ------------------------------------------------ */
.foot {
  margin-top: var(--space-16);
  border-top: 1px dashed var(--border);
  padding: var(--space-10) 0 var(--space-14);
}
.foot-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-8);
  flex-wrap: wrap;
}

/* --- 404 ---------------------------------------------------- */
.gone {
  /* padding-block only — .wrap owns the horizontal gutter */
  padding-block: var(--space-16);
}
.gone .hero-title { font-size: clamp(30px, 6vw, 44px); }

/* ============================================================
 * Responsive — verified at 360 / 768 / 1440
 * ============================================================ */
@media (max-width: 920px) {
  .plate-body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
    padding: var(--space-10) var(--space-8);
  }
  .fig { max-width: 600px; margin-inline: auto; width: 100%; }
  .card-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .meta { margin-top: var(--space-3); }
}

@media (max-width: 700px) {
  .d-anno { display: none; }
  .section { padding-top: var(--space-14); }
}

@media (max-width: 700px) {
  .field-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

@media (max-width: 560px) {
  .wrap { padding: 0 var(--space-4); }
  /* the wrap rule above zeroes padding, so the masthead keeps its own air */
  .masthead { margin-top: var(--space-10); margin-bottom: var(--space-8); }
  /* the lockup stacks rather than shrinking the bird past readable */
  .lockup { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .lockup .wordmark { font-size: 26px; white-space: nowrap; }
  .panel { padding: var(--space-6); }
  .form-foot { flex-direction: column-reverse; align-items: stretch; gap: var(--space-4); }
  .btn { width: 100%; }
  /* horizontal padding stays >= bracket reach (10px inset + 16px arm) */
  .plate-head, .plate-foot { padding: var(--space-3) var(--space-8); }
  .plate-body { padding: var(--space-8) var(--space-6); }
  .card { padding: var(--space-6); }
  .note { max-width: none; }
  .tr { grid-template-columns: 52px minmax(0, 1fr); gap: 0 var(--space-3); }
  .tr-body { padding-left: var(--space-4); }
  .brand .glyph { width: 30px; height: 15px; }
  .wordmark { font-size: var(--fs-body); white-space: nowrap; }
  /* the page is three sections long — the nav is not worth a wrapped topbar */
  .nav { display: none; }
  .sec-note { display: none; }
  .plate-foot .label:first-child { display: none; }
  .foot-in { gap: var(--space-6); }
}

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