:root {
  --bg:#080706; --ink:#ece5d7; --soft:#8d8477; --faint:#4a443b; --accent:#C82825;
  --mono: ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--mono);
  /* svh so the anchored footer sits inside the visible area on phones whose
     browser bars eat into 100vh; vh stays as the fallback */
  -webkit-font-smoothing:antialiased; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
}
a { color:inherit; }
.rule { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); }

header, footer {
  display:flex; justify-content:space-between; gap:1rem;
  padding:1.6rem 2rem; flex-wrap:wrap;
}
header { position:sticky; top:0; z-index:20; background:var(--bg); }
header .mark { color:var(--ink); letter-spacing:.28em; text-decoration:none; }
nav { display:flex; gap:1.4rem; }
nav a { text-decoration:none; color:var(--soft); }
nav a:hover, nav a[aria-current="page"] { color:var(--accent); }

main { flex:1 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem 2rem 3rem; }
/* home: the hero holds its natural height so the projects folder sits close
   below it; the about brief grows instead, keeping the footer at the bottom */
.home main { flex:0 0 auto; padding:3rem 2rem 3.5rem; }
.home .about-brief { flex:1 0 auto; }

img.bean { display:block; width:min(300px, 46vw); height:auto; opacity:.92; }
.tagline {
  /* max-width is load-bearing: main is a centred flex column, so without it the
     line sizes to max-content and overflows the viewport instead of wrapping */
  margin:2.2rem 0 0; max-width:100%; text-align:center; text-wrap:balance;
  font-size:11px; line-height:1.7;
  letter-spacing:.16em; text-transform:uppercase; color:var(--soft);
}

/* The work held in a folder, one tab per project */
.folder {
  position:relative; margin:1.6rem auto 1.4rem; width:min(28rem, calc(100% - 4rem));
}
.folder-head { padding:0 1.8rem .7rem; }
.folder-radio { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.tabs { display:flex; padding:0 1.8rem; }
.tab {
  flex:1 1 0; position:relative; cursor:pointer; user-select:none;
  margin-left:-1px; padding:.8rem .4rem .85rem; text-align:center;
  font-size:10px; letter-spacing:.08em; color:var(--soft);
  white-space:nowrap;
  transition:color .15s ease;
}
.tab::before {
  content:""; position:absolute; inset:0; z-index:-1;
  border:1px solid var(--faint);
  transition:border-color .15s ease;
}
.tab:first-child { margin-left:0; }
.tab:nth-child(1) { z-index:5; }
.tab:nth-child(2) { z-index:4; }
.tab:nth-child(3) { z-index:3; }
.tab:nth-child(4) { z-index:2; }
.tab:nth-child(5) { z-index:1; }
.tab:hover { color:var(--ink); }

/* every panel occupies the same grid cell, so the body always stands at the
   tallest panel's height and switching tabs never moves the page */
.folder-body {
  position:relative; z-index:5; display:grid; min-height:9rem;
}
.folder-body .panel { grid-area:1 / 1; visibility:hidden; }

#f-cards:checked ~ .tabs [for="f-cards"],
#f-gridside:checked ~ .tabs [for="f-gridside"],
#f-seneka:checked ~ .tabs [for="f-seneka"],
#f-pulse:checked ~ .tabs [for="f-pulse"],
#f-canter:checked ~ .tabs [for="f-canter"] {
  z-index:6; color:var(--ink);
}
#f-cards:checked ~ .tabs [for="f-cards"]::before,
#f-gridside:checked ~ .tabs [for="f-gridside"]::before,
#f-seneka:checked ~ .tabs [for="f-seneka"]::before,
#f-pulse:checked ~ .tabs [for="f-pulse"]::before,
#f-canter:checked ~ .tabs [for="f-canter"]::before {
  border-color:var(--soft);
}
#f-cards:checked ~ .folder-body #p-cards,
#f-gridside:checked ~ .folder-body #p-gridside,
#f-seneka:checked ~ .folder-body #p-seneka,
#f-pulse:checked ~ .folder-body #p-pulse,
#f-canter:checked ~ .folder-body #p-canter { visibility:visible; }

#f-cards:focus-visible ~ .tabs [for="f-cards"],
#f-gridside:focus-visible ~ .tabs [for="f-gridside"],
#f-seneka:focus-visible ~ .tabs [for="f-seneka"],
#f-pulse:focus-visible ~ .tabs [for="f-pulse"],
#f-canter:focus-visible ~ .tabs [for="f-canter"] { outline:1px solid var(--soft); outline-offset:-4px; }

.row { padding:1rem 1.8rem 1.6rem; }
.row .name { display:block; font-size:15px; letter-spacing:.16em; color:var(--ink); }
.row .state { display:block; margin-top:.45rem; font-size:10px; letter-spacing:.14em; color:var(--accent); }
.row .desc { display:block; margin-top:.85rem; font-size:11px; color:var(--soft); letter-spacing:.02em; text-transform:none; max-width:56ch; line-height:1.6; }
.row .desc.redacted { color:var(--faint); user-select:none; }

/* About, the short block below the work list on the home page; matches the
   folder's width so the two read as one column */
.about-brief { width:min(28rem, calc(100% - 4rem)); margin:0 auto; padding:1.6rem 1.8rem 2.6rem; }
.about-brief p { margin:0; font-size:12px; line-height:1.8; letter-spacing:.02em; color:var(--soft); }
.about-brief a { display:inline-block; margin-top:.9rem; font-size:10px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--accent); border-bottom:1px solid transparent; }
.about-brief a:hover { border-bottom-color:var(--accent); }

/* About page */
.about main { justify-content:flex-start; padding-top:6rem; padding-bottom:0; }
.essay { width:100%; max-width:34rem; }
.essay p { margin:0 0 1.4rem; font-size:14px; line-height:1.9; letter-spacing:.03em; color:var(--ink); }
.about img.bean { width:min(88px, 22vw); opacity:.85; }

/* the bean's link absorbs the space between the copy and the anchored footer
   and centres the bean in it, on every screen size */
.about main > a, .contact main > a {
  flex:1 0 auto; display:flex; align-items:center; justify-content:center;
}

/* Contact */
.contact main { justify-content:flex-start; padding-top:3rem; padding-bottom:0; }
.contact img.bean { width:min(88px, 22vw); opacity:.85; }
.contact-panel { margin:3rem 0 0; width:100%; max-width:34rem; }
.block { padding:1.15rem 0; border-top:1px solid var(--faint); }
.block:last-child { border-bottom:1px solid var(--faint); }
.block dt { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); }
.block dd { margin:.5rem 0 0; font-size:13px; letter-spacing:.06em; line-height:1.8; }
.block dd a { color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; }
.block dd a:hover { border-bottom-color:var(--accent); }
.block dd .quiet { color:var(--soft); font-size:11px; letter-spacing:.1em; }

@media (max-width:780px) {
  img.bean { width:min(170px, 46vw); }
  .tagline { font-size:10px; }
  header, footer, main, .row { padding-left:1.2rem; padding-right:1.2rem; }
  .folder { width:min(28rem, calc(100% - 2.4rem)); }
  .about-brief { width:min(28rem, calc(100% - 2.4rem)); padding-left:1.3rem; padding-right:1.3rem; }
  .folder-head { padding:0 1.3rem .6rem; }
  .tabs { padding:0 1.3rem; }
  .about main { padding-top:1.5rem; }
  .essay p { font-size:13px; line-height:1.75; margin-bottom:1.1rem; }
  .contact main { padding-top:1.2rem; }
  .contact .contact-panel { margin-top:1.2rem; }
  .tab { font-size:9px; letter-spacing:.02em; padding:.65rem .3rem .7rem; margin-left:-1px; }
  .folder-body { min-height:7rem; }
  .row { padding:1rem 1.3rem 1.4rem; }
  .contact .contact-panel { max-width:none; }
}