/* ============================================================
   Castling Labs
   ============================================================ */

:root{
  --ink:        #100E0B;
  --ink-2:      #18140F;
  --ink-3:      #221C15;
  --ivory:      #EDE6D3;
  --ivory-70:   rgba(237,230,211,0.70);
  --ivory-50:   rgba(237,230,211,0.50);
  --ivory-28:   rgba(237,230,211,0.28);
  --ivory-12:   rgba(237,230,211,0.12);
  --walnut:     #3A2C20;
  --brass:      #C4A056;
  --brass-2:    #8C6E32;
  --oxide:      #9A4E38;
  --line:       rgba(237,230,211,0.12);
  --square-light: #E9DFC6;
  --square-dark:  #1C1710;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --header-h: 76px;
}

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

html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(176,139,60,0.10), transparent 55%),
    radial-gradient(900px 520px at 100% 100%, rgba(138,70,50,0.08), transparent 50%),
    var(--ink);
  color:var(--ivory);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  opacity:0;
  animation:page-fade 0.8s ease forwards;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:40;
  opacity:0.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes page-fade{ to{ opacity:1; } }

main{ flex:1; }

a{ color:inherit; text-decoration:none; }

::selection{
  background:rgba(196,160,86,0.35);
  color:var(--ivory);
}

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 32px;
  width:100%;
}

/* ---------- Header ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  background:rgba(16,14,11,0.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

body[data-page="home"] .site-header{
  background:rgba(16,14,11,0.42);
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.wordmark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-size:18px;
  font-weight:500;
  letter-spacing:0.01em;
}

.wordmark .mark{
  width:18px;
  height:18px;
  fill:var(--brass);
  flex:0 0 auto;
}

.site-nav{ display:flex; gap:28px; }

.site-nav a{
  position:relative;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ivory-50);
  padding-left:14px;
}

.site-nav a::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--brass);
  transform:translateY(-50%) scale(0);
  transition:transform 0.25s cubic-bezier(.65,0,.35,1);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.active{
  color:var(--ivory);
}

.site-nav a:hover::before,
.site-nav a:focus-visible::before,
.site-nav a.active::before{
  transform:translateY(-50%) scale(1);
}

/* ---------- Footer ---------- */

.site-footer{
  border-top:1px solid var(--line);
  padding:26px 0;
  background:rgba(0,0,0,0.18);
}

.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 20px;
  font-size:13px;
  color:var(--ivory-50);
}

.footer-castles{
  font-family:var(--font-display);
  color:var(--brass);
  letter-spacing:0.12em;
}

.footer-links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 18px;
}

.footer-row a:hover{ color:var(--ivory); }

.footer-links a[data-page="legal"].active{ color:var(--ivory); }

/* ============================================================
   Landing page
   ============================================================ */

.hero{
  --mx: 50%;
  --my: 42%;
  position:relative;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center;
  padding:120px 24px 80px;
  perspective:1200px;
}

.hero-spot{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(420px 420px at var(--mx) var(--my), rgba(196,160,86,0.16), transparent 58%);
  transition:background 0.2s ease;
}

.hero-glow{
  position:absolute;
  inset:16% 18%;
  background:radial-gradient(circle, rgba(196,160,86,0.18), transparent 68%);
  filter:blur(10px);
  pointer-events:none;
}

.hero-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%, transparent 34%, rgba(16,14,11,0.28) 70%, rgba(16,14,11,0.78) 100%),
    linear-gradient(180deg, rgba(16,14,11,0.2), transparent 16%, transparent 82%, var(--ink));
}

.hero-board{
  position:absolute;
  top:50%;
  left:50%;
  width:min(88vh, 760px);
  height:min(88vh, 760px);
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  -webkit-mask-image:radial-gradient(circle, black 54%, transparent 86%);
  mask-image:radial-gradient(circle, black 54%, transparent 86%);
  opacity:0.35;
  animation:board-in 1.3s ease forwards;
  animation-delay:0.12s;
  transition:transform 0.45s ease;
  pointer-events:none;
}

@keyframes board-in{ to{ opacity:1; } }

.hero-board svg{ width:100%; height:100%; display:block; }

.sq-light{ fill:#3D3324; }
.sq-dark{ fill:#1A1610; }

.move-arrows{
  color:var(--brass);
  opacity:0.55;
  pointer-events:none;
}

.move-arrows path{
  stroke-dasharray:200;
  stroke-dashoffset:200;
}

.arrow-e4{ animation:draw-arrow 0.6s ease 0.6s forwards; }
.arrow-e5{ animation:draw-arrow 0.6s ease 1.35s forwards; }
.arrow-nf3{ animation:draw-arrow 0.6s ease 2.1s forwards; }
.arrow-nc6{ animation:draw-arrow 0.6s ease 2.85s forwards; }
.arrow-bc4{ animation:draw-arrow 0.6s ease 3.6s forwards; }
.arrow-nf6{ animation:draw-arrow 0.6s ease 4.35s forwards; }
.arrow-oo{ animation:draw-arrow 0.6s ease 5.2s forwards; }

@keyframes draw-arrow{
  to{ stroke-dashoffset:0; }
}

.hero-board.is-settled .move-arrows{
  opacity:0;
  transition:opacity 1.1s ease 0.4s;
}

.hero-board.is-settled .king-w,
.hero-board.is-settled .rook-w{
  color:var(--brass);
}

.hero-board .lit{
  fill:var(--brass);
  opacity:0;
}

.hero-board .lit-e2,
.hero-board .lit-e4{ animation:sq-lit 0.6s ease 0.8s forwards; }
.hero-board .lit-e7,
.hero-board .lit-e5{ animation:sq-lit 0.6s ease 1.55s forwards; }
.hero-board .lit-g1,
.hero-board .lit-f3{ animation:sq-lit 0.6s ease 2.3s forwards; }
.hero-board .lit-b8,
.hero-board .lit-c6{ animation:sq-lit 0.6s ease 3.05s forwards; }
.hero-board .lit-f1,
.hero-board .lit-c4{ animation:sq-lit 0.6s ease 3.8s forwards; }
.hero-board .lit-g8,
.hero-board .lit-f6{ animation:sq-lit 0.6s ease 4.55s forwards; }
.hero-board .lit-e1,
.hero-board .lit-h1{ animation:sq-lit 0.6s ease 5.4s forwards; }

@keyframes sq-lit{
  to{ opacity:0.22; }
}

.board-pieces{ fill:currentColor; }

.piece-w{ color:var(--ivory); }
.piece-b{ color:var(--oxide); }

.piece-idle{
  opacity:0.42;
}

.piece.pawn-w,
.piece.pawn-b,
.piece.knight-w,
.piece.knight-b1,
.piece.knight-b2,
.piece.bishop-w,
.piece.king-w,
.piece.rook-w{
  opacity:0.96;
}

.hero-content{
  position:relative;
  z-index:1;
  max-width:min(28em, calc(100vw - 40px));
  padding:36px 28px 28px;
  background:rgba(16,14,11,0.64);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.hero-frame{
  position:absolute;
  inset:0;
  pointer-events:none;
  border:1px solid rgba(196,160,86,0.16);
}

.hero-frame::before,
.hero-frame::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border:1.5px solid var(--brass);
}

.hero-frame::before{
  top:-1px;
  left:-1px;
  border-right:none;
  border-bottom:none;
}

.hero-frame::after{
  right:-1px;
  bottom:-1px;
  border-left:none;
  border-top:none;
}

.hero-content::before,
.hero-content::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  border:1.5px solid var(--brass);
  pointer-events:none;
}

.hero-content::before{
  top:0;
  right:0;
  border-left:none;
  border-bottom:none;
}

.hero-content::after{
  left:0;
  bottom:0;
  border-right:none;
  border-top:none;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brass);
}

.hero-kicker::before,
.hero-kicker::after{
  content:"";
  width:28px;
  height:1px;
  background:var(--brass);
  opacity:0.55;
}

.hero-content h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(34px, 4.2vw + 14px, 64px);
  letter-spacing:-0.02em;
  line-height:0.96;
  text-shadow:0 10px 40px rgba(16,14,11,0.55);
  white-space:nowrap;
}

.hero-content .lede{
  max-width:18em;
  margin:22px auto 0;
  font-size:18px;
  color:var(--ivory-70);
}

.word-labs{ font-style:inherit; }

.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:34px;
  padding:12px 20px;
  border:1px solid rgba(196,160,86,0.35);
  border-radius:999px;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ivory);
  background:rgba(16,14,11,0.35);
  transition:border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.hero-cta:hover{
  border-color:var(--brass);
  background:rgba(196,160,86,0.12);
  transform:translateY(-1px);
}

.hero-settled .hero-cta{
  box-shadow:0 0 0 1px rgba(196,160,86,0.18), 0 12px 40px rgba(196,160,86,0.08);
}

.hero-cta::after{
  content:"→";
  color:var(--brass);
}

.hero-notation{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:36px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--ivory-28);
}

.hero-notation span{
  opacity:0;
  transform:translateY(6px);
}

.hero-notation span:nth-child(1){ animation:fade-up 0.6s ease 1.6s forwards; }
.hero-notation span:nth-child(2){ animation:fade-up 0.6s ease 3.1s forwards; }
.hero-notation span:nth-child(3){ animation:fade-up 0.6s ease 4.6s forwards; }
.hero-notation span:nth-child(4){ animation:fade-up 0.6s ease 5.6s forwards; }
.hero-notation .castles{
  color:var(--brass);
}

@keyframes fade-up{
  to{ opacity:1; transform:none; }
}

.piece{ transition:color 0.8s ease; }

.piece.pawn-w{ animation: move-pawn-w 0.8s cubic-bezier(.65,0,.35,1) 0.45s forwards; }
.piece.pawn-b{ animation: move-pawn-b 0.8s cubic-bezier(.65,0,.35,1) 1.2s forwards; }
.piece.knight-w{ animation: move-knight-w 0.85s cubic-bezier(.65,0,.35,1) 1.95s forwards; }
.piece.knight-b1{ animation: move-knight-b1 0.85s cubic-bezier(.65,0,.35,1) 2.7s forwards; }
.piece.bishop-w{ animation: move-bishop-w 0.9s cubic-bezier(.65,0,.35,1) 3.45s forwards; }
.piece.knight-b2{ animation: move-knight-b2 0.85s cubic-bezier(.65,0,.35,1) 4.2s forwards; }
.piece.king-w{ animation: move-king-w 1.0s cubic-bezier(.65,0,.35,1) 5.05s forwards; }
.piece.rook-w{ animation: move-rook-w 1.0s cubic-bezier(.65,0,.35,1) 5.05s forwards; }

@keyframes move-pawn-w{
  from{ transform:translate(198px, 286px); }
  to{ transform:translate(198px, 198px); }
}
@keyframes move-pawn-b{
  from{ transform:translate(198px, 66px); }
  to{ transform:translate(198px, 154px); }
}
@keyframes move-knight-w{
  from{ transform:translate(286px, 330px); }
  to{ transform:translate(242px, 242px); }
}
@keyframes move-knight-b1{
  from{ transform:translate(66px, 22px); }
  to{ transform:translate(110px, 110px); }
}
@keyframes move-bishop-w{
  from{ transform:translate(242px, 330px); }
  to{ transform:translate(110px, 198px); }
}
@keyframes move-knight-b2{
  from{ transform:translate(286px, 22px); }
  to{ transform:translate(242px, 110px); }
}
@keyframes move-king-w{
  from{ transform:translate(198px, 330px); }
  to{ transform:translate(286px, 330px); }
}
@keyframes move-rook-w{
  from{ transform:translate(330px, 330px); }
  to{ transform:translate(242px, 330px); }
}

.hero-board.is-settled .piece.pawn-w{ transform:translate(198px, 198px); }
.hero-board.is-settled .piece.pawn-b{ transform:translate(198px, 154px); }
.hero-board.is-settled .piece.knight-w{ transform:translate(242px, 242px); }
.hero-board.is-settled .piece.knight-b1{ transform:translate(110px, 110px); }
.hero-board.is-settled .piece.bishop-w{ transform:translate(110px, 198px); }
.hero-board.is-settled .piece.knight-b2{ transform:translate(242px, 110px); }
.hero-board.is-settled .piece.king-w{ transform:translate(286px, 330px); }
.hero-board.is-settled .piece.rook-w{ transform:translate(242px, 330px); }

/* ============================================================
   Inner pages
   ============================================================ */

.page-head{
  padding:92px 0 36px;
}

.page-kicker{
  display:block;
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brass);
}

.page-head h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(36px, 6vw, 58px);
  letter-spacing:-0.02em;
  line-height:1;
}

.page-head p,
.section-head p{
  margin-top:16px;
  color:var(--ivory-50);
  max-width:48ch;
  font-size:16px;
}

.section-head{
  margin-bottom:36px;
}

.section-head h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(32px, 5vw, 48px);
  letter-spacing:-0.02em;
  line-height:1;
}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brass);
}

.text-link::after{ content:"→"; }

.text-link:hover{ color:var(--ivory); }

/* ============================================================
   Projects
   ============================================================ */

.board-section{ padding:8px 0 110px; }

.board-frame{
  position:relative;
  padding:18px 18px 22px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(237,230,211,0.03), transparent 40%),
    var(--ink-2);
  box-shadow:0 30px 80px rgba(0,0,0,0.28);
}

.board-files{
  display:grid;
  grid-template-columns:repeat(var(--cols, 3), 1fr);
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ivory-28);
  text-align:center;
}

.board-rank{
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:stretch;
  gap:10px;
}

.board-rank-label{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:18px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ivory-28);
}

.rank{
  display:grid;
  grid-template-columns:repeat(var(--cols, 3), 1fr);
  border:1px solid var(--line);
}

.square{
  position:relative;
  padding:32px 26px 28px;
  min-height:248px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--line);
  background:var(--square-dark);
  overflow:hidden;
  transition:transform 0.35s cubic-bezier(.65,0,.35,1), box-shadow 0.35s ease;
}

.square-top,
.home-card-meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.tile-piece{
  width:22px;
  height:22px;
  fill:currentColor;
  opacity:0.55;
}

.square::after{
  content:attr(data-coord);
  position:absolute;
  right:-4px;
  bottom:-18px;
  font-family:var(--font-display);
  font-size:92px;
  line-height:1;
  color:rgba(237,230,211,0.04);
  pointer-events:none;
}

.square:last-child{ border-right:none; }

.square:nth-child(even){
  background:var(--square-light);
  color:var(--ink);
}
.square:nth-child(even) p{ color:rgba(20,17,13,0.62); }
.square:nth-child(even) .coord{ color:rgba(20,17,13,0.48); }
.square:nth-child(even) .go .url{ color:rgba(20,17,13,0.5); }
.square:nth-child(even)::after{ color:rgba(20,17,13,0.08); }
.square:nth-child(even) .tile-piece{ color:var(--ink); }

.square:not(.placeholder):hover{
  transform:translateY(-4px);
  z-index:1;
  box-shadow:0 18px 40px rgba(0,0,0,0.28);
}

.square .coord{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ivory-50);
}

.square h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:24px;
  margin-top:22px;
  letter-spacing:-0.02em;
}

.square p{
  margin-top:10px;
  font-size:14px;
  color:var(--ivory-50);
  flex-grow:1;
}

.square .go{
  margin-top:22px;
  font-size:13px;
  color:var(--brass);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

.square .go .url{
  color:var(--ivory-50);
  font-family:var(--font-mono);
  font-size:11px;
}

.square.placeholder{ opacity:0.58; }
.square.placeholder .go{ color:var(--ivory-50); }

/* ============================================================
   Home — selected work + close
   ============================================================ */

.home-work{
  position:relative;
  z-index:1;
  padding:92px 0 48px;
  border-top:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(237,230,211,0.03), transparent 28%),
    var(--ink-2);
}

.home-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}

.home-card{
  position:relative;
  min-height:280px;
  padding:32px 28px 28px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(196,160,86,0.06), transparent 42%),
    var(--ink);
  overflow:hidden;
  transition:transform 0.35s cubic-bezier(.65,0,.35,1), border-color 0.3s ease, box-shadow 0.35s ease;
}

.home-card::before{
  content:"";
  position:absolute;
  inset:auto -20% 0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--brass), transparent);
  opacity:0;
  transition:opacity 0.3s ease;
}

.home-card:hover{
  transform:translateY(-4px);
  border-color:rgba(196,160,86,0.38);
  box-shadow:0 22px 50px rgba(0,0,0,0.28);
}

.home-card:hover::before{ opacity:0.8; }

.home-card h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(24px, 3vw, 30px);
  letter-spacing:-0.02em;
  margin:28px 0 12px;
}

.home-card p{
  color:var(--ivory-50);
  font-size:15px;
  flex:1;
}

.home-card .coord{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ivory-50);
}

.home-card .go{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:4px;
  color:var(--brass);
  font-size:13px;
}

.home-card .url{
  color:var(--ivory-50);
  font-family:var(--font-mono);
  font-size:11px;
}

.home-close{
  padding:88px 0 108px;
  text-align:center;
}

.home-quote{
  max-width:22em;
  margin:0 auto;
  font-family:var(--font-display);
  font-size:clamp(22px, 3.4vw, 32px);
  line-height:1.35;
}

/* ============================================================
   About
   ============================================================ */

.about-section{ padding:8px 0 110px; }

.about-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,0.85fr);
  gap:72px;
  align-items:start;
}

.about-block{
  position:relative;
  padding-left:52px;
  margin-bottom:36px;
}

.about-block:last-child{ margin-bottom:0; }

.about-num{
  position:absolute;
  left:0;
  top:3px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  color:var(--brass);
}

.about-content p{
  margin-bottom:18px;
  font-size:16.5px;
  color:var(--ivory-50);
}

.about-quote{
  margin:8px 0 22px;
  padding-left:18px;
  border-left:2px solid var(--brass);
  font-family:var(--font-display);
  font-size:clamp(22px, 3vw, 30px);
  line-height:1.35;
  color:var(--ivory);
}

.about-content a:not(.mail-pill){
  color:var(--brass);
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease;
}
.about-content a:not(.mail-pill):hover{ border-color:var(--brass); }

.about-aside{
  position:sticky;
  top:104px;
}

.mini-board-wrap{
  padding:14px;
  border:1px solid var(--line);
  background:var(--ink-2);
}

#mini-board svg{
  display:block;
  width:100%;
  height:auto;
}

#mini-board .sq-light{ fill:#2C2419; }
#mini-board .sq-dark{ fill:#14110D; }
#mini-board .piece-w{ color:var(--ivory); fill:currentColor; }
#mini-board .piece-b{ color:var(--oxide); fill:currentColor; opacity:0.72; }
#mini-board .is-focus{ color:var(--brass); }

.aside-note{
  margin-top:16px;
  font-size:13px;
  color:var(--ivory-50);
}

.about-tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}

.about-tags li{
  padding:6px 10px;
  border:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--ivory-70);
}

.mail-pill{
  display:inline-flex;
  align-items:center;
  margin-top:8px;
  padding:11px 18px;
  border:1px solid rgba(196,160,86,0.6);
  border-radius:999px;
  font-size:14px;
  line-height:1.2;
  color:var(--brass);
  background:rgba(16,14,11,0.35);
  transition:border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.mail-pill:hover{
  border-color:var(--brass);
  background:rgba(196,160,86,0.12);
  transform:translateY(-1px);
}

/* ============================================================
   Members
   ============================================================ */

.members-section{
  padding:8px 0 72px;
}

.member-card{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(196,160,86,0.05), transparent 36%),
    var(--ink-2);
  overflow:hidden;
}

.member-photo{
  position:relative;
  min-height:380px;
  background:var(--ink-3);
  overflow:hidden;
}

.member-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 12%;
  filter:grayscale(18%) contrast(1.08) sepia(0.16) saturate(0.85);
}

.member-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, transparent 48%, rgba(16,14,11,0.55) 100%),
    linear-gradient(90deg, rgba(16,14,11,0.12), transparent 30%);
  pointer-events:none;
}

.member-frame{
  position:absolute;
  inset:14px;
  border:1px solid rgba(196,160,86,0.28);
  pointer-events:none;
  z-index:1;
}

.member-frame::before,
.member-frame::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  border:1.5px solid var(--brass);
}

.member-frame::before{
  top:-1px;
  left:-1px;
  border-right:none;
  border-bottom:none;
}

.member-frame::after{
  right:-1px;
  bottom:-1px;
  border-left:none;
  border-top:none;
}

.member-piece{
  position:absolute;
  top:22px;
  left:22px;
  z-index:2;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-size:15px;
  color:var(--ink);
  background:var(--brass);
}

.member-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 40px 36px;
}

.member-role{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--brass);
}

.member-body h3{
  margin-top:10px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(28px, 4vw, 40px);
  letter-spacing:-0.02em;
  line-height:1.05;
}

.member-coord{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--ivory-50);
}

.member-bio{
  margin-top:18px;
  max-width:38ch;
  color:var(--ivory-50);
  font-size:16px;
}

.member-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 22px;
  margin-top:26px;
}

.member-actions .mail-pill{ margin-top:0; }
.member-actions .text-link{ margin-top:0; }

.members-section--compact{ padding-bottom:28px; }
.members-section--compact .member-card{ grid-template-columns:220px minmax(0, 1fr); }
.members-section--compact .member-photo{ min-height:280px; }
.members-section--compact .member-body{ padding:28px 32px; }
.members-section--compact .member-body h3{ font-size:clamp(24px, 3vw, 32px); }

@media (max-width: 800px){
  .member-card,
  .members-section--compact .member-card{ grid-template-columns:1fr; }
  .member-photo,
  .members-section--compact .member-photo{
    min-height:0;
    aspect-ratio:4/5;
    max-height:420px;
  }
  .member-body{ padding:28px 22px 26px; }
}

/* ============================================================
   Legal / verification
   ============================================================ */

.legal-section{ padding:8px 0 110px; }

.legal-list{
  max-width:52rem;
  border:1px solid var(--line);
  background:var(--ink-2);
}

.legal-list > div{
  display:grid;
  grid-template-columns:minmax(140px, 0.42fr) 1fr;
  gap:16px 32px;
  padding:22px 26px;
  border-bottom:1px solid var(--line);
}

.legal-list > div:last-child{ border-bottom:none; }

.legal-list dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--brass);
  padding-top:4px;
}

.legal-list dd{
  font-size:16.5px;
  color:var(--ivory);
  line-height:1.55;
}

.legal-list a{
  color:var(--brass);
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease;
}

.legal-list a:hover{ border-color:var(--brass); }

@media (max-width: 700px){
  .legal-list > div{
    grid-template-columns:1fr;
    gap:8px;
    padding:18px 18px;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px){
  .about-layout{
    grid-template-columns:1fr;
    gap:40px;
  }
  .about-aside{ position:static; max-width:360px; }
}

@media (max-width: 860px){
  .board-files{ display:none; }
  .board-rank{ grid-template-columns:1fr; }
  .board-rank-label{ display:none; }
  .rank{ grid-template-columns:1fr; }
  .square{ border-right:none; border-bottom:1px solid var(--line); }
  .square:last-child{ border-bottom:none; }
}

@media (max-width: 700px){
  .piece-idle{ display:none; }
  .hero-notation{ flex-wrap:wrap; gap:8px 14px; }
  .hero-content{
    max-width:100%;
    padding:26px 16px 18px;
  }
  .hero-content h1{
    white-space:normal;
    font-size:clamp(30px, 9vw + 6px, 42px);
    line-height:0.9;
  }
  .hero-content .lede{ font-size:16px; }
  .site-nav a::before{ display:none; }
  .site-nav a{ padding-left:0; }
  .home-cards{ grid-template-columns:1fr; }
  .about-block{ padding-left:40px; }
  .wrap{ padding:0 18px; }
  .site-header{ padding:16px 0; }
  .header-row{
    flex-wrap:wrap;
    row-gap:10px;
  }
  .wordmark{ font-size:16px; gap:8px; }
  .word-labs{ display:inline; }
  .site-nav{
    width:100%;
    justify-content:flex-start;
    gap:22px;
  }
  .site-nav a{ font-size:12px; letter-spacing:0.1em; }
}

/* ============================================================
   Project intro pages
   ============================================================ */

.intro-head{ padding:92px 0 56px; max-width:820px; }
.intro-head h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(40px, 7vw, 72px); letter-spacing:-0.02em; line-height:1;
}
.intro-head .intro-sub{
  margin-top:22px; max-width:40ch; font-size:19px; color:var(--ivory-70);
}
.intro-meta{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ivory-50);
}
.intro-meta span::before{ content:"·"; margin-right:10px; color:var(--brass); }
.intro-meta span:first-child::before{ content:none; }
.intro-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:34px; }
.intro-actions .hero-cta, .intro-actions .text-link{ margin-top:0; }

.framed{ position:relative; border:1px solid rgba(196,160,86,0.16); background:var(--ink-2); }
.framed::before, .framed::after{
  content:""; position:absolute; width:18px; height:18px;
  border:1.5px solid var(--brass); pointer-events:none; z-index:1;
}
.framed::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.framed::after{ right:-1px; bottom:-1px; border-left:none; border-top:none; }

.intro-hero-shot{ margin-bottom:96px; padding:10px; }
.intro-hero-shot img, .shot img{ display:block; width:100%; height:auto; }
.intro-hero-shot figcaption, .shot figcaption{
  padding:12px 4px 2px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ivory-50);
}

.intro-section{ padding:0 0 96px; }
.intro-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; }
.intro-prose p{ color:var(--ivory-70); font-size:16.5px; margin-bottom:16px; max-width:58ch; }
.intro-prose p strong{ color:var(--ivory); font-weight:500; }

.steps{ list-style:none; counter-reset:step; border-top:1px solid var(--line); }
.steps li{
  counter-increment:step; display:grid; grid-template-columns:64px minmax(0,1fr);
  gap:18px; padding:22px 0; border-bottom:1px solid var(--line);
}
.steps li::before{
  content:counter(step, decimal-leading-zero); font-family:var(--font-mono);
  font-size:12px; letter-spacing:0.14em; color:var(--brass); padding-top:4px;
}
.steps h3{ font-family:var(--font-display); font-weight:500; font-size:21px; margin-bottom:4px; }
.steps p{ color:var(--ivory-50); font-size:15px; max-width:62ch; }

.feature-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.feature{ padding:28px 26px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature .coord{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--brass); }
.feature h3{ margin:14px 0 8px; font-family:var(--font-display); font-weight:500; font-size:20px; }
.feature p{ color:var(--ivory-50); font-size:14.5px; }

.gallery{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; }
.shot{ padding:8px; }
.shot--wide{ grid-column:1 / -1; }

.intro-cta{ padding:64px 40px; text-align:center; margin-bottom:110px; }
.intro-cta h2{ font-family:var(--font-display); font-weight:500; font-size:clamp(28px,4.4vw,42px); letter-spacing:-0.02em; line-height:1.05; }
.intro-cta p{ margin:16px auto 0; max-width:46ch; color:var(--ivory-50); }
.intro-cta .hero-cta{ margin-top:30px; }
.intro-note{ margin-top:18px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ivory-28); }

@media (max-width: 860px){
  .intro-cols{ grid-template-columns:1fr; gap:28px; }
  .feature-grid{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr; }
  .intro-head{ padding:64px 0 40px; }
  .intro-hero-shot, .intro-section{ margin-bottom:0; padding-bottom:64px; }
  .intro-hero-shot{ margin-bottom:64px; padding:6px; }
}
@media (max-width: 560px){
  .feature-grid{ grid-template-columns:1fr; }
  .steps li{ grid-template-columns:40px minmax(0,1fr); }
  .intro-cta{ padding:44px 22px; }
}