/* Chalk + paper look, LIVE (founder, 10 Nov 2026: "Let's do chalk plus paper."). Built from research/less-blue-v1/C.css;
   loaded after studio.css. Cobalt lives in the photos, tiles, header, footer and buttons; the page and panels are warm paper. */
/* C · Chalk + paper (smallest change)
   Keeps the light chalk base, warmer, with a paper / linen grain; every section the same rhythm (paper band, cobalt plinths),
   Crosses included. Cobalt headings and buttons stay as the brand accent; header and footer stay cobalt.
   Texture: ChatGPT image_gen (Codex), tex/paper.webp, injected as a data: URI by shoot.py. */
:root {
  --s-bg: #eeeae1; --s-tex: url("/img/studio/paper.webp"); --s-floor-mid: #8fa8cc;
  --s-panel: #f1ede5; --s-pill: rgba(255, 255, 255, 0.7);
  --s-text: #0f1320; --s-head: #034092; --s-card-name: #034092; --s-muted: #5a5f6b;
  --s-line: rgba(3, 64, 146, 0.12); --s-line-strong: rgba(3, 64, 146, 0.32);
  --s-btn: #034092; --s-btn-text: #ffffff; --s-btn-hover: #0350ab;
  --s-top: rgba(3, 64, 146, 0.92); --s-top-text: #ffffff; --s-top-dim: rgba(255, 255, 255, 0.74); --s-logo: none;
  --s-foot: #012a78; --s-plinth-shadow: 0 18px 30px -22px rgba(1, 30, 90, 0.7);
}

/* ---- shared body: cobalt lives only in the photos, the product plinths and the hero ---- */
body, main#main { background: var(--s-bg) var(--s-tex) 0 0 / 512px 512px repeat; }
html body .catalog { color: var(--s-text); }
html body .floor { background: linear-gradient(#0360cc, var(--s-floor-mid) 45%, var(--s-bg)); }
html body .hero::after { background: linear-gradient(transparent, var(--s-bg)); }

/* header bar once you scroll */
html body .top[data-state="solid"] { background: var(--s-top); box-shadow: 0 1px 0 var(--s-line), 0 10px 30px -18px rgba(0, 0, 0, 0.35); color: var(--s-top-text); }
html body .top[data-state="solid"] .tabs a { color: var(--s-top-dim); }
html body .top[data-state="solid"] .tabs a[aria-current], html body .top[data-state="solid"] .tabs a:hover { color: var(--s-top-text); }
html body .top[data-state="solid"] .tabs-ink { background: var(--s-top-text); }
html body .top[data-state="solid"] .top-logo img { filter: var(--s-logo); }
html body .top[data-state="solid"] .menu-btn, html body .top[data-state="solid"] .bag-btn { color: var(--s-top-text); }
html body .top[data-state="solid"] .bag-n { background: var(--s-line); }
html body .bag-float { background: var(--s-btn); color: var(--s-btn-text); }
html body .bag-float-n { background: var(--s-bg); color: var(--s-text); }

/* every collection: one surface, one rhythm (Crosses included) */
#shop .col, #shop .col.has-strip { background: none; box-shadow: none; color: var(--s-text); margin-top: 0; }
#shop .col + .col, #shop .museum + .col { border-top: 1px solid var(--s-line); }
#shop .col .col-h h2 { color: var(--s-head); }
#shop .col .col-rule { color: var(--s-head); opacity: 0.3; }
#shop .col .col-h em { color: var(--s-muted); }
#shop .col .col-all { color: var(--s-text); border-color: var(--s-line-strong); }
#shop .col[data-col="crosses"] { padding-top: clamp(20px, 3vw, 40px); }
#shop .col.has-strip .strip { background: var(--wall-deep); }

/* the cobalt plinth under every piece (was only Pendants / Rings / Chains) */
#shop .col .card { background: none; padding: 0 0 12px; }
#shop .col .card::after, #shop .col .card::before { display: none; }
#shop .col .card-stage {
  margin: 0 0 12px; border-radius: 3px; overflow: hidden;
  background:
    radial-gradient(70% 45% at 50% 64%, rgba(150, 195, 255, 0.28), transparent 72%),
    radial-gradient(90% 60% at 30% 0%, rgba(90, 150, 240, 0.35), transparent 70%),
    linear-gradient(#0344a0, #034092 55%, #023a86);
  box-shadow: var(--s-plinth-shadow);
}
#shop .col .card-num { position: absolute; z-index: 1; top: 10px; left: 12px; color: rgba(255, 255, 255, 0.62); }
#shop .col .card-t { padding-left: 2px; }
#shop .col .card-t h3 { color: var(--s-card-name); }
#shop .col .card-t b { color: var(--s-text); }
#shop .col .card-add { bottom: 6px; right: 2px; background: none; border-color: var(--s-line-strong); color: var(--s-text); }
#shop .col :is(.card-add:hover, .card-add.done) { background: var(--s-btn); border-color: var(--s-btn); color: var(--s-btn-text); }
@media (hover: hover) and (pointer: fine) {
  #shop .col .card:hover { box-shadow: none; }
  #shop .col .card:hover .card-t h3 { color: var(--s-card-name); }
  #shop .col .card:hover .card-t b { color: var(--s-text); }
}

/* shopping notes + footer */
html body .notes { background: none; border-top: 1px solid var(--s-line); color: var(--s-text); }
html body .notes .note svg { stroke: var(--s-head); }
html body .notes .note b { color: var(--s-head); }
html body .notes .note span { color: var(--s-muted); }
html body .notes .note a { color: var(--s-text); }
html body .foot { background: var(--s-foot); }

/* the piece sheet: the blue photo is a framed picture, the info side is the room */
html body .sheet::backdrop, html body .offer::backdrop, html body .menu::backdrop { background: rgba(10, 10, 12, 0.6); }
html body .sheet-in { background: var(--s-panel); color: var(--s-text); }
html body .sheet-info { background: var(--s-panel) var(--s-tex) 0 0 / 512px 512px repeat; color: var(--s-text); }
html body .sheet-k { color: var(--s-muted); }
html body .sheet-info h2 { color: var(--s-head); }
html body .sheet-price { color: var(--s-text); }
html body .opt-h span { color: var(--s-text); }
html body .opt-h em { color: var(--s-muted); }
html body .pill { background: var(--s-pill); border-color: var(--s-line-strong); color: var(--s-text); }
html body .pill:hover { border-color: var(--s-text); }
html body .pill[aria-pressed="true"] { background: var(--s-btn); border-color: var(--s-btn); color: var(--s-btn-text); }
html body .opt-wait { background: var(--s-pill); border-left-color: var(--s-line-strong); color: var(--s-muted); }
html body .opt-wait a { color: var(--s-text); }
html body .btn-buy { background: var(--s-btn); color: var(--s-btn-text); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.6); }
html body .btn-buy:hover { background: var(--s-btn-hover); }
html body .btn-buy:disabled { background: var(--s-line-strong); color: var(--s-muted); }
html body .sheet-note { color: var(--s-muted); }
html body .sheet-more { color: var(--s-text); }
@media (max-width: 760px) {
  html body .sheet-info .btn-buy { box-shadow: 0 -10px 24px -6px var(--s-panel), 0 16px 30px -18px rgba(0, 0, 0, 0.6); }
}
@media (hover: none) { html body .pill:hover { border-color: var(--s-line-strong); } html body .pill[aria-pressed="true"]:hover { border-color: var(--s-btn); } }

/* the 10% pop-up: Sofia's photo on the left / top, the card on the house surface */
html body .offer-in { background: var(--s-panel) var(--s-tex) 0 0 / 512px 512px repeat; color: var(--s-text); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--s-line); }
html body .offer { color: var(--s-text); }
html body .offer-k { color: var(--s-muted); }
html body .offer h2 { color: var(--s-head); }
html body .offer-body p { color: var(--s-muted); }
html body .offer-row input { background: var(--s-pill); border-color: var(--s-line-strong); color: var(--s-text); }
html body .offer-row input::placeholder { color: var(--s-muted); }
html body .offer-row input:focus { border-color: var(--s-text); background: var(--s-pill); }
html body .offer-row button { background: var(--s-btn); color: var(--s-btn-text); }
html body .offer-no { color: var(--s-muted); }
html body .offer-code { border-color: var(--s-line-strong); background: var(--s-pill); color: var(--s-text); }
html body .offer-code span { color: var(--s-muted); }
html body .offer-x { background: rgba(12, 12, 14, 0.45); color: #fff; }

/* the phone menu drawer */
html body .menu-in { background: var(--s-foot); }

/* 10% pop-up: the page behind it dims to paper instead of a blue wash, so the pop-up isn't blue on blue */
html body .offer::backdrop { background: rgba(238, 234, 225, 0.72); }

/* Bag: a checkout problem (e.g. a size the piece does not come in) reads as a warning, not small print */
html body .drawer .note.err { color: #b3261e; font-weight: 600; }