/* Ten Sushi · dish art (shared by the gallery and, later, the hero game) and the gallery page. Tokens come from site.css. */

/* ---------- the drawings: outline weight is in screen pixels, so it stays put at any size ---------- */
.dish{ display:block; width:100%; height:auto; overflow:visible; --ow:3px; }
.dish .o,.dish .o2,.dish .d,.dish .d2,.dish .d3,.dish .d4{ vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.dish .o{ stroke:#131211; stroke-width:var(--ow); }
.dish .o2{ stroke:#131211; stroke-width:calc(var(--ow) * .6); }
.dish .d{ stroke-width:calc(var(--ow) * .5); }
.dish .d2{ stroke-width:calc(var(--ow) * .8); }
.dish .d3{ stroke-width:calc(var(--ow) * 1.2); }
.dish .d4{ stroke-width:calc(var(--ow) * 1.8); }
.dish .perfect{ opacity:0; transform-origin:50% 50%; }
.show-perfect .dish .perfect{ opacity:1; }
.dish .steam{ transform-box:fill-box; transform-origin:50% 100%; }
@media (prefers-reduced-motion:no-preference){
  .dish .steam{ animation:dsteam 3.2s ease-in-out infinite; animation-delay:calc(var(--i,0) * -1.1s); }
  .show-perfect .dish .perfect{ animation:dperfect .5s cubic-bezier(.3,1.6,.5,1); }
}
@keyframes dsteam{ 0%{ opacity:0; translate:0 6px; } 25%{ opacity:.95; } 100%{ opacity:0; translate:3px -14px; } }
@keyframes dperfect{ from{ opacity:0; scale:1.6; } to{ opacity:1; scale:1; } }

/* ---------- the gallery page ---------- */
.dg{ --card:290px; --ow:3px; }
.dg-bar{ position:sticky; top:0; z-index:20; background:var(--sumi); color:var(--shiro); border-bottom:3px solid var(--sumi); }
.dg-bar .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; padding-top:10px; padding-bottom:10px; }
.dg-bar b{ font:900 13px/1 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--yamabuki); }
.dg-bar label{ display:flex; align-items:center; gap:8px; font:700 12px/1 var(--f-sans); letter-spacing:.06em; }
.dg-bar select,.dg-bar button{ font:700 12px/1 var(--f-sans); padding:7px 10px; border:2px solid var(--shiro); background:var(--sumi); color:var(--shiro); border-radius:2px; cursor:pointer; }
.dg-bar button[aria-pressed="true"]{ background:var(--yamabuki); color:var(--sumi); border-color:var(--yamabuki); }
.dg-bar input[type=range]{ width:120px; accent-color:var(--yamabuki); }
.dg-hero{ padding:36px 0 14px; }
.dg-hero h1{ margin:0; font:400 clamp(34px,6vw,64px)/1.05 var(--f-marquee); color:var(--beni); letter-spacing:-.01em; }
.dg-hero h1 small{ display:block; margin-top:10px; font:900 14px/1.4 var(--f-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--sumi); }
.dg-hero p{ max-width:68ch; margin:14px 0 0; font-size:16px; }
.dg-note{ margin-top:14px; padding:10px 14px; border:3px solid var(--sumi); background:var(--yamabuki); font:700 13px/1.5 var(--f-sans); max-width:68ch; }
.dg-fam{ padding:26px 0 8px; }
.dg-fam h2{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:0 0 14px; font:400 clamp(24px,3.4vw,34px)/1.1 var(--f-marquee); }
.dg-fam h2 span{ font:800 clamp(16px,2vw,20px)/1 var(--f-mincho); color:var(--beni); }
.dg-fam h2 em{ font:400 13px/1 var(--f-dot); font-style:normal; color:var(--sumi-usu); letter-spacing:.06em; }
.dg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--card),1fr)); gap:24px; }
.dg-card{ margin:0; background:var(--shiro); border:3px solid var(--sumi); box-shadow:5px 5px 0 var(--sumi); padding:10px 10px 14px; transition:background .2s; }
.dg-art{ position:relative; padding:2px 6px 0; }
.dg-fx{ position:absolute; inset:0; pointer-events:none; opacity:0; }
.show-perfect .dg-fx{ opacity:1; }
.dg-fx .hanko{ position:absolute; top:4px; right:6px; width:52px; height:52px; border:3.5px solid var(--beni); border-radius:50%; background:var(--shiro); color:var(--beni); font:800 28px/45px var(--f-mincho); text-align:center; rotate:-10deg; box-shadow:0 0 0 2px var(--shiro), inset 0 0 0 2px var(--shiro), inset 0 0 0 3.5px var(--beni); }
.dg-fx .st{ position:absolute; width:22px; height:22px; fill:var(--yamabuki); stroke:var(--sumi); stroke-width:2; stroke-linejoin:round; }
.dg-fx .s1{ left:10px; top:14px; } .dg-fx .s2{ right:70px; top:48px; width:15px; height:15px; } .dg-fx .s3{ left:6px; top:62px; width:12px; height:12px; }
@media (prefers-reduced-motion:no-preference){ .show-perfect .dg-fx .hanko{ animation:dperfect .5s cubic-bezier(.3,1.6,.5,1); } .show-perfect .dg-fx .st{ animation:dtwinkle 1.6s ease-in-out infinite; } .show-perfect .dg-fx .s2{ animation-delay:-.5s; } .show-perfect .dg-fx .s3{ animation-delay:-1s; } }
@keyframes dtwinkle{ 0%,100%{ scale:1; } 50%{ scale:1.3; } }
.dg-card h3{ margin:4px 4px 0; font:900 18px/1.25 var(--f-sans); }
.dg-card .jp{ margin:2px 4px 0; font:800 14px/1.3 var(--f-mincho); color:var(--beni); }
.dg-card .meta{ margin:8px 4px 0; font:400 12.5px/1.4 var(--f-dot); letter-spacing:.04em; color:var(--sumi-usu); }
.dg-card .tag{ display:inline-block; padding:2px 7px; background:var(--sumi); color:var(--shiro); font:900 11px/1.5 var(--f-sans); letter-spacing:.12em; text-transform:uppercase; margin-right:8px; }
.dg-tiny{ padding:22px 0 8px; }
.dg-tiny h2{ margin:0 0 10px; font:900 13px/1 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--sumi-usu); }
.dg-strip{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; padding:14px; background:var(--kinari); border:3px solid var(--sumi); }
.dg-strip .ic{ flex:none; }
.dg-strip .ic .dish{ --ow:var(--icow); }
.dg-tanzaku{ display:flex; flex-wrap:wrap; gap:10px; padding:14px; background:var(--sumi); border:3px solid var(--sumi); }
.dg-tanzaku .tz{ display:flex; align-items:center; gap:8px; background:var(--shiro); border:3px solid var(--sumi); box-shadow:3px 3px 0 var(--beni); padding:6px 10px 6px 6px; font:900 13px/1.2 var(--f-sans); }
.dg-tanzaku .tz .ic{ width:34px; flex:none; }
.dg-tanzaku .tz .dish{ --ow:1.8px; }
.dg-spread{ position:relative; padding:20px 14px 10px; margin-top:6px; background:var(--hinoki); border:3px solid var(--sumi); box-shadow:5px 5px 0 var(--sumi); }
.dg-spread::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(106,68,38,.18) 0 2px, transparent 2px 46px); pointer-events:none; }
.dg-spread .row{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:0 6px; }
.dg-spread .it{ width:calc(20% + 16px); margin:0 -8px -14px; }   /* five across, five rows: 25 dishes make a square feast */
.dg-spread .it .dish{ --ow:2.2px; }
.dg-foot{ padding:30px 0 70px; font:400 13px/1.6 var(--f-dot); color:var(--sumi-usu); }
.dg[data-bg="kinari"] .dg-card{ background:var(--kinari); }
.dg[data-bg="sumi"] .dg-card{ background:#2B2826; border-color:#2B2826; box-shadow:5px 5px 0 var(--beni); color:var(--shiro); }
.dg[data-bg="sumi"] .dg-card .jp{ color:var(--yamabuki); } .dg[data-bg="sumi"] .dg-card .meta{ color:var(--nezumi); }
.dg[data-bg="hinoki"] .dg-card{ background:var(--hinoki); }
.dg[data-bg="red"] .dg-card{ background:var(--shu); } .dg[data-bg="red"] .dg-card h3,.dg[data-bg="red"] .dg-card .jp,.dg[data-bg="red"] .dg-card .meta{ color:var(--shiro); }