/* dreamqueue.com — one stylesheet. Tokens first; the contrast of every pair below is checked by `dq verify`. */
:root {
  --paper: #fbf9f4;
  --card: #ffffff;
  --ink: #1f2433;
  --navy: #1d2a52;
  --navy-deep: #121a36;
  --sky: #2f6fb3;
  --gold: #d9aa61;
  --gold-ink: #6a4a10;
  --rule: #e4ded2;
  --mute: #4c5160;
  --focus: #2f6fb3;
  --wrap: 1180px;
  --measure: 66ch;
  --radius: 6px;
}

@font-face { font-family: "Libre Baskerville"; src: url("/static/fonts/LibreBaskerville-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("/static/fonts/LibreBaskerville-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/static/fonts/Cinzel-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 19px; line-height: 1.6;
}
@media (max-width: 640px) { body { font-size: 18px; } }
img, video, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: "Libre Baskerville", Georgia, "Times New Roman", serif; font-weight: 400; color: var(--navy); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 40px; }
h2 { font-size: 30px; margin-top: 0; }
h3 { font-size: 24px; }
@media (max-width: 640px) { h1 { font-size: 32px; } h2 { font-size: 26px; } }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--sky); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

.eyebrow { font-family: "Cinzel", Georgia, serif; font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 .4em; }
.eyebrow-gold { color: var(--gold); }
.band-head .eyebrow, .page-head .eyebrow, .product-facts .eyebrow, .slide-copy .eyebrow { display: flex; align-items: center; gap: 10px; }
.band-head .eyebrow::before, .page-head .eyebrow::before, .product-facts .eyebrow::before, .slide-copy .eyebrow::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 6.6 4.6 10.4 12 12-7.4 1.6-11.2 5.4-12 12-.8-6.6-4.6-10.4-12-12C7.4 10.4 11.2 6.6 12 0z' fill='%23d9aa61'/%3E%3C/svg%3E") center / contain no-repeat; background-color: transparent; }
.band-head .eyebrow::after, .page-head .eyebrow::after { content: ""; width: 28px; height: 2px; background: var(--gold); border-radius: 1px; }
.lede { font-size: 1.1em; }
.fine { font-size: 16px; color: var(--mute); max-width: var(--measure); }
.badge { display: inline-block; font-family: "Cinzel", serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: var(--navy); color: var(--paper); padding: 3px 8px; border-radius: 3px; margin-right: 6px; }
.badge-quiet { background: var(--card); color: var(--navy); border: 1.5px solid var(--navy); }

/* ---- brand band: the night sky (static/img/brand/, made by dq brand from docs/assets/). The one dark element above the page. */
.brandband { position: relative; overflow: hidden; color: var(--paper); background: var(--navy-deep) url("/static/img/brand/sky-1800.jpg") center 40% / cover no-repeat; }
@media (min-resolution: 1.5dppx) and (min-width: 900px) { .brandband { background-image: url("/static/img/brand/sky-3360.jpg"); } }
.brandband::before, .brandband::after { content: ""; position: absolute; bottom: -26px; width: 300px; height: 190px; background: url("/static/img/brand/cloud-l.png") center bottom / contain no-repeat; opacity: .38; pointer-events: none; }
.brandband::before { left: -40px; animation: dq-drift-l 90s ease-in-out infinite; }
.brandband::after { right: -40px; background-image: url("/static/img/brand/cloud-r.png"); animation: dq-drift-r 90s ease-in-out infinite; }
@keyframes dq-drift-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@keyframes dq-drift-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }
.stars { position: absolute; inset: 0; pointer-events: none; opacity: .7; animation: dq-twinkle 14s ease-in-out infinite;
  background-image: radial-gradient(circle, #f4dca6 0 1px, transparent 1.6px), radial-gradient(circle, #ffffff 0 .8px, transparent 1.4px), radial-gradient(circle, #f4dca6 0 1.4px, transparent 2.2px);
  background-size: 240px 160px, 180px 140px, 420px 300px; background-position: 30px 20px, 90px 70px, 200px 110px; }
@keyframes dq-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
.brandband-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 112px; padding: 14px 0; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.wordmark-full { width: 220px; }
.wordmark-mark { width: 64px; display: none; }
.band-tag { font-family: "Cinzel", Georgia, serif; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0; text-align: right; text-shadow: 0 1px 2px var(--navy-deep), 0 0 12px rgba(18, 26, 54, .9); }
@media (max-width: 640px) {
  .brandband-inner { min-height: 76px; padding: 10px 0; }
  .brandband::before, .brandband::after { display: none; }
  .wordmark-full { display: none; } .wordmark-mark { display: block; }
  .band-tag { display: none; }
}

/* ---- header nav: sticky; the crescent slides in once the band has scrolled away (body.is-scrolled, set by the script) */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--card); border-bottom: 1px solid var(--rule); transition: box-shadow 180ms ease; }
.is-scrolled .site-header { box-shadow: 0 1px 0 var(--rule), 0 6px 18px rgba(18, 26, 54, .08); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 6px 0; }
.nav-mark { flex: none; width: 0; opacity: 0; overflow: hidden; transition: width 220ms ease, opacity 220ms ease; }
.nav-mark img { width: 40px; max-width: none; }
.is-scrolled .nav-mark { width: 40px; opacity: 1; margin-right: 6px; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex: 1 1 auto; gap: 0 22px; transition: gap 180ms ease; }
.is-scrolled .nav-list { gap: 0 18px; }
.nav-item { position: relative; }
.nav-list > li > a { position: relative; display: inline-block; padding: 12px 2px; text-decoration: none; font-weight: 600; font-size: 18px; color: var(--ink); transition: color 160ms ease; white-space: nowrap; }
.nav-list > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; background: var(--gold); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform 220ms ease; }
.nav-list > li > a:hover, .nav-list > li > a.is-hover, .nav-list > li > a:focus-visible, .has-menu:hover > a, .has-menu.is-hover > a { color: var(--navy); }
.nav-list > li > a:hover::after, .nav-list > li > a.is-hover::after, .has-menu:hover > a::after, .has-menu.is-hover > a::after, .has-menu:focus-within > a::after { transform: scaleX(1); }
.nav-list > li > a[aria-current="page"] { color: var(--navy); }
.nav-list > li > a[aria-current="page"]::after { transform: scaleX(1); }
/* the panels: pointer and keyboard only; a tap on a phone is the link itself */
.menu-panel { position: absolute; left: -16px; top: 100%; z-index: 40; min-width: 260px; padding: 18px 20px 16px; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 14px 34px rgba(18, 26, 54, .14);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms; }
.menu-wide { width: 720px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
@media (hover: hover) { .has-menu:hover .menu-panel, .has-menu.is-hover .menu-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; } }
.has-menu:focus-within .menu-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.menu-featured { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.menu-featured a { display: block; text-decoration: none; color: var(--navy); font-family: "Libre Baskerville", Georgia, serif; font-size: 15px; line-height: 1.3; }
.menu-featured img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 1px solid var(--rule); margin-bottom: 6px; transition: transform 220ms ease, border-color 160ms ease; }
.menu-featured a:hover img { border-color: var(--navy); transform: translateY(-2px); }
.menu-featured a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.menu-lists .eyebrow { font-size: 12px; margin-bottom: 6px; }
.menu-links { list-style: none; margin: 0 0 10px; padding: 0; }
.menu-links a { display: block; padding: 6px 0; text-decoration: none; font-size: 17px; color: var(--ink); }
.menu-links a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.menu-links small { color: var(--mute); font-size: 14px; }
.menu-more { display: inline-block; font-weight: 600; font-size: 16px; text-decoration: none; color: var(--navy); border-bottom: 2px solid var(--gold); padding-bottom: 1px; }
.menu-more:hover { color: var(--sky); }
/* the phone menu: a <details>, no script needed */
.menu { display: none; position: relative; }
.menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 4px; font-weight: 600; font-size: 18px; color: var(--navy); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::before { content: none; }
.burger { width: 22px; height: 2px; background: var(--navy); position: relative; box-shadow: 0 -7px 0 var(--navy), 0 7px 0 var(--navy); transition: box-shadow 160ms ease, transform 160ms ease; }
.menu[open] .burger { transform: rotate(45deg); box-shadow: 0 0 0 var(--navy), 0 0 0 var(--navy); }
.menu[open] .burger::after { content: ""; position: absolute; inset: 0; background: var(--navy); transform: rotate(90deg); }
.menu-col { list-style: none; margin: 0; padding: 8px 0 14px; display: grid; gap: 2px; }
.menu-col > li > a { display: block; padding: 11px 4px; font-size: 19px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rule); color: var(--ink); }
.menu-col > li > a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); border-bottom-width: 3px; }
.menu-sub { list-style: none; margin: 0; padding: 4px 0 6px 18px; }
.menu-sub a { display: block; padding: 7px 0; font-size: 17px; text-decoration: none; color: var(--mute); }
.menu-sub a:hover { color: var(--navy); }
@media (max-width: 760px) {
  .nav { flex-wrap: wrap; }
  .nav-list, .nav-mark { display: none; }
  .menu { display: block; order: 1; }
  .menu[open] { flex: 1 1 100%; order: 3; }
  .nav > .btn { order: 2; margin-left: auto; }
}

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 26px; background: var(--navy); color: var(--paper); font-weight: 600; font-size: 19px; border-radius: var(--radius); text-decoration: none; border: 2px solid var(--navy); transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.btn:hover, .btn.is-hover { background: var(--sky); border-color: var(--sky); color: var(--card); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(18, 26, 54, .14); }
.btn-big { font-size: 21px; min-height: 58px; padding: 12px 34px; }
.btn-small { min-height: 44px; font-size: 17px; padding: 6px 18px; }
.btn-outline { background: transparent; color: var(--navy); }
.btn-outline:hover, .btn-outline.is-hover { background: var(--navy); border-color: var(--navy); color: var(--paper); }
/* the gold button: the one gold thing below the band. Text is navy-deep (8:1). The sheen is a highlight that sweeps across on hover. */
.btn-gold { color: var(--navy-deep); border-color: var(--gold); background: linear-gradient(110deg, var(--gold) 0 40%, #f0d9a6 50%, var(--gold) 60% 100%) var(--gold); background-size: 260% 100%; background-position: 100% 0; transition: background-position 600ms ease, transform 160ms ease, box-shadow 160ms ease; }
.btn-gold:hover, .btn-gold.is-hover { color: var(--navy-deep); border-color: var(--gold); background-position: 0 0; box-shadow: 0 4px 14px rgba(217, 170, 97, .45); transform: translateY(-1px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 10px; max-width: none; }
@media (max-width: 640px) { .actions .btn { width: 100%; } }

/* ---- home: hero slider with a left overlay panel (CSS keyframes, no JavaScript) */
.hero-slider { position: relative; height: 560px; margin: 18px 0 8px; border-radius: var(--radius); overflow: hidden; background: var(--navy-deep); }
.hero-panel { position: absolute; inset: 0 auto 0 0; width: 36%; background: rgba(251, 249, 244, 0.94); z-index: 2; border-right: 1px solid var(--rule); }   /* inside each slide, between the image and the copy */
.hero-slider .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.hero-slider .slide:first-of-type { opacity: 1; visibility: visible; }
.slide-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.slide-copy { position: absolute; z-index: 3; left: 0; top: 50%; transform: translateY(-50%); width: 36%; padding: 0 40px; }
.slide-copy h1, .slide-copy .h1 { font-family: "Libre Baskerville", Georgia, serif; font-size: 38px; line-height: 1.15; color: var(--navy); margin: 0 0 .4em; max-width: none; }
.slide-copy .lede { font-size: 18px; margin-bottom: .6em; }
.slide-copy .actions { margin: 14px 0 0; }
.slide-copy .btn { font-size: 17px; min-height: 48px; padding: 8px 18px; }
.hero-dots { position: absolute; z-index: 4; left: 40px; bottom: 22px; margin: 0; display: flex; gap: 8px; }
.hero-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--gold-ink); background: transparent; }
.hero-slider:hover .slide, .hero-slider:focus-within .slide, .hero-slider:hover .slide-copy > *, .hero-slider:focus-within .slide-copy > *, .hero-slider:hover .hero-dots i, .hero-slider:focus-within .hero-dots i { animation-play-state: paused !important; }
/* Reduce Motion: the slides still change, as clean cuts (dq-cut, written per page), with no fade and no rising copy */
@media (prefers-reduced-motion: reduce) { .slide-copy > *, .hero-dots i { animation: none !important; } .hero-dots i:first-child { background: var(--gold); } }
@media (max-width: 960px) { .hero-panel, .slide-copy { width: 46%; } .slide-copy { padding: 0 24px; } .slide-copy h1, .slide-copy .h1 { font-size: 30px; } }
@media (max-width: 640px) {
  .hero-slider { height: auto; display: grid; }                       /* phones: the slides share one grid cell and still cycle */
  .hero-slider .slide { position: relative; grid-area: 1 / 1; }
  .hero-panel { display: none; }
  .hero-dots { left: 16px; bottom: auto; top: calc(72vw - 26px); }
  .hero-slider .slide .slide-copy > * { animation: none !important; }   /* the copy is just there on phones: no entrance */
  .slide-art { position: static; height: 72vw; }
  .slide-copy { position: static; transform: none; width: auto; padding: 18px 16px 22px; background: var(--paper); height: 100%; }
  .slide-copy .actions .btn { width: 100%; }
}

/* category row */
.cats { padding: 28px 0 8px; }
.cat-row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 860px) { .cat-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .cat-row { grid-template-columns: repeat(2, 1fr); } }
.cat { display: block; text-align: center; text-decoration: none; color: var(--ink); }
.cat img, .cat-blank { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1px solid var(--rule); background: var(--card); display: block; margin-bottom: 10px; }
.cat img, .cat-blank { transition: box-shadow 220ms ease, border-color 160ms ease; }
.cat:hover img, .cat.is-hover img { border-color: var(--navy); box-shadow: 0 0 0 4px var(--gold); }
.cat:hover strong, .cat.is-hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.cat strong { display: block; font-family: "Libre Baskerville", Georgia, serif; font-weight: 400; color: var(--navy); font-size: 19px; }
.cat small { display: block; font-size: 16px; color: var(--mute); }

/* editorial tiles */
.editorial { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; margin: 32px 0; }
@media (max-width: 860px) { .editorial { grid-template-columns: 1fr; } }
.tile-big { position: relative; display: block; min-height: 380px; border-radius: var(--radius); overflow: hidden; text-decoration: none; background: var(--navy); }
.tile-big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.tile-big:hover img, .tile-big.is-hover img { transform: scale(1.04); }
.tile-copy em { transition: transform 220ms ease; display: inline-block; }
.tile-big:hover .tile-copy em, .tile-big.is-hover .tile-copy em { transform: translateX(6px); }
.tile-copy { position: absolute; inset: auto 0 0 0; padding: 120px 28px 26px; background: linear-gradient(180deg, rgba(18, 26, 54, 0) 0%, rgba(18, 26, 54, 0.88) 60%); color: var(--paper); display: grid; gap: 4px; }
.tile-copy strong { font-family: "Libre Baskerville", Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.15; }
.tile-copy span:not(.eyebrow) { font-size: 17px; max-width: 46ch; }
.tile-copy em { font-style: normal; font-weight: 600; margin-top: 6px; text-decoration: underline; text-underline-offset: 3px; }

/* newest band + promises */
.band-new { background: #f1ede3; border-radius: var(--radius); padding: 28px 28px 8px; margin: 8px 0 28px; }
.band-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.band-head h2 { margin: 0; }
.more { font-weight: 600; }
.promises { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (max-width: 760px) { .promises { grid-template-columns: 1fr; } }
.promises li { padding: 22px 24px; border-right: 1px solid var(--rule); }
.promises li:last-child { border-right: 0; }
.promises strong { display: block; font-family: "Libre Baskerville", Georgia, serif; font-weight: 400; color: var(--navy); font-size: 21px; margin-bottom: 4px; }
.promises span { color: var(--mute); font-size: 17px; }
.intro { padding: 10px 0 0; }
.etsy-strip { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px 28px; margin: 24px 0 8px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.etsy-strip p { margin: 0; }
.etsy-strip .stat { font-family: "Libre Baskerville", Georgia, serif; font-size: 28px; color: var(--navy); }

/* ---- cards */
.cards { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.card a, .card > span { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); height: 100%; transition: transform 220ms ease, box-shadow 220ms ease, border-color 160ms ease; }
.card a:hover, .card a.is-hover { border-color: var(--navy); transform: translateY(-3px); box-shadow: 0 8px 22px rgba(18, 26, 54, .10); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 300ms ease; }
.card a:hover img, .card a.is-hover img { transform: scale(1.03); }
.card-body { display: block; padding: 12px 14px 16px; }
.card-name { display: block; font-family: "Libre Baskerville", Georgia, serif; font-weight: 400; color: var(--navy); font-size: 20px; margin: 4px 0 2px; }
.card-line { display: block; font-size: 16px; color: var(--mute); }

/* ---- browse-by facet links */
.browse { margin: 0 0 22px; }
.browse ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.browse a { display: inline-block; padding: 9px 14px; min-height: 44px; background: var(--card); border: 1.5px solid var(--rule); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 17px; }
.browse a { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.browse a:hover { border-color: var(--navy); background: var(--navy); color: var(--paper); }
.browse a:hover small { color: var(--rule); }
.browse small { font-weight: 400; color: var(--mute); }

/* ---- hub / page */
.crumbs { font-size: 16px; color: var(--mute); margin: 18px 0 8px; }
.crumbs a { color: var(--mute); }
.page-head { margin: 8px 0 24px; }
.page { padding: 8px 0 40px; }
.page h2 { margin-top: 1.4em; }
.page ul, .page ol { max-width: var(--measure); padding-left: 1.2em; }
.page li { margin-bottom: .4em; }

/* ---- product */
/* media stacked on the left, the facts pinned on the right until the media column ends (then they scroll away) */
.product-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; padding: 10px 0 24px; }
.product-media { display: grid; gap: 18px; }
.media img { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); width: 100%; }
.actions-pair .btn { flex: 1 1 auto; }
.size-list { list-style: none; padding: 0; margin: 0 0 8px; }
.size-list li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
.size-list b { color: var(--navy); min-width: 5.5em; }
.size-list span { color: var(--mute); }
.product-facts summary { position: relative; padding-right: 28px; }
.product-facts summary::before { content: none; }
.product-facts summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: translateY(-70%) rotate(45deg); transition: transform 200ms ease; }
.product-facts details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.product-facts { position: sticky; top: 84px; align-self: start; border-top: 3px solid transparent; padding-top: 2px; transition: box-shadow 220ms ease, border-color 220ms ease; }
.facts-sentinel { position: absolute; top: -85px; left: 0; width: 1px; height: 1px; }
.is-stuck .product-facts { border-top-color: var(--gold); box-shadow: 0 -1px 0 var(--rule); }
.product-facts details { margin: 6px 0 0; border-top: 1px solid var(--rule); }
.product-facts summary { padding: 12px 0; }
.product-facts .fabric table { font-size: 16px; }
@media (max-width: 860px) {
  .product-top { grid-template-columns: 1fr; gap: 20px; }
  .product-facts { position: static; border-top: 0; }
  .product-media { gap: 12px; }
  .product-media .media:nth-child(n+4) { display: none; }   /* phones: the hero and two slides; the rest live in the sections below */
}
.facts { list-style: none; padding: 0; margin: 14px 0 6px; border-top: 1px solid var(--rule); }
.facts li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 18px; }
.facts b { color: var(--navy); }
.facts-row { display: flex; flex-wrap: wrap; gap: 0 28px; border: 0; }
.facts-row li { border: 0; }
.facts-row b { display: block; font-family: "Cinzel", serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.howto { font-size: 16px; color: var(--mute); }
.notice { background: var(--card); border-left: 4px solid var(--gold); padding: 12px 16px; }
.band { padding: 32px 0 8px; border-top: 1px solid var(--rule); margin-top: 24px; }
.swatches, .diagrams { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.swatches img { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
figure { margin: 0; }
figcaption { font-size: 16px; color: var(--mute); padding: 8px 2px 0; }
.diagrams { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.diagrams figure { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px; }
.diagram { width: 100%; height: auto; }
.build { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 16px; }
.build-video video { width: 100%; height: auto; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.build-layout img { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.buy-again { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px 28px 16px; margin-top: 36px; }
details { margin: 10px 0 14px; max-width: 100%; }
summary { cursor: pointer; font-weight: 600; font-size: 19px; color: var(--navy); padding: 10px 0; list-style: none; }
summary::before { content: "+"; display: inline-block; width: 1.2em; font-weight: 600; }
details[open] summary::before { content: "–"; }
details[open] > :not(summary) { animation: dq-open 180ms ease both; }
@keyframes dq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 17px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); min-height: 44px; vertical-align: middle; }
thead th { font-family: "Cinzel", serif; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
tbody th { font-weight: 600; color: var(--navy); white-space: nowrap; }
tbody tr:nth-child(even) { background: var(--paper); }
.swatch { display: inline-block; width: 18px; height: 18px; border-radius: 3px; border: 1px solid var(--rule); vertical-align: -3px; margin-right: 8px; }
.inside ul { max-width: var(--measure); }
.bundle { display: flex; gap: 20px; align-items: center; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; text-decoration: none; max-width: 720px; }
.bundle img { width: 120px; height: 120px; object-fit: cover; border-radius: 4px; flex: none; }
.bundle strong { font-family: "Libre Baskerville", Georgia, serif; font-weight: 400; font-size: 22px; }

.plan-row { display: grid; grid-template-columns: minmax(180px, 320px) 1fr; gap: 28px; align-items: center; }
@media (max-width: 640px) { .plan-row { grid-template-columns: 1fr; } }
.plan-art img { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px; }

/* ---- guides */
.guide-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 16px; }
.guide-list-row { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.guide-list a { display: grid; gap: 4px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; color: var(--ink); height: 100%; }
.guide-list a { transition: transform 220ms ease, box-shadow 220ms ease, border-color 160ms ease; }
.guide-list a:hover { border-color: var(--navy); transform: translateY(-3px); box-shadow: 0 8px 22px rgba(18, 26, 54, .10); }
.guide-list strong { font-family: "Libre Baskerville", Georgia, serif; font-weight: 400; color: var(--navy); font-size: 22px; }
.guide-list span { color: var(--mute); font-size: 17px; }
.guide-list small { color: var(--mute); font-size: 15px; }
.guide { padding-bottom: 24px; }
.guide .page-head { margin-bottom: 18px; }
.guide ol, .guide ul { max-width: var(--measure); padding-left: 1.2em; }
.guide li { margin-bottom: .5em; }
.guide h2 { margin-top: 1.3em; }
.guide-table table { font-size: 17px; background: var(--card); }
.guide-table th, .guide-table td { padding: 11px 12px; }
.guides-strip { margin: 8px 0 20px; }

/* ---- scroll reveal (script adds .js to <html> and .is-in as sections enter) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 500ms ease; }
  .js .reveal.is-in { opacity: 1; transform: none; }
  html { scroll-behavior: smooth; }
}

/* ---- footer: the sky again, a cloud, the crescent */
.site-footer { position: relative; overflow: hidden; color: var(--paper); margin-top: 56px; padding: 44px 0 24px; font-size: 17px; background: var(--navy-deep) url("/static/img/brand/sky-1800.jpg") center 30% / cover no-repeat; }
.site-footer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 26, 54, .55) 0%, rgba(18, 26, 54, .78) 100%); }
.site-footer::after { content: ""; position: absolute; left: -60px; bottom: -40px; width: 420px; height: 266px; background: url("/static/img/brand/cloud-l.png") center / contain no-repeat; opacity: .22; pointer-events: none; }
.site-footer > * { position: relative; z-index: 1; }
.site-footer a { color: var(--paper); transition: color 160ms ease; }
.site-footer a:hover { color: var(--gold); }
.footer-mark { display: flex; align-items: center; gap: 12px; font-family: "Libre Baskerville", Georgia, serif; font-size: 28px; color: var(--gold); }
.footer-mark img { width: 72px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.footer-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.to-top { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold); }
.footer-fine { margin: 0; font-size: 15px; color: #c9c6bd; }

/* ---- 404 */
.lost { position: relative; height: 180px; max-width: none; margin: 10px 0 20px; }
.lost-mark { position: absolute; left: 150px; top: 10px; width: 120px; z-index: 1; }
.lost-cloud { position: absolute; left: 0; top: 40px; width: 280px; opacity: .9; }

/* ---- old footer rules (kept for the grid) */
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
@media (max-width: 860px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-mark b { font-weight: 400; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin: 6px 0; }

@media (prefers-reduced-motion: reduce) {
  video[autoplay] { display: none; }
  .brandband::before, .brandband::after, .stars, .slide-copy > *, .hero-dots i, details[open] > :not(summary) { animation: none !important; }
  .stars { opacity: .7; }
  *, *::before, *::after { transition-duration: 0s !important; }
}
@media print { .brandband, .site-header, .site-footer, .actions, .thumbs, .hero-dots { display: none; } }

/* ---- product page content (docs/plans/content-spec.md): visible tables, steps, questions, page thumbnails */
.site-h1 { font-size: 22px; font-weight: 400; color: var(--mute); margin: 14px 0 10px; letter-spacing: .01em; }
.promises-band h2 { margin: 28px 0 -14px; font-size: 24px; }
.about-text { max-width: 70ch; font-size: 19px; }
.fabric-table th[scope="row"], .sizes-table th[scope="row"], .supplies-table th[scope="row"], .sheets-table th[scope="row"] { text-align: left; white-space: nowrap; }
.sizes-table td, .fabric-table td { white-space: nowrap; }
.supplies-table td { min-width: 150px; font-size: 16px; }
.supplies-table th small { display: block; font-weight: 400; color: var(--mute); font-size: 14px; white-space: normal; max-width: 220px; }
.sheets-table td:first-child { color: var(--mute); width: 3em; }
.fq, .notes, .pieces, .inside-list { padding-left: 1.2em; margin: 14px 0 6px; }
.fq li, .notes li, .pieces li, .inside-list li { margin: 4px 0; font-size: 17px; }
.pieces b { color: var(--navy); margin-right: 6px; }
.pills-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pills-list li { border: 1px solid var(--rule); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 16px; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 20px; }
.steps li { counter-increment: step; display: flex; gap: 12px; align-items: baseline; font-size: 17px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(step); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: "Cinzel", serif; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.thumbs { list-style: none; padding: 0; margin: 16px 0 0; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
.thumbs li { flex: none; width: 96px; position: relative; scroll-snap-align: start; }
.thumbs img { width: 96px; height: auto; border: 1px solid var(--rule); background: var(--card); border-radius: 4px; }
.thumbs span { position: absolute; right: 4px; bottom: 6px; font-size: 11px; background: var(--navy-deep); color: var(--gold); border-radius: 3px; padding: 1px 5px; }
.swatches-small { margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.swatches-small figcaption { font-size: 14px; }
.qa-list { margin: 0; max-width: 78ch; }
.qa-list dt { font-family: "Libre Baskerville", Georgia, serif; color: var(--navy); font-size: 20px; margin-top: 18px; }
.qa-list dd { margin: 6px 0 0; font-size: 18px; }
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  .supplies-table td { min-width: 120px; }
}

/* ---- header nav on the band's navy (owner 2026-10-12: the white bar drowned the gold crescent once scrolled) */
:root { --nav-bg: #1d2a52; --nav-ink: #f4efe4; --nav-mute: #c3cbe0; --nav-rule: rgba(244, 239, 228, .16); }
.site-header { background: var(--nav-bg); border-bottom: 1px solid rgba(217, 170, 97, .45); }
.is-scrolled .site-header { box-shadow: 0 6px 18px rgba(18, 26, 54, .35); }
.nav-list > li > a { color: var(--nav-ink); }
.nav-list > li > a:hover, .nav-list > li > a.is-hover, .nav-list > li > a:focus-visible, .has-menu:hover > a, .has-menu.is-hover > a,
.nav-list > li > a[aria-current="page"] { color: var(--gold); }
.site-header :focus-visible { outline-color: var(--gold); }
.menu > summary { color: var(--nav-ink); }
.burger { background: var(--nav-ink); box-shadow: 0 -7px 0 var(--nav-ink), 0 7px 0 var(--nav-ink); }
.menu[open] .burger { box-shadow: 0 0 0 var(--nav-ink), 0 0 0 var(--nav-ink); }
.menu[open] .burger::after { background: var(--nav-ink); }
.menu-col > li > a { color: var(--nav-ink); border-bottom-color: var(--nav-rule); }
.menu-col > li > a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.menu-sub a { color: var(--nav-mute); }
.menu-sub a:hover, .menu-col > li > a:hover { color: var(--gold); }

/* ---- listing videos (owner 2026-10-12): second item in a product's gallery; on cards, hover swaps the image for the video */
.media-video video { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--navy-deep); border: 1px solid var(--rule); border-radius: var(--radius); }
.card-art { position: relative; display: block; overflow: hidden; }
.card-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 200ms ease; pointer-events: none; }
.card-art.is-playing video { opacity: 1; }

/* ---- home v2 (owner markup on iPad, 2026-10-13): nav fits tablets, slimmer hero, sketch icons, Etsy-style shelves, blue band */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav > .btn { white-space: nowrap; flex: none; }
/* six links + Shop on Etsy need ~1070 px: below that the Menu takes over (iPad portrait made the page 1101 px wide) */
@media (max-width: 1100px) {
  .nav { flex-wrap: wrap; }
  .nav-list, .nav-mark { display: none; }
  .menu { display: block; order: 1; }
  .menu[open] { flex: 1 1 100%; order: 3; }
  .nav > .btn { order: 2; margin-left: auto; }
}
/* the right-hand drop-downs open leftwards, so a hidden panel never widens the page */
.nav-item:nth-last-child(-n+3) .menu-panel { left: auto; right: -16px; }

/* hero: shorter, the picture sits on the right at its own proportions instead of filling the band */
.hero-slider { height: 420px; background: #f1ede3; border-radius: 12px; }
.hero-panel { width: 46%; background: #f1ede3; border-right: 0; }
.slide-art { left: auto; right: 0; width: 54%; object-fit: cover; object-position: center; }
.slide-copy { width: 46%; }
@media (max-width: 960px) { .hero-slider { height: 390px; } .hero-panel, .slide-copy { width: 52%; } .slide-art { width: 48%; } }
@media (max-width: 640px) { .hero-slider { height: auto; background: var(--paper); } .hero-panel { display: none; } .slide-copy { width: auto; } .slide-art { position: static; width: 100%; height: 72vw; object-fit: cover; } }

/* "What are you making?": centred, blue sketch icons (lib/dq/icons.py) */
.cats h2 { text-align: center; }
.cat-icon { width: 100%; height: auto; aspect-ratio: 1; display: block; margin-bottom: 10px; border-radius: 50%; transition: transform 220ms ease, box-shadow 220ms ease; }
.cat:hover .cat-icon, .cat:focus-visible .cat-icon { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(47, 111, 179, .18); }
.cat-row { max-width: 900px; margin-inline: auto; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cat-row .cat-icon { max-width: 150px; margin-inline: auto; }
.cat strong { font-size: 17px; }
@media (max-width: 640px) { .cat-row { grid-template-columns: repeat(3, 1fr); } }

/* cards, Etsy-style: no box, a rounded picture, name in two lines at most, the price on its own line */
.card a { background: none; border: 0; border-radius: 0; overflow: visible; }
.card a:hover, .card a.is-hover { transform: none; box-shadow: none; }
.card-art { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #f1ede3; }
.card a:hover .card-art, .card a.is-hover .card-art { box-shadow: 0 8px 22px rgba(18, 26, 54, .14); }
.card-body { padding: 10px 2px 4px; }
.card-name { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.35; color: var(--ink); margin: 0 0 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card a:hover .card-name { text-decoration: underline; text-underline-offset: 3px; }
.card-line { font-size: 14px; line-height: 1.4; }
.card-price { display: block; font-weight: 600; font-size: 17px; color: var(--ink); margin-top: 2px; }
.badge-on-art { position: absolute; left: 10px; top: 10px; margin: 0; box-shadow: 0 1px 4px rgba(18, 26, 54, .2); }
.cards { gap: 28px 20px; }

/* shelves: one horizontal row per category, swipe or scroll; the next card peeks in */
.shelf { margin: 40px 0 8px; }
.shelf .band-head { margin-bottom: 14px; }
.shelf h2 { font-size: 26px; }
.cards-row { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 4 * 20px) / 4.4); gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 14px; margin: 0;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.cards-row > .card { scroll-snap-align: start; min-width: 0; }
@media (max-width: 1100px) { .cards-row { grid-auto-columns: calc((100% - 3 * 18px) / 3.4); gap: 18px; } }
@media (max-width: 640px) { .cards-row { grid-auto-columns: calc((100% - 14px) / 2.25); gap: 14px; } }

.guides-strip .guide-list-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 700px) { .guides-strip .guide-list-row { grid-template-columns: 1fr; } }

/* ---- step-by-step video (watch page + product section, 2026-10-14) */
.watch { padding-block: 18px 32px; }
.watch h1 { margin-bottom: .3em; }
.watch-video { margin: 18px 0 10px; }
.watch-video video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #121a36; border-radius: 12px; display: block; }
.watch-video figcaption { font-size: 16px; color: var(--mute); margin-top: 8px; max-width: var(--measure); }
.chapters { list-style: none; counter-reset: none; padding: 0; margin: 12px 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 22px; }
.chapters a { display: flex; gap: 12px; align-items: baseline; padding: 8px 2px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); }
.chapters a:hover { color: var(--navy); }
.chapters a:hover .ch-time { background: var(--sky); }
.ch-time { flex: none; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; background: var(--navy); border-radius: 4px; padding: 1px 7px; }
.chapters-compact a { padding: 5px 2px; font-size: 16px; }
.transcript { margin: 8px 0 22px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 6px 0; }
.transcript > summary { cursor: pointer; font-weight: 600; padding: 8px 0; color: var(--navy); }
.transcript h3 { font-size: 19px; margin: 16px 0 4px; }
.transcript p { margin: 0 0 6px; }