/* 280 Studio demo: shared look. Product layer = ink on paper. Markup layer (notes, tour) = blue pencil. */
:root{
  --paper:#F6F6F3; --sheet:#FFFFFF; --ink:#000; --graphite:#3A3C3F; --soft:#686B6E; --smudge:#9A9C9E;
  --rule:#DCDCD7; --bar:#C9CBC6; --blue:#5B93C9; --blue-text:#2F6FA8; --ok:#2E7D4F; --err:#A3341C;
  --strip:#000; --strip-text:#C9CBC6; --veil:rgba(246,246,243,.62); color-scheme:light;
  --display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --pad:clamp(16px,4vw,40px);
}
/* dark mode: soft charcoal, not pure black, so photos and numbers stay easy on the eyes */
:root[data-theme="dark"]{
  --paper:#161718; --sheet:#202224; --ink:#F1F1EC; --graphite:#C9CBC6; --soft:#9EA1A4; --smudge:#7A7D80;
  --rule:#323538; --bar:#4A4E52; --blue:#7EAEDD; --blue-text:#93BFE8; --err:#F09A84;
  --strip:#0A0A0B; --strip-text:#A9ACAF; --veil:rgba(10,10,11,.6); color-scheme:dark;
}
:root[data-theme="dark"] .invert-dark{filter:invert(1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);background:var(--paper);color:var(--graphite);font-size:16px;line-height:1.5}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue-text);outline-offset:2px}
h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:800;line-height:.95;margin:0}
[hidden]{display:none!important}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;background:var(--ink);color:var(--paper);
  border:1.5px solid var(--ink);border-radius:4px;font-weight:700;font-size:16px;text-decoration:none}
.btn.line{background:transparent;color:var(--ink)}
.btn:disabled{opacity:.35;cursor:default}
.textbtn{background:none;border:0;padding:8px 4px;font-weight:600;color:var(--blue-text);text-decoration:underline;text-underline-offset:4px;font-size:15px}

/* demo strip + top bar */
.strip{background:var(--strip);color:var(--strip-text);font-size:13px;padding:7px var(--pad);display:flex;gap:12px;justify-content:space-between;align-items:center}
.strip a{color:#F1F1EC;text-underline-offset:3px;white-space:nowrap}
.topbar{display:flex;align-items:center;gap:10px;padding:10px var(--pad);background:var(--sheet);border-bottom:1px solid var(--rule);position:relative}
.cafe{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none}
.logo-spot{flex:0 0 auto;width:38px;height:38px;border:1.5px dashed var(--blue);border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:var(--blue-text);letter-spacing:.02em}
.cafe b{font-family:var(--display);font-size:24px;font-weight:800;color:var(--ink);white-space:nowrap}
.note{font-style:italic;color:var(--blue-text);font-size:14px;line-height:1.3}
.cafe .note{white-space:nowrap}
.views{display:flex;margin-left:auto;border:1.5px solid var(--ink);border-radius:4px;overflow:hidden;flex:0 0 auto}
.views a{padding:8px 14px;font-weight:700;font-size:14px;text-decoration:none;color:var(--ink)}
.views a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.more{position:relative;flex:0 0 auto}
.more summary{list-style:none;min-width:44px;min-height:40px;display:grid;place-items:center;border:1.5px solid var(--rule);border-radius:4px;font-weight:700;cursor:pointer;color:var(--ink)}
.more summary::-webkit-details-marker{display:none}
.more .menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--sheet);border:1.5px solid var(--ink);border-radius:4px;padding:6px;min-width:190px;z-index:30;display:grid}
.more .menu button,.more .menu a{background:none;border:0;text-align:left;padding:11px 12px;font-weight:600;font-size:15px;text-decoration:none;color:var(--ink);border-radius:3px}
.more .menu button:hover,.more .menu a:hover{background:var(--paper)}
@media(max-width:439px){.topbar .cafe b{display:none}.views a{padding:8px 9px}}
@media(max-width:699px){.cafe .note{display:none}.cafe b{font-size:21px}.views a{padding:8px 10px}.strip .long{display:none}}

/* light / dark switch */
.theme{flex:0 0 auto;width:44px;min-height:40px;display:grid;place-items:center;border:1.5px solid var(--rule);border-radius:4px;background:none;color:var(--ink);padding:0}
.theme svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.theme .sun,:root[data-theme="dark"] .theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:block}

/* toast */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:4px;font-size:15px;z-index:60;max-width:calc(100% - 32px)}

/* ---------- tour (blue pencil) ---------- */
.tour-veil{position:fixed;border-radius:10px;box-shadow:0 0 0 200vmax var(--veil);pointer-events:none;z-index:70;transition:all .25s ease}
.tour-ink{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:71;overflow:visible}
.tour-ink path{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tour-ink .loop{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .55s ease-out forwards}
.tour-ink .arrow{stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .35s .4s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.tour-card{position:fixed;z-index:72;width:min(340px,calc(100vw - 32px));background:var(--sheet);border:1.5px solid var(--ink);border-radius:6px;padding:16px 16px 12px;
  box-shadow:4px 4px 0 var(--blue)}
.tour-card p{margin:0 0 12px;color:var(--ink);font-size:16.5px;line-height:1.45}
.tour-card .row{display:flex;align-items:center;gap:8px}
.tour-card .count{font-size:13px;color:var(--soft);margin-right:auto}
.tour-card .btn{min-height:40px;padding:0 14px;font-size:15px}
.tour-card .skip{background:none;border:0;color:var(--soft);font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:8px 4px}
@media(prefers-reduced-motion:reduce){.tour-ink .loop,.tour-ink .arrow{animation:none;stroke-dashoffset:0}.tour-veil{transition:none}}