/* Hallmark · macrostructure: Split Studio · genre: editorial · theme: Riso · paper: light · display: risograph-bold · accent: warm · nav: N6 masthead · footer: Ft4 dense colophon · H2 split diptych knobs: ratio=6/6 divider=negative-space · enrichment: Tier-A CSS off-register + overlapping circles */
 /* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */

:root{
  --color-paper: oklch(91% 0.034 30);
  --color-paper-2: oklch(87% 0.040 30);
  --color-paper-3: oklch(82% 0.046 30);
  --color-ink: oklch(16% 0.025 45);
  --color-ink-2: oklch(30% 0.02 50);
  --color-muted: oklch(52% 0.02 55);
  --color-rule: oklch(70% 0.040 30);
  --color-rule-2: oklch(82% 0.03 65);
  --color-accent: oklch(62% 0.19 35);
  --color-accent-2: oklch(67% 0.13 225);
  --color-accent-3: oklch(88% 0.17 95);
  --color-accent-green: oklch(52% 0.16 145);
  --color-accent-ink: oklch(16% 0.025 45);
  --color-accent-soft: oklch(92% 0.04 68);
  --color-focus: oklch(62% 0.19 35);
  --color-grain: oklch(0% 0 0 / 0.045);

  --font-display: "Public Sans", "Albert Sans", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Newsreader", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-display: clamp(2.6rem, 7vw, 4.6rem);
  --text-display-s: clamp(2rem, 5.5vw, 3.2rem);
  --text-title: 1.5rem;
  --text-lg: 1.13rem;
  --text-md: 1.02rem;
  --text-sm: 0.875rem;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --radius-card: 12px;
  --radius-pill: 999px;
  --radius-input: 0;
  --dur-short: 220ms;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

*{ box-sizing: border-box; }
html, body{ overflow-x: clip; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--color-grain) 1px, transparent 0);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}
a{ color: var(--color-accent); text-underline-offset: 3px; }
a:hover{ color: var(--color-ink); }
code{ font-family: var(--font-mono); font-size: 0.84em; background: var(--color-paper-2); padding: 0.14em 0.32em; border-radius: 6px; border: 1px solid var(--color-rule-2); }
.mono{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Nav N6 Newspaper masthead — fixed + blur */
.nav--masthead{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  background: oklch(91% 0.034 30 / 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--color-rule);
}
body{ padding-top: 78px; }
.nav__issue{
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
  padding-block: var(--space-2xs);
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
  flex-wrap: wrap;
}
.nav__wordmark-row{
  text-align: center;
  padding-block: var(--space-xs) var(--space-2xs);
}
.nav__logo{
  display: inline-block;
  height: 36px;
  width: 36px;
  vertical-align: middle;
}
.nav__wordmark{
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  justify-content: center;
  text-decoration: none;
  color: var(--color-ink);
  border-bottom: none;
}
.nav__wordmark-text{
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(1.55rem, 3.4vw, 2.2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border-bottom: none;
}
.nav__links-row{
  border-top: 1px solid var(--color-rule);
  border-bottom: 2px double var(--color-rule);
}
.nav__links{
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
  padding-block: var(--space-2xs);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.nav__links a{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.nav__links a:hover{ border-bottom-color: var(--color-rule); }
.nav__link--muted{ color: var(--color-muted) !important; }
.nav__links-sep{ color: var(--color-rule-2); font-size: 11px; }

/* Hero H2 Split diptych — Riso */
.hero--split{
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
}
.hero__inner{
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.hero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-sm);
}
.eyebrow__dot{
  width: var(--space-2xs); height: var(--space-2xs);
  background: var(--color-accent-2);
  display: inline-block;
  flex-shrink: 0;
}
.display--offregister{
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  font-size: var(--text-display);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  margin: 0 0 var(--space-md);
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}
.display__line{ display: block; position: relative; }
/* off-register double shadow: cyan + mustard */
.display--offregister .display__line{
  text-shadow:
    1.6px 1.4px 0 var(--color-accent-2),
    -1.2px -1.1px 0 var(--color-accent-3);
}
.hero__attrib{ margin: var(--space-xs) 0 var(--space-md); }
.lede{
  font-size: var(--text-lg);
  line-height: 1.48;
  color: var(--color-ink-2);
  max-width: 46ch;
  margin: 0 0 var(--space-sm);
}
.hero__meta{
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-sm);
  margin-top: var(--space-sm);
}
.hero__cta{
  display: inline-block;
  margin-top: var(--space-md);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-accent-2);
  padding-bottom: 4px;
  letter-spacing: 0.08em;
}
.hero__cta:hover{ color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* Riso art — 2 circles, blend to green + drift */
.hero__art{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
.riso-art{
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1;
  min-width: 0;
  isolation: isolate;
}
.riso-circle{
  position: absolute;
  border-radius: 999px;
  width: 72%;
  aspect-ratio: 1;
  mix-blend-mode: multiply;
}
.riso-circle--blue{
  background: var(--color-accent-2);
  left: 4%;
  top: 6%;
  animation: riso-drift-blue 6s ease-in-out infinite alternate;
}
.riso-circle--yellow{
  background: var(--color-accent-3);
  right: 4%;
  bottom: 6%;
  left: auto;
  top: auto;
  animation: riso-drift-yellow 6s ease-in-out infinite alternate;
}
@keyframes riso-drift-blue{
  0%{ transform: translate(0, 0); }
  100%{ transform: translate(10%, 10%); }
}
@keyframes riso-drift-yellow{
  0%{ transform: translate(0, 0); }
  100%{ transform: translate(-10%, -10%); }
}
@media (prefers-reduced-motion: reduce){
  .riso-circle--blue, .riso-circle--yellow{ animation: none; }
}

/* Workspace — form split (essentials right) + draft below */
.workspace{
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-rule);
  background: var(--color-paper);
}
.workspace__inner{
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
}
.form-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: var(--space-md);
  row-gap: var(--space-sm);
  align-items: start;
}
.form-grid__main{
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}
.form-grid__essential{ min-width: 0; }
.essential-panel{
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}
.essential-title{ margin: 20px 0 0 0; font-size: 12px; }
.essential-hint{ margin: 0 0 38px 0; line-height: 1.45; }
.form-grid__actions{ grid-column: 1 / -1; }
.section__head{ margin-bottom: var(--space-md); }
.section__title{
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: var(--text-title);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: var(--space-2xs) 0 var(--space-2xs);
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}
.section__desc{
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0;
  max-width: 48ch;
}

/* Fields */
.field{ display: flex; flex-direction: column; gap: var(--space-3xs); margin: 0; }
.field-label{ font-size: 13px; font-weight: 600; color: var(--color-ink); }
.req{ color: var(--color-accent); }
.muted-inline{ font-weight: 400; color: var(--color-muted); }
.field-hint{ font-size: 12px; color: var(--color-muted); line-height: 1.45; }
.field input, .field select, .field textarea{
  width: 100%;
  font: inherit;
  font-size: 14.5px;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-input);
  padding: var(--space-2xs) var(--space-xs);
  outline: none;
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.field input, .field select{
  height: 44px;
  min-height: 44px;
  line-height: 1;
}
.field input[type="date"]{ height: 44px; }
.field textarea{
  min-height: 88px;
  height: auto;
  resize: vertical;
  line-height: 1.5;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--color-rule);
  box-shadow: 3px 3px 0 var(--color-accent-2, var(--color-accent));
}
.field-row{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-sm); }
#petitionForm{ display: grid; gap: var(--space-sm); }

/* Details */
.details{ border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); }
.details--essential{
  border-color: var(--color-ink);
  background: var(--color-paper-2);
  border-left-width: 3px;
}
.details--essential summary{
  background: var(--color-paper-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}
.details--essential summary .req{ color: var(--color-accent); margin-left: var(--space-2xs); }
.details summary{
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: var(--space-xs) var(--space-sm);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-ink);
  font-family: var(--font-heading);
}
.details summary::-webkit-details-marker{ display: none; }
.details summary::after{ content: "＋"; color: var(--color-muted); font-weight: 400; }
.details[open] summary::after{ content: "−"; }
.details-body{ padding: var(--space-sm); border-top: 1px solid var(--color-rule); display: grid; gap: var(--space-xs); }

/* Actions */
.form-actions{
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-rule);
}
.form-status{ font-size: 13px; color: var(--color-muted); font-family: var(--font-mono); }
.progress-msg{
  margin: 0;
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--color-accent);
  background: var(--color-paper);
  border: 1px solid var(--color-accent);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 8px;
}

/* Draft — single column below */
.section--draft{
  background: var(--color-paper);
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-xl);
}
.section--draft .section__inner{
  max-width: 760px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
}
/* Output */
.output__bar{
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-sm);
}
.output__title{
  font-family: var(--font-heading);
  font-weight: 700;
  font-style: normal;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--color-ink);
}
.output-actions{ display: flex; gap: 8px; }

/* Buttons — Riso outlined + solid block */
.btn{
  appearance: none;
  border: 1px solid var(--color-rule);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: var(--space-xs) var(--space-md);
  border-radius: 0;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  transition: transform 80ms var(--ease-out), background var(--dur-short) var(--ease-out), filter var(--dur-short) var(--ease-out);
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity: 0.5; cursor: not-allowed; transform: none; }
.btn:focus-visible{ outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn-primary{ background: var(--color-accent); color: var(--color-paper); border-color: var(--color-accent); }
.btn-primary:hover:not(:disabled){ filter: brightness(0.92); }
.btn-ghost{ background: var(--color-paper); color: var(--color-ink); }
.btn-small{ padding: var(--space-2xs) var(--space-xs); font-size: 12px; background: var(--color-paper); border-color: var(--color-rule); color: var(--color-ink); }
.btn-small:disabled{ background: var(--color-paper-2); }

/* Letter */
.letter-meta{
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  padding: var(--space-2xs) var(--space-xs);
  font-size: 13px;
  margin-bottom: var(--space-sm);
}
.meta-row{ display: flex; gap: var(--space-2xs); min-width: 0; }
.meta-label{ font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.meta-value{ color: var(--color-ink-2); word-break: break-word; min-width: 0; }
.letter-wrap{ padding: 0; }
.empty-state{
  text-align: center;
  padding: var(--space-lg) var(--space-sm) var(--space-md);
  border: 1px dashed var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink-2);
}
.empty-ico{ font-size: 18px; margin: 0 0 var(--space-3xs); }
.small{ font-size: 0.875rem; }
.muted{ color: var(--color-muted); }
.letter{
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.72;
  color: var(--color-ink);
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  padding: var(--space-md) var(--space-sm);
  min-height: 280px;
  overflow: auto;
}
.letter:focus{ outline: 2px solid var(--color-accent); outline-offset: 2px; }
.edit-hint{ margin-top: var(--space-xs); }
.checks{
  margin-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-sm);
}
.checks h3{ margin: 0 0 var(--space-2xs); font-size: 12px; letter-spacing: 0.06em; color: var(--color-muted); }
.checks ul{ margin: 0; padding-left: var(--space-sm); font-size: 13px; color: var(--color-ink-2); }
.checks li{ margin-bottom: var(--space-3xs); }
.check{ color: var(--color-accent); font-weight: 700; }

/* Rules — F4 step sequence variant */
.section--rules{
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-rule);
  background: var(--color-paper-2);
}
.section--rules .section__inner{
  max-width: 760px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
}
section > div {
  backdrop-filter: blur(1px);
  border: 1px solid var(--color-rule);
  padding: 16px;
  border-radius: 2px;
}
.rules{ margin: 0; padding-left: var(--space-md); font-size: 0.97rem; line-height: 1.6; color: var(--color-ink-2); }
.rules li{ margin-bottom: var(--space-xs); }
.rules li::marker{ color: var(--color-accent); font-family: var(--font-mono); font-size: 0.9em; }
.rules--step{ padding-left: 1.6rem; }

/* Footer Ft4 Dense colophon */
.footer--colophon{
  border-top: 1px solid var(--color-rule);
  background: var(--color-ink);
  color: var(--color-paper);
}
.footer__inner{
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 4vw, 1.5rem);
}
.footer__kicker{ color: var(--color-paper); margin: 0 0 var(--space-xs); letter-spacing: 0.08em; }
.footer__text{
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: oklch(82% 0.02 75);
  max-width: 72ch;
  margin: 0 0 var(--space-sm);
}
.footer__meta{
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  border-top: 1px solid oklch(28% 0.02 75);
  padding-top: var(--space-xs);
  margin-top: var(--space-sm);
}
.footer__meta .mono{ color: oklch(70% 0.02 75); }
.footer__rules{ display: flex; gap: var(--space-2xs); margin-top: var(--space-sm); }
.footer__rule{ height: 1px; flex: 1; background: oklch(28% 0.02 75); }
.footer__rule:last-child{ background: var(--color-accent); opacity: 0.9; }

/* Toast */
.toast{
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--color-ink); color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  padding: 10px 14px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  z-index: 20;
  max-width: calc(100vw - 32px);
  text-align: center;
}

/* Responsive — editorial mandates */
@media (max-width: 960px){
  .hero__inner{ grid-template-columns: minmax(0,1fr); }
  .hero__art{ order: -1; }
  .riso-art{ width: min(70vw, 340px); }
  .form-grid{ grid-template-columns: minmax(0,1fr); }
  .display--offregister{ font-size: var(--text-display-s); }
  section > div { margin-inline: 16px !important; }
}
@media (max-width: 560px){
  .field-row{ grid-template-columns: minmax(0,1fr); }
  .nav__links{ gap: var(--space-xs); }
  .nav__links a{ font-size: 10px; }
  .form-actions{ flex-direction: column; align-items: stretch; }
  .form-actions .btn{ width: 100%; justify-content: center; }
  .hero__meta{ flex-direction: column; gap: var(--space-3xs); }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}