/* ─── Bukmuk Authors' Intake form ──────────────────────────────────────────
   Editorial-meets-playground. Fraunces + Geist Mono on cream paper.
   Lime is rare and earned. The guardian section flips register to ledger.
   ─────────────────────────────────────────────────────────────────────── */

:root{
  /* Working brand blue (CLAUDE.md): accents, focus, marginalia */
  --blue:#3744e2;
  --blue-ink:#2531c9;
  /* Registered logo navy (locked at bukmuk.com /assets/darklogo.png).
     The mark itself is not recolourable. */
  --navy:#1d2a5e;
  --lime:#d5f223;
  --lime-deep:#bcd817;
  --ink:#2e2c2c;
  --ink-soft:#4a4644;
  --paper:#f5f1e6;
  --paper-deep:#ece6d4;
  --paper-shadow:#dfd8c1;
  --rule:#cdc4a8;
  --ledger:#eef0fb;
  --ledger-rule:#c4caf2;
  --err:#b1261d;
  --display: 'Fraunces', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
}

*{box-sizing:border-box}
html,body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--display);
  font-variation-settings:"opsz" 14, "SOFT" 30;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* paper grain */
body{
  background-image:
    radial-gradient(rgba(46,44,44,.035) 1px, transparent 1px),
    radial-gradient(rgba(46,44,44,.025) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  min-height: 100vh;
}

/* visually hidden (for skip-link, sr-only labels) */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── progress strip (sticky, fills based on % required fields) ──────────── */
.progress{
  position:fixed; inset:0 0 auto 0; height:6px;
  background:var(--paper-shadow); z-index:50;
  border-bottom:1px solid var(--rule);
}
.progress-fill{
  height:100%; width:0;
  background:var(--lime);
  box-shadow: 0 0 0 1px var(--lime-deep) inset;
  transition: width .25s ease;
}

/* ── masthead: real Bukmuk logo on cream paper ──────────────────────────── */
.masthead{
  background: var(--paper);
  color: var(--ink);
  padding: 28px 28px 0;
  position: relative;
  border-bottom: 1px solid var(--rule);
}
.masthead-row{
  max-width: 1100px; margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--ink-soft);
}
.masthead-row small{
  display:block; margin-top:4px; letter-spacing:.14em;
  color: var(--ink-soft); opacity:.85;
}
.masthead-row .masthead-tag{ color: var(--blue); font-weight: 600 }
.masthead-row .masthead-meta-right{ text-align: right }
.logo-wrap{
  max-width: 1100px; margin: 18px auto 26px;
  text-align: center;
}
.logo-wrap img{
  height: clamp(54px, 9vw, 88px);
  width: auto; display: inline-block;
}
.masthead-rule{
  height: 6px; background: var(--blue);
  position: relative;
  border-top: 1px solid var(--navy);
}
.masthead-rule::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px;
  background:var(--lime);
  clip-path: polygon(0 0,3% 100%,6% 0,9% 100%,12% 0,15% 100%,18% 0,21% 100%,24% 0,27% 100%,30% 0,33% 100%,36% 0,39% 100%,42% 0,45% 100%,48% 0,51% 100%,54% 0,57% 100%,60% 0,63% 100%,66% 0,69% 100%,72% 0,75% 100%,78% 0,81% 100%,84% 0,87% 100%,90% 0,93% 100%,96% 0,100% 100%,100% 0);
}

/* ── sheet + frame grid ─────────────────────────────────────────────────── */
.sheet{ max-width: 1100px; margin: 0 auto; padding: 0 28px; }
.frame{
  display:grid;
  grid-template-columns: 1fr 280px;
  gap: 56px;
  padding: 64px 0 96px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.frame:last-of-type{ border-bottom: none }
@media (max-width: 820px){
  .frame{ grid-template-columns: 1fr; gap: 28px; padding: 40px 0 56px }
  .marginalia{ order: 2 }
}

/* ── folio + section heading ───────────────────────────────────────────── */
.folio{
  font-family: var(--mono); font-size: 11px; letter-spacing:.22em;
  text-transform:uppercase; color: var(--ink-soft);
  display:flex; align-items:center; gap:14px;
  margin-bottom: 14px;
}
.folio::before{
  content:""; width:42px; height:1px; background: var(--ink); opacity:.55;
}
.roman{
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 600;
  font-style: italic;
  font-size: 28px; line-height: 1;
  color: var(--blue);
  margin-right: 10px;
  vertical-align: -2px;
}
.folio-corner{
  position:absolute; top: 16px; right: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: var(--ink-soft); text-transform: uppercase;
}

h1.section-title{
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 40;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0 0 18px;
  color: var(--ink);
}
h1.section-title em{
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 100;
  color: var(--blue);
}
.lede{
  font-family: var(--display);
  font-variation-settings: "opsz" 18, "wght" 350;
  font-size: 19px; line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch; margin: 0 0 28px;
}

/* ── marginalia ─────────────────────────────────────────────────────────── */
.marginalia{
  border-left: 1px solid var(--rule);
  padding: 8px 0 8px 20px;
  font-family: var(--display);
  font-variation-settings: "opsz" 12, "wght" 380;
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
  align-self: start;
  position: sticky; top: 28px;
}
.marginalia .tag{
  display:inline-block;
  font-family: var(--mono); font-size: 10px; letter-spacing:.2em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 8px;
}
.marginalia p{ margin: 0 0 12px }
.marginalia p em{
  background: var(--lime); padding: 0 3px;
  font-style:normal; color: var(--ink);
  box-decoration-break: clone;
}
.marginalia .editor-contact{
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ── fields ─────────────────────────────────────────────────────────────── */
.field{ margin: 0 0 28px }
.field label.cap, label.cap{
  display:block;
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.field label.cap .req{ color: var(--blue); margin-left: 4px }
.field .hint{
  font-family: var(--display);
  font-variation-settings: "opsz" 12, "wght" 380;
  font-style: italic; font-size: 13px;
  color: var(--ink-soft); margin-top: 6px;
}
.field.error label.cap{ color: var(--err) }
.field.error .input, .field.error .textarea{ border-color: var(--err) }
.field-error{
  display:none;
  font-family: var(--mono); font-size: 11px; letter-spacing:.12em;
  text-transform: uppercase; color: var(--err);
  margin-top: 6px;
}
.field.error .field-error{ display: block }

.input, .textarea, select.input{
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--display);
  font-variation-settings: "opsz" 18, "wght" 380;
  font-size: 22px;
  color: var(--ink);
  padding: 8px 0 10px;
  outline: none;
  transition: border-color .15s ease;
  border-radius: 0;
}
.input:focus, .textarea:focus, select.input:focus{
  border-bottom-color: var(--blue);
}
.input::placeholder, .textarea::placeholder{
  color: var(--ink-soft); opacity:.45;
  font-style: italic;
}
.textarea{
  resize: vertical;
  min-height: 180px;
  font-size: 18px; line-height: 1.6;
  border: 1px solid var(--rule);
  padding: 16px 18px;
  background: rgba(255,255,255,0.45);
}
.textarea.story{ min-height: 280px }
.textarea:focus{
  border-color: var(--blue);
  background: #fffdf6;
}
.textwrap{ position: relative }
.counter{
  position: absolute; right: 14px; bottom: -28px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.counter b{ color: var(--ink); font-weight: 500 }
.counter.ok b{ background: var(--lime); padding: 0 6px; color: var(--ink) }

/* age wheel: 7-15 chips */
.agewheel{ display:flex; flex-wrap:wrap; gap: 8px; position: relative }
.agewheel input{ position:absolute; opacity:0; pointer-events:none }
.agewheel label{
  display:inline-flex; align-items:center; justify-content:center;
  width: 52px; height: 52px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-family: var(--display);
  font-variation-settings: "opsz" 18, "wght" 500;
  font-size: 22px;
  cursor: pointer;
  transition: all .12s ease;
  background: transparent;
}
.agewheel label:hover{ background: rgba(213,242,35,.35) }
.agewheel input:checked + label{
  background: var(--blue); color: var(--paper);
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 0 var(--ink);
}
.agewheel input:focus-visible + label{
  outline: 2px solid var(--blue); outline-offset: 3px;
}

/* radio + checkbox cards */
.radios{ display:flex; flex-direction: column; gap: 10px }
.radios label{
  display:flex; align-items:flex-start; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  cursor: pointer;
  background: rgba(255,255,255,.4);
  transition: all .12s ease;
  font-size: 18px;
  font-variation-settings: "opsz" 18, "wght" 380;
}
.radios label:hover{ border-color: var(--ink); background: rgba(255,255,255,.7) }
.radios label.is-checked{ border-color: var(--blue); background: #fffdf6 }
.radios input{ margin-top: 5px; accent-color: var(--blue); transform: scale(1.2) }
.radios label .sub{
  display:block;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--ink-soft); text-transform: uppercase; margin-top: 4px;
}

/* conditional reveal (pen name etc) */
.conditional{
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .25s ease, opacity .2s ease, margin .25s ease;
  margin: 0;
}
.conditional.is-open{
  max-height: 400px; opacity: 1;
  margin: 18px 0 8px;
}

/* file dropzones */
.drop{
  border: 1.5px dashed var(--rule);
  background: rgba(255,255,255,.35);
  padding: 22px 22px;
  display:flex; align-items:center; gap: 18px;
  cursor: pointer;
  transition: all .15s ease;
  position: relative;
}
.drop:hover, .drop.drag-over{
  border-color: var(--blue); background: #fffdf6;
}
.drop input[type=file]{
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.drop .icon{
  width: 56px; height: 56px;
  background: var(--lime);
  display:grid; place-items:center;
  font-family: var(--display);
  font-size: 28px;
  font-variation-settings:"opsz" 144, "wght" 600;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  flex-shrink: 0;
}
.drop .copy{
  font-family: var(--display);
  font-variation-settings: "opsz" 14, "wght" 380;
  font-size: 16px;
  flex: 1 1 auto;
}
.drop .copy b{ font-variation-settings: "opsz" 14, "wght" 600 }
.drop .copy span.meta{
  display:block;
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
  color: var(--ink-soft); text-transform: uppercase; margin-top: 4px;
}
.drop.has-file{ border-style: solid; border-color: var(--blue); background: #fffdf6 }
.drop.has-file .icon{ background: var(--blue); color: var(--paper); border-color: var(--navy) }
.drop .remove{
  position: relative; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--err);
  background: transparent; border: 1px solid var(--err);
  padding: 6px 10px; cursor: pointer;
}
.drop .remove:hover{ background: var(--err); color: var(--paper) }

/* fun-facts chips */
.chips{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px;
}
@media (max-width: 600px){ .chips{ grid-template-columns: 1fr } }

/* scene-break divider */
.scene{
  text-align:center;
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 400;
  color: var(--ink-soft);
  letter-spacing: 1.2em;
  margin: 4px 0 38px;
  font-size: 14px;
  user-select: none;
}

/* ── welcome ────────────────────────────────────────────────────────────── */
.welcome{
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--rule);
}
.welcome .hello{
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 60, "WONK" 1;
  font-style: italic;
  font-size: clamp(54px, 8vw, 110px);
  line-height: .95;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
  color: var(--ink);
}
.welcome .hello u{
  text-decoration: none;
  background: linear-gradient(transparent 62%, var(--lime) 62% 92%, transparent 92%);
  padding: 0 2px;
}
.welcome .standfirst{
  font-family: var(--display);
  font-variation-settings: "opsz" 18, "wght" 380;
  font-size: 21px; line-height: 1.55;
  max-width: 62ch; color: var(--ink);
  margin: 0 0 36px;
}
.welcome .standfirst em{ color: var(--blue); font-style: italic }
.pact{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 8px 0 36px;
}
@media (max-width: 720px){ .pact{ grid-template-columns: 1fr } }
.pact .card{
  border: 1px solid var(--ink);
  background: rgba(255,255,255,.5);
  padding: 22px 22px 24px;
  position: relative;
}
.pact .card .n{
  position: absolute; top: -14px; left: 16px;
  background: var(--paper);
  padding: 0 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--blue);
}
.pact .card h3{
  font-family: var(--display);
  font-variation-settings: "opsz" 32, "wght" 500, "SOFT" 30;
  font-size: 22px; margin: 4px 0 8px;
  line-height: 1.15;
}
.pact .card p{
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 14, "wght" 380;
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink-soft);
}
.meta-row{
  display:flex; flex-wrap:wrap; gap: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0; margin-bottom: 36px;
}
.meta-row b{ color: var(--ink); font-weight: 500; margin-right: 6px }

/* ── guardian section (register shift) ──────────────────────────────────── */
.guardian-wrap{
  background: var(--ledger);
  border-top: 1px solid var(--ledger-rule);
  border-bottom: 1px solid var(--ledger-rule);
}
.frame.ledger{
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 31px, rgba(55,68,226,.10) 31px, rgba(55,68,226,.10) 32px);
}
.frame.ledger .roman{ color: var(--ink) }
.frame.ledger h1.section-title em{ color: var(--ink) }
.frame.ledger h1.section-title{
  font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 20;
}
.ledger-stamp{
  display:inline-block;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 4px 10px;
  margin-bottom: 14px;
  background: rgba(55,68,226,.06);
}
.consent{
  display:flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--ledger-rule);
}
.consent label{
  display:grid; grid-template-columns: 28px 1fr; gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--ledger-rule);
  cursor: pointer;
  font-family: var(--display);
  font-variation-settings: "opsz" 14, "wght" 400;
  font-size: 17px; line-height: 1.5;
  color: var(--ink);
}
.consent input[type=checkbox]{
  appearance: none;
  width: 22px; height: 22px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  margin-top: 2px;
  cursor: pointer;
  position: relative;
  border-radius: 2px;
  flex-shrink: 0;
}
.consent input[type=checkbox]:checked{
  background: var(--blue); border-color: var(--blue);
}
.consent input[type=checkbox]:checked::after{
  content: "✓";
  position: absolute; inset: 0;
  display:grid; place-items:center;
  color: var(--lime);
  font-family: var(--display);
  font-size: 18px; font-weight: 700;
  line-height: 1;
}
.consent input:focus-visible{
  outline: 2px solid var(--blue); outline-offset: 3px;
}
.consent .req-tag{
  display:inline-block;
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  color: var(--blue); text-transform: uppercase;
  border: 1px solid var(--blue);
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 2px;
}
.sig-row{
  display:grid; grid-template-columns: 2fr 1fr; gap: 36px;
  margin-top: 24px;
}
@media (max-width: 640px){ .sig-row{ grid-template-columns: 1fr; gap: 18px } }
.sig-row .input{
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 500, "WONK" 1;
  font-size: 28px;
}

/* ── actions, buttons ──────────────────────────────────────────────────── */
.actions{
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px; margin-top: 32px;
  padding-top: 28px; border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.frame.ledger .actions{ border-top-color: var(--ledger-rule) }
.btn{
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  padding: 16px 22px;
  border: 1.5px solid var(--ink);
  background: transparent; color: var(--ink);
  cursor: pointer;
  transition: all .15s ease;
}
.btn:hover{ background: var(--ink); color: var(--paper) }
.btn.primary{
  background: var(--lime);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 0 var(--ink);
  padding: 18px 28px;
  font-size: 13px;
}
.btn.primary:hover{
  background: var(--lime-deep);
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 0 var(--ink);
  color: var(--ink);
}
.btn[disabled], .btn[aria-busy="true"]{
  opacity: .6; cursor: not-allowed; pointer-events: none;
}
.save-tag{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 8px;
}
.save-tag::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink);
}
.save-tag.saving::before{ background: var(--paper-shadow) }
.save-tag.error::before{ background: var(--err) }

/* ── colophon ──────────────────────────────────────────────────────────── */
.colophon{
  background: var(--ink); color: var(--paper);
  padding: 32px 28px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.colophon .row{
  max-width: 1100px; margin: 0 auto;
  display:flex; justify-content: space-between; gap: 24px; flex-wrap:wrap;
}
.colophon a{ color: var(--lime); text-decoration: none }

/* ── confirmation screen ───────────────────────────────────────────────── */
.thankyou{ display: none }
.thankyou.is-shown{ display: block }
.form-shell.is-submitted{ display: none }
.thankyou .frame{ padding-top: 96px }
.thankyou .ref{
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--blue);
  margin-top: 18px;
}
.thankyou .ref b{ color: var(--ink); font-weight: 600 }

/* ── tiny utility ──────────────────────────────────────────────────────── */
.row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px }
@media (max-width: 640px){ .row2{ grid-template-columns: 1fr } }
.row3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px }
@media (max-width: 720px){ .row3{ grid-template-columns: 1fr } }

/* honeypot — hidden from sighted users + screen readers, but bots fill it */
.hp{
  position: absolute !important;
  left: -9999px !important; top: -9999px !important;
  width: 1px; height: 1px; opacity: 0;
  tab-index: -1;
}