/* Look 3, Sign Painter: shared tokens and parts for poster, site and board */
@font-face{font-family:"Caprasimo";src:url(../fonts/caprasimo-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Libre Franklin";src:url(../fonts/libre-franklin-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"Libre Franklin";src:url(../fonts/libre-franklin-latin-wght-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:block}

:root{
  --color-bg:#13342A;       /* bottle-green window band, the dominant field */
  --color-bg-deep:#0C2620;  /* the window in shadow, under the awning */
  --color-paper:#F4ECDD;    /* sign board */
  --color-accent:#C9342A;   /* awning red */
  --color-gold:#CF9A34;     /* leaf gold, always flat */
  --color-gold-hi:#EDCB78;  /* the burnished edge and the one catch of light, flat */
  --color-chalk:#23282A;    /* chalkboard */
  --color-chalk-line:#ECE7DA;/* chalk */
  --color-ink:#1B1B1B;
  --font-display:"Caprasimo", serif; /* headings, chalk, numbers */
  --font-wm:"Caprasimo";             /* the gold-leaf wordmark, read by look.js */
  --font-body:"Libre Franklin", sans-serif;
  --font-label:"Libre Franklin";     /* awning lettering, read by look.js */
  --motion-ease:cubic-bezier(.65,0,.35,1);
  --motion-fast:260ms;
  --motion-slow:900ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);font-weight:420}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* the scalloped awning: stripes + a solid valance, drawn by look.js */
.awning{display:block;width:100%}
.awning svg{display:block;width:100%;height:100%}

/* wordmark (SVG built by look.js) */
.wordmark{display:block;width:100%}
.wordmark svg{display:block;width:100%;height:auto;overflow:visible}

/* cream sign-board panel with a painted pinstripe */
.board{background:var(--color-paper);position:relative;padding:14px 16px 14px}
.board::before{content:"";position:absolute;inset:5px;border:2px solid var(--color-accent);pointer-events:none;border-radius:2px}
.board > *{position:relative}
.sec-h{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:400;color:var(--color-accent);line-height:1;letter-spacing:.005em}
.disc{flex:none;display:inline-grid;place-items:center;border-radius:50%;background:var(--color-bg);color:var(--color-gold);font-family:var(--font-body);font-weight:800;letter-spacing:.02em}
.point{color:var(--color-bg);font-weight:650;line-height:1.25}

/* two-ink window prints, taped on */
.print{position:relative;background:var(--color-paper);padding:5px;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.print img{display:block;width:100%;height:100%;object-fit:cover}
.tape{position:absolute;width:46px;height:15px;background:rgba(236,224,196,.82);z-index:2}

/* chalkboard */
.chalkboard{position:relative;background:var(--color-chalk);color:var(--color-chalk-line);overflow:hidden}
.chalkboard .dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.chalk-h{font-family:var(--font-display);color:var(--color-chalk-line);filter:url(#chalk)}
.chalk-gold{color:#E3B95C}
.chalk-red{color:#E9806F}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}