/* rhyschang.com — shared styles
   Plain CSS. No build step. Change something here and every page changes.

   Colours all live in the two blocks right below. Change them there. */

:root {
  --paper:    #e6f2fd;   /* sky */
  --card:     #ffffff;
  --ink:      #17263f;
  --ink-soft: #5a6b85;
  --rule:     #c3ddf2;

  --pink:   #ff5c8a;
  --sun:    #ffb627;
  --mint:   #21b57e;
  --grape:  #6c63ff;

  --accent: var(--grape);
  --code-bg: #f0f4fa;
  --shadow: 0 4px 0 rgba(23, 38, 63, 0.14);
  --shadow-lift: 0 9px 0 rgba(23, 38, 63, 0.14);
}

html[data-theme="dark"] {
  --paper:    #151b30;   /* night */
  --card:     #1f2740;
  --ink:      #f0f5ff;
  --ink-soft: #a2b0cc;
  --rule:     #33405f;

  --pink:   #ff7ba3;
  --sun:    #ffc85a;
  --mint:   #45d3a0;
  --grape:  #9b95ff;

  --accent: var(--sun);
  --code-bg: #131a2b;
  --shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 9px 0 rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1.25rem 1.25rem 5rem;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.65 Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  transition: background 0.25s, color 0.25s;
}

.wrap { max-width: 40rem; margin: 0 auto; }
.wrap--wide { max-width: 56rem; }

/* ---------- type ---------- */

h1, h2, h3, .step-num, .tool-name, .btn, .big {
  font-family: Fredoka, Nunito, sans-serif;
}

h1 {
  font-size: clamp(2.4rem, 9vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}

h2 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 3.5rem 0 1rem;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
}

p { margin: 0 0 1.1rem; }

a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }

.lede { font-size: 1.2rem; margin-bottom: 1.75rem; }

.tagline {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

/* rainbow name — one colour per letter group */
.pop { display: inline-block; }
.pop:nth-child(1) { color: var(--pink); }
.pop:nth-child(2) { color: var(--sun); }
.pop:nth-child(3) { color: var(--mint); }
.pop:nth-child(4) { color: var(--grape); }

/* ---------- theme toggle ---------- */

.topbar {
  max-width: 56rem;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.btn {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.3); }

.back {
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 1rem;
}

.back:hover { color: var(--accent); }

/* ---------- code ---------- */

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--code-bg);
  padding: 0.15em 0.4em;
  border-radius: 5px;
}

pre {
  background: var(--code-bg);
  border: 2px dashed var(--rule);
  padding: 0.85rem 1rem;
  border-radius: 10px;
  margin: 0 0 1rem;
  /* Wrap long commands instead of hiding them off the edge. A command you
     can only half see is a command you'll only half type. Line breaks in
     the original are still kept. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre code { background: none; padding: 0; font-size: 0.95rem; }

/* ---------- steps ---------- */

.step { margin: 0 0 2.75rem; }

.step-num {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--grape);
  border-radius: 999px;
  padding: 0.2rem 0.9rem;
  margin-bottom: 0.6rem;
}

/* "a grown-up helps with this bit" flag */
.grownup {
  display: inline-block;
  font-family: Fredoka, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--sun);
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  margin: 0 0 0.6rem 0.4rem;
}

/* ---------- two-column tool blocks ----------
   Big screens: Claude Code on the left, Codex on the right.
   Small screens: they stack, so each box keeps its own colour and
   name badge — that's how you know which one you're looking at. */

.tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0 0;
}

@media (max-width: 44rem) {
  .tools { grid-template-columns: 1fr; }
}

.tool {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 1.1rem 1.15rem 1.25rem;
  box-shadow: var(--shadow);
  min-width: 0;
}

.tool-name {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  border-radius: 999px;
  padding: 0.15rem 0.8rem;
  margin: 0 0 0.85rem;
}

.tool--claude .tool-name { background: var(--pink); }
.tool--codex  .tool-name { background: var(--grape); }

.tool p:last-child, .tool pre:last-child { margin-bottom: 0; }
.tool pre { border-style: solid; }

/* ---------- things to say ---------- */

.prompt {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 0.85rem 1.05rem;
  margin: 0 0 0.9rem;
  box-shadow: var(--shadow);
}

.prompt p { margin: 0; font-weight: 600; }

.prompt-why {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}

/* ---------- notes ---------- */

.note {
  background: var(--card);
  border: 3px solid var(--ink);
  border-left-width: 10px;
  border-left-color: var(--sun);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow);
}

.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--accent); }

/* the handover promise — mint edge, so it reads as a gift not a warning */
.note--promise {
  border-left-color: var(--mint);
  margin-top: 2.5rem;
}

/* ---------- idea stickers ----------
   Each idea is a little card, tilted a bit, like a sticker stuck on
   the page. Hover one and it straightens up and lifts. */

.ideas { margin: 2.5rem 0; }

.ideas > p { color: var(--ink-soft); margin-bottom: 1.4rem; }

.sticker-sheet {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.sticker-sheet li {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 0.5rem 0.95rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: transform 0.18s, box-shadow 0.18s;
}

.sticker-sheet li:nth-child(4n+1) { transform: rotate(-2.5deg); }
.sticker-sheet li:nth-child(4n+2) { transform: rotate(1.8deg); }
.sticker-sheet li:nth-child(4n+3) { transform: rotate(-1.2deg); }
.sticker-sheet li:nth-child(4n+4) { transform: rotate(2.6deg); }

.sticker-sheet li:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.sticker-sheet li:nth-child(5n+1) { border-bottom-color: var(--pink); }
.sticker-sheet li:nth-child(5n+2) { border-bottom-color: var(--sun); }
.sticker-sheet li:nth-child(5n+3) { border-bottom-color: var(--mint); }
.sticker-sheet li:nth-child(5n+4) { border-bottom-color: var(--grape); }

/* ---------- big call-out card ---------- */

.ask {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 20px;
  padding: 1.5rem 1.5rem 1.6rem;
  margin: 3rem 0 0;
  box-shadow: var(--shadow);
}

.ask .big {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.ask p:last-child { margin-bottom: 0; }

/* ---------- home links ---------- */

.home-links { list-style: none; padding: 0; margin: 2rem 0 0; }

.big-link {
  display: block;
  background: var(--mint);
  color: #08301f;
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}

.big-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.big-link b { display: block; font-family: Fredoka, sans-serif; font-size: 1.35rem; }
.big-link span { display: block; font-size: 0.98rem; font-weight: 600; margin-top: 0.2rem; }

html[data-theme="dark"] .big-link { color: #06241a; }

/* ---------- cousins ---------- */

.cousin-grid {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.9rem;
}

/* let every card fill its row, so a longer name doesn't make one card taller */
.cousin-grid li { display: flex; }

.cousin {
  display: block;
  width: 100%;
  color: #17263f;
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 1rem 1.15rem 1.1rem;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}

.cousin:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.cousin--pink { background: var(--pink); }
.cousin--sun  { background: var(--sun); }
.cousin--mint { background: var(--mint); }

.cousin b {
  display: block;
  font-family: Fredoka, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
}

.cousin span { display: block; font-size: 0.92rem; font-weight: 700; opacity: 0.75; }

/* ---------- footer ---------- */

footer {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 3px dotted var(--rule);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- being kind to everyone ---------- */

:focus-visible {
  outline: 4px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .sticker-sheet li { transform: none; }
}