/* ---------- Fonts (self-hosted Inter) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/inter-300.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2');}

/* ---------- Tokens ---------- */
:root{
  --bg:#fff; --ink:#000;
  --rail:212px;
  --maxgallery:980px; --maxread:600px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:400;
  font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
img{max-width:100%}
/* Off-screen but readable by search engines / screen readers. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}
.rail{width:var(--rail);flex:none;padding:38px 0 38px 42px;position:sticky;top:0;height:100vh}
.brand{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;display:block;margin-bottom:42px}
.nav a{display:block;color:var(--ink);line-height:2.1}
.nav .sec{font-size:11px;font-weight:400;letter-spacing:.02em}
.nav .sub{font-size:11px;font-weight:300;letter-spacing:.02em;padding-left:14px}
.nav .root{font-size:11px;font-weight:300;letter-spacing:.02em}
.nav .gap{display:block;height:24px}
.nav a:hover,.nav a.active{text-decoration:underline;text-underline-offset:3px}

/* keyboard focus — visible underline, no coloured ring (spec §10) */
a:focus-visible,button:focus-visible{outline:none;text-decoration:underline;text-underline-offset:3px}

.stage{flex:1;padding:38px 56px 90px;position:relative;outline:none;
  opacity:1;transition:opacity .15s ease}
.stage.fading{opacity:0}

/* ---------- Gallery (layout B, multi-column stagger) ---------- */
.gallery{columns:2;column-gap:64px;max-width:var(--maxgallery)}
.gallery figure{break-inside:avoid;margin:0 0 56px}
.gallery img{width:100%;height:auto;display:block;background:#f3f3f3}
.gallery figcaption{font-size:10px;font-weight:400;letter-spacing:.05em;margin-top:10px}
.gallery a{display:block}
.gallery a:hover img{opacity:.85;transition:opacity .15s ease}
.empty{font-size:11px;font-weight:300;letter-spacing:.04em}

/* ---------- Work detail ---------- */
.detail{max-width:var(--maxread);margin:0 auto}
/* First image: fit fully within the viewport (never cropped), centred, with
   white breathing room above and below. The .hero shrink-wraps the image so the
   cartel can align to the image's real edge. */
.hero{position:relative;width:fit-content;max-width:100%;margin:24px auto 56px}
.detail .main{display:block;width:auto;height:auto;
  max-width:100%;max-height:80vh;object-fit:contain;background:#f3f3f3}
/* Cartel: outside the first image, to its right, aligned with its top edge. */
.cartel{position:absolute;top:0;left:100%;margin-left:28px;width:max-content;max-width:220px;text-align:left}
.cartel .ttl{font-size:13px;font-weight:400;letter-spacing:.01em}
.cartel .meta{font-size:10.5px;font-weight:300;letter-spacing:.04em;line-height:1.85;margin-top:6px}
.detail .more{width:100%;display:block;background:#f3f3f3;margin-bottom:10px}
.more-cap{font-size:10px;font-weight:300;letter-spacing:.05em;margin:0 0 56px}
.pager{display:flex;justify-content:space-between;max-width:var(--maxread);margin:0 auto;
  font-size:10.5px;font-weight:300;letter-spacing:.05em;border-top:1px solid var(--ink);padding-top:14px}
.pager a:hover{text-decoration:underline;text-underline-offset:3px}
.pager .spacer{visibility:hidden}
/* Numbering + prev/next arrows, top-right of the work. */
.idx{position:absolute;top:34px;right:56px;
  display:flex;align-items:center;gap:14px;font-size:10px;font-weight:300}
.idx .num{letter-spacing:.08em}
.idx .nav-arrow{font-size:15px;line-height:1;color:var(--ink)}
.idx .nav-arrow:hover{opacity:.55;transition:opacity .15s ease}
.idx .spacer{visibility:hidden}

/* ---------- Text pages (about / contact) ---------- */
.page{max-width:var(--maxread)}
.page h1{font-size:13px;font-weight:400;letter-spacing:.02em;margin:0 0 18px}
.page p{font-size:12px;font-weight:300;letter-spacing:.01em;line-height:1.9;margin:0 0 14px}
.page a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Mobile bar + overlay (hidden on desktop) ---------- */
.topbar{display:none}
.overlay{display:none}

@media (max-width:900px){
  .rail{display:none}
  .topbar{display:flex;align-items:center;justify-content:space-between;
    padding:18px 22px;position:sticky;top:0;background:var(--bg);z-index:20;
    border-bottom:1px solid var(--ink)}
  .topbar-brand{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
  .topbar-menu{font:inherit;font-size:11px;font-weight:400;background:none;border:none;
    color:var(--ink);padding:0;cursor:pointer;letter-spacing:.04em}
  .overlay{display:block;position:fixed;inset:0;background:var(--bg);z-index:30;padding:22px}
  .overlay[hidden]{display:none}
  .overlay-close{position:absolute;top:18px;right:22px;font:inherit;font-size:11px;
    background:none;border:none;color:var(--ink);cursor:pointer;letter-spacing:.04em}
  .overlay-nav{margin-top:64px}
  .overlay-nav a{display:block;color:var(--ink)}
  .overlay-nav .sec{font-size:18px;font-weight:400;line-height:2}
  .overlay-nav .sub{font-size:18px;font-weight:300;line-height:2;padding-left:16px}
  .overlay-nav .root{font-size:18px;font-weight:300;line-height:2}
  .overlay-nav .gap{display:block;height:22px}
  .stage{padding:24px 22px 70px}
  .gallery{columns:1;column-gap:0}
  .idx{position:static;justify-content:flex-start;margin-bottom:14px}
  .detail .main{max-height:72vh}
  /* Cartel below the image, left-aligned, on mobile. */
  .cartel{position:static;left:auto;margin:14px 0 0;max-width:none;text-align:left}
}