/* ==========================================================================
   COQUETTE — one page. Loaded on a/coquette.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A satin ribbon runs down the centre of the record; the record is stacked
   on it as tulle panels with a lace edge, each tied off at the top with a
   bow; a big bow sits above the script title; a closing bow ends the page;
   film grain lies over both halves. Blush and cream only — no contrast
   ramp anywhere. Type is the record's pairing: Pinyon Script for display,
   Bodoni Moda for text. The shell (rail, top bar, community drawer) is
   never restyled: every rule here is scoped to .cq-hero or .cq-rec.
   ========================================================================== */

@font-face {
  font-family: "PinyonX";
  src: url("fonts/pinyon-script.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "BodoniX";
  src: url("fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

.cq-page {
  --cq-cream: #FAF3EC;
  --cq-blush: #F3DFD8;
  --cq-blush-2: #EFD5CE;
  --cq-rose: #E8C4BC;      /* the deepest value on the page apart from ink */
  --cq-ink: #6B4A44;       /* warm, soft — never black */
  --cq-ink-2: #755049;
  --cq-script: "PinyonX", "Pinyon Script", cursive;
  --cq-serif: "BodoniX", "Bodoni Moda", "Didot", serif;
}
.cq-page main { background: var(--cq-cream); color: var(--cq-ink); }

/* ---- both roots: the page's type, its links, its focus ring ------------ */
.cq-hero, .cq-rec {
  position: relative; overflow: hidden;
  font: 400 18px/1.7 var(--cq-serif); color: var(--cq-ink);
  font-synthesis: weight style;
}
.cq-rec a { color: var(--cq-ink); text-decoration-color: var(--cq-rose); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cq-rec a:hover { background: var(--cq-blush); }
.cq-hero :focus-visible, .cq-rec :focus-visible { outline: 2px dotted var(--cq-ink); outline-offset: 4px; }

/* ---- film grain: over each root, under nothing of the shell ------------ */
.cq-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  opacity: 0.12; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .29  0 0 0 0 .27  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---- hero: the big bow, the script title, the defining line ------------ */
.cq-hero { text-align: center; padding: 40px 16px 20px; z-index: 1; }
.cq-bowbig { width: min(460px, 86vw); display: block; margin: 0 auto -30px; }
.cq-ttl { margin: 0; font-family: var(--cq-script); font-weight: 400; font-size: clamp(84px, 17vw, 190px); line-height: 1; color: var(--cq-ink); }
.cq-def { margin: clamp(14px, 2.6vw, 34px) auto 0; /* clears the script q descender */ max-width: 30ch; font-style: italic; font-size: 21px; }

/* ---- the record: the ribbon that runs down the page ---------------------- */
.cq-spine {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 28px; margin-left: -14px; z-index: 0; opacity: 0.9;
  background: linear-gradient(90deg, #dfb3aa, #f6dcd5 35%, #e8c4bc 60%, #d7a79e);
}
.cq-wrap { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 40px); }
.cq-rec p { margin: 0 0 14px; }

/* ---- tulle panel with lace edge, tied off at the top -------------------- */
.cq-tulle {
  position: relative; margin: 120px 0 0; padding: 70px clamp(18px, 5vw, 56px) 60px;
  background:
    radial-gradient(circle, rgba(232, 196, 188, 0.35) 1px, transparent 1.6px) 0 0 / 7px 7px,
    linear-gradient(rgba(250, 243, 236, 0.88), rgba(243, 223, 216, 0.88));
  box-shadow: 0 0 0 1px rgba(232, 196, 188, 0.8), 18px 18px 0 -2px rgba(243, 223, 216, 0.6), -14px 22px 0 -4px rgba(239, 213, 206, 0.5);
}
.cq-tulle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 18px;
  background: radial-gradient(circle at 12px 0, var(--cq-blush-2) 11px, transparent 12px) 0 0 / 24px 18px repeat-x;
  -webkit-mask: radial-gradient(circle at 12px 5px, transparent 3px, #000 3.5px) 0 0 / 24px 18px repeat-x;
  mask: radial-gradient(circle at 12px 5px, transparent 3px, #000 3.5px) 0 0 / 24px 18px repeat-x;
}
.cq-tie { position: absolute; left: 50%; top: -58px; width: 150px; margin-left: -75px; }
.cq-tulle h2 { margin: 0 0 18px; text-align: center; font-family: var(--cq-script); font-weight: 400; font-size: clamp(46px, 7vw, 76px); line-height: 1.05; }
.cq-note { text-align: center; font-style: italic; margin: -8px 0 20px !important; }
.cq-last { margin-bottom: 0 !important; }

/* ---- meta ---------------------------------------------------------------- */
.cq-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 26px; margin: 0; }
.cq-meta div { text-align: center; }
.cq-meta dt { font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; }
.cq-meta dd { margin: 2px 0 0; font-style: italic; font-size: 20px; }

/* ---- what carries the look --------------------------------------------- */
.cq-tw { overflow-x: auto; }
.cq-ct { width: 100%; border-collapse: collapse; }
.cq-ct th, .cq-ct td { padding: 10px 8px; border-bottom: 1px solid rgba(117, 80, 73, 0.25); text-align: left; vertical-align: top; }
.cq-ct th { width: 32%; font-weight: 500; }
.cq-ct small { display: block; font-style: italic; font-size: 15px; }
.cq-ct p { margin: 0; }
.cq-nl { font-style: italic; opacity: 0.85; }
.cq-tags { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cq-swatch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cq-swatch span { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(107, 74, 68, 0.35); }
.cq-asbuilt { margin: 6px 0 0 !important; font-style: italic; }
.cq-spec { margin: 0 0 6px !important; }

/* ---- recognise / argue: the sentence that carries the weight ----------- */
.cq-dx { font-size: clamp(22px, 2.8vw, 28px); line-height: 1.45; text-align: center; font-style: italic; margin: 24px auto !important; max-width: 34ch; }

/* ---- rules --------------------------------------------------------------- */
.cq-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.cq-rule { background: var(--cq-cream); padding: 22px 20px 20px; border-radius: 4px; box-shadow: 0 0 0 1px var(--cq-rose); position: relative; }
.cq-rule::before { content: ""; position: absolute; left: 18px; right: 18px; top: -8px; height: 16px; background: linear-gradient(90deg, #dfb3aa, #f6dcd5 50%, #dfb3aa); border-radius: 2px; }
.cq-rule h3 { margin: 0; font-family: var(--cq-script); font-weight: 400; font-size: 36px; line-height: 1.1; }
.cq-rule .cq-k { display: block; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.cq-rule p { margin: 0; }
.cq-rule small { display: block; font-style: italic; margin-top: 6px; }

/* ---- what stands behind it --------------------------------------------- */
.cq-firm { font-style: italic; text-align: center; }
.cq-rt { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 16px; margin-top: 20px; }
.cq-rt th, .cq-rt td { padding: 7px 8px; border-bottom: 1px solid rgba(117, 80, 73, 0.25); text-align: left; }
.cq-rt th { font-weight: 500; }
.cq-rt thead th { font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--cq-ink); }

/* ---- often confused with ------------------------------------------------ */
.cq-nb { text-align: center; margin: 0 0 24px !important; }
.cq-nb:last-child { margin-bottom: 0 !important; }
.cq-nb__a { font-family: var(--cq-script); font-weight: 400; font-size: 40px; line-height: 1.1; }
.cq-rec .cq-nb__a { text-decoration: none; }
.cq-nb__t { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }

/* ---- use it: the two (or three) cards, then the machine line ----------- */
.cq-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cq-rec .cq-use a { display: block; text-align: center; padding: 24px 20px; border-radius: 120px 120px 16px 16px; background: var(--cq-blush); text-decoration: none; box-shadow: 0 0 0 1px var(--cq-rose); }
.cq-rec .cq-use a b { display: block; font-family: var(--cq-script); font-weight: 400; font-size: 36px; line-height: 1.1; }
.cq-rec .cq-use a:hover { background: var(--cq-rose); }
.cq-mach { text-align: center; margin: 20px 0 0 !important; }

/* ---- the closing bow ----------------------------------------------------- */
.cq-end { text-align: center; padding: 90px 16px 60px; position: relative; z-index: 1; }
.cq-bowend { width: 220px; display: block; margin: 0 auto 10px; }

@media (max-width: 760px) {
  .cq-meta, .cq-rules, .cq-use { grid-template-columns: 1fr; }
  .cq-spine { width: 18px; margin-left: -9px; }
}

/* research-dimension table at phone width: no fixed floor, cells wrap (QA 2026-09-29) */
@media (max-width: 480px) {
  .cq-rt { min-width: 0; }
  .cq-rt th, .cq-rt td { padding-inline: 6px; overflow-wrap: break-word; }
  .cq-rt thead th { letter-spacing: 0.04em; }
  .cq-rt { font-size: 14px; }
  .cq-rt thead th { font-size: 12px; }
}