/* Project canvas shell. Shared by every page in concepts2/work/.
   Theme comes from window.PROJECT.theme (bg, ink, accent, paper) and is
   written to :root by shell.js; everything else is derived here.
   Fonts: Geist (UI, numbers) and Instrument Serif (titles). No monospace. */

:root{
  --bg:#F2ECE0; --paper:#FFFCF6; --ink:#24212B; --acc:#C67343;
  --sunk:color-mix(in srgb,var(--ink) 6%,var(--paper));
  --sunk2:color-mix(in srgb,var(--ink) 11%,var(--paper));
  --ink2:color-mix(in srgb,var(--ink) 70%,var(--paper));
  --mute:color-mix(in srgb,var(--ink) 46%,var(--paper));
  --faint:color-mix(in srgb,var(--ink) 16%,var(--paper));
  --dot:color-mix(in srgb,var(--ink) 11%,transparent);
  --accs:color-mix(in srgb,var(--acc) 15%,var(--paper));
  --glass:color-mix(in srgb,var(--paper) 94%,transparent);
  --shc:var(--ink);
  --sh1:0 1px 2px color-mix(in srgb,var(--shc) 6%,transparent),0 14px 34px -14px color-mix(in srgb,var(--shc) 18%,transparent);
  --shp:0 1px 2px color-mix(in srgb,var(--shc) 9%,transparent),0 16px 30px -16px color-mix(in srgb,var(--shc) 32%,transparent);
  --shh:0 2px 3px color-mix(in srgb,var(--shc) 9%,transparent),0 26px 40px -18px color-mix(in srgb,var(--shc) 40%,transparent);
  --f:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --ss:1;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:proportional-nums lining-nums}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
ul{list-style:none}
img,video{display:block}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}
.serif{font-family:var(--serif);font-weight:400}
.sh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- viewport and world ---------- */
html.m-canvas,html.m-canvas body{height:100%;overflow:hidden;overscroll-behavior:none}
.vp{position:relative}
.m-canvas .vp{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;background-color:var(--bg)}
/* the dot grid: its own layer, moved by shell.js (applyCam) */
.vp-dots{display:none}
.m-canvas .vp-dots{display:block;position:absolute;left:0;top:0;width:calc(100% + 60px);height:calc(100% + 60px);background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.4px);background-size:24px 24px;will-change:transform;pointer-events:none}
.m-canvas .vp.grabbing{cursor:grabbing}
.world{position:relative}
.m-canvas .world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
/* camera in motion (html.cam-moving, set by shell.js): no hover or hit tests on the
   world, no backdrop blur on the glass UI (it is 94% opaque, the blur is not visible) */
.cam-moving .world{pointer-events:none}
.cam-moving .sh-ui{-webkit-backdrop-filter:none;backdrop-filter:none}
/* animations in boards far off screen are paused */
#world .board.sh-off,#world .board.sh-off *{animation-play-state:paused!important}
.m-canvas .item{position:absolute}
.m-canvas .item.board{width:var(--bw)}
.m-canvas .item.board.fixh{height:var(--bh);overflow:hidden}

/* connectors */
.sh-lines{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.sh-lines path{fill:none;stroke:var(--ink);stroke-opacity:.26;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round}
.sh-lines path.dash{stroke-dasharray:5 6}
.sh-lines circle{fill:var(--ink);fill-opacity:.32}
.sh-lines text{font-family:var(--serif);font-style:italic;fill:var(--ink2)}
.m-list .sh-lines{display:none}

/* ---------- boards ---------- */
.board{background:var(--paper);border-radius:32px;box-shadow:var(--sh1);padding:40px 44px 46px}
.board.bare{background:none;box-shadow:none;padding:0;border-radius:0}
.bh{display:flex;align-items:flex-end;gap:18px;margin-bottom:30px;max-width:100%}
.bh .bn{flex:none;font-family:var(--serif);font-style:italic;font-size:44px;line-height:1;color:var(--acc);padding-bottom:4px}
.bh .bt{flex:1;min-width:0}
.bh h2{font-family:var(--serif);font-weight:400;font-size:56px;line-height:1;letter-spacing:-.01em}
.bh p{font-size:17px;color:var(--ink2);margin-top:8px;line-height:1.4;max-width:900px}
.bh .bc{flex:none;font-size:15px;color:var(--ink2);padding-bottom:6px;text-align:right;white-space:nowrap}
.bh .bc i{display:block;font-style:normal;color:var(--ink);font-weight:500;margin-bottom:2px}
.grid{display:grid;gap:30px 26px;align-items:start}
.fr{display:flex;flex-direction:column;gap:10px;text-align:left;cursor:zoom-in;min-width:0}
.m-canvas .fr{width:var(--fw)}
.m-canvas .vp .fr{cursor:pointer}
.fbox{position:relative;width:100%;border-radius:26px;overflow:hidden;background:var(--sunk);box-shadow:var(--shp);transition:transform .2s,box-shadow .2s}
.fr.slide .fbox,.fr.plain .fbox{border-radius:14px}
.fr.icon .fbox{border-radius:22.37%;background:none}
.fbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s;background-position:50% 50%;background-size:cover;background-repeat:no-repeat}
.fbox img.ld{opacity:1}
.fr.pixel img{image-rendering:pixelated}
.fr:hover .fbox{transform:translateY(-3px);box-shadow:var(--shh)}
.fcap{font-size:14px;line-height:1.3;color:var(--ink2);display:flex;gap:8px}
.fcap i{font-style:normal;color:var(--mute);flex:none}
.fcap span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grow{display:block}
.grow+.grow{margin-top:34px}
.grow>b{display:flex;align-items:baseline;gap:12px;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;margin-bottom:14px}
.grow>b small{font-family:var(--f);font-size:14px;color:var(--mute)}
.grow .grid{gap:26px}

/* single image / video boards */
.fig{position:relative;display:block;width:100%;border-radius:20px;overflow:hidden;background:var(--sunk);box-shadow:var(--shp)}
.fig img,.fig video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fig img{opacity:0;transition:opacity .35s;background-position:50% 50%;background-size:cover;background-repeat:no-repeat}
.fig img.ld{opacity:1}
button.fig{cursor:zoom-in}
.m-canvas .vp button.fig{cursor:pointer}
.fig .vplay{position:absolute;left:18px;bottom:18px;width:52px;height:52px;border-radius:50%;background:var(--glass);box-shadow:var(--sh1);display:grid;place-items:center;color:var(--ink);opacity:0;transition:opacity .2s;pointer-events:none}
.fig.paused .vplay{opacity:1}
.fig .vplay svg{width:20px;height:20px}
.bcap{margin-top:16px;font-size:17px;color:var(--ink2);line-height:1.4;max-width:900px}

/* text board: big type straight on the canvas */
.tb h2{font-family:var(--serif);font-weight:400;font-size:var(--ts,96px);line-height:.98;letter-spacing:-.015em}
.tb h2 em{font-style:italic;color:var(--acc)}
.tb .tbody{margin-top:22px;font-size:var(--tbs,26px);line-height:1.4;color:var(--ink2);max-width:36em}
.tb .tbody p+p{margin-top:.7em}

/* ---------- stickers ---------- */
.stk{--sb:#FBE7A1;--si:#2E2A1E;--sl:#8A6A1F;position:relative;background:var(--sb);color:var(--si);border-radius:6px 6px 16px 6px;padding:calc(20px*var(--ss)) calc(22px*var(--ss)) calc(22px*var(--ss));box-shadow:0 1px 1px rgba(40,30,10,.07),0 22px 34px -20px rgba(40,30,10,.42);font-size:calc(16px*var(--ss));line-height:1.42;transform:rotate(var(--rot,0deg))}
.m-canvas .stk{position:absolute;width:var(--sw);transform:translate(var(--cx,0px),var(--cy,0px)) rotate(var(--rot,0deg)) scale(var(--cs,1))}
.stk.t-yellow{--sb:#FBE7A1;--si:#2E2A1E;--sl:#8A6A1F}
.stk.t-blue{--sb:#D3E2F4;--si:#1E2633;--sl:#41618A}
.stk.t-pink{--sb:#F7D5D6;--si:#32201F;--sl:#9A4B4B}
.stk.t-green{--sb:#D6E8C9;--si:#1F2A1A;--sl:#4F7340}
.stk.t-white{--sb:#FFFDF8;--si:#24212B;--sl:#8B8178}
.stk.t-dark{--sb:#2A2730;--si:#F4EFE6;--sl:#D9B48E}
.stk .sl{display:block;font-family:var(--serif);font-style:italic;font-size:1.3em;line-height:1.1;color:var(--sl);margin-bottom:.35em}
.stk .sbig{display:block;font-family:var(--serif);font-size:3.6em;line-height:.9;letter-spacing:-.02em;margin:.05em 0 .18em}
.stk .sbody p+p{margin-top:.55em}
.stk .sbody a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--si) 30%,transparent);text-underline-offset:.18em}
.stk .sbody a:hover{text-decoration-color:var(--si)}
.stk .sbody small{font-size:.82em;opacity:.72}
.stk.tape::before{content:"";position:absolute;left:50%;top:calc(-12px*var(--ss));width:calc(96px*var(--ss));height:calc(26px*var(--ss));transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,255,.5);border-radius:2px;box-shadow:0 1px 2px rgba(40,30,10,.06)}
.stk.t-dark.tape::before{background:rgba(255,255,255,.18)}
.stk-row{display:flex;flex-wrap:wrap;gap:14px;margin:22px 16px 0}
.m-list .stk{--ss:1;flex:1 1 220px;max-width:100%;transform:rotate(clamp(-2.5deg,calc(var(--rot,0deg)*.7),2.5deg))}
/* stickers sit on the picture above them, like on the canvas, not in a queue */
.m-list .stk-row{position:relative;z-index:2}
.m-list .item.board.k-image+.stk-row,.m-list .item.board.k-video+.stk-row,.m-list .item.board.l-rail+.stk-row{margin-top:-26px}
.m-list .stk-row .stk:nth-child(2n){margin-top:14px}

/* ---------- edge-pinned UI ---------- */
.sh-ui{position:fixed;z-index:70;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--sh1);border-radius:13px}
.sh-back{left:16px;top:14px;display:flex;align-items:center;gap:10px;padding:5px 13px 5px 5px;text-decoration:none;font-size:14px;font-weight:500}
.sh-back .lk{flex:none;width:30px;height:30px;border-radius:8px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:11.5px;font-weight:600;letter-spacing:.02em}
.sh-back span+span{color:var(--ink2)}
.sh-back:hover span+span{color:var(--ink)}
.sh-groups{right:16px;top:14px;display:flex;gap:2px;padding:4px}
.sh-groups button{height:32px;padding:0 13px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink2);transition:background .2s,color .2s;white-space:nowrap}
.sh-groups button:hover{background:var(--sunk);color:var(--ink)}
.sh-groups button.on{background:var(--accs);color:var(--acc)}
.sh-short{display:none}
.sh-proj{display:none}
.sh-edge{top:50%;margin-top:-23px;min-height:46px;display:flex;align-items:center;gap:0;padding:7px 14px;text-decoration:none;font-size:14px;font-weight:500;color:var(--ink2);transition:color .2s}
.sh-edge.prev{left:16px}
.sh-edge.next{right:16px;flex-direction:row-reverse}
.sh-edge .ar{font-size:18px;line-height:1;flex:none}
.sh-edge .lbl{display:block;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s ease,margin .3s ease}
.sh-edge .lbl small{display:block;font-size:11.5px;font-weight:400;color:var(--mute);line-height:1.2}
.sh-edge .lbl b{display:block;font-weight:500;color:var(--ink);line-height:1.25}
.sh-edge:hover,.sh-edge:focus-visible{color:var(--ink)}
.sh-edge:hover .lbl,.sh-edge:focus-visible .lbl{max-width:260px;margin:0 2px 0 10px}
.sh-edge.next:hover .lbl,.sh-edge.next:focus-visible .lbl{margin:0 10px 0 2px;text-align:right}
.sh-hint{position:fixed;z-index:60;left:50%;top:16px;transform:translateX(-50%);padding:8px 14px;border-radius:11px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:13px;color:var(--ink2);pointer-events:none;transition:opacity .4s;white-space:nowrap}
.sh-hint.off{opacity:0}
@media (max-width:1240px){.sh-hint{display:none}}

/* dock + minimap */
.dock{left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:5px;border-radius:14px;max-width:calc(100vw - 470px)}
.dock button{flex:none;height:34px;min-width:34px;padding:0 11px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .2s,color .2s;white-space:nowrap}
.dock button:hover{background:var(--sunk);color:var(--ink)}
.dock button.on{color:var(--acc);background:var(--accs)}
.dock button.ic{padding:0}
.dock button.pri{background:var(--ink);color:var(--paper)}
.dock button.pri:hover{background:color-mix(in srgb,var(--ink) 86%,var(--paper))}
.dock svg{width:16px;height:16px}
.dock .sep{flex:none;width:1px;height:18px;background:var(--sunk2);margin:0 4px}
.dock .zp{flex:none;font-size:12.5px;min-width:46px;text-align:center;color:var(--ink2)}
.dock .dico{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center}
.chips{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);padding:0 8px}
.chips::-webkit-scrollbar{display:none}
.mm{right:16px;bottom:16px;padding:7px;border-radius:12px;cursor:pointer;touch-action:none}
.mm-in{position:relative;overflow:hidden;border-radius:6px;background:var(--sunk)}
.mm-in i{position:absolute;border-radius:1.5px;background:var(--sunk2)}
.mm-in i.bare{background:var(--faint);border-radius:50%}
.mm-in i.s{background:var(--acc);opacity:.45;border-radius:1px}
.mm-in i.on{background:var(--acc);opacity:1}
.mm-in b{position:absolute;border-radius:3px;background:color-mix(in srgb,var(--acc) 10%,transparent);box-shadow:inset 0 0 0 1px var(--acc);pointer-events:none}
@media (max-width:1180px){.mm{display:none}.dock{max-width:calc(100vw - 160px)}.dock .dl2{display:none}}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;padding:28px 28px 28px 40px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lb[hidden]{display:none}
.lb-img{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.lb-img img{max-width:100%;max-height:calc(100vh - 56px);width:auto;height:auto;border-radius:28px;box-shadow:var(--shp);background:var(--sunk)}
.lb-img img.slide,.lb-img img.plain{border-radius:16px}
.lb-img img.icon{border-radius:22.37%;width:min(60vh,520px)}
.lb-img img.pixel{image-rendering:pixelated}
.lb-side{align-self:center;background:var(--paper);border-radius:20px;box-shadow:var(--sh1);padding:22px 22px 18px}
.lb-side small{display:block;font-size:13px;font-weight:500;color:var(--acc)}
.lb-side h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05;margin-top:8px}
.lb-side .ua{font-size:16px;font-weight:500;margin-top:12px}
.lb-side p{font-size:14px;color:var(--ink2);margin-top:8px;line-height:1.45}
.lb-nav{display:flex;align-items:center;gap:6px;margin-top:18px}
.lb-nav button{height:36px;min-width:36px;padding:0 12px;border-radius:10px;background:var(--sunk);font-size:15px;font-weight:500;display:inline-flex;align-items:center;justify-content:center}
.lb-nav button:hover{background:var(--sunk2)}
.lb-nav .pos{flex:1;text-align:center;font-size:13px;color:var(--ink2)}
.lb-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:12px;background:var(--paper);box-shadow:var(--sh1);font-size:22px;line-height:1;display:grid;place-items:center}

/* ---------- project picker ---------- */
.pk{position:fixed;inset:0;z-index:210;display:flex;align-items:flex-start;justify-content:center;padding:76px 24px 24px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow-y:auto;overscroll-behavior:contain}
.pk[hidden]{display:none}
.pk-p:focus{outline:none}
.pk-p{position:relative;width:min(1040px,100%);background:var(--paper);border-radius:24px;box-shadow:var(--sh1);padding:26px 28px 30px}
.pk-h{display:flex;align-items:baseline;gap:22px;margin:0 52px 20px 0;flex-wrap:wrap}
.pk-h button{font-family:var(--serif);font-size:40px;line-height:1;color:var(--mute);transition:color .2s;padding:0}
.pk-h button:hover{color:var(--ink2)}
.pk-h button.on{color:var(--ink)}
.pk-x{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:12px;background:var(--sunk);font-size:22px;line-height:1;display:grid;place-items:center}
.pk-x:hover{background:var(--sunk2)}
.pk-s+.pk-s{margin-top:26px}
.pk-s h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;color:var(--ink2);margin-bottom:12px}
.pk-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px 18px}
.pk-c{display:flex;flex-direction:column;gap:9px;text-decoration:none;min-width:0}
.pk-t{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--sunk);box-shadow:var(--shp);transition:transform .2s,box-shadow .2s}
.pk-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pk-t .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:44px;color:var(--mute)}
.pk-c:hover .pk-t{transform:translateY(-3px);box-shadow:var(--shh)}
.pk-c b{font-weight:500;font-size:15px;line-height:1.25}
.pk-c span{font-size:13px;color:var(--ink2);line-height:1.35}
.pk-c.cur .pk-t{box-shadow:0 0 0 3px var(--acc),var(--shp)}
.pk-c.cur b::after{content:"  · here";color:var(--acc);font-weight:400}

/* ---------- list mode (phones, small tablets) ---------- */
.sh-jump{display:none}
.sh-foot{display:none}
html.m-list,.m-list body{overflow-x:clip}
.m-list body{overflow-x:hidden}
.m-list .dock,.m-list .mm,.m-list .sh-hint{display:none!important}
.m-list .sh-edge{display:none!important}
.m-list .sh-back{left:0;right:0;top:0;border-radius:0;padding:6px 16px;box-shadow:0 1px 0 var(--sunk2);height:56px;z-index:72}
.m-list .sh-groups{top:6px;right:10px;padding:2px;box-shadow:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:73}
.m-list .sh-groups button{height:44px;padding:0 16px;background:var(--sunk);font-size:14px}
.m-list .sh-groups button[data-group]:not(.sh-proj){display:none}
.m-list .sh-groups .sh-proj{display:inline-flex;align-items:center;gap:8px}
.m-list .sh-groups .sh-proj::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.m-list .sh-long{display:none}
.m-list .sh-short{display:inline}
.m-list body{padding-top:56px}
.m-list .world{padding:0 0 110px}
.m-list .item{position:relative}
.m-list .item.board{margin:52px 16px 0;scroll-margin-top:124px}
.m-list .sh-lines+.item.board{margin-top:18px}
.m-list .board{padding:22px 16px 24px;border-radius:22px}
.m-list .board.bare{padding:0}
.m-list .bh{flex-wrap:wrap;gap:4px 10px;margin-bottom:18px}
.m-list .bh .bn{padding-bottom:0;font-size:26px;order:-1}
.m-list .bh .bt{flex-basis:100%;order:1}
.m-list .bh h2{font-size:32px}
.m-list .bh p{font-size:14px}
.m-list .bh .bc{order:0;margin-left:auto;padding:0;font-size:12.5px;align-self:center}
.m-list .bh .bc i{display:inline;margin-right:8px}
.m-list .grid{grid-template-columns:repeat(var(--lc,2),minmax(0,1fr))!important;gap:18px 12px}
.m-list .grow .grid{gap:8px}
.m-list .grow+.grow{margin-top:24px}
.m-list .grow>b{font-size:24px;margin-bottom:10px}
.m-list .fr{width:auto}
.m-list .fbox{border-radius:16px}
.m-list .fr.slide .fbox,.m-list .fr.plain .fbox{border-radius:10px}
.m-list .fcap{font-size:12px}
.m-list .fig{border-radius:14px}
.m-list .bcap{font-size:14px}
.m-list .tb h2{font-size:clamp(34px,10vw,52px)}
.m-list .tb .tbody{font-size:16px;margin-top:12px}
.m-list .canvas-only{display:none!important}
.m-list .sh-jump{display:flex;position:sticky;top:56px;z-index:50;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px 16px;transition:transform .28s ease;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sh-jump::-webkit-scrollbar{display:none}
.m-list.jump-off .sh-jump{transform:translateY(-110%)}
.sh-jump a{flex:none;min-height:44px;display:inline-flex;align-items:center;font-size:14px;font-weight:500;padding:0 14px;border-radius:11px;background:var(--paper);text-decoration:none;color:var(--ink2);box-shadow:var(--sh1)}
.m-list .sh-edge{top:auto;bottom:14px;margin-top:0;min-height:44px;width:44px;padding:0;justify-content:center}
.m-list .sh-edge .lbl{display:none}
/* list vocabulary: rail (swipe gallery), bleed (edge to edge picture), see all */
.l-more{display:none}
.m-list .l-rail .grid{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:0 -16px;padding:4px 16px 14px;scrollbar-width:none;align-items:flex-start}
.m-list .l-rail.bare .grid{margin:0 -16px}
.m-list .board:not(.bare).l-rail .grid{margin:0 -16px;padding-left:16px;padding-right:16px}
.m-list .l-rail .grid::-webkit-scrollbar{display:none}
.m-list .l-rail .fr{flex:0 0 72%;scroll-snap-align:start}
.m-list .l-rail .fr.r-w{flex-basis:84%}
.m-list .l-rail .fr.r-t{flex-basis:56%}
.m-list .l-rail .fr:nth-child(n+13){display:none}
.m-list .l-rail .l-more{display:flex;flex:0 0 40%;align-self:stretch;min-height:160px;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:16px;background:var(--sunk);color:var(--ink);scroll-snap-align:start}
.m-list .l-more b{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1}
.m-list .l-more span{font-size:14px;font-weight:500;color:var(--ink2)}
.m-list .l-rail .grow .grid{gap:10px!important}
.m-list .item.board.l-bleed{margin-left:0;margin-right:0}
.m-list .l-bleed .fig{border-radius:0;box-shadow:none}
.m-list .l-bleed .bh,.m-list .l-bleed .bcap{padding:0 16px}
.m-list .sh-foot{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:64px 16px 0}
.sh-foot a{display:block;padding:16px;border-radius:18px;background:var(--paper);box-shadow:var(--sh1);text-decoration:none;min-width:0}
.sh-foot a small{display:block;font-size:12.5px;color:var(--ink2)}
.sh-foot a b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.1;margin-top:4px;overflow-wrap:anywhere}
.sh-foot a.next{text-align:right}
@media (max-width:899px){
  .lb{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:56px 12px 12px;gap:12px}
  .lb-img img{max-height:calc(100vh - 290px);border-radius:18px}
  .lb-side{padding:14px 16px 12px}
  .lb-side h3{font-size:24px}
  .lb-side p{font-size:13px}
  .lb-x{top:10px;right:12px}
  .pk{padding:12px}
  .pk-p{padding:20px 16px 22px;border-radius:20px}
  .pk-h{gap:14px;margin-right:46px}
  .pk-h button{font-size:28px}
  .pk-x{top:12px;right:12px;width:44px;height:44px}
  .lb-nav button{height:44px;min-width:44px}
  .lb-x{width:44px;height:44px}
  .pk-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
}
@media (prefers-reduced-motion:reduce){
  .fbox,.fbox img,.fig img,.fig .vplay,.sh-edge .lbl,.sh-hint,.pk-t,.sh-groups button,.sh-jump{transition:none}
  .fr:hover .fbox,.pk-c:hover .pk-t{transform:none}
}