/* Melted Stories: brand tokens (colours, fonts, paper grain) and shared components. */
:root{
  /* brand colours: Terracotta & Ivory (the bag and the logo) */
  --ivory:#f7f0e5;   /* paper; the logo colour on terracotta */
  --bark:#3d2a22;    /* ink */
  --terra:#a45d46;   /* signature: logo, rules, focus, small marks; 4.4:1 on ivory, so not for body text */
  --cream:#e8d6bd;   /* warm light */
  --rust:#8a4330;    /* web accent: links and the dark section, 6.3:1 with ivory */
  --gold:#b8925a;    /* detail only */
  /* derived tints and text-safe shades (keep to these) */
  --mute:#5e4a40;    /* secondary text on ivory, 7.3:1 */
  --link:var(--rust);
  --line:#3d2a2226;  /* hairlines */
  --pa:var(--ivory);--tx:var(--bark);
  --serif:'Libre Caslon Text',Georgia,serif;
  --hand:'Nanum Pen Script',cursive;
  --ea:cubic-bezier(.2,.8,.2,1);
  --el4:linear(0,.223,.5,.772,1,1.161,1.25,1.275,1.25,1.194,1.125,1.057,1,.96,.938,.931,.938,.951,.969,.986,1,1.01,1.016,1.017,1.016,1.012,1.008,1.004,1,.997,.996,.996,.997,.999,1);
  /* paper grain: dark specks for ivory, light specks for the rust section */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .16 0 0 0 0 .13 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-night:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .86 0 0 0 0 .73 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{background:var(--ivory)}
body{margin:0;color:var(--tx);background:var(--grain),var(--ivory);background-size:220px;font:400 1.0625rem/1.7 var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--link);text-underline-offset:.25em;text-decoration-thickness:1px}
::selection{background:var(--bark);color:var(--ivory)}
:focus-visible{outline:2px solid var(--terra);outline-offset:4px;border-radius:2px}
/* the dark section: rust paper, lit from one warm terracotta point (ivory text 6.3:1, cream 5.6:1) */
.night{--pa:var(--rust);--tx:var(--ivory);--mute:#f0dcc6;--link:var(--ivory);color:var(--tx);background:radial-gradient(60% 70% at 20% 0%,#a45d4699,transparent 70%),var(--grain-night),var(--rust);background-size:auto,220px,auto}
.night :focus-visible{outline-color:var(--ivory)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* buttons fill from below on hover */
/* Buttons match the shop (Shopify Craft): pill shape, 1px border, and on hover the border thickens */
.btn{display:inline-flex;align-items:center;gap:.55em;color:var(--tx);background:transparent;border:1px solid var(--tx);border-radius:999px;padding:.8em 1.5em;font:inherit;font-size:.98rem;line-height:1.1;text-decoration:none;cursor:pointer;transition:box-shadow .1s ease}
.btn:hover{box-shadow:0 0 0 1px var(--tx)}
.btn.solid{background:var(--tx);color:var(--pa)}
.btn svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* links underline from the left */
.ul{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:.1em;transition:background-size .4s var(--ea)}
.ul:hover,.ul:focus-visible{background-size:100% 1.5px}
@media (prefers-reduced-motion:reduce){*,:before,:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}