/* IronWar guest page. Sections: fonts, tokens, base, layout, shrine, signal,
   lore, footer, breakpoints. Keep new rules inside their section instead of
   appending overrides at the end of the file. */

/* -------------------------------------------------------------- fonts -- */
@font-face{font-family:Montserrat;src:url('../fonts/montserrat-medium.woff2') format('woff2');font-weight:500;font-display:swap}

/* ------------------------------------------------------------- tokens -- */
:root{
  color-scheme:dark;
  --black:#000;
  --text:#d9dce3;
  --focus:#abb9db;
  --content-width:800px;
  --body-font:Montserrat,Arial,sans-serif;
  /* lore text: system Verdana at 12px on an 18px line, the body text of
     forum and game pages around 2006. 10px was tested as well and dropped:
     on current screens it comes out smaller than it did back then. */
  --lore-font:Verdana,Arial,sans-serif;
  --lore-type:12px/18px;
  /* nominal size of a frame corner casting; sets the room around the shrine */
  --corner:clamp(60px,18vw,160px);
  /* RELAUNCH tear palette: blood red and a cold steel blue */
  --fault:#8c2328;
  --cold:#4d5b70;
}

/* --------------------------------------------------------------- base -- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* The frame castings reach past the picture edge; the page never scrolls sideways. */
html{overflow-x:clip}
/* Phones must not enlarge the small lore text on their own (iOS landscape). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{background:var(--black)}
body{color:var(--text);font:500 14px/1.85 var(--body-font)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:5px}
a:hover{color:#fff}
button{font:inherit}
button,a{touch-action:manipulation}
:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
.skip-link{position:fixed;top:-100px;left:12px;z-index:10;padding:12px;background:#fff;color:#000}
.skip-link:focus{top:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ------------------------------------------------------------- layout -- */
/* The side margin always leaves room for the frame castings, which reach up
   to 14.2 % of their size past the picture edge. */
.page{width:min(var(--content-width),100% - 2 * max(16px,var(--corner) * .142 + 4px));margin-inline:auto}
.masthead{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:12px;padding-top:24px}
.logo{width:min(220px,100%)}
.logo img{width:100%}
.languages{display:flex;align-items:center;justify-self:start;font-size:10px;color:#9296a1}
.languages a{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 8px;color:#9b9fac;text-decoration:none}
.languages a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:6px}
.languages a:hover{color:#fff}
.winter-scene img{width:100%;aspect-ratio:16/9}

/* ------------------------------------------------------------- shrine -- */
/* The iron frame holds only the ice picture. Rails sit on the picture edges,
   castings on its corners. The guardian is stretched across the bottom: its
   arms lie on the bottom rail, its wrist chains run up under the ring plates
   of the lower castings and its body hangs into the dark below the picture.
   All frame parts are sized in container units of the shrine, so frame and
   guardian scale as one piece at every width.
   Stacking: picture, bottom rail 1, guardian 2, other rails 3, castings 4,
   and the guardian's arms, shackles and hands once more on top 5.
   Every frame part is decoration and ignores the pointer. */
.shrine{
  position:relative;
  isolation:isolate;
  container-type:inline-size;
  /* Above: room for the top castings. Below: the guardian reaches 21.3 % of
     the width under the picture and RELAUNCH follows right after it. The
     heading's own top margin collapses into this one. */
  margin:calc(var(--corner) * .2 + 12px) 0 calc(21.3% + 12px);
}
.frame{
  --cast:20cqw;       /* edge length of a corner casting */
  --beam:18cqw;       /* length of the horizontal rail artwork; its bar then matches the casting arms */
  --pic-h:56.25cqw;   /* picture height at 16:9 */
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* Rails, drawn from the final artwork without stretching. The side rails
   show the vertical artwork once over the picture height, which makes their
   bar as thick as the casting posts. Their boxes keep only the visible
   middle 28 % of the artwork, so the transparent rest never widens the page. */
.rail{position:absolute;z-index:3}
.rail--left,.rail--right{--art-w:calc(var(--pic-h) / 3);top:0;width:calc(var(--art-w) * .28);height:var(--pic-h);background:url('../assets/images/frame-vertical.webp') 50% 50%/var(--art-w) 100% no-repeat}
.rail--left{left:calc(var(--art-w) * -.14)}
.rail--right{right:calc(var(--art-w) * -.14)}
/* Top and bottom rails repeat the plain double bar of the horizontal artwork
   (x 560-960 of its 2172 px) at the artwork's own scale; slice numbers are
   pixels of the 480 x 160 WebP. The top rail carries the complete artwork
   once as its crest, and the bar underneath fills the crest's forked ends. */
.rail--top,.rail--bottom{
  left:0;
  width:100%;
  height:calc(var(--beam) / 3);
  border-style:solid;
  border-width:0;
  border-image:url('../assets/images/frame-horizontal.webp') 58 267.8 58.4 123.8 fill/calc(var(--beam) * 58 / 480) 0 calc(var(--beam) * 58.4 / 480)/0 repeat stretch;
}
.rail--top{top:calc(var(--beam) / -6)}
.rail--bottom{z-index:1;bottom:calc(var(--beam) / -6)}
.rail--top::after{content:"";position:absolute;inset:0 calc(50% - var(--beam) / 2);background:url('../assets/images/frame-horizontal.webp') 50% 50%/100% 100% no-repeat}

/* Castings sit on the picture corners so their arms run along the rail
   centre lines. --cx and --cy give that line on the artwork as a fraction
   of its size. */
.corner{position:absolute;z-index:4;width:var(--cast);height:var(--cast)}
.corner--tl,.corner--bl{left:calc(var(--cast) * var(--cx) * -1)}
.corner--tr,.corner--br{right:calc(var(--cast) * (var(--cx) - 1))}
.corner--tl,.corner--tr{top:calc(var(--cast) * var(--cy) * -1)}
.corner--bl,.corner--br{bottom:calc(var(--cast) * (var(--cy) - 1))}
.corner--tl{--cx:.1156;--cy:.11}
.corner--tr{--cx:.883;--cy:.114}
.corner--bl{--cx:.14;--cy:.876}
.corner--br{--cx:.86;--cy:.877}

/* The guardian artwork is as wide as the picture and its wrist chains leave
   it at the two top corners. With its top edge at 44.4 % of the width the
   arms lie on the bottom rail and the last links end under the ring plates
   of the lower castings. */
.guardian{position:absolute;z-index:2;left:0;top:44.4cqw;width:100%}
/* The same artwork again above the castings, cut free of both chain ends:
   hands, shackles and forearms lie on the frame, the chains run under it. */
.guardian--front{z-index:5;clip-path:polygon(6% 0,94% 0,100% 20.7%,100% 100%,0 100%,0 20.7%)}

/* --------------------------------------------------------- signal ------ */
.signal{text-align:center;margin-top:25px}
.signal h2{font:500 13px/1.6 var(--body-font);letter-spacing:.23em;color:#d0d5df}

/* RELAUNCH 2027 tears now and then; guest.js sets .is-torn for one run.
   The line slips a pixel or two sideways while thin slices of it are torn
   out, pushed aside and shown in blood red or cold steel. Each slice covers
   the line beneath it, so the text looks cut, not doubled. Hard cuts only,
   about a third of a second, then the line is still again. */
.signal h2{position:relative}
.signal h2::before,.signal h2::after{content:attr(data-text) / "";position:absolute;inset:0;background:var(--black);opacity:0;pointer-events:none}
.signal h2::before{color:var(--fault)}
.signal h2::after{color:var(--cold)}
.signal h2.is-torn{animation:tear-line .3s step-end}
.signal h2.is-torn::before{animation:tear-red .3s step-end}
.signal h2.is-torn::after{animation:tear-cold .3s step-end}
@keyframes tear-line{8%{transform:translateX(2px)}30%{transform:translateX(-1px);opacity:.8}52%{transform:translateX(1px);opacity:1}70%{transform:none}}
@keyframes tear-red{8%{opacity:1;clip-path:inset(62% 0 28%);transform:translateX(-3px)}30%{opacity:0}}
@keyframes tear-cold{30%{opacity:1;clip-path:inset(30% 0 59%);transform:translateX(3px)}52%{opacity:0}}

/* ----------------------------------------------------------------lore -- */
/* Set like a browsergame page from 2006: small, compact, ragged right. The
   measure counts characters (ch) and holds about 85 per line; at this width
   EN, DE and ES all break evenly without a short last line. The signature
   closes the block on the right, set in by two characters so it lines up
   with the ragged edge instead of the empty box edge. The heading keeps its
   old position: its tighter line height is given back in the top margin. */
.crown-law{max-width:68ch;margin:40px auto 0;font:var(--lore-type) var(--lore-font)}
.crown-law h2{text-align:center;font:500 clamp(20px,2.8vw,27px)/1.25 var(--body-font);letter-spacing:.02em;margin-bottom:12px;color:#e2e4ec}
.crown-law blockquote{color:#b2b6c1;text-wrap:pretty}
.attribution{margin-top:8px;padding-right:2ch;text-align:right;color:#c3c7d0}

/* ------------------------------------------------------------- footer -- */
.footer{padding:52px 0 20px;text-align:center;color:#9398a5;font-size:10px}
.footer nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px}
.footer a{display:inline-flex;align-items:center;min-height:48px;text-decoration:none}

/* -------------------------------------------------------- breakpoints -- */
@media(min-width:650px){
  .masthead{grid-template-columns:minmax(0,1fr) auto;padding-top:28px}
  .logo{width:250px}
  .languages{justify-self:end}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .languages,.frame{display:none}
  .page{width:100%}
}