:root{--col:430px;--gutR:30px;
  /* 配色候補テスト中（過去の値はコメントで保持。戻すときはどちらかの行を有効化してください）
     元(最初): --ox:#C4520E;--ox-deep:#9E3F08;--ox-light:#E8742A;--ink:#14182B;--cream:#FFF8F0;--cyan:#3FD0E0;
     候補1(ブラウン黒): --ox:#F05A25;--ox-deep:#C2451A;--ox-light:#F58152;--ink:#2B1A12;--cream:#EFE1CF;--cyan:#3FA9F6;
     候補2(黄色のまま): --gold:#FFC83D;
     候補3(オレンジ): --ox:#F2661D;--ox-deep:#C24E12;--ox-light:#F58A4E;
     候補4(オレンジ+ネオンライム、雑色あり): --ox:#de5931;--ox-deep:#B24727;--ox-light:#EA9379;--ink:#14213D;--cream:#F8F6F2;--gold:#CFFF3D;--cyan:#3FA9F6;--green:#6FCF3D;--pink:#FF5B8D;--violet:#8B6CFF; */
  /* B案：オレンジ×ネイビー×ライムの3色にまとめる（cyan/green/pink/violetは廃止）。ライムは抑えた#C3D66Bを試したが明るい方に戻す */
  --ox:#de5931;--ox-deep:#B24727;--ox-light:#EA9379;--ink:#14213D;--cream:#F8F6F2;--gold:#CFFF3D;
  --pc:4px;
  --pixel-clip:polygon(
    calc(var(--pc)*2) 0,calc(100% - var(--pc)*2) 0,
    calc(100% - var(--pc)*2) var(--pc),calc(100% - var(--pc)) var(--pc),
    calc(100% - var(--pc)) calc(var(--pc)*2),100% calc(var(--pc)*2),
    100% calc(100% - var(--pc)*2),
    calc(100% - var(--pc)) calc(100% - var(--pc)*2),calc(100% - var(--pc)) calc(100% - var(--pc)),
    calc(100% - var(--pc)*2) calc(100% - var(--pc)),calc(100% - var(--pc)*2) 100%,
    calc(var(--pc)*2) 100%,
    calc(var(--pc)*2) calc(100% - var(--pc)),var(--pc) calc(100% - var(--pc)),
    var(--pc) calc(100% - var(--pc)*2),0 calc(100% - var(--pc)*2),
    0 calc(var(--pc)*2),
    var(--pc) calc(var(--pc)*2),var(--pc) var(--pc),
    calc(var(--pc)*2) var(--pc),calc(var(--pc)*2) 0
  );
  /* 上端はまっすぐのまま、下2つの角だけギザギザにする版（job-panelがタブの下にぴったりくっつくため） */
  --pixel-clip-bottom:polygon(
    0 0,100% 0,
    100% calc(100% - var(--pc)*2),
    calc(100% - var(--pc)) calc(100% - var(--pc)*2),calc(100% - var(--pc)) calc(100% - var(--pc)),
    calc(100% - var(--pc)*2) calc(100% - var(--pc)),calc(100% - var(--pc)*2) 100%,
    calc(var(--pc)*2) 100%,
    calc(var(--pc)*2) calc(100% - var(--pc)),var(--pc) calc(100% - var(--pc)),
    var(--pc) calc(100% - var(--pc)*2),0 calc(100% - var(--pc)*2)
  );
}
*{box-sizing:border-box}
html,body{background:var(--ink) url(../images/bg-city.png) center center/cover no-repeat fixed;image-rendering:pixelated}
body{margin:0;color:var(--cream);font-family:"M PLUS Rounded 1c",system-ui,sans-serif}
.app{max-width:var(--col);margin:0 auto;background:var(--ox);overflow:clip}
/* はじまり・冒険の始まり・なかまを選ぶ・せんぱいの声・選考ダンジョンの5セクションだけの背景色 */
.sec-ox{background:var(--ox)}
.gut{padding-inline:16px}
/* 8bit窓：ドット2段のギザギザ角（画像と同じ切り欠き。色は今のまま） */
.win{position:relative;background:var(--cream);color:var(--cream);padding:15px 17px;line-height:1.75;font-size:15px;clip-path:var(--pixel-clip)}
.win::before{content:"";position:absolute;inset:3px;background:var(--ink);clip-path:var(--pixel-clip);z-index:-1}
.win b{color:var(--ox-light);font-weight:400}
section{padding-block:36px 44px;position:relative}
.h{margin:0 0 20px}
.h span{display:block;font-weight:800;font-size:30px;line-height:1.2;letter-spacing:.02em}
.h small{display:inline-block;margin-top:6px;font-family:"DotGothic16",monospace;font-size:11px;letter-spacing:.2em;background:var(--ink);color:var(--cream);padding:1px 8px}
.glitch{display:block;width:100%;height:56px;image-rendering:pixelated}
/* FV用の背景はみ出しグリッチ(seed12・13)は.tallを使わず、PC幅のときだけ表示する */
canvas.glitch[data-seed="12"],canvas.glitch[data-seed="13"]{display:none}

/* vertical progress */
.vbar{position:fixed;z-index:30;top:calc(14px + env(safe-area-inset-top,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));right:max(4px,calc(50% - var(--col)/2 + 4px));width:20px;pointer-events:none}
.vrail{position:absolute;left:7px;top:0;bottom:0;width:6px;background:#2A3859;border:2px solid var(--cream);box-shadow:0 0 0 2px var(--ink)}
.vrail i{position:absolute;left:0;right:0;top:0;height:0;background:linear-gradient(180deg,
  var(--gold) 0% 33%,
  color-mix(in srgb,var(--gold) 50%,var(--ox-light) 50%) 33% 66%,
  var(--ox-light) 66% 100%)}
.vflag{position:absolute;left:-1px;width:12px;height:10px;transform:translateY(-50%)}
.vflag::before{content:"";position:absolute;left:0;top:0;width:12px;height:2px;background:var(--cream)}
.vflag::after{content:"";position:absolute;left:0;top:2px;width:7px;height:6px;background:#4A5979;border:1px solid var(--ink)}
.vflag.on::after{background:var(--gold)}
#walker{position:absolute;left:10px;top:0;width:34.5px;height:60px;transform:translate(-50%,-60%);background:url(../images/walker.png) 0 0/138px 120px no-repeat;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.vlabel{position:absolute;right:24px;top:0;transform:translateY(-50%);white-space:nowrap;background:var(--ink);color:var(--gold);font-size:12px;padding:3px 8px;border:2px solid var(--cream);opacity:0;transition:opacity .25s}
.vlabel.show{opacity:1}
/* スクロールを始めたら右からスッと出る */
.vbar{opacity:0;transform:translateX(24px);transition:opacity .35s,transform .35s steps(4)}
.vbar.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.vbar{transition:opacity .2s;transform:none}}
.gut{padding-left:16px;padding-right:var(--gutR)}
.catch{padding-right:var(--gutR)!important}
/* PC・タブレットでは列を少し広げる */
@media (min-width:768px){:root{--col:480px}}

/* loading */
#loading{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-family:"DotGothic16",monospace;color:var(--cream);transition:opacity .5s,visibility .5s}
#loading.done{opacity:0;visibility:hidden}
.ld-walker{width:46px;height:80px;background:url(../images/walker.png) 0 0/184px 160px no-repeat;image-rendering:pixelated;animation:ldwalk .8s steps(4) infinite}
@keyframes ldwalk{to{background-position:-184px 0}}
.ld-text{font-size:18px;letter-spacing:.15em}
.ld-text i{font-style:normal;animation:bl 1s steps(2) infinite}
.ld-bar{width:180px;height:14px;border:2px solid var(--cream);box-shadow:0 0 0 2px var(--ink);background:#2A3859;position:relative}
.ld-bar b{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(90deg,var(--gold) 0 10px,var(--ox-light) 10px 12px);transition:width .15s steps(4)}
.ld-co{font-size:12px;color:#8FA0BF;letter-spacing:.2em}

/* hero */
.hero{padding-block:0 8px}
.hero .fv{position:relative;line-height:0}
.hero .fv>img:first-child{width:100%;display:block}
.fv-man{position:absolute;height:auto;image-rendering:pixelated;animation:pico 2s infinite}
.fv-shadow{position:absolute;height:2.4%;border-radius:50%;background:rgba(60,70,95,.35)}
@keyframes pico{0%,78%{transform:translateY(0)}80%{transform:translateY(-7%)}84%{transform:translateY(0)}86%{transform:translateY(-7%)}90%,100%{transform:translateY(0)}}
.fv-win{position:absolute;height:auto;image-rendering:pixelated;pointer-events:none;z-index:21}
/* 高さのあるグリッチ帯：上のセクションにはみ出して重なる（ピーク＝セクションの境目）。スマホはこれだけ（中身からはみ出さない） */
.glitch.tall{height:auto;aspect-ratio:108/34;width:calc(100% + 16px + var(--gutR));margin:calc(-36px - (100% + 16px + var(--gutR))*34/108*.62) calc(var(--gutR)*-1) 12px -16px;position:relative;z-index:2;pointer-events:none;opacity:.9}
/* seed2・8（冒険の始まり）・seed4（社員インタビュー）は、下の文字に食い込まないよう境目ちょうどから開始（上に食い込まない）。860px未満のみ（それ以上はJSがtopを直接指定するのでここでは触らない） */
@media (max-width:859.98px){
  canvas.glitch[data-seed="2"],canvas.glitch[data-seed="8"],canvas.glitch[data-seed="4"]{margin-top:-36px}
}
/* .edge/.edge-l/.edge-r が付いている帯だけ、画面が広いとき(PC)はセクションの境目で帯になり、背景側に短く突き出す。位置(縦)はJSで計算 */
@media (min-width:860px){
  .glitch.edge{position:fixed;left:50%;transform:translateX(-50%);width:calc(var(--col) + 48px);height:auto;aspect-ratio:108/34;margin:0;z-index:20}
  /* 左右別々に置くとき用。既定値はedgeと同じ見え方（幅・高さはcanvasごとにstyle属性で上書きできる） */
  /* z-indexは縦バー(30)・サイドメニュー(25)より低くして、それらの上に重ならない（下を通る）ようにする */
  .glitch.edge-l,.glitch.edge-r{position:fixed;height:166px;margin:0;z-index:20}
  .glitch.edge-l{left:calc(50% - var(--col)/2 - 24px);width:calc(var(--col)/2 + 24px + 187px)}
  .glitch.edge-r{right:calc(50% - var(--col)/2 - 24px);width:calc(var(--col)/2 + 24px + 187px)}
  /* seed12・13（FV）はPC幅のときだけ表示 */
  canvas.glitch[data-seed="12"],canvas.glitch[data-seed="13"]{display:block}
  .glitch.edge + .h,.glitch.edge-l + .h,.glitch.edge-r + .h,.glitch.edge + h2,.glitch.edge-l + h2,.glitch.edge-r + h2{margin-top:36px}
}
.glitch.fv-cloud{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media (prefers-reduced-motion:reduce){.fv-man{animation:none}}
.catch{padding:22px 16px 0}
.catch .tag{display:inline-block;background:var(--ink);color:var(--gold);padding:3px 10px;font-size:13px}
.catch h1{margin:10px 0 0;font-weight:800;font-size:38px;line-height:1.2;text-wrap:balance}
.catch h1 em{font-style:normal;background:var(--cream);color:var(--ox);padding:0 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.catch p{font-size:14px;line-height:1.9;margin:14px 0 0}
.catch .sub{margin-top:18px}

/* story */
.story{background:linear-gradient(180deg,
  var(--ox) 0 16px,
  color-mix(in srgb,var(--ox) 75%,#fff4ee 25%) 16px 32px,
  color-mix(in srgb,var(--ox) 50%,#fff4ee 50%) 32px 48px,
  color-mix(in srgb,var(--ox) 25%,#fff4ee 75%) 48px 64px,
  #fff4ee 64px 100%);color:var(--ink)}
.story p{line-height:1.95;margin:0 0 12px;font-size:15px}

/* party */
.party{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:var(--cream);color:var(--ink);border-radius:4px;padding:12px 10px;text-align:center;box-shadow:4px 4px 0 var(--ox-deep)}
.card canvas{width:64px;height:80px;image-rendering:pixelated;display:block;margin:0 auto 6px}
.card .job{font-weight:800;font-size:16px;color:var(--ox-deep)}
.card p{margin:4px 0 0;font-size:12px;line-height:1.6}

/* 画像スプライト用（1枚の横並び画像を steps で切り替え） */
.sprite{--w:64px;--h:80px;--frames:4;--speed:.8s;width:var(--w);height:var(--h);margin:0 auto 6px;background-position:0 0;background-size:calc(var(--w)*var(--frames)) var(--h);background-repeat:no-repeat;image-rendering:pixelated}
.sprite.walk{animation:sprite var(--speed) steps(var(--frames)) var(--cycles,1)}
.card{cursor:pointer;-webkit-tap-highlight-color:transparent}
@keyframes sprite{to{background-position:calc(var(--w)*var(--frames)*-1) 0}}
@media (prefers-reduced-motion:reduce){.sprite{animation:none}}


/* 仕事紹介：職業選択 */
.jobs-hint{font-size:12px;margin:-8px 0 12px;color:var(--ink)}
.party-select{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:-3px;position:relative;z-index:1}
.pick{font:inherit;color:var(--cream);background:rgba(20,24,43,.35);border:3px solid transparent;border-bottom:0;border-radius:6px 6px 0 0;padding:14px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.pick .sprite{margin:0;filter:brightness(.8)}
.pick-name{font-weight:800;font-size:13px;line-height:1.2}
.pick-state{font-family:"DotGothic16",monospace;font-size:10px;background:var(--ox-deep);padding:0 6px}
.pick-cursor{position:absolute;top:-2px;font-size:12px;color:var(--ox-deep);opacity:0}
.pick[aria-selected="true"]{background:var(--cream);color:var(--ink);border-color:var(--ink)}
.pick[aria-selected="true"] .sprite{filter:none}
.pick[aria-selected="true"] .pick-cursor{opacity:1;animation:bl 1s steps(2) infinite}
.pick[aria-selected="true"] .pick-state{background:var(--ox);color:#fff}
.pick:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pick.is-closed{filter:grayscale(1);opacity:.6}
.pick.is-closed .pick-state{background:#555}
.job-panel{position:relative;background:var(--ink);color:var(--ink);padding:19px 17px;clip-path:var(--pixel-clip-bottom);filter:drop-shadow(4px 4px 0 var(--ox-deep))}
.job-panel::before{content:"";position:absolute;inset:3px;background:var(--cream);clip-path:var(--pixel-clip-bottom);z-index:-1}
.job-panel.is-closed{filter:grayscale(1)}
.job-panel:not([hidden]){animation:jpIn .25s steps(3)}
@keyframes jpIn{from{opacity:0;transform:translateY(6px)}}
.jp-class{margin:0;font-size:13px;color:var(--ox-deep)}
.jp-class b{font-weight:400;font-size:22px}
.jp-sub{margin:2px 0 0;font-size:12px;font-weight:800;line-height:1.5}
.jp-catch{position:relative;margin:12px 0 0;padding:12px 14px;background:var(--cream);color:var(--cream);font-weight:800;font-size:15px;line-height:1.55;text-wrap:balance;clip-path:var(--pixel-clip);filter:drop-shadow(3px 3px 0 var(--ox-deep))}
.jp-catch::before{content:"";position:absolute;inset:2px;background:var(--ink);clip-path:var(--pixel-clip);z-index:-1}
.jp-h{font-weight:800;font-size:14px;margin:18px 0 6px;color:var(--ox-deep)}
.jp-h::before{content:"▶ "}
.jp-lead{margin:0;font-size:13px;line-height:1.8}
.jp-lead b{background:linear-gradient(transparent 60%,#ffd9a0 60%)}
.jp-list{margin:6px 0 0;padding-left:1.2em;font-size:13px;line-height:1.75}
.jp-points{list-style:none;margin:0;padding:0;counter-reset:pt;display:flex;flex-direction:column;gap:8px}
.jp-points li{counter-increment:pt;font-size:12.5px;line-height:1.7;padding-left:34px;position:relative}
.jp-points li::before{content:counter(pt,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:"DotGothic16",monospace;background:var(--ink);color:var(--ox-light);font-size:11px;padding:0 4px}
.jp-points b{display:block;font-size:13.5px}
.jp-more{margin-top:10px}
.jp-more summary{font-size:13px;font-weight:800;cursor:pointer;color:var(--ox-deep)}
.jobs-sec{padding-bottom:96px;background:linear-gradient(180deg,
  #fff4ee 0 16px,
  color-mix(in srgb,#fff4ee 75%,var(--ox) 25%) 16px 32px,
  color-mix(in srgb,#fff4ee 50%,var(--ox) 50%) 32px 48px,
  color-mix(in srgb,#fff4ee 25%,var(--ox) 75%) 48px 64px,
  var(--ox) 64px 100%)}
/* 仕事紹介の下にある軽めのエントリー導線（最後尾の大きいボタンより控えめに） */
.jobs-entry-link{display:block;text-align:center;margin-top:16px;font-size:13px;font-weight:800;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.jobs-entry-link:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.jp-common{font-size:11px;margin:-6px 0 14px;opacity:.9}
.perks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.perks li{font-size:12px;background:var(--cream);color:var(--ink);padding:3px 8px;border-radius:3px}
.gear-note{font-size:11px;line-height:1.7;margin:12px 0 0;color:var(--ink);opacity:.85}

/* equipment */
.equip{background:linear-gradient(165deg,
  var(--ox) 0% 20%,
  color-mix(in srgb,var(--ox) 75%,var(--ox-light) 25%) 20% 38%,
  color-mix(in srgb,var(--ox) 50%,var(--ox-light) 50%) 38% 54%,
  color-mix(in srgb,var(--ox) 25%,var(--ox-light) 75%) 54% 70%,
  var(--ox-light) 70% 100%)}
.gear{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gear div{position:relative;background:var(--ink);padding:14px;text-align:center;clip-path:var(--pixel-clip)}
.gear div::before{content:"";position:absolute;inset:2px;background:var(--cream);clip-path:var(--pixel-clip);z-index:-1}
.gear strong{display:block;font-size:19px;white-space:nowrap;font-weight:800;color:var(--ox-deep);line-height:1.25}
.gear span{font-size:12px;color:var(--ink)}
.gear .wide{grid-column:1/-1}

/* そうび：スクロールすると中身がもやっと浮かび上がる（RPGの装備画面っぽく） */
.equip .gear>div,.equip .perks li,.equip .gear-note{
  opacity:0;filter:blur(10px);transform:translateY(10px) scale(1.04);
  transition:opacity .8s ease-out,filter .8s ease-out,transform .8s ease-out;
}
.equip.is-visible .gear>div,.equip.is-visible .perks li,.equip.is-visible .gear-note{
  opacity:1;filter:blur(0);transform:translateY(0) scale(1);
}
/* gearのカードは常時ドット影も付ける（もやっと演出のfilterと合成） */
.equip .gear>div{filter:blur(10px) drop-shadow(3px 3px 0 var(--ink))}
.equip.is-visible .gear>div{filter:blur(0) drop-shadow(3px 3px 0 var(--ink))}
.equip .gear>div:nth-child(1){transition-delay:.05s}
.equip .gear>div:nth-child(2){transition-delay:.15s}
.equip .gear>div:nth-child(3){transition-delay:.25s}
.equip .gear>div:nth-child(4){transition-delay:.35s}
.equip .gear>div:nth-child(5){transition-delay:.45s}
.equip .perks li{transition-delay:.55s}
.equip .gear-note{transition-delay:.7s}
@media (prefers-reduced-motion: reduce){
  .equip .gear>div,.equip .perks li,.equip .gear-note{opacity:1;transform:none;transition:none}
  .equip .gear>div,.equip .perks li,.equip .gear-note{filter:none}
  .equip .gear>div{filter:drop-shadow(3px 3px 0 var(--ink))}
}

/* voice */
.voice{position:relative;background:var(--ink);color:var(--ink);padding:19px;line-height:1.85;font-size:14px;clip-path:var(--pixel-clip);filter:drop-shadow(4px 4px 0 var(--ox-deep))}
.voice::before{content:"";position:absolute;inset:3px;background:var(--cream);clip-path:var(--pixel-clip);z-index:-1}
.voice .q{font-weight:800;font-size:20px;margin-bottom:8px;line-height:1.45}
.voice .q em{font-style:normal;color:var(--ox)}
.voice .who{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px}
.voice canvas{width:40px;height:50px;image-rendering:pixelated}
.voice .who .sprite{margin:0;flex:none}

/* flow */
.flow{display:flex;flex-direction:column;gap:10px}
.step{position:relative;display:flex;gap:12px;align-items:center;background:var(--ox-deep);padding:12px 14px;clip-path:var(--pixel-clip);filter:drop-shadow(3px 3px 0 var(--ink))}
.step::before{content:"";position:absolute;inset:2px;background:var(--ink);clip-path:var(--pixel-clip);z-index:-1}
.step .n{position:relative;font-family:"DotGothic16",monospace;background:var(--gold);color:var(--ink);padding:2px 8px;white-space:nowrap;min-width:64px;text-align:center;display:inline-block}
.step p{position:relative;margin:0;font-size:14px;line-height:1.6;color:var(--cream)}

/* 選考について：終点(セクション末尾＝つぎの冒険はの手前)でクリームに切り替わる荒いグラデ */
.flow-sec{background:linear-gradient(165deg,
  var(--ox) 0% 20%,
  color-mix(in srgb,var(--ox) 75%,var(--cream) 25%) 20% 38%,
  color-mix(in srgb,var(--ox) 50%,var(--cream) 50%) 38% 54%,
  color-mix(in srgb,var(--ox) 25%,var(--cream) 75%) 54% 70%,
  var(--cream) 70% 100%)}

/* entry：グラデは選考についてで終わっているので、ここは単色の白地 */
.entry{background:var(--cream);color:var(--ink)}
.entry h2{font-weight:800;font-size:26px;line-height:1.35;margin:0 0 12px;color:var(--ox)}
.entry p{font-size:14px;line-height:1.9;margin:0}
.btn{display:block;text-align:center;text-decoration:none;font-weight:800;font-size:19px;color:#fff;background:var(--ox);border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink);padding-block:16px;border-radius:4px;margin-top:18px}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.note{font-size:11px;text-align:center;color:#5c6b82;margin-top:16px}
.site-footer{background:var(--ink);color:var(--cream);text-align:center;font-size:11px;line-height:2;padding:18px 16px}
.site-footer a{color:var(--cream)}
.blink{animation:bl 1s steps(2) infinite}@keyframes bl{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.blink{animation:none}}

/* ===== 背景（サイドの余白）に置くメニュー。中身(.app)は触っていない、独立した要素 ===== */
.sidemenu{display:none}
@media (min-width:860px){
  .sidemenu{display:flex;flex-direction:column;gap:14px;position:fixed;z-index:25;left:calc(50% + var(--col)/2 + 30px);top:50%;transform:translateY(-50%)}
}
.sidemenu a{position:relative;display:block;min-width:150px;padding:11px 16px;background:var(--cream);clip-path:var(--pixel-clip);font-weight:800;font-size:14px;letter-spacing:.05em;text-align:center;text-decoration:none;color:var(--cream);cursor:pointer;transition:background .15s}
.sidemenu a::before{content:"";position:absolute;inset:3px;background:var(--ink);clip-path:var(--pixel-clip);z-index:-1}
.sidemenu a:hover,.sidemenu a:focus-visible{background:var(--ox)}
.sidemenu a:focus-visible{outline:2px solid var(--cream);outline-offset:3px}