/* Camelot Cheats — inner pages: the scene hero, help pages (support, contacts) and the blog.
   Same tokens and faces as sight.css; loaded after it. */

/* ───────── scene hero: an image behind .page-head, faded into the night ───────── */
.phero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--rule)}
.phero-art{position:absolute;inset:0;z-index:-1;background:var(--night)}
.phero-art img{width:100%;height:100%;object-fit:cover;object-position:68% 50%}
.phero-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg, rgba(6,9,14,.94) 0%, rgba(6,9,14,.78) 28%, rgba(6,9,14,.28) 58%, rgba(6,9,14,.08) 100%),
  linear-gradient(to bottom, rgba(6,9,14,.5) 0%, rgba(6,9,14,0) 20%, rgba(6,9,14,0) 58%, rgba(6,9,14,.86) 92%, var(--night) 100%)}
.phero .page-head{border-bottom:0;min-height:clamp(360px,34vw,540px);display:flex;flex-direction:column;justify-content:flex-end}
.phero .page-head > .crumb{margin-bottom:auto;padding-bottom:28px}
.phero .page-head h1{text-shadow:0 2px 24px rgba(6,9,14,.7)}
.phero .page-head > p{text-shadow:0 1px 12px rgba(6,9,14,.9)}
/* The sight passes once over the scene, left to right, toward the heading's reading line.
   The image is already whole on the first frame; this only crosses it. */
.phero-scan{position:absolute;top:0;bottom:0;left:0;width:24%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(90deg, rgba(228,238,244,0) 0%, rgba(228,238,244,.06) 70%, rgba(228,238,244,.16) 97%, rgba(239,227,186,.55) 99.4%, rgba(228,238,244,0) 100%)}
.js .phero-scan{animation:phscan 2.8s cubic-bezier(.45,.05,.3,1) .2s 1 both}
@keyframes phscan{0%{transform:translateX(-100%);opacity:0}10%{opacity:1}82%{opacity:1}100%{transform:translateX(420%);opacity:0}}
.phero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.phero .note{margin-top:16px;font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--moon-dim)}
.phero .note a{color:var(--moon)}

/* ───────── support: four steps, what to include, downloads ───────── */
.steps4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);counter-reset:s}
.steps4 li{border-top:1px solid var(--rule-strong);padding-top:20px;display:flex;flex-direction:column}
.steps4 .n{font-family:var(--display);font-size:14px;letter-spacing:.16em;color:var(--sight-gold)}
.steps4 h3{font-size:clamp(20px,1.6vw,24px);margin:12px 0 10px}
.steps4 p{color:var(--moon-dim);font-size:16px}
.steps4 .go{margin-top:auto;padding-top:14px;font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--moon);text-underline-offset:4px}
.steps4 .go:hover{color:var(--sight)}
.write{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.write h2{font-size:clamp(28px,3vw,46px);margin:14px 0 24px;text-wrap:balance}
.checks{list-style:none;margin:0;padding:0}
.checks li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--rule)}
.checks li:last-child{border-bottom:1px solid var(--rule)}
.checks li::before{content:"";position:absolute;left:2px;top:1.05em;width:12px;height:6px;border-left:1px solid var(--sight);border-bottom:1px solid var(--sight);transform:rotate(-45deg)}
.msg{border:1px solid var(--rule);background:var(--night-2)}
.msg-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--rule);font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--moon-dim)}
.msg-bar b{color:var(--moon);font-weight:500}
.msg-bar svg{width:18px;height:18px;fill:var(--moon-dim)}
.msg-body{padding:18px 16px 20px;display:flex;flex-direction:column;gap:12px;font-size:16px}
.msg-body p{max-width:88%;padding:12px 14px;line-height:1.5}
.msg-in{align-self:flex-start;background:var(--granite);color:var(--moon)}
.msg-out{align-self:flex-end;border:1px solid var(--rule-strong);color:var(--sight)}
.msg-shot{display:inline-block;margin-top:8px;padding:3px 8px;border:1px dashed var(--rule-strong);font-family:var(--label);font-size:12px;letter-spacing:.1em;color:var(--moon-dim)}
.files-t{font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--moon-dim);margin:0 0 14px}
.files-t + .files{margin-bottom:34px}
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.file{display:grid;grid-template-columns:52px minmax(0,1fr);gap:2px 14px;align-items:center;padding:14px 16px;border:1px solid var(--rule);background:var(--night-2);text-decoration:none;transition:border-color .3s}
.file:hover,.file:focus-visible{border-color:var(--rule-strong)}
.file:hover b{color:var(--sight)}
.file i{grid-row:span 2;display:grid;place-items:center;height:52px;border:1px solid var(--rule-strong);font-style:normal;font-family:var(--label);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--sight-gold)}
.file b{font-family:var(--label);font-size:16px;font-weight:500;color:var(--moon);transition:color .3s}
.file span{font-size:14px;line-height:1.4;color:var(--moon-dim)}
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.notes article{border-top:1px solid var(--rule-strong);padding-top:20px}
.notes h3{font-size:clamp(20px,1.6vw,24px);margin:0 0 10px}
.notes p{color:var(--moon-dim)}
.notes a{color:var(--moon)}

/* ───────── contacts: channel cards and who to contact ───────── */
.chans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.chan{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,34px);border:1px solid var(--rule);background:var(--night-2);text-decoration:none;color:inherit;transition:border-color .35s}
.chan:hover,.chan:focus-visible{border-color:var(--rule-strong)}
.chan .ic{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule-strong)}
.chan .ic svg{width:22px;height:22px;fill:var(--sight)}
.chan .label{margin-top:22px}
.chan .name{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.6vw,38px);color:var(--moon);margin:8px 0 18px;line-height:1.1;overflow-wrap:anywhere}
.chan--mail:hover,.chan--mail:focus-within{border-color:var(--rule-strong)}
/* The address stays in a lowercase face and outside a card-wide link, so it reads exactly as
   typed and can be selected and copied. */
.chan .addr{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,30px);color:var(--moon);margin:8px 0 18px;line-height:1.2;overflow-wrap:anywhere;text-decoration:none;user-select:text}
.chan .addr:hover{color:var(--sight);text-decoration:underline;text-underline-offset:5px}
.chan--mail .go{text-decoration:none}
.phero .mailto{margin-top:16px;font-size:16px;color:var(--moon-dim)}
.phero .mailto a{color:var(--moon);text-underline-offset:4px;user-select:text}
.chan .checks{margin-bottom:24px}
.chan .go{margin-top:auto;display:inline-flex;align-items:center;gap:.7em;font-family:var(--label);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--sight)}
.chan:hover .go .arr{width:26px}
.chan .go .arr{display:inline-block;width:18px;height:1px;background:currentColor;position:relative;transition:width .35s var(--ease)}
.chan .go .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.route{border-top:1px solid var(--rule)}
.route > div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) 96px;gap:8px 28px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.route b{font-family:var(--serif);font-weight:500;color:var(--moon)}
.route span{color:var(--moon-dim);font-size:16px}
.route a{justify-self:end;font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--moon);white-space:nowrap;text-underline-offset:4px}
.route a:hover{color:var(--sight)}

/* ───────── blog list ───────── */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.tabs a{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid var(--rule-strong);font-family:var(--label);font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--moon-dim);background:rgba(6,9,14,.5);transition:border-color .3s, color .3s}
.tabs a:hover{color:var(--sight);border-color:var(--sight)}
.tabs a[aria-current]{color:#0b1018;background:var(--sight);border-color:var(--sight)}
.tabs i{font-style:normal;font-size:12px;opacity:.7}
.pfeat{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);border:1px solid var(--rule);background:var(--night-2);text-decoration:none;color:inherit;transition:border-color .35s;margin-bottom:clamp(28px,3vw,44px)}
.pfeat:hover,.pfeat:focus-visible{border-color:var(--rule-strong)}
.pfeat .img{min-height:100%;overflow:hidden;background:var(--granite)}
.pfeat .img img{width:100%;height:100%;object-fit:cover}
.pfeat .txt{padding:clamp(22px,3vw,44px);display:flex;flex-direction:column;gap:14px}
.pfeat .h2{font-size:clamp(26px,2.4vw,38px);text-wrap:balance;transition:color .3s}
.pfeat:hover .h2{color:var(--sight)}
.pfeat p{color:var(--moon-dim)}
.pfeat .go{margin-top:auto;font-family:var(--label);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--sight)}
.pmeta{font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--moon-faint);display:flex;flex-wrap:wrap;gap:4px 14px}
.pmeta .cat{color:var(--sight-gold)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.pcard{display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--night-2);text-decoration:none;color:inherit;transition:border-color .35s}
.pcard:hover,.pcard:focus-visible{border-color:var(--rule-strong)}
.pcard .img{aspect-ratio:16/9;overflow:hidden;background:var(--granite)}
.pcard .img img{width:100%;height:100%;object-fit:cover}
.pcard .txt{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px}
.pcard h3{font-size:clamp(20px,1.5vw,23px);line-height:1.18;transition:color .3s}
.pcard:hover h3{color:var(--sight)}
.pcard p{color:var(--moon-dim);font-size:16px}
.kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.kinds article{border-top:1px solid var(--rule-strong);padding-top:20px}
.kinds .n{font-family:var(--display);font-size:14px;letter-spacing:.16em;color:var(--sight-gold)}
.kinds h3{font-size:clamp(20px,1.6vw,24px);margin:12px 0 10px}
.kinds p{color:var(--moon-dim);font-size:16px}
.blank{padding:28px 26px;border:1px solid var(--rule);background:var(--night-2);max-width:640px}
.blank b{display:block;font-family:var(--display);font-weight:400;font-size:24px;color:var(--moon);margin-bottom:8px}
.blank p{color:var(--moon-dim)}

/* ───────── post ───────── */
.phero .pmeta{margin-top:20px;color:var(--moon-dim)}
.phero .pmeta a{color:var(--moon);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.phero .pmeta a:hover{color:var(--sight)}
.phero .pmeta img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.playout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.playout--solo{grid-template-columns:minmax(0,1fr)}
.ptoc{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;padding-right:6px}
.ptoc ol{list-style:none;margin:14px 0 0;padding:0;border-left:1px solid var(--rule)}
.ptoc li a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:1px solid transparent;font-family:var(--label);font-size:15px;line-height:1.35;color:var(--moon-dim);text-decoration:none;transition:color .3s, border-color .3s}
.ptoc li.l3 a{padding-left:30px;font-size:14px}
.ptoc li a:hover{color:var(--sight);border-left-color:var(--sight)}
.ptoc details summary{display:none}
.article{max-width:46em;min-width:0}
.article h2{font-size:clamp(26px,2.4vw,36px);margin:1.8em 0 .6em;scroll-margin-top:20px;text-wrap:balance}
.article h3{scroll-margin-top:20px}
.article > h2:first-child{margin-top:0}
.article ol{margin:0 0 1.2em;padding-left:1.4em}
.article ol li{padding:6px 0 6px 4px}
.article ol li::before{content:none}
.article ol li::marker{font-family:var(--label);color:var(--sight-gold)}
.article figure{margin:1.4em 0 1.8em}
.article figure img,.article > img{max-width:100%;height:auto;border:1px solid var(--rule);background:var(--granite)}
.article figcaption{margin-top:10px;font-family:var(--label);font-size:14px;letter-spacing:.04em;color:var(--moon-faint)}
.article.prose{max-width:46em}
.acard{display:grid;grid-template-columns:88px minmax(0,1fr);gap:20px;align-items:start;margin-top:clamp(36px,4vw,56px);padding:24px;border:1px solid var(--rule);background:var(--night-2)}
.ava{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;overflow:hidden;border:1px solid var(--rule-strong);background:var(--granite);font-family:var(--display);font-size:34px;color:var(--sight-gold);text-decoration:none}
.ava img{width:100%;height:100%;object-fit:cover}
.acard .who{font-family:var(--display);font-size:24px;color:var(--moon);text-decoration:none;display:inline-block;margin-top:6px}
.acard .who:hover{color:var(--sight)}
.acard .role{display:block;font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sight-gold);margin-top:4px}
.acard p{color:var(--moon-dim);font-size:16px;margin-top:10px}
.acard .more{margin-top:14px}
.acard .more a{font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--moon);text-underline-offset:4px}
.phelp{margin-top:24px;padding:22px 24px;border:1px solid var(--rule-strong)}
.phelp b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--moon)}
.phelp p{color:var(--moon-dim);margin:8px 0 16px;font-size:16px}
.phelp .btns{display:flex;flex-wrap:wrap;gap:10px}
.phelp .btn{padding:12px 18px;font-size:12px}

/* ───────── author ───────── */
.ahero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:end}
.ahero .ava{width:clamp(96px,11vw,150px);height:clamp(96px,11vw,150px);font-size:clamp(40px,4vw,60px)}
.ahero .label{margin-top:0}
.ahero h1{margin-top:8px}
.alinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.alinks .btn{padding:10px 16px;font-size:12px;background:rgba(6,9,14,.5)}
.agames{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;list-style:none;padding:0}
.agames a{display:inline-block;padding:5px 12px;border:1px solid var(--rule);font-family:var(--label);font-size:13px;letter-spacing:.1em;color:var(--moon-dim);text-decoration:none;background:rgba(6,9,14,.5)}
.agames a:hover{color:var(--sight);border-color:var(--rule-strong)}

/* ───────── game tiles: our moonlit scene instead of a game logo ───────── */
.mini--scene{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.mini--scene a{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.mini--scene img.thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--rule)}
.mini--scene a > span{padding:12px 14px 14px}
.sgame img.thumb{width:112px;height:63px;object-fit:cover;border:1px solid var(--rule-strong)}

/* ───────── /status/: the selected game under the picker ───────── */
.sstat{padding-top:clamp(28px,3.4vw,48px)}
.sstat-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 28px;margin-bottom:clamp(20px,2.4vw,28px)}
.sstat-head .sgame{flex:1 1 auto;min-width:0}
.sstat-head h2{font-size:clamp(28px,2.8vw,42px)}
.sstat-n{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:6px;font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--moon-dim)}
.sstat-n b{font-weight:500;color:var(--sight);letter-spacing:.04em}
.sstat-n .upd b{color:var(--ember)}
.sstat-go{display:inline-flex;align-items:center;gap:10px;font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--moon-dim);text-decoration:none;transition:color .3s}
.sstat-go:hover{color:var(--sight)}
.sstat-go .arr{display:inline-block;width:16px;height:1px;background:currentColor;position:relative}
.sstat-go .arr::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.sstat .st-m{display:none;font-style:normal;font-size:11px;margin-top:6px}
@media (max-width:640px){
  .sstat-head .sgame img.thumb{display:none}
  .sstat .st-m{display:inline-flex}
}

/* ───────── responsive ───────── */
/* Blog joined the main nav: keep it on one line down to the 960px menu breakpoint. */
.nav .btn{white-space:nowrap}
@media (max-width:1180px){.nav{gap:20px}}
@media (max-width:1100px){
  .steps4,.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .write,.chans,.notes,.kinds,.pfeat{grid-template-columns:minmax(0,1fr)}
  .pfeat .img{min-height:0;aspect-ratio:16/9}
  .playout{grid-template-columns:minmax(0,1fr)}
  .ptoc{position:static;max-height:none;border:1px solid var(--rule);padding:14px 16px}
  .ptoc details summary{display:flex;justify-content:space-between;cursor:pointer;list-style:none}
  .ptoc details summary::-webkit-details-marker{display:none}
  .ptoc > .label{display:none}
  .route > div{grid-template-columns:minmax(0,1fr)}
  .route a{justify-self:start}
}
@media (max-width:640px){
  .phero .page-head{min-height:clamp(340px,92vw,420px)}
  .phero-art img{object-position:72% 50%}
  .phero-art::after{background:
    linear-gradient(90deg, rgba(6,9,14,.7) 0%, rgba(6,9,14,.35) 60%, rgba(6,9,14,.15) 100%),
    linear-gradient(to bottom, rgba(6,9,14,.55) 0%, rgba(6,9,14,.1) 22%, rgba(6,9,14,.45) 52%, rgba(6,9,14,.92) 82%, var(--night) 100%)}
  .phero .page-head h1{font-size:30px}
  .phero .acts .btn{flex:1 1 auto;justify-content:center;padding:13px 14px;font-size:12px}
  .steps4,.posts{grid-template-columns:minmax(0,1fr)}
  .sgame img.thumb{width:80px;height:45px}
  .mini--scene{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mini--scene b{font-size:16px}
  .acard{grid-template-columns:minmax(0,1fr);padding:20px 18px}
  .ahero{grid-template-columns:minmax(0,1fr);align-items:start}
  .msg-body p{max-width:96%}
}
@media (prefers-reduced-motion:reduce){
  .js .phero-scan{animation:none;opacity:0}
  .chan .go .arr{transition:none}
}

/* ───────── "Updated" line under a page heading (includes/updated.html) ───────── */
.pupd{margin-top:14px;font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--moon-faint)}
.pupd time{color:var(--moon-dim)}
.phero .page-head > .pupd{text-shadow:0 1px 12px rgba(6,9,14,.9)}