/* atlasautomates.com — t3.gg-format single column, dark, type-only.
   All colors are token references (tokens.css); no literals (bible §2). */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-root);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
}

.column {
  width: 100%;
  max-width: var(--column-max);
  padding: var(--space-10) var(--column-padding);
}

/* ---------- Hero ---------- */

.wordmark {
  font-size: var(--text-hero);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.wordmark--sub { font-size: var(--text-xl); }

.tagline {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* ---------- Link list (the nav) ---------- */

.links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-10);
}

.link {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  transition: color var(--duration-normal) var(--ease-smooth);
}

/* Underline pair: ::before = faint resting line (affordance),
   ::after = accent line that extends across the bottom on hover/focus */
.link::before,
.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  bottom: calc(50% - 0.8em);
}

.link::before { background: var(--border-default); }

.link::after {
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-medium) var(--ease-smooth);
}

.link:hover, .link:focus-visible {
  color: var(--accent-strong);
}

.link:hover::after, .link:focus-visible::after {
  transform: scaleX(1);
}

/* Primary action: achromatic resting edge (weight + lightness), and
   the ONE glow per view on interaction (bible §5) */
.link--primary {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.link--primary:hover, .link--primary:focus-visible {
  color: var(--accent-strong);
  text-shadow: var(--glow-accent);
}

/* ---------- Micro footer row (role hue: direct line to Adrian) ---------- */

.micro {
  margin-top: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-ghost);
}

.micro-link {
  color: var(--text-ghost);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  transition: color var(--duration-normal) var(--ease-smooth);
}

.micro-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  bottom: calc(50% - 0.9em);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-medium) var(--ease-smooth);
}

.micro-link:hover, .micro-link:focus-visible {
  color: var(--accent-role);
}

.micro-link:hover::after, .micro-link:focus-visible::after {
  transform: scaleX(1);
}

.crumb { margin-bottom: var(--space-6); font-family: var(--font-mono); font-size: var(--text-sm); }

/* ---------- Focus ---------- */

:focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- Contact modal (the only floating element) ---------- */

.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--bg-overlay);
  display: flex;
  overflow-y: auto;              /* scrim scrolls when the modal is taller than the viewport */
  padding: var(--space-5);
  animation: scrim-fade var(--duration-normal) var(--ease-smooth);
}

.modal-scrim[hidden] { display: none; }

.modal {
  width: 100%;
  max-width: 26rem;
  margin: auto;                  /* overflow-safe centering: centers when room, top-aligns when tall */
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  padding: var(--space-6);
  animation: modal-rise var(--duration-medium) var(--ease-smooth);
}

@keyframes scrim-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-rise {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.modal-close {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0;
  transition: color var(--duration-fast) var(--ease-smooth);
}

.modal-close:hover, .modal-close:focus-visible { color: var(--text-primary); }

/* ---------- Form ---------- */

.field { display: block; margin-bottom: var(--space-4); }

.field-label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.field-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-smooth),
              background-color var(--duration-fast) var(--ease-smooth);
}

.field-input:hover { border-color: var(--border-hover); }

.field-input:focus {
  outline: none;
  border-color: var(--accent-border);
  background: var(--accent-bg);
}

.modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.form-status {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

.send {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  min-height: var(--tap-min);
  transition: color var(--duration-normal) var(--ease-smooth),
              border-color var(--duration-normal) var(--ease-smooth),
              background-color var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth),
              translate var(--duration-normal) var(--ease-smooth);
  border-color: var(--accent-border);
}

.send:hover, .send:focus-visible {
  color: var(--accent-strong);
  border-color: var(--accent-border);
  background: var(--accent-bg);
  box-shadow: var(--glow-accent);   /* the one glow of the modal view */
  translate: 0 -1px;
}

.send:active { translate: 0 0; }

.modal-alt {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
  /* page-level .micro only — .modal-alt keeps its proximity to the form */
  .column { padding: var(--space-8) var(--space-4); }
  .column > .micro { margin-top: var(--space-10); }
  .modal { padding: var(--space-5); }
  .modal-foot { flex-direction: column-reverse; align-items: stretch; }
  .send { width: 100%; }
  .form-status { text-align: center; }
}

/* Honeypot. Positioned off-canvas rather than display:none — some bots skip
   hidden inputs, and aria-hidden keeps it out of the accessibility tree. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile widget. Only renders when a challenge is warranted
   (data-appearance="interaction-only"), so it must not disturb the layout the
   rest of the time — and must not escape the modal when it does appear. */
.cf-turnstile {
  display: flex;
  justify-content: center;
  max-width: 100%;
}

/* The widget has a hard 300px floor. Below roughly a 375px viewport the modal's
   content box is narrower than that, so reclaim the modal's own padding rather
   than let the widget overflow or force a horizontal scroll. */
/* Below ~349px even the reclaimed width is under the widget's 300px floor, so
   scale rather than overhang. 0.88 keeps it inside at the 320px reflow target. */
@media (max-width: 21.8125rem) {
  .cf-turnstile {
    transform: scale(0.88);
    transform-origin: center;
  }
}

@media (max-width: 24rem) {
  /* max-width:100% resolves against the 277px content box and would forbid the
     element from widening after the negative margin shifts it left — the widget
     then centres on an off-centre box and hangs past the modal's border. Take
     the padding back as WIDTH, and lift the cap that fights it. */
  .cf-turnstile {
    width: calc(100% + var(--space-5) * 2);
    margin-inline: calc(var(--space-5) * -1);
    max-width: none;
  }
}

/* The action is inert while sending — it must not invite the pointer, and must
   not fire the view's single glow. */
.send:disabled {
  opacity: 0.55;
  cursor: default;
}
.send:disabled:hover,
.send:disabled:focus-visible {
  color: var(--text-primary);
  border-color: var(--accent-border);
  background: none;
  box-shadow: none;
  translate: none;
}

/* M4: the role hue means one thing — a direct line out to Adrian. Scope it to
   mailto links so an internal back-link stops borrowing that meaning. */
.crumb .micro-link:hover,
.crumb .micro-link:focus-visible {
  color: var(--accent-strong);
}

/* M3: when the send path fails the mailto BECOMES the primary action, so it
   stops wearing the ambient layer. This is the state the role hue was declared
   for and the only place it appears at rest. */
.modal--fallback .modal-alt .micro-link {
  color: var(--accent-role);
}
.modal--fallback .form-status {
  color: var(--text-secondary);
}