/* ===========================================================================
   RunHacks — public, indexable pages.
   Brutalist system: near-black + one neon green, hard 3px rules, zero radius,
   zero shadow, zero glow. Display type (Archivo Black) for statements, mono
   (JetBrains Mono) for everything else. Key terms sit in inverted green blocks
   and decrypt on reveal. The landing is a snap-scrolled sequence of frames
   (html.reel); every other page is a normal document. All content is
   server-rendered and readable with CSS/JS disabled.
   =========================================================================== */
:root {
  --black:  #060806;
  --panel:  #0c110d;   /* lifted panel fill */
  --hover:  #121a14;   /* row hover */
  --green:  #3ee06f;
  --green-2:#5aeb87;   /* hover state for green surfaces */
  --white:  #f4f7f4;
  --gray:   #8b968d;
  --line:   #1e2820;   /* quiet internal divider */
  --amber:  #d9b96a;
  --red:    #e2695c;
  --display: 'Archivo Black', sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;
  --snap: cubic-bezier(.2,.9,.2,1);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--black); }
html.reel, html:has(body.reel) { scroll-snap-type: y mandatory; }
body {
  background: var(--black); color: var(--white);
  font-family: var(--mono); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
b, strong { color: var(--white); font-weight: 700; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; width: 100%; }
.pad { padding: 0 32px; }
.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; }
.grow { flex: 1; min-width: 0; }
.dim { color: var(--gray); }
.bright { color: var(--white); }
.amber { color: var(--amber); } .red { color: var(--red); } .cyan { color: var(--green); }
kbd { background: var(--green); color: var(--black); font: inherit; font-size: 12px; font-weight: 700; padding: 0 .35em; }

/* =================================================================== nav == */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--black); border-bottom: 3px solid var(--green); }
.nav .bar { display: flex; align-items: center; gap: 30px; height: 58px; }
.wordmark { font-weight: 700; font-size: 15px; letter-spacing: -.02em; white-space: nowrap; }
.wordmark .mark { color: var(--green); }
.nav .links { display: flex; gap: 22px; font-size: 13px; margin-left: auto; }
.nav .links a { color: var(--gray); }
.nav .links a:hover, .nav .links a.on { color: var(--green); }
.nav .signin { background: var(--green); color: var(--black); font-weight: 700; font-size: 13px; padding: .34em .95em; white-space: nowrap; }
.nav .signin:hover { background: var(--white); }
.page { padding: 58px 0 0; }
html.reel .page, html:has(body.reel) .page { padding-top: 0; }

/* ================================================================ footer == */
.foot { border-top: 3px solid var(--green); margin-top: 90px; padding: 20px 0; color: var(--gray); font-size: 12.5px; }
.foot .bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.foot .links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a:hover { color: var(--green); }
html.reel .foot, html:has(body.reel) .foot { display: none; }   /* the reel carries its own end card */

/* =============================================================== buttons == */
.btn {
  display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 14px;
  padding: .62em 1.4em; border: 3px solid var(--green); color: var(--green); background: transparent;
  transition: background .12s, color .12s;
}
.btn:hover { background: var(--green); color: var(--black); }
.btn.primary { background: var(--green); color: var(--black); }
.btn.primary:hover { background: var(--white); border-color: var(--white); }
.btn.big { font-size: 16px; padding: .75em 1.7em; }
.btn.sm { font-size: 13px; padding: .38em 1em; border-width: 2px; }

/* ================================================================ panels == */
/* .win is the shared panel across challenges / detail / login / error pages */
.win { position: relative; border: 3px solid var(--green); background: var(--panel); display: flex; flex-direction: column; min-width: 0; }
.win + .win { margin-top: 26px; }
.appsplit > .win { margin: 0; }
.win > .title {
  display: block; background: var(--green); color: var(--black);
  padding: 8px 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win > .title .hint { font-weight: 400; opacity: .75; }
.win > .bd { padding: 24px 26px; }
.win > .bd.pad-sm { padding: 10px 10px; }
.win > .bd > :first-child { margin-top: 0; }
.win > .bd > :last-child { margin-bottom: 0; }
.win h2 { font-family: var(--display); text-transform: uppercase; font-size: 20px; letter-spacing: -.01em; margin: 0 0 14px; }

/* ------------------------------------------------------------ ascii logo -- */
.oslogo { text-align: center; }
.oslogo pre { margin: 0 auto; color: var(--green); font-weight: 700; font-size: clamp(6px, 1.5vw, 12px); line-height: 1.05; display: inline-block; white-space: pre; }

/* ------------------------------------------------------------- app split -- */
.appsplit { display: flex; gap: 20px; align-items: stretch; }
.appsplit .pane-list { flex: 0 0 25em; min-width: 0; }
.appsplit .pane-view { flex: 1; min-width: 0; }
@media (max-width: 860px) { .appsplit { flex-direction: column; } .appsplit .pane-list { flex: auto; } }

/* ---------------------------------------------------------------- rows ---- */
.oslist { display: flex; flex-direction: column; }
.osrow { display: flex; align-items: center; gap: .6em; padding: .45em .6em; color: var(--white); white-space: nowrap; border-bottom: 1px solid var(--line); }
.osrow:last-child { border-bottom: 0; }
.osrow:hover { background: var(--hover); }
.osrow .marker { flex: 0 0 auto; width: 1ch; color: var(--gray); }
.osrow .name { font-weight: 700; }
.osrow .slug { color: var(--gray); }
.osrow .desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--gray); }
.osrow .num { color: var(--gray); } .osrow .num b { color: var(--green); font-weight: 700; }
.osrow .pill { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .1em; padding: 1px 8px; border: 2px solid var(--green); color: var(--green); }
.osrow .pill.lock { border-color: var(--line); color: var(--gray); }
.osrow .led { display: inline-block; width: 8px; height: 8px; background: var(--green); margin-right: .4em; animation: blip 1.9s steps(1) infinite; }
@keyframes blip { 50% { opacity: .25; } }
.osrow.sel { background: var(--green); color: var(--black); }
.osrow.sel .marker, .osrow.sel .name, .osrow.sel .slug, .osrow.sel .desc, .osrow.sel .num, .osrow.sel .num b { color: var(--black); }
.osrow.sel .pill { border-color: var(--black); color: var(--black); }
.osrow.sel .led { background: var(--black); animation: none; }
.osrow.up .name, .osrow.file .name { font-weight: 400; }
.osrow.lock { color: var(--gray); cursor: default; }
.osrow.lock:hover { background: transparent; }
.osrow.lock .name, .osrow.lock .marker { color: var(--gray); }
.list-foot { border-top: 3px solid var(--green); padding: .7em .6em 0; margin-top: .6em; color: var(--gray); font-size: 13.5px; }
.list-foot b { color: var(--green); font-weight: 700; }

/* --------------------------------------------------------- viewer pane ---- */
.viewer { display: flex; flex-direction: column; }
.viewer .vpath { color: var(--gray); padding: 0 .2em .6em; border-bottom: 1px solid var(--line); margin-bottom: .8em; }
.viewer .vpath b { color: var(--white); font-weight: 700; }

/* ------------------------------------------------- numbered how-it-works -- */
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.how li { display: flex; gap: 18px; align-items: flex-start; }
.how .k { font-family: var(--display); color: var(--green); font-size: 20px; line-height: 1.2; min-width: 2em; }
.how h3 { margin: 0 0 4px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.how p { margin: 0; color: var(--gray); }

/* ================================================================= prose == */
.prose { max-width: 78ch; }
.prose h1, .prose h2, .prose h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: -.01em; margin: 1.3em 0 .5em; }
.prose h1 { font-size: 26px; } .prose h2 { font-size: 19px; } .prose h3 { font-size: 15px; }
.prose p { margin: .75em 0; color: var(--white); }
.prose ul, .prose ol { padding-left: 1.4em; } .prose li { margin: .3em 0; }
.prose a { color: var(--green); text-decoration: underline; }
.prose code { color: var(--green); background: var(--hover); padding: 1px 5px; }
.prose pre { background: var(--black); border: 2px solid var(--line); padding: 14px 16px; overflow: auto; }
.prose em { color: var(--amber); font-style: normal; }
.prose blockquote { border-left: 3px solid var(--green); padding-left: 16px; margin: 1em 0; color: var(--gray); }

/* ====================================================== challenge detail == */
.detail-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.detail-head .h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(24px,4vw,44px); line-height: .95; letter-spacing: -.02em; margin: 0; }
.detail-head .pill { font-size: 11px; font-weight: 700; letter-spacing: .1em; padding: 2px 10px; border: 2px solid var(--green); color: var(--green); }
.detail-head .pill.lock { border-color: var(--line); color: var(--gray); }
.detail-meta { display: flex; gap: 26px; color: var(--gray); margin: 12px 0 0; flex-wrap: wrap; }
.detail-meta b { color: var(--green); font-weight: 700; }
.flaglist { display: flex; flex-direction: column; }
.flaglist .f { display: grid; grid-template-columns: 1.4ch 15em 1fr; gap: .8em; padding: .5em .2em; border-bottom: 1px solid var(--line); align-items: baseline; }
.flaglist .f:last-child { border-bottom: 0; }
.flaglist .f .i { color: var(--green); }
.flaglist .f .n { color: var(--white); font-weight: 700; }
.flaglist .f .d { color: var(--gray); }
@media (max-width: 560px) { .flaglist .f { grid-template-columns: 1.4ch 1fr; } .flaglist .f .d { grid-column: 2; } }
.start-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 1.1em; padding-bottom: 1.1em; border-bottom: 1px solid var(--line); }
.start-row .hint { color: var(--gray); }

/* ================================================================= login == */
.login { max-width: 30em; margin: 9vh auto 4vh; }
.login .bd { padding: 26px 28px; }
.login p { color: var(--gray); margin: 0 0 1em; }
.login .prov { display: block; margin: .7em 0; text-align: center; }
.login .notice { color: var(--amber); font-size: 13.5px; margin: 1em 0 0; }
.login .notice.closed { margin: 0 0 1.1em; padding: .7em .8em; border: 2px solid var(--amber); }
.login .boot { color: var(--gray); margin: 0 0 1.2em; }
.login .boot .ok { color: var(--green); }

/* ================================================================= error == */
.error-screen { max-width: 42em; margin: 9vh auto 4vh; }
.error-screen .code { font-family: var(--display); font-size: clamp(60px, 15vw, 130px); line-height: .9; color: var(--red); margin: 0; }
.error-screen .halt { color: var(--amber); margin: .4em 0 1em; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.error-screen pre.dump { color: var(--gray); white-space: pre-wrap; margin: 0 0 1.2em; }
.error-screen pre.dump .err { color: var(--red); }
.error-screen .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.3em; }

/* ======================================================= landing: frames == */
.frame {
  min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden; padding-top: 58px;
}
.frame.green { background: var(--green); color: var(--black); }
.frame.green .dim { color: rgba(6,8,6,.7); }

/* content lands with a hard, fast snap — no fades */
html.js .frame:not(.live) .snapin { opacity: 0; transform: translateY(14px); }
.snapin { transition: opacity .01s, transform .34s var(--snap); }
.live .snapin.s1 { transition-delay: .06s; }
.live .snapin.s2 { transition-delay: .12s; }
.live .snapin.s3 { transition-delay: .18s; }

/* key terms: inverted block + decrypt-on-reveal ------------------------- */
.inv { padding: 0 .12em; background: var(--green); color: var(--black); }
.frame.green .inv { background: var(--black); color: var(--green); }
[data-decode] { display: inline-block; white-space: pre; }

/* ---------------------------------------------------------- 01 · hero ---- */
.hero .line {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(40px, 12.2vw, 176px); line-height: .84; letter-spacing: -.028em; white-space: nowrap;
}
.hero .band {
  background: var(--green); color: var(--black); width: 100%; padding: .06em 32px .1em;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
}
.hero .band .k { font-family: var(--mono); font-size: clamp(10px,.95vw,13px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; align-self: flex-end; padding-bottom: .9em; white-space: nowrap; }
.strip { position: absolute; left: 0; right: 0; bottom: 0; border-top: 3px solid var(--green); display: flex; align-items: stretch; min-height: 62px; }
.strip .now { flex: 1; display: flex; align-items: center; gap: 13px; font-size: 13px; padding: 0 32px; min-width: 0; }
.strip .now .dot { width: 9px; height: 9px; background: var(--green); flex: 0 0 auto; animation: blip 1.9s steps(1) infinite; }
.strip .now .name { color: var(--green); font-weight: 700; white-space: nowrap; }
.strip .now .sep { color: var(--line); }
.strip .now .meta { color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .play { display: flex; align-items: center; padding: 0 40px; background: var(--green); color: var(--black); font-weight: 700; font-size: 16px; white-space: nowrap; }
.strip .play:hover { background: var(--white); }

/* ----------------------------------------------------- 02–04 · statements */
.statement { font-family: var(--display); text-transform: uppercase; font-size: clamp(36px, 8.2vw, 118px); line-height: .86; letter-spacing: -.025em; }
.aside { margin-top: 34px; max-width: 46em; font-size: clamp(14px,1.4vw,16px); border-left: 3px solid var(--green); padding-left: 18px; color: var(--gray); }
.frame.green .aside { border-left-color: var(--black); color: rgba(6,8,6,.72); }

/* ---------------------------------------------------- 05 · now playing --- */
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin-bottom: 20px; }
.frame.green .eyebrow { color: var(--black); }
.feature { border: 3px solid var(--green); }
.feature .fh { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--green); color: var(--black); padding: 9px 20px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.feature .fb { padding: 30px 32px 32px; }
.feature .f-name { font-family: var(--display); text-transform: uppercase; font-size: clamp(26px,4.4vw,54px); line-height: .92; letter-spacing: -.02em; margin: 0; }
.feature .f-desc { color: var(--gray); margin-top: 18px; max-width: 62ch; }
.feature .f-cta { display: inline-block; margin-top: 26px; background: var(--green); color: var(--black); font-weight: 700; padding: .7em 1.6em; }
.feature .f-cta:hover { background: var(--white); }
.feature .more { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.next { color: var(--gray); font-size: 13px; margin-top: 20px; }
.next a { color: var(--green); text-decoration: underline; }

/* ---------------------------------------------------- 06 · how it works -- */
.howgrid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 3px solid var(--black); margin-top: 40px; }
.howgrid > div { border-right: 3px solid var(--black); padding: 26px 26px 30px; }
.howgrid > div:last-child { border-right: 0; }
.howgrid .n { font-family: var(--display); font-size: 32px; line-height: 1; }
.howgrid h3 { font-size: 15px; margin: 12px 0 8px; text-transform: uppercase; letter-spacing: .05em; min-height: 2.4em; }
.howgrid p { font-size: 14px; color: rgba(6,8,6,.72); }

/* ------------------------------------------------------- 07 · clearance -- */
.plangrid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; border: 3px solid var(--green); }
.plan { padding: 28px 30px 30px; display: flex; flex-direction: column; }
.plan + .plan { border-left: 3px solid var(--green); }
.plan.hot { background: var(--green); color: var(--black); }
.plan .head { display: flex; justify-content: space-between; align-items: baseline; }
.plan h3 { font-family: var(--display); text-transform: uppercase; font-size: 19px; letter-spacing: -.01em; }
.plan .price { font-family: var(--display); font-size: 26px; }
.plan .price small { font-family: var(--mono); font-size: 12px; font-weight: 400; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 24px; flex: 1; }
.plan li { padding: .3em 0 .3em 1.5em; position: relative; font-size: 13.5px; }
.plan li::before { content: "→"; position: absolute; left: 0; font-weight: 700; color: var(--green); }
.plan.hot li::before { color: var(--black); }
.plan .go { display: block; text-align: center; font-weight: 700; padding: .7em 1em; border: 3px solid var(--green); color: var(--green); }
.plan .go:hover { background: var(--green); color: var(--black); }
.plan.hot .go { background: var(--black); border-color: var(--black); color: var(--green); }
.plan.hot .go:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.plan .fine { font-size: 11.5px; margin-top: 12px; opacity: .7; }
.endfoot { position: absolute; left: 0; right: 0; bottom: 0; border-top: 3px solid var(--green); padding: 14px 0; font-size: 12.5px; color: var(--gray); }
.endfoot .bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.endfoot .links { display: flex; gap: 18px; flex-wrap: wrap; }
.endfoot a:hover { color: var(--green); }

/* ============================================================ responsive == */
@media (max-width: 900px) {
  html.reel, html:has(body.reel) { scroll-snap-type: none; }
  .wrap, .pad { padding-left: 20px; padding-right: 20px; }
  .frame { min-height: 0; padding: 100px 0 80px; }
  .frame.hero { padding-bottom: 0; }
  .hero .line { white-space: normal; font-size: clamp(38px, 13vw, 92px); }
  .hero .band { flex-direction: column; align-items: flex-start; padding: .1em 20px .16em; }
  .hero .band .k { padding-bottom: .5em; }
  .strip { position: static; margin-top: 40px; flex-direction: column; }
  .strip .now { padding: 14px 20px; flex-wrap: wrap; }
  .strip .now .meta { white-space: normal; }
  .strip .play { border-top: 3px solid var(--green); justify-content: center; padding: 16px; }
  .howgrid, .plangrid { grid-template-columns: 1fr; }
  .howgrid > div { border-right: 0; border-bottom: 3px solid var(--black); }
  .howgrid h3 { min-height: 0; }
  .plan + .plan { border-left: 0; border-top: 3px solid var(--green); }
  .endfoot { position: static; margin-top: 50px; }
  .nav .links { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.reel, html:has(body.reel) { scroll-snap-type: none; }
  html.js .frame:not(.live) .snapin { opacity: 1; transform: none; }
  .snapin { transition: none; }
  .osrow .led, .strip .now .dot { animation: none; }
}