/* Shaun Paul Johnston: coffee page. Hand-written; no inline styles anywhere (CSP style-src 'self'). */
:root{
  --ink:#2a1d14;--text:#4a3a2e;--muted:#7a6656;--bg:#faf5ee;--surface:#fff;--line:#eadfce;
  --brand:#8b5a35;--brand-ink:#6f4224;--brand-soft:#f6eadb;--yellow:#ffd21f;--yellow-edge:#b88a00;
  --edge:#e0d1bb;--hi:rgba(255,255,255,.95);--lo:rgba(42,29,20,.06);--amb:rgba(42,29,20,.10);
  --surface-top:#fff;--surface-bot:#fdf8f1;--depth:5px;--radius:18px;
  --shadow-3d:inset 0 1px 0 var(--hi),inset 0 -2px 0 var(--lo),0 1px 0 var(--edge),0 var(--depth) 0 var(--edge),0 calc(var(--depth) + 4px) 10px var(--amb),0 calc(var(--depth) + 16px) 32px -8px var(--amb);
  --shadow-3d-lift:inset 0 1px 0 var(--hi),inset 0 -2px 0 var(--lo),0 1px 0 var(--edge),0 calc(var(--depth) + 3px) 0 var(--edge),0 calc(var(--depth) + 12px) 18px var(--amb),0 calc(var(--depth) + 30px) 44px -10px rgba(42,29,20,.18);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --ink:#fbf1de;--text:#e6d8c6;--muted:#b5a18c;--bg:#15100c;--surface:#221912;--line:#3a2c20;
  --brand:#d39a68;--brand-ink:#f0c08f;--brand-soft:#33251a;
  --edge:#0b0806;--hi:rgba(255,255,255,.06);--lo:rgba(0,0,0,.3);--amb:rgba(0,0,0,.45);
  --surface-top:#2a1f17;--surface-bot:#201812;
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:1rem/1.6 var(--font);color:var(--text);background:var(--bg)}
h1,h2,h3{color:var(--ink);line-height:1.2}
a{color:var(--brand-ink)}
a:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--surface);padding:.5rem .8rem;border-radius:8px;z-index:5}
.skip:focus{left:.5rem}
.wrap{max-width:62rem;margin:0 auto;padding:0 1rem}

/* Cover banner (decorative): warm gradient + scattered beans drawn with gradients */
.cover{height:9.5rem;background:linear-gradient(135deg,#8b5a35 0%,#6f4224 55%,#4e2e19 100%);overflow:hidden}
.cover-beans{height:100%;opacity:.22;background-image:
  radial-gradient(ellipse 10px 14px at 20px 24px,#fbf1de 60%,transparent 62%),
  radial-gradient(ellipse 9px 13px at 70px 60px,#fbf1de 60%,transparent 62%),
  radial-gradient(ellipse 8px 12px at 110px 18px,#fbf1de 60%,transparent 62%);background-size:130px 80px}
@media (min-width:48rem){.cover{height:12rem}}

/* Profile header: avatar overlapping the cover, name, tagline */
.profile{text-align:center;margin-top:-3.25rem}
.avatar{width:6.5rem;height:6.5rem;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#ffe766,#ffd21f 60%,#e0b000);border:4px solid var(--bg);
  box-shadow:0 5px 0 var(--yellow-edge),0 12px 24px var(--amb)}
.avatar span{font-weight:900;font-size:1.6rem;letter-spacing:.04em;color:#2a1d14}
.profile h1{font-size:clamp(1.6rem,5vw,2.2rem);margin:.8rem 0 .2rem}
.tag{margin:0 0 1.5rem;color:var(--muted)}

/* Layout: support box + about (side by side on desktop, support first) */
.layout{display:grid;gap:1.25rem;align-items:start}
@media (min-width:48rem){.layout{grid-template-columns:1fr 1.05fr}.support{order:2}.about{order:1}}
.card{background:linear-gradient(180deg,var(--surface-top),var(--surface-bot));border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-3d);padding:1.25rem;margin-bottom:var(--depth)}
.card h2{margin:0 0 .6rem;font-size:1.35rem}
.card h3{margin:1.1rem 0 .3rem;font-size:1.02rem}
.card p{margin:0 0 .6rem}
.card p:last-child{margin-bottom:0}

/* Support box */
.support{text-align:center}
.art{width:min(15rem,70%);margin:-.25rem auto .25rem}
.cuppa{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 14px rgba(42,29,20,.16))}
.opts{list-style:none;padding:0;margin:1rem 0 .75rem;display:grid;gap:.8rem}
.opt{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;padding:.8rem .9rem;text-align:left;
  border-radius:14px;border:1px solid var(--line);text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,var(--surface-top),var(--surface-bot));box-shadow:var(--shadow-3d);
  transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease-spring)}
.opt:hover{transform:translateY(-2px);box-shadow:var(--shadow-3d-lift)}
.opt:active{transform:translateY(3px);box-shadow:inset 0 1px 0 var(--hi),0 1px 0 var(--edge)}
.opt:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.opt-cups{display:flex;gap:2px;min-width:4.3rem}
.cup-ic{width:1.35rem;height:1.6rem;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M5 8h14l-1.6 16.5Q17.2 26 15.6 26H8.4Q6.8 26 6.6 24.5Z' fill='%23fbf1de' stroke='%232a1d14' stroke-width='1.6'/%3E%3Cpath d='M5.9 17h12.2l-.7 7.5Q17.2 26 15.6 26H8.4Q6.8 26 6.6 24.5Z' fill='%238b5a35'/%3E%3Crect x='3' y='4' width='18' height='4.5' rx='1.6' fill='%236f4224' stroke='%232a1d14' stroke-width='1.6'/%3E%3C/svg%3E")}
.opt-text strong{display:block;font-size:1.02rem}
.opt-text small{display:block;color:var(--muted);font-size:.83rem;line-height:1.35}
.opt-price{font-weight:900;font-size:1.1rem;color:#2a1d14;padding:.35em .85em;border-radius:999px;
  background:linear-gradient(180deg,#ffe766,var(--yellow));border:1px solid #d9a900;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 var(--yellow-edge)}
.opt--best{border-color:#e7b400;box-shadow:var(--shadow-3d),0 0 0 3px rgba(255,210,31,.45);margin-top:.55rem}
.best{position:absolute;top:-.75rem;left:.9rem;font-size:.74rem;font-weight:800;letter-spacing:.02em;color:#2a1d14;
  background:var(--yellow);border-radius:999px;padding:.12em .7em;box-shadow:0 2px 0 var(--yellow-edge)}
.fine{font-size:.85rem;color:var(--muted)}
.alt{font-size:.85rem;color:var(--muted)}
.alt a{font-weight:700}
.home-btn{display:inline-block;margin-top:.5rem;padding:.6em 1.2em;border-radius:999px;font-weight:800;text-decoration:none;color:#2a1d14;
  background:linear-gradient(180deg,#ffe766,var(--yellow));border:1px solid #d9a900;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 0 var(--yellow-edge)}
.foot{max-width:62rem;margin:2rem auto 0;padding:1.25rem 1rem 2rem;text-align:center;font-size:.82rem;color:var(--muted)}

/* Mascot motion (7s loop): stream pours in, level rises, little hop with motion lines, hand waves, steam.
   Base styles are the static end state (full cup, no stream): that is what reduced motion shows. */
.steam,.cuppa-pour,.cuppa-fill,.cuppa-hop,.cuppa-wave,.cuppa-lines,.cuppa-floor{transform-box:fill-box;transform-origin:center}
.steam{animation:steam 3.2s ease-in-out infinite}
.steam--2{animation-delay:-1.4s}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-10px)}}
.cuppa-pour{opacity:0;transform-origin:50% 0;animation:cuppa-pour 7s ease-in-out infinite}
@keyframes cuppa-pour{0%{opacity:1;transform:scaleY(0)}7%,48%{opacity:1;transform:none}56%{opacity:1;transform:translateY(70px) scaleY(0)}57%,100%{opacity:0;transform:scaleY(0)}}
.cuppa-flow{animation:cuppa-flow .5s linear infinite}
@keyframes cuppa-flow{to{stroke-dashoffset:-14}}
.cuppa-fill{animation:cuppa-fill 7s ease-in-out infinite}
@keyframes cuppa-fill{0%,5%{transform:translateY(78px)}54%,86%{transform:none}100%{transform:translateY(78px)}}
.cuppa-hop{transform-origin:50% 100%;animation:cuppa-hop 7s ease-in-out infinite}
@keyframes cuppa-hop{0%,58%,82%,100%{transform:none}63%{transform:scale(1.03,.95)}70%{transform:translateY(-16px) scale(.98,1.03)}76%{transform:scale(1.03,.96)}79%{transform:none}}
.cuppa-floor{animation:cuppa-floor 7s ease-in-out infinite}
@keyframes cuppa-floor{0%,62%,78%,100%{transform:none;opacity:1}70%{transform:scaleX(.72);opacity:.6}}
.cuppa-lines{opacity:0;animation:cuppa-lines 7s ease-out infinite}
@keyframes cuppa-lines{0%,64%,80%,100%{opacity:0;transform:none}68%{opacity:1}76%{opacity:0;transform:translateY(4px)}}
.cuppa-wave{transform-origin:50% 100%;animation:cuppa-wave 1.4s ease-in-out infinite alternate}
@keyframes cuppa-wave{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}

/* Live counter (revealed by coffee.js; hidden without JS) */
.counter{margin:.2rem auto .4rem;padding:.65rem .9rem;border-radius:14px;background:var(--brand-soft);border:1px dashed var(--edge)}
.counter[hidden]{display:none}
.counter p{margin:0}
.counter-main{font-size:1.05rem;color:var(--ink)}
.counter-main strong{font-size:1.5rem;font-weight:900;color:var(--brand-ink);margin-right:.1em}
.counter-today{font-size:.86rem;color:var(--muted)}
.wired-badge{display:none;margin-top:.35rem!important;font-size:.78rem;font-weight:800;color:#2a1d14;background:var(--yellow);border-radius:999px;padding:.1em .75em;box-shadow:0 2px 0 var(--yellow-edge);width:max-content;margin-left:auto!important;margin-right:auto!important}
.wired-dot{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:#2a1d14;margin-right:.4em;vertical-align:.08em}
[data-wired="1"] .wired-badge,[data-wired="2"] .wired-badge,[data-wired="3"] .wired-badge,[data-wired="4"] .wired-badge,[data-wired="5"] .wired-badge{display:block}
.sprites{position:absolute;width:0;height:0;overflow:hidden}

/* Wired levels (data-wired on <html>, set by coffee.js from today's coffees, capped at 5).
   1-2: jitter + faster steam. 3: shaky eyes, faster hop. 4+: chaos layer (mini Shauns + bouncing cups). */
.cuppa-eyes{transform-box:fill-box;transform-origin:center}
[data-wired="1"] .art{animation:jitter .5s steps(2) infinite}
[data-wired="2"] .art{animation:jitter .25s steps(2) infinite}
[data-wired="3"] .art,[data-wired="4"] .art,[data-wired="5"] .art{animation:jitter2 .16s steps(2) infinite}
@keyframes jitter{0%{transform:translate(0,0)}50%{transform:translate(1px,-1px) rotate(.6deg)}100%{transform:translate(-1px,1px) rotate(-.6deg)}}
@keyframes jitter2{0%{transform:translate(-2px,1px) rotate(-1.2deg)}50%{transform:translate(2px,-1px) rotate(1.2deg)}100%{transform:translate(-1px,-2px)}}
[data-wired="1"] .steam{animation-duration:2.2s}
[data-wired="2"] .steam{animation-duration:1.5s}
[data-wired="3"] .steam,[data-wired="4"] .steam,[data-wired="5"] .steam{animation-duration:1s}
[data-wired="3"] .cuppa-eyes,[data-wired="4"] .cuppa-eyes,[data-wired="5"] .cuppa-eyes{animation:eyes .12s linear infinite alternate}
@keyframes eyes{from{transform:translate(-1.5px,0)}to{transform:translate(1.5px,-.5px)}}
/* faster loop: all five synced parts change together */
[data-wired="3"] :is(.cuppa-pour,.cuppa-fill,.cuppa-hop,.cuppa-lines,.cuppa-floor){animation-duration:4.5s}
[data-wired="4"] :is(.cuppa-pour,.cuppa-fill,.cuppa-hop,.cuppa-lines,.cuppa-floor),[data-wired="5"] :is(.cuppa-pour,.cuppa-fill,.cuppa-hop,.cuppa-lines,.cuppa-floor){animation-duration:3s}
[data-wired="4"] .cuppa-wave,[data-wired="5"] .cuppa-wave{animation-duration:.35s}

/* Chaos layer: purely decorative, never blocks clicks (pointer-events:none), max 6 of each sprite.
   Two nested elements bounce on separate axes (DVD-logo style). */
.chaos{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.bx{position:absolute;left:0;top:0;width:var(--s,3.2rem);height:var(--s,3.2rem);animation:bx var(--dx,7s) linear infinite alternate;animation-delay:var(--d,0s)}
.by{width:100%;height:100%;animation:by var(--dy,5s) linear infinite alternate;animation-delay:var(--d,0s)}
.bx svg{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 4px rgba(42,29,20,.25));animation:spin var(--r,2.4s) ease-in-out infinite alternate}
@keyframes bx{from{transform:translateX(0)}to{transform:translateX(calc(100vw - var(--s,3.2rem)))}}
@keyframes by{from{transform:translateY(0)}to{transform:translateY(calc(100vh - var(--s,3.2rem)))}}
@keyframes spin{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.mug{--s:2.4rem;opacity:.85}
.mini{--s:3.4rem}
.mini--1{--dx:6.1s;--dy:4.3s;--d:-1.2s}.mini--2{--dx:8.3s;--dy:5.9s;--d:-3.7s}.mini--3{--dx:5.3s;--dy:7.1s;--d:-2.2s}
.mini--4{--dx:9.7s;--dy:4.9s;--d:-6.1s}.mini--5{--dx:7.3s;--dy:6.7s;--d:-4.4s}.mini--6{--dx:6.7s;--dy:3.9s;--d:-0.6s}
.mug--1{--dx:4.7s;--dy:3.3s;--d:-2.9s;--r:1.1s}.mug--2{--dx:7.9s;--dy:4.1s;--d:-5.3s;--r:1.6s}.mug--3{--dx:5.9s;--dy:6.3s;--d:-1.7s;--r:.9s}
.mug--4{--dx:8.9s;--dy:5.1s;--d:-7.2s;--r:1.3s}.mug--5{--dx:4.3s;--dy:7.7s;--d:-3.1s;--r:1.9s}.mug--6{--dx:6.3s;--dy:4.7s;--d:-.3s;--r:1.2s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .opt:hover,.opt:active{transform:none}
  .chaos{display:none}
}
@media print{.cover,.art,.foot,.chaos{display:none}}

/* /admin page (server-rendered, no JS) */
.admin .wrap{max-width:34rem;padding-top:2rem}
.admin-card label{display:block;font-weight:700;margin:.6rem 0 .25rem}
.admin-card input[type=password],.admin-card input[type=number]{font:inherit;padding:.5em .7em;border-radius:10px;border:1px solid var(--edge);background:var(--surface);color:var(--ink);width:100%}
.admin-card input[type=number]{width:6rem}
.admin-card button{font:inherit;cursor:pointer}
.admin-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.4rem 0 .8rem}
.admin-row label{margin:0}
.admin-inline{display:inline-block;margin:0}
.admin-btn{padding:.5em 1em;border-radius:999px;border:1px solid var(--edge);background:var(--brand-soft);color:var(--ink);font-weight:700}
.admin-msg{padding:.5em .8em;border-radius:10px;background:var(--brand-soft);font-weight:700}
.admin h2{font-size:1.05rem;margin:1.1rem 0 .3rem}