/* ---------------------------------------------------------------
   robin lab — a corridor drawn on one canvas. no libraries.
   --------------------------------------------------------------- */

:root{
  --cream:  #fbf1df;
  --paper:  #fdf8ee;
  --sand:   #f0dcc0;
  --ink:    #241a12;
  --ink-70: rgba(36,26,18,.70);
  --ink-45: rgba(36,26,18,.45);
  --light:      #f6f1e6;
  --light-70:   rgba(246,241,230,.72);
  --light-45:   rgba(246,241,230,.48);
  --light-20:   rgba(246,241,230,.22);
  --ink-20: rgba(36,26,18,.20);
  --ink-10: rgba(36,26,18,.10);

  --terra:  #e8a781;
  --cobalt: #b9c2ea;
  --lime:   #dbe7b3;
  --teal:   #a9d7cd;
  --pink:   #eec5d0;
  --amber:  #f3ddab;

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans: ui-sans-serif,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit}

/* ---------------- the room ---------------- */

#stage{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}

/* a touch of paper grain over the whole room */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.35;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.22'/></svg>");
}

/* ---------------- cards on the walls ---------------- */

.js .card{
  will-change:transform, opacity;
  backface-visibility:hidden;
  position:fixed;
  left:0;
  top:0;
}

.card{
  width:400px;
  height:292px;
  padding:22px 24px 18px;
  display:flex;
  flex-direction:column;
  gap:.45em;
  background:var(--card-bg, var(--paper));
  color:var(--card-fg, var(--ink));
  border:2px solid var(--ink);
  border-radius:6px 3px 7px 4px;
  box-shadow:12px 14px 0 rgba(36,26,18,.16);
  transform-origin:50% 50%;
  will-change:transform,opacity;
  cursor:pointer;
  overflow:hidden;
  --card-bg:var(--paper);
}

.card--terra{--card-bg:var(--terra);--card-fg:#2b1a10}
.card--cobalt{--card-bg:var(--cobalt);--card-fg:#181a2e}
.card--lime{--card-bg:var(--lime);--card-fg:#1c2010}
.card--teal{--card-bg:var(--teal);--card-fg:#0f2320}
.card--pink{--card-bg:var(--pink);--card-fg:#2a1219}
.card--amber{--card-bg:var(--amber);--card-fg:#241c08}
.card--paper{--card-bg:var(--paper);--card-fg:var(--ink)}

.card__kicker{
  margin:0;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.72;
}

.card__kicker::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:.7em;
  border:1.5px solid currentColor;
  background:currentColor;
}

.card__title{
  margin:.1em 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:31px;
  line-height:1.02;
  letter-spacing:-.005em;
}

.card__text{
  margin:.15em 0 0;
  font-size:13.5px;
  line-height:1.45;
  opacity:.86;
}

.card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:auto 0 0;
  padding:0;
  list-style:none;
}

.card__tags li{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:2px 7px 1px;
  border:1px solid currentColor;
  border-radius:999px;
  opacity:.72;
}

.card__foot{
  margin:.5em 0 0;
  padding-top:.55em;
  border-top:1px solid rgba(36,26,18,.18);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.62;
}

.card--terra .card__foot,
.card--cobalt .card__foot,
.card--teal .card__foot,
.card--pink .card__foot,
.card--lime .card__foot,
.card--amber .card__foot{
  border-color:rgba(36,26,18,.22);
}

.card__links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:.7em 0 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.card__links a{
  text-decoration:none;
  border-bottom:1.5px solid currentColor;
  padding-bottom:2px;
}

.card__links a:hover,
.card__links a:focus-visible{
  background:rgba(255,255,255,.55);
  color:var(--ink);
}

/* about card: portrait + text */

.card--about{
  display:grid;
  grid-template-columns:39% 1fr;
  gap:16px;
  align-items:start;
}

.card:focus-visible{
  outline:3px solid var(--terra);
  outline-offset:6px;
}

.card__face{
  width:100%;
  height:auto;
  aspect-ratio:1;
  border:2px solid var(--ink);
  border-radius:4px;
  background:#fff;
}

.card__stack{
  display:flex;
  flex-direction:column;
  gap:.4em;
  height:100%;
  min-width:0;
}

.card__stack .card__foot{margin-top:auto}

/* ---------------- hud ---------------- */

.hud{
  position:fixed;
  z-index:1000;
  pointer-events:none;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.hud a{pointer-events:auto}

.hud--top{
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  padding:18px 22px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.2em;
  pointer-events:auto;
  color:var(--light);
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}

.brand__mark{
  width:11px;
  height:11px;
  border:1.5px solid var(--light);
  background:var(--terra);
  box-shadow:3px 3px 0 var(--amber);
}

.links{
  display:flex;
  gap:18px;
  letter-spacing:.14em;
}

.links a{
  text-decoration:none;
  color:var(--light-70);
  border-bottom:1.5px solid transparent;
  padding-bottom:2px;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}

.links a:hover,
.links a:focus-visible{
  color:var(--light);
  border-color:var(--amber);
}

.hint{
  position:fixed;
  z-index:1000;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:.8em;
  padding:10px 18px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:999px;
  box-shadow:5px 6px 0 rgba(36,26,18,.14);
  white-space:nowrap;
  transition:opacity .5s ease, transform .5s ease;
}

.hint__box{
  width:9px;
  height:9px;
  flex:none;
  border:1.5px solid var(--ink);
  background:var(--pink);
  border-radius:2px;
}

.hint__text{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-70);
}

.hint__text b{
  font-family:var(--serif);
  font-weight:400;
  font-size:15px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  margin-right:.35em;
}

body.is-walking .hint,
body.is-focus .hint{
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(8px);
}

.back{
  position:fixed;
  z-index:1100;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  padding:10px 20px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--amber);
  color:var(--ink);
  box-shadow:5px 6px 0 rgba(36,26,18,.16);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}

.back:hover,
.back:focus-visible{
  background:var(--ink);
  color:var(--cream);
}

.status{
  position:fixed;
  z-index:1000;
  right:22px;
  bottom:26px;
  display:flex;
  align-items:baseline;
  gap:.3em;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--light-45);
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}

.status__name{color:var(--light);margin-left:.5em}
.status__sep{opacity:.5}

/* rail of walls */

.rail{
  position:fixed;
  z-index:1000;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:9px;
}

.rail__btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:2px 0;
  border:0;
  background:none;
  color:var(--light-45);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
}

.rail__label{
  opacity:0;
  transform:translateX(5px);
  transition:opacity .25s ease, transform .25s ease;
}

.rail__dot{
  width:9px;
  height:9px;
  border:1.5px solid var(--light-70);
  border-radius:2px;
  background:var(--dot, var(--paper));
  transition:transform .25s ease, box-shadow .25s ease;
}

.rail__btn:hover,
.rail__btn:focus-visible{color:var(--light)}

.rail__btn:hover .rail__label,
.rail__btn:focus-visible .rail__label,
.rail__btn.is-active .rail__label{
  opacity:1;
  transform:none;
}

.rail__btn.is-active .rail__dot{
  transform:rotate(45deg) scale(1.15);
  box-shadow:0 0 0 3px rgba(246,241,230,.16);
}

/* ---------------- scroll space ---------------- */

#spacer{
  position:relative;
  z-index:-1;
  pointer-events:none;
}

/* ---------------- no javascript ---------------- */

html:not(.js) #stage,
html:not(.js) #spacer,
html:not(.js) .rail,
html:not(.js) .hint,
html:not(.js) .status{
  display:none;
}

html:not(.js) body::after{display:none}

html:not(.js) #deck{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:26px;
  max-width:1140px;
  margin:0 auto;
  padding:92px 22px 60px;
}

html:not(.js) .card{
  position:relative;
  width:auto;
  height:auto;
  min-height:260px;
  cursor:default;
  transform:none!important;
}

html:not(.js) .card:focus-visible{
  outline:3px solid var(--terra);
  outline-offset:6px;
}

.card__face{max-width:150px}

/* ---------------- small screens ---------------- */

@media (max-width:720px){
  .rail{display:none}
  .hud--top{padding:14px 16px}
  .links{gap:12px}
  .hint{bottom:18px;padding:9px 14px}
  .hint__text{letter-spacing:.05em}
  .status{right:auto;left:50%;bottom:70px;transform:translateX(-50%)}
  .status__name{display:none}
  .back{bottom:18px}
}

@media (prefers-reduced-motion:reduce){
  .hint{transition:none}
}