/* ============================================================
   crumb - design system
   Cakes, bakeries, home bakers.
   Derived from templates/references/crumb-coffee-PRIMARY.png,
   crumb-bakehouse.png, crumb-hasfarm-florist-warmth.png.

   Every client build overrides ONLY the --c-accent block and the
   font pair if their brand demands it. Nothing else moves.

   index.html links this file. Do not paste old trust / performance
   / soft CSS into a crumb clone.
   ============================================================ */

:root{
  /* ---- Surfaces. Cream, never white. ---- */
  --c-page:        #FBF7F0;   /* page background */
  --c-surface:     #FFFDF9;   /* cards sitting on the page */
  --c-surface-alt: #F4EDE1;   /* alternating band, quiet sections */
  --c-tint-1:      #F7E9DE;   /* pastel card tint, peach */
  --c-tint-2:      #EDF0E4;   /* pastel card tint, sage */
  --c-tint-3:      #F9E7E9;   /* pastel card tint, berry */

  /* ---- Ink ---- */
  --c-ink:         #2A211B;   /* headings, near-black warm brown */
  --c-body:        #55483E;   /* body copy */
  --c-muted:       #8A7A6D;   /* captions, labels */
  --c-hairline:    #E4D9C9;   /* 1px rules */

  /* ---- Accent. ONE deep colour. Swap per client. ---- */
  --c-accent:      #2F4A38;   /* deep forest green */
  --c-accent-soft: #E7EDE7;   /* accent at 8%, for chips */
  --c-accent-ink:  #FBF7F0;   /* text on accent */
  --c-gold:        #B08847;   /* second accent, used sparingly: rules, small marks */

  /* ---- Type. Serif display, humanist sans body, one script accent. ---- */
  --f-display: "Fraunces", "Playfair Display", Georgia, serif;
  --f-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --f-script:  "Caveat", "Brush Script MT", cursive;   /* ONE phrase per page, never more */

  --t-hero:    clamp(2.6rem, 6vw, 4.6rem);
  --t-h2:      clamp(1.9rem, 3.4vw, 2.9rem);
  --t-h3:      1.35rem;
  --t-body:    1.0625rem;
  --t-small:   0.875rem;
  --t-label:   0.6875rem;   /* uppercase, tracked */

  --lh-tight:  1.08;
  --lh-body:   1.65;
  --tr-label:  0.14em;

  /* ---- Shape. Rounded and soft, this is the crumb signature. ---- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  --sh-soft:  0 2px 10px rgba(42,33,27,.05);
  --sh-card:  0 8px 28px rgba(42,33,27,.07);
  --sh-lift:  0 16px 44px rgba(42,33,27,.11);

  /* ---- Space ---- */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2.5rem; --sp-5: 4rem;   --sp-6: 6rem;
  --wrap: 1140px;

  /* ---- Motion. Slow and warm. Nothing bounces. ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .55s;
}

/* ============================================================
   Rules that are not negotiable
   ------------------------------------------------------------
   1. Background is cream. Pure white is banned.
   2. ONE accent colour per client site, pulled from their own
      branding or their product. Gold is for hairlines and small
      marks only, never a fill.
   3. The script font appears ONCE per page. One phrase.
   4. Photography is the client's own. Never AI-generate a real
      client's cakes.
   5. Product photos sit on a tint card (--c-tint-1/2/3), rotated
      through the three tints so a grid never repeats a colour
      side by side.
   6. Prices only where the client sells fixed items. Bespoke
      bakers show "from" or nothing at all. Do not build a shop.
   7. Trust strip under the hero: three items maximum. Real
      claims only, no invented review counts or star ratings.
   8. Every interactive element has a hover state that moves
      no more than 3px.
   ============================================================ */

/* ---- Base. Shared by the style tile and the clone page. ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-page);color:var(--c-body);
  font:400 var(--t-body)/var(--lh-body) var(--f-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
p{margin:0 0 1rem}
a{color:var(--c-accent)}
h1,h2,h3{font-family:var(--f-display);color:var(--c-ink);line-height:var(--lh-tight);margin:0;font-weight:600}
h1{font-size:var(--t-hero);letter-spacing:-.015em;font-weight:400}
h2{font-size:var(--t-h2);letter-spacing:-.01em;font-weight:400}
h3{font-size:var(--t-h3)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}

.script{font-family:var(--f-script);font-size:1.6rem;color:var(--c-accent);display:block;margin:.5rem 0 1rem}

.btn{display:inline-block;background:var(--c-accent);color:var(--c-accent-ink);border:0;border-radius:var(--r-pill);
  padding:15px 32px;text-decoration:none;font:500 1rem var(--f-body);cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-card)}
.btn.ghost{background:transparent;color:var(--c-accent);border:1px solid var(--c-accent)}

/* ---- The signature interaction: hover reveals a second photo ----
   Each product card holds two images. The second is the cut slice,
   the inside, the detail. It cross-fades on hover, and on touch
   devices it cycles slowly instead. This is the one piece of
   motion crumb gets. Do not add more. */
.crumb-card{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--c-tint-1);box-shadow:var(--sh-card);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.crumb-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.crumb-card img{display:block;width:100%;transition:opacity var(--dur) var(--ease)}
.crumb-card img.alt{position:absolute;inset:0;opacity:0}
.crumb-card:hover img.alt{opacity:1}

/* ---- Section label: small, uppercase, tracked, gold ---- */
.crumb-label{font:600 var(--t-label)/1 var(--f-body);letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--c-gold)}

/* ============================================================
   Clone page layout. Used by templates/crumb/index.html.
   Style tile does not need these classes.
   ============================================================ */

/* Empty photo frames. Never put a fake cake in these.
   Drop a real client image inside; the label hides when an img is present. */
.photo-slot{position:relative;display:grid;place-items:center;overflow:hidden;
  background:var(--c-tint-1);border-radius:var(--r-lg);box-shadow:var(--sh-card);
  color:var(--c-muted);font:500 var(--t-small)/1.4 var(--f-body);
  letter-spacing:.08em;text-transform:uppercase;text-align:center}
.photo-slot-label{padding:1rem;pointer-events:none}
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.photo-slot:has(img) .photo-slot-label{display:none}
.photo-slot--hero{aspect-ratio:4/5;width:100%}
.photo-slot--square{aspect-ratio:1/1;width:100%;border-radius:0;box-shadow:none}
.photo-slot--about{aspect-ratio:1/1;width:100%}
.photo-slot--tick{flex:none;width:230px;height:230px;border-radius:var(--r-md);box-shadow:none}
.photo-slot:nth-child(3n){background:var(--c-tint-2)}
.photo-slot:nth-child(3n+2){background:var(--c-tint-3)}

.draft{display:none}
[data-draft] .draft{display:block;position:sticky;top:0;z-index:60;background:var(--c-ink);color:#fff;
  text-align:center;font:500 .8rem var(--f-body);padding:8px 12px;letter-spacing:.03em}

.crumb-nav{position:sticky;top:0;z-index:50;background:rgba(251,247,240,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-hairline)}
[data-draft] .crumb-nav{top:33px}
.crumb-nav .in{display:flex;align-items:center;gap:1.5rem;padding:1rem 1.5rem;max-width:var(--wrap);margin:0 auto}
.crumb-mark{font-family:var(--f-display);font-size:1.1rem;color:var(--c-ink);text-decoration:none;font-weight:600}
.crumb-nav .links{margin-left:auto;display:flex;gap:1.4rem;font-size:.94rem}
.crumb-nav .links a{color:var(--c-body);text-decoration:none}
.crumb-nav .links a:hover{color:var(--c-accent)}

.crumb-hero{display:grid;grid-template-columns:1.02fr 1fr;gap:3rem;align-items:center;padding:4rem 0 3rem}
.crumb-hero h1{max-width:14ch}
.crumb-hero .lede{max-width:34ch}

.crumb-open{display:inline-flex;align-items:center;gap:.6rem;font:500 .95rem var(--f-body);
  color:var(--c-ink);background:var(--c-surface);border:1px solid var(--c-hairline);
  border-radius:var(--r-sm);padding:11px 16px;margin:0 0 1.5rem}
.crumb-open .dot{width:8px;height:8px;border-radius:50%;background:#3E9E6B;flex:none;
  box-shadow:0 0 0 4px rgba(62,158,107,.15)}

.crumb-ticker{overflow:hidden;margin:0 0 4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.crumb-ticker .track{display:flex;gap:1rem;width:max-content;animation:crumb-slide 46s linear infinite}
.crumb-ticker:hover .track{animation-play-state:paused}
@keyframes crumb-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.crumb-trust{background:var(--c-surface-alt);border-radius:var(--r-lg);padding:1.8rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin:1rem 0 4rem}
.crumb-trust b{display:block;font-family:var(--f-display);font-weight:600;color:var(--c-ink);font-size:1.02rem;margin-bottom:.15rem}
.crumb-trust div{font-size:.9rem}

.crumb-section{margin:0 0 4.5rem}
.crumb-section > .crumb-label{margin:0 0 .6rem}

.crumb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.5rem;margin:2rem 0 0}
.crumb-cards .crumb-card:nth-child(1){background:var(--c-tint-1)}
.crumb-cards .crumb-card:nth-child(2){background:var(--c-tint-2)}
.crumb-cards .crumb-card:nth-child(3){background:var(--c-tint-3)}
.crumb-card-body{padding:1.25rem 1.4rem 1.5rem}
.crumb-card-body p{margin:.4rem 0 0;font-size:.92rem;color:var(--c-muted)}

.crumb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:2rem 0 0}
.crumb-step{background:var(--c-surface);border-radius:var(--r-lg);padding:1.8rem 1.5rem;box-shadow:var(--sh-soft)}
.crumb-step .num{display:inline-flex;width:2.2rem;height:2.2rem;align-items:center;justify-content:center;
  background:var(--c-accent-soft);color:var(--c-accent);font-family:var(--f-display);font-weight:600;
  border-radius:50%;margin-bottom:.9rem;font-size:.95rem}
.crumb-step h3{font-size:1.1rem;margin-bottom:.35rem}
.crumb-step p{margin:0;font-size:.9rem;color:var(--c-muted)}

.crumb-about{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;background:var(--c-surface);
  border-radius:var(--r-lg);padding:2.5rem;box-shadow:var(--sh-soft)}

.crumb-menu{background:var(--c-surface);border:1px solid var(--c-hairline);border-radius:var(--r-lg);
  padding:2.5rem;margin:2rem 0 0;box-shadow:var(--sh-soft)}
.crumb-menu .cols{columns:2;column-gap:3rem}
.crumb-menu h3{font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent);
  margin:1.6rem 0 .6rem;break-after:avoid}
.crumb-menu h3:first-child{margin-top:0}
.crumb-menu ul{list-style:none;margin:0 0 .4rem;padding:0}
.crumb-menu li{font-size:.97rem;padding:5px 0;border-bottom:1px dotted var(--c-hairline);color:var(--c-ink);break-inside:avoid}
.crumb-menu .foot{margin:2rem 0 0;font-size:.88rem;color:var(--c-muted);border-top:1px solid var(--c-hairline);padding-top:1.2rem}

.crumb-gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:1rem;margin:2rem 0 0}
.crumb-gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-md);min-height:250px}
.crumb-gallery .photo-slot{height:100%;border-radius:var(--r-md)}
.crumb-gallery .g-big{grid-row:span 2;min-height:520px}
.crumb-gallery .g-wide{grid-column:1/-1;min-height:280px}
.crumb-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.2rem .9rem;z-index:2;
  font:500 .78rem/1.4 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(20,30,35,.72))}

.crumb-order{background:var(--c-accent);color:#fff;border-radius:var(--r-lg);padding:3rem}
.crumb-order h2{color:#fff}
.crumb-order .crumb-label{color:#d5e0d4}
.crumb-order form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.8rem}
.crumb-order label{display:block;font:500 .82rem var(--f-body);margin-bottom:.35rem;opacity:.92}
.crumb-order input,.crumb-order select,.crumb-order textarea{width:100%;background:#fff;border:0;border-radius:var(--r-sm);
  padding:12px 14px;font:400 1rem var(--f-body);color:var(--c-ink)}
.crumb-order textarea{min-height:110px;resize:vertical}
.crumb-order .full{grid-column:1/-1}
.crumb-order .hint{font-size:.82rem;opacity:.88;margin:.5rem 0 0}
.crumb-order .btn{background:#fff;color:var(--c-accent);font-weight:600}
#draftnote{display:none;margin:.75rem 0 0;font-size:.9rem;line-height:1.5}

.crumb-footer{border-top:1px solid var(--c-hairline);padding:2.5rem 0 3rem;font-size:.92rem}
.crumb-footer .in{display:flex;gap:2rem;flex-wrap:wrap;justify-content:space-between}
.crumb-footer a{color:var(--c-body);text-decoration:none}
.crumb-footer a:hover{color:var(--c-accent)}
.crumb-footer b{font-family:var(--f-display);color:var(--c-ink)}
.credit{color:var(--c-muted);font-size:.8rem;margin-top:1.5rem}

@media(max-width:880px){
  .crumb-hero{grid-template-columns:1fr;padding-top:2.2rem;gap:2rem}
  .crumb-about{grid-template-columns:1fr;padding:1.8rem;gap:1.8rem}
}
@media(max-width:820px){
  .crumb-gallery{grid-template-columns:1fr}
  .crumb-gallery .g-big{grid-row:auto;min-height:340px}
  .crumb-gallery .g-wide{grid-column:auto;min-height:240px}
}
@media(max-width:760px){
  .crumb-nav .links{display:none}
  .crumb-steps{grid-template-columns:1fr}
}
@media(max-width:720px){
  .crumb-menu{padding:1.6rem}
  .crumb-menu .cols{columns:1}
  .crumb-order{padding:1.8rem}
  .crumb-order form{grid-template-columns:1fr}
}
@media(max-width:620px){
  body{font-size:1rem}
  h1{font-size:2rem;line-height:1.18;letter-spacing:-.01em;font-weight:700}
  h2{font-size:1.55rem;line-height:1.2;font-weight:700}
  h3{font-size:1.05rem}
  .wrap{padding:0 1.25rem}
  .script{font-size:1.2rem}
  .crumb-hero{padding-top:1.8rem}
}
@media(max-width:600px){
  .photo-slot--tick{height:170px;width:170px}
}
@media(prefers-reduced-motion:reduce){
  .crumb-ticker .track{animation:none}
  .crumb-ticker{overflow-x:auto}
  .crumb-card img,.btn,.crumb-card{transition:none}
}