/* Joey van Beekveld — portfolio
   Placeholder type: Spline Sans Mono (stand-in for GT Pressura Mono until licensed).
   Palette: bg #F8F7F4, ink #f05343.

   Rail positions below are lifted directly from Joey's 1440×900 InDesign
   sketch (measured in %, so they hold their proportions as viewport height
   changes): role 11.9%, "PROJECTS" / right-rail heading 34–35%, "Let's
   work together" 86.7%, image-stack top 14.4%. See conversation history
   for the pixel measurements this was checked against — don't eyeball new
   values without re-checking the sketch. */

:root{
  --bg:#F8F7F4;
  --ink:#f05343;
  --rail-left:260px;
  --rail-right:494px;
  --inset:36px;
  --fs:12px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:var(--fs);
  line-height:1.55;
  font-weight:400;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--inset);top:12px;z-index:10}

/* The top bar and the home tagline exist only for the mobile layout —
   hidden entirely on desktop, which is unchanged. */
.topbar{display:none}
.meta__tagline{display:none}

/* ---------- Rails (fixed, never scroll) ---------- */
.rail{
  position:fixed;
  top:0;bottom:0;
  overflow:hidden;               /* Joey's rule: rails hold still. Keep copy bounded. */
  text-transform:uppercase;
  z-index:2;
}
.rail--left{left:0;width:var(--rail-left)}
.rail--right{right:0;width:var(--rail-right)}

/* Left rail — role / nav / contact positioned at fixed % offsets, matching the sketch */
.role{
  position:absolute;top:11.9%;left:var(--inset);right:var(--inset);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.4;
}
.role[aria-current]{text-decoration:underline;text-underline-offset:3px}

.projects{position:absolute;top:35%;left:var(--inset);right:var(--inset)}
.projects__title{font-weight:700;margin-bottom:1.7em}
.projects__group + .projects__group{margin-top:1.7em}
.projects__cat{font-weight:700;margin-bottom:.5em}
.projects ul{list-style:none}
.projects li a{color:var(--ink);display:block;padding:.12em 0;font-weight:500}
.projects li a[aria-current]{text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){
  .projects li a:hover{opacity:.55}
  .role:hover,.contact-link:hover{opacity:.55}
}

.contact-link{position:absolute;top:86.7%;left:var(--inset);font-weight:700}
.contact-link[aria-current]{text-decoration:underline;text-underline-offset:3px}

/* Right rail — the meta block is vertically centred in the viewport, so
   short and long descriptions both sit balanced rather than a long one
   crowding the bottom. (The rail clips symmetrically if a description is
   ever taller than the viewport.) */
.meta{position:absolute;top:50%;transform:translateY(-50%);left:0;width:378px}
.meta__heading{font-weight:700;margin-bottom:1.6em;letter-spacing:.02em}
.meta__body{text-transform:none}
.meta__body p + p{margin-top:1em}
.meta__link,.meta__email{margin-top:1.6em;text-transform:uppercase;letter-spacing:.04em}
.meta__link a,.meta__email a{text-decoration:underline;text-underline-offset:3px}

.meta__name{font-weight:700;letter-spacing:.04em;font-size:1.8em}

/* ---------- Centre column (the only thing that scrolls) ----------
   The content band runs from where the left-rail text ends (~210px) to
   where the right-rail text starts (1440-946 = 494px from the right).
   Every visual is centred in that band, so it never touches the text —
   which also means a wide visual can only get so big, and that's fine. */
.stage{
  margin-left:210px;
  margin-right:494px;
  min-height:100vh;
  padding:14.4vh 0 22vh;
}

.stack{
  display:flex;flex-direction:column;align-items:center;
  max-width:calc(100% - 100px);margin-left:auto;margin-right:auto;  /* keep a gap to the right-rail text at any window width */
}
.stack__item{width:349px;max-width:100%;margin-bottom:51px}   /* sketch gap ~68px; Joey asked for a quarter less */
.stack__item:last-child{margin-bottom:0}
.stack__item--wide{width:560px;max-width:100%}   /* landscape spreads / web screenshots — auto-applied in index.php */

.zoom{display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:zoom-in}
.zoom img{width:100%;background:#ececE7}

.stage__placeholder{
  width:349px;max-width:100%;margin:0 auto;
  aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #f0534333;
  text-transform:uppercase;letter-spacing:.05em;opacity:.5;
  font-size:11px;
}

/* ---------- Lightbox: click any visual to see it larger, in-page ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:56px;
  background:rgba(248,247,244,.95);
}
.lightbox[hidden]{display:none}
.lightbox__img{
  max-width:calc(100vw - 112px);
  max-height:calc(100vh - 112px);
  width:auto;height:auto;
  object-fit:contain;
  border:2px solid var(--ink);
}
.lightbox__close{
  position:fixed;top:20px;right:26px;
  width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--ink);font-family:inherit;font-size:26px;line-height:1;
}
.lightbox__count{
  position:fixed;top:24px;left:28px;
  color:var(--ink);font-size:11px;letter-spacing:.12em;
}

/* ---------- Narrower desktop ---------- */
@media (max-width:1180px){
  :root{--rail-left:220px;--rail-right:380px;--inset:28px}
  .meta{width:300px}
  .stage{margin-left:180px;margin-right:380px}
  .stack__item{width:280px}
  .stack__item--wide{width:420px}
}

/* ============================================================
   MOBILE  (≤ 900px) — a distinct layout. Desktop is untouched.
   Fixed top bar with a Menu button; the nav becomes a full-screen
   slide-down panel; on a project the description comes before the
   visuals; the lightbox takes swipes.
   ============================================================ */
@media (max-width:900px){
  :root{--fs:13px}

  body{padding-top:52px}

  /* --- top bar --- */
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    position:fixed;top:0;left:0;right:0;height:52px;z-index:20;
    padding:0 18px;
    background:var(--bg);
    border-bottom:1px solid #f0534326;
    text-transform:uppercase;
  }
  .topbar__name{font-weight:700;letter-spacing:.04em;font-size:12px}
  .topbar__toggle{
    border:0;background:none;cursor:pointer;
    color:var(--ink);font:inherit;font-weight:700;font-size:12px;
    text-transform:uppercase;letter-spacing:.06em;
    padding:8px;margin-right:-8px;
  }

  /* --- nav: full-screen panel below the bar, slides in on .menu-open --- */
  .rail{position:static}
  .rail--left{
    position:fixed;top:52px;left:0;right:0;bottom:0;width:auto;
    z-index:15;background:var(--bg);
    overflow-y:auto;overscroll-behavior:contain;
    padding:22px 22px 44px;
    transform:translateY(-108%);
    transition:transform .28s ease;
    visibility:hidden;
  }
  body.menu-open .rail--left{transform:translateY(0);visibility:visible}
  body.menu-open{overflow:hidden}

  /* One size throughout, matching the top bar (12px). */
  .role,.projects,.projects__title,.projects__cat,.projects li a,.contact-link{
    font-size:12px;letter-spacing:.04em;
  }
  .role,.projects,.contact-link{
    position:static;left:auto;right:auto;top:auto;
    display:block;
  }
  .role{padding:7px 0 14px;font-weight:700;line-height:1.4}
  .projects{margin:0}
  .projects__title{font-weight:700;opacity:.45;margin-bottom:1.3em}
  .projects__group + .projects__group{margin-top:1.4em}
  .projects__cat{font-weight:700;margin-bottom:.5em}
  .projects li a{font-weight:500;padding:7px 0}
  .contact-link{margin-top:1.6em;font-weight:700;padding:7px 0}

  /* --- content: meta first, then the visuals --- */
  body{display:flex;flex-direction:column}
  .rail--right{order:1}
  .stage{order:2}

  /* On a phone these fill the width; on a tablet they stay a comfortable
     reading measure, centred. */
  .rail--right{
    position:static;width:auto;height:auto;overflow:visible;
    padding:26px 22px 6px;
    max-width:620px;margin-left:auto;margin-right:auto;
  }
  .meta{
    position:static;width:auto;max-width:none;transform:none;
  }
  .meta__heading{font-size:15px;margin-bottom:1.2em}
  .meta__body{line-height:1.62}
  .meta--home{text-align:left}
  .meta__name{font-size:1.7em}
  .meta__tagline{display:block;font-weight:700;letter-spacing:.03em;margin-top:.45em}

  /* Home: sit the name + role in the vertical middle of the screen. */
  body.is-home .rail--right{
    min-height:calc(100vh - 52px);
    min-height:calc(100dvh - 52px);
    display:flex;flex-direction:column;justify-content:center;
    padding-bottom:26px;
  }

  .stage{margin:0;padding:14px 0 44px;min-height:0}
  .stack{padding:0 16px;max-width:592px;margin-left:auto;margin-right:auto}
  .stack__item,.stack__item--wide,.stage__placeholder{width:100%;max-width:none;margin-bottom:30px}

  /* --- lightbox: near full-bleed, opaque, big close target --- */
  .lightbox{padding:8px;background:var(--bg)}
  .lightbox__img{max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-width:1px}
  .lightbox__close{top:6px;right:6px;width:44px;height:44px;font-size:30px;z-index:1}
  .lightbox__count{top:20px;left:18px}
}