/* ============================================================
   ADAM JACOBS — site.css · THE MISPRINT
   Pressed, not painted. Off-register on purpose. Ink first.

   This file holds everything all four pages share. Each page
   still keeps a small <style> block of its own for the parts
   that are only true on that page. Change a colour, the type
   scale or the footer HERE and every page follows.
   ============================================================ */

/* --- the palette ------------------------------------------- */
:root{
  --plaster:#FAF7F1; --ink:#2A2027;
  --oro:#F2C230; --rosa:#E0457B; --azul:#1F4C8F;
  --muted:#8A8177; --hairline:#E5DDD0;

  /* --- where the colour is allowed to go -------------------
     Plates live in a lane down the edge of the page. The text
     column is measured from the same three numbers, so it
     always stops short of that lane, and site.js caps the
     scroll drift at --drift so a moving plate can never reach
     the text. --gap is the drift budget plus clear air, and
     the air also covers the shadow that the big headlines
     throw. A page whose text is narrow can widen its own
     --lane inside a (min-width:701px) query; nothing else
     needs to change. */
  --lane:   clamp(56px, 13vw, 210px);
  --drift:  30px;
  --plate-h: 60vh;                              /* the tallest skewed plate */
  /* a skewed plate is wider than its box: skewX(6deg) spreads it by
     height x tan(6) , half of that to each side. That has to be
     reserved too, or a tall plate leans into the text. */
  --spread: calc(var(--plate-h) * 0.053);
  --gap:    calc(var(--drift) + var(--spread) + clamp(16px, 1.6vw, 26px));
}

/* --- ground ------------------------------------------------ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--plaster); color:var(--ink);
  font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
}
[hidden]{ display:none !important; }
img, svg{ display:block; max-width:100%; }
figure{ margin:0; }
address{ font-style:normal; }
::selection{ background:var(--oro); }

/* --- getting in and out ------------------------------------ */
.skip{
  position:absolute; left:-9999px; top:16px; z-index:100;
  background:var(--ink); color:var(--plaster);
  padding:10px 18px; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
}
.skip:focus{ left:16px; }
:focus-visible{ outline:3px solid var(--azul); outline-offset:3px; }

/* Sits at the top of the page and scrolls away with it. It used
   to be fixed, which meant it rode down over the text. Every
   page carries a Home link in the footer for the other end. */
.home{
  position:absolute; top:16px; left:5vw; z-index:10;
  font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  background:var(--plaster); padding:2px 6px 4px;
}

/* --- rooms -------------------------------------------------- */
.room{
  min-height:100svh; position:relative; overflow:hidden;
  display:flex; align-items:center;
}
.inner{
  position:relative; z-index:2; margin:0 auto;
  width:min(1000px, calc(100vw - 2 * (var(--lane) + var(--gap))));
}
.oro{ --room:var(--oro); } .rosa{ --room:var(--rosa); } .azul{ --room:var(--azul); }

/* --- THE MISPRINT type system ------------------------------- */
h1{
  font-family:"Arial Black", Arial, sans-serif; font-weight:900;
  font-size:clamp(46px,8.5vw,104px); line-height:.98; letter-spacing:-.02em; margin:0;
  text-shadow:-.07em .05em 0 var(--oro), .07em -.05em 0 var(--rosa), .13em .08em 0 var(--azul);
}
h2{
  font-family:"Arial Black", Arial, sans-serif; font-weight:900;
  font-size:clamp(28px,4.2vw,50px); line-height:1.04; letter-spacing:-.01em; margin:0;
  text-shadow:.09em .06em 0 var(--room, transparent);
}
p{ font-size:clamp(16px,1.9vw,19px); line-height:1.75; max-width:46ch; }
.small, h2.small{
  font-family:Arial, sans-serif; font-size:12px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--muted); margin:0 0 3vh; text-shadow:none;
}

a{ color:var(--ink); text-decoration:none; border-bottom:2px solid var(--ink); padding-bottom:2px; }
a:hover, a:focus-visible{ color:var(--room,var(--rosa)); border-color:var(--room,var(--rosa)); }

/* --- the window: the only moving part -----------------------
   Pinned to the lane. Pages set top/height to give each room
   its own character; they do not set left, right or width. */
.window{
  position:absolute; z-index:1; pointer-events:none;
  right:0; width:var(--lane);
  background:var(--room); transform:skewX(-6deg); will-change:transform;
}
.window--left{ left:0; right:auto; }
.window--slot{ transform:none; }

/* a photo standing in for a plate: it sits on a plaster card with the
   colour plate offset behind it. Inset by the width of that offset so
   the whole thing lands inside the lane rather than off the edge of
   the page. Pages that place their plates by hand (index.html) set
   their own right/width and override this. */
.window--view{
  transform:none; background:var(--plaster); pointer-events:auto;
  right:14px; width:calc(var(--lane) - 14px);
  box-shadow:14px 14px 0 var(--room);
}
/* shown only if the photo is missing or fails to load */
.window--view::before{
  content:attr(data-label);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font:700 11px/1.5 Arial, sans-serif;
  letter-spacing:2px; text-transform:uppercase; text-align:center; padding:16px;
}
.window--view img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; }

/* --- footer -------------------------------------------------- */
footer{
  border-top:1px solid var(--hairline);
  padding:20px 5vw; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted);
}
footer a{ border-bottom:1px solid var(--muted); color:var(--muted); }

/* --- phones --------------------------------------------------
   There is no room for a lane on both sides, so every plate
   moves to the right-hand one and the text is inset from it. */
@media (max-width:700px){
  :root{
    --lane:  clamp(40px, 12vw, 72px);
    --drift: 16px;
    --gap:   calc(var(--drift) + var(--spread) + 14px);
  }
  .room{ padding:12vh 0; align-items:flex-start; }
  .inner{
    width:auto;
    margin-left:5vw;
    margin-right:calc(var(--lane) + var(--gap));
  }
  .window{ left:auto; right:0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .window{ transform:skewX(-6deg) !important; }
  .window--view, .window--slot{ transform:none !important; }
}