/* Gingham & Grain: recipe page tokens + components. Drop in after kit/tokens.css.
   Contrast: text colors are ink / brick / sage-text on cream or paper (all 5.2:1+). Honey + sage-accent are decor only. */
:root{
  /* color */
  --gg-cream:#F6EFDF; --gg-paper:#FFFBF2; --gg-oat:#EFE3CB; --gg-line:#E2CFAE;
  --gg-brick:#A4432F; --gg-brick-dark:#8A3726; --gg-honey:#C8962E; --gg-honey-wash:#FBF0D6;
  --gg-sage-accent:#6F8A6A; --gg-sage-text:#4E6A4B; --gg-ink:#3B2A1E; --gg-ink-soft:#5C4636;
  /* type */
  --gg-font-display:"Fraunces",Georgia,serif; --gg-font-text:"Lora",Georgia,serif;
  --gg-fs-xs:13px; --gg-fs-sm:15px; --gg-fs-md:17px; --gg-fs-lg:20px; --gg-fs-xl:26px; --gg-fs-2xl:32px;
  --gg-fs-cook:28px; --gg-lh:1.5;
  /* spacing (4px grid) */
  --gg-s1:4px; --gg-s2:8px; --gg-s3:12px; --gg-s4:16px; --gg-s5:20px; --gg-s6:24px; --gg-s8:32px;
  /* radii, shadow, tap */
  --gg-r-sm:8px; --gg-r-md:14px; --gg-r-lg:20px; --gg-r-pill:999px;
  --gg-shadow:0 1px 0 #E2CFAE, 0 6px 16px rgba(59,42,30,.08);
  --gg-tap:48px;
  /* brick gingham: two crossed 50% stripes = 3 tones like woven cloth */
  --gg-gingham:
    linear-gradient(90deg, rgba(164,67,47,.55) 50%, transparent 50%),
    linear-gradient(0deg,  rgba(164,67,47,.55) 50%, transparent 50%),
    var(--gg-paper);
  --gg-gingham-size:12px 12px;
}
*{box-sizing:border-box}
body.gg{margin:0;background:var(--gg-cream);color:var(--gg-ink);font:var(--gg-fs-md)/var(--gg-lh) var(--gg-font-text)}
.gg h1,.gg h2,.gg h3{font-family:var(--gg-font-display);font-weight:600;font-variation-settings:"SOFT" 100;color:var(--gg-brick);margin:0}
.gg-gingham-band{height:10px;background:var(--gg-gingham);background-size:var(--gg-gingham-size)}
/* card with gingham ribbon top edge */
.gg-card{background:var(--gg-paper);border:1px solid var(--gg-line);border-radius:var(--gg-r-lg);box-shadow:var(--gg-shadow);overflow:hidden;margin:0 0 var(--gg-s4)}
.gg-card>.gg-gingham-band{height:8px;background-size:8px 8px}
.gg-card-body{padding:var(--gg-s4) var(--gg-s4) var(--gg-s5)}
.gg-card h2{font-size:var(--gg-fs-lg);margin-bottom:var(--gg-s3);display:flex;align-items:center;gap:var(--gg-s2)}
.gg-card h2::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--gg-honey) 0 6px,transparent 6px 10px);opacity:.7}
/* buttons */
.gg-btn{min-height:var(--gg-tap);min-width:var(--gg-tap);padding:0 var(--gg-s4);border-radius:var(--gg-r-md);font:600 var(--gg-fs-md) var(--gg-font-text);display:inline-flex;align-items:center;justify-content:center;gap:var(--gg-s2);cursor:pointer;border:2px solid var(--gg-brick);background:var(--gg-paper);color:var(--gg-brick)}
.gg-btn--primary{background:var(--gg-brick);color:var(--gg-cream)}
.gg-btn--primary:active{background:var(--gg-brick-dark)}
.gg-btn:focus-visible{outline:3px solid var(--gg-honey);outline-offset:2px}
/* batch picker: segmented, 48px */
.gg-batch{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;gap:var(--gg-s2)}
.gg-batch button{min-height:var(--gg-tap);border-radius:var(--gg-r-md);border:2px solid var(--gg-line);background:var(--gg-cream);color:var(--gg-ink);font:600 var(--gg-fs-md) var(--gg-font-text)}
.gg-batch button[aria-pressed="true"]{background:var(--gg-brick);border-color:var(--gg-brick);color:var(--gg-cream)}
.gg-batch input{min-height:var(--gg-tap);width:100%;border-radius:var(--gg-r-md);border:2px dashed var(--gg-line);background:var(--gg-paper);padding:0 var(--gg-s3);font:var(--gg-fs-md) var(--gg-font-text);color:var(--gg-ink)}
/* cost tiles */
.gg-costs{display:grid;grid-template-columns:1fr 1fr;gap:var(--gg-s2)}
.gg-tile{background:var(--gg-cream);border-radius:var(--gg-r-md);padding:var(--gg-s3)}
.gg-tile small{display:block;font-size:var(--gg-fs-xs);color:var(--gg-sage-text);font-weight:600;letter-spacing:.02em}
.gg-tile b{font:600 var(--gg-fs-xl)/1.1 var(--gg-font-display);color:var(--gg-ink)}
.gg-tile--price{grid-column:1/-1;background:var(--gg-honey-wash);border:2px solid var(--gg-honey);display:flex;justify-content:space-between;align-items:center}
.gg-tile--price b{font-size:var(--gg-fs-2xl);color:var(--gg-brick)}
.gg-note{font-size:var(--gg-fs-xs);color:var(--gg-ink-soft);margin:var(--gg-s3) 0 0;padding-left:var(--gg-s3);border-left:3px solid var(--gg-sage-accent)}
/* ingredients */
.gg-ing{list-style:none;margin:0;padding:0}
.gg-ing li{display:grid;grid-template-columns:64px 1fr auto;gap:var(--gg-s2);padding:var(--gg-s2) 0;border-bottom:1px dashed var(--gg-line);font-size:var(--gg-fs-sm)}
.gg-ing li:last-child{border:0}
.gg-ing .amt{font-weight:700}
.gg-ing .cost{color:var(--gg-ink-soft)}
/* numbered steps */
.gg-steps{list-style:none;counter-reset:s;margin:0;padding:0}
.gg-steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:var(--gg-s3);padding:var(--gg-s2) 0;font-size:var(--gg-fs-md)}
.gg-steps li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--gg-brick);color:var(--gg-cream);font:600 16px/32px var(--gg-font-display);text-align:center}
/* cook mode */
.gg-cook{min-height:100vh;display:flex;flex-direction:column;background:var(--gg-paper)}
.gg-cook-step{font:600 var(--gg-fs-lg) var(--gg-font-display);color:var(--gg-brick)}
.gg-cook-text{font:500 var(--gg-fs-cook)/1.4 var(--gg-font-text);color:var(--gg-ink)}
.gg-cook-nav{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--gg-s3)}
.gg-cook-nav .gg-btn{min-height:64px;font-size:var(--gg-fs-lg)}
.gg-progress{display:flex;gap:6px}.gg-progress i{flex:1;height:6px;border-radius:3px;background:var(--gg-oat)}.gg-progress i.on{background:var(--gg-brick)}
/* printable recipe card: ONE column under 480px, two at 480px+ and on paper */
/* gingham frame: wrap the card in .gg-print-frame */
.gg-print-frame{padding:10px;border-radius:calc(var(--gg-r-md) + 10px);background:var(--gg-gingham);background-size:10px 10px}
.gg-print{background:var(--gg-paper);border-radius:var(--gg-r-md);padding:var(--gg-s5)}
.gg-print-cols{display:grid;grid-template-columns:1fr;gap:var(--gg-s5)}
@media (min-width:480px){.gg-print-cols{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--gg-s6)}}
.gg-print h3{font-size:var(--gg-fs-md);text-transform:uppercase;letter-spacing:.08em;color:var(--gg-sage-text);margin-bottom:var(--gg-s2)}
.gg-print-total{display:grid;grid-template-columns:1fr 1fr;gap:var(--gg-s2);border-top:2px solid var(--gg-brick);padding-top:var(--gg-s3);margin-top:var(--gg-s5);font-size:var(--gg-fs-sm)}
.gg-print-total .big{grid-column:1/-1;font:600 var(--gg-fs-lg) var(--gg-font-display);color:var(--gg-brick)}