/* Minimal-brutalist theme: black, white, one red. Visible structure, oversized type, no ornament. */

:root {
  --paper: #ffffff;
  --ink: #0a0a0a;
  --red: #e8291c;
  --rule: 2px solid var(--ink);
  --hair: 1px solid var(--ink);
  --pad: clamp(12px, 1.6vw, 20px);
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0a0a0a; --ink: #f2f2f0; --red: #ff4a3d; color-scheme: dark; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.5 var(--display);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, p, figure, dl, dd { margin: 0; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .8125rem; line-height: 1.4; text-transform: uppercase; letter-spacing: .02em; }
.sl { color: var(--red); }
.dot { color: var(--red); }
.u { text-decoration: underline; text-underline-offset: 3px; }
.u:hover { color: var(--red); }

/* ---------- Bar ---------- */
.bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 12px var(--pad); border-bottom: var(--rule);
  font-family: var(--mono); font-size: .8125rem; text-transform: uppercase; letter-spacing: .02em;
  position: sticky; top: 0; z-index: 10; background: var(--paper);
}
.bar-nav { display: flex; gap: 20px; }
.bar a:hover { color: var(--red); }
.bar-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Display type ---------- */
.mega {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(3rem, 11.5vw, 11rem);
  line-height: .86; letter-spacing: -.055em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.statement { font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1.12; letter-spacing: -.03em; }

/* ---------- Home ---------- */
.mast { padding: clamp(28px, 6vw, 72px) var(--pad) var(--pad); border-bottom: var(--rule); }
.mast .mono { margin-top: 18px; }

.index { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: var(--rule); }
.row {
  display: grid; align-items: center;
  grid-template-columns: 56px minmax(0, 1fr) 180px 190px 56px;
  border-bottom: var(--hair);
}
.row:last-child { border-bottom: 0; }
.row > span { padding: 16px var(--pad); border-right: var(--hair); align-self: stretch; display: flex; align-items: center; }
.row > span:nth-child(5) { border-right: 0; justify-content: center; }
.c-no, .c-role, .c-co { font-family: var(--mono); font-size: .8125rem; text-transform: uppercase; letter-spacing: .02em; }
.c-title { font-weight: 900; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.6rem); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.c-arrow { font-size: 1.4rem; }
.row.head > span { padding-top: 10px; padding-bottom: 10px; font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: .02em; }
a.row:hover, a.row:focus-visible { background: var(--ink); color: var(--paper); outline: 0; }
a.row:hover > span, a.row:focus-visible > span { border-color: var(--paper); }
a.row:hover .c-title, a.row:hover .c-arrow, a.row:focus-visible .c-title { color: var(--red); }
.row-thumb { display: none; }

.preview { display: none; }

@media (min-width: 1100px) {
  .index { grid-template-columns: minmax(0, 1fr) 36%; }
  .index-list { border-right: var(--rule); }
  .preview { display: block; position: sticky; top: 46px; align-self: start; padding: var(--pad); }
  .preview-img, .preview .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--hair); }
  .preview figcaption { margin-top: 10px; }
}
@media (max-width: 860px) {
  .row { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .row .c-role, .row .c-co { display: none; }
  .row > span:nth-child(5) { border-right: 0; }
  .row.head { display: none; }
  .row-thumb, .row .ph.row-thumb {
    display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    border-top: var(--hair);
  }
}

/* ---------- Project ---------- */
.proj-head { padding: clamp(24px, 5vw, 56px) var(--pad) var(--pad); border-bottom: var(--rule); }
.crumb { margin-bottom: 18px; }
.crumb a { text-decoration: underline; text-underline-offset: 3px; }
.crumb a:hover { color: var(--red); }

.spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: var(--rule); }
.spec > div { padding: var(--pad); border-right: var(--hair); }
.spec > div:last-child { border-right: 0; }
.spec dt { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.spec dd { font-weight: 700; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.02em; }
.spec a { text-decoration: underline; text-underline-offset: 3px; }
.spec a:hover { color: var(--red); }

.shots { display: grid; }
.shot { border-bottom: var(--rule); }
.shot-img, .shot .ph { width: 100%; height: auto; max-height: 92vh; object-fit: contain; background: var(--ink); }
.shot .ph { aspect-ratio: 3 / 2; height: auto; }
.shot figcaption { display: flex; justify-content: space-between; gap: 16px; padding: 10px var(--pad); border-top: var(--hair); }

.pager { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--rule); }
.pager a { display: grid; gap: 10px; padding: clamp(20px, 3vw, 36px) var(--pad); }
.pager a + a { border-left: var(--rule); text-align: right; }
.pager-t { font-weight: 900; font-size: clamp(1.5rem, 1rem + 2.2vw, 3.2rem); line-height: .95; letter-spacing: -.045em; text-transform: uppercase; }
.pager a:hover { background: var(--ink); color: var(--paper); }
.pager a:hover .pager-t { color: var(--red); }

/* ---------- Placeholder until photos are added ---------- */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; min-height: 120px; aspect-ratio: 4 / 3;
  background: var(--paper); color: var(--ink);
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink) 50%, transparent calc(50% + 1px));
  font-family: var(--mono); font-size: .75rem; word-break: break-all;
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-bottom: var(--rule); }
.about-photo { border-right: var(--rule); }
.about-img, .about-photo .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.about-photo figcaption { padding: 10px var(--pad); border-top: var(--hair); }
.about-text { display: flex; flex-direction: column; }
.about-text > p { padding: var(--pad); max-width: 40em; }
.about-text > p:first-child { padding-top: clamp(20px, 3vw, 36px); }
.about-text > p:nth-child(2) { font-size: 1.15rem; line-height: 1.5; }
.spec-tight { grid-template-columns: 1fr 1fr; margin-top: auto; border-top: var(--rule); border-bottom: 0; }
.spec-tight > div { border-bottom: var(--hair); }
.spec-tight > div:nth-child(2n) { border-right: 0; }
.spec-tight > div:nth-last-child(-n+2) { border-bottom: 0; }

/* ---------- Contact ---------- */
.contact .statement { margin-top: 20px; }
.mail {
  display: block; padding: clamp(20px, 4vw, 48px) var(--pad); border-bottom: var(--rule);
  font-weight: 900; font-size: clamp(1.6rem, 5.4vw, 5.6rem); line-height: .95; letter-spacing: -.05em;
  text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em;
  overflow-wrap: anywhere;
}
.mail:hover { background: var(--red); color: #fff; }
.form { border-bottom: var(--rule); }
.form-note { padding: 12px var(--pad); border-bottom: var(--hair); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; }
.f { display: grid; gap: 8px; padding: var(--pad); border-bottom: var(--hair); }
.f:nth-child(odd):not(.wide) { border-right: var(--hair); }
.f.wide { grid-column: 1 / -1; }
.f input, .f textarea {
  font: 700 1.15rem/1.4 var(--display); letter-spacing: -.01em; color: var(--ink);
  background: transparent; border: var(--rule); border-radius: 0; padding: 12px 14px;
  -webkit-appearance: none; appearance: none;
}
.f textarea { resize: vertical; }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--red); box-shadow: 4px 4px 0 var(--red); }
.err { display: none; color: var(--red); }
.f.invalid input, .f.invalid textarea { border-color: var(--red); }
.f.invalid .err { display: block; }
.send {
  display: block; width: 100%; cursor: pointer;
  font: 900 clamp(1.4rem, 1rem + 2vw, 2.6rem)/1 var(--display); letter-spacing: -.04em; text-transform: uppercase; text-align: left;
  color: var(--paper); background: var(--ink); border: 0; border-radius: 0; padding: clamp(18px, 3vw, 32px) var(--pad);
}
.send:hover, .send:focus-visible { background: var(--red); color: #fff; }

/* ---------- Footer ---------- */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 14px var(--pad);
  font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .02em;
}
.foot a { margin-left: 16px; text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { color: var(--red); }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .spec { grid-template-columns: 1fr 1fr; }
  .spec > div:nth-child(2n) { border-right: 0; }
  .spec > div:nth-child(-n+2) { border-bottom: var(--hair); }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { border-right: 0; border-bottom: var(--rule); }
  .form-grid { grid-template-columns: 1fr; }
  .f:nth-child(odd):not(.wide) { border-right: 0; }
  .pager { grid-template-columns: 1fr; }
  .pager a + a { border-left: 0; border-top: var(--rule); text-align: left; }
}
@media (max-width: 480px) {
  .bar { flex-direction: column; }
  .spec-tight { grid-template-columns: 1fr; }
  .spec-tight > div { border-right: 0 !important; border-bottom: var(--hair) !important; }
  .spec-tight > div:last-child { border-bottom: 0 !important; }
}

@media (prefers-contrast: more) { :root { --red: #c00000; } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { :root { --red: #ff6b60; } }
.foot a:first-child { margin-left: 0; }

/* ---------- Logo in the bar ---------- */
.bar { align-items: center; }
.bar-id { display: flex; align-items: center; gap: 14px; }
.bar-logo { height: 34px; width: auto; }
.bar-logo + .bar-txt { padding-left: 14px; border-left: var(--hair); line-height: 34px; }
@media (prefers-color-scheme: dark) { .bar-logo { filter: invert(1); } }
@media (max-width: 480px) { .bar-logo { height: 28px; } .bar-logo + .bar-txt { line-height: 28px; } .bar-txt { font-size: .6875rem; white-space: nowrap; } }
@media (max-width: 480px) { .bar { align-items: flex-start; } }
@media (max-width: 370px) { .bar-txt { white-space: normal; } .bar-logo + .bar-txt { line-height: 1.4; } }
.form-err { padding: 0 var(--pad) 12px; }
.send:disabled { cursor: wait; opacity: .7; }