/* Eliot Abramo — portfolio
   Swiss technical grid. Paper, ink, one signal colour.
   Structure is carried by hairline rules and the type scale, not by decoration. */

/* ---------------------------------------------------------------- tokens */

:root {
  --paper:    #F7F6F3;
  --paper-2:  #EFEEEA;
  --ink:      #111111;
  --ink-2:    #6B6B6B;
  --rule:     #D8D6D1;
  --signal:   #C0331B;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: 24px;
  --max: 1240px;

  --rule-w: 1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #0E0E0D;
    --paper-2: #161615;
    --ink:     #EDEBE6;
    --ink-2:   #8B8880;
    --rule:    #2A2926;
    --signal:  #E8543A;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

::selection { background: var(--signal); color: var(--paper); }

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

/* ------------------------------------------------------------------ grid */

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

.rule-top { border-top: var(--rule-w) solid var(--rule); }

/* Section heading: mono number + label, sitting on a rule. */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1rem 0 2.5rem;
}
.section-head .num {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--signal);
  letter-spacing: .08em;
}
.section-head h2 {
  font-size: .75rem;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

section { padding-bottom: 5rem; }

/* ---------------------------------------------------------------- header */

.site-header {
  border-bottom: var(--rule-w) solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 50;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 56px;
}
.site-header .brand {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.site-header nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-header nav a {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color .12s;
}
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { color: var(--ink); }
.site-header nav a[aria-current="page"] { color: var(--signal); }

/* ------------------------------------------------------------------ hero */

/* Block padding only — the horizontal gutter comes from .wrap and must survive. */
.hero { padding-top: 6rem; padding-bottom: 4rem; }

/* Name and standfirst on the left. The portrait takes the rest of the row and
   sits centred in it, so it lands halfway between the text and the page edge,
   on the vertical centre of the name-plus-standfirst block. */
.intro {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0 0 3.5rem;
}

/* Never grows past its own text, so the space left over for the circle starts
   at the end of the writing rather than at some invisible column edge. */
.intro-text { flex: 0 1 auto; }
.intro-text .standfirst { margin-bottom: 0; }

.intro-portrait {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.portrait {
  flex: none;
  width: clamp(180px, 24vw, 340px);
  height: clamp(180px, 24vw, 340px);
  border-radius: 50%;
  object-fit: cover;
  /* Crop window sits low enough to clear the top of the head and keep the
     face on the middle of the circle. */
  object-position: 50% 40%;
  border: var(--rule-w) solid var(--rule);
  background: var(--paper-2);
}

.hero h1 {
  font-size: clamp(2.6rem, 7.5vw, 5.75rem);
  line-height: .96;
  letter-spacing: -.035em;
  font-weight: 600;
  margin: 0 0 1.75rem;
  max-width: 16ch;
}

.hero .standfirst {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.4;
  max-width: 46ch;
  margin: 0 0 3.5rem;
  color: var(--ink);
}

.hero .standfirst .muted { color: var(--ink-2); }

/* Dated fact list. Every row anchored to a year — the whole point. */
.facts {
  border-top: var(--rule-w) solid var(--rule);
  max-width: 780px;
}
.facts .row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.5rem;
  padding: .85rem 0;
  border-bottom: var(--rule-w) solid var(--rule);
  align-items: baseline;
}
.facts .when {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.facts .what { font-size: .95rem; }
.facts .what .org { color: var(--ink-2); }

/* ------------------------------------------------------- work index rows */

.index { border-top: var(--rule-w) solid var(--rule); }

.index-row {
  display: grid;
  grid-template-columns: 3rem 1fr 12rem 6rem;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: var(--rule-w) solid var(--rule);
  text-decoration: none;
  color: inherit;
  align-items: start;
  transition: background .12s;
}
.index-row:hover { background: var(--paper-2); }
.index-row:hover .index-title { color: var(--signal); }
.index-row:hover .arrow { color: var(--signal); transform: translateX(3px); }

.index-num {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-2);
  padding-top: .3rem;
  letter-spacing: .06em;
}
.index-title {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -.015em;
  margin: 0 0 .4rem;
  transition: color .12s;
  line-height: 1.2;
}
.index-summary {
  font-size: .9rem;
  color: var(--ink-2);
  margin: 0;
  max-width: 58ch;
  line-height: 1.45;
}
.index-tech {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-2);
  letter-spacing: .04em;
  padding-top: .45rem;
  line-height: 1.7;
}
.index-meta {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-2);
  letter-spacing: .06em;
  padding-top: .45rem;
  text-align: right;
  white-space: nowrap;
}
.arrow {
  display: inline-block;
  transition: transform .12s, color .12s;
}

/* Rows with no case study yet: still listed, visibly not yet written up. */
.index-row.stub { cursor: default; }
.index-row.stub:hover { background: transparent; }
.index-row.stub:hover .index-title { color: inherit; }
.index-row.stub .index-meta { opacity: .55; }

/* ------------------------------------------------------------ case study */

.study-header { padding: 4.5rem 0 3rem; }

.study-header .eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 1.25rem;
}
.study-header h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 600;
  margin: 0 0 1.5rem;
  max-width: 20ch;
}
.study-header .deck {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0;
}

/* Metadata strip: role / org / years / stack */
.meta-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  border-top: var(--rule-w) solid var(--rule);
  border-bottom: var(--rule-w) solid var(--rule);
  padding: 1.25rem 0;
  margin-bottom: 4rem;
}
.meta-strip dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 .4rem;
}
.meta-strip dd { margin: 0; font-size: .9rem; }

/* Body of a case study: two columns, label rail + prose. */
.block {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 2rem;
  padding: 2.25rem 0;
  border-top: var(--rule-w) solid var(--rule);
}
.block > h2 {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
  padding-top: .2rem;
}
/* Prose keeps a readable measure; figures and tables are allowed to break out
   of it, because a block diagram squeezed to 62ch is unreadable. */
/* min-width:0 matters: without it a grid child refuses to shrink below its
   content, and the overflow-x on .fig-canvas never gets a chance to engage. */
.block { min-width: 0; }
.block .body { max-width: 940px; min-width: 0; }
.block .body > p,
.block .body > ul { max-width: 62ch; }
.block .body > :first-child { margin-top: 0; }
.block .body > :last-child { margin-bottom: 0; }
.block p { font-size: 1rem; line-height: 1.6; margin: 0 0 1rem; }

.block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.block ul li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .7rem;
  font-size: 1rem;
  line-height: 1.55;
}
.block ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--signal);
}

/* Spec table: the numbers, aligned. */
.specs { width: 100%; max-width: 620px; border-collapse: collapse; }
.specs th, .specs td {
  text-align: left;
  padding: .6rem 0;
  border-bottom: var(--rule-w) solid var(--rule);
  font-size: .88rem;
  vertical-align: baseline;
}
.specs th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  width: 55%;
}
.specs td { font-family: var(--mono); font-size: .82rem; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }

/* Figures */
figure { margin: 0 0 2rem; }
figure img {
  width: 100%;
  border: var(--rule-w) solid var(--rule);
  background: var(--paper-2);
}
figcaption {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--ink-2);
  margin-top: .6rem;
  line-height: 1.5;
}
figcaption .fig-num { color: var(--signal); }

/* A figure we know is missing — stated, not faked. */
.fig-gap {
  border: var(--rule-w) dashed var(--rule);
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-2);
  letter-spacing: .04em;
}

/* --------------------------------------------------------------- gallery */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
.gallery-grid figure { margin: 0; }
.gallery-grid img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ----------------------------------------------------------------- links */

.link {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: var(--rule-w) solid var(--ink);
  padding-bottom: 2px;
  transition: color .12s, border-color .12s;
  display: inline-block;
}
.link:hover { color: var(--signal); border-color: var(--signal); }

.link-row {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Prose links inside body copy. */
.block .body a:not(.link) {
  color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------ form */

.form { max-width: 560px; }
.form label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: .45rem;
}
.form input, .form textarea {
  width: 100%;
  background: transparent;
  border: var(--rule-w) solid var(--rule);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .95rem;
  padding: .7rem .8rem;
  margin-bottom: 1.5rem;
  border-radius: 0;
  transition: border-color .12s;
}
.form input:focus, .form textarea:focus {
  outline: none;
  border-color: var(--signal);
}
.form textarea { resize: vertical; min-height: 150px; }

button.link {
  background: transparent;
  border: 0;
  border-bottom: var(--rule-w) solid var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  padding: 0 0 2px;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: var(--rule-w) solid var(--rule);
  padding: 2.5rem 0 3.5rem;
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.site-footer nav { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.site-footer a {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color .12s;
}
.site-footer a:hover { color: var(--signal); }
.site-footer .colophon {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-2);
  letter-spacing: .04em;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  /* Not enough room for two columns — the portrait drops under the name. */
  .intro { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .intro-portrait { justify-content: flex-start; }
  .portrait { width: clamp(160px, 38vw, 240px); height: clamp(160px, 38vw, 240px); }
  .index-row { grid-template-columns: 2.25rem 1fr; }
  .index-tech, .index-meta { display: none; }
  .block { grid-template-columns: 1fr; gap: .75rem; }
  .facts .row { grid-template-columns: 6rem 1fr; gap: 1rem; }
}

@media (max-width: 600px) {
  :root { --gutter: 18px; }
  .hero { padding-top: 3.5rem; padding-bottom: 2.5rem; }
  .site-header .wrap { flex-direction: column; align-items: flex-start; padding-top: .75rem; padding-bottom: .75rem; }
  .site-header nav { gap: 1rem; }
  .facts .row { grid-template-columns: 1fr; gap: .2rem; }
  .meta-strip { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer { display: none; }
  body { background: #fff; color: #000; }
}


/* ============================================================================
   ADDITIONS — proof strip, inline diagrams, index metadata, limits block.
   Same grid, same single signal colour; nothing new invented.
   ========================================================================== */

/* ------------------------------------------------------------ proof strip */
/* Four numbers, above the fold. Each carries a unit and an attribution,
   because a number without either is decoration. */

.proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--rule-w) solid var(--rule);
  border-bottom: var(--rule-w) solid var(--rule);
  margin-top: 3rem;
}
.proof > div {
  padding: 1.6rem 1.6rem 1.7rem;
  border-left: var(--rule-w) solid var(--rule);
}
.proof > div:first-child { border-left: 0; padding-left: 0; }

.proof .figure {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.4rem, 2.5vw, 1.95rem);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: .8rem;
}
.proof .figure .unit { font-size: .55em; color: var(--ink-2); letter-spacing: 0; }
.proof .label { font-size: .85rem; line-height: 1.45; color: var(--ink); margin: 0; }
.proof .src {
  display: block;
  margin-top: .7rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--signal);
}

/* ------------------------------------------------------- inline diagrams */

figure.fig-diagram { margin-bottom: 2.5rem; }

.fig-canvas {
  border: var(--rule-w) solid var(--rule);
  background: var(--paper);
  padding: 1.5rem 1.25rem;
  overflow-x: auto;
}
/* A block diagram squeezed under ~560px is unreadable, so it scrolls inside
   its own box rather than shrinking into noise. */
.fig-canvas svg { display: block; width: 100%; min-width: 560px; height: auto; }

/* A standalone diagram dropped into a page, outside a case study. */
[data-diagram] {
  border: var(--rule-w) solid var(--rule);
  background: var(--paper);
  padding: 1.75rem 1.5rem;
  overflow-x: auto;
}
[data-diagram] svg { display: block; width: 100%; min-width: 560px; height: auto; }

/* --------------------------------------------------- index row additions */

.index-org {
  display: block;
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.index-status {
  display: inline-block;
  margin-left: .7rem;
  vertical-align: middle;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
  border: var(--rule-w) solid var(--signal);
  padding: .18em .55em .22em;
}

/* ----------------------------------------------------------- limits block */
/* Stating what a result does not show is the most credible paragraph on a
   project page, so it is set apart rather than buried. */

.block .body p.limits {
  border-left: 2px solid var(--signal);
  padding-left: 1.1rem;
  color: var(--ink-2);
}

/* ------------------------------------------------------------- looking for */

.seeking { border-top: var(--rule-w) solid var(--rule); max-width: 820px; }
.seeking .row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.5rem;
  padding: .9rem 0;
  border-bottom: var(--rule-w) solid var(--rule);
  align-items: baseline;
}
.seeking .k {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.seeking .v { font-size: .95rem; }

/* ------------------------------------------------- responsive: additions */

@media (max-width: 900px) {
  .proof { grid-template-columns: 1fr 1fr; }
  .proof > div { border-left: 0; padding-left: 0; }
  .proof > div:nth-child(2n) { padding-left: 1.6rem; border-left: var(--rule-w) solid var(--rule); }
  .proof > div:nth-child(-n+2) { border-bottom: var(--rule-w) solid var(--rule); }
  .seeking .row { grid-template-columns: 8rem 1fr; gap: 1rem; }
}

@media (max-width: 600px) {
  .proof { grid-template-columns: 1fr; }
  .proof > div { border-left: 0; padding: 1.25rem 0; border-bottom: var(--rule-w) solid var(--rule); }
  .proof > div:last-child { border-bottom: 0; }
  .proof > div:nth-child(2n) { padding-left: 0; border-left: 0; }
  .fig-canvas, [data-diagram] { padding: 1rem .75rem; }
  .seeking .row { grid-template-columns: 1fr; gap: .2rem; }
}

/* A lede paragraph pair under a section head — prose measure, no label rail. */
.lede { max-width: 68ch; }
.lede p { font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.1rem; }
.lede p:last-child { margin-bottom: 0; }


/* ------------------------------------------------------ technical notes */

/* Three figures at the head of a note. Same idea as .proof on the index,
   but sized for a page where the number is the argument rather than a badge. */
.keynums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  padding: 0 0 3rem;
}
.keynum {
  font-family: var(--mono);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  display: block;
  color: var(--ink);
}
.keyunit {
  font-size: .5em;
  color: var(--ink-2);
  letter-spacing: 0;
}
.keylabel {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-2);
  margin: .7rem 0 0;
  max-width: 30ch;
}

/* Inline code inside note prose. */
.block .body code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--paper-2);
  padding: .12em .35em;
  border-radius: 2px;
}