/* ==========================================================================
   Craftybits
   One stylesheet. Tokens at the top: change those and the whole site follows.
   Stylesheet version 2026-09-23 (the admin area checks for this line)
   ========================================================================== */

:root {
  /* Colour ---------------------------------------------------------------
     ink     scorched oak, the text colour
     paper   mill board, the page
     board   a shade down from paper, for panels
     ply     birch face, the warm accent
     scorch  burnt cut edge
     cut     the vector cut line, borrowed from laser software layer colours
     rule    hairlines                                                   */
  --ink:    #231d17;
  --ink-60: #5d5349;
  --paper:  #f0ede6;
  --board:  #e5e0d5;
  --ply:    #c2873c;
  --scorch: #7a4a27;
  --cut:    #2f5d8a;
  --rule:   #cdc6b8;

  --shell: 1140px;
  --gap:   clamp(1.25rem, 4vw, 2.5rem);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Newsreader', Georgia, 'Times New Roman', serif;

  /* A type scale, not a pile of arbitrary sizes. */
  --t-xs: 0.78rem;
  --t-sm: 0.92rem;
  --t-md: 1.0625rem;
  --t-lg: 1.32rem;
  --t-xl: clamp(1.7rem, 3.2vw, 2.3rem);
  --t-2xl: clamp(2.4rem, 6.5vw, 4.1rem);
}

/* Reset ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

/* Any element given the hidden attribute stays hidden, whatever display
   value it would otherwise have. Without this, display:inline-grid wins. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* Keep jumped-to content clear of the sticky header. */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-md);
  line-height: 1.62;
  font-optical-sizing: auto;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--cut);
  outline-offset: 3px;
}

/* Present for screen readers, not on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1rem;
  z-index: 50;
}
.skip:focus { left: 1rem; top: 1rem; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gap);
}

/* The cut-line motif ------------------------------------------------------
   A hairline box with registration crosshairs at the corners, the way a
   cut file looks on the machine bed. Used for things that are, literally,
   cut parts.                                                              */

.cut {
  position: relative;
  border: 1px solid var(--rule);
  background: transparent;
}

.cut::before,
.cut::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
  background:
    linear-gradient(var(--cut), var(--cut)) center / 100% 1px no-repeat,
    linear-gradient(var(--cut), var(--cut)) center / 1px 100% no-repeat;
  opacity: 0.55;
}
.cut::before { top: -6px; left: -6px; }
.cut::after  { bottom: -6px; right: -6px; }

/* Masthead --------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -0.02em;
}

.wordmark-mark { width: 26px; color: var(--scorch); flex: none; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 1.9rem);
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-sm);
}

.nav a {
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--ink); }

.nav-basket { position: relative; }

.basket-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.35em;
  height: 1.35em;
  margin-left: 0.4rem;
  padding-inline: 0.3em;
  border-radius: 999px;
  background: var(--scorch);
  color: var(--paper);
  font-size: var(--t-xs);
  font-weight: 600;
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  padding: 0.82rem 1.5rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--scorch); border-color: var(--scorch); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.btn-quiet {
  background: transparent;
  color: var(--ink);
}
.btn-quiet:hover { background: var(--ink); color: var(--paper); }

.btn-wide { width: 100%; }

/* Hero -------------------------------------------------------------------
   The one loud moment on the site: a cut path that draws itself once.     */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 {
  font-size: var(--t-2xl);
  margin-bottom: 1.1rem;
}

.hero-lede {
  font-size: var(--t-lg);
  max-width: 34ch;
  color: var(--ink-60);
  margin-bottom: 1.9rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.hero-art { color: var(--cut); }

.hero-art svg { width: 100%; height: auto; }

.hero-art .draw {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw-cut 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.25s forwards;
}
.hero-art .draw-2 { animation-delay: 1.1s; }
.hero-art .draw-3 { animation-delay: 1.7s; }

@keyframes draw-cut { to { stroke-dashoffset: 0; } }

.hero-caption {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-60);
  margin-top: 0.9rem;
}

/* Section furniture ------------------------------------------------------- */

.section { padding-block: clamp(3rem, 7vw, 5rem); }

.section-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.section-top h2 { font-size: var(--t-xl); }

.section-link {
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 600;
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Product grid ------------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: clamp(1.6rem, 3.4vw, 2.6rem);
}

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.card-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 1.6rem;
  background: var(--board);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.card-frame img { width: 100%; height: 100%; object-fit: cover; }

.card-frame .is-drawn {
  width: 80%;
  height: auto;
  color: var(--scorch);
  opacity: 0.8;
}

.card:hover .card-frame { border-color: var(--ink); }

.card-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-md);
  margin: 0.95rem 0 0.2rem;
  letter-spacing: -0.01em;
}

.card-blurb {
  color: var(--ink-60);
  font-size: var(--t-sm);
  margin: 0 0 0.5rem;
}

.card-price {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  margin: auto 0 0;
}

.card-price small {
  font-weight: 500;
  color: var(--ink-60);
}

/* Filters ----------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.4rem;
}

.filters a {
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--rule);
}
.filters a:hover { border-color: var(--ink); }
.filters a[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Page headers ------------------------------------------------------------ */

.page-head {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}
.page-head h1 { font-size: var(--t-xl); margin-bottom: 0.6rem; }
.page-head p { color: var(--ink-60); max-width: 58ch; margin: 0; }

.crumb {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-60);
  margin-bottom: 1rem;
}
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* Product detail ---------------------------------------------------------- */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  align-items: start;
}

.detail-media {
  position: sticky;
  top: 96px;
}

.detail-frame {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 2.5rem;
  background: var(--board);
  border: 1px solid var(--rule);
}
.detail-frame img { width: 100%; height: 100%; object-fit: cover; }
.detail-frame .is-drawn { width: 76%; color: var(--scorch); opacity: 0.8; }

.detail h1 { font-size: var(--t-xl); margin-bottom: 0.5rem; }

.detail-blurb {
  font-size: var(--t-lg);
  color: var(--ink-60);
  margin-bottom: 1.4rem;
}

.price-now {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.price-note {
  font-size: var(--t-sm);
  color: var(--ink-60);
  margin-bottom: 1.8rem;
}

.field { margin-bottom: 1.5rem; }

.field-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  margin-bottom: 0.55rem;
}

.field-hint {
  font-size: var(--t-sm);
  color: var(--ink-60);
  margin: 0.45rem 0 0;
}

.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.choice { position: relative; }

.choice input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.choice span {
  display: block;
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 500;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--rule);
  transition: border-color 0.12s ease;
}

.choice input:checked + span {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.choice input:focus-visible + span { outline: 2px solid var(--cut); outline-offset: 2px; }

.text-input,
.textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: var(--t-md);
}
.text-input:focus, .textarea:focus { border-color: var(--ink); }
.textarea { min-height: 6.5rem; resize: vertical; }

.qty-row { display: flex; gap: 0.8rem; align-items: flex-end; }
.qty-row .field { margin-bottom: 0; }
.qty-input { width: 5.5rem; }

.add-row { margin-top: 1.7rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }

.lead-time {
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-60);
  margin-top: 1.1rem;
}

.prose { max-width: 62ch; }
.prose h2 { font-size: var(--t-lg); margin: 2.2rem 0 0.7rem; }
.prose ul { padding-left: 1.1rem; }
.prose li { margin-bottom: 0.4rem; }

.specs {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  font-size: var(--t-sm);
}
.specs th, .specs td {
  text-align: left;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.specs th {
  font-family: var(--display);
  font-weight: 600;
  width: 40%;
  padding-right: 1rem;
}

/* Basket ------------------------------------------------------------------ */

.basket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.line {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 1.2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.line-thumb {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: var(--board);
  border: 1px solid var(--rule);
  padding: 0.5rem;
}
.line-thumb img { width: 100%; height: 100%; object-fit: cover; }
.line-thumb .is-drawn { color: var(--scorch); opacity: 0.6; }

.line-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-md);
  margin: 0 0 0.25rem;
}

.line-meta {
  font-size: var(--t-sm);
  color: var(--ink-60);
  margin: 0 0 0.5rem;
}

.line-controls { display: flex; align-items: center; gap: 0.9rem; }

.line-qty { width: 4.2rem; padding: 0.4rem 0.5rem; border: 1px solid var(--rule); background: var(--paper); }

.line-remove {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--display);
  font-size: var(--t-sm);
  color: var(--ink-60);
  text-decoration: underline;
  cursor: pointer;
}
.line-remove:hover { color: var(--scorch); }

.line-price {
  font-family: var(--display);
  font-weight: 600;
  white-space: nowrap;
}

.summary {
  padding: 1.6rem;
  background: var(--board);
  border: 1px solid var(--rule);
}

.summary h2 { font-size: var(--t-lg); margin-bottom: 1.1rem; }

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--t-sm);
  padding: 0.4rem 0;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-lg);
  margin-top: 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.ship-picker { margin: 1.1rem 0; }
.ship-picker label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  font-size: var(--t-sm);
  cursor: pointer;
}
.ship-picker input { margin-top: 0.35rem; flex: none; }
.ship-picker .ship-days { color: var(--ink-60); display: block; }

.empty {
  padding: 3.5rem 0;
  text-align: left;
}
.empty h2 { font-size: var(--t-lg); margin-bottom: 0.6rem; }
.empty p { color: var(--ink-60); margin-bottom: 1.4rem; }

.notice {
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--ply);
  background: var(--board);
  font-size: var(--t-sm);
  margin-bottom: 1.6rem;
}
.notice p:last-child { margin-bottom: 0; }

.error-text { color: var(--scorch); font-size: var(--t-sm); }

/* A short row of reasons to buy, grounded in how the work is done. -------- */

.marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.8rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.mark h3 {
  font-size: var(--t-md);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.mark p { color: var(--ink-60); font-size: var(--t-sm); margin: 0; }

/* Footer ------------------------------------------------------------------ */

.footer {
  border-top: 1px solid var(--rule);
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: var(--t-sm);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  padding-bottom: 2.5rem;
}

.footer-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-md);
  margin-bottom: 0.3rem;
}
.footer-line { color: var(--ink-60); margin: 0 0 0.25rem; }

.footer-head {
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: 0.7rem;
}

.footer-col a {
  display: block;
  color: var(--ink-60);
  text-decoration: none;
  padding: 0.18rem 0;
}
.footer-col a:hover { color: var(--ink); text-decoration: underline; }

.footer-legal {
  border-top: 1px solid var(--rule);
  padding-block: 1.2rem 2rem;
  color: var(--ink-60);
  font-size: var(--t-xs);
}
.footer-legal p { margin: 0; }

/* Narrower screens --------------------------------------------------------- */

@media (max-width: 900px) {
  .hero-grid,
  .detail,
  .basket-layout { grid-template-columns: minmax(0, 1fr); }

  .hero-art { order: -1; max-width: 420px; }
  .detail-media { position: static; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .masthead-inner { min-height: 62px; flex-wrap: wrap; }
  .nav { gap: 0.9rem; font-size: var(--t-xs); }
  .line { grid-template-columns: 64px minmax(0, 1fr); }
  .line-price { grid-column: 2; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-art .draw { stroke-dashoffset: 0; }
}

/* Dark ---------------------------------------------------------------------
   The same materials seen on the machine bed rather than on the bench.     */

@media (prefers-color-scheme: dark) {
  :root {
    --ink:    #ece6dc;
    --ink-60: #9c9285;
    --paper:  #1a1714;
    --board:  #242019;
    --ply:    #d19a4c;
    --scorch: #c8935a;
    --cut:    #6ea3d6;
    --rule:   #3b352c;
  }
  .btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn:hover { background: var(--scorch); border-color: var(--scorch); color: var(--paper); }
  .btn-quiet { background: transparent; color: var(--ink); }
}

/* Print --------------------------------------------------------------------- */

@media print {
  .masthead, .footer, .hero-art, .add-row { display: none; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   CRAFTYBITS — Bright & Friendly redesign
   Visual layer only: existing markup, PHP and JS remain unchanged.
   ========================================================================== */

:root {
  --ink: #263238;
  --ink-60: #68757b;
  --paper: #fffdf8;
  --board: #fff4dc;
  --ply: #ffb86b;
  --scorch: #f26b5b;
  --cut: #46b8a9;
  --rule: #e8e0d5;

  --shell: 1200px;
  --gap: clamp(1rem, 3vw, 2rem);
  --display: "Nunito", "Avenir Next", "Trebuchet MS", sans-serif;
  --body: "Nunito", "Avenir Next", "Trebuchet MS", sans-serif;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --shadow-soft: 0 10px 30px rgba(76,64,47,.08);
  --shadow-hover: 0 18px 45px rgba(76,64,47,.15);
  --ease: cubic-bezier(.2,.8,.2,1);
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(circle at 4% 8%, rgba(255,184,107,.20), transparent 22rem),
    radial-gradient(circle at 95% 18%, rgba(70,184,169,.14), transparent 25rem),
    radial-gradient(circle at 50% 100%, rgba(242,107,91,.08), transparent 28rem),
    var(--paper);
  color: var(--ink);
  font-family: var(--body);
  letter-spacing: -.01em;
}

::selection { background: #ffe09f; color: var(--ink); }

h1,h2,h3,h4 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.045em;
}

p { line-height: 1.7; }

:focus-visible {
  outline: 3px solid rgba(70,184,169,.55);
  outline-offset: 4px;
}

.masthead {
  background: rgba(255,253,248,.88);
  border-bottom: 1px solid rgba(232,224,213,.9);
  box-shadow: 0 4px 18px rgba(76,64,47,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.masthead-inner { min-height: 82px; gap: 1.5rem; }

.wordmark {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -.055em;
}

.wordmark-mark { width: 34px; color: var(--scorch); }

.nav {
  gap: .55rem;
  font-size: .84rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.nav a {
  border: 0 !important;
  border-radius: 999px;
  padding: .65rem .85rem;
  color: var(--ink-60);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

.nav a:hover {
  background: #fff0df;
  color: var(--scorch);
  transform: translateY(-1px);
}

.nav-basket {
  background: #e7f8f4;
  border-radius: 999px;
  padding-left: .25rem;
}

.basket-count {
  background: var(--scorch);
  color: white;
  box-shadow: 0 0 0 3px #fffdf8;
}

.btn {
  min-height: 50px;
  padding: .82rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--scorch);
  color: #fff;
  font-family: var(--display);
  font-weight: 900;
  font-size: .86rem;
  letter-spacing: .02em;
  text-transform: none;
  box-shadow: 0 7px 0 #d95649, 0 13px 24px rgba(242,107,91,.16);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

.btn:hover {
  background: #f77b6c;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 10px 0 #d95649, 0 18px 28px rgba(242,107,91,.20);
}

.btn:active { transform: translateY(2px); box-shadow: 0 4px 0 #d95649; }

.btn-quiet {
  background: #e9f8f5;
  color: #287d73;
  box-shadow: 0 5px 0 #c7e9e2, 0 10px 20px rgba(70,184,169,.10);
}

.btn-quiet:hover {
  background: #d9f3ee;
  color: #206b62;
  box-shadow: 0 8px 0 #c0e2db, 0 14px 24px rgba(70,184,169,.15);
}

.hero {
  padding-block: clamp(4rem,9vw,7.5rem) clamp(3.5rem,8vw,6rem);
  overflow: hidden;
}

.hero-grid {
  grid-template-columns: minmax(0,1.05fr) minmax(280px,.95fr);
  gap: clamp(2rem,6vw,6rem);
}

.hero h1 {
  max-width: 10ch;
  font-size: var(--t-2xl);
  line-height: .94;
  letter-spacing: -.075em;
}

.hero-lede {
  max-width: 39ch;
  margin-bottom: 2rem;
  color: var(--ink-60);
  font-size: 1.12rem;
  line-height: 1.75;
}

.hero-art {
  position: relative;
  padding: clamp(1rem,3vw,2.5rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 20%, #fff 0 8%, transparent 8.5%),
    linear-gradient(145deg,#fff1d5,#e6f8f3);
  box-shadow: var(--shadow-soft);
  transform: rotate(1deg);
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(242,107,91,.25);
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
}

.hero-caption {
  color: var(--ink-60);
  font-weight: 800;
  letter-spacing: .04em;
}

.section { padding-block: clamp(3.5rem,8vw,6.5rem); }

.section-top { margin-bottom: 2.4rem; align-items: end; }

.section-top h2 {
  font-size: var(--t-xl);
  letter-spacing: -.06em;
}

.section-link {
  color: var(--scorch);
  font-weight: 900;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.rule { border-top-color: var(--rule); }

.grid {
  grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
  gap: clamp(1.25rem,2.8vw,2rem);
}

.card {
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: visible;
  transition: transform .25s var(--ease);
}

.card-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 1rem;
  border: 0;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}

.card-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
  pointer-events: none;
}

.card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-md) - 6px);
  mix-blend-mode: multiply;
  transition: transform .45s var(--ease);
}

.card:hover { transform: translateY(-6px); }

.card:hover .card-frame {
  box-shadow: var(--shadow-hover);
  transform: rotate(-1deg) scale(1.01);
}

.card:hover .card-frame img { transform: scale(1.055); }

.card-name {
  margin: 1.05rem .2rem .25rem;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: -.03em;
}

.card-blurb {
  margin-inline: .2rem;
  color: var(--ink-60);
  font-size: .9rem;
  line-height: 1.55;
}

.card-price {
  margin: .7rem .2rem 0;
  font-size: 1rem;
  font-weight: 900;
}

.filters {
  gap: .65rem;
  margin-bottom: 2.5rem;
}

.filters a {
  padding: .58rem 1rem;
  border: 2px solid #eee5d9;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-60);
  font-weight: 800;
  transition: all .2s var(--ease);
}

.filters a:hover {
  border-color: #f4c78d;
  background: #fff7ea;
  color: var(--scorch);
  transform: translateY(-2px);
}

.filters a[aria-current="true"] {
  background: var(--cut);
  border-color: var(--cut);
  color: #fff;
  box-shadow: 0 5px 0 #359487;
}

.page-head { padding-block: clamp(3rem,7vw,5rem) 2.5rem; }

.page-head h1 { font-size: var(--t-xl); line-height: 1; }

.page-head p { color: var(--ink-60); max-width: 62ch; }

.crumb {
  color: var(--cut);
  font-weight: 900;
  letter-spacing: .04em;
}

.crumb a:hover { color: var(--scorch); }

.detail { gap: clamp(2rem,6vw,5rem); }

.detail-frame {
  padding: clamp(1rem,4vw,3rem);
  border: 0;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 75% 20%,rgba(255,184,107,.45),transparent 10rem),
    linear-gradient(145deg,#fff1d5,#e8f7f3);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.detail-frame img {
  mix-blend-mode: multiply;
  transition: transform .45s var(--ease);
}

.detail-frame:hover img { transform: scale(1.025); }

.detail h1 { font-size: var(--t-xl); line-height: 1; }

.detail-blurb { color: var(--ink-60); line-height: 1.75; }

.price-now {
  color: var(--scorch);
  font-size: 2.3rem;
  font-weight: 900;
  letter-spacing: -.06em;
}

.field-label {
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.choice span {
  border: 2px solid #e9e2d8;
  border-radius: 999px;
  padding: .62rem 1rem;
  background: #fff;
  transition: all .2s var(--ease);
}

.choice input:checked + span {
  border-color: var(--cut);
  background: #e7f8f4;
  color: #287d73;
  box-shadow: 0 0 0 2px rgba(70,184,169,.08);
}

.text-input,
.textarea {
  border: 2px solid #e8e1d7;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: .85rem 1rem;
  transition: border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}

.text-input:hover,.textarea:hover { border-color: #d5cbc0; }

.text-input:focus,.textarea:focus {
  border-color: var(--cut);
  outline: 0;
  background: #fbfffe;
  box-shadow: 0 0 0 5px rgba(70,184,169,.13);
}

.textarea { min-height: 8rem; }

.field-hint,.lead-time { color: var(--ink-60); }

.cut {
  border-color: #eadfd1;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.45);
}

.cut::before,.cut::after { opacity: .28; }

.prose {
  color: #435057;
  line-height: 1.85;
}

.prose h2 {
  color: var(--ink);
  letter-spacing: -.045em;
}

@media (max-width:760px) {
  .masthead-inner {
    min-height: 70px;
    flex-wrap: wrap;
    padding-block: .75rem;
  }

  .nav {
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
    padding-bottom: .2rem;
  }

  .nav a { padding: .55rem .65rem; }

  .hero-grid,.detail { grid-template-columns: 1fr; }

  .hero h1 { max-width: 11ch; }

  .hero-art { max-width: 600px; margin-inline: auto; }

  .detail-media { position: static; }

  .grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1rem;
  }

  .card-frame { padding: .7rem; }
}

@media (max-width:440px) {
  .grid { grid-template-columns: 1fr; }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn { width: 100%; }

  .section-top {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   CRAFTYBITS — contrast corrections
   The bright coral and teal were being used both as text colours and as fills
   behind white text. At their original lightness that put several controls
   below the 4.5:1 minimum for small text — worst was the crumb link at 2.4:1.
   These darken only where text sits on the colour. The bright versions are
   kept for borders, glows and fills that carry no text, where contrast rules
   do not apply, so the page keeps its brightness.
   ========================================================================== */

:root {
  --scorch: #d2402c;        /* was #f26b5b — white on it 2.99:1 -> 4.66:1 */
  --ink-60: #5f6c72;        /* was #68757b — muted text 4.67:1 -> 5.33:1 */

  --coral-bright: #f26b5b;  /* the originals, for decoration only */
  --teal-bright:  #46b8a9;
  --teal-text:    #23706 6; /* placeholder, replaced below */
}

:root { --teal-text: #237066; }   /* teal dark enough for text and for fills */

/* Buttons: the raised edge must be darker than the face, and hover must not
   get lighter than the resting state or it drops back under the minimum. */
.btn        { box-shadow: 0 7px 0 #a82f1e, 0 13px 24px rgba(210,64,44,.16); }
.btn:hover  { background: #bd3a26; box-shadow: 0 10px 0 #8f2817, 0 18px 28px rgba(210,64,44,.20); }
.btn:active { box-shadow: 0 4px 0 #a82f1e; }

/* The teal "quiet" button also carries the .btn class, so the three rules
   above caught it too: a red underside at rest, and on hover a red face
   behind dark teal text that could barely be read. This puts its own
   colours back. */
.btn-quiet        { box-shadow: 0 5px 0 #c7e9e2, 0 10px 20px rgba(70,184,169,.10); }
.btn-quiet:hover  { background: #d9f3ee; box-shadow: 0 8px 0 #c0e2db, 0 14px 24px rgba(70,184,169,.15); }
.btn-quiet:active { box-shadow: 0 3px 0 #c7e9e2; }

/* Teal used as text or behind white text */
.crumb, .crumb a                  { color: var(--teal-text); }
.filters a[aria-current="true"]   { background: var(--teal-text); border-color: var(--teal-text); color: #fff; }
.btn-quiet                        { color: var(--teal-text); }
.btn-quiet:hover                  { color: #1c5d55; }
.choice input:checked + span      { color: var(--teal-text); border-color: var(--teal-text); }

/* Smooth scrolling is motion too. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================================================
   CRAFTYBITS — extra product photos
   A row of small pictures under the main one when a product has more than
   one photo. Clicking one swaps it into the big frame.
   ========================================================================== */

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.thumb {
  width: 76px;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  background: var(--board);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { transform: translateY(-2px); }
.thumb[aria-current="true"] { border-color: var(--teal-text); }

/* ==========================================================================
   CRAFTYBITS — choices with their own photo
   A choice given a photo in the admin area becomes a small picture with its
   name underneath, instead of a plain pill, so the customer can see which
   one is which before they pick. Choices without a photo are unchanged.
   ========================================================================== */

.choice.has-photo > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
  line-height: 1.1;
  text-align: center;
}

.choice.has-photo img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--board);
}

@media (max-width: 560px) {
  .choice.has-photo img { width: 58px; height: 58px; }
}

/* ==========================================================================
   CRAFTYBITS — automatic dark mode
   Follows the visitor's own device setting. There is no switch on the site;
   a phone set to dark simply gets the dark version.

   This block must stay at the END of the file. The redesign above redeclares
   :root, so anything placed before it gets overridden — which is exactly why
   the original dark mode stopped working.

   The palette is the bright one seen at night rather than a different scheme:
   warm charcoal instead of cream, and the coral and teal lifted so they read
   as text on a dark ground. On dark, the coral button carries near-black
   text rather than white, which is what keeps it legible.
   ========================================================================== */


/* ==========================================================================
   CRAFTYBITS — cards as panels
   The shop card carried no surface of its own: the photo tile and the page
   did all the work, so products read as loose tiles with text underneath.
   The admin area gives each row a proper panel — white, hairline border,
   soft shadow — and it reads better. This gives the shop the same, so the
   two halves of the site match. Colours for dark mode are at the end.
   ========================================================================== */

.card {
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 10px 10px 18px;
  box-shadow: var(--shadow-soft);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover {
  border-color: #f0d6b4;
  box-shadow: var(--shadow-hover);
}

/* The photo tile sits inside the card now, so it takes the cream that the
   admin uses for its thumbnails — otherwise white on white disappears. */
.card-frame { background: #fff6e6; }

.card-name, .card-blurb, .card-price { padding-inline: .55rem; }

.summary, .notice {
  background: #ffffff;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-soft);
}


/* ==========================================================================
   CRAFTYBITS — full-size photo
   The product frame crops to a square, so clicking the photo opens the whole
   shot over the page. Clicking again, Escape, or the close button puts it
   back. The backdrop is dark in both themes, because a photo reads best
   against something neutral rather than against the page.
   ========================================================================== */

.detail-frame.is-zoomable { cursor: zoom-in; }

/* A quiet hint that the photo does something, rather than a caption.
   Its own element, because .cut::before and .cut::after already draw the
   registration crosshairs on this frame. */
.zoom-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 30px;
  height: 30px;
  z-index: 2;
  border-radius: 50%;
  background:
    linear-gradient(#5f5348, #5f5348) center / 13px 1.6px no-repeat,
    linear-gradient(#5f5348, #5f5348) center / 1.6px 13px no-repeat,
    rgba(255, 255, 255, .88);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  opacity: .85;
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.detail-frame.is-zoomable:hover .zoom-hint { opacity: 1; transform: scale(1.08); }

.detail-frame.is-zoomable:focus-visible {
  outline: 3px solid var(--teal-bright, #46b8a9);
  outline-offset: 4px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(18, 15, 12, .94);
  animation: lightbox-in .16s ease-out;
  overflow: hidden;                 /* fitted: nothing to scroll */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pinch-zoom;         /* let a phone pinch as well as tap */
}

/* Zoomed, the photo is bigger than the screen, so the overlay becomes the
   thing you scroll and drag. */
.lightbox.is-zoomed {
  overflow: auto;
  touch-action: pan-x pan-y pinch-zoom;
}

/* The stage centres a fitted photo and lets a zoomed one overflow past it,
   which centring on the scrolling element itself will not do. */
.lightbox-stage {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(1rem, 4vw, 3rem);
  padding-top: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(3.2rem, 8vw, 4rem), env(safe-area-inset-bottom, 0px));
}

/* Fitted needs a definite height for max-height: 100% to measure against.
   Without it a tall photo came out at full size and ran off the screen. */
.lightbox.is-fit .lightbox-stage { height: 100%; }

@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox img {
  display: block;
  border-radius: var(--radius-sm, 12px);
  background: #fff;
  /* The card blends photos into its tile; full size we want the real thing. */
  mix-blend-mode: normal;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.lightbox.is-fit img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.lightbox.is-zoomed img {
  max-width: none;
  max-height: none;
  flex: none;
  cursor: grab;
}
.lightbox.is-dragging img { cursor: grabbing; user-select: none; -webkit-user-drag: none; }

/* Only offer the zoom cursor when there is genuinely more to see. */
.lightbox.is-fit.can-zoom img { cursor: zoom-in; }
.lightbox.is-fit img { cursor: default; }
.lightbox.is-fit.can-zoom img { cursor: zoom-in; }

.lightbox-close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: 1rem;
  z-index: 2;
  font: 600 .85rem/1 var(--display, system-ui), system-ui, sans-serif;
  color: #17140f;
  background: #f4efe6;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.2rem;
  cursor: pointer;
}
.lightbox-close:hover { background: #fff; }
.lightbox-close:focus-visible { outline: 3px solid var(--teal-bright, #46b8a9); outline-offset: 3px; }

/* One line telling people the photo does something. */
.lightbox-note {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  margin: 0;
  z-index: 2;
  font: 500 .8rem/1.4 var(--display, system-ui), system-ui, sans-serif;
  color: #e7ddcd;
  background: rgba(18, 15, 12, .75);
  border-radius: 999px;
  padding: .45rem 1rem;
  pointer-events: none;
  text-align: center;
  max-width: calc(100% - 2rem);
}
.lightbox:not(.can-zoom) .lightbox-note { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
  .detail-frame.is-zoomable:hover .zoom-hint { transform: none; }
}

@media (prefers-color-scheme: dark) {

  :root {
    --ink:      #f6efe4;
    --ink-60:   #b3a698;
    --paper:    #1b1813;
    --board:    #272118;
    --ply:      #ffc078;
    --scorch:   #ff8f7c;
    --cut:      #5ecfbe;
    --rule:     #3b3329;

    --coral-bright: #ff8f7c;
    --teal-bright:  #5ecfbe;
    --teal-text:    #5ecfbe;
  }

  /* Browser-default form controls come out blue, which fights the palette. */
  :root { accent-color: #5ecfbe; }

  body {
    background:
      radial-gradient(circle at 4% 8%, rgba(255,184,107,.10), transparent 22rem),
      radial-gradient(circle at 95% 18%, rgba(70,184,169,.09), transparent 25rem),
      radial-gradient(circle at 50% 100%, rgba(242,107,91,.07), transparent 28rem),
      var(--paper);
  }

  ::selection { background: #4a3a1a; color: var(--ink); }

  .masthead {
    background: rgba(27,24,19,.88);
    border-bottom: 1px solid rgba(59,51,41,.9);
    box-shadow: 0 4px 18px rgba(0,0,0,.35);
  }

  .nav a:hover   { background: #2f2617; }
  .nav-basket    { background: #17342f; }
  .basket-count  { box-shadow: 0 0 0 3px var(--paper); }

  /* Coral button: bright face, near-black text. */
  .btn {
    background: var(--scorch);
    color: #17140f;
    box-shadow: 0 7px 0 #c4604f, 0 13px 24px rgba(0,0,0,.45);
  }
  .btn:hover {
    background: #ffa593;
    color: #17140f;
    box-shadow: 0 10px 0 #c4604f, 0 18px 28px rgba(0,0,0,.5);
  }
  .btn:active { box-shadow: 0 4px 0 #c4604f; }

  .btn-quiet        { background: #17342f; color: #7fe0cf; box-shadow: 0 5px 0 #0f2723, 0 10px 20px rgba(0,0,0,.35); }
  .btn-quiet:hover  { background: #1d423c; color: #9aeade; box-shadow: 0 8px 0 #0f2723, 0 14px 24px rgba(0,0,0,.4); }
  .btn-quiet:active { box-shadow: 0 3px 0 #0f2723; }

  /* Panels and frames */
  .card-frame        { background: #221d15; }
  .card-frame::after { box-shadow: inset 0 0 0 2px rgba(255,255,255,.06); }
  .hero-art          { background-image: linear-gradient(145deg,#2a2317,#16302c); }
  .detail-frame      { background-image: linear-gradient(145deg,#2a2317,#16302c); }
  .cut               { border-color: var(--rule); background: rgba(255,255,255,.03); }

  /* Chips and filters */
  .filters a                      { background: #221d15; border-color: #3b3329; color: var(--ink-60); }
  .filters a:hover                { background: #2f2617; border-color: #6b5836; color: var(--ink); }
  .filters a[aria-current="true"] { background: var(--teal-bright); border-color: var(--teal-bright); color: #10241f; }

  /* Product options */
  .choice span                 { background: #221d15; border-color: #3b3329; color: var(--ink); }
  .choice input:checked + span { background: #17342f; border-color: var(--teal-bright); color: #7fe0cf; }

  /* Forms */
  .text-input, .textarea               { background: #221d15; border-color: #3b3329; color: var(--ink); }
  .text-input:hover, .textarea:hover   { border-color: #574a3a; }
  .text-input:focus, .textarea:focus   { background: #272118; border-color: var(--teal-bright); }
  .text-input::placeholder,
  .textarea::placeholder               { color: #8d8274; }

  /* .prose carries a hardcoded slate that stays dark on a dark ground. */
  .prose   { color: #cfc3b4; }
  .prose a:not(.btn) { color: var(--teal-bright); }

  /* Teal links read as teal on dark, so the crumb override from the
     contrast patch needs lifting back up here. */
  .crumb, .crumb a { color: var(--teal-bright); }
  .crumb a:hover   { color: var(--scorch); }

  /* ---- Surfaces on a dark ground -----------------------------------------
     In light mode the white photo tile and its shadow do the separating, and
     the wording sits on the cream page below. On dark there was nothing to
     separate against — .card carries no background at all — so products
     floated and panels all but vanished.

     These use the same panel colour as the admin area, so the shop and the
     admin read as one site. */

  :root { --panel: #221d15; }

  .card {
    background: var(--panel);
    border-color: var(--rule);
    box-shadow: 0 10px 26px rgba(0,0,0,.32);
  }
  .card:hover {
    background: #2b251a;
    border-color: #55462f;
    box-shadow: 0 16px 34px rgba(0,0,0,.4);
  }

  .summary, .notice {
    background: var(--panel);
    border-color: var(--rule);
    box-shadow: 0 10px 26px rgba(0,0,0,.28);
  }
  .marks { border-color: var(--rule); }
  .line  { border-bottom-color: var(--rule); }

  /* ---- Product photos ----------------------------------------------------
     The redesign blends photos into the card with mix-blend-mode: multiply.
     On a cream card that melts a white photo background into the card. On a
     dark card it multiplied the photo toward black. Rather than switch the
     blend off — which would leave white photo backgrounds glaring out of the
     page — the photo tile itself stays light. Product colours stay true,
     which matters when people buy on appearance, and the blend keeps working. */

  .card-frame, .detail-frame {
    background-color: #efe9de;
    background-image: none;
    border-color: #cfc5b4;
  }
  .card-frame::after { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
  .line-thumb { background: #efe9de; border-color: #cfc5b4; }

  /* The extra-photo thumbnails carry photos too, so they take the light tile
     as well — otherwise a white-background photo glares out of a dark chip. */
  .thumb { background: #efe9de; }

  /* The stand-in drawings sit on that light tile, so they need the dark coral
     rather than the light one used elsewhere on a dark ground. */
  .card-frame .is-drawn,
  .detail-frame .is-drawn,
  .line-thumb .is-drawn { color: #d2402c; }
}