/* markallenlakins.com
   Restyled 2026-09-15 on the rules taken from MARK: Another Architecture.
   Research and sourcing: "10 MARK MAGAZINE - the layout rules, and what to take.md"

   Vertical scale corrected the same day: the first pass stacked three 10rem gaps and produced
   a blank screen. MARK is calm, never empty. Rule 10 - the reader outranks the designer.

   THE SYSTEM IS STATED HERE AND THEN OBEYED. Edwin van Gelder, who art-directed MARK:
   "Without boundaries, there will be no logic."
   Do not introduce a value that is not on one of these scales.

   ROLLBACK: the previous serif design is style-serif.css. Change one <link> per page. */

:root {
  /* ---- ONE SPACING UNIT. Everything vertical is a multiple of it. ---- */
  --u:    0.5rem;
  --u2:   1rem;      --u3:  1.5rem;   --u4:  2rem;
  --u6:   3rem;      --u8:  4rem;     --u12: 6rem;
  --u16:  8rem;      --u20: 10rem;

  /* ---- TYPE SCALE. Six sizes. There is no seventh. ---- */
  --t-micro: 0.6875rem;   /* labels, nav, captions      */
  --t-small: 0.8125rem;   /* meta                        */
  --t-body:  1.0625rem;   /* running text                */
  --t-lead:  1.375rem;    /* standfirst                  */
  --t-head:  2.25rem;     /* page titles                 */
  --t-hero:  clamp(1.75rem, 5vw, 3.75rem);

  /* ---- COLOUR IS NAVIGATION, NOT DECORATION. ---- */
  --ink:       #111111;
  --ink-soft:  #55534f;
  --ink-faint: #8f8b85;
  --paper:     #f7f6f4;
  --rule:      #dddad5;
  --accent:    #7a3b2e;   /* current location only. never ornament. */

  /* ---- MEASURE AND PAGE ---- */
  --measure: 33rem;
  --wrap:    74rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* RULE 2 - one typeface, working hard. Separated by size and weight, never by family. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Helvetica, "Segoe UI", Arial, system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}

/* RULE 3 - photography gets the page. No frame, no shadow, no hover trick. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--ink); }

/* ---------- layout: the grid, stated ---------- */

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

@media (min-width: 60rem) { .wrap { padding: 0 var(--u6); } }

/* ---------- masthead ---------- */

header.site { border-bottom: 1px solid var(--rule); padding: var(--u3) 0; margin-bottom: var(--u12); }
header.site .wrap { display: flex; align-items: baseline; justify-content: space-between;
                    gap: var(--u3); flex-wrap: wrap; }

.wordmark {
  font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase;
  border: 0; font-weight: 600;
}
nav.site a {
  margin-left: var(--u3); border: 0;
  font-size: var(--t-micro); letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-faint);
}
nav.site a:hover { color: var(--ink); }
/* RULE 5 - the accent marks WHERE YOU ARE. That is its only job. */
nav.site a[aria-current="page"] { color: var(--accent); }

@media (max-width: 40rem) {
  header.site .wrap { flex-direction: column; gap: var(--u2); }
  nav.site a { margin: 0 var(--u2) 0 0; display: inline-block; }
}

/* ---------- the identity line ---------- */

.identity {
  font-size: var(--t-hero);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 500;
  max-width: 16em;
  margin: 0 0 var(--u12);
}
.identity em { font-style: normal; color: var(--ink-faint); font-weight: 400; }

/* ---------- the four-beat through-line ---------- */

.arc {
  display: grid; gap: var(--u6);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: 1px solid var(--rule);
  padding-top: var(--u4); margin-bottom: var(--u12);
}
/* RULE 6 - emphasis without volume. Weight and isolation, not colour. */
.arc h3 {
  font-size: var(--t-micro); letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink); font-weight: 600; margin: 0 0 var(--u2);
}
.arc p { margin: 0; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.55; }
.arc .years { display: block; font-size: var(--t-micro); color: var(--ink-faint);
              margin-top: var(--u2); letter-spacing: 0.06em; }

/* ---------- section headings ---------- */
/* RULE 4 - negative space is the material. These gaps are deliberate. */

h2.section {
  font-size: var(--t-micro); letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink); font-weight: 600;
  border-top: 1px solid var(--ink); padding-top: var(--u2);
  margin: var(--u12) 0 var(--u6);
}

h1.page {
  font-size: var(--t-head); line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 var(--u3); font-weight: 500;
}

h3.item { font-size: 1.0625rem; margin: 0 0 var(--u); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- featured work ---------- */

.featured { display: grid; gap: var(--u8) var(--u6);
            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.card figure { margin: 0 0 var(--u3); background: #e2ded8; aspect-ratio: 4 / 3; overflow: hidden; }
.card figure img { width: 100%; height: 100%; object-fit: cover; }
.card a.cardlink { border: 0; display: block; }
.card a.cardlink:hover h3.item { color: var(--accent); }
.card p { margin: var(--u) 0 0; font-size: var(--t-small); color: var(--ink-soft); line-height: 1.55; }

/* the role label - the ethical spine of this site. Emphasis by weight and a rule, not colour. */
.role {
  display: inline-block; margin-top: var(--u2);
  font-size: var(--t-micro); letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 600; color: var(--ink);
  border-top: 1px solid var(--ink); padding-top: var(--u);
}
.meta { font-size: var(--t-micro); color: var(--ink-faint); letter-spacing: 0.06em;
        text-transform: uppercase; }

/* ---------- the proof band ---------- */

.proof {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: var(--u16) 0; padding: var(--u6) 0;
  display: grid; gap: var(--u6); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.proof .n { display: block; font-size: 3rem; line-height: 1; font-weight: 500; letter-spacing: -0.04em; }
.proof .l { display: block; margin-top: var(--u2); font-size: var(--t-micro);
            letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- the project list ---------- */

.filters { margin: 0 0 var(--u6); display: flex; flex-wrap: wrap; gap: var(--u); }
.filters button {
  font: inherit; font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500; padding: var(--u) var(--u2);
  background: transparent; color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 0; cursor: pointer;
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

table.projects { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
table.projects th {
  text-align: left; font-size: var(--t-micro); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
  border-bottom: 1px solid var(--ink); padding: 0 var(--u2) var(--u) 0;
}
table.projects td { padding: var(--u2) var(--u2) var(--u2) 0;
                    border-bottom: 1px solid var(--rule); vertical-align: top; }
table.projects td.r { color: var(--ink); font-size: var(--t-micro);
                      letter-spacing: 0.08em; text-transform: uppercase; }
table.projects td.t { color: var(--ink-faint); font-size: var(--t-micro); letter-spacing: 0.04em; }
.projects td.tbd { color: #b9b4ad; font-style: italic; text-transform: none; letter-spacing: 0; }
tr.hide { display: none; }

@media (max-width: 44rem) {
  table.projects thead { display: none; }
  table.projects tr { display: block; border-bottom: 1px solid var(--rule); padding: var(--u2) 0; }
  table.projects td { display: block; border: 0; padding: 2px 0; }
}

/* ---------- prose ---------- */

.prose p, .prose li { max-width: var(--measure); }
.prose p { margin: 0 0 var(--u3); }
.prose h3 { margin: var(--u8) 0 var(--u2); font-size: var(--t-lead);
            font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; }
.prose ul { padding-left: var(--u3); }
.prose li { margin-bottom: var(--u2); }
.prose blockquote {
  margin: var(--u8) 0; padding: 0; border: 0;
  font-size: var(--t-lead); line-height: 1.3; letter-spacing: -0.02em;
  font-weight: 500; max-width: 22em;
}
.note { color: var(--ink-soft); font-size: var(--t-small); }

/* ---------- project pages ---------- */

.backlink { font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase;
            margin: 0 0 var(--u6); }
.backlink a { border: 0; color: var(--ink-faint); }
.backlink a:hover { color: var(--ink); }

/* RULE 3, again. The image gets the page. */
.hero { margin: var(--u6) 0 var(--u8); background: #e2ded8; }
.hero img { width: 100%; }

.gallery { display: grid; gap: var(--u8) var(--u6);
           grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
           margin: var(--u6) 0 var(--u12); }
.gallery figure { margin: 0; }
.gallery figcaption { font-size: var(--t-micro); letter-spacing: 0.06em;
                      color: var(--ink-faint); margin-top: var(--u2); }

.factbox { display: grid; gap: var(--u4) var(--u6);
           grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
           border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
           padding: var(--u4) 0; margin: var(--u8) 0; }
.factbox dt { font-size: var(--t-micro); letter-spacing: 0.13em; text-transform: uppercase;
              color: var(--ink-faint); font-weight: 600; }
.factbox dd { margin: var(--u) 0 0; font-size: var(--t-small); }

h1.page + p.meta { margin: calc(var(--u2) * -1) 0 var(--u2); }

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

footer.site {
  border-top: 1px solid var(--rule);
  margin-top: var(--u16); padding: var(--u6) 0 var(--u8);
  font-size: var(--t-micro); letter-spacing: 0.06em; color: var(--ink-faint);
}
footer.site a { border-bottom-color: var(--rule); }

/* ---------- credits. Last thing on a project page, quiet, and never skipped. ---------- */
.credits { border-top: 1px solid var(--rule); margin: var(--u12) 0 0; padding-top: var(--u3); }
.credits h2 { font-size: var(--t-micro); letter-spacing: 0.15em; text-transform: uppercase;
              color: var(--ink-faint); font-weight: 600; margin: 0 0 var(--u3); }
.credits dl { display: grid; gap: var(--u) var(--u4); margin: 0;
              grid-template-columns: max-content 1fr; max-width: 34rem; }
.credits dt { font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase;
              color: var(--ink-faint); }
.credits dd { margin: 0; font-size: var(--t-small); }
.credits .mine dt, .credits .mine dd { color: var(--ink); font-weight: 600; }

/* ---------- the portrait on About. Sits beside the text, not above it. ---------- */
.portrait { margin: 0 0 var(--u6); max-width: 22rem; }
.portrait img { width: 100%; }
.portrait figcaption { font-size: var(--t-micro); letter-spacing: 0.06em;
                       color: var(--ink-faint); margin-top: var(--u2); }
@media (min-width: 52rem) {
  .portrait { float: right; margin: 0 0 var(--u4) var(--u6); max-width: 20rem; }
}

/* ---------- THE IMAGE SYSTEM, added 2026-09-15 ----------
   MARK rule 1: state the system, then obey it. Rule 3: photography gets the page.
   Three ratios and no fourth. Cropping happens here, not in the files, so the
   originals stay whole and a bad crop is one line to undo.
     hero      3:2   - the big gesture, the same on every project page
     gallery   4:3   - uniform, so the grid reads as a grid
     .tall     3:4   - the detail. Use sparingly; it is the rhythm break.
   object-position is set per image only where the subject sits off-centre.        */

.hero { aspect-ratio: 3 / 2; overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.gallery figure { aspect-ratio: auto; }
.gallery figure > img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  background: #e2ded8;
}
.gallery figure.tall > img { aspect-ratio: 3 / 4; }

/* a few frames whose subject is not in the middle */
img[src$="bridge-01.jpg"] { object-position: center 60%; }
img[src$="escondido-04.jpg"] { object-position: center 40%; }
img[src$="windsor-01.jpg"], img[src$="windsor-02.jpg"],
img[src$="windsor-03.jpg"] { object-position: center 35%; }

/* the portrait on About keeps its own shape - a face is not a 4:3 crop */
.portrait img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 25%; }

/* The panorama. A fourth ratio, and the only one - it sits outside the gallery grid,
   full measure, because a 2.5:1 frame in a 4:3 slot is just a bad crop. */
.band { margin: var(--u8) 0; }
.band img { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; object-position: center; }
.band figcaption { font-size: var(--t-micro); letter-spacing: .06em;
                   color: var(--ink-faint); margin-top: var(--u2); }

/* ---------- FIELD NOTES, added 2026-09-15 ----------
   Dated entries, newest first. Generated by Scripts/build_field_notes.py from
   field-notes/posts/*.md - do not hand-edit writing.html or any n-*.html. */
.notes { max-width: var(--measure); margin-top: var(--u12); }
.note-item { padding-block: var(--u6); border-top: 1px solid var(--rule); }
.note-item:last-child { border-bottom: 1px solid var(--rule); }
.note-item .meta { margin: 0 0 var(--u2); }
.note-item .item { font-size: var(--t-lead); line-height: 1.25; margin: 0 0 var(--u2);
                   text-wrap: balance; }
.note-item .item a { color: var(--ink); text-decoration: none;
                     border-bottom: 1px solid var(--rule); }
.note-item .item a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.note-item p:last-child { color: var(--ink-soft); margin: 0; }