/* ============================================
   ITDW Studio — cosy by design
   ============================================ */

:root {
  /* daytime: warm cream & terracotta */
  --bg: #faf3e7;
  --bg-soft: #f3e8d5;
  --card: #fffaf1;
  --ink: #4a3728;
  --ink-soft: #7a6553;
  --accent: #c96f4a;
  --accent-soft: #e8b498;
  --sage: #8ba888;
  --sage-deep: #5f7d5c;
  --gold: #d9a441;
  --shadow: 0 6px 24px rgba(74, 55, 40, 0.10);
  --shadow-lift: 0 12px 32px rgba(74, 55, 40, 0.16);

  /* scene colors */
  --sc-sky: #2e3a55;
  --sc-moon: #f4e3b2;
  --sc-desk: #b98a5e;
  --sc-laptop: #6d5843;
  --sc-screen: #3d4a63;
  --sc-code: #9db4d8;
  --sc-mug: #c96f4a;
  --sc-tea: #8a5a3b;
  /* george is a golden retriever */
  --sc-dog: #d9a45f;
  --sc-dog-ear: #bd863f;
  --sc-snout: #f0dcb4;
  --sc-brick: #a87258;
  --sc-bed: #86a271;
  --sc-bed-paw: #5f7d52;
  --sc-fire1: #e8833a;
  --sc-fire2: #f2a93b;
  --sc-fire3: #f7d070;
  --sc-leaf: #6f9268;
  --sc-pot: #c98a5f;

  --radius: 20px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Nunito", -apple-system, sans-serif;
}

/* night mode — lamp off, moonlight on */
[data-theme="night"] {
  --bg: #221c2b;
  --bg-soft: #2b2438;
  --card: #2e2739;
  --ink: #efe3d0;
  --ink-soft: #b3a48f;
  --accent: #e8996f;
  --accent-soft: #7a5a48;
  --sage: #7d9a7a;
  --sage-deep: #a3c19f;
  --gold: #e6b95c;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.45);

  --sc-sky: #171f33;
  --sc-desk: #8a6647;
  --sc-laptop: #4d4036;
  --sc-dog: #cfa163;
  --sc-dog-ear: #aa7d42;
  --sc-snout: #e6d0a4;
  --sc-brick: #7d5544;
  --sc-bed: #6e8a5e;
  --sc-bed-paw: #4f6844;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  transition: background 0.6s ease, color 0.6s ease;
  overflow-x: hidden;
  /* subtle paper grain */
  background-image: radial-gradient(rgba(74,55,40,0.035) 1px, transparent 1px);
  background-size: 26px 26px;
}

::selection {
  background: var(--gold);
  color: #3a2b1a;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }

/* ===== Nav ===== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 22px clamp(20px, 5vw, 56px);
  position: relative;
}

.logo {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s ease;
}
.logo:hover { transform: rotate(-2deg) scale(1.03); }
.logo:active { transform: rotate(2deg) scale(0.97); }
.logo-mark { color: var(--accent); }
.logo-studio { color: var(--ink-soft); font-weight: 400; font-style: italic; }

.logo-meaning {
  position: absolute;
  top: 64px;
  left: clamp(20px, 5vw, 56px);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  z-index: 5;
}
.logo-meaning.show { opacity: 1; transform: translateY(0); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
}
.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  position: relative;
  transition: color 0.2s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--accent);
  transition: right 0.25s ease;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { right: 0; }

/* lamp toggle */
.lamp-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 10px;
  transition: transform 0.2s ease;
}
.lamp-toggle:hover { transform: rotate(-8deg) scale(1.12); }
.lamp-shade { fill: var(--accent); }
.lamp-stem, .lamp-base { fill: var(--ink-soft); }
.lamp-glow { fill: var(--gold); opacity: 0.55; transition: opacity 0.5s ease; }
[data-theme="night"] .lamp-glow { opacity: 0; }

/* ===== Hero ===== */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(30px, 6vw, 80px) clamp(20px, 5vw, 56px);
  max-width: 1200px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

/* hand-drawn squiggle underline */
.squiggle {
  position: relative;
  font-style: italic;
  color: var(--accent);
  white-space: nowrap;
}
.squiggle::after {
  content: "";
  position: absolute;
  left: -2%;
  bottom: -6px;
  width: 104%;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 q10 -7 20 0 t20 0 t20 0 t20 0 t20 0 t16 0' fill='none' stroke='%23d9a441' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.hero-sub {
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 30px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.98rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:hover { transform: translateY(-3px) rotate(-0.5deg); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-primary {
  background: var(--accent);
  color: #fff8ef;
  box-shadow: var(--shadow);
}
.btn-primary:hover { box-shadow: var(--shadow-lift); }
.btn-ghost {
  color: var(--sage-deep);
  border: 2.5px dashed var(--sage);
}
.btn-ghost:hover { background: var(--bg-soft); }
.btn-big { font-size: 1.15rem; padding: 16px 34px; }

.hero-hint {
  margin-top: 26px;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
  opacity: 0.7;
}

/* ===== Hero scene ===== */
.hero-scene { position: relative; }
.scene-svg { width: 100%; height: auto; display: block; }

/* string lights */
.sc-wire { fill: none; stroke: var(--ink-soft); stroke-width: 2; opacity: 0.35; }
.bulb { fill: var(--gold); animation: bulb-twinkle 2.6s ease-in-out infinite; }
.bulb:nth-of-type(odd) { animation-delay: 1.3s; }
.bulb:nth-of-type(3n) { animation-delay: 0.6s; }
@keyframes bulb-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
[data-theme="night"] .bulb { filter: drop-shadow(0 0 5px var(--gold)); }

/* framed pictures */
.sc-frame { fill: var(--card); stroke: var(--sc-desk); stroke-width: 3.5; }
.frame-doodle { stroke: var(--sage); stroke-width: 3; fill: none; stroke-linecap: round; }
.petal { fill: var(--accent-soft); }
.petal-core { fill: var(--gold); }
.frame-bone { fill: var(--ink-soft); opacity: 0.65; }
.frame-george { fill: var(--sc-dog); }

/* fireplace */
.sc-fireplace { cursor: pointer; }
.sc-fireplace:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }
.sc-brick { fill: var(--sc-brick); }
.sc-mantel { fill: var(--sc-desk); }
.sc-firebox { fill: #241a14; }
.sc-log { fill: #6b4a33; }
.sc-candle { fill: #f5ecd8; }
.flame {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: flicker 0.7s ease-in-out infinite alternate;
}
.flame.f1 { fill: var(--sc-fire1); }
.flame.f2 { fill: var(--sc-fire2); animation-delay: 0.25s; }
.flame.f3 { fill: var(--sc-fire3); animation-delay: 0.45s; }
@keyframes flicker {
  from { transform: scaleY(1) scaleX(1); }
  to { transform: scaleY(1.14) scaleX(0.93); }
}
.sc-fireplace.stoked .flame { animation-name: flicker-big; animation-duration: 0.28s; }
@keyframes flicker-big {
  from { transform: scaleY(1.15) scaleX(1.05); }
  to { transform: scaleY(1.5) scaleX(0.95); }
}
.fire-glow {
  fill: var(--gold);
  opacity: 0.1;
  animation: glow-pulse 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
[data-theme="night"] .fire-glow { opacity: 0.22; }
@keyframes glow-pulse { 50% { transform: scale(1.08); } }

.sc-window { fill: var(--sc-sky); }
.sc-window-frame { stroke: var(--card); stroke-width: 6; }
.sc-moon-g { cursor: pointer; }
.sc-moon { fill: var(--sc-moon); }
.sc-moon-bite { fill: var(--sc-sky); }
.shooting-star {
  stroke: var(--sc-moon);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
}
.shooting-star.go { animation: shoot 0.9s ease-out forwards; }
@keyframes shoot {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-125px, 85px); }
}
.sc-stars circle { fill: var(--sc-moon); animation: twinkle 3s ease-in-out infinite; }
.sc-stars circle:nth-child(2) { animation-delay: 0.8s; }
.sc-stars circle:nth-child(3) { animation-delay: 1.5s; }
.sc-stars circle:nth-child(4) { animation-delay: 2.2s; }
.sc-stars circle:nth-child(5) { animation-delay: 0.4s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.sc-desk { fill: var(--sc-desk); }
.sc-desk-leg { fill: var(--sc-desk); opacity: 0.85; }
.sc-laptop-g { cursor: pointer; }
.sc-laptop { fill: var(--sc-laptop); }
.sc-screen { fill: var(--sc-screen); }
.sc-code rect {
  fill: var(--sc-code);
  opacity: 0.85;
  transform-box: fill-box;
  transform-origin: left center;
}
/* click the laptop: the code retypes itself */
.sc-code.retype rect { animation: retype 0.45s ease both; }
.sc-code.retype rect:nth-child(2) { animation-delay: 0.15s; }
.sc-code.retype rect:nth-child(3) { animation-delay: 0.3s; }
.sc-code.retype rect:nth-child(4) { animation-delay: 0.45s; }
.sc-code.retype rect:nth-child(5) { animation-delay: 0.6s; }
@keyframes retype { from { transform: scaleX(0); } }
.sc-cursor { animation: blink-cursor 1.1s steps(1) infinite; }
@keyframes blink-cursor { 0%, 60% { opacity: 0.85; } 61%, 100% { opacity: 0.1; } }

.sc-mug-group { cursor: pointer; }
.sc-mug-group:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }
.sc-mug { fill: var(--sc-mug); }
.sc-mug-handle { fill: none; stroke: var(--sc-mug); stroke-width: 6; stroke-linecap: round; }
.sc-tea { fill: var(--sc-tea); }
.steam-path {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.5;
  animation: steam 2.8s ease-in-out infinite;
}
.steam-path.s2 { animation-delay: 1.2s; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(6px); }
  35% { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-10px); }
}
/* hyper-caffeinated steam */
.sc-mug-group.wired .steam-path { animation-duration: 0.5s; stroke-width: 4; }

.sc-leaf { fill: none; stroke: var(--sc-leaf); stroke-width: 7; stroke-linecap: round; }
.sc-pot { fill: var(--sc-pot); }
/* gerald grows with time — scaled from the base of his pot */
#plantScale {
  transform-origin: 430px 278px;
  transition: transform 4s ease;
}
.sc-plant { transform-origin: 430px 246px; animation: sway 5s ease-in-out infinite; cursor: pointer; }
.sc-plant:focus-visible { outline: 2px dashed var(--sage); outline-offset: 4px; }
/* Gerald's bonus leaves, grown by clicking him */
.leaf-x {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: bottom center;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
.leaf-x.grown { opacity: 1; transform: scale(1); }
@keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2.5deg); } }

.sc-dog { cursor: pointer; transition: opacity 0.6s ease; }
.sc-dog:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }
/* while the dog is off chasing your mouse, only a faint ghost-loaf remains */
.sc-dog.away { opacity: 0.12; pointer-events: none; }
.dog-body, .dog-head { fill: var(--sc-dog); }
.dog-ear { fill: var(--sc-dog-ear); }
.dog-snout { fill: var(--sc-snout); }
.dog-nose { fill: #3a2b20; }
.dog-tail {
  fill: none;
  stroke: var(--sc-dog);
  stroke-width: 9;
  stroke-linecap: round;
  transform-origin: 170px 364px;
  animation: tail-wag 1.6s ease-in-out infinite;
}
/* the dog wags faster when you hover. as dogs do. */
.sc-dog:hover .dog-tail { animation-duration: 0.4s; }
@keyframes tail-wag {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(14deg); }
}
.dog-eye, .dog-mouth {
  fill: none;
  stroke: var(--sc-moon);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.sc-dog .dog-eye { animation: dog-blink 6s steps(1) infinite; }
@keyframes dog-blink {
  0%, 91%, 100% { transform: none; }
  92%, 95% { transform: scaleY(0.1); transform-origin: center 340px; }
}
.dog-bone-toy { fill: #f5ecd8; opacity: 0.95; }
.dog-bed { fill: var(--sc-bed); }
.dog-bed-paw { fill: var(--sc-bed-paw); opacity: 0.55; }
.bandana { fill: #5b7fa6; }
/* when someone guesses his name */
.sc-dog.zoomies { animation: happy-bounce 0.3s ease-in-out 6; }
.sc-dog.zoomies .dog-tail { animation-duration: 0.12s; }
@keyframes happy-bounce { 50% { transform: translateY(-10px); } }
.dog-bubble { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.dog-bubble.show { opacity: 1; }
.bubble-bg { fill: var(--card); stroke: var(--ink-soft); stroke-width: 1.5; }
.bubble-text {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}

.sparkle { fill: var(--gold); font-size: 18px; animation: floaty 6s ease-in-out infinite; }
.sp2 { animation-delay: 2s; font-size: 13px; }
.sp3 { animation-delay: 4s; font-size: 15px; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50% { transform: translateY(-12px); opacity: 0.4; }
}

/* ===== Sections ===== */
section { scroll-margin-top: 30px; }

.apps, .about, .hello {
  max-width: 1050px;
  margin: 0 auto;
  padding: clamp(50px, 8vw, 90px) clamp(20px, 5vw, 56px);
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin-bottom: 10px;
}
.h2-doodle {
  display: inline-block;
  transform: rotate(-8deg);
  margin-right: 6px;
  transition: transform 0.5s ease;
}
/* headings do a little twirl when you hover */
h2:hover .h2-doodle { transform: rotate(352deg); }

.section-sub { color: var(--ink-soft); margin-bottom: 40px; }

/* ===== The village (apps live here) ===== */
.village { margin-top: 10px; }

.lane-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 3vw, 30px);
  padding: 26px 0 18px;
}
.lane-row-alt { flex-direction: row-reverse; }

.lane-path {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  width: 100%;
  height: 40px;
  z-index: 0;
  pointer-events: none;
}
.lane-row-alt .lane-path { transform: scaleX(-1); }
.lane-path path {
  fill: none;
  stroke: var(--sc-desk);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 11;
  opacity: 0.55;
}

.cottage {
  position: relative;
  z-index: 1;
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  color: inherit;
  width: clamp(120px, 15vw, 165px);
  padding: 0;
  transform: rotate(var(--ct-tilt, 0deg));
  transition: transform 0.25s ease;
}
.cottage:hover, .cottage:focus-visible { transform: rotate(0deg) translateY(-6px); }
.cottage:focus-visible { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: 12px; }
.cottage svg { width: 100%; height: auto; display: block; overflow: visible; }
.cottage-name {
  display: block;
  margin-top: 6px;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink);
  text-align: center;
}

/* said out loud but not drawn — for table captions and the like */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* the description lives in the HTML so crawlers can read it; on screen it
   waits in the porch. screen readers still get it as part of the link. */
.cottage-desc {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* with JS off the lane never gets built and there are no porches to open,
   so the descriptions come out and stand where you can read them. */
.village:not([data-built]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  padding: 20px 0;
}
.village:not([data-built]) .cottage {
  width: auto;
  max-width: 32ch;
  cursor: default;
}
.village:not([data-built]) .cottage-desc {
  position: static;
  width: auto;
  height: auto;
  margin: 6px 0 0;
  clip-path: none;
  white-space: normal;
  display: block;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* cottage anatomy */
.ct-shadow { fill: rgba(74, 55, 40, 0.12); }
.ct-wall-a { fill: #f2e3c8; }
.ct-wall-b { fill: #ead8c3; }
[data-theme="night"] .ct-wall-a { fill: #4a4157; }
[data-theme="night"] .ct-wall-b { fill: #443c52; }
.ct-roof-a { fill: var(--accent); }
.ct-roof-b { fill: var(--sage); }
.ct-roof-c { fill: var(--sc-brick); }
.ct-chimney { fill: var(--sc-brick); }
.ct-door { fill: var(--sc-desk); transition: fill 0.3s ease; }
.ct-knob { fill: #3a2b20; }
.ct-sign { fill: var(--card); stroke: var(--sc-desk); stroke-width: 1.5; }
.ct-window {
  fill: #cdd7e6;
  stroke: var(--ink-soft);
  stroke-width: 1.5;
  transition: fill 0.3s ease;
}
.cottage:hover .ct-window,
.cottage:focus-visible .ct-window,
[data-theme="night"] .ct-window { fill: var(--gold); }
[data-theme="night"] .ct-window { filter: drop-shadow(0 0 4px var(--gold)); }
.cottage[aria-expanded="true"] .ct-door { fill: var(--gold); }

.ct-smoke circle { fill: var(--ink-soft); opacity: 0; }
.cottage:hover .ct-smoke circle,
.cottage:focus-visible .ct-smoke circle { animation: puff 1.6s ease-out infinite; }
.ct-smoke circle:nth-child(2) { animation-delay: 0.5s; }
.ct-smoke circle:nth-child(3) { animation-delay: 1s; }
@keyframes puff {
  0% { opacity: 0; transform: translateY(4px); }
  30% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* between the cottages */
.filler {
  z-index: 1;
  font-size: 26px;
  align-self: flex-end;
  padding-bottom: 34px;
  opacity: 0.9;
  pointer-events: none;
}
.lamp-pole { fill: var(--ink-soft); }
.lamp-head { fill: var(--gold); opacity: 0.5; transition: opacity 0.4s ease; }
[data-theme="night"] .lamp-head { opacity: 1; filter: drop-shadow(0 0 5px var(--gold)); }

/* george's house */
.doghouse {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  align-self: flex-end;
  transition: transform 0.25s ease;
}
.doghouse:hover, .doghouse:focus-visible { transform: translateY(-5px); }
.doghouse:focus-visible { outline: 2px dashed var(--accent); outline-offset: 6px; border-radius: 12px; }
.dh-body { fill: var(--sc-desk); }
.dh-roof { fill: none; stroke: var(--sc-brick); stroke-width: 6; stroke-linecap: round; }
.dh-door { fill: #241a14; }
.dh-text { fill: var(--ink); font-family: var(--font-body); font-weight: 800; }
.doghouse .cottage-name { font-size: 0.78rem; color: var(--ink-soft); }

/* the porch panel (shared by every cottage) */
.porch-panel {
  position: relative;
  z-index: 2;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 30px;
  margin: 4px auto 26px;
  max-width: 560px;
  animation: porch-in 0.35s ease;
}
@keyframes porch-in { from { opacity: 0; transform: translateY(-8px); } }
.porch-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.porch-icon { font-size: 1.9rem; }
.porch-panel h3 { font-size: 1.3rem; }
.porch-head .app-tag { margin-left: auto; }
.porch-desc { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 12px; }
.porch-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--ink-soft);
}
.porch-close:hover { color: var(--accent); }
#porchToySlot p { color: var(--ink-soft); font-size: 0.95rem; margin: 10px 0 12px; }

/* the toy shelf: offscreen but renderable (yarnPath.getTotalLength needs layout) */
.toy-shelf {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 400px;
  visibility: hidden;
}

.app-icon {
  font-size: 2.4rem;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  border-radius: 18px;
  transition: transform 0.25s ease;
}

.app-link {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
  font-size: 0.95rem;
}
.app-link .arrow { display: inline-block; transition: transform 0.2s ease; }
.app-link:hover .arrow { transform: translateX(5px); }

/* placeholder cards are toys: buttons dressed as links */
.app-action {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-align: left;
}
.app-action:disabled { opacity: 0.6; cursor: wait; }

/* the icon can pop when its card does something */
.app-icon { position: relative; }
.app-icon.pop { animation: icon-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes icon-pop {
  0% { transform: scale(0.6) rotate(-10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* kettle: steam while brewing */
.app-icon.brewing { animation: kettle-rock 0.4s ease-in-out infinite; }
@keyframes kettle-rock {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(4deg); }
}
.app-icon.brewing::after {
  content: "♨";
  position: absolute;
  top: -8px;
  right: 6px;
  font-size: 1rem;
  color: var(--ink-soft);
  animation: steam-rise 1s ease-in-out infinite;
}
@keyframes steam-rise {
  0% { opacity: 0; transform: translateY(6px); }
  40% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* yarn: a thread unravels along the bottom of the porch */
.yarn-thread {
  display: block;
  width: 100%;
  height: 16px;
  margin-top: 6px;
}
.yarn-thread path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.7s ease;
}

/* watering the idea */
.app-icon .drop {
  position: absolute;
  top: -14px;
  left: 50%;
  font-size: 0.9rem;
  pointer-events: none;
  animation: drop-fall 0.7s ease-in forwards;
}
@keyframes drop-fall {
  0% { opacity: 0; transform: translate(-50%, -6px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 26px); }
}

.app-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sage-deep);
  background: var(--bg-soft);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ===== About ===== */
.about-card {
  background: var(--card);
  border-radius: calc(var(--radius) * 1.4);
  padding: clamp(30px, 5vw, 56px);
  box-shadow: var(--shadow);
  position: relative;
}
.about-card::before {
  content: "🧵";
  position: absolute;
  top: -16px;
  right: 40px;
  font-size: 1.6rem;
  transform: rotate(15deg);
}
.about-card p { margin-bottom: 18px; max-width: 62ch; }

.values { list-style: none; margin: 8px 0 22px; }
.values li {
  padding: 10px 0 10px 34px;
  position: relative;
  color: var(--ink-soft);
}
.values li strong { color: var(--ink); }
.values li::before {
  content: "✦";
  position: absolute;
  left: 6px;
  color: var(--accent);
}

.about-aside { font-size: 0.9rem; font-style: italic; color: var(--ink-soft); }
.about-aside a, .about p a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-soft);
}
.wink {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--accent);
  text-decoration: underline wavy var(--gold) 1.5px;
  text-underline-offset: 4px;
  padding: 0;
}

/* ===== Hello ===== */
.hello { text-align: center; }
.hello p { color: var(--ink-soft); margin-bottom: 28px; }
.hello-sub { margin-top: 20px; font-size: 0.88rem; font-style: italic; }

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: 40px 20px 50px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.footer-links {
  margin-top: 8px;
  font-size: 0.85rem;
}
.footer-links a {
  color: var(--ink-soft);
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--accent); }

.footer-tiny {
  margin-top: 10px;
  font-size: 0.72rem;
  opacity: 0.65;
  font-style: italic;
}
.do-not-press {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  color: inherit;
  opacity: 0.8;
  margin-left: 8px;
}
.do-not-press:hover { color: var(--accent); opacity: 1; }

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 100;
  max-width: min(90vw, 480px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Easter egg modes ===== */

/* konami party mode */
@keyframes party-hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
body.party { animation: party-hue 1.2s linear infinite; }
body.party .cottage, body.party .logo { animation: wiggle 0.4s ease-in-out infinite; }
@keyframes wiggle {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}

/* comic sans incident */
body.oops, body.oops * { font-family: "Comic Sans MS", "Comic Sans", cursive !important; }

/* falling emoji (cats, confetti) */
.faller {
  position: fixed;
  top: -50px;
  font-size: 26px;
  z-index: 99;
  pointer-events: none;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(360deg); }
}

/* ===== The chase dog ===== */
.chaser {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}
.chaser.on { opacity: 1; }
.chaser-svg { display: block; transition: transform 0.15s ease; }
.ch-body, .ch-head { fill: var(--sc-dog); }
.ch-ear { fill: var(--sc-dog-ear); }
.ch-snout { fill: var(--sc-snout); }
.ch-nose, .ch-eye { fill: #3a2b20; }
.ch-leg { fill: var(--sc-dog-ear); }
.ch-tail {
  fill: none;
  stroke: var(--sc-dog);
  stroke-width: 6;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: bottom right;
  animation: tail-wag 0.5s ease-in-out infinite;
}
.chaser.running .ch-leg { animation: trot 0.22s ease-in-out infinite; transform-box: fill-box; }
.chaser.running .ch-leg.lgb { animation-delay: 0.11s; }
@keyframes trot { 50% { transform: translateY(-5px); } }
.chaser.sleeping .chaser-svg { transform: rotate(8deg) translateY(6px); }
.chaser.sleeping .ch-leg { animation: none; }

.chaser-bubble {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--ink-soft);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.chaser-bubble.show { opacity: 1; }

/* paw prints left behind while running */
.paw {
  position: fixed;
  z-index: 85;
  pointer-events: none;
  font-size: 11px;
  opacity: 0.45;
  animation: paw-fade 1.2s ease-out forwards;
}
@keyframes paw-fade { to { opacity: 0; } }

/* ===== The fortune cookie ===== */
.fortune-cookie {
  position: absolute;
  z-index: 50;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding: 4px;
  filter: drop-shadow(0 3px 6px rgba(74, 55, 40, 0.25));
  animation: cookie-bob 3.2s ease-in-out infinite;
}
.fortune-cookie:hover, .fortune-cookie:focus-visible {
  animation: none;
  transform: scale(1.3) rotate(-12deg);
}
.fortune-cookie.eaten { display: none; }
@keyframes cookie-bob {
  0%, 100% { transform: translateY(0) rotate(4deg); }
  50% { transform: translateY(-5px) rotate(-6deg); }
}

.fortune-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(40, 28, 18, 0.45);
  backdrop-filter: blur(2px);
}
.fortune-overlay[hidden] { display: none; }
.fortune-slip {
  background: #fffaf0;
  color: #4a3728;
  border: 1.5px dashed #c96f4a;
  border-radius: 8px;
  padding: 36px 42px;
  max-width: min(88vw, 400px);
  text-align: center;
  box-shadow: var(--shadow-lift);
  transform: rotate(-1.5deg);
  animation: slip-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slip-in {
  from { transform: rotate(-1.5deg) translateY(30px) scale(0.9); opacity: 0; }
}
.fortune-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5f7d5c;
}
.fortune-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.45;
  margin: 14px 0 10px;
}
.fortune-fact-box {
  border-top: 1.5px dashed #d9b89a;
  margin: 18px 0 22px;
  padding-top: 14px;
}
.fortune-fact-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a8845f;
  margin-bottom: 6px;
}
.fortune-fact {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #7a6553;
}

/* ===== rolling bone scroll indicator ===== */
.scroll-bone {
  position: fixed;
  top: 6px;
  left: 4px;
  z-index: 80;
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.scroll-bone.scrolling { opacity: 0.7; }

/* ===== ambient autumn leaves ===== */
.autumn-leaf {
  position: fixed;
  top: -40px;
  z-index: 70;
  pointer-events: none;
  animation: leaf-fall linear forwards;
}
.autumn-leaf span {
  display: inline-block;
  font-size: 18px;
  opacity: 0.75;
  animation: leaf-sway 2.8s ease-in-out infinite alternate;
}
@keyframes leaf-fall { to { transform: translateY(112vh); } }
@keyframes leaf-sway {
  from { transform: translateX(-14px) rotate(-30deg); }
  to { transform: translateX(14px) rotate(35deg); }
}

/* ===== double-click sparkle burst ===== */
.burst {
  position: fixed;
  z-index: 95;
  pointer-events: none;
  color: var(--gold);
  font-size: 14px;
  animation: burst-out 0.7s ease-out forwards;
}
@keyframes burst-out {
  to { transform: translate(var(--bx), var(--by)) scale(0.3); opacity: 0; }
}

/* ===== Gerald's ambitions ===== */

/* vines creep down the page edges after a couple of hours */
.vine {
  position: fixed;
  top: 0;
  width: 30px;
  height: 0;
  z-index: 60;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 20px;
  overflow: hidden;
  opacity: 0.9;
  transition: height 4s ease;
}
.vine-left { left: 2px; }
.vine-right { right: 2px; }
.vine span { animation: vine-sway 4.5s ease-in-out infinite; display: inline-block; }
@keyframes vine-sway {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(10deg); }
}

/* left open overnight: gerald claims the page */
body.overgrown { overflow: hidden; }
.overgrowth {
  position: fixed;
  inset: 0;
  z-index: 150;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext y='24' font-size='24'%3E%E2%9C%82%EF%B8%8F%3C/text%3E%3C/svg%3E") 16 16, pointer;
}
.overgrowth-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, #46603d 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, #46603d 0%, transparent 50%),
    #3a5234;
  transition: opacity 0.5s ease;
}
.og-leaf {
  position: absolute;
  user-select: none;
  line-height: 1;
  transition: transform 0.5s ease, opacity 0.5s ease;
  text-shadow: 0 4px 10px rgba(20, 30, 16, 0.4);
}
.og-leaf.snipped {
  transform: translateY(90px) rotate(140deg) scale(0.2) !important;
  opacity: 0 !important;
  pointer-events: none;
}
.og-note {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  z-index: 5;
  background: #fffaf0;
  color: #4a3728;
  border: 1.5px dashed #6f9268;
  border-radius: 10px;
  padding: 22px 28px;
  max-width: min(85vw, 360px);
  text-align: center;
  box-shadow: 0 14px 40px rgba(20, 30, 16, 0.45);
  font-size: 0.95rem;
}
.og-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.og-note p { margin-bottom: 8px; }
.og-sub { font-size: 0.82rem; color: #7a6553; font-style: italic; }
.og-george {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: #c96f4a;
  text-decoration: underline wavy #d9a441 1px;
  text-underline-offset: 3px;
  padding: 2px;
}

/* reduced motion: keep it calm */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .chaser, .paw, .autumn-leaf, .ct-smoke { display: none !important; }
}

/* ===== Responsive ===== */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero-scene { max-width: 460px; margin: 0 auto; }
  .logo-meaning { position: static; margin-top: 2px; width: 100%; order: 3; }
  .lane-row { flex-wrap: wrap; }
  .cottage { width: clamp(120px, 34vw, 150px); min-width: 0; }
}

@media (max-width: 480px) {
  .cottage { width: 42vw; }
  .filler { display: none; }
  .porch-panel { padding: 22px 20px; }
}