/* Averbutcher site: the parts the brand page didn't have (project bar, news,
   project pages, HQ link). Built only from the v1.0 tokens in brand.css. */

/* ---------- header: HQ link (small, last) ---------- */
.head-hq{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;color:var(--mist);text-decoration:none;font-size:10.5px;box-shadow:inset 0 0 0 1px var(--rime);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));transition:color var(--dur-strike) var(--ease-strike),box-shadow var(--dur-strike) var(--ease-strike)}
.head-hq svg{width:13px;height:13px}
.head-hq:hover{color:var(--frost);box-shadow:inset 0 0 0 1px var(--mist)}
.head-hq:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.foot-line{margin-top:20px;color:var(--mist);max-width:22em}
.foot-hq{font-family:var(--font-mono);font-stretch:87.5%;font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- project bar: four slots in one riveted rack ---------- */
.pbar{position:relative;z-index:6;margin-top:-1px;background:linear-gradient(180deg,#0b1a26,#08121b);border-top:1px solid #1d3a4e;border-bottom:1px solid #1d3a4e}
.pbar-rack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pbar-slot{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:6px;align-items:center;padding:18px 18px 16px;text-decoration:none;color:var(--frost);border-left:1px solid #1d3a4e;transition:background var(--dur-strike) var(--ease-strike)}
.pbar-slot:last-child{border-right:1px solid #1d3a4e}
.pbar-slot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ql);transform:scaleX(0);transform-origin:left;transition:transform 400ms var(--ease-quench)}
a.pbar-slot:hover{background:rgba(22,50,70,.55)}
a.pbar-slot:hover::before,a.pbar-slot:focus-visible::before{transform:scaleX(1)}
a.pbar-slot:focus-visible{outline:2px solid var(--ice);outline-offset:-2px}
.pbar-icon{grid-row:1/3;width:52px;height:52px;display:grid;place-items:center;background:#09151f;box-shadow:var(--shadow-recess);border-radius:var(--r-1)}
.pbar-icon img{width:40px;height:40px;border-radius:9px;object-fit:cover}
.pbar-icon-wide img{width:44px;height:40px;border-radius:2px}
.pbar-blank{background:repeating-linear-gradient(135deg,rgba(159,179,192,.07) 0 2px,transparent 2px 10px),#0b1b28}
.pbar-blank svg{width:30px;height:30px;color:#17344a;filter:drop-shadow(0 1px 0 rgba(255,255,255,.06)) drop-shadow(0 -1px 0 rgba(0,0,0,.7))}
.pbar-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.pbar-txt b{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:27px;line-height:.9;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar-next b{color:#9fb3c0}
.pbar-slot .tag{grid-column:2;justify-self:start}
.pbar-go{grid-row:1/3;grid-column:3;width:18px;height:18px;color:var(--mist);transition:transform var(--dur-strike) var(--ease-strike),color var(--dur-strike)}
a.pbar-slot:hover .pbar-go{transform:translateX(3px);color:var(--rune)}

/* five slots: tighter text so nothing clips */
.pbar-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pbar-5 .pbar-slot{padding:16px 14px 14px;column-gap:12px}
.pbar-5 .pbar-txt b{font-size:22px;white-space:normal;line-height:.95}
.pbar-5 .pbar-go{display:none}

/* work grid: two app plates, the show and the game, then the slim next-set plate */
.card-show,.card-game{grid-column:span 6}
.work-grid .card-next{grid-column:1/-1;display:block}
.next-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 180px;gap:28px;align-items:center}
.next-row .bar{padding:0}
.next-row .blank{min-height:130px;margin:0}
.next-row p{margin-bottom:0}

/* plate foot link on the work cards */
.plate-link{margin-left:auto;color:var(--mist);text-decoration:none;font-size:10.5px;padding:6px 2px;border-bottom:2px solid transparent;transition:color var(--dur-strike),border-color var(--dur-strike)}
.plate-link:hover,.plate-link:focus-visible{color:var(--rune);border-bottom-color:var(--rune);outline:none}

/* ---------- latest: news as stamped strips ---------- */
.latest{padding-top:0}
.latest-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-7);align-items:start}
.latest h2{font-size:clamp(44px,5vw,72px);--ql-len:min(70%,260px);--ql-gap:.24em;margin-bottom:22px}
.news{list-style:none;margin:0;padding:0;border-top:1px solid #29495e}
.news-item{display:grid;grid-template-columns:110px 96px minmax(0,1fr);gap:16px;align-items:baseline;padding:16px 8px;border-bottom:1px solid #29495e;box-shadow:0 1px 0 rgba(255,255,255,.03)}
.news-item time{color:var(--frost);font-size:11px}
.news-item .stamp{font-size:10px}
.news-item p{margin:0;color:#cfdce2;font-size:16px;line-height:1.5}
.news-item a{text-decoration:none;background:linear-gradient(90deg,var(--rime),var(--rime)) 0 100%/100% 1px no-repeat;transition:color var(--dur-strike),background-size var(--dur-strike)}
.news-item a:hover{color:var(--rune);background-image:linear-gradient(90deg,var(--rune),var(--rune))}

/* ---------- project pages ---------- */
.proj-hero{position:relative;overflow:hidden;padding:72px 0 64px;background:radial-gradient(120% 90% at 85% 10%,rgba(29,106,134,.22),rgba(8,18,27,0) 60%),linear-gradient(180deg,#0a1824,var(--night))}
.proj-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(43,75,96,0),var(--rime),rgba(43,75,96,0))}
.proj-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-7);align-items:center}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--mist);margin-bottom:26px}
.crumbs a{color:var(--mist);text-decoration:none}
.crumbs a:hover{color:var(--rune)}
.crumbs .sl{color:#3d5a6c}
.proj-id{display:flex;align-items:center;gap:22px;margin-bottom:22px}
.proj-id .recess{padding:10px;flex:none}
.proj-id .recess img{width:96px;height:96px;border-radius:20px}
.proj-title{font-size:clamp(68px,9vw,140px);line-height:.8;--ql-len:min(80%,320px);--ql-gap:.12em}
.proj-sub{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.2vw,30px);letter-spacing:.04em;color:var(--mist);line-height:1.05;margin:18px 0 18px}
.proj-hero .lead{margin-bottom:0}
.proj-hero .tag{margin-bottom:6px}
.proj-art{position:relative;display:flex;justify-content:center}
.phone{position:relative;width:min(100%,300px);aspect-ratio:9/16;padding:10px;background:linear-gradient(180deg,#1c394d,#122a3c);border:1px solid #244357;border-radius:var(--r-2);box-shadow:var(--shadow-plate)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:2px;box-shadow:var(--shadow-recess)}
.phone::before{content:"";position:absolute;inset:-14% -24%;z-index:-1;background:radial-gradient(closest-side,rgba(127,214,240,.18),rgba(127,214,240,0))}
.proj-art .stamp{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);white-space:nowrap}
.wide-art{width:100%;padding:8px}
.wide-art img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:2px}

.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.feat{padding:26px 26px 22px}
.feat .plate-head{margin-bottom:16px}
.feat h3{font-size:clamp(30px,2.6vw,38px);line-height:.9;margin-bottom:12px}
.feat ul{margin:0;padding:0;list-style:none}
.feat li{position:relative;padding:7px 0 7px 18px;color:#cddae1;font-size:15.5px;line-height:1.5;border-bottom:1px dashed #2f4e62}
.feat li:last-child{border-bottom:0}
.feat li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;background:var(--rime);transform:rotate(45deg)}

.shots{position:relative}
.shots-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:thin;scrollbar-color:var(--rime) transparent}
.shot{flex:0 0 auto;width:min(62vw,240px);margin:0;scroll-snap-align:start}
.shot .phone{width:100%;padding:8px}
.shot figcaption{margin-top:12px;color:var(--mist)}
.shots-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}

.facts-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.facts-grid .plate h3{font-size:clamp(34px,3vw,44px);margin-bottom:6px}
.facts-grid .spec a{color:var(--frost);text-decoration:none;border-bottom:1px solid var(--rime)}
.facts-grid .spec a:hover{color:var(--rune);border-bottom-color:var(--rune)}
.privacy p{color:#cddae1;font-size:16px}
.privacy .btn{margin-top:8px}
.note{color:var(--mist);font-size:14px}

.card-cast{grid-column:span 4}
/* project page: other sets */
.others{display:grid;gap:0;border:1px solid #1d3a4e}
.others .pbar-slot:first-child{border-left:0}
.others .pbar-slot:last-child{border-right:0}


/* ---------- wide banner (an app's feature graphic) ---------- */
.banner{padding:8px;margin-bottom:26px}
.banner img{width:100%;height:auto;border-radius:2px}

/* ---------- show: cast cards and stills ---------- */
.cast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cast-card{margin:0;padding:22px 22px 20px}
.cast-card .aeth-img{margin:0 0 18px;padding:6px}
.cast-card .aeth-img img{aspect-ratio:16/10}
.cast-card .plate-head{padding:0 4px 12px;margin-bottom:14px}
.cast-card h3{font-size:clamp(38px,3.4vw,50px);margin-bottom:10px}
.cast-card p{margin:0;font-size:15.5px}
.stills{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:40px}
.stills figure{margin:0;padding:6px;grid-column:span 2}
.stills figure:nth-child(-n+2){grid-column:span 3}
.stills img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.stills figcaption,.wides figcaption{color:var(--mist);padding:8px 4px 2px;font-size:10px}

/* ---------- game: class cards by faction, wide sheets ---------- */
.faction{margin-top:44px}
.faction:first-of-type{margin-top:0}
.faction-head{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:18px}
.faction-head h3{font-size:clamp(40px,4.4vw,64px);line-height:.86}
.faction-head p{margin:0;color:var(--mist)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.class-card{margin:0;padding:8px 8px 6px}
.class-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.class-card figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 4px 4px;color:var(--mist);font-size:10px}
.class-card figcaption b{font-family:var(--font-display);font-weight:900;font-size:24px;letter-spacing:.02em;color:var(--frost);font-stretch:normal;line-height:1}
.art-stack{display:grid;gap:20px}
.zoom{display:block;cursor:zoom-in}
.zoom:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.wides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.wides figure{margin:0;padding:8px}
.wides img{width:100%;height:auto;border-radius:2px}
.wide-art figcaption{color:var(--mist)}
.others{grid-template-columns:repeat(4,minmax(0,1fr))}
.others .pbar-slot{padding:16px 14px 14px;column-gap:12px}
.others .pbar-txt b{font-size:22px;white-space:normal;line-height:.95}

/* ---------- 404 ---------- */
.lost{min-height:calc(100svh - 64px);display:grid;place-items:center;text-align:center;padding:80px 0}
.lost h1{font-size:clamp(84px,14vw,200px);line-height:.8;--ql-len:220px;--ql-gap:.14em}
.lost h1.qt::after{margin-left:auto;margin-right:auto}
.lost p{color:#cfdce2;max-width:28em;margin:24px auto 30px}
.lost svg.burst{width:200px;height:200px;margin:0 auto 10px}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .pbar-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pbar-5 .pbar-slot:nth-child(n+4){border-top:1px solid #1d3a4e}
  .pbar-5 .pbar-slot:nth-child(3){border-right:1px solid #1d3a4e}
}
@media (max-width:1100px){
  .pbar-rack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pbar-slot:nth-child(2){border-right:1px solid #1d3a4e}
  .pbar-slot:nth-child(n+3){border-top:1px solid #1d3a4e}
  .feats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cast{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .others{grid-template-columns:repeat(2,minmax(0,1fr))}
  .others .pbar-slot:nth-child(n+3){border-top:1px solid #1d3a4e}
}
@media (max-width:960px){
  .latest-grid,.proj-grid,.facts-grid{grid-template-columns:minmax(0,1fr)}
  .proj-art .phone{display:none}  /* the screens strip below shows them */
  .wides{grid-template-columns:minmax(0,1fr)}
  .stills figure,.stills figure:nth-child(-n+2){grid-column:span 3}
  .card-cast,.card-show,.card-game{grid-column:1/-1}
  .next-row{grid-template-columns:minmax(0,1fr)}
  .next-row .blank{display:none}
}
@media (max-width:640px){
  .head-hq{padding:0 9px}
  .pbar-rack{grid-template-columns:minmax(0,1fr);padding:0}
  .pbar-slot{border-left:0;border-right:0 !important;padding:14px 16px}
  .pbar-slot+.pbar-slot{border-top:1px solid #1d3a4e}
  .pbar-txt b{font-size:24px}
  .news-item{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 4px}
  .news-item p{grid-column:1/-1}
  .feats{grid-template-columns:minmax(0,1fr)}
  .cast{grid-template-columns:minmax(0,1fr)}
  .others{grid-template-columns:minmax(0,1fr)}
  .others .pbar-slot+.pbar-slot{border-top:1px solid #1d3a4e}
  .stills figure,.stills figure:nth-child(-n+2){grid-column:1/-1}
  .cards{gap:10px}
  .class-card{padding:5px 5px 4px}
  .class-card figcaption{flex-direction:column;gap:2px}
  .class-card figcaption b{font-size:18px}
  .proj-hero{padding:44px 0 48px}
  .proj-id{gap:16px}
  .proj-id .recess img{width:72px;height:72px;border-radius:16px}
  .proj-hero .hero-actions .btn{flex:1 1 auto;justify-content:center}
  .proj-hero .hero-actions .btn-ghost{flex:0 0 auto}
}