/* /links/ — the Container Yard look (docs/art-direction.md, direction A), kept to one page. Colours sampled from the game. */
:root{--sky:#3BABD2;--sky-deep:#1987AC;--blue:#154396;--green:#268741;--green-deep:#226C28;--yellow:#E8C73B;--ink:#0B1230;--paper:#F3F2EE;--concrete:#B8BDCA;
  --display:'Big Shoulders Stencil Display',Impact,sans-serif;--text:'Archivo',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --corrugation:repeating-linear-gradient(90deg,transparent 0 18px,rgba(0,0,0,.14) 18px 26px)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;font-family:var(--text);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased;
  background:var(--sky);background-image:radial-gradient(ellipse 16% 5% at 50% 6%,#fff 60%,transparent 61%),radial-gradient(ellipse 22% 6% at 82% 14%,#fff 60%,transparent 61%),radial-gradient(ellipse 12% 4% at 18% 22%,#fff 60%,transparent 61%),linear-gradient(var(--sky),var(--sky-deep))}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--yellow);padding:.6rem 1rem;font-weight:700;text-decoration:none}
.skip:focus{top:1rem}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;font-weight:600}
.display{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.86}
.yard{max-width:1040px;margin:0 auto;padding:clamp(1.25rem,4vw,3rem) clamp(1rem,4vw,2rem) 2rem;display:grid;gap:1.25rem}

/* the container */
.container-box{position:relative;background:var(--green-deep);border:3px solid var(--ink);box-shadow:14px 14px 0 rgba(11,18,48,.35)}
.frame{padding:14px;background:var(--green);background-image:var(--corrugation)}
.window{background:var(--paper);border:3px solid var(--ink);padding:clamp(1.25rem,4vw,2.5rem)}
.plate{position:absolute;top:-3px;left:24px;z-index:2;background:var(--paper);border:3px solid var(--ink);border-top:0;padding:.35rem .6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;font-weight:600}

.head{margin-bottom:1.6rem}
.kicker{display:inline-block;background:var(--ink);color:var(--paper);padding:.4rem .6rem;margin-bottom:.8rem}
h1{font-size:clamp(3.6rem,11vw,6.5rem);color:var(--ink)}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:500;margin-top:.4rem}

.grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start}
.links{display:grid;gap:.9rem}
.btn{display:grid;gap:.15rem;border:3px solid var(--ink);background:var(--paper);padding:.9rem 1.1rem;text-decoration:none;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1;box-shadow:5px 5px 0 var(--ink);position:relative;transition:transform .12s ease-out,box-shadow .12s ease-out}
.btn .tag{font-family:var(--mono);font-weight:600;font-size:.68rem;letter-spacing:.14em;opacity:.75}
.btn-yellow,.btn-steam{background:var(--yellow)}
.btn-yellow::before,.btn-steam::before{content:"";position:absolute;inset:0;background:var(--corrugation);opacity:.35;pointer-events:none}
.btn-ink,.btn-discord{background:var(--ink);color:var(--paper)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:.8rem;align-items:stretch}
.row .btn{align-content:center}
.row-steam,.row-discord{grid-template-columns:minmax(0,1fr) 150px}
.row-steam .btn,.row-discord .btn{font-size:clamp(1.7rem,3vw,2.4rem);padding:1.2rem 1.2rem;min-height:150px}
.row-form .btn,.row-instagram .btn{font-size:clamp(1.15rem,1.8vw,1.4rem)}
.row-instagram,.row-form{grid-template-columns:minmax(0,1fr) 96px;margin-top:.4rem}
.mini-qr{display:block;background:#fff;border:3px solid var(--ink);padding:5px;box-shadow:5px 5px 0 var(--ink)}
.mini-qr img{width:100%;height:auto;display:block}
@media (max-width:420px){.row-steam,.row-discord{grid-template-columns:minmax(0,1fr) 120px}.row-steam .btn,.row-discord .btn{min-height:120px;font-size:1.5rem}.row-instagram,.row-form{grid-template-columns:minmax(0,1fr) 80px}}
.small{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding-top:.4rem}
.small a{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;text-decoration:none;border-bottom:2px solid var(--ink)}
.small a:hover{background:var(--yellow)}

.qr{display:grid;gap:.6rem;justify-items:center;text-align:center;border:3px solid var(--ink);background:#fff;padding:1rem;box-shadow:5px 5px 0 var(--ink)}
.qr img{width:100%;max-width:300px;height:auto}
.dl{text-decoration:none;border-bottom:2px solid var(--ink)}
.dl:hover{background:var(--yellow)}

.strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;color:var(--ink)}
.strip a{text-decoration:none;border-bottom:2px solid var(--ink)}

@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .qr{max-width:360px;justify-self:center;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- /qr/ : the convention sheet ---------- */
.yard.wide{max-width:1200px}
.qr-head{position:relative;background:var(--paper);border:3px solid var(--ink);box-shadow:10px 10px 0 rgba(11,18,48,.35);padding:clamp(1.25rem,4vw,2rem) clamp(1.25rem,4vw,2.5rem) 1.25rem;display:grid;gap:.4rem;justify-items:start}
.plate-static{position:absolute;top:-3px;left:24px}
.qr-head h1{margin-top:.6rem}
.codes{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(1rem,2.5vw,1.6rem)}
.code{background:#fff;border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);padding:1.1rem 1.1rem 1rem;display:grid;gap:.6rem;justify-items:center;text-align:center}
.code h2{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:.9;color:var(--ink);min-height:2em;display:flex;align-items:center}
.code-steam h2{background:var(--yellow);padding:.2em .5em;border:3px solid var(--ink)}
.code-discord h2{background:var(--ink);color:var(--paper);padding:.2em .5em;border:3px solid var(--ink)}
.code-img{display:block;width:100%}
.code-img img{width:100%;height:auto}
.url{font-size:.66rem;letter-spacing:.04em;text-transform:none;word-break:break-all;opacity:.8}
.strip .mono{color:var(--ink)}

@media print{
  @page{margin:12mm}
  body{background:#fff!important;color:#000}
  .noprint,.skip{display:none!important}
  .yard{max-width:none;padding:0;gap:8mm}
  .qr-head{box-shadow:none;border-width:2px;padding:5mm 8mm 4mm}
  .qr-head h1{font-size:30pt;margin-top:0}
  .qr-brand img{width:26mm}
  .qr-head .lead{font-size:10pt}
  .codes{grid-template-columns:1fr 1fr;gap:6mm}
  .code{box-shadow:none;break-inside:avoid;page-break-inside:avoid;border-width:2px;padding:5mm 6mm 4mm;gap:3mm}
  .code-img{max-width:42mm}
  .codes{gap:4mm}
  .code{padding:3mm 4mm 2mm;gap:2mm}
  .code h2{font-size:18pt;min-height:1.6em}
  .url{font-size:8pt;opacity:1}
  .strip{justify-content:center}
}

/* official logo as the title */
.logo-h1{margin:.2rem 0 .4rem}
.logo-h1 img{width:min(70vw,380px);height:auto;filter:drop-shadow(4px 4px 0 rgba(11,18,48,.35))}
.qr-brand{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.qr-brand img{width:clamp(120px,18vw,200px);height:auto}

.brand-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brand-potato{width:clamp(72px,10vw,120px);height:auto;filter:drop-shadow(3px 3px 0 var(--ink))}