/* Tare Story Studio — shared tokens, textures, and slide plumbing */
:root{
  --green:#2D5016; --sage:#7f9a6c; --green-light:#d8ead2; --surface:#faf7f2; --surface2:#ede8de;
  --ink:#1c1a14; --ink2:#5a5548; --ink3:#9a9285; --border:#ddd8ce; --rust:#b84c2b; --honey:#c8973f;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:#1b1914;font-family:Georgia,serif;padding:40px}
body.shot{background:#fff;padding:0}

.studio-head{color:#f0ebe0;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px;color:#a8c297}
.studio-title{color:#faf7f2;font-family:Fraunces,serif;font-weight:300;font-size:34px;margin-bottom:24px}
body.shot .studio-head,body.shot .studio-title{display:none}

.slides{display:flex;gap:22px;flex-wrap:wrap}
.wrap{flex:0 0 auto}
.wrap .cap{font-family:'DM Mono',monospace;font-size:11px;color:#8d8574;margin-top:8px;letter-spacing:.12em}
.slide{position:relative;overflow:hidden;transform-origin:top left}
/* preview scale */
body:not(.shot) .holder{border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5)}
body:not(.shot) .slide{transform:scale(.3)}
body.shot .wrap{display:none}
body.shot .wrap.only{display:block}
body.shot .holder{border-radius:0;overflow:hidden}
body.shot .wrap.only .cap{display:none}

.grain::after{content:'';position:absolute;inset:0;background:var(--noise);opacity:.08;pointer-events:none;mix-blend-mode:multiply}

/* quilt-cream: website linen weave + diamond lattice */
.quiltcream{background-color:#fbf7ec;background-image:
  repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(160,145,120,.05) 2px, rgba(160,145,120,.05) 4px),
  repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(160,145,120,.03) 3px, rgba(160,145,120,.03) 6px),
  repeating-linear-gradient(45deg, transparent, transparent 26px, rgba(180,165,140,.09) 26px, rgba(180,165,140,.09) 28px),
  repeating-linear-gradient(-45deg, transparent, transparent 26px, rgba(180,165,140,.09) 26px, rgba(180,165,140,.09) 28px)}
.qmark{position:absolute;font-size:26px;color:rgba(184,76,43,.35)}

.kick{font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.22em}