/* Design language: ~/cincy-social-v1 "Brand Documentaries" and the PLR web pitch. */
:root {
  --bg: #FAF7F2; --paper: #FFFEFB; --text: #1A1814; --text-muted: #6B6660;
  --rule: rgba(26,24,20,0.12); --accent: #A5782C; --accent-soft: rgba(165,120,44,0.13);
  --accent-text: #8A6220; --danger: #9B3B2E;
  color-scheme: light;
  --serif: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --track-caps: 0.22em; --pad-x: 48px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171310; --paper: #1F1A16; --text: #F2EDE4; --text-muted: #A39C92;
    --rule: rgba(250,247,242,0.14); --accent: #C99A4B; --accent-soft: rgba(201,154,75,0.16); --danger: #E08A7A;
    --accent-text: #C99A4B; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #171310; --paper: #1F1A16; --text: #F2EDE4; --text-muted: #A39C92;
  --rule: rgba(250,247,242,0.14); --accent: #C99A4B; --accent-soft: rgba(201,154,75,0.16); --danger: #E08A7A;
  --accent-text: #C99A4B; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--serif); font-size: 19px; line-height: 1.55; }
main { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad-x) 120px; }

.top { display: flex; justify-content: space-between; padding: 28px var(--pad-x); max-width: 1200px; margin: 0 auto; }
.logo { font-family: var(--sans); font-size: 12px; letter-spacing: var(--track-caps); text-transform: uppercase; }
.muted { color: var(--text-muted); }

.intro { padding: 56px 0 40px; max-width: 780px; }
.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.eyebrow.small { margin: 28px 0 10px; }
h1 { font-weight: 400; font-size: 44px; line-height: 1.12; margin: 0 0 18px; letter-spacing: -0.005em; }
h2 { font-weight: 400; font-size: 32px; line-height: 1.2; margin: 0 0 16px; }
.lead { font-size: 22px; color: var(--text-muted); margin: 0; }

.panel { background: var(--paper); border: 1px solid var(--rule); padding: 32px; }
form.panel { display: grid; gap: 22px; }
label { display: grid; gap: 8px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
.opt { font-weight: 400; color: var(--text-muted); }
input[type=text], input[type=password], textarea {
  font: 17px/1.5 var(--sans); font-weight: 400; color: var(--text); background: var(--bg);
  border: 1px solid var(--rule); border-radius: 2px; padding: 12px 14px; width: 100%;
}
textarea { resize: vertical; min-height: 3em; }
input:focus, textarea:focus, button:focus-visible, .file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.row.two { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; }
.row.upload { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.file { display: inline-block; cursor: pointer; }
.file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file span { display: inline-block; font: 500 14px var(--sans); border: 1px solid var(--rule); padding: 10px 16px; background: var(--bg); }
.hint { font: 14px/1.5 var(--sans); color: var(--text-muted); }

button { font: 500 14px var(--sans); letter-spacing: 0.02em; color: var(--text); background: transparent; border: 1px solid var(--text); padding: 12px 20px; cursor: pointer; border-radius: 2px; }
button.primary { background: var(--text); color: var(--bg); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.link { border: 0; padding: 4px 0; color: var(--accent-text); background: none; font-size: 13px; }
.actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.status { font: 14px/1.5 var(--sans); color: var(--text-muted); }
.status.err { color: var(--danger); }

#result { margin-top: 72px; }
.north { font-size: 21px; margin: 0 0 22px; max-width: 780px; }
.facts { display: grid; grid-template-columns: 1fr 2fr; gap: 22px; margin: 0; }
.facts dt { font: 500 12px var(--sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 18px; }
#bQuestions { margin: 0; padding-left: 20px; font-size: 18px; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 40px 0 24px; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }

.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.frame { border: 1px solid var(--rule); background: var(--paper); padding: 22px 22px 18px; display: flex; flex-direction: column; }
.frame .n { font: 500 12px var(--sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.frame .art { aspect-ratio: 320 / 220; background: #FFFEFB; display: grid; place-items: center; }
.frame .art img { width: 100%; height: 100%; display: block; }
.frame .wait { font: 13px var(--sans); color: #6B6660; animation: pulse 1.6s ease-in-out infinite; }
.frame .wait.err { color: #9B3B2E; animation: none; padding: 0 16px; text-align: center; }
@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .frame .wait { animation: none; } }
.frame .cap { margin: 16px 0 0; font-size: 17px; line-height: 1.5; }
.frame .shot { margin: 10px 0 0; font: 13px/1.55 var(--sans); color: var(--text-muted); flex: 1; }
.frame-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }
.frame-actions button:disabled { visibility: hidden; }
.frame-note { margin: 10px 0 0; font: 13px/1.5 var(--sans); color: var(--danger); }
.revise-box { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.revise-box textarea { font-size: 15px; }
.revise-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.revise-actions button { padding: 9px 14px; font-size: 13px; }

.guide { margin-bottom: 28px; }
.guide-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 36px; }
.steps { margin: 0; padding-left: 22px; display: grid; gap: 14px; font-size: 17px; line-height: 1.5; }
.steps b, .buttons dt { font-weight: 500; }
.buttons { margin: 0; display: grid; gap: 10px; font: 14px/1.5 var(--sans); }
.buttons div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; }
.buttons dt { color: var(--accent); }
.buttons dd { margin: 0; color: var(--text); }
.guide-notes { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font: 13px/1.55 var(--sans); color: var(--text-muted); }

/* ---------- ignition: the access code as a key, the studio as an engine ---------- */
.ignition { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; margin-bottom: 22px; }
.ign-dash { display: flex; align-items: center; gap: 14px; color: var(--text); }
.ign-key { width: 150px; max-width: 100%; }
.ign-gauge { width: 224px; max-width: 100%; }
.ign-dash svg :is(path, circle, rect, line) { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ign-dash .ink-env { stroke-width: 1.3; opacity: .8; }
.ign-dash .ink-ghost { stroke-width: 1; opacity: .28; }
.ign-dash .ink-hatch { stroke-width: .9; opacity: .45; }
.ign-dash .ink-red { stroke-width: 1.4; opacity: .55; stroke: var(--danger); }
.ign-dash .ink-gold { stroke: var(--accent); }
.ign-dash .ink-key { fill: var(--paper); }
.ign-dash .needle { stroke-width: 2.6; }
.ign-dash .hub { fill: var(--paper); }
.ign-dash text { font: 600 8.5px var(--sans); letter-spacing: .12em; fill: var(--text-muted); stroke: none; }
.ign-dash .start-label { fill: var(--accent); }
.ign-dash .lamp { stroke-width: 1.2; opacity: .6; }
.ign-controls { display: grid; gap: 8px; min-width: 0; }
.ign-controls .eyebrow { margin-bottom: 4px; }
.ign-controls label { margin: 0; }
.ign-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ign-row input { flex: 1 1 200px; min-width: 0; }
.ign-row button { flex: 0 0 auto; padding: 12px 26px; }
.ign-onbar { display: none; align-items: center; gap: 18px; flex-wrap: wrap; }
.ign-on-label { font: 500 13px var(--sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent-text); display: inline-flex; align-items: center; gap: 10px; }
.ign-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

#ignKey { transform-box: view-box; transform-origin: 70px 74px; transform: rotate(var(--key, -60deg)); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
#ignNeedle { transform-box: view-box; transform-origin: 100px 104px; transform: rotate(var(--rpm, -90deg)); transition: transform .45s cubic-bezier(.2, .9, .3, 1.2); }
.ignition.cranking #ignNeedle { animation: crank .16s ease-in-out infinite alternate; }
.ignition.starting .lamp { animation: lampcheck .8s ease-out both; }
.ignition.starting .lamp:nth-of-type(2) { animation-delay: .12s; }
.ignition.starting .lamp:nth-of-type(3) { animation-delay: .24s; }
.ignition.on .lamp.ready { fill: var(--accent); stroke: var(--accent); opacity: 1; }
.ignition.on #ignNeedle { animation: idle 1.4s ease-in-out 6 alternate; }
.ignition.shake .ign-row { animation: shake .4s; }
@keyframes crank { from { transform: rotate(-84deg); } to { transform: rotate(-70deg); } }
@keyframes idle { from { transform: rotate(-54deg); } to { transform: rotate(-49deg); } }
@keyframes lampcheck { 0%, 60% { fill: var(--accent); stroke: var(--accent); opacity: 1; } 100% { fill: none; opacity: .6; } }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* Engine on: the panel folds down to a small idling gauge and a Turn off link. */
.ignition.on { grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding-block: 12px; }
.ignition.on .ign-key, .ignition.on .ign-controls { display: none; }
.ignition.on .ign-gauge { width: 88px; }
.ignition.on .ign-onbar { display: flex; }

/* Engine off: the form is visible but asleep until the key turns. */
#form { transition: opacity .6s ease, filter .6s ease; }
#form.off { opacity: .4; filter: grayscale(.4); }

@media (prefers-reduced-motion: reduce) {
  #ignKey, #ignNeedle, #form { transition: none; }
  .ignition.cranking #ignNeedle, .ignition.on #ignNeedle, .ignition.starting .lamp, .ignition.shake .ign-row { animation: none; }
}

@media (max-width: 860px) {
  .ignition:not(.on) { grid-template-columns: 1fr; gap: 18px; }
  .ignition:not(.on) .ign-dash { justify-content: center; }
}

@media (max-width: 960px) {
  .board { grid-template-columns: repeat(2, 1fr); }
  .guide-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  :root { --pad-x: 16px; }
  body { font-size: 17.5px; }
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  .lead { font-size: 19px; }
  .panel { padding: 20px; }
  .row.two, .facts { grid-template-columns: 1fr; }
  .ignition { grid-template-columns: 1fr; gap: 18px; }
  .ign-dash { justify-content: center; }
  .ign-key { width: 120px; }
  .ign-gauge { width: 180px; }
  .buttons div { grid-template-columns: 1fr; gap: 2px; }
  .board { grid-template-columns: 1fr; }
  #result { margin-top: 48px; }
}