/* Chanelle's Sweet Treats – concept demo.
   World: a chocolate page, and the visitor's message written as one sentence. The words that are theirs to change
   are coloured like hundreds and thousands; the same sprinkle colours mark everything they can add. */
@font-face { font-family: "Chillax"; src: url(../fonts/chillax-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chillax"; src: url(../fonts/chillax-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chillax"; src: url(../fonts/chillax-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #2b1812;       /* chocolate */
  --bg2: #3a2219;      /* one step lighter */
  --ink: #f9efed;
  --soft: #dcc6b9;
  --choc-ink: #2b1812;
  --f-bakes: #f7dde3;  /* strawberry icing */
  --f-also: #ffd36b;   /* butter yellow */
  --f-know: #9fe0c4;   /* mint */
  --on-light: #5e3a32; /* secondary text on the light fields */
  --c1: #f4a7b9;       /* sprinkles */
  --c2: #ffd36b;
  --c3: #9fe0c4;
  --c4: #9cc3ff;
  --c5: #f6b38a;
  --r: 14px;
  --small: 15px;
  --body: clamp(17px, 0.3vw + 16px, 19px);
  --lead: 21px;
  --sub: 28px;
  --display: clamp(28px, 2vw + 12px, 46px);
  --m: clamp(18px, 3.4vw, 48px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--body)/1.55 "Chillax", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.22em; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c2); outline-offset: 3px; }
::selection { background: var(--c2); color: var(--choc-ink); }
[hidden] { display: none !important; }
.demo { background: #1c0f0b; color: var(--soft); font-size: var(--small); text-align: center; padding: 8px var(--m); }

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; gap: 32px; padding: 20px var(--m); background: var(--bg); }
.logo { font-weight: 600; font-size: var(--lead); text-decoration: none; margin-right: auto; }
.top nav { display: flex; gap: 28px; color: var(--soft); }
.top nav a, .top-call { text-decoration: none; padding: 11px 0; transition: color 160ms var(--ease); }
.top nav a:hover, .top-call:hover { color: var(--ink); }
.top-call { font-weight: 500; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--r);
  background: var(--ink); color: var(--choc-ink); font-weight: 600; font-size: var(--body); text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
.btn:hover { background: #fff; }
.btn-small { min-height: 44px; padding: 0 20px; }
.link-btn { background: none; border: 0; padding: 12px 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 6px; cursor: pointer; color: var(--ink); }
.btn:active, .link-btn:active, .chip:active, .stage-add:active, .add:active, #strip button:active { transform: scale(0.97); }

/* ---------- hero: the sentence beside the photo ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); padding: 88px var(--m) 112px; align-items: start; }
.intro { font-weight: 400; font-size: var(--lead); line-height: 1.5; color: var(--soft); max-width: 46ch; margin-bottom: 22px; }
.sentence { font-weight: 600; font-size: var(--display); line-height: 1.38; letter-spacing: -0.015em; max-width: 22em; }
.chip { display: inline; outline-offset: 2px; padding: 0.02em 0.3em; border: 0; border-radius: 0.28em; color: var(--choc-ink); cursor: pointer; line-height: 1.5;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: transform 160ms var(--ease), background-color 160ms var(--ease); text-decoration: none; }
.chip.c1 { background: var(--c1); } .chip.c2 { background: var(--c2); } .chip.c3 { background: var(--c3); } .chip.c4 { background: var(--c4); } .chip.c5 { background: var(--c5); }
.chip.empty { background: transparent; color: var(--ink); box-shadow: inset 0 -0.12em 0 currentColor; border-radius: 0; padding: 0 0.05em; } /* taste-skill-ignore: underline drawn as inset, not a shadow at rest */
.chip.empty.c1 { color: var(--c1); } .chip.empty.c2 { color: var(--c2); } .chip.empty.c3 { color: var(--c3); } .chip.empty.c4 { color: var(--c4); } .chip.empty.c5 { color: var(--c5); }
.chip[aria-expanded="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.chip.pulse { animation: pulse 260ms var(--ease); }
@keyframes pulse { 50% { transform: scale(1.04); } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 36px; }
.status { min-height: 1.6em; margin-top: 12px; color: var(--c2); font-weight: 500; }
.fine { color: var(--soft); font-size: var(--small); max-width: 52ch; }
.preview { margin-top: 14px; }
.preview summary { cursor: pointer; color: var(--soft); min-height: 44px; display: inline-flex; align-items: center; }
.preview pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--small)/1.55 "Chillax", sans-serif; background: var(--bg2); padding: 18px 20px; border-radius: var(--r); margin-top: 8px; max-width: 60ch; }

.viewer { position: sticky; top: 16px; }
.stage { position: relative; border-radius: calc(var(--r) + 6px); overflow: hidden; background: var(--bg2); aspect-ratio: 4 / 3.3; }
.stage img { width: 100%; height: 100%; object-fit: cover; transition: opacity 160ms var(--ease); }
.stage img.swap { opacity: 0; }
.stage figcaption { position: absolute; left: 14px; top: 14px; }
.stage figcaption a { display: inline-block; background: rgba(43, 24, 18, 0.88); color: var(--ink); padding: 8px 14px; border-radius: 10px; font-size: var(--small); text-decoration: none; }
.stage-add { position: absolute; right: 14px; bottom: 14px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--c2); color: var(--choc-ink); font-weight: 600; cursor: pointer; transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
.stage-add[aria-pressed="true"] { background: var(--ink); }
.stage-title { margin: 14px 0 12px -10px; padding: 2px 10px; width: fit-content; border-radius: 10px; background: var(--bg); font-weight: 600; font-size: var(--lead); }
#strip { list-style: none; margin: 0; padding: 4px 2px 8px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
#strip button { position: relative; width: 100%; aspect-ratio: 1; flex: none; padding: 0; border: 3px solid transparent; border-radius: 12px; overflow: hidden; background: none; cursor: pointer; scroll-snap-align: start; transition: transform 160ms var(--ease), border-color 160ms var(--ease); }
#strip button img { width: 100%; height: 100%; object-fit: cover; }
#strip button[aria-current="true"] { border-color: var(--ink); }
#strip button.picked::after, .bake.picked .bake-photo::after { content: ""; position: absolute; right: 6px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--c2); border: 2px solid var(--choc-ink); }

/* ---------- the small editor under a word ---------- */
.pop { position: absolute; z-index: 20; width: min(400px, calc(100vw - 32px)); background: var(--ink); color: var(--choc-ink); border-radius: 16px; padding: 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); transform-origin: top left; } /* taste-skill-ignore: floats */
.pop.in { animation: popin 180ms var(--ease); }
@keyframes popin { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.pop-h { font-weight: 600; font-size: var(--lead); margin-bottom: 14px; }
.pop .f { display: grid; gap: 6px; margin-bottom: 12px; }
.pop .f > span { font-size: var(--small); font-weight: 500; }
.pop input:not([type=checkbox]), .pop select, .pop textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid #e2cfc4; border-radius: 10px; background: #fff; color: var(--choc-ink); font-size: var(--body); }
.pop input:focus, .pop select:focus, .pop textarea:focus { border-color: var(--choc-ink); outline: none; }
.pop [aria-invalid="true"] { border-color: #b3261e !important; }
.row2 { display: grid; grid-template-columns: 6.5rem 1fr; gap: 8px; }
.tick { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--small); cursor: pointer; }
.tick input, .pk input { width: 22px; height: 22px; accent-color: var(--choc-ink); flex: none; }
.hint { color: #b3261e; font-size: var(--small); font-weight: 500; min-height: 0; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sugg button { border: 0; border-radius: 999px; background: #f0e0d6; padding: 8px 14px; min-height: 40px; cursor: pointer; font-size: var(--small); transition: transform 160ms var(--ease); }
.sugg button:active { transform: scale(0.97); }
.pick-list { max-height: min(46vh, 380px); overflow-y: auto; display: grid; gap: 4px; margin: 0 -4px 8px; padding: 0 4px; }
.grp { font-size: var(--small); font-weight: 600; color: #6b4a3d; margin: 10px 0 2px; }
.pk { display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; border-radius: 10px; padding: 4px; }
.pk:hover { background: #f3e6dd; }
.pk img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.pop-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.pop .link-btn { color: var(--choc-ink); }
.pop .btn { background: var(--choc-ink); color: var(--ink); }
.pop.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; border-radius: 18px 18px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 82svh; overflow-y: auto; transform-origin: bottom center; }
.pop.sheet.in { animation: sheetin 220ms var(--ease); }
@keyframes sheetin { from { transform: translateY(40px); opacity: 0; } }

/* ---------- past bakes ---------- */
/* below the hero each part of the page takes one icing colour; the sprinkled chocolate returns at the end */
.bakes { padding: 120px var(--m) 40px; background: var(--f-bakes); color: var(--choc-ink); }
.bakes :focus-visible, .also :focus-visible, .know :focus-visible { outline-color: var(--choc-ink); }
.bakes .meta a { color: var(--choc-ink); }
.head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: end; margin-bottom: 56px; }
.head h2, .know h2 { font-weight: 600; font-size: var(--display); line-height: 1.02; letter-spacing: -0.02em; max-width: 14em; }
.head p { color: var(--on-light); max-width: 40ch; }
.group { margin-bottom: 88px; }
.group h3 { font-weight: 600; font-size: var(--sub); margin-bottom: 24px; }
.group h3 span { color: var(--on-light); font-weight: 400; }
.grid { columns: 3 300px; column-gap: 24px; }
.bake { break-inside: avoid; margin-bottom: 36px; }
.bake-photo { position: relative; border-radius: var(--r); overflow: hidden; background: var(--bg2); }
.bake-photo img { width: 100%; height: auto; transition: transform 500ms var(--ease); }
.bake:hover .bake-photo img { transform: scale(1.02); }
.bake h4 { font-weight: 600; font-size: var(--lead); margin: 16px 0 4px; }
.bake p { color: var(--on-light); max-width: 40ch; }
.bake .meta { font-size: var(--small); margin-top: 6px; }
.add { margin-top: 14px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--c2); color: var(--choc-ink); font-weight: 600; cursor: pointer; transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
.add[aria-pressed="true"] { background: var(--choc-ink); color: var(--ink); }

/* ---------- also makes: one drenched band ---------- */
.also { background: var(--f-also); color: var(--choc-ink); padding: clamp(120px, 10vw, 150px) var(--m); }
.also { text-align: center; }
.also-line { margin-inline: auto; font-weight: 600; font-size: var(--display); line-height: 1.3; letter-spacing: -0.02em; max-width: 20em; }
.also-chip { display: inline; padding: 0.02em 0.32em; border: 0; border-radius: 0.28em; background: var(--choc-ink); color: var(--ink); cursor: pointer; line-height: 1.5; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: transform 160ms var(--ease), background-color 160ms var(--ease); }
.also-chip[aria-pressed="true"] { background: var(--ink); color: var(--choc-ink); outline: 3px solid var(--choc-ink); outline-offset: -3px; }
.also-chip:active { transform: scale(0.97); }
.also > p { margin: 28px auto 0; max-width: 46ch; font-weight: 500; }

/* ---------- good to know ---------- */
.know { padding: 140px var(--m) 140px; background: var(--f-know); color: var(--choc-ink); }
.know h2 { margin-bottom: 48px; }
.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 44px clamp(32px, 4vw, 64px); }
.qa dt { font-weight: 600; font-size: var(--lead); margin-bottom: 10px; }
.qa dd { color: #2f4a40; max-width: 44ch; }

/* ---------- close ---------- */
.foot { padding: 140px var(--m) 110px; text-align: center; }
.bye, .imprint { margin-inline: auto; }
.bye { font-weight: 600; font-size: var(--display); line-height: 1.38; letter-spacing: -0.015em; max-width: 22em; }
.bye .chip { overflow-wrap: anywhere; }
.imprint { margin-top: 72px; color: var(--soft); font-size: var(--small); max-width: 64ch; }

/* ---------- dock ---------- */
.dock { position: fixed; z-index: 15; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; background: var(--ink); color: var(--choc-ink); padding: 10px 10px 10px 20px; border-radius: 16px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4); max-width: calc(100vw - 24px); animation: popin 200ms var(--ease); } /* taste-skill-ignore: floats */
.dock p { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dock-back { white-space: nowrap; font-weight: 500; padding: 10px 4px; }
.dock .btn { background: var(--choc-ink); color: var(--ink); }

/* ---------- sprinkle bands on the top and bottom edge of each icing-coloured part ---------- */
.hero, .bakes, .also, .know, .foot { position: relative; isolation: isolate; }
.hero::before, .hero::after, .bakes::before, .bakes::after, .also::before, .also::after, .know::before, .know::after, .foot::before, .foot::after {
  content: ""; position: absolute; left: 0; right: 0; height: 90px; z-index: -1; pointer-events: none; background-repeat: repeat-x; background-size: 1040px 90px; }
.hero::before, .bakes::before, .also::before, .know::before, .foot::before { top: 0; }
.hero::after, .bakes::after, .also::after, .know::after, .foot::after { bottom: 0; transform: scaleY(-1); background-position: 520px 0; }
.hero::before, .hero::after, .foot::before, .foot::after { background-image: url(band-choc.svg); }
.bakes::before, .bakes::after { background-image: url(band-pink.svg); }
.also::before, .also::after { background-image: url(band-yellow.svg); }
.know::before, .know::after { background-image: url(band-mint.svg); }

/* ---------- entrances ---------- */
.js .rise { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: var(--d, 0ms); }
.js .rise.in { opacity: 1; transform: none; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .top { gap: 12px; padding: 14px var(--m); } .top nav, .top-call .num { display: none; } .logo { font-size: var(--body); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 76px var(--m) 96px; }
  .viewer { position: relative; top: 0; order: -1; }
  .stage { aspect-ratio: 4 / 3; }
  #strip { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  #strip button { width: 60px; height: 60px; scroll-snap-align: start; }
  .sentence { font-size: var(--sub); }
  .also-line, .bye { font-size: var(--sub); }
  .actions { flex-direction: column; align-items: stretch; } .actions .btn { width: 100%; } .actions .link-btn { text-align: left; }
  .bakes { padding-top: 88px; } .head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; } .group { margin-bottom: 56px; }
  .know { padding-top: 120px; padding-bottom: 120px; } .foot { padding-top: 120px; }
  .dock { left: 12px; right: 12px; transform: none; bottom: 12px; padding: 8px 8px 8px 14px; gap: 8px; } .dock-back { display: none; } .dock p { font-size: var(--small); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *:not(.rise), *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .js .rise { transform: none; transition: opacity 400ms linear; transition-delay: var(--d, 0ms); }
}