/* ==========================================================================
   khailunhao.github.io
   Hand-drawn paper look: ruled background, wobbly borders, two palettes.
   Breakpoint is 760px — matches the original mockup.
   ========================================================================== */

/* ---------- palette ---------- */
:root {
  --paper:      #FDF7DC;
  --paper-rgb:  253, 247, 220;
  --ink:        #2C5B33;
  --deep:       #C25E14;
  --accent:     #F0A03C;
  --accent-rgb: 240, 160, 60;
  --muted-rgb:  122, 75, 34;
  --surface:    #FFFBEF;
  --soft:       #CFE3AE;
  --panel:      #F7EBBE;
  --arch:       #E5DCC2;
  --chip-live:  #B6EFCB;
  --chip-beta:  #FFE0A8;
  --sticky:     #FCEF9C;
  --sticky-ink: #4A3E1B;

  --sans:  'Space Grotesk', system-ui, sans-serif;
  --hand:  'Gaegu', 'Comic Sans MS', cursive;
  --mono:  'Space Mono', ui-monospace, monospace;

  --muted:     rgba(var(--muted-rgb), .75);
  --muted-dim: rgba(var(--muted-rgb), .55);
  --hair:      rgba(var(--muted-rgb), .28);

  /* four hand-drawn corner sets, rotated between cards */
  --wob-1: 225px 18px 210px 20px / 20px 215px 18px 225px;
  --wob-2: 18px 215px 20px 225px / 210px 20px 225px 18px;
  --wob-3: 18px 225px 20px 210px / 215px 20px 225px 18px;
  --pill:  200px 16px 210px 18px / 18px 205px 16px 200px;
}

:root[data-theme="dark"] {
  --paper:      #131415;
  --paper-rgb:  19, 20, 21;
  --ink:        #EFEDE8;
  --deep:       #F5A24C;
  --accent:     #3A3D40;
  --accent-rgb: 58, 61, 64;
  --muted-rgb:  190, 192, 196;
  --surface:    #1C1E20;
  --soft:       #24272A;
  --panel:      #1F2224;
  --arch:       #2C2F32;
  --chip-live:  #1F4433;
  --chip-beta:  #4A3A15;
  --sticky:     #4A4426;
  --sticky-ink: #F2E9C8;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--paper);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 31px, rgba(var(--muted-rgb), .11) 31px 32px);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

body, body * {
  transition: background-color .45s ease, color .45s ease,
              border-color .45s ease, box-shadow .45s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, body * { transition: none !important; animation: none !important; }
}

h1, h2, h3 { font-family: var(--hand); font-weight: 700; color: var(--ink); }
button { font-family: inherit; color: inherit; }
img { max-width: 100%; display: block; }

:where(a, button):focus-visible {
  outline: 3px solid var(--deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: 12px 18px; border: 2px solid var(--ink); font: 600 15px/1 var(--sans);
}
.skip:focus { left: 12px; top: 12px; }

@keyframes fadeup { from { transform: translateY(9px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- header ---------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--paper-rgb), .95);
  backdrop-filter: blur(6px);
  border-bottom: 2px dashed var(--hair);
}

.bar-inner {
  max-width: 1000px; margin: 0 auto; padding: 16px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}

.wordmark {
  font: 700 25px/1 var(--hand);
  color: var(--ink); text-decoration: none;
}


.dots { display: flex; gap: 6px; align-items: center; margin-left: 4px; }
.dot {
  width: 18px; height: 18px; padding: 0; cursor: pointer; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--paper);
  transition: box-shadow .12s;
}
.dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.dot[data-theme-pick="light"] { background: #FDF7DC; border-color: #2C5B33; }
.dot[data-theme-pick="dark"]  { background: #131415; border-color: #EFEDE8; }



/* ---------- side dot nav ---------- */
.vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.sidenav {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
  z-index: 55; display: flex; flex-direction: column; gap: 15px; align-items: center;
}
.sidenav a {
  position: relative; display: block; width: 11px; height: 11px;
  border: 2px solid var(--ink); border-radius: 50%; background: transparent;
  transition: background .16s ease, transform .16s ease;
}
.sidenav a:hover, .sidenav a.is-active { background: var(--accent); }
.sidenav a.is-active { transform: scale(1.4); }

/* label rides out on hover — the dots alone don't say where they go */
.sidenav a::after {
  content: attr(data-label);
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font: 400 17px/1 var(--hand); color: var(--ink); white-space: nowrap;
  background: var(--surface); border: 2px solid var(--ink);
  border-radius: var(--pill); padding: 5px 11px;
  opacity: 0; pointer-events: none; transition: opacity .14s ease;
}
.sidenav a:hover::after, .sidenav a:focus-visible::after { opacity: 1; }

/* ---------- layout ---------- */
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 40px; }

.kicker {
  margin: 0 0 4px;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(var(--muted-rgb), .5);
}

.squiggle-link {
  font: 600 15px/1 var(--sans); color: var(--deep);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline wavy var(--accent) 1.5px; text-underline-offset: 4px;
}
.squiggle-link:hover { color: var(--ink); }

.quiet-link {
  font: 600 14px/1 var(--sans); color: rgba(var(--muted-rgb), .6); text-decoration: none;
}
.quiet-link:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 308px;
  gap: 44px; align-items: start; padding: 52px 0 46px;
}
.eyebrow {
  margin: 0 0 12px;
  font: 700 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--deep);
}
.hero h1 {
  margin: 0; font: 700 60px/.96 var(--hand);
  max-width: 620px; overflow-wrap: break-word;
}

.photo-wrap { position: relative; justify-self: end; margin: 0; }
.photo {
  width: 300px; height: 380px; position: relative; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 12px;
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--accent);
  transform: rotate(1.6deg);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-hint, .shot-hint { display: none; }
.photo.empty, .shot.empty {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg,
    rgba(var(--muted-rgb), .05) 0 10px, transparent 10px 20px), var(--surface);
}
.photo.empty .photo-hint, .shot.empty .shot-hint {
  display: block; padding: 0 14px; text-align: center;
  font: 400 14px/1.4 var(--hand); color: rgba(var(--muted-rgb), .55);
}
.tape {
  position: absolute; top: -11px; left: 50%; margin-left: -31px;
  width: 62px; height: 22px;
  background: rgba(var(--accent-rgb), .85);
  border: 1.5px solid rgba(var(--muted-rgb), .4);
  transform: rotate(-4deg);
}
.photo-wrap figcaption {
  margin: 12px 0 0; text-align: center;
  font: 400 18px/1.2 var(--hand); color: rgba(var(--muted-rgb), .6);
}

/* ---------- workshop ---------- */
.workshop { padding: 10px 0 44px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.section-head h2 { margin: 0; font: 700 32px/1 var(--hand); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn {
  font: 400 17px/1 var(--hand); cursor: pointer; padding: 8px 15px;
  border: 2px solid var(--ink); border-radius: var(--pill);
  background: transparent; color: var(--ink);
  transition: background .14s;
}
.chip-btn.is-on { background: var(--accent); }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }

.card {
  border: 2px solid var(--ink); border-radius: var(--wob-1);
  background: var(--surface);
  transition: box-shadow .16s, transform .16s;
}
.card:nth-child(3n+2) { border-radius: var(--wob-2); }
.card:nth-child(3n+3) { border-radius: var(--wob-3); }
.card.is-open { box-shadow: 6px 6px 0 var(--accent); transform: translate(-2px, -2px); }
.card[hidden] { display: none; }

.card-head { cursor: pointer; }
.shot {
  aspect-ratio: 16 / 10; margin: 14px 14px 0; position: relative; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 8px;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 16px 18px 0; }
.title-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.title-row h3 { margin: 0; font: 700 24px/1 var(--hand); }
.blurb { margin: 0; font: 400 15px/1.55 var(--sans); color: var(--muted); }

.chip {
  font: 700 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); border: 1.5px solid var(--ink); border-radius: 99px; padding: 4px 8px;
  background: var(--arch);
}
.chip[data-status="live"] { background: var(--chip-live); }
.chip[data-status="beta"] { background: var(--chip-beta); }

.detail {
  margin: 14px 18px 0; padding: 14px 0 0;
  border-top: 1px dashed rgba(var(--muted-rgb), .3);
  animation: fadeup .2s ease-out;
}
.detail > p { margin: 0 0 14px; font: 400 15px/1.6 var(--sans); color: var(--muted); }
.facts { display: flex; gap: 24px; flex-wrap: wrap; margin: 0 0 12px; }
.facts dt {
  font: 700 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(var(--muted-rgb), .5); margin-bottom: 4px;
}
.facts dd { margin: 0; font: 400 15px/1.3 var(--sans); color: var(--ink); }
.links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

.card-foot { padding: 12px 18px 16px; }
.more {
  font: 700 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(var(--muted-rgb), .55);
  background: none; border: none; padding: 0; cursor: pointer;
}
.more:hover { color: var(--deep); }

.empty-note {
  margin: 6px 0 0; font: 400 19px/1.5 var(--hand); color: rgba(var(--muted-rgb), .55);
}

/* ---------- ideas + now ---------- */
.ideas-col { padding: 0 0 44px; }
.ideas-col h2 { margin: 0 0 10px; font: 700 26px/1 var(--hand); }
.sub { margin: 10px 0 0; font: 400 14px/1.5 var(--sans); color: rgba(var(--muted-rgb), .6); }

/* Notepad: 38px rule spacing, and the idea text uses the same line-height so
   it sits on the lines instead of floating between them. */
.notepad {
  position: relative; max-width: 700px;
  padding: 22px 26px 24px 62px;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 37px, rgba(var(--muted-rgb), .22) 37px 38px);
  background-position: 0 21px;
  border: 2px solid var(--ink);
  border-radius: 8px 20px 10px 18px / 18px 10px 20px 8px;
  box-shadow: 7px 7px 0 var(--accent);
  transform: rotate(-.4deg);
}
.notepad::before {           /* the red margin rule */
  content: ''; position: absolute; left: 46px; top: 0; bottom: 0;
  width: 2px; background: var(--deep); opacity: .38;
}
.notepad::after {            /* punched holes */
  content: ''; position: absolute; left: 16px; top: 30px; bottom: 30px; width: 14px;
  background-image: radial-gradient(circle at 7px 7px,
    var(--paper) 0 4.5px, var(--ink) 4.6px 6px, transparent 6.2px);
  background-size: 14px 76px; background-repeat: repeat-y;
}

.ideas { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.ideas li {
  font: 400 18px/38px var(--hand);
  color: rgba(var(--muted-rgb), .9);
}

.now-note {
  position: relative; margin-top: 34px; max-width: 560px;
  padding: 24px 26px 22px;
  background: var(--sticky); color: var(--sticky-ink);
  border-radius: 2px; transform: rotate(-1.1deg);
  box-shadow: 0 12px 22px -10px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.05);
}
.pin {
  position: absolute; top: -11px; left: 50%; margin-left: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.55) 0 17%, transparent 18%), var(--deep);
  border: 2px solid var(--ink);
  box-shadow: 0 4px 6px -2px rgba(0,0,0,.45);
}
.now-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.now-note h2 { margin: 0; font: 700 26px/1 var(--hand); color: var(--sticky-ink); }
.now-head .kicker { margin: 0; font-size: 11px; color: var(--sticky-ink); opacity: .6; }
.now-list { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
.now-list dt {
  font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sticky-ink); opacity: .6; margin-bottom: 4px;
}
.now-list dd { margin: 0; font: 400 17px/1.4 var(--sans); color: var(--sticky-ink); }

/* ---------- support ---------- */
.support {
  padding: 22px 26px; margin-bottom: 40px;
  border: 2px solid var(--ink);
  border-radius: 230px 20px 215px 18px / 18px 220px 20px 230px;
  background: var(--panel);
}
.support-grid { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; }
.support h2 { margin: 0 0 6px; font: 700 28px/1 var(--hand); }
.support-grid p { margin: 0; max-width: 360px; font: 400 15px/1.6 var(--sans); color: rgba(var(--muted-rgb), .7); }

.support-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-primary, .btn-secondary {
  text-decoration: none; text-align: center;
  border: 2px solid var(--ink);
}
.btn-primary {
  font: 700 20px/1 var(--hand); color: var(--surface);
  padding: 13px 24px; background: var(--deep);
  border-radius: 200px 20px 210px 16px / 16px 205px 20px 200px;
  box-shadow: 3px 3px 0 var(--ink);
}
.btn-primary:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.btn-secondary {
  font: 400 20px/1 var(--hand); color: var(--ink);
  padding: 13px 22px; background: transparent;
  border-radius: 18px 205px 20px 215px / 200px 20px 210px 18px;
}
.btn-secondary:hover { background: rgba(var(--accent-rgb), .22); }


/* ---------- footer ---------- */
footer {
  padding: 34px 0 46px;
  border-top: 2px dashed var(--hair);
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
}
footer h2 { margin: 0; font: 700 30px/1 var(--hand); }

.socials { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.socials a {
  display: grid; place-items: center; width: 46px; height: 46px;
  color: var(--ink); text-decoration: none;
  border: 2px solid var(--ink); border-radius: var(--pill);
  transition: background .16s ease, transform .16s ease;
}
.socials a:nth-child(2) { border-radius: 16px 205px 18px 200px / 200px 18px 210px 16px; }
.socials a:nth-child(3) { border-radius: 205px 18px 200px 16px / 16px 210px 18px 205px; }
.socials a:nth-child(4) { border-radius: 18px 200px 16px 210px / 205px 16px 200px 18px; }
.socials a:hover { background: var(--accent); transform: translateY(-2px); }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .bar-inner { padding: 14px 20px; }
  .dots { margin-left: auto; margin-right: 10px; }
  .wrap { padding: 0 20px; }
  .sidenav { right: 7px; gap: 12px; }
  .sidenav a { width: 9px; height: 9px; }
  .sidenav a::after { display: none; }

  .hero {
    display: flex; flex-direction: column; gap: 26px;
    padding: 30px 0 34px; align-items: stretch;
  }
  .hero h1 { font-size: 42px; max-width: none; }
  .photo-wrap { align-self: center; }
  .photo { width: 220px; height: 278px; }

  .grid { grid-template-columns: 1fr; gap: 16px; }

  .now-note { padding: 22px 20px 18px; margin-top: 26px; }
  .now-list { grid-template-columns: 1fr; gap: 14px; }
  .notepad { padding: 18px 18px 20px 50px; }
  .notepad::before { left: 36px; }
  .notepad::after { left: 10px; }
  .now-list { grid-template-columns: 1fr; gap: 14px; }

  .support { padding: 20px; }
  .support-grid { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
  .support-btns { flex-direction: column; align-items: stretch; }
  }

@media print {
  .bar, .sidenav, .filters, .card-foot { display: none; }
  .detail[hidden] { display: block !important; }
  body { background: #fff; }
}