/* ============================================================
   Kryptos — copper, verdigris, granite and petrified wood
   ============================================================ */
:root {
  --bg: #121417;
  --bg2: #1a1d21;
  --panel: #20242a;
  --line: #2f343b;
  --text: #ebe4d8;
  --muted: #a39b8f;
  --copper: #d08a55;
  --copper-2: #b06a3b;
  --verdigris: #5fb3a3;
  --wood: #8a6f55;
  --k1: #e2a46b;
  --k2: #6fc3b4;
  --k3: #c9a2e0;
  --k4: #ef6f6c;
  --hl: #ffe36e;
  --serif: 'Fraunces', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  background-image: radial-gradient(circle at 20% -10%, rgba(208,138,85,0.10), transparent 45%), radial-gradient(circle at 110% 30%, rgba(95,179,163,0.07), transparent 40%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--verdigris); }
button { font: inherit; color: inherit; }
b { color: #fff6e8; font-weight: 600; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  padding: 10px max(16px, env(safe-area-inset-left));
  background: rgba(18,20,23,0.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--serif); font-weight: 800; letter-spacing: 0.22em; color: var(--text); text-decoration: none; font-size: 18px; white-space: nowrap; }
.brand-mark { color: var(--copper); }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { color: var(--muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 500; font-size: 14px; white-space: nowrap; }
.tabs a:hover { color: var(--text); background: var(--bg2); }
.tabs a.active { color: #1a1206; background: var(--copper); }
.tabs a.tab-scratch.active { background: var(--verdigris); }
.home-btn { color: var(--muted); text-decoration: none; font-size: 20px; padding: 4px 8px; }

/* ---------- pages ---------- */
main { max-width: 1100px; margin: 0 auto; padding: 0 16px 80px; }
.page { display: none; animation: fade 0.3s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body[data-page="overview"] #page-overview, body[data-page="k1"] #page-k1, body[data-page="k2"] #page-k2,
body[data-page="k3"] #page-k3, body[data-page="k4"] #page-k4, body[data-page="scratch"] #page-scratch { display: block; }
body[data-page="scratch"] main { max-width: none; padding: 0; }

h1, h2, h3 { font-family: var(--serif); line-height: 1.15; }
.hero { padding: 64px 0 36px; }
.eyebrow { color: var(--copper); font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; }
.hero h1 { font-size: clamp(56px, 14vw, 132px); margin: 0; letter-spacing: 0.12em; font-weight: 800;
  background: linear-gradient(100deg, #f0b483 0%, #c47a45 35%, #7fc0b2 75%, #4c9c8e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: clamp(17px, 2.4vw, 21px); max-width: 700px; color: #d8d0c3; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--copper); color: #1a1206; border: none; border-radius: 10px; padding: 12px 20px; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.small { padding: 8px 12px; font-size: 13px; width: 100%; justify-content: center; margin-top: 6px; }
.section-title { font-size: clamp(26px, 4vw, 36px); margin: 56px 0 12px; }
.prose { max-width: 760px; color: #d4ccbf; }
.sources { color: var(--muted); font-size: 13px; margin-top: 30px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.fact { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; }
.fact span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.fact b { font-family: var(--serif); font-size: 22px; }
.fact small { color: var(--muted); }

/* ---------- copper panel ---------- */
.legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.legend button { background: var(--panel); border: 1px solid var(--line); border-radius: 30px; padding: 6px 14px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.copper-wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 14px; }
.copper {
  font-family: var(--mono); font-weight: 600; font-size: clamp(7px, 1.25vw, 14px); line-height: 1.5; letter-spacing: 0.12em;
  padding: 18px 16px; border-radius: 6px; overflow-x: auto; white-space: pre;
  background: linear-gradient(135deg, #a8653a 0%, #7a4526 40%, #5b8f84 75%, #3f6e66 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.45), 0 10px 30px rgba(0,0,0,0.35);
  color: rgba(20,12,6,0.92); text-shadow: 0 1px 0 rgba(255,220,180,0.25);
}
.copper .row { display: block; }
.copper .ch { cursor: pointer; transition: color 0.2s, text-shadow 0.2s; }
.copper .ch.lit { color: #fff8e0; text-shadow: 0 0 6px rgba(255,236,190,0.9); }
.copper .ch.dim { color: rgba(20,12,6,0.35); }
.copper.tableau .ch { cursor: default; }
@media (max-width: 760px) { .copper-wrap { grid-template-columns: 1fr; } }

.cards4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.scard { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 14px; padding: 18px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 6px; }
.scard:hover { border-color: var(--c); }
.scard h3 { margin: 0; font-size: 28px; color: var(--c); }
.scard .m { font-size: 13px; color: var(--muted); }
.scard .p { font-family: var(--mono); font-size: 12px; color: #cfc6b8; word-break: break-word; }

.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 18px 22px; color: #d4ccbf; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 3px var(--bg); }
.timeline b { display: block; font-family: var(--serif); font-size: 18px; color: var(--copper); }

/* ---------- lesson pages ---------- */
.lesson-head { padding: 44px 0 10px; }
.lesson-head .tag { font-family: var(--mono); color: var(--c, var(--copper)); font-size: 13px; letter-spacing: 0.1em; }
.lesson-head h1 { font-size: clamp(40px, 7vw, 68px); margin: 4px 0 8px; }
.lesson-head h1 span { color: var(--c, var(--copper)); }
.steps { counter-reset: s; display: grid; gap: 12px; margin: 18px 0; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 16px 58px; position: relative; color: #d4ccbf; }
.step::before { counter-increment: s; content: counter(s); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--c, var(--copper)); color: #1a1206; font-weight: 700; display: grid; place-items: center; font-family: var(--mono); }
.callout { border-left: 3px solid var(--c, var(--copper)); background: var(--bg2); padding: 12px 16px; border-radius: 0 10px 10px 0; color: #d4ccbf; margin: 14px 0; }
.oddities { padding-left: 20px; color: #d4ccbf; }

.lab { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin: 22px 0; }
.lab h3 { margin: 0 0 4px; font-size: 22px; }
.lab .sub { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.input, .field input, .field select, .field textarea {
  background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 9px 11px; font-family: var(--mono); font-size: 15px; text-transform: none; letter-spacing: 0; width: 100%;
}
.field textarea { font-size: 13px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--c, var(--copper)); outline-offset: -1px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pill { background: var(--bg); border: 1px solid var(--line); border-radius: 30px; padding: 7px 13px; cursor: pointer; font-size: 13px; }
.pill:hover { border-color: var(--c, var(--copper)); }
.pill.on { background: var(--c, var(--copper)); color: #1a1206; border-color: transparent; }

/* letter strip: key / cipher / plain stacked */
.strip { display: flex; flex-wrap: wrap; gap: 2px 1px; font-family: var(--mono); max-height: 300px; overflow-y: auto; padding: 6px; background: var(--bg); border-radius: 10px; border: 1px solid var(--line); }
.cell { display: flex; flex-direction: column; align-items: center; width: 1.45em; cursor: pointer; border-radius: 4px; padding: 1px 0; font-size: 14px; line-height: 1.25; }
.cell:hover { background: var(--bg2); }
.cell .k { color: var(--muted); font-size: 10px; }
.cell .c { color: #bdb4a6; }
.cell .p { color: var(--c, var(--copper)); font-weight: 600; }
.cell.q .p, .cell.q .c { color: var(--muted); }
.cell.sel { background: rgba(255,227,110,0.18); outline: 1px solid var(--hl); }
.cell.clue .p { color: var(--hl); }
.meter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; font-size: 13px; color: var(--muted); }
.bar { flex: 1; min-width: 120px; height: 10px; border-radius: 6px; background: var(--bg); overflow: hidden; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--k4), var(--copper), var(--verdigris)); transition: width 0.3s; }
.found { color: var(--verdigris); font-weight: 600; }
.plainout { font-family: var(--mono); font-size: 15px; background: var(--bg); padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--line); margin-top: 12px; word-break: break-word; color: var(--c, var(--copper)); }

/* tableau */
.tab-wrap { overflow-x: auto; margin-top: 16px; }
.tbl { border-collapse: collapse; font-family: var(--mono); font-size: 12px; margin: 0 auto; }
.tbl td, .tbl th { width: 21px; height: 20px; text-align: center; color: #9e968a; }
.tbl th { color: var(--muted); font-weight: 400; }
.tbl tr.r td, .tbl td.c { background: rgba(208,138,85,0.13); color: #e7d8c6; }
.tbl td.x { background: var(--hl); color: #1a1206; font-weight: 700; border-radius: 3px; }
.tbl th.x { color: var(--hl); font-weight: 700; }
.explain { font-size: 14px; color: #d4ccbf; margin: 10px 0 0; text-align: center; }
.explain b { font-family: var(--mono); color: var(--hl); }

/* K3 grid */
.k3-stage { overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; max-height: 70vh; }
.k3-grid { display: grid; gap: 2px; font-family: var(--mono); font-size: 12px; width: max-content; }
.k3-grid span { width: 17px; height: 19px; display: grid; place-items: center; border-radius: 3px; color: #16110c; font-weight: 600; transition: background 0.4s; }
.k3-caption { font-size: 15px; margin: 6px 0 10px; color: #d4ccbf; min-height: 3em; }
.k3-caption b { color: var(--k3); }

/* K4 */
.k4-row { display: flex; flex-wrap: wrap; gap: 3px; font-family: var(--mono); }
.k4-tile { width: 30px; display: flex; flex-direction: column; align-items: center; border-radius: 6px; padding: 3px 0; background: var(--bg); border: 1px solid var(--line); }
.k4-tile .n { font-size: 9px; color: var(--muted); }
.k4-tile .c { font-size: 16px; font-weight: 600; }
.k4-tile .p { font-size: 13px; color: var(--hl); min-height: 1.2em; }
.k4-tile .k { font-size: 11px; color: var(--verdigris); min-height: 1.2em; }
.k4-tile.clue { border-color: var(--hl); background: rgba(255,227,110,0.07); }

/* ============================================================
   SCRATCHBOARD
   ============================================================ */
.sb { display: grid; grid-template-columns: 250px 1fr 300px; height: calc(100vh - 57px); height: calc(100dvh - 57px); }
.sb-left, .sb-right { background: var(--bg2); padding: 14px; overflow-y: auto; border-right: 1px solid var(--line); }
.sb-right { border-right: none; border-left: 1px solid var(--line); }
.sb h3 { font-size: 15px; margin: 18px 0 8px; font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.sb h3:first-child { margin-top: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-row button, .recipes button, .op-add button { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.chip-row button:hover, .recipes button:hover, .op-add button:hover { border-color: var(--verdigris); }
.chip-row button.danger { color: #ff9b97; }
.recipes { display: flex; flex-direction: column; gap: 6px; }
.recipes button { text-align: left; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.5; }

.sb-plane-wrap { position: relative; overflow: hidden; touch-action: none; cursor: grab;
  background-color: #0e1013;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 40px 40px; }
.sb-plane-wrap.panning { cursor: grabbing; }
.sb-plane { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sb-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; font-size: 15px; }

.layer { position: absolute; border-radius: 10px; background: rgba(26,29,33,0.55); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 6px 24px rgba(0,0,0,0.35); }
.layer.sel { border-color: var(--lc); box-shadow: 0 0 0 2px var(--lc), 0 6px 24px rgba(0,0,0,0.45); }
.layer.nobg { background: transparent; box-shadow: none; }
.layer-bar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 11px; font-family: var(--mono); color: #1a1206; background: var(--lc); border-radius: 9px 9px 0 0; cursor: move; touch-action: none; user-select: none; white-space: nowrap; }
.layer-bar .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.layer-bar .dim { opacity: 0.7; }
.layer-body { position: relative; padding: 6px; }
.lgrid { position: relative; font-family: var(--mono); font-weight: 600; color: var(--lc); }
.lgrid span { position: absolute; display: grid; place-items: center; border-radius: 3px; }
.lgrid span.hl { background: var(--hl); color: #1a1206; }
.lgrid span.mk { box-shadow: inset 0 0 0 2px var(--lc); background: rgba(255,255,255,0.08); }
.grille-board { position: relative; }
.grille-board span { position: absolute; border-radius: 2px; }
.grille-board span.solid { background: var(--gc, #2b2f35); }
.grille-board span.hole { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.layer.locked .layer-bar { cursor: default; }

/* properties panel */
.props h4 { margin: 0 0 10px; font-family: var(--serif); font-size: 20px; }
.prow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.prow.one { grid-template-columns: 1fr; }
.rng { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.rng input[type=range] { width: 100%; accent-color: var(--verdigris); }
.rng output { color: var(--text); font-family: var(--mono); }
.ops { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.op { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.op .t { flex: 1; }
.op input { width: 92px; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 3px 6px; font-family: var(--mono); font-size: 12px; }
.op input.num { width: 52px; }
.op button { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px 4px; font-size: 14px; }
.op button:hover { color: var(--text); }
.op-add { display: flex; flex-wrap: wrap; gap: 5px; }
.op-add button { font-size: 12px; padding: 5px 8px; }
.readout { font-family: var(--mono); font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px; word-break: break-all; max-height: 120px; overflow-y: auto; color: #d4ccbf; }
.pbtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pbtns button { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; }
.pbtns button.danger { color: #ff9b97; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatches button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatches button.on { border-color: #fff; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #d4ccbf; margin: 6px 0; }
.check input { accent-color: var(--verdigris); }

@media (max-width: 980px) {
  .sb { grid-template-columns: 1fr; grid-template-rows: auto 60vh auto; height: auto; }
  .sb-left, .sb-right { border: none; border-bottom: 1px solid var(--line); }
  .sb-plane-wrap { height: 60vh; }
}