/* matthewphillips.ca — drawing sheet system.
   Every page is one sheet: ruled border, zone strip, banded sections, title block. */

:root {
  --paper:    #f7f6f2;
  --band:     #f2f0ea;
  --hover:    #f1eee7;
  --ink:      #1c1d1f;
  --body:     #4d4a44;
  --annot:    #6b665e;
  --hairline: #c9c6be;
  --night:    #141416;
  --desk:     #edebe6;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --gutter: clamp(28px, 2.4vw, 64px);
}

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

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-text-size-adjust: 100%;
}

img { display: block; width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; text-wrap: pretty; }

p { margin: 0; max-width: 62ch; color: var(--body); text-wrap: pretty; }

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


/* ---------------------------------------------------------------- the sheet */

.sheet {
  padding: 14px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(20, 18, 14, .12);
}

.frame { border: 1.5px solid var(--ink); }

/* Major sections are separated by a full-width ink rule. */
.frame > * { border-bottom: 1px solid var(--ink); }
.frame > :last-child { border-bottom: 0; }

.zones {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-bottom-color: var(--hairline);
}

.zones span {
  padding: 6px 0;
  border-right: 1px solid var(--hairline);
  text-align: center;
  font: 400 10px/1 var(--mono);
  letter-spacing: .16em;
  color: #9a958b;
}

.zones span:last-child { border-right: 0; }


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

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--gutter);
}

.wordmark {
  font: 500 13px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.wordmark .short { display: none; }

.masthead nav {
  display: flex;
  gap: 26px;
  font: 400 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body);
}

.masthead nav a { padding-bottom: 3px; }
.masthead nav a:hover { color: var(--ink); }

.masthead nav a[aria-current] {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

.menu-open {
  display: none;
  width: 26px;
  padding: 9px 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-open span { display: block; height: 1.5px; background: var(--ink); }
.menu-open span + span { margin-top: 5px; }

/* showModal() makes the page behind inert but still scrollable on touch. */
html:has(.menu[open]) { overflow: hidden; }

/* Full-screen mobile menu. Dialog gives us the modal behaviour for free. */
.menu[open] {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
}

.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px var(--gutter);
  border-bottom: 1px solid var(--ink);
}

.menu-foot { margin-top: auto; border-top: 1px solid var(--ink); }

.menu-close {
  padding: 0 2px;
  background: none;
  border: 0;
  font: 400 30px/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
}


/* --------------------------------------------------------------- band label */

.band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--gutter);
  background: var(--band);
  font: 500 12px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.band span, .band a {
  font: 400 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--annot);
}

.band a:hover { color: var(--ink); }


/* --------------------------------------------------------------------- grid
   1px gap over a hairline background draws every internal rule, at any column
   count, and survives the collapse to one column on mobile. */

.grid {
  display: grid;
  gap: 1px;
  background: var(--hairline);
}

.grid > * { background: var(--paper); }

.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }

.cell { padding: 26px var(--gutter) 30px; }


/* -------------------------------------------------------------------- intro */

.intro { padding: 56px var(--gutter) 44px; }

.sheet-no {
  font: 400 11px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--annot);
}

h1 {
  max-width: 16ch;
  margin-top: 22px;
  font: 600 clamp(34px, 3.4vw, 72px)/1.05 var(--sans);
  letter-spacing: -.025em;
}

.intro p { max-width: 52ch; margin-top: 22px; }

.lede { margin-top: 10px; font: 500 15px/1.4 var(--sans); color: var(--body); }


/* ------------------------------------------------------------------ buttons */

.actions { display: flex; gap: 12px; margin-top: 32px; }

.btn {
  padding: 14px 20px;
  font: 500 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #34363a; }

.btn-secondary { border: 1px solid var(--ink); }
.btn-secondary:hover { background: #eae7de; }


/* ----------------------------------------------------------------- spec cell
   The small labelled facts: DISCIPLINE, BASED IN, SCALE, and the title block. */

.spec { padding: 14px 24px; }

.spec dt, .label {
  font: 400 9px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--annot);
}

.spec dd {
  margin: 6px 0 0;
  font: 400 15px/1.4 var(--sans);
  overflow-wrap: anywhere;
}

.spec dd a { border-bottom: 1px solid var(--hairline); }
.spec dd a:hover { border-bottom-color: var(--ink); }

dl { margin: 0; }


/* ---------------------------------------------------------- detail callouts */

.detail {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 18px/1.3 var(--sans);
}

.detail::before {
  content: attr(data-mark);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font: 500 11px/1 var(--mono);
}

.detail + p { margin-top: 14px; font-size: 15px; }


/* ------------------------------------------------------------------ figures */

figure { margin: 0; }

figure img, .frame-box {
  border: 1px solid var(--hairline);
}

.grid figure.cell img { aspect-ratio: 1; object-fit: cover; }

figcaption b { color: var(--ink); font-weight: 500; }

figcaption {
  max-width: 62ch;
  margin-top: 10px;
  font: 400 14px/1.6 var(--sans);
  color: var(--annot);
}

/* A full-width "view" still centres its figure — a tall photo should not take
   over the whole sheet. */
.view { padding: 26px var(--gutter) 30px; }
.view figure, .view .scale-line { max-width: 620px; margin-inline: auto; }

.scale-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
}

.scale-line::before, .scale-line::after {
  content: "";
  width: 1px;
  height: 9px;
  background: #9a958b;
}

.scale-line span {
  font: 400 10px/1 var(--mono);
  letter-spacing: .12em;
  color: var(--annot);
}

.scale-line i {
  flex: 1;
  height: 1px;
  background: #9a958b;
  font-style: normal;
}


/* ---------------------------------------------------------------- list rows */

.row {
  display: grid;
  grid-template-columns: 250px 1fr 120px;
  gap: 24px;
  align-items: baseline;
  padding: 20px var(--gutter);
}

a.row:hover { background: var(--hover); }

.row h3 { font: 500 18px/1.3 var(--sans); }

.row p { max-width: 74ch; font-size: 15px; line-height: 1.55; }

.row .role  { font: 500 15px/1.45 var(--sans); color: var(--ink); }
.row .place { font: 400 13px/1.5 var(--sans); margin-top: 4px; }

.row ul {
  margin: 10px 0 0;
  padding-left: 18px;
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
}

.row li + li { margin-top: 7px; }

.row time {
  font: 400 11px/1.5 var(--mono);
  color: var(--annot);
  text-align: right;
}


/* ------------------------------------------------------------------- archive
   Older coursework: title, discipline, year. No images, no links. The wrapper
   div keeps the <dl> valid; display:contents lets its cells join the grid. */

.archive { grid-template-columns: 1fr 1fr 116px; }
.archive > div { display: contents; }

.archive dt, .archive dd {
  margin: 0;
  padding: 14px var(--gutter);
  background: var(--paper);
}

.archive dt { font: 500 15px/1.4 var(--sans); }
.archive dd { font: 400 14px/1.4 var(--sans); color: var(--body); }
.archive .year {
  font: 400 11px/1.6 var(--mono);
  color: var(--annot);
  text-align: right;
  white-space: nowrap;
}


/* ------------------------------------------------------------------- gallery
   The one place images dominate: frames touch, night ground behind them. */

.gallery {
  grid-template-columns: repeat(3, 1fr);
  background: var(--night);
  gap: 1px;
}

.gallery > figure { background: var(--night); }
.gallery img { border: 0; aspect-ratio: 1; object-fit: cover; }

.gallery figcaption b { color: var(--ink); font-weight: 500; }

figcaption {
  padding: 12px 14px 16px;
  margin: 0;
  color: #8b8881;
  font-size: 11px;
}

.night { background: var(--night); color: #8b8881; }

/* A tall frame can't run full bleed — it would be two screens high. Centre it
   on the night ground instead. */
.view-portrait { padding: clamp(16px, 3vw, 40px); }
.view-portrait img { max-width: 620px; margin-inline: auto; }


/* -------------------------------------------------------------- title block */

.titleblock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }

.titleblock .colophon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 22px var(--gutter);
}

.titleblock .block {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--ink);
}

.titleblock .block > * + * { border-top: 1px solid var(--hairline); }

/* The contact row is the last field, so it runs down to the sheet border. */
.titleblock .contact { flex: 1; }

.contact a {
  padding: 14px 16px;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact a:hover { background: var(--hover); }

/* In the title block these sit among label cells, so a bare mono caps word reads
   as another field label. Label over underlined handle makes them read as links. */
.titleblock .contact a {
  padding: 12px 16px;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.titleblock .contact .handle {
  display: block;
  margin-top: 6px;
  font: 500 15px/1.3 var(--sans);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
}

.titleblock .contact .handle::after { content: " \2197"; color: var(--annot); }

.titleblock .contact a:hover .handle { text-decoration-color: var(--ink); }

/* Everything in the open menu is a link, but the underline removes any doubt. */
.menu-foot a {
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
}

.titleblock .spec { padding: 12px 16px; }

.copyright {
  font: 400 11px/1.7 var(--mono);
  letter-spacing: .08em;
  color: var(--annot);
}


/* ------------------------------------------------- two-column block interior */

.build .prose dl { margin-top: 22px; }
.build .prose .btn { display: inline-block; margin-top: 24px; }

.outside .detail { margin-top: 20px; }

.outside > div:last-child { display: flex; flex-direction: column; }
.stack { flex: 1; }
.stack + .stack { border-top: 1px solid var(--hairline); }

.colophon .edu    { margin-top: 6px; font: 500 16px/1.35 var(--sans); color: var(--ink); }
.colophon .school { margin-top: 4px; font-size: 14px; }


/* ---------------------------------------------------------------------- misc */

.stack { padding: 24px var(--gutter); }
.stack h3 { font: 500 16px/1.3 var(--sans); }
.stack p { margin-top: 8px; font-size: 15px; line-height: 1.6; }

.prose h2 { font: 600 30px/1.15 var(--sans); letter-spacing: -.015em; }
.prose h2 + p, .prose p + p { margin-top: 16px; }
.prose { padding: 32px var(--gutter) 36px; }

.more {
  display: inline-block;
  margin-top: 12px;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--annot);
}

.more:hover { color: var(--ink); }


/* ------------------------------------------------------- two-column blocks
   Three sections pair a wide half with a narrow one. The gap colour is the
   rule between them: ink for the hero, hairline inside a section. */

.hero    { display: grid; grid-template-columns: 1fr 1.05fr;  gap: 1px; background: var(--ink); }
.build   { display: grid; grid-template-columns: 1.1fr 1fr;   gap: 1px; background: var(--hairline); }
.outside { display: grid; grid-template-columns: 1.35fr 1fr;  gap: 1px; background: var(--hairline); }

.hero > *, .build > *, .outside > * { background: var(--paper); }

.hero-side { display: flex; flex-direction: column; }
.hero-photo { flex: 1; padding: 24px var(--gutter) var(--gutter); }
.hero-photo img { height: 100%; object-fit: cover; }


/* ----------------------------------------------------------------- mobile */

@media (max-width: 767px) {
  :root { --gutter: 16px; }

  body { font-size: 15px; }

  .sheet { padding: 8px; }

  .zones { display: none; }

  .wordmark .full { display: none; }
  .wordmark .short { display: inline; }

  .masthead { padding: 13px var(--gutter); }

  .menu-open { display: block; }

  .menu nav {
    flex-direction: column;
    gap: 0;
    font-size: 15px;
    letter-spacing: .16em;
    color: var(--ink);
  }

  .menu nav a {
    padding: 22px var(--gutter);
    border-bottom: 1px solid var(--hairline);
  }

  .menu nav a[aria-current] { border-bottom-color: var(--hairline); background: var(--band); }

  .menu-foot a { padding: 18px var(--gutter); }

  .cols-2, .cols-3,
  .hero, .build, .outside { grid-template-columns: 1fr; }

  /* The gallery stays two-up — square crops read fine small, and one-up
     makes the page absurdly long. */
  .gallery { grid-template-columns: 1fr 1fr; }

  .band { padding: 12px var(--gutter); font-size: 11px; letter-spacing: .2em; }
  .band span, .band a { font-size: 10px; }

  .hero-photo { padding: var(--gutter); }
  .hero-photo img { height: auto; }

  .facts { grid-template-columns: 1fr 1fr; }

  .intro { padding: 32px var(--gutter) 26px; }

  h1 { margin-top: 16px; letter-spacing: -.02em; }

  .cell { padding: 20px var(--gutter) 22px; }

  .spec { padding: 12px var(--gutter); }

  .row { grid-template-columns: 1fr; gap: 5px; padding: 18px var(--gutter); }
  .row .role  { font: 500 15px/1.45 var(--sans); color: var(--ink); }
.row .place { font: 400 13px/1.5 var(--sans); margin-top: 4px; }

.row ul {
  margin: 10px 0 0;
  padding-left: 18px;
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
}

.row li + li { margin-top: 7px; }

.row time { text-align: left; }

  .archive { grid-template-columns: 1fr; }
  .archive > div { display: block; padding: 14px var(--gutter); background: var(--paper); }
  .archive dt, .archive dd { padding: 0; }
  .archive dd { margin-top: 4px; }
  .archive .year { text-align: left; }

  .titleblock { grid-template-columns: 1fr; }
  .titleblock .block { border-left: 0; border-top: 1px solid var(--ink); }

  /* The title block keeps its columns — it is the one place the grid reads
     as a drawing's own table rather than as page content. */
  .titleblock .cols-2 { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: repeat(2, 1fr); }

  .prose { padding: 24px var(--gutter) 28px; }
  .prose h2 { font-size: 24px; }
}

/* Above the breakpoint the dialog stops being a box: display:contents drops it
   from the layout so the nav inside becomes a flex item of the masthead. */
@media (min-width: 768px) {
  .menu, .menu[open] { display: contents; }
  .menu-head, .menu-foot { display: none; }
}


@media (min-width: 1500px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}


/* ------------------------------------------------------------------- print */

@media print {
  body { background: #fff; }
  .sheet { box-shadow: none; padding: 0; max-width: none; }
  .masthead nav, .zones, .actions { display: none; }
}