
:root{
  --paper:#ffffff; --ink:#111111; --muted:#58524f; --line:#e6e0dc; --card:#ffffff;
  --red:#d7261e; --red-ink:#ffffff; --btn:#111111; --btn-ink:#ffffff; --chip-on:#d7261e;
  --c-kitchen:#1d4e89; --c-tea:#2e7d4f; --c-pen:#a87400; --c-home:#c23a76; --c-tech:#6a4c93; --c-watch:#0e6b6b;
  --tile-ink:#ffffff;
  --font-display:"Zen Antique","Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif JP","MS Mincho",serif;
  --font-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#121212; --ink:#f3efec; --muted:#a8a29e; --line:#2c2827; --card:#1a1817;
  --red:#e0463e; --btn:#f3efec; --btn-ink:#121212; --chip-on:#e0463e;
  --c-kitchen:#4f86c6; --c-tea:#6cc08b; --c-pen:#e8b730; --c-home:#e47aa6; --c-tech:#9b80c4; --c-watch:#5fc4c4; --tile-ink:#121212; color-scheme:dark;}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.55}
a{color:inherit}
.wrap{max-width:1040px;margin-inline:auto;padding-inline:20px}
.mast{background:var(--red);color:var(--red-ink);overflow:hidden}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding-block:14px}
.logo{font-weight:900;letter-spacing:.22em;font-size:14px;text-decoration:none}
.top a.contact{font-size:14px;font-weight:700;text-decoration:none;opacity:.95}
.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 36px;padding-block:8px 34px}
.hero-text{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:12px}
h1{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,5.6vw,54px);line-height:1.1;margin:0;text-wrap:balance}
.hero p{margin:0;max-width:52ch}
.scene{flex:0 1 420px;max-width:100%;width:420px;border-radius:10px;overflow:hidden;border:4px solid #fff;background:#dfe8f0}
.scene svg{display:block;width:100%;height:auto}
.banner-icon{flex:none;border:4px solid #fff;border-radius:10px;padding:14px;color:#fff;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='white' stroke-opacity='.22' stroke-width='1.6'%3E%3Ccircle cx='0' cy='24' r='22'/%3E%3Ccircle cx='0' cy='24' r='15'/%3E%3Ccircle cx='0' cy='24' r='8'/%3E%3Ccircle cx='48' cy='24' r='22'/%3E%3Ccircle cx='48' cy='24' r='15'/%3E%3Ccircle cx='48' cy='24' r='8'/%3E%3Ccircle cx='24' cy='12' r='22'/%3E%3Ccircle cx='24' cy='12' r='15'/%3E%3Ccircle cx='24' cy='12' r='8'/%3E%3C/g%3E%3C/svg%3E")}
.bar{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:5}
.bar nav{display:flex;flex-wrap:wrap;gap:8px;padding-block:10px}
.chip{font:inherit;font-weight:700;font-size:15px;text-decoration:none;color:var(--ink);padding:6px 14px;border:2px solid var(--ink);border-radius:999px;display:inline-block}
.chip:hover{border-color:var(--red)}
.chip:focus-visible,.go:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.chip[aria-current="page"]{background:var(--chip-on);border-color:var(--chip-on);color:#fff}
main.wrap{padding-block:26px 60px;display:flex;flex-direction:column;gap:30px}
.lede{max-width:70ch;margin:0;color:var(--muted)}
.heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.heading h2{font-family:var(--font-display);font-weight:400;font-size:clamp(25px,4vw,36px);margin:0}
.heading a{font-weight:700;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;list-style:none;margin:0;padding:0}
.card{background:var(--card);border:2px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;min-width:0;height:100%}
.tile{background-color:var(--tint);background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='white' stroke-opacity='.22' stroke-width='1.6'%3E%3Ccircle cx='0' cy='24' r='22'/%3E%3Ccircle cx='0' cy='24' r='15'/%3E%3Ccircle cx='0' cy='24' r='8'/%3E%3Ccircle cx='48' cy='24' r='22'/%3E%3Ccircle cx='48' cy='24' r='15'/%3E%3Ccircle cx='48' cy='24' r='8'/%3E%3Ccircle cx='24' cy='12' r='22'/%3E%3Ccircle cx='24' cy='12' r='15'/%3E%3Ccircle cx='24' cy='12' r='8'/%3E%3C/g%3E%3C/svg%3E");color:var(--tile-ink);display:flex;align-items:center;justify-content:space-between;padding:16px;gap:12px}
.tile svg{flex:none}
.tag{font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:right}
.body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.name{font-weight:900;font-size:18px;line-height:1.25;margin:0}
.why{margin:0;color:var(--muted);font-size:15.5px}
.pick{margin:0;font-size:15px}.pick b{font-weight:900}
.proof{font-size:13.5px;font-weight:700;color:var(--tint);margin-top:auto;padding-top:2px}
.go{align-self:flex-start;background:var(--btn);color:var(--btn-ink);text-decoration:none;font-weight:700;font-size:15px;padding:9px 16px;border-radius:999px;margin-top:6px}
.go:hover{opacity:.85}
.xmas{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;padding:2px 8px;border-radius:999px;align-self:flex-start}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.note{border:2px solid var(--ink);border-radius:6px;padding:12px 14px;font-size:15px;min-width:0}
.note b{display:block;font-weight:900;margin-bottom:2px}
.prose{max-width:70ch;display:flex;flex-direction:column;gap:14px}
.prose h2{font-family:var(--font-display);font-weight:400;margin:10px 0 0;font-size:28px}
.prose p,.prose ul{margin:0}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;list-style:none;margin:0 0 20px;padding:0}
.vid{display:flex;flex-direction:column;gap:6px;min-width:0}
.vplay{position:relative;padding:0;border:2px solid var(--line);border-radius:8px;overflow:hidden;background:#000;cursor:pointer;aspect-ratio:4/3;display:block;width:100%}
.vplay img{width:100%;height:100%;object-fit:cover;display:block}
.tri{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:rgba(215,38,30,.92)}
.tri:after{content:"";position:absolute;left:22px;top:16px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.vframe{width:100%;aspect-ratio:4/3;border:0;border-radius:8px}
.vt{font-weight:700}
.vby{color:var(--muted);font-size:14px}
.vplay:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.vbtn{font:inherit;font-weight:700;font-size:14px;padding:8px 14px;margin-top:6px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.vbtn:hover{background:var(--ink);color:var(--bg)}
.vbtn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.vwrap{padding:0 14px 14px}
.vwrap .vframe{aspect-ratio:16/9}
.vmodal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.vbox{width:min(900px,100%);display:flex;flex-direction:column;gap:8px}
.vbox iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:8px;background:#000}
.vclose{align-self:flex-end;font:inherit;font-weight:700;padding:8px 16px;border-radius:999px;border:0;background:#fff;color:#111;cursor:pointer}
.vnote{color:#ddd;font-size:14px}
.vstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.vthumb{position:relative;display:block;width:100%;padding:0;border:2px solid var(--line);border-radius:8px;overflow:hidden;background:#000;cursor:pointer;aspect-ratio:4/3;margin:0}
.vthumb:hover{background:#000;color:#fff}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vthumb .tri{width:48px;height:48px}
.vthumb .tri:after{left:18px;top:12px}
.vcap{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;color:#fff;font-weight:700;font-size:14px;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.vtile{position:relative;display:block;width:100%;padding:0;margin:0;border:0;border-radius:0;background:#000;cursor:pointer;aspect-ratio:16/9;overflow:hidden}
.vtile:hover{background:#000;color:#fff}
.vtile img{width:100%;height:100%;object-fit:cover;display:block}
.vtile .tri{width:52px;height:52px}
.vtile .tri:after{left:20px;top:14px}
.vtile .vcap{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;color:#fff;font-weight:700;font-size:14px;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.vtile:focus-visible{outline:3px solid #fff;outline-offset:-5px}
footer{border-top:1px solid var(--line);padding-block:20px 40px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-direction:column;gap:10px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 16px}
