:root{
  --paper:#FFFFFF; --paper-2:#FBFAF8; --paper-3:#F4F2EE;
  --line:#E6E3DD; --line-2:#D8D4CC;
  --navy:#18303C; --navy-deep:#0E1D25; --ink:#1B2A31;
  --muted:#6E7C83; --muted-2:#8B979D;
  --gold:#D89C18; --gold-ink:#8A6412; --gold-wash:#FBF3E2;
  --radius:4px; --maxw:1680px;
  --ease:cubic-bezier(.22,.61,.36,1); --t-fast:150ms; --t:220ms;
  --sh-1:0 1px 2px rgba(24,48,60,.06), 0 2px 8px rgba(24,48,60,.05);
  --sh-2:0 6px 18px rgba(24,48,60,.10), 0 2px 6px rgba(24,48,60,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-ink); outline-offset:3px; border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:12px 18px;font-weight:600;border-radius:2px}
.skip:focus{left:12px;top:12px}

/* ---------- header ---------- */
.top{
  position:relative; padding:clamp(26px,5vw,60px) clamp(16px,4vw,48px) clamp(22px,3vw,34px);
  background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line);
}
.top-inner{max-width:var(--maxw); margin:0 auto}
.brandline{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 clamp(16px,3vw,26px);
  font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:var(--gold-ink);
  font-weight:700;
}
.brandline .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}
.brandline .sep{color:var(--line-2)}
.brandline .ev{color:var(--muted); letter-spacing:.14em; font-weight:500}
h1{
  font-family:'Archivo',system-ui,sans-serif; font-weight:800; color:var(--navy);
  font-size:clamp(34px,7.5vw,76px); line-height:.98; letter-spacing:-.024em;
  margin:0 0 14px; text-wrap:balance;
}
h1 .thin{font-weight:400; color:var(--muted)}
.sub{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; color:var(--muted); font-size:14px; margin:0}
.sub b{color:var(--navy); font-weight:700; font-variant-numeric:tabular-nums}
.backlink{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  font-size:13px; font-weight:600; color:var(--muted); text-decoration:none;
  min-height:44px; transition:color var(--t-fast) var(--ease);
}
.backlink:hover{color:var(--gold-ink)}
.backlink svg{width:16px;height:16px;flex:none}

/* ---------- person strip ---------- */
.strip-wrap{
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.90);
  backdrop-filter:blur(14px) saturate(1.6); -webkit-backdrop-filter:blur(14px) saturate(1.6);
  border-bottom:1px solid var(--line);
}
.strip{
  max-width:var(--maxw); margin:0 auto; display:flex; gap:10px; overflow-x:auto;
  padding:12px clamp(16px,4vw,48px); scrollbar-width:thin; scroll-snap-type:x proximity;
}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:3px}
.chip{
  flex:none; display:flex; align-items:center; gap:9px; scroll-snap-align:start;
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:5px 16px 5px 5px; cursor:pointer; color:var(--ink);
  font-size:13px; font-weight:600; min-height:44px; white-space:nowrap; text-decoration:none;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.chip:hover{border-color:var(--gold); background:var(--gold-wash)}
.chip[aria-current="true"]{background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:var(--sh-1)}
.chip[aria-current="true"] .n{color:var(--gold); opacity:1}
.chip img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper-3)}
.chip .n{font-variant-numeric:tabular-nums; color:var(--muted-2); font-size:12px; font-weight:500}

/* ---------- person cards ---------- */
.people{
  max-width:var(--maxw); margin:0 auto; padding:clamp(26px,5vw,54px) clamp(16px,4vw,48px) 90px;
  display:grid; gap:clamp(14px,2vw,26px); grid-template-columns:repeat(2,1fr);
}
@media(min-width:620px){.people{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}}
.pcard{
  position:relative; display:block; text-decoration:none; background:var(--paper);
  border:1px solid var(--line); overflow:hidden; border-radius:var(--radius);
  box-shadow:var(--sh-1);
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pcard:hover{border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--sh-2)}
.pcard .ph{aspect-ratio:3/4; overflow:hidden; background:var(--paper-3)}
.pcard img{width:100%;height:100%;object-fit:cover; transition:transform 450ms var(--ease)}
.pcard:hover img{transform:scale(1.04)}
.pcard .meta{padding:13px 16px 15px}
.pcard .nm{font-family:'Archivo',sans-serif; font-weight:700; font-size:19px; letter-spacing:-.012em; margin:0 0 2px; color:var(--navy)}
.pcard .ct{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; margin:0}

/* ---------- photo grid ---------- */
main{max-width:var(--maxw); margin:0 auto; padding:clamp(20px,3.5vw,38px) clamp(16px,4vw,48px) 120px}
.sec-h{
  display:flex; align-items:baseline; gap:14px; margin:46px 0 16px;
  padding-bottom:11px; border-bottom:1px solid var(--line); scroll-margin-top:84px;
}
.sec-h:first-of-type{margin-top:6px}
.sec-h h2{font-family:'Archivo',sans-serif; font-weight:700; font-size:clamp(20px,3vw,27px); letter-spacing:-.016em; margin:0; color:var(--navy)}
.sec-h .c{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.grid{display:grid; gap:clamp(6px,1vw,14px); grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}}
@media(min-width:900px){.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}}
.cell{
  position:relative; margin:0; padding:0; background:var(--paper-3);
  border:0; cursor:zoom-in; overflow:hidden; border-radius:3px;
  aspect-ratio:var(--ar,3/4); width:100%;
}
.cell img{width:100%;height:100%;object-fit:cover; opacity:0; transition:opacity 340ms var(--ease)}
.cell img.on{opacity:1}
.cell::after{
  content:''; position:absolute; inset:0; border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(24,48,60,.07); transition:box-shadow var(--t-fast) var(--ease); pointer-events:none;
}
.cell:hover::after,.cell:focus-visible::after{box-shadow:inset 0 0 0 3px var(--gold)}

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:200; background:rgba(250,249,247,.985);
  display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.lb[open],.lb.show{display:flex}
.lb-img{
  max-width:calc(100vw - 140px); max-height:calc(100vh - 150px); object-fit:contain;
  border-radius:3px; box-shadow:0 10px 40px rgba(24,48,60,.16), 0 2px 8px rgba(24,48,60,.08);
}
@media(max-width:760px){.lb-img{max-width:calc(100vw - 16px); max-height:calc(100vh - 172px)}}
.lb-bar{
  position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:14px clamp(12px,3vw,26px);
  padding-bottom:max(14px,env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(255,255,255,.97) 55%,rgba(255,255,255,0));
}
.lb-meta{font-size:13px; color:var(--navy); font-weight:600; font-variant-numeric:tabular-nums; min-width:0}
.lb-meta .fn{display:block; color:var(--muted-2); font-size:12px; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; min-width:44px; padding:0 18px; border-radius:3px; cursor:pointer;
  background:var(--navy); color:#fff; border:0; font:600 14px/1 'Inter',sans-serif;
  text-decoration:none; box-shadow:var(--sh-1);
  transition:background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn:hover{background:#0E1D25; box-shadow:var(--sh-2)}
.btn svg{width:17px;height:17px}
.btn.ghost{background:var(--paper); color:var(--navy); border:1px solid var(--line-2); box-shadow:none}
.btn.ghost:hover{background:var(--paper-3); border-color:var(--navy)}
.nav{
  position:absolute; top:50%; transform:translateY(-50%); width:54px; height:80px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--navy);
  border-radius:3px; box-shadow:var(--sh-1);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.nav svg{width:24px;height:24px}
.nav.prev{left:14px} .nav.next{right:14px}
.close{position:absolute; top:14px; right:14px; z-index:2}
@media(max-width:760px){
  .nav{width:46px;height:62px; top:auto; bottom:86px; transform:none}
  .nav.prev{left:8px} .nav.next{right:8px}
}
footer{border-top:1px solid var(--line); background:var(--paper-2); padding:34px clamp(16px,4vw,48px) 56px; color:var(--muted); font-size:13px}
.foot-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between}
footer b{color:var(--gold-ink); font-weight:700}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .pcard:hover{transform:none} .pcard:hover img{transform:none}
}