/* shell.css — the side menu, the phone bar, the strip and the footer that frame.js draws on every page.
   Built from the deadlock site's shell (2026-10-14 overhaul), every class renamed ys-* so no page's own
   styles can reach it. Its colours and fonts are pinned on the chrome itself. */
.ys-side,.ys-top,.ys-back,.ys-foot,.ys-strip{--side:#0c0a0e;--panel:#0f0d12;--panel2:#15121a;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);--fg:#e2ddd6;--dim:#a89c91;--mute:rgba(226,221,214,.45);--accent:#E0A45E;--accent-ink:#1a1006;--green:var(--accent);--green-ink:var(--accent-ink);--display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--body:"Space Grotesk","Barlow Semi Condensed","Segoe UI",system-ui,sans-serif;--noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");color:var(--fg);font-family:"Space Grotesk","Segoe UI",system-ui,sans-serif;box-sizing:border-box}
.ys-side *,.ys-top *,.ys-foot *{box-sizing:border-box}
.ys-side a,.ys-top a,.ys-foot a{color:inherit;text-decoration:none;border-bottom:0}
.ys-side button,.ys-top button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;padding:0}
.ys-side{position:fixed;top:0;bottom:0;left:0;width:272px;background:var(--side) var(--noise);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:40;transition:width .18s,transform .2s}
.ys-side .ys-hd{display:flex;align-items:center;gap:10px;padding:18px 16px 8px}
.ys-side .ys-brand{display:flex;align-items:center;gap:10px;min-width:0}
.ys-side .ys-mark{width:36px;height:36px;flex:none;object-fit:contain}
.ys-side .ys-t b{font-family:"Limelight",var(--display);font-weight:400;font-size:19px;letter-spacing:.04em;text-transform:lowercase;line-height:1;display:block}
.ys-side .ys-t small{display:inline-block;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;margin-top:4px;background:var(--green);color:var(--green-ink);padding:2px 6px 1px;border-radius:2px}
.ys-side .ys-col{margin-left:auto;width:26px;height:26px;border:1px solid var(--line2);border-radius:6px;display:grid;place-items:center;color:var(--dim);font-size:15px;flex:none}
.ys-side .ys-sq{margin:8px 14px 6px;height:38px;border:1px solid var(--line2);border-radius:8px;background:rgba(255,255,255,.03);display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--mute)}
.ys-side .ys-sq svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.ys-side .ys-sq input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);font:inherit;font-size:13.5px}
.ys-side .ys-sq input::placeholder{color:var(--mute)}
.ys-side nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 10px 10px;scrollbar-width:thin}
.ys-side .ys-lab{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding:16px 10px 6px;white-space:nowrap}
.ys-side .ys-it{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;color:var(--dim);font-weight:600;font-size:14.5px;white-space:nowrap}
.ys-side .ys-it svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ys-side .ys-it .ys-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ys-side .ys-it .ys-ch{font-size:11px;color:var(--mute)}
.ys-side .ys-it:hover{color:var(--fg);background:rgba(255,255,255,.04)}
.ys-side .ys-it.on{color:var(--fg);background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:inset 3px 0 0 var(--green)}
.ys-side .ys-it.live{color:var(--fg)}
.ys-side .ys-sub{padding:2px 0 6px 40px}
.ys-side .ys-sub a{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:13.5px;color:var(--dim);border-radius:6px;white-space:nowrap}
.ys-side .ys-sub a:hover{color:var(--fg)}
.ys-side .ys-sub a.live{color:var(--fg)}
.ys-side .ys-bot{padding:12px 14px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.ys-side .ys-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:8px;font-family:var(--display);font-weight:800;font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;padding:0 10px;white-space:nowrap}
.ys-side .ys-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;flex:none}
.ys-side .ys-btn.ys-g{background:var(--green);color:var(--green-ink)}
.ys-side .ys-btn.ys-o{background:none;border:1px solid var(--line2);color:var(--dim)}
.ys-side .ys-btn.ys-me{color:var(--green);border-color:var(--green)}
.ys-main{margin-left:272px;padding:34px 28px 60px;max-width:1360px;transition:margin-left .18s}
.ys-top,.ys-back{display:none}
html.ys-rail .ys-side{width:56px}
html.ys-rail .ys-side .ys-t,html.ys-rail .ys-side .ys-sq,html.ys-rail .ys-side .ys-lab,html.ys-rail .ys-side .ys-it .ys-l,html.ys-rail .ys-side .ys-it .ys-ch,html.ys-rail .ys-side .ys-sub,html.ys-rail .ys-side .ys-btn .ys-l,html.ys-rail .ys-side .ys-soon{display:none}
html.ys-rail .ys-side .ys-hd{justify-content:center;padding-inline:0;flex-wrap:wrap;gap:8px}
html.ys-rail .ys-side .ys-col{margin:0}
html.ys-rail .ys-side .ys-it{justify-content:center;padding:11px 0}
html.ys-rail .ys-side .ys-btn{padding:0;width:42px;margin:0 auto}
html.ys-rail .ys-main{margin-left:56px}
.ys-top .ys-brand small{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;background:var(--green);color:var(--green-ink);padding:2px 5px 1px;border-radius:2px;margin-left:2px}
@media (max-width:1240px){
  .ys-side{width:56px}
  .ys-side .ys-t,.ys-side .ys-sq,.ys-side .ys-lab,.ys-side .ys-it .ys-l,.ys-side .ys-it .ys-ch,.ys-side .ys-sub,.ys-side .ys-btn .ys-l,.ys-side .ys-soon,.ys-side .ys-col{display:none}
  .ys-side .ys-hd{justify-content:center;padding-inline:0}
  .ys-side .ys-it{justify-content:center;padding:11px 0}
  .ys-side .ys-btn{padding:0;width:42px;margin:0 auto}
  .ys-main{margin-left:56px;padding-inline:20px}
}
@media (max-width:900px){
  .ys-side{transform:translateX(-100%);width:272px}
  .ys-side .ys-t,.ys-side .ys-sq,.ys-side .ys-lab,.ys-side .ys-it .ys-l,.ys-side .ys-it .ys-ch,.ys-side .ys-sub,.ys-side .ys-btn .ys-l,.ys-side .ys-soon{display:revert} .ys-side .ys-sub[hidden]{display:none}
  .ys-side .ys-hd{justify-content:flex-start;padding-inline:16px}
  .ys-side .ys-it{justify-content:flex-start;padding:9px 10px}
  .ys-side .ys-btn{padding:0 10px;width:auto;margin:0}
  html.ys-drawer .ys-side{transform:none}
  .ys-main{margin-left:0;padding:66px 16px 50px}
  .ys-top{display:flex;position:fixed;top:0;left:0;right:0;height:52px;align-items:center;gap:10px;padding:0 12px;background:var(--side);border-bottom:1px solid var(--line);z-index:30}
  .ys-top .ys-burger{width:40px;height:40px;display:grid;place-items:center;color:var(--fg)}
  .ys-top .ys-burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
  .ys-top .ys-brand{display:flex;align-items:center;gap:8px;font-family:"Limelight",var(--display);font-weight:400;font-size:18px;text-transform:lowercase}
  .ys-top .ys-mark{width:28px;height:28px;object-fit:contain}
  html.ys-drawer .ys-back{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:35}
}
html.ys-rail .ys-side .ys-hd{padding:14px 0 6px}
html.ys-rail .ys-side .ys-mark{width:30px;height:30px}
html.ys-rail .ys-side .ys-col{width:22px;height:22px;font-size:13px}
html.ys-rail .ys-side nav{padding:10px 8px;overflow:visible}
html.ys-rail .ys-side .ys-it{padding:10px 0;border-radius:6px}
html.ys-rail .ys-side .ys-it.on{box-shadow:inset 2px 0 0 var(--green)}
html.ys-rail .ys-side .ys-bot{padding:10px 8px 14px;align-items:center}
html.ys-rail .ys-side .ys-btn{width:40px;height:40px}
.ys-side .ys-btn.ys-o svg{width:17px;height:17px;stroke-width:1.9}
html.ys-rail .ys-side [data-tip]{position:relative}
html.ys-rail .ys-side [data-tip]:hover:after,html.ys-rail .ys-side [data-tip]:focus-visible:after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);z-index:60;padding:6px 10px;border-radius:4px;background:#15121a;border:1px solid var(--line2);color:var(--fg);font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.5)}
@media (min-width:901px) and (max-width:1240px){
  .ys-side .ys-hd{padding:14px 0 6px}
  .ys-side nav{padding:10px 8px;overflow:visible}
  .ys-side .ys-bot{padding:10px 8px 14px;align-items:center}
  .ys-side .ys-btn{width:40px;height:40px}
  .ys-side [data-tip]{position:relative}
  .ys-side [data-tip]:hover:after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);z-index:60;padding:6px 10px;border-radius:4px;background:#15121a;border:1px solid var(--line2);color:var(--fg);font-size:12.5px;font-weight:600;white-space:nowrap;pointer-events:none}
}
.ys-side,.ys-top{font-family:"Space Grotesk","Segoe UI",system-ui,sans-serif}
.ys-side .ys-it{font-weight:600;font-size:14px}
.ys-side{view-transition-name:rail}
.ys-top{view-transition-name:topbar}
.ys-ymark{width:36px;height:36px;flex:none;display:grid;place-items:center;font:800 30px/1 var(--display);color:var(--fg);text-transform:lowercase}
.ys-ymark i{font-style:normal;color:var(--accent)}
.ys-top .ys-ymark{width:28px;height:28px;font-size:24px}
html.ys-rail .ys-side .ys-ymark{width:30px;height:30px;font-size:26px}
.ys-ymark{display:flex;align-items:baseline;justify-content:center}

/* the brand mark: a y with the amber dot */
.ys-ymark{width:36px;height:36px;flex:none;display:flex;align-items:baseline;justify-content:center;font:800 30px/1 var(--display);color:var(--fg);text-transform:lowercase}
.ys-ymark i{font-style:normal;color:var(--accent);display:inline-block;transition:transform .12s}
.ys-top .ys-ymark{width:28px;height:28px;font-size:24px}
html.ys-rail .ys-side .ys-ymark{width:30px;height:30px;font-size:26px}
/* the city box in the menu keeps the live city search (frame.js wireCity) */
.ys-side .ys-sq{position:relative}
.ys-side .ys-sq button{display:none}
.ys-side .sugg{position:absolute;left:-1px;right:-1px;top:calc(100% + 4px);background:var(--panel2);border:1px solid var(--line2);border-radius:8px;z-index:60;overflow:hidden}
.ys-side .sugg[hidden]{display:none}
.ys-side .sugg button{display:block;width:100%;text-align:left;padding:8px 12px;background:none;border:0;color:var(--dim);font-size:13px}
.ys-side .sugg button:hover,.ys-side .sugg button.on{background:rgba(255,255,255,.05);color:var(--fg)}
/* the page column */
.ys-main{margin-left:272px;padding:0 28px 30px;max-width:1360px;transition:margin-left .18s;min-width:0}
html.ys-rail .ys-main{margin-left:56px}
.ys-strip{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:9px 12px 9px 16px;background:var(--panel) var(--noise);border:1px solid var(--line);border-radius:10px;font:500 13.5px var(--body)}
.ys-strip b{font:800 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ys-strip span{color:var(--dim)}.ys-strip .ys-sp{flex:1}
.ys-strip a{font:800 13px var(--display);letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:5px 12px;border-radius:6px;text-decoration:none}
/* the footer: brand, three rows of links, the legal line. the amber dot is still the door to /line */
.ys-foot{margin:46px 0 0;padding:26px 0 8px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;font-size:13px;color:var(--mute)}
.ys-foot .ys-fw{font:400 40px/1 "Limelight",var(--display);color:var(--fg);text-transform:lowercase}
.ys-foot .ys-fw a:last-child{color:var(--accent)}
.ys-foot .ys-tag{margin:10px 0 0;max-width:34ch;color:var(--dim);font:500 14px var(--body)}
.ys-foot .ys-cols{display:grid;grid-template-columns:repeat(3,auto);gap:10px 34px}
.ys-foot .ys-cols b{display:block;font:800 12px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.ys-foot .ys-cols a{display:block;padding:3px 0;color:var(--dim);font:500 14px var(--body)}
.ys-foot .ys-cols a:hover{color:var(--fg)}
.ys-foot .ys-legal{grid-column:1/-1;display:flex;gap:14px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line);font:500 12.5px var(--body)}
.ys-foot .ys-legal a:hover{color:var(--fg)}.ys-foot .ys-legal .ys-sp{flex:1}
@media (max-width:1240px){.ys-main{margin-left:56px}}
@media (max-width:900px){.ys-main{margin-left:0;padding:52px 16px 24px}.ys-foot{grid-template-columns:1fr}.ys-foot .ys-cols{grid-template-columns:1fr 1fr}.ys-strip span{display:none}}
@media print{.ys-side,.ys-top,.ys-back,.ys-strip{display:none}.ys-main{margin:0}}
/* a menu page that is not running yet (Andrew 2026-10-15: "The Weekly (soon)"): a neutral tag, never amber */
.ys-side .ys-sub .ys-soon{display:inline-block;margin-left:6px;font:800 9.5px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line2);padding:0 5px;border-radius:3px;vertical-align:1px}
/* hover in the menu: amber words on a visible wash, so you can see what you are about to click (Andrew 2026-10-15) */
.ys-side .ys-it:hover,.ys-side .ys-it:focus-visible{color:var(--accent);background:rgba(255,255,255,.07)}
.ys-side .ys-sub a:hover,.ys-side .ys-sub a:focus-visible{color:var(--accent);background:rgba(255,255,255,.06)}
.ys-side .ys-btn.ys-o:hover{color:var(--accent);border-color:var(--accent)}
.ys-side .ys-it,.ys-side .ys-sub a{transition:color .12s,background .12s}

/* the trademark y. (Andrew 2026-10-15: "what happened to our trademark y."): the hand-drawn y in
   Architects Daughter with the amber dot, as on the gear and the favicon, never a block-font y */
@font-face{font-family:"yoggin mark";font-style:normal;font-weight:400;font-display:block;src:url(/assets/fonts/architects-daughter-latin.woff2) format("woff2")}
.ys-ymark{font:400 34px/1 "yoggin mark","Architects Daughter",cursive;color:#F1EFE8;align-items:baseline;gap:0}
.ys-ymark i{color:var(--accent);margin-left:1px}
.ys-top .ys-ymark{font-size:28px}
html.ys-rail .ys-side .ys-ymark{font-size:30px}

/* ── the Deadlock Labs pass (Andrew 2026-10-16, mocked at /docs/mockups/yoggin-menu): filled icons, a ragged edge,
   a brush strip on the page you are on, the season banner, a slimmer rail with pop-outs, one smooth fold ── */
.ys-side{clip-path:polygon(0 0,calc(100% - 2px) 0,100% 1.5%,calc(100% - 3px) 4%,100% 7%,calc(100% - 2px) 11%,100% 15%,calc(100% - 4px) 19%,100% 24%,calc(100% - 2px) 29%,100% 34%,calc(100% - 3px) 39%,100% 45%,calc(100% - 2px) 51%,100% 57%,calc(100% - 4px) 62%,100% 68%,calc(100% - 2px) 74%,100% 80%,calc(100% - 3px) 86%,100% 92%,calc(100% - 2px) 97%,100% 100%,0 100%);border-right:0;transition:width .2s cubic-bezier(.3,.7,.3,1),transform .2s}
.ys-main{transition:margin-left .2s cubic-bezier(.3,.7,.3,1)}
.ys-side>*{transition:opacity .09s ease}
html.ys-fold .ys-side>*{opacity:0}
html:not(.ys-fold) .ys-side>*{transition-duration:.16s}
img.ys-ymark{display:block;width:36px;height:36px;object-fit:contain}
.ys-top img.ys-ymark{width:28px;height:28px}
.ys-side .ys-col{border:0;border-radius:3px;background:rgba(255,255,255,.07);color:var(--fg);width:30px;height:28px}
.ys-side .ys-col svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ys-side .ys-sq{border-radius:4px}
.ys-side .ys-it{position:relative;isolation:isolate;gap:12px;border-radius:0;color:var(--fg)}
.ys-side .ys-it svg.ys-fi{width:21px;height:21px;fill:currentColor;stroke:none}
.ys-side .ys-it:before{content:"";position:absolute;inset:0 -4px;z-index:-1;opacity:0;background:rgba(255,255,255,.07);clip-path:polygon(1.5% 0,100% 0,98.5% 100%,0 100%);transition:opacity .12s}
.ys-side .ys-it:hover,.ys-side .ys-it:focus-visible{background:none}
.ys-side .ys-it:hover:before,.ys-side .ys-it[aria-expanded=true]:before{opacity:1}
.ys-side .ys-it[aria-expanded=true] svg.ys-fi{color:var(--accent)}
.ys-side .ys-it.on{background:none;box-shadow:none;color:var(--accent-ink)}
.ys-side .ys-it.on:hover{color:var(--accent-ink)}
.ys-side .ys-it.on svg.ys-fi{color:var(--accent-ink)}
.ys-side .ys-it.on .ys-ch{color:var(--accent-ink)}
.ys-side .ys-it.on:before{opacity:1;background:var(--accent);clip-path:polygon(0 14%,3% 4%,22% 9%,41% 1%,63% 7%,84% 0,100% 6%,98% 48%,100% 90%,79% 97%,57% 92%,34% 100%,13% 94%,1% 100%,2% 56%)}
.ys-side .ys-sub{padding-left:43px}
.ys-side .ys-tag,.ys-fly .ys-tag{display:inline-block;margin-left:auto;font:800 9.5px/1 var(--display);letter-spacing:.12em;padding:3px 5px 2px;background:var(--accent);color:var(--accent-ink);transform:rotate(-2deg);white-space:nowrap}
.ys-side .ys-tag+.ys-ch{margin-left:8px}
.ys-side .ys-sub .ys-tag{margin-left:8px}
.ys-side .ys-hub{position:relative;display:block;height:58px;margin:6px 0 4px;overflow:hidden;border-left:3px solid var(--accent);background:#120e0a}
.ys-side .ys-hub img{position:absolute;right:-30px;top:30px;width:120px;transform:rotate(-8deg);opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.ys-side .ys-hub span{position:relative;display:block;padding:11px 12px 0}
.ys-side .ys-hub b{display:block;font:900 13.5px/1 "Archivo",var(--display);font-stretch:125%;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.ys-side .ys-hub i{display:block;font-style:normal;font-size:12px;margin-top:5px;color:var(--fg)}
.ys-side .ys-hub em,.ys-side .ys-hubdot em{position:absolute;font:800 9.5px/1 var(--display);letter-spacing:.12em;padding:3px 5px 2px;background:var(--accent);color:var(--accent-ink);font-style:normal}
.ys-side .ys-hub em{right:8px;top:8px;transform:rotate(-2deg)}
.ys-side .ys-hubdot{display:none;position:relative;width:40px;height:40px;margin:6px auto;border-radius:50%;border:2px solid var(--accent);background:#120e0a;place-items:center}
.ys-side .ys-hubdot img{width:30px}
.ys-side .ys-hubdot em{right:-10px;bottom:-4px;font-size:8.5px;padding:2px 3px}
.ys-side .ys-btn{border-radius:4px}
/* icons only (folded, or a mid-size screen) */
html.ys-rail .ys-side{width:68px}
html.ys-rail .ys-main{margin-left:68px}
html.ys-slim .ys-side .ys-hd{flex-direction:column;padding:14px 0 6px;gap:8px}
html.ys-slim .ys-side .ys-col{margin:0;width:34px}
html.ys-slim .ys-side nav{padding:4px 8px;overflow:visible}
html.ys-slim .ys-side .ys-it{justify-content:center;padding:0;height:44px;margin:2px 0}
html.ys-slim .ys-side .ys-it svg.ys-fi{width:24px;height:24px}
html.ys-slim .ys-side .ys-it:before{inset:0}
html.ys-slim .ys-side .ys-it.on:before{inset:2px 4px;clip-path:polygon(8% 0,100% 6%,92% 100%,0 94%)}
html.ys-slim .ys-side .ys-it:hover svg.ys-fi{color:var(--accent)}
html.ys-slim .ys-side .ys-it.on:hover svg.ys-fi{color:var(--accent-ink)}
html.ys-slim .ys-side .ys-it .ys-tag,html.ys-slim .ys-side .ys-hub{display:none}
html.ys-slim .ys-side .ys-hubdot{display:grid}
html.ys-slim .ys-side .ys-bot{padding:10px 8px 14px;align-items:center}
html.ys-slim .ys-side .ys-btn{width:40px;height:40px}
@media (min-width:901px) and (max-width:1240px){.ys-side{width:68px}.ys-main{margin-left:68px}}
/* the pop-out */
.ys-fly{--fg:#e2ddd6;--mute:rgba(226,221,214,.45);--accent:#E0A45E;--accent-ink:#1a1006;--display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  position:fixed;z-index:70;min-width:200px;padding:12px 26px 12px 16px;background:#0e0c10;opacity:0;visibility:hidden;transform:translateX(-4px);transition:opacity .12s,transform .12s,visibility .12s;pointer-events:none;font-family:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  clip-path:polygon(0 0,calc(100% - 3px) 0,100% 6%,calc(100% - 6px) 14%,100% 24%,calc(100% - 3px) 36%,100% 48%,calc(100% - 7px) 60%,100% 72%,calc(100% - 3px) 84%,100% 94%,calc(100% - 5px) 100%,0 100%)}
.ys-fly.show{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.ys-fly h4{margin:0 0 6px;font:800 11px var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.ys-fly a{display:flex;align-items:center;gap:12px;height:30px;font-size:14.5px;font-weight:500;color:var(--fg);white-space:nowrap;text-decoration:none;border:0}
.ys-fly a:hover{color:var(--accent)}
.ys-fly .ys-soon{font:800 9.5px/1.4 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border:1px solid rgba(255,255,255,.14);padding:0 5px;border-radius:3px}
@media (max-width:900px){.ys-side{clip-path:none}.ys-fly{display:none}}
@media (prefers-reduced-motion:reduce){.ys-side,.ys-main,.ys-side>*{transition:none}}