/* =====================================================
   ELYSIAN STUDIO
   1. Fonts + colors   2. Base   3. Top bar   4. Home
   5. Products   6. Cart   7. Pop-ups   8. Phones
   All artwork lives in the "images" folder.
   ===================================================== */

/* ---------- 1. FONTS + COLORS ---------- */

/* Heavenfield: put heavenfield.ttf in the "fonts" folder (backup font until then) */
@font-face {
  font-family: "Heavenfield";
  src: url("fonts/heavenfield.woff2") format("woff2"),
       url("fonts/heavenfield.ttf") format("truetype"),
       url("fonts/heavenfield.otf") format("opentype");
  font-display: swap;
}
/* Slopes: body text */
@font-face {
  font-family: "Slopes";
  src: url("fonts/slopes.woff2") format("woff2"),
       url("fonts/slopes.ttf") format("truetype"),
       url("fonts/slopes.otf") format("opentype");
  font-display: swap;
  /* Slopes has no "$" and an empty "@", so those two characters come from the next font */
  unicode-range: U+0020-0023, U+0025-003F, U+0041-007E, U+00A0-00FF;
}

:root {
  --bg: #f5f0e9;            /* main background + header color */
  --ink: #111111;

  --font: "Heavenfield", "Patrick Hand", "Comic Sans MS", cursive;       /* nav links + footer */
  --font-body: "Slopes", "Heavenfield", "Patrick Hand", "Comic Sans MS", cursive;       /* everything else */

  --header-h: 150px;        /* set automatically by script.js */
  --cu: calc(min(100vw, 2400px) / 2049);   /* 1 unit of the desktop canvas; phones override this below */
}

/* ---------- 2. BASE ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.no-scroll { overflow: hidden; }

main { flex: 1; display: flex; flex-direction: column; }
.page { flex: 1; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; }

/* Heavenfield: the nav links (top bar + phone menu), the contact section and the footer */
#top-bar, .drawer, .foot, .contact { font-family: var(--font); }

.heart { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; vertical-align: -0.1em; }
.heart.solid { fill: currentColor; stroke: none; }

/* Hand-drawn squiggle under things: add class "draw", then "on" to show it.
   Default = short wave. Change --ul / --ul-ar to use another squiggle image. */
.draw { position: relative; }
.draw::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -8px;
  aspect-ratio: var(--ul-ar, 173 / 12);
  background: var(--ul, url("images/wave-short.png")) no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s ease;
  pointer-events: none;
}
.draw.on::after { clip-path: inset(0); }

/* Placeholder photo box (the text shows until a real image loads on top) */
.photo {
  position: relative; overflow: hidden;
  background: #c8d1db;
  display: grid; place-items: center; text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(31 * var(--cu));
  line-height: 1.25;
  color: var(--ink);
}
.photo::before { content: "place to insert image"; padding: 0 8px; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 3. TOP BAR ---------- */

#top-bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  align-items: center;
  min-height: clamp(84px, 9.6vw, 196px);
  padding: 0 clamp(8px, 4vw, 60px);
  transition: box-shadow 0.25s ease;
}
#top-bar.shadow { box-shadow: 0 10px 18px -6px rgba(0, 0, 0, 0.24); }

.nav-link { justify-self: center; font-size: clamp(20px, 2.7vw, 38px); line-height: 1.2; padding: 0 4px; }
.nav-link.draw::after { bottom: -6px; }

/* logo = two hearts image behind the "Elysian Studio" script image */
.logo { position: relative; display: block; width: clamp(200px, 30.7vw, 630px); line-height: 0;
  transform: translateY(12.2%); }   /* nudges the logo down so its letters (not the y-tail) line up with the nav text */
.logo-hearts { position: absolute; left: 0; top: 13%; width: 100%; height: auto; }
.logo-text { position: relative; display: block; width: 77.6%; height: auto; margin: 0 auto; }

/* phone menu (only shown on small screens, see section 8) */
.menu-btn, .drawer, .drawer-backdrop { display: none; }
.menu-btn { position: relative; flex: none; width: 36px; height: 32px; }
.menu-btn span { position: absolute; left: 5px; right: 5px; height: 1.6px; background: var(--ink); }
.menu-btn span:nth-child(1) { top: 7px; }
.menu-btn span:nth-child(2) { top: 15px; }
.menu-btn span:nth-child(3) { top: 23px; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 120;
  width: min(62vw, 250px); padding: 18px 22px;
  background: var(--bg);
  box-shadow: 10px 0 22px -6px rgba(0, 0, 0, 0.32);
  transform: translateX(-108%); visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s;
}
.drawer.open { transform: none; visibility: visible; }
.drawer-close { display: block; margin: 0 -4px 14px auto; width: 40px; height: 40px; }
.drawer-close svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.drawer .nav-link { display: block; justify-self: start; width: fit-content; margin: 2px 0 10px; font-size: clamp(26px, 8vw, 34px); text-align: left; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 115; }

/* ---------- 4. HOME ---------- */

.hero {
  display: grid;
  grid-template-columns: 36.2fr 44fr;
  column-gap: 4.5vw;
  align-items: center;
  padding: clamp(30px, 6.2vw, 120px) 7vw clamp(40px, 7vw, 90px) 8.5vw;
}
.hero-text { text-align: center; font-size: clamp(20px, 2.1vw, 29px); line-height: 1.3; }

/* two polaroid frames; the photo is cut to the frame's window */
.collage { position: relative; width: 100%; aspect-ratio: 749 / 651; }
.polaroid { position: absolute; }
.p1 { left: 0; top: 0; width: 60.5%; aspect-ratio: 453 / 533; z-index: 2;
  --poly: polygon(5.07% 20.37%, 80.91% 10.32%, 92.29% 71.75%, 16.22% 81.80%);
  --cx: 48.62%; --cy: 46.06%; --w: 77.07%; --h: 62.45%; --ang: -8.86deg; }
.p2 { left: 40.3%; top: 25.3%; width: 59.7%; aspect-ratio: 447 / 486;
  --poly: polygon(33.11% 5.49%, 93.57% 26.53%, 69.80% 84.22%, 9.34% 63.39%);
  --cx: 51.45%; --cy: 44.91%; --w: 64.98%; --h: 62.17%; --ang: 20.72deg; }
.polaroid .slot { position: absolute; inset: 0; clip-path: var(--poly); background: #c8d1db; }
.polaroid .ph {
  position: absolute; left: var(--cx); top: var(--cy); width: var(--w); height: var(--h);
  transform: translate(-50%, -50%) rotate(var(--ang));
  display: grid; place-items: center; text-align: center;
  font-family: Arial, Helvetica, sans-serif; font-size: calc(31 * var(--cu)); line-height: 1.25;
}
.polaroid .ph::before { content: "place to insert image"; padding: 0 6px; }
.polaroid .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.polaroid .frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }

.contact {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px clamp(24px, 4vw, 56px);
  padding: clamp(20px, 4vw, 60px) clamp(16px, 8vw, 112px) clamp(14px, 2.6vw, 40px);
  font-size: clamp(18px, 1.95vw, 27px);
  scroll-margin-top: var(--header-h);
}
.contact h2 { font-size: 1.15em; font-weight: normal; --ul: url("images/wave-long.png"); --ul-ar: 287 / 17; }

.foot {
  display: flex; justify-content: center; align-items: center; gap: 0.4em;
  padding: 0.4em 1em;
  background: var(--bg);
  box-shadow: 0 -8px 16px -4px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(0, 0, 0, 0.04);
  font-size: clamp(20px, 2.3vw, 32px);
}
.foot .copy { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 0.75em; line-height: 1; }

/* ---------- 5. PRODUCTS ---------- */

.shop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) clamp(300px, 30.4vw, 620px);
  gap: clamp(16px, 3vw, 50px);
  align-items: start;
  padding: clamp(20px, 3.2vw, 64px) 3.4vw 60px 1.4vw;
}

.side { display: flex; align-self: start; margin-top: clamp(20px, 5vw, 76px); }
.cats { position: relative; }
.cat-current { display: none; }   /* phones only */
.cat-list { display: flex; flex-direction: column; gap: 0.5em; padding: 30px 18px 30px 0; text-align: center; }
.cat {
  position: relative; isolation: isolate;
  font-size: clamp(20px, 2.6vw, 36px); line-height: 1.3;
  padding: 0 24px; white-space: nowrap;
}
.cat.active::before {
  content: ""; position: absolute; inset: -0.08em -0.3em -0.08em -0.45em; z-index: -1;
  background: url("images/brush-pink.png") no-repeat center / 100% 100%;
}
.divider { position: relative; width: clamp(16px, 1.9vw, 40px); align-self: stretch; margin: 0 4px; }
.divider .div-h { display: none; }
.divider .div-v { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, clamp(240px, 18.5vw, 380px));
  gap: clamp(30px, 3.4vw, 60px) clamp(24px, 4.6vw, 80px);
  justify-content: center;
  padding-top: 10px;
}
.empty-cat { grid-column: 1 / -1; text-align: center; padding: 40px 0; }

/* A product notepad. Everything inside is sized in "cqw" (1% of the card's width),
   so the layout scales perfectly at any card size (also used big in the options pop-up). */
.card {
  position: relative; container-type: inline-size;
  aspect-ratio: 797 / 897;
  background: url("images/note.webp") no-repeat 0 0 / 100% 100%;
}
.card .paper { position: absolute; inset: 0; font-size: 9.8cqw; }
.card-top { position: absolute; left: 4.5cqw; right: 3.5cqw; top: 33.5cqw; display: flex; align-items: flex-end; gap: 1.6cqw; }
.card .photo { flex: none; width: 49cqw; height: 49.5cqw; }
.info { display: flex; flex-direction: column; align-items: flex-start; font-size: 7cqw; line-height: 1.5; padding-bottom: 0; margin-bottom: -2cqw; min-width: 0; }
.card-name, .card-price { display: block; }
.card-desc {
  display: block;
  /* keeps long descriptions to 2 lines on the small cards */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.card.big .card-desc { -webkit-line-clamp: 4; }   /* the select-options card has more room */

/* "select options": the straight line vanishes and is sketched back in */
.opt-link {
  position: relative; margin-top: 0.4cqw; text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.65);
  line-height: 1.15; font-size: 1.13em;
}
.opt-link::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -6px;
  aspect-ratio: 246 / 29;
  background: url("images/underline-sketch.png") no-repeat center / 100% 100%;
  opacity: 0; pointer-events: none;
}
.opt-link.redraw { animation: link-line 1.6s linear; }
.opt-link.redraw::after { animation: sketch-a 1.6s ease-out; }
@keyframes link-line {
  0%   { border-bottom-color: rgba(0, 0, 0, 0.65); }
  6%, 90% { border-bottom-color: transparent; }
  100% { border-bottom-color: rgba(0, 0, 0, 0.65); }
}
@keyframes sketch-a {
  0%   { opacity: 1; clip-path: inset(0 100% 0 0); }
  55%, 88% { opacity: 1; clip-path: inset(0); }
  100% { opacity: 0; clip-path: inset(0); }
}

.add-btn {
  position: absolute; left: 50%; top: 99.2cqw; transform: translate(-50%, -50%);
  isolation: isolate; white-space: nowrap;
  padding: 0.25em 1.3em 0.5em; font-size: 10.05cqw; line-height: 1.2;
}
.add-btn::before {            /* brush stroke shown on hover */
  content: ""; position: absolute; left: 6%; right: 6%; top: -12%; bottom: 8%; z-index: -1;
  background: url("images/brush-tan.png") no-repeat center / 100% 100%;
  opacity: 0; transition: opacity 0.15s;
}
.add-btn::after {             /* underline with the little heart */
  content: ""; position: absolute; left: 1em; right: 1em; bottom: 0.28em;
  aspect-ratio: 340 / 32;
  background: url("images/underline-heart.png") no-repeat center / 100% 100%;
}
.add-btn:focus-visible::before, .add-btn.on::before, .add-btn:active::before { opacity: 1; }
@media (hover: hover) { .add-btn:hover::before { opacity: 1; } }

/* ---------- 6. CART ---------- */

/* the notebook that stays put on the products page */
.cart-dock { position: sticky; top: calc(var(--header-h) + 24px); width: 100%; }
.notebook {
  position: relative; container-type: inline-size;
  aspect-ratio: 1300 / 1353;
  background: url("images/notebook.png") no-repeat 0 0 / 100% 100%;
}
.cart-paper {
  position: absolute; left: 7.4%; top: 7%; width: 66.7%; height: 82.8%;
  display: flex; flex-direction: column;
  padding: 2.4cqw 2.4cqw 2cqw; font-size: 7cqw;
}

/* everything inside either cart */
.cart-title { align-self: flex-start; font-size: 1.15em; font-weight: normal; line-height: 1.15; margin-bottom: 12px; --ul: url("images/wave-loop.png"); --ul-ar: 286 / 30; }
.cart-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 6px 6px 4px; scrollbar-width: thin; scrollbar-color: #cdb899 transparent; }
.line { margin-bottom: 0.15em; }
.line-main { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5em; row-gap: 0.1em; font-size: 0.78em; }
.l-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.l-end { flex: none; display: flex; align-items: baseline; gap: 0.4em; margin-left: auto; }
.qty { display: inline-flex; gap: 6px; align-items: center; }
.l-price { min-width: 2.5em; text-align: right; }
.qty button { padding: 0 5px; }
.l-opt { display: block; margin-left: 1.9em; font-size: 0.6em; text-align: left; line-height: 1.05; }
.l-opt:hover { text-decoration: underline; }
.cart-list .empty { font-size: 0.72em; }
.cart-foot { flex: none; padding-top: 6px; }
.cart-total-row { font-size: 0.72em; }
.cart-btns { display: flex; align-items: center; gap: 0.9em; margin-top: 4px; }
.tape-btn { position: relative; isolation: isolate; padding: 0.15em 0.9em; font-size: 0.74em; }
.tape-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("images/tape.png") no-repeat center / 100% 100%;
}
.plain-btn { font-size: 0.74em; }
.plain-btn:hover, .tape-btn:hover { text-decoration: underline; }

/* ---------- 7. POP-UPS ---------- */

.modal-wrap {
  position: fixed; inset: 0; z-index: 95;      /* below the top bar (100), so the bar stays bright */
  display: flex;
  background: rgba(10, 10, 10, 0.52);
  padding: calc(var(--header-h) + 16px) 16px 16px;
  overflow: auto;
}
.modal-wrap > * { margin: auto; }

/* cart note: one picture (tape, torn paper, grid sheet, flower) with the cart on top */
.note-stack {
  position: relative; container-type: inline-size;
  width: min(clamp(300px, 37vw, 760px), calc((100vh - var(--header-h) - 40px) * 0.9495));
  aspect-ratio: 1200 / 1264;
  background: url("images/cart-note.png") no-repeat 0 0 / 100% 100%;
}
.note {
  position: absolute; left: 18%; right: 15%; top: 17%; bottom: 11.5%;
  display: flex; flex-direction: column; font-size: 7.2cqw;
}

/* select options */
.opt-wrap { display: flex; gap: 4vw; align-items: center; justify-content: center; width: min(1500px, 100%); }
.opt-wrap .card.big { flex: none; width: clamp(250px, 31.2vw, 640px); }
.group-label { font-weight: normal; width: fit-content; }
.choice { position: relative; isolation: isolate; display: block; text-align: left; }
.choice .num { margin-right: 0.3em; }
.choice.sel::before {
  content: ""; position: absolute; inset: 8% -0.5em 8% -0.5em; z-index: -1;
  background: url("images/brush-pink.png") no-repeat center / 100% 100%;
}
@media (hover: hover) { .choice:hover { text-decoration: underline; } }
.sheet-title { font-weight: normal; width: fit-content; }

@media (min-width: 901px) {
  /* the lined sheet picture; rows are spaced to sit on its printed lines */
  .opt-sheet {
    position: relative; flex: none; container-type: inline-size;
    width: clamp(520px, 45.4vw, 930px);
    aspect-ratio: 2066 / 1488;
    background: url("images/sheet.webp") no-repeat 0 0 / 100% 100%;
  }
  .sheet-text { position: absolute; left: 18.3cqw; top: 11.1cqw; right: 4cqw; }
  .sheet-title { font-size: 4.4cqw; line-height: 5.9cqw; }
  .sheet-title.draw::after { bottom: -0.6cqw; }
  .group-label { font-size: 3.4cqw; line-height: 5.9cqw; margin-left: 6.5cqw; }
  .group-label.draw::after { bottom: -0.2cqw; }
  .choice { font-size: 3cqw; line-height: 5.9cqw; margin-left: 10.6cqw; }
  .sheet-photo { position: absolute; left: 54cqw; top: 18.8cqw; width: 34cqw; }
  .sheet-photo .photo { width: 100%; aspect-ratio: 315 / 318; }
}

/* ---------- 8. PHONES + TABLETS (900px and narrower) ----------
   The phone layout is built on a 590-unit-wide canvas (the Canva phone mockup).
   1u = 1/590 of the screen width, so every size below scales together
   and keeps the exact proportions of the mockup on any phone.            */

@media (max-width: 900px) {
  :root { --u: calc(min(100vw, 640px) / 590); --cu: var(--u); }
  html { scrollbar-gutter: auto; scrollbar-width: none; }   /* so 100vw = the true screen width */
  html::-webkit-scrollbar { display: none; }

  /* ---- top bar: menu button + logo (132u tall) ---- */
  #top-bar { display: flex; align-items: center; height: calc(132 * var(--u)); min-height: 0; padding: 0 calc(38 * var(--u)) 0 calc(37 * var(--u)); gap: 0; }
  #top-bar > .nav-link { display: none; }
  .menu-btn { display: block; width: calc(36 * var(--u)); height: calc(44 * var(--u)); }
  .menu-btn span { left: 0; right: 0; height: calc(2.4 * var(--u)); }
  .menu-btn span:nth-child(1) { top: calc(50% - 17 * var(--u)); }
  .menu-btn span:nth-child(2) { top: calc(50% - 1.2 * var(--u)); }
  .menu-btn span:nth-child(3) { top: calc(50% + 14.6 * var(--u)); }
  .logo { width: calc(434 * var(--u)); margin: 0 0 0 calc(45 * var(--u)); }

  /* ---- menu drawer ---- */
  .drawer { display: block; width: calc(278 * var(--u)); padding: calc(106 * var(--u)) 0 0 calc(32 * var(--u)); }
  .drawer-backdrop.open { display: block; }
  .drawer-close { position: absolute; left: calc(218 * var(--u)); top: calc(31 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); margin: 0; }
  .drawer-close svg { width: calc(31 * var(--u)); height: calc(31 * var(--u)); stroke-width: 3.6; }
  .drawer .nav-link { display: block; margin: 0; font-size: calc(55 * var(--u)); line-height: calc(75 * var(--u)); }

  /* ---- home ---- */
  .hero { display: flex; flex-direction: column; align-items: center; gap: calc(56 * var(--u)); padding: calc(25 * var(--u)) calc(64.5 * var(--u)) 0; }
  .collage { width: calc(446 * var(--u)); }
  .hero-text { font-size: calc(42.5 * var(--u)); line-height: calc(56.5 * var(--u)); }
  .contact { flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; text-align: center;
    padding: calc(67 * var(--u)) 0 calc(66 * var(--u)); font-size: calc(36.7 * var(--u)); line-height: calc(58.5 * var(--u)); }
  .contact h2 { font-size: calc(42.4 * var(--u)); line-height: calc(50 * var(--u)); margin-bottom: calc(6 * var(--u)); }
  .contact h2.draw::after { bottom: calc(-6 * var(--u)); }
  .foot { height: calc(72 * var(--u)); padding: 0; gap: calc(14 * var(--u)); font-size: calc(32 * var(--u)); }
  .foot .copy { width: calc(43 * var(--u)); height: calc(43 * var(--u)); font-size: calc(25 * var(--u)); border-width: calc(2 * var(--u)); }

  /* ---- products: category drop-down + heart line, one card per row ---- */
  .shop { grid-template-columns: 1fr; gap: calc(35 * var(--u)); padding: calc(16 * var(--u)) calc(31 * var(--u)) calc(60 * var(--u)) calc(25 * var(--u)); }
  .side { margin-top: 0; height: calc(50 * var(--u)); flex-direction: row; align-items: center; gap: calc(29 * var(--u)); }
  .cats { flex: none; }
  .cat-current { display: inline-flex; align-items: center; gap: calc(17 * var(--u)); font-size: calc(36.1 * var(--u)); line-height: calc(45 * var(--u)); }
  .cat-current .draw::after { bottom: calc(-6 * var(--u)); }
  .cat-current .chev { width: calc(18 * var(--u)); height: calc(11 * var(--u)); fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
  .cats.open .chev { transform: rotate(180deg); }
  .cat-list {
    display: none; position: absolute; left: calc(-10 * var(--u)); top: calc(100% + 18 * var(--u)); z-index: 30;
    min-width: calc(230 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)); gap: calc(4 * var(--u)); align-items: center;
    background: var(--bg); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.2); border-radius: calc(8 * var(--u));
  }
  .cats.open .cat-list { display: flex; }
  .cat { font-size: calc(35 * var(--u)); padding: 0 calc(20 * var(--u)); }
  /* the heart divider turns sideways */
  .divider { flex: 1; align-self: auto; display: block; width: auto; margin: 0; height: auto; }
  .divider .div-v { display: none; }
  .divider .div-h { display: flex; align-items: center; gap: calc(11 * var(--u)); }
  .divider .div-h i { flex: 1; height: calc(1.8 * var(--u)); min-height: 1px; background: var(--ink); }
  .divider .div-h img { width: calc(20 * var(--u)); height: auto; flex: none; }
  .product-grid { grid-template-columns: calc(380 * var(--u)); gap: calc(52 * var(--u)); padding-top: 0; }
  .cart-dock { display: none; }     /* the cart link in the menu opens the cart note */

  /* ---- pop-ups ---- */
  .modal-wrap { padding: calc(var(--header-h) + 20px) 0 calc(60 * var(--u)); }
  #cart-modal { padding-top: var(--header-h); padding-bottom: calc(72 * var(--u)); }
  #options-modal { padding-top: calc(var(--header-h) + 103 * var(--u)); padding-bottom: calc(122 * var(--u)); }
  #options-modal > .opt-wrap { margin: 0 auto; align-self: flex-start; }

  /* cart note: 562u wide */
  .note-stack { width: min(calc(562 * var(--u)), calc((100vh - var(--header-h) - 40px) * 0.9495)); }

  /* select options: notebook page on top, product card below */
  .opt-wrap { flex-direction: column-reverse; align-items: center; gap: calc(83 * var(--u)); width: calc(470 * var(--u)); }
  .opt-wrap .card.big { width: calc(460 * var(--u)); }
  .opt-sheet {
    position: relative; width: 100%; transform: translateX(calc(-5 * var(--u)));
    padding: calc(62 * var(--u)) calc(30 * var(--u)) calc(78 * var(--u)) calc(63 * var(--u));
    background: #e9e2da;
    clip-path: polygon(0 1.1%, 5% 0.2%, 12% 1.3%, 21% 0, 31% 1.2%, 42% 0.1%, 53% 1.3%, 64% 0, 75% 1.2%, 86% 0.1%, 100% 1%, 99.6% 50%, 100% 99%, 91% 99.9%, 80% 98.7%, 69% 99.9%, 57% 98.8%, 46% 100%, 34% 98.7%, 22% 99.9%, 11% 98.8%, 0 99.8%, 0.5% 50%);
  }
  .opt-sheet::before {         /* binder holes: 22u squares every 43.7u */
    content: ""; position: absolute; left: calc(14 * var(--u)); top: calc(31 * var(--u)); width: calc(22 * var(--u)); height: calc(655 * var(--u));
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 43.7' preserveAspectRatio='none'%3E%3Crect x='0' y='10.85' width='22' height='22' rx='6' fill='%23787774'/%3E%3C/svg%3E") 0 0 / 100% calc(43.7 * var(--u)) repeat-y;
  }
  .opt-sheet::after {          /* ruled lines every 38.9u */
    content: ""; position: absolute; left: calc(60 * var(--u)); right: 0; top: 0; bottom: 0; pointer-events: none;
    background: linear-gradient(to bottom, transparent calc(100% - 1.6 * var(--u)), #b3aca3 0) 0 calc(23.1 * var(--u)) / 100% calc(38.9 * var(--u)) repeat-y;
  }
  .sheet-text, .sheet-photo { position: relative; z-index: 1; }
  .sheet-text { top: calc(8 * var(--u)); }
  .sheet-title { font-size: calc(53 * var(--u)); line-height: calc(38.9 * var(--u)); }
  .group-label { font-size: calc(25.3 * var(--u)); line-height: calc(38.9 * var(--u)); margin-left: calc(20 * var(--u)); }
  .choice { font-size: calc(24.4 * var(--u)); line-height: calc(38.9 * var(--u)); margin-left: calc(45 * var(--u)); }
  .sheet-photo { width: calc(268 * var(--u)); margin: calc(29 * var(--u)) 0 0 calc(42 * var(--u)); padding: 0; }
  .sheet-photo .photo { width: 100%; aspect-ratio: 268 / 267; }
}

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