/* callenduy.com — the disclaimer aesthetic.

   The conceit: this page is a model output about itself. So the fine print
   voice you normally find set at 11px under an AI product is instead set at
   display size and given the whole page. One accent, a deep stamp green, used
   only where something is being asserted or acted on. */

:root {
  --paper:  #F4F3EE;
  --ink:    #17181B;
  --pencil: #6C6D66;
  --rule:   #D6D4CA;
  --stamp:  #2F5D50;

  --measure: 34rem;
  --step: clamp(1rem, 0.6rem + 1.6vw, 1.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #131412;
    --ink:    #ECEAE1;
    --pencil: #8E8F86;
    --rule:   #2E302B;
    --stamp:  #7FB79F;
  }
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 5rem);

  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  line-height: 1.65;

  /* A faint ruled tint, like the paper this was drafted on. */
  background-image: linear-gradient(var(--rule) 1px, transparent 1px);
  background-size: 100% 2.4rem;
  background-position: 0 -1px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--stamp);
  color: var(--paper);
  z-index: 2;
}

.sheet {
  width: 100%;
  max-width: var(--measure);
}

/* --- masthead ----------------------------------------------------------- */

.slug {
  margin: 0 0 clamp(2rem, 8vh, 4rem);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pencil);
}

.wordmark {
  margin: 0;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(3.5rem, 2rem + 11vw, 8rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.role {
  margin: 1.25rem 0 0;
  padding-bottom: clamp(2rem, 6vh, 3rem);
  color: var(--pencil);
  border-bottom: 1px solid var(--rule);
}

/* --- the output block, the whole point of the page ---------------------- */

.output {
  padding-top: clamp(2rem, 6vh, 3rem);
}

.output-label {
  margin: 0 0 1rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stamp);
}

.reason {
  margin: 0;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 1.7vw, 2.1rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  min-height: 5.5em;
}

.reason code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82em;
  padding: 0.05em 0.3em;
  background: color-mix(in srgb, var(--stamp) 14%, transparent);
  border-radius: 2px;
}

/* The scramble state during a regeneration. */
.reason.is-working {
  color: var(--pencil);
}

/* --- controls ----------------------------------------------------------- */

.controls {
  margin-top: clamp(1.5rem, 4vh, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.regen {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;

  margin: 0;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--stamp);
  border-radius: 999px;
  background: transparent;
  color: var(--stamp);

  font: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.regen:hover,
.regen:focus-visible {
  background: var(--stamp);
  color: var(--paper);
}

.regen:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.regen[disabled] { opacity: 0.45; cursor: default; }

.regen-glyph {
  font-size: 1.1em;
  line-height: 1;
  display: inline-block;
}

.regen.is-spinning .regen-glyph {
  animation: spin 620ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.confidence {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pencil);
  font-variant-numeric: tabular-nums;
}

/* --- footer ------------------------------------------------------------- */

.foot {
  margin-top: clamp(2.5rem, 8vh, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--pencil);
}

.tally {
  margin: 0 0 0.4rem;
  font-variant-numeric: tabular-nums;
  min-height: 1.4em;
}

.disclaimer { margin: 0; max-width: 30rem; }

/* --- leave an address --------------------------------------------------- */

.signup {
  margin-top: clamp(2.5rem, 8vh, 4rem);
  padding-top: clamp(1.75rem, 5vh, 2.5rem);
  border-top: 1px solid var(--rule);
}

.signup-copy {
  margin: 0 0 1.25rem;
  color: var(--pencil);
  max-width: 30rem;
}

.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
}

.signup-form input[type="email"] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.signup-form input[type="email"]::placeholder { color: var(--pencil); opacity: 1; }

.signup-form input[type="email"]:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 1px;
  border-color: var(--stamp);
}

.signup-form button {
  flex: 0 0 auto;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--stamp);
  border-radius: 999px;
  background: var(--stamp);
  color: var(--paper);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 140ms ease;
}

.signup-form button:hover { opacity: 0.86; }

.signup-form button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.signup-form button[disabled] { opacity: 0.45; cursor: default; }

.status {
  margin: 0.9rem 0 0;
  min-height: 1.5em;
  font-size: 0.85rem;
  color: var(--stamp);
}

.status.is-warn { color: var(--ink); }

/* Offscreen, not display:none — screen readers still reach the label, and
   bots that skip hidden fields still find the honeypot. */
.sr-only,
.trap {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}