@font-face{
  font-family:"Geist";
  src:url("../fonts/Geist.ttf") format("truetype");
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:"Geist Mono";
  src:url("../fonts/GeistMono.ttf") format("truetype");
  font-weight:100 900;
  font-display:swap;
}
:root{
  --ground:#EDEFF1; --card:#F7F8F9; --graphite:#2F3439; --mid:#5C636B; --hair:#C3C8CD; --hair-2:#D9DDE0;
  --sans:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --metal:linear-gradient(172deg,#454C53 0%,#A3AAB1 20%,#F2F4F5 35%,#7F878F 52%,#D5D9DD 66%,#5F676F 84%,#B4BAC0 100%);
  --metal-text:linear-gradient(172deg,#454C53 0%,#A3AAB1 20%,#D5D9DD 35%,#7F878F 52%,#D5D9DD 66%,#5F676F 84%,#B4BAC0 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--graphite);font-family:var(--sans);font-weight:350;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}

a:focus-visible{outline:2px solid #2F3439;outline-offset:3px;border-radius:6px}
.bar nav a:focus-visible,.open:focus-visible{border-radius:999px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.bar{display:flex;justify-content:space-between;align-items:center;padding:28px 64px;font-size:14px}
.mark{display:flex;align-items:center;gap:12px;font-weight:500;letter-spacing:.01em;font-size:16px}
.mark img{width:30px;height:30px;border-radius:50%}
.bar nav{display:flex;gap:6px}
.bar nav a{display:flex;gap:10px;align-items:baseline;padding:8px 14px;border:1px solid transparent;border-radius:999px;color:var(--mid)}
.bar nav a span{font-family:var(--sans);font-weight:450;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.bar nav a:hover{border-color:var(--hair);color:var(--graphite)}

/* the specimen card */
.stage{padding:8px 64px 0}
.card{position:relative;height:calc(100vh - 110px);min-height:640px;max-height:780px;border-radius:22px;overflow:hidden;
  background:#F4F5F6;border:1px solid #CDD2D6;
  box-shadow:0 1px 0 #fff inset,0 50px 90px -50px rgba(40,48,56,.45),0 10px 24px -18px rgba(40,48,56,.35)}
.card::before{content:"";position:absolute;inset:0;background:url("../img/brushed.jpg") center/cover;opacity:.38;mix-blend-mode:multiply}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,.35) 62%,rgba(255,255,255,0) 80%)}
.card > *{position:relative;z-index:1}
.inner{position:absolute;inset:40px 48px 36px;display:grid;grid-template-rows:auto 1fr auto}
/* a hairline frame inside the plate, like the edge of a table cell */
.card .frame{position:absolute;inset:16px;border:1px solid rgba(47,52,57,.16);border-radius:12px;pointer-events:none}
.corner{display:flex;justify-content:space-between;align-items:flex-start}
.corner .z{font-family:var(--sans);font-weight:420;font-size:64px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#3A4046}
.corner .crest{width:40px;height:40px;border-radius:50%}
.word{align-self:center;display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:-30px}
.word .ag{font-weight:420;font-size:clamp(220px,30vw,420px);line-height:1;letter-spacing:-.035em;padding:0 .04em .02em;
  background:linear-gradient(176deg,#3E454C 0%,#8E969E 24%,#E9ECEE 40%,#6E767E 56%,#C3C8CD 70%,#4F575F 88%,#9AA1A8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 -1px 0 rgba(50,56,62,.3))}
.word .vn{margin-top:22px;font-weight:350;font-size:44px;letter-spacing:-.005em;color:var(--graphite)}
.legend{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(47,52,57,.22)}
.legend a{display:flex;gap:12px;align-items:baseline;padding:16px 0 0;font-size:15px;color:var(--graphite)}
.legend a span{font-family:var(--sans);font-weight:450;font-size:13px;font-variant-numeric:tabular-nums;color:#4A5057}
.legend a:hover{color:var(--mid)}

/* the three entries */
.entries{padding:96px 64px 40px}
.entry{display:grid;grid-template-columns:120px minmax(0,1.05fr) minmax(0,1fr) 120px;gap:40px;align-items:start;padding:44px 0 48px;border-top:1px solid var(--hair)}
.entry:last-child{border-bottom:1px solid var(--hair)}
.entry .n{font-family:var(--sans);font-weight:420;font-size:22px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:#545B62;padding-top:12px;display:flex;flex-direction:column;gap:18px}
.entry h2{font-weight:300;font-size:clamp(40px,4vw,58px);line-height:1.02;letter-spacing:-.025em}
.entry p{font-size:19px;line-height:1.6;color:#4A5057;padding-top:10px;max-width:30em}
.entry .ref{font-family:var(--mono);font-size:13px;color:var(--mid);margin-top:16px;line-height:1.5}
.open{justify-self:end;margin-top:12px;display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--hair);border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--graphite);background:linear-gradient(180deg,#FAFBFB,#E6E9EB);transition:border-color .25s}
.open::after{content:"";width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.open:hover{border-color:var(--mid)}

/* contact + colophon */
footer{padding:40px 64px 36px}
.contact{display:grid;grid-template-columns:120px 1fr 1fr;gap:40px;align-items:baseline;padding-bottom:56px}
.contact .n{font-family:var(--mono);font-size:13px;color:var(--mid)}
.contact a{font-weight:300;font-size:clamp(30px,3.2vw,46px);letter-spacing:-.02em;
  background:var(--metal-text);background-size:100% 160%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:brightness(.62) contrast(1.3)}
.contact a:hover{filter:brightness(.4)}
.colo{display:flex;justify-content:space-between;align-items:center;padding-top:22px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:12px;color:var(--mid)}
.colo .l{display:flex;align-items:center;gap:14px}
.colo img{width:26px;height:26px;border-radius:50%}
.colo .links{display:flex;gap:24px}
.colo .links a:hover{color:var(--graphite)}

@media (max-width:900px){
  .bar{padding:18px 18px}
  .bar nav a{padding:6px 8px}
  .bar nav a b{display:none}
  .bar nav a span{font-size:12px}
  .mark{font-size:15px}
  .stage{padding:4px 14px 0}
  .card{height:auto;min-height:0;max-height:none;border-radius:16px}
  .inner{position:relative;inset:auto;padding:26px 26px 22px;gap:0}
  .card .frame{inset:10px;border-radius:10px}
  .corner .z{font-size:40px}
  .corner .crest{width:34px;height:34px}
  .word{padding:26px 0 34px;margin-top:0}
  .word .ag{font-size:168px}
  .word .vn{font-size:30px;margin-top:12px}
  .legend{grid-template-columns:1fr}
  .legend a{padding:12px 0 0;font-size:15px}
  .entries{padding:56px 18px 20px}
  .entry{grid-template-columns:1fr;gap:14px;padding:34px 0 38px}
  .entry .n{flex-direction:row;align-items:center;padding-top:0;font-size:20px}
  .entry h2{font-size:40px}
  .entry p{font-size:18px;padding-top:4px}
  .open{justify-self:start;margin-top:8px}
  footer{padding:28px 18px 28px}
  .contact{grid-template-columns:1fr;gap:10px;padding-bottom:36px}
  .contact a{font-size:26px}
  .colo{flex-direction:column;align-items:flex-start;gap:14px}
  .colo .links{flex-wrap:wrap;gap:10px 18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* 404 */
.nf{min-height:100vh;display:flex;flex-direction:column}
.nf-main{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 18px}
.nf-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding:56px 72px;border-radius:22px;overflow:hidden;
  background:#F4F5F6;border:1px solid #CDD2D6;font-weight:300;font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;color:var(--graphite);
  box-shadow:0 1px 0 #fff inset,0 50px 90px -50px rgba(40,48,56,.45),0 10px 24px -18px rgba(40,48,56,.35);transition:border-color .25s}
.nf-cell::before{content:"";position:absolute;inset:0;background:url("../img/brushed.jpg") center/cover;opacity:.38;mix-blend-mode:multiply}
.nf-cell > *{position:relative}
.nf-cell img{width:64px;height:64px;border-radius:50%}
.nf-cell:hover{border-color:var(--mid)}
.nf-cell:focus-visible{border-radius:22px}