/* =========================================================================
   Keith Christman — Engineering Portfolio
   Visual language: technical drafting. Drafting-grid ground, hairline frames,
   dimension-line dividers, monospace data callouts, a single anodized accent.
   ========================================================================= */

:root{
  --bg:        #e7e9ec;   /* cool drafting-paper gray            */
  --surface:   #f7f8f9;   /* near-white sheet                    */
  --ink:       #15171c;   /* drafting ink (near-black)           */
  --graphite:  #565c66;   /* secondary text / dimension lines    */
  --line:      #c3c8d0;   /* hairlines                           */
  --line-soft: #dde0e4;   /* faint grid lines                    */
  --accent:    #d8451f;   /* anodized safety orange              */
  --accent-dk: #b5350f;

  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 64px);

  --f-disp: "Archivo", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background-color:var(--bg);
  /* faint engineering grid */
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  background-position:-1px -1px;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---- type ---------------------------------------------------------------- */
h1,h2,h3{ font-family:var(--f-disp); font-weight:700; line-height:1.04;
  letter-spacing:-.02em; margin:0; }
p{ margin:0 0 1.1em; }
.lede{ font-size:clamp(1.12rem,1.7vw,1.32rem); line-height:1.55; color:#23262d;
  max-width:none; }

.mono{ font-family:var(--f-mono); }
.eyebrow{
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--graphite);
}
.accent{ color:var(--accent); }

/* ---- layout -------------------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }

/* dimension-line divider: hairline with vertical end ticks + centered label */
.dim{
  display:flex; align-items:center; gap:18px;
  margin:0; padding-block:6px; color:var(--graphite);
}
.dim::before, .dim::after{
  content:""; flex:1; height:10px;
  background-image:
    linear-gradient(var(--line),var(--line)),   /* horizontal rule */
    linear-gradient(var(--line),var(--line));    /* end tick        */
  background-size:100% 1px, 1px 10px;
  background-repeat:no-repeat;
}
.dim::before{ background-position:center, left center; }
.dim::after{  background-position:center, right center; }
.dim .lab{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; white-space:nowrap; color:var(--graphite);
}
.dim .lab .n{ color:var(--accent); }
/* left-weighted sub-dividers: short tick line, label, long line */
.sub .dim::before{ flex:0 0 28px; }

/* ---- top nav ------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(231,233,236,.82);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between;
  height:60px; }
.brand{ display:flex; align-items:baseline; gap:11px; text-decoration:none; }
.brand .mark{
  font-family:var(--f-mono); font-weight:600; letter-spacing:.06em;
  border:1.5px solid var(--ink); padding:2px 7px; font-size:.82rem;
  line-height:1; color:var(--ink);
}
.brand .who{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--graphite); }
.nav-links{ display:flex; gap:26px; }
.nav-links a{
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:var(--graphite);
  padding-block:4px; position:relative;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--accent);
}
@media (max-width:560px){
  .brand .who{ display:none; }
  .nav-links{ gap:18px; }
}

/* ---- hero / title block -------------------------------------------------- */
.hero{ padding-top:clamp(48px,9vw,104px); padding-bottom:clamp(36px,6vw,72px); }
.hero .eyebrow{ display:block; margin-bottom:20px; }
.hero h1{
  font-size:clamp(2.7rem,8.4vw,6rem); font-weight:800; letter-spacing:-.035em;
  margin-bottom:.32em;
}
.hero h1 .l2{ display:block; }
.hero .thesis{ max-width:54ch; font-size:clamp(1.1rem,1.8vw,1.4rem);
  line-height:1.5; color:#23262d; }

/* title block — drawing-style data strip */
.titleblock{
  margin-top:clamp(34px,5vw,54px);
  border:1px solid var(--line); background:var(--surface);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.titleblock .cell{
  padding:16px 18px; border-right:1px solid var(--line);
}
.titleblock .cell:last-child{ border-right:0; }
.titleblock .k{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--graphite); margin-bottom:7px; }
.titleblock .v{ font-family:var(--f-disp); font-weight:600; font-size:1.02rem;
  line-height:1.2; }
@media (max-width:720px){
  .titleblock{ grid-template-columns:repeat(2,1fr); }
  .titleblock .cell:nth-child(2){ border-right:0; }
  .titleblock .cell:nth-child(1),.titleblock .cell:nth-child(2){
    border-bottom:1px solid var(--line); }
}

/* ---- project index grid -------------------------------------------------- */
.work{ padding-block:clamp(40px,6vw,72px); }
.work .dim{ margin-bottom:34px; }
.grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.4vw,30px);
}
@media (max-width:760px){ .grid{ grid-template-columns:1fr; } }

.card{
  --c:var(--line);
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--c);
  text-decoration:none; color:inherit; position:relative;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover{ border-color:var(--ink); transform:translateY(-3px); }
.card .shot{ aspect-ratio:16/10; overflow:hidden; background:#dfe2e6;
  border-bottom:1px solid var(--c); }
.card .shot img{ width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--ease); }
.card:hover .shot img{ transform:scale(1.035); }
.card .body{ padding:18px 20px 22px; display:flex; flex-direction:column;
  flex:1; gap:10px; }
.card .tag{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--graphite); }
.card .tag .n{ color:var(--accent); }
.card h3{ font-size:1.5rem; letter-spacing:-.02em; }
.card .desc{ font-size:.96rem; color:#2c2f37; margin:0; }
.card .stats{ margin-top:auto; padding-top:12px; display:flex; flex-wrap:wrap;
  gap:7px; }
.chip{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.04em;
  color:var(--graphite); border:1px solid var(--line); padding:3px 8px;
  white-space:nowrap;
}
.card:hover .chip{ border-color:#aeb4bd; }
/* corner crop ticks on hover */
.card::before,.card::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
  opacity:0; transition:opacity .3s var(--ease);
}
.card::before{ top:-1px; left:-1px; border-top:2px solid var(--accent);
  border-left:2px solid var(--accent); }
.card::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--accent);
  border-right:2px solid var(--accent); }
.card:hover::before,.card:hover::after{ opacity:1; }

/* ---- project page -------------------------------------------------------- */
.crumb{ padding-top:30px; }
.crumb a{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--graphite); text-decoration:none; }
.crumb a:hover{ color:var(--accent); }

.phead{ padding-top:22px; padding-bottom:clamp(30px,5vw,52px); }
.phead .tag{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--graphite); display:block;
  margin-bottom:18px; }
.phead .tag .n{ color:var(--accent); }
.phead h1{ font-size:clamp(2.2rem,5.4vw,3.7rem); font-weight:800;
  letter-spacing:-.03em; margin-bottom:.5em; max-width:18ch; }
.phead .lede{ margin-bottom:1.4em; }

.statrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.statrow .chip{ font-size:.74rem; padding:5px 11px; }

.dl{ display:inline-flex; align-items:center; gap:9px; margin-top:26px;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em;
  text-decoration:none; color:var(--ink);
  border:1.5px solid var(--ink); padding:10px 16px; background:transparent;
  transition:background .25s var(--ease), color .25s var(--ease); }
.dl:hover{ background:var(--ink); color:var(--surface); }
.dl svg{ width:15px; height:15px; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.actions .dl{ margin-top:0; }

/* collapsible block (executive summary) — compact button like .dl */
details.exsum{ margin:2px 0 14px; }
details.exsum summary{ list-style:none; cursor:pointer; width:max-content; max-width:100%;
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border:1px solid var(--ink); background:var(--surface);
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); transition:background .2s var(--ease), color .2s var(--ease); }
details.exsum summary::-webkit-details-marker{ display:none; }
details.exsum summary:hover{ background:var(--ink); color:var(--surface); }
details.exsum summary svg{ width:15px; height:15px; flex:none; }
details.exsum summary .lbl{ flex:1; }
details.exsum summary .chev{ width:8px; height:8px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .25s var(--ease); }
details.exsum[open] summary{ margin-bottom:20px; }
details.exsum[open] summary .chev{ transform:rotate(-135deg); }
details.exsum .prose{ padding:0; }

/* video + youtube share the framed-plate look but go edge-to-edge on black */
figure.fig.media .imgwrap,
figure.fig.embed .imgwrap{ padding:0; background:#0c0d10; }
figure.fig.media video{ display:block; width:auto; max-width:100%; height:auto;
  max-height:72vh; margin:0 auto; background:#0c0d10; border:0; }
figure.fig.embed .frame{ position:relative; width:100%; aspect-ratio:16/9; }
figure.fig.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* image-less project card: a quiet graphite plate with a mono label */
.card .shot.ph{ display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2a2e35,#15171c); position:relative; }
.card .shot.ph .lab{ font-family:var(--f-mono); font-size:.82rem; letter-spacing:.24em;
  text-transform:uppercase; color:#cfd3da; text-align:center; }
.card .shot.ph::after{ content:""; position:absolute; inset:14px;
  border:1px solid rgba(255,255,255,.14); }

/* prose blocks within project pages */
.prose{ max-width:none; }
.prose p{ color:#23262d; }
.prose h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin:1.6em 0 .5em; }

/* sub-section header (dimension divider, left-weighted) */
.sub{ margin:clamp(40px,6vw,72px) 0 26px; }
.sub .dim .lab{ font-size:.74rem; }

/* figures */
.figs{ display:grid; gap:clamp(16px,2.2vw,28px); align-items:start; }
.figs.two{ grid-template-columns:repeat(2,1fr); }
.figs.three{ grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .figs.two,.figs.three{ grid-template-columns:1fr; } }

figure.fig{ margin:0; background:var(--surface); border:1px solid var(--line);
  overflow:hidden; display:flex; flex-direction:column; }
/* default: a matted plate — image floats on a mat inside a hairline, so even
   white-background CAD/line art reads as a framed sheet rather than a void.
   Image sizes to its own content; no forced cell height, so no ragged gaps. */
figure.fig .imgwrap{ background:#e9ebee; cursor:zoom-in;
  padding:clamp(12px,1.8vw,20px); display:flex; align-items:center;
  justify-content:center; }
figure.fig img{ width:auto; max-width:100%; height:auto;
  max-height:clamp(280px,42vh,460px); object-fit:contain;
  background:#fff; border:1px solid var(--line); }
/* cover figures: edge-to-edge photographic crop, uniform ratio */
figure.fig.cover .imgwrap{ aspect-ratio:16/10; padding:0; }
figure.fig.cover.tile .imgwrap{ aspect-ratio:1/1; }
figure.fig.cover img{ width:100%; height:100%; max-height:none;
  object-fit:cover; background:none; border:0; }
figure.fig figcaption{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.03em;
  color:var(--graphite); padding:11px 14px; border-top:1px solid var(--line);
  line-height:1.45; background:var(--surface); }
figure.fig figcaption .fn{ color:var(--accent); margin-right:8px; }

.pnav{ display:flex; justify-content:space-between; gap:16px;
  border-top:1px solid var(--line); margin-top:clamp(48px,7vw,84px);
  padding-block:30px; }
.pnav a{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em;
  text-decoration:none; color:var(--graphite); max-width:48%; }
.pnav a:hover{ color:var(--accent); }
.pnav .d{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  display:block; margin-bottom:4px; }
.pnav a.next{ text-align:right; margin-left:auto; }

/* ---- about --------------------------------------------------------------- */
.abt-grid{ display:grid; grid-template-columns:1.4fr 1fr;
  gap:clamp(28px,5vw,64px); align-items:start; }
@media (max-width:820px){ .abt-grid{ grid-template-columns:1fr; } }
.caps{ border:1px solid var(--line); background:var(--surface); }
.caps .h{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--graphite); padding:14px 16px;
  border-bottom:1px solid var(--line); }
.caps ul{ margin:0; padding:6px 0; list-style:none; }
.caps li{ font-family:var(--f-mono); font-size:.82rem; color:#23262d;
  padding:7px 16px; display:flex; gap:12px; }
.caps li .b{ color:var(--accent); }

/* ---- footer -------------------------------------------------------------- */
footer{ border-top:1px solid var(--line); margin-top:clamp(50px,8vw,90px);
  background:rgba(247,248,249,.5); }
footer .wrap{ display:flex; flex-wrap:wrap; gap:18px 40px;
  justify-content:space-between; align-items:center; padding-block:30px; }
footer .who{ font-family:var(--f-disp); font-weight:700; font-size:1.15rem; }
footer .meta{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--graphite); }
footer a{ color:var(--graphite); text-decoration:none; }
footer a:hover{ color:var(--accent); }
footer .links{ display:flex; gap:22px; font-family:var(--f-mono);
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; }

/* ---- entrance ------------------------------------------------------------ */
/* Content is ALWAYS visible — nothing is hidden waiting on a script. The only
   motion is one self-completing load fade on the hero (fill-mode lands it on
   the final state, so it can never get stuck mid-animation). */
.reveal{ opacity:1; transform:none; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; } }
.hero .eyebrow,.hero h1,.hero .thesis,.hero .titleblock{
  animation:riseIn .7s var(--ease) both; }
.hero h1{ animation-delay:.05s; }
.hero .thesis{ animation-delay:.12s; }
.hero .titleblock{ animation-delay:.2s; }
@media (prefers-reduced-motion: reduce){
  .hero .eyebrow,.hero h1,.hero .thesis,.hero .titleblock{ animation:none; }
  .card:hover{ transform:none; }
  .card .shot img,.card:hover .shot img{ transition:none; transform:none; }
}

/* ---- lightbox ------------------------------------------------------------ */
.lb{ position:fixed; inset:0; z-index:100; display:none;
  background:rgba(18,20,24,.92); padding:4vmin;
  align-items:center; justify-content:center; }
.lb.open{ display:flex; }
.lb img{ max-width:96vw; max-height:92vh; object-fit:contain;
  border:1px solid #3a3d44; }
.lb .x{ position:absolute; top:14px; right:18px; font-family:var(--f-mono);
  font-size:.8rem; letter-spacing:.1em; color:#cfd3d8; background:none;
  border:1px solid #4a4d55; padding:7px 12px; cursor:pointer; }
.lb .x:hover{ color:#fff; border-color:#fff; }

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; }

/* utility */
.full{ width:100%; }
.mt0{ margin-top:0; }