/* ══════════════════════════════════════════════════════════════════
   David Martinez, portfolio
   Wayfinding. The work is about people finding their way through a
   system somebody else built, so the site borrows the language of
   signs: a directory at the top, each project a line, each case study
   a stop on it. Overpass comes from the US highway sign alphabet, and
   Atkinson Hyperlegible was drawn for readers with low vision.
   No JavaScript.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ground: warm paper, with pale sign panels mounted on it. It was concrete
     (#F2F3EF) until 2026-09-22, when he said the white read cold. */
  --bg:        #EFE9DE;
  --bg-sub:    #FBF8F2;
  --bg-raise:  #E4DCCB;
  --panel:     #FBF8F2;

  /* ink */
  --ink:       #14171F;
  --ink-2:     #414856;
  --ink-3:     #5B6270;
  --ink-4:     #5B6270;

  /* line */
  --rule:      #DCD3C2;
  --rule-2:    #BCB09C;

  /* the sign: a navy panel, white letters, one safety yellow */
  --sign:      #14224A;
  --sign-2:    #AEB9D6;
  --sign-3:    #22346A;
  --hi:        #FFC72C;

  /* links are sign navy, so they read as part of the same system */
  --accent:    #14224A;
  --accent-d:  #0B1533;
  --accent-bg: #E3E7F2;

  /* one colour per line, every one of them passes AA with white type */
  --c: #B4460A;   /* Centline */
  --s: #C3102F;   /* Sollo */
  --u: #00735E;   /* CommU */
  --l: #5A3DB0;   /* Component lab */
  --w: #0A6699;   /* sollo.my */
  --h: #9E1F63;   /* how I work with Claude, the interchange */

  --display: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --sans:    "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --label:   var(--display);
  --mono:    "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut:  clamp(1rem, 5vw, 2.5rem);
  --max:  72rem;    /* page */
  --meas: 40rem;    /* prose */
  --r:    12px;     /* sign panels */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

body{
  /* a short page still ends on the footer, not on a band of empty ground */
  min-height:100svh; display:flex; flex-direction:column;
  margin:0; color:var(--ink);
  /* the map of my head: faint route lines in each project's colour, always;
     the signs from my own life join them only where the margins are empty */
  background:url("assets/bg/lines.svg") center top / 1600px auto repeat-y, var(--bg);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
main{ flex:1 0 auto; }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{
  margin:0; font-family:var(--display); font-weight:800;
  line-height:1.1; letter-spacing:-.015em; color:var(--ink);
}
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

a{
  color:var(--accent); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
}
a:hover{ text-decoration-thickness:2px; }
:focus-visible{ outline:3px solid var(--sign); outline-offset:3px; border-radius:4px; }
/* on the navy panels a navy ring is invisible, so the focus ring turns yellow */
.foot :focus-visible,
.board :focus-visible,
.exit__panel :focus-visible,
.term :focus-visible,
.lightbox :focus-visible{ outline-color:var(--hi); }

@media (min-width:90rem){
  body{
    background:
      url("assets/bg/signs.svg") center top / 1600px auto repeat-y,
      url("assets/bg/lines.svg") center top / 1600px auto repeat-y,
      var(--bg);
  }
}

/* the sticky header covers the top of any section a link jumps to */
[id]{ scroll-margin-top:6rem; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--sign); color:#fff; padding:.7rem 1.1rem;
  font-size:.9rem; border-radius:0 0 4px 0;
}
.skip:focus{ left:0; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gut); }

/* ══ header ══ */
.nav{
  position:sticky; top:0; z-index:50; background:#EFE9DEF0;
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav__in{
  max-width:var(--max); margin:0 auto; padding:.6rem var(--gut);
  /* a centred stack: identity over navigation, the same on every width */
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
}
.nav__me{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-weight:800; font-size:1.05rem;
  color:var(--ink); text-decoration:none;
}
.nav__me:hover{ text-decoration:none; }

/* the same mark as the favicon: a line badge with no line of its own */
.nav__mark{
  display:grid; place-items:center; flex:none;
  width:1.7rem; height:1.7rem; border-radius:.4rem;
  background:var(--sign); color:#fff;
  font-family:var(--display); font-size:.98rem; font-weight:900; line-height:1;
  padding-top:.14rem;   /* Overpass sits high in its box */
}

/* min-width:0 lets this shrink below its content width, which is what allows
   its own flex-wrap to ever fire on a 320px phone. */
.nav__links{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:.4rem; min-width:0;
}

/* Every destination is the kind of sign it would be on a road: guide green for
   the work, an interchange where the lines meet, service blue for the lab,
   park brown for me, an exit to contact, and a white regulation plate for the
   resume. The page you are on wears the safety yellow ring. */
.ns{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:.92rem; line-height:1;
  padding:.55rem .75rem .45rem; min-height:2.6rem; border-radius:5px; color:#fff;
}
.ns svg{ width:1.05rem; height:1.05rem; flex:none; }
.ns--work{    background:#01513A; box-shadow:inset 0 0 0 2px #01513A, inset 0 0 0 3.5px #fff; }
.ns--claude{  background:var(--h); box-shadow:inset 0 0 0 2px var(--h), inset 0 0 0 3.5px #fff; }
.ns--comp{    background:#1F4E9E; box-shadow:inset 0 0 0 2px #1F4E9E, inset 0 0 0 3.5px #fff; }
.ns--about{   background:#6B3D1F; box-shadow:inset 0 0 0 2px #6B3D1F, inset 0 0 0 3.5px #fff; }
.ns--contact{ background:#01513A; box-shadow:inset 0 0 0 2px #01513A, inset 0 0 0 3.5px #fff; }
.ns--contact i{ display:block; font-style:normal; font-size:.62rem; letter-spacing:.1em; }
.ns--resume{  background:#fff; color:var(--ink); box-shadow:inset 0 0 0 3px var(--ink); }
.ns:hover{ filter:brightness(1.14); text-decoration:none; }
.ns--resume:hover{ filter:none; background:var(--bg-raise); }
.ns[aria-current="page"]{ outline:3px solid var(--hi); outline-offset:2px; }

/* ══ line badges and stop markers, used everywhere ══ */
/* A line is a filled square, the way a transit system labels a route. */
.line{
  --line:var(--sign);
  display:inline-grid; place-items:center; flex:none;
  width:2.1rem; height:2.1rem; border-radius:.45rem;
  background:var(--line); color:#fff;
  font-family:var(--display); font-weight:900; font-size:1.1rem; line-height:1;
  padding-top:.16rem;
}
/* A stop is a ring with its code inside, the way a station is numbered. */
.stop{
  --line:var(--sign);
  display:inline-grid; place-items:center; flex:none;
  width:2.35rem; height:2.35rem; border-radius:50%;
  background:#fff; border:.3rem solid var(--line); color:var(--ink);
  font-family:var(--display); font-weight:800; font-size:.8rem; line-height:1;
  padding-top:.1rem;
}
.line--c, .stop--c, .proj--c{ --line:var(--c); }
.line--s, .stop--s, .proj--s{ --line:var(--s); }
.line--u, .stop--u, .proj--u{ --line:var(--u); }
.line--l, .stop--l, .proj--l{ --line:var(--l); }
.line--w, .stop--w, .proj--w{ --line:var(--w); }
.line--h, .stop--h, .proj--h{ --line:var(--h); }

/* ══ hero ══ */
.hero{
  display:grid; gap:clamp(2.25rem,5vw,3.5rem); align-items:center;
  padding-block:clamp(2.75rem,7vw,5.5rem) clamp(3rem,6vw,4.5rem);
}
@media (min-width:62rem){ .hero{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); } }

.hero__hi{
  font-family:var(--display); font-weight:700; font-size:1.2rem;
  color:var(--ink-2); margin:0 0 .7rem;
}
.hero__h{
  font-size:clamp(2.25rem,4.6vw,3.6rem); line-height:1.05; letter-spacing:-.025em;
  margin:0 0 1.5rem; text-wrap:balance;
}
.hero__p{
  font-size:clamp(1.05rem,1.8vw,1.18rem); line-height:1.62;
  color:var(--ink-2); max-width:36rem; margin:0 0 1.5rem;
}
.hero__p strong{ color:var(--ink); font-weight:700; }

.facts{ display:flex; flex-wrap:wrap; gap:.5rem; }
.facts li{
  font-size:.9rem; color:var(--ink); line-height:1.3;
  padding:.4rem .75rem; border-radius:6px;
  background:var(--panel); border:1px solid var(--rule);
}

/* ── the directory sign ── */
.board{
  background:var(--sign); color:#fff; border-radius:var(--r);
  padding:1rem 1rem .5rem;
  box-shadow:0 22px 44px -26px #14224A99;
}
.board__here{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--sign-2);
  padding:0 .5rem .85rem; border-bottom:2px solid #FFFFFF26; margin:0 0 .25rem;
}
.here{ position:relative; width:.85rem; height:.85rem; flex:none; border-radius:50%; background:var(--hi); }
.here::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--hi); opacity:0;
}

.board__list a{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:.95rem; padding:.8rem .5rem; border-radius:8px;
  color:#fff; text-decoration:none;
  transition:background-color .15s ease;
}
.board__list li + li a{ border-top:1px solid #FFFFFF1F; border-radius:0 0 8px 8px; }
.board__list a:hover{ background:var(--sign-3); }
.board .line{ box-shadow:0 0 0 2px #fff; }
.board__name{
  display:block; font-family:var(--display); font-weight:800;
  font-size:1.28rem; line-height:1.15;
}
.board__to{ display:block; font-size:.9rem; line-height:1.4; color:var(--sign-2); margin-top:.1rem; }
.board__arrow{ width:1.5rem; height:1.5rem; color:#fff; transition:transform .15s ease; }
.board__list a:hover .board__arrow{ transform:translateX(3px); }
.board :focus-visible{ outline-color:var(--hi); outline-offset:0; }

/* The one orchestrated moment: the destinations flip in like a departure
   board, then the marker pings. Nothing else on the page moves by itself. */
@media (prefers-reduced-motion:no-preference){
  .board__list li{ animation:flip-in .5s cubic-bezier(.2,.75,.25,1) both; transform-origin:top; }
  .board__list li:nth-child(1){ animation-delay:.10s; }
  .board__list li:nth-child(2){ animation-delay:.19s; }
  .board__list li:nth-child(3){ animation-delay:.28s; }
  .board__list li:nth-child(4){ animation-delay:.37s; }
  .board__list li:nth-child(5){ animation-delay:.46s; }
  .here::after{ animation:ping 1.5s ease-out 1s 3; }
}
@media (prefers-reduced-motion:reduce){
  .board__list a, .board__arrow{ transition:none; }
}
@keyframes flip-in{
  from{ opacity:0; transform:perspective(700px) rotateX(-75deg); }
  to{   opacity:1; transform:none; }
}
@keyframes ping{
  from{ opacity:.9; transform:scale(1); }
  to{   opacity:0;  transform:scale(2.8); }
}

/* ══ section scaffolding ══ */
.sect{ padding-block:clamp(3rem,7vw,5rem); }
.sect__h{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.4rem 1rem; margin:0 0 2.25rem; padding-bottom:.85rem;
  border-bottom:4px solid var(--ink);
}
.sect__t{ font-size:clamp(1.6rem,3vw,2.15rem); }
.sect__n{ font-size:.92rem; color:var(--ink-3); }

/* ══ work: each project is a line, each case study a stop ══ */
.proj{
  /* an explicit minmax(0,...) column, or the Sollo screenshot strip sizes the
     implicit one to its full scroll width and the page overflows on a phone */
  display:grid; grid-template-columns:minmax(0,1fr); gap:2rem 3.5rem;
  padding-block:2.75rem; border-top:1px solid var(--rule);
}
.proj:first-of-type{ border-top:0; padding-top:.5rem; }
@media (min-width:62rem){
  .proj{ grid-template-columns:minmax(0,1fr) minmax(0,27rem); align-items:start; }
  .proj--solo{ grid-template-columns:minmax(0,1fr); }
  .proj--solo .proj__text{ max-width:44rem; }
}

.proj__text{ position:relative; padding-left:3.4rem; }
/* the line itself, from the badge down to the last stop */
.proj__text::before{
  content:""; position:absolute; left:calc(1.05rem - 3px);
  top:1.5rem; bottom:0; width:6px; border-radius:3px;
  background:var(--line,var(--sign));
}
.proj__text > .line{ position:absolute; left:0; top:0; }

.proj__top{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .8rem; margin:0 0 .85rem; min-height:2.1rem; }
.proj__name{ font-size:1.85rem; line-height:1.1; padding-top:.2rem; }
.tag{
  font-family:var(--display); font-weight:700; font-size:.8rem; line-height:1;
  padding:.38rem .55rem .28rem; border-radius:4px;
  background:var(--bg-raise); color:var(--ink-2);
}
/* a project still under construction gets the road-works colour */
.tag--wip{ background:var(--hi); color:var(--ink); }

.proj__for{
  font-family:var(--display); font-weight:600; font-size:1.2rem; line-height:1.4;
  color:var(--ink); margin:0 0 .9rem; max-width:34rem;
}
.proj__body{ color:var(--ink-2); line-height:1.65; max-width:var(--meas); }

.chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1.1rem 0 0; }
.chips span{
  font-size:.8rem; line-height:1.3; padding:.25rem .55rem; border-radius:4px;
  background:var(--panel); color:var(--ink-2); border:1px solid var(--rule);
}

.stops{ display:grid; gap:.85rem; margin:1.6rem 0 0; }
.stops li{ position:relative; min-height:2.35rem; padding-top:.2rem; }
.stops .stop{ position:absolute; left:calc(-3.4rem + 1.05rem - 1.175rem); top:.3rem; }
.stops .btn{ margin:0 0 .35rem; }
.stops .btn + span{ margin-top:.1rem; }
/* the line ends at its last stop: cover whatever runs on below that ring */
.stops li:last-child::after{
  content:""; position:absolute; top:2.2rem; bottom:-1px;
  left:calc(-3.4rem + 1.05rem - 5px); width:10px; background:var(--bg);
}
.stops a{ font-family:var(--display); font-weight:800; font-size:1.08rem; line-height:1.3; }
.stops span:not(.stop){ display:block; font-size:.9rem; line-height:1.45; color:var(--ink-3); }

/* the biggest numbers, then one way in (2026-09-22: a short story and one button,
   the detail lives on the project's own page) */
/* always three across, so a narrow phone never leaves one number on a row of its own */
.wins{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem 1.25rem; margin:1.35rem 0 0; max-width:32rem; }
.wins li{ font-size:.88rem; line-height:1.35; color:var(--ink-2); }
.wins b{
  display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.3rem,5.5vw,1.7rem);
  line-height:1.05; color:var(--ink); margin-bottom:.15rem; font-variant-numeric:tabular-nums;
}
.proj__go{ margin:1.6rem 0 0; }

/* ── project figures ── */
.proj__fig{ margin:0; }
.proj__fig > img,
.shot{ width:100%; border-radius:var(--r); border:1px solid var(--rule); background:var(--panel); }
.proj__fig figcaption{ margin-top:.7rem; font-size:.86rem; line-height:1.5; color:var(--ink-3); }

/* Centline: the whole product is one correction, so the figure is that correction */
.readout{
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--r);
  border-top:6px solid var(--c); padding:.5rem 1.35rem 1.1rem;
}
.readout__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--rule);
}
.readout__row:last-child{ border-bottom:0; padding-bottom:0; }
.readout__row span{ font-size:.92rem; color:var(--ink-2); line-height:1.35; }
.readout__row b{
  font-family:var(--display); font-weight:800; font-size:1.55rem; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.readout__row--seems b{ color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:2px; }
.readout__row--true span{ color:var(--ink); font-weight:700; }
.readout__row--true b{ font-size:2.6rem; color:#B42318; }

/* Sollo: the App Store panels, a grid on a wide screen, a strip on a phone */
.phones{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.phones img{ width:100%; border-radius:10px; border:1px solid var(--rule); background:var(--panel); }
@media (max-width:61.99rem){
  .phones{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:8.5rem;
    /* min-width:0 so this scrolls inside its column instead of widening it */
    min-width:0; overflow-x:auto; overscroll-behavior-x:contain;
    padding-bottom:.5rem; scrollbar-width:thin;
  }
}

/* Component lab: one image in both themes, cut on the diagonal */
.twin{ position:relative; overflow:hidden; border-radius:var(--r); border:1px solid var(--rule); background:var(--panel); }
.twin img{ width:100%; }
.twin img + img{ position:absolute; inset:0; clip-path:polygon(60% 0,100% 0,100% 100%,40% 100%); }

/* ══ measurements ══ */
.nums{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem 1.5rem; }
@media (min-width:46rem){ .nums{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.nums li{ border-top:4px solid var(--sign); padding-top:1rem; }
.nums b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(2rem,4vw,2.75rem); line-height:1; letter-spacing:-.02em; color:var(--sign);
}
.nums span{ display:block; margin-top:.5rem; font-size:.9rem; line-height:1.45; color:var(--ink-2); }

/* ══ prose ══ */
.prose{ max-width:var(--meas); }
.prose p{ margin:0 0 1.1rem; color:var(--ink-2); line-height:1.68; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); font-weight:700; }

/* ══ two column detail (about) ══ */
.split{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); }
@media (max-width:52rem){ .split{ grid-template-columns:1fr; } }

.deflist{ display:grid; gap:1.2rem; align-content:start; }
.deflist dt{ font-family:var(--display); font-weight:800; font-size:1rem; color:var(--ink); margin:0 0 .2rem; }
.deflist dd{ margin:0; font-size:.95rem; color:var(--ink-2); line-height:1.55; }
.deflist dd b{ color:var(--ink); font-weight:700; }

/* ══ the route: experience drawn as a strip map ══ */
/* A phone gets it vertical, a wide screen horizontal. Each stop draws the
   segment that leaves it, so the last stop draws none. */
.route{ display:grid; }
.route li{ position:relative; padding:0 0 1.9rem 3.4rem; }
.route li::before{
  content:""; position:absolute; left:calc(1.175rem - 3px); top:1.175rem;
  width:6px; height:100%; background:var(--sign);
}
.route li:last-child::before{ content:none; }
.route li::after{
  content:""; position:absolute; left:0; top:0;
  width:2.35rem; height:2.35rem; border-radius:50%;
  background:#fff; border:.35rem solid var(--sign); box-sizing:border-box;
}
.route time{ display:block; font-family:var(--display); font-weight:700; font-size:.88rem; color:var(--ink-3); padding-top:.45rem; }
.route h3{ font-size:1.12rem; line-height:1.25; margin:.2rem 0 .15rem; }
.route p{ font-size:.93rem; color:var(--ink-2); line-height:1.45; }

/* Sollo is its own line's colour. The segment leaving it is travelled as far
   as the marker, and dashed from there: the rest of the route is ahead. */
.route .route__s::after{ border-color:var(--s); }
.route .route__s::before{
  background:
    linear-gradient(180deg,var(--sign) calc(100% - 1.75rem),transparent 0),
    repeating-linear-gradient(180deg,var(--sign) 0 9px,transparent 9px 17px);
}
.route .route__ahead::before{ background:repeating-linear-gradient(180deg,var(--sign) 0 9px,transparent 9px 17px); }
.route .route__ahead::after,
.route .route__end::after{ background:var(--bg); border-style:dashed; }

/* you are here: just past the internship, on the way to graduating */
.route__now{
  position:absolute; z-index:1; left:.5rem; top:calc(100% - 1.25rem);
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-weight:700; font-size:.82rem; color:var(--ink);
}
.route__now::before{
  content:""; width:1.35rem; height:1.35rem; border-radius:50%; flex:none;
  background:var(--hi); border:3px solid var(--bg);
}
/* vertical only: give the marker its own stretch of line to sit on */
@media (max-width:61.99rem){
  .route .route__s{ padding-bottom:3.4rem; }
  .route__now{ top:calc(100% - 2.3rem); }
  .route .route__s::before{
    background:
      linear-gradient(180deg,var(--sign) calc(100% - 2.8rem),transparent 0),
      repeating-linear-gradient(180deg,var(--sign) 0 9px,transparent 9px 17px);
  }
}

@media (min-width:62rem){
  .route{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .route li{ padding:3.4rem 1.25rem 0 0; }
  .route li::before{ left:1.175rem; top:calc(1.175rem - 3px); width:100%; height:6px; }
  .route time{ padding-top:0; }
  .route .route__s::before{
    background:
      linear-gradient(90deg,var(--sign) 22%,transparent 0),
      repeating-linear-gradient(90deg,var(--sign) 0 10px,transparent 10px 18px);
  }
  .route .route__ahead::before{ background:repeating-linear-gradient(90deg,var(--sign) 0 10px,transparent 10px 18px); }
  .route__now{ left:calc(22% + 1.175rem - .675rem); top:.5rem; }
  .route__now span{ position:absolute; left:50%; bottom:calc(100% + .3rem); transform:translateX(-50%); white-space:nowrap; }
}

/* ══ contact: the exit sign ══ */
.exit{ padding-block:clamp(1rem,3vw,2rem) clamp(3rem,7vw,5rem); }
.exit__panel{
  background:var(--sign); color:#fff; border-radius:var(--r);
  padding:clamp(1.75rem,5vw,3.5rem);
}
.exit__label{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--sign-2);
  margin:0 0 1rem;
}
.exit__h{ color:#fff; font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.12; max-width:24ch; margin:0 0 1.5rem; }
.exit__mail{
  display:inline-block; color:#fff; font-family:var(--display); font-weight:800;
  font-size:clamp(1.3rem,4.2vw,2.6rem); line-height:1.15; overflow-wrap:anywhere;
  text-decoration-color:var(--hi); text-decoration-thickness:3px; text-underline-offset:.2em;
}
.exit__mail:hover{ text-decoration-thickness:5px; }
.exit :focus-visible{ outline-color:var(--hi); }
.exit__links{ display:flex; flex-wrap:wrap; gap:.65rem; margin:2rem 0 0; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.62rem 1.05rem; border-radius:8px; font-size:.95rem; font-weight:700;
  border:1.5px solid var(--rule-2); color:var(--ink); text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease;
}
.btn:hover{ background:var(--panel); border-color:var(--ink-3); }
.exit .btn{ color:#fff; border-color:#FFFFFF59; }
.exit .btn:hover{ background:var(--sign-3); border-color:#fff; }
@media (prefers-reduced-motion:reduce){ .btn{ transition:none; } }

/* ══ footer ══ */
/* ══ the footer: the route ends, so the page says so ══ */
.foot{ background:var(--sign); color:#fff; margin-top:clamp(3rem,7vw,5rem); padding:clamp(2rem,4vw,2.75rem) 0 clamp(2.25rem,4vw,3rem); }
.foot__in{ max-width:var(--max); margin:0 auto; padding-inline:var(--gut); display:grid; gap:1.5rem; }
/* the dashes of a road, ending */
.foot__rule{ height:4px; border-radius:2px; background:repeating-linear-gradient(90deg,var(--hi) 0 26px,transparent 26px 46px); }
.foot__top{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.foot__end{ display:flex; align-items:center; gap:.7rem; font-family:var(--display); font-weight:800; font-size:1.35rem; }
.foot__dot{ width:1.1rem; height:1.1rem; flex:none; border-radius:50%; background:var(--hi); box-shadow:0 0 0 4px #ffffff22; }
.foot__links{ display:flex; flex-wrap:wrap; gap:.5rem; margin-left:auto; }
.foot__links a{
  display:inline-flex; align-items:center; min-height:2.5rem; padding:.45rem .8rem .38rem;
  font-family:var(--display); font-weight:700; font-size:.9rem;
  color:#fff; text-decoration:none; border:2px solid #FFFFFF66; border-radius:5px;
}
.foot__links a:hover{ border-color:var(--hi); color:var(--hi); }
.foot__grid{ display:grid; gap:1.25rem 2.5rem; grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr)); }
.foot__grid h2{ font-family:var(--display); font-weight:700; font-size:.78rem; letter-spacing:.14em; color:#AEB9D6; margin:0 0 .35rem; }
.foot__grid p{ font-size:.9rem; line-height:1.55; color:#E6E9F2; }

/* ══ visually hidden, still read aloud ══ */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ══ every picture opens larger ══
   A button with popovertarget opens a popover holding the full image. That is
   HTML, not script: Escape closes it, a click outside closes it, and focus
   goes back to the picture it came from. The popover sits outside any panel
   that can be hidden, because a popover inside display:none never renders. */
.zoom{
  display:block; position:relative; width:100%; padding:0; margin:0;
  border:0; background:none; font:inherit; color:inherit; text-align:inherit;
  cursor:zoom-in; border-radius:var(--r);
}
.zoom img{ width:100%; border-radius:var(--r); border:1px solid var(--rule); background:var(--panel); }
.zoom__hint{
  position:absolute; right:.6rem; bottom:.6rem;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .6rem .3rem; border-radius:6px;
  background:var(--sign); color:#fff;
  font-family:var(--display); font-weight:700; font-size:.78rem; line-height:1;
  opacity:0; transform:translateY(3px); transition:opacity .15s ease, transform .15s ease;
}
.zoom__hint svg{ width:.85rem; height:.85rem; margin-top:-.1rem; }
.zoom:hover .zoom__hint, .zoom:focus-visible .zoom__hint{ opacity:1; transform:none; }
@media (hover:none){ .zoom__hint{ opacity:1; transform:none; } }

.lightbox{
  /* the browser centres a popover with margin:auto; size it to the picture so
     the backdrop around it stays a place to click away */
  border:0; padding:0; background:transparent; color:#fff;
  max-width:min(96vw,1600px); max-height:94dvh; overflow:auto; overscroll-behavior:contain;
}
.lightbox::backdrop{ background:#0B1533EB; }
.lightbox figure{ margin:0; }
.lightbox img{
  width:auto; max-width:100%; max-height:84dvh; margin:0 auto;
  border-radius:10px; background:#fff;
}
.lightbox figcaption{
  max-width:46rem; margin:.85rem auto 0; padding:0 .5rem;
  font-size:.92rem; line-height:1.5; color:#E6E9F2; text-align:center;
}
.lightbox__close{
  position:fixed; top:max(1rem,env(safe-area-inset-top)); right:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem .9rem .5rem; border-radius:8px; border:2px solid #fff;
  background:var(--sign); color:#fff; cursor:pointer;
  font-family:var(--display); font-weight:800; font-size:.95rem; line-height:1;
}
.lightbox__close:hover{ background:var(--sign-3); }
.lightbox :focus-visible{ outline:3px solid var(--hi); outline-offset:3px; }
/* On a phone a dense board is unreadable at screen width, so it opens at
   reading size and pans. A photo still fits the screen. */
@media (max-width:48rem){
  .lightbox{ max-width:100vw; max-height:100dvh; }
  .lightbox img{ max-width:none; max-height:none; width:min(1600px,230vw); }
  .lightbox--fit img{ width:auto; max-width:100%; max-height:80dvh; }
}
@media (prefers-reduced-motion:reduce){ .zoom__hint{ transition:none; } }

/* ══ the portrait: the yellow ring is the map's "you are here" ══ */
.hero__hi{ display:flex; align-items:center; gap:.9rem; }
.me{ width:4.25rem; flex:none; margin:0; border-radius:50%; }
.me img{
  width:4.25rem; height:4.25rem; border-radius:50%; object-fit:cover;
  border:0; box-shadow:0 0 0 3px var(--bg), 0 0 0 7px var(--hi);
}
.me .zoom__hint{ display:none; }

/* ══ a terminal, drawn in CSS: how I asked Claude to talk to me ══ */
.term{
  background:#0F1830; color:#E6E9F2; border-radius:var(--r);
  font-family:var(--mono); font-size:.8rem; line-height:1.5;
  overflow:hidden; box-shadow:0 22px 44px -28px #0B153399;
}
.term__bar{
  display:flex; align-items:center; gap:.4rem; padding:.6rem .85rem;
  background:#16213F; color:#9AA6C4; font-size:.74rem;
}
.term__bar i{ width:.6rem; height:.6rem; border-radius:50%; background:#2E3B63; }
.term__bar span{ margin-left:.4rem; }
.term__body{ padding:1rem; display:grid; gap:.75rem; }
.tbox{ border:3px double #9AA6C4; padding:.45rem .7rem; }
.tbox--q{ border-color:var(--hi); }
.tbox b{ color:var(--hi); font-weight:500; }
.tline{ display:grid; grid-template-columns:5.2rem 1fr; gap:.6rem; }
.tline b{ color:#9AA6C4; font-weight:500; }
.term__next{ color:#9AA6C4; }

/* ══ a figure anywhere on the site ══ */
.fig{ margin:0; }
.fig figcaption{ margin-top:.65rem; font-size:.86rem; line-height:1.5; color:var(--ink-3); }

/* ══ logos, in place of letters: each project's own mark on a tile ══ */
.logo{ display:block; flex:none; width:2.1rem; height:2.1rem; border-radius:.45rem; object-fit:cover; box-shadow:0 0 0 1px #14224A26; }
.proj__text > .logo{ position:absolute; left:0; top:0; }
.board .logo{ width:2.3rem; height:2.3rem; box-shadow:0 0 0 2px #fff; }

/* ══ a button that opens a project: filled, big, impossible to miss ══ */
.btn--open{
  background:var(--sign); border-color:var(--sign); color:#fff;
  min-height:2.9rem; padding:.7rem 1.1rem .6rem; font-family:var(--display); font-weight:800; font-size:1rem;
}
.btn svg{ width:1.05rem; height:1.05rem; flex:none; margin-top:-.1rem; transition:transform .15s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn--open:hover{ background:var(--sign-3); border-color:var(--sign-3); color:#fff; }
.btn--quiet{ background:var(--panel); font-family:var(--display); font-weight:700; }
@media (prefers-reduced-motion:reduce){ .btn svg{ transition:none; } }

/* ══ home: one card per project ══ */
.cards{ display:grid; gap:1.25rem; }
@media (min-width:52rem){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pcard--wide{ grid-column:1 / -1; } }
.pcard{
  display:flex; flex-direction:column; gap:1rem; min-width:0;
  padding:1.25rem; background:var(--panel); border:1px solid var(--rule);
  border-top:6px solid var(--line,var(--sign)); border-radius:var(--r);
}
.pcard__top{ display:flex; align-items:center; gap:.8rem; }
.pcard__top .logo{ width:2.6rem; height:2.6rem; }
.pcard__name{ font-size:1.5rem; line-height:1.1; padding-top:.15rem; }
.pcard__tag{ margin:.1rem 0 0; font-size:.86rem; color:var(--ink-3); }
.pcard__for{ font-family:var(--display); font-weight:600; font-size:1.08rem; line-height:1.45; color:var(--ink); margin:0; }
.pcard__body{ color:var(--ink-2); line-height:1.6; margin:0; }
.pcard__go{ margin-top:auto; display:flex; flex-wrap:wrap; gap:.6rem; padding-top:.25rem; }
.pcard figure{ margin:0; }
@media (min-width:52rem){
  .pcard--wide{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem 2rem; align-items:start; }
  .pcard--wide > .pcard__side{ grid-column:2; grid-row:1 / span 5; }
}

/* ══ a page of its own: Work, About, Contact ══ */
.page-h{ padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,3vw,2.25rem); }
.page-h h1{ font-size:clamp(2.4rem,5.5vw,3.8rem); line-height:1.04; letter-spacing:-.025em; margin:.2rem 0 1rem; }
.page-h p{ max-width:40rem; font-size:1.12rem; line-height:1.6; color:var(--ink-2); }
.kick{ display:flex; align-items:center; gap:.7rem; font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--ink-3); margin:0; }

/* ══ about ══ */
.aboutme{ display:grid; gap:2rem 3rem; align-items:center; }
@media (min-width:52rem){ .aboutme{ grid-template-columns:auto minmax(0,1fr); } }
.me--big, .me--big img{ width:11rem; height:11rem; }
.me--big img{ box-shadow:0 0 0 5px var(--bg), 0 0 0 11px var(--hi); }
.aboutme h1{ font-size:clamp(2.4rem,5.5vw,3.8rem); line-height:1.04; letter-spacing:-.025em; margin:.2rem 0 1rem; }
.aboutme p{ max-width:40rem; font-size:1.12rem; line-height:1.6; color:var(--ink-2); }
.photo figcaption{ margin-top:.7rem; font-size:.88rem; color:var(--ink-3); line-height:1.5; }
.deflist dd em{ display:block; margin-top:.35rem; font-style:normal; color:var(--ink-3); font-size:.88rem; }

/* off the clock: the same signs as the background, stuck on like stickers,
   so they show on a phone too, where the margins are too narrow for them */
.off__lede{ max-width:40rem; font-size:1.12rem; line-height:1.6; color:var(--ink-2); margin:0 0 2rem; }
.off{ display:flex; flex-wrap:wrap; gap:1.75rem 1.5rem; }
.off li{ width:7.5rem; display:grid; justify-items:center; gap:.6rem; }
.off svg{
  display:block; width:100%; height:5.5rem; overflow:visible;
  font-family:Arial, Helvetica, sans-serif; font-weight:700;
  filter:drop-shadow(0 2px 3px rgb(20 23 31 / .18)); rotate:-3deg;
}
.off li:nth-child(even) svg{ rotate:3deg; }
.off span{ font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--ink); text-align:center; }

/* places I have been, as badges in the language of each place: a station name
   board in Japan, the flag's two blue stripes for El Salvador, a green guide
   sign for each US city. Flex lines stretch, so every badge in a row is the
   same height whatever its kind. */
.places{ display:flex; flex-wrap:wrap; gap:1.1rem .9rem; }
.place{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-width:7.25rem; border-radius:8px; overflow:hidden; text-align:center; line-height:1.15;
  box-shadow:0 2px 4px rgb(20 23 31 / .16); rotate:-1.5deg;
}
.place:nth-child(even){ rotate:1.5deg; }
.place b{ font-family:var(--display); font-weight:800; font-size:1.05rem; padding:0 .95rem; }
.place small{
  align-self:stretch; font-family:var(--display); font-weight:700; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; padding:.32rem .6rem .24rem;
}

.place--jp{ background:#fff; border:2px solid #C9CED8; padding-top:.5rem; }
.place--jp .kanji{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  font-weight:700; font-size:1.45rem; line-height:1.15; color:var(--ink);
}
.place--jp b{ font-size:.92rem; font-weight:700; color:var(--ink-2); margin:.1rem 0 .45rem; }
.place--jp small{ margin-top:auto; background:#C3102F; color:#fff; }

.place--sv{ background:#fff; border:2px solid #0F47AF; }
.place--sv::before{ content:""; align-self:stretch; height:.9rem; background:#0F47AF; margin-bottom:auto; }
.place--sv b{ color:var(--sign); margin:.55rem 0; }
.place--sv small{ margin-top:auto; background:#0F47AF; color:#fff; }

.place--us{
  background:#01513A; padding:.65rem 0 .6rem;
  box-shadow:inset 0 0 0 4px #01513A, inset 0 0 0 6px #fff, 0 2px 4px rgb(20 23 31 / .16);
}
.place--us b{ color:#fff; }
.place--us small{ color:#fff; padding-bottom:0; }

/* ══════════════════════════════════════════════════════════════════
   Phone. Everything is rem-based, so moving the root moves the whole
   system together: type, spacing, gutters and radii stay in proportion.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:34rem){
  html{ font-size:15px; }

  /* the signs shrink rather than the row scrolling. This sits at the end of
     the file on purpose, so it wins on source order. */
  .nav__links{ gap:.35rem; }
  .ns{ font-size:.84rem; padding:.5rem .55rem .4rem; gap:.3rem; }
  .ns svg{ width:.95rem; height:.95rem; }

  .board{ padding:.85rem .7rem .4rem; }
  .board__list a{ gap:.75rem; padding:.75rem .4rem; }
  .board__name{ font-size:1.15rem; }

  .proj__text{ padding-left:3rem; }
  .proj__text > .line{ width:1.9rem; height:1.9rem; font-size:1rem; }
  .proj__text::before{ left:calc(.95rem - 3px); }
  .stops .stop{ left:calc(-3rem + .95rem - 1.175rem); }
  .stops li:last-child::after{ left:calc(-3rem + .95rem - 5px); }
  .proj__name{ font-size:1.6rem; }
  .proj__for{ font-size:1.1rem; }

  .readout{ padding-inline:1rem; }
  .readout__row b{ font-size:1.3rem; }
  .readout__row--true b{ font-size:2.1rem; }
}