/* ------------------------------------------------------------------
   Three panes, divided by hairlines:
   works (left) | images and content (center) | words (right)

   Type: Schibsted Grotesk, free under the SIL Open Font License,
   bundled in content/fonts/ so nothing loads from outside.
   ------------------------------------------------------------------ */

/* Schibsted Grotesk — SIL Open Font License 1.1, see fonts/OFL.txt */
/* schibsted-grotesk-latin-ext-400-normal */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/schibsted-grotesk-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* schibsted-grotesk-latin-400-normal */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/schibsted-grotesk-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* schibsted-grotesk-latin-ext-400-italic */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/schibsted-grotesk-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* schibsted-grotesk-latin-400-italic */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/schibsted-grotesk-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* schibsted-grotesk-latin-ext-500-normal */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/schibsted-grotesk-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* schibsted-grotesk-latin-500-normal */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/schibsted-grotesk-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* schibsted-grotesk-latin-ext-500-italic */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/schibsted-grotesk-latin-ext-500-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* schibsted-grotesk-latin-500-italic */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/schibsted-grotesk-latin-500-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* schibsted-grotesk-latin-ext-600-normal */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/schibsted-grotesk-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* schibsted-grotesk-latin-600-normal */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/schibsted-grotesk-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* schibsted-grotesk-latin-ext-600-italic */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/schibsted-grotesk-latin-ext-600-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* schibsted-grotesk-latin-600-italic */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/schibsted-grotesk-latin-600-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


:root {
  --paper: #ffffff;
  --ink: #111111;
  --muted: #9a9a9a;
  --rule: #111111;                        /* the hairlines between panes and entries */
  --hair: #dddddd;                        /* lighter lines inside text */
  --select: #39ff14;                      /* neon green behind selected text */

  --text: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: var(--text);

  --xs: 11px;                             /* captions, meta lines  */
  --s: 13px;                              /* panes, labels         */
  --m: 15px;                              /* reading               */
  --desc: clamp(17px, 1.35vw, 21px);      /* descriptions          */
  --l: clamp(22px, 1.9vw, 30px);          /* titles                */

  --pad: 10px;                            /* inner padding of panes */
  --side: clamp(220px, 23vw, 340px);      /* width of works / words */
  --measure: 40em;
  --colgap: clamp(16px, 2.4vw, 36px);     /* gap between Details and Description */
}

/* "theme": "dark" in site.json */
.theme-dark {
  --paper: #0b0b0b;
  --ink: #ecebe6;
  --muted: #7c7b76;
  --rule: #ecebe6;
  --hair: #2a2a2a;
  color-scheme: dark;
}

/* base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--s)/1.35 var(--text);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.muted { color: var(--muted); }

/* selected text */
::selection { background: var(--select); color: #000; }
.label { font: 500 var(--s)/1.35 var(--text); }

/* the three panes ------------------------------------------------------ */
.panes { display: grid; grid-template-columns: var(--side) minmax(0, 1fr) var(--side); min-height: 100vh; }
.pane {
  position: sticky; top: 0; align-self: start;
  height: 100vh; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 0 var(--pad);
}
.pane-works { border-right: 1px solid var(--rule); }
.pane-words { border-left: 1px solid var(--rule); }
.center { padding: var(--pad) clamp(var(--pad), 3vw, 44px) 80px; min-width: 0; }

.pane-head { font: 400 var(--s)/1.35 var(--text); padding: 6px 0 5px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 2; }
.pane-head a[aria-current] { text-decoration: none; }

/* entries in the side panes */
.plist li { border-bottom: 1px solid var(--rule); }
.plist a { display: block; padding: 8px 0 7px; }
.plist a:hover { text-decoration: none; }
.pl-t { display: block; font-size: var(--m); font-weight: 500; line-height: 1.25; }
.pane-words .pl-t { font-weight: 400; }
.pl-m { display: block; font-size: var(--xs); color: var(--muted); margin-top: .2em; }
.pl-s { display: block; font-size: var(--xs); color: var(--muted); opacity: .6; margin-top: .1em; }
.plist a:hover .pl-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

/* identity, bottom of the works pane: words spread across the width */
.ident { margin-top: auto; padding: 40px 0 var(--pad); font: 400 var(--desc)/1.2 var(--display); position: sticky; bottom: 0; background: var(--paper); }
.ident a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

.contact { margin-top: auto; padding: 40px 0 var(--pad); }
.contact p + p { margin-top: .15em; }
.contact a { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: .15em; }

/* center: project covers stacked ------------------------------------- */
.plates { display: grid; gap: 64px; padding-top: 18px; }
.plate { display: block; text-align: center; }
.plate img { margin: 0 auto; max-height: 82vh; width: auto; }
.cap { display: block; font-size: var(--xs); color: var(--ink); margin-top: 8px; }
.plate:hover { text-decoration: none; }
.plate:hover .cap { text-decoration: underline; text-underline-offset: .15em; }

/* center: a project ---------------------------------------------------- */
.essay h1, .facet-head h1 { font: 500 var(--l)/1.1 var(--display); margin-bottom: 14px; }
.desc { font: 400 var(--desc)/1.3 var(--display); margin-top: 10px; text-wrap: pretty; }

.spec { border-top: 1px solid var(--rule); }
.spec > div { display: grid; grid-template-columns: 6.5em auto minmax(0, 1fr); gap: .45em; padding: 6px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.spec dt { color: var(--muted); }
.spec a { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: .15em; }

.foot { display: flex; justify-content: space-between; gap: 1em; margin-top: 80px; padding-top: 6px; border-top: 1px solid var(--rule); }

/* on a project, the words pane closes to give the work more room */
@media (min-width: 721px) {
  .project-page .panes { grid-template-columns: var(--side) minmax(0, 1fr); }
  .project-page .pane-words { display: none; }
}

/* a project: info on the left (stays put), work on the right ---------- */
.proj { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--colgap); padding-top: 8px; align-items: start; }
.proj-info { position: sticky; top: 8px; min-height: calc(100vh - 16px); display: flex; flex-direction: column; }  /* no inner scrolling: it simply stays put */
@media (max-height: 640px) { .proj-info { position: static; min-height: 0; } }  /* very short windows: scroll with the page */
.proj-info h1 { font: 500 var(--l)/1.1 var(--display); padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.proj-info .spec { border-top: 0; }
.proj-label { margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.proj-nav { display: flex; justify-content: space-between; gap: 1em; margin-top: auto; padding-bottom: 2px; padding-top: 6px; border-top: 1px solid var(--rule); }
.proj-body > .fig:first-child { margin-top: 0; }
.project-page .center { padding-bottom: 0; }
.proj-body { padding-bottom: 80px; }  /* bottom space inside the project, so the info column never jumps */
.proj-body.prose > :not(.fig, .cluster, .row, div, iframe, figure) { margin-left: 0; margin-right: 0; }  /* text starts flush with the images */

/* center: an essay / page --------------------------------------------- */
.essay { max-width: var(--measure); margin: 0 auto; padding-top: 18px; }
.essay header { margin-bottom: 48px; }
.essay .spec { margin-top: 4px; }
.facet-head { padding-top: 18px; margin-bottom: 32px; text-align: center; }
.facet-head .label { color: var(--muted); font-weight: 400; }

.entries li { border-bottom: 1px solid var(--rule); }
.entries li:first-child { border-top: 1px solid var(--rule); }
.entries a { display: grid; gap: .25em; padding: 12px 0; }
.entries a:hover { text-decoration: none; }
.e-t { font-size: var(--desc); font-family: var(--display); }
.entries a:hover .e-t { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.e-m { font-size: var(--xs); color: var(--muted); }
.e-x { color: var(--muted); max-width: 36em; }

/* text + images -------------------------------------------------------- */
.prose { font: 400 var(--m)/1.5 var(--text); }
.prose > * + * { margin-top: 1em; }
.prose > :not(.fig, .cluster, .row, div, iframe, figure) { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.prose h1 { font: 500 var(--l)/1.1 var(--display); margin-top: 2em; }
.prose h2 { font: 500 var(--desc)/1.25 var(--display); margin-top: 2.2em; }
.prose h3 { font: 600 var(--m)/1.4 var(--text); margin-top: 2em; }
.prose h4, .prose h5, .prose h6 { font: 500 var(--xs)/1.4 var(--text); text-transform: uppercase; letter-spacing: .06em; margin-top: 2em; }
.prose :is(h1, h2, h3, h4, h5, h6) + * { margin-top: .6em; }
.prose strong, .prose b { font-weight: 600; }
.prose em, .prose i { font-style: italic; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li + li { margin-top: .3em; }
.prose blockquote { padding-left: 1em; border-left: 1px solid var(--rule); }
.prose table { border-collapse: collapse; font-size: var(--s); width: 100%; }
.prose th, .prose td { text-align: left; padding: .4em .8em .4em 0; border-top: 1px solid var(--hair); }
.prose sup { line-height: 0; }
.prose code { font: .85em ui-monospace, Menlo, Consolas, monospace; }
.prose pre { font: var(--s)/1.5 ui-monospace, Menlo, Consolas, monospace; overflow-x: auto; border: 1px solid var(--hair); padding: 1em; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 3em 0; }
.prose iframe { max-width: 100%; }

.fig img, .fig video { width: 100%; }
.prose > .fig, .prose > .cluster, .prose > .row { margin-top: 2em; margin-bottom: 2em; }
.fig figcaption { font-size: var(--xs); text-align: center; padding-top: 8px; }
.fig.half { display: inline-block; width: calc(50% - var(--colgap) / 2); vertical-align: top; }
.prose > .fig.half + .fig.half { margin-left: var(--colgap); }
.cluster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--colgap); }  /* same grid as the columns above */
.cluster figcaption { display: none; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--colgap); align-items: start; }

.note { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 1em; font-size: var(--s); padding: 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.note-date { color: var(--muted); }
.note-who { font-weight: 500; }

/* enlarged image ------------------------------------------------------ */
.zoomable { cursor: zoom-in; }
.lb-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: var(--paper); display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lightbox[hidden] { display: none; }
.lb-img { grid-row: 1; width: 100%; height: 100%; object-fit: contain; padding: var(--pad); }
.lb-prev, .lb-next { position: absolute; top: 0; bottom: 40px; width: 50%; background: none; border: 0; padding: 0; }
.lb-prev { left: 0; cursor: w-resize; }
.lb-next { right: 0; cursor: e-resize; }
.lb-bar { grid-row: 2; display: grid; grid-template-columns: 1fr auto auto; gap: 2em; align-items: baseline; padding: 6px var(--pad) 8px; border-top: 1px solid var(--rule); position: relative; z-index: 1; background: var(--paper); }
.lb-count { color: var(--muted); }
.lb-close { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.lb-close:hover { text-decoration: underline; text-underline-offset: .15em; }

/* kind: collection — lists become ruled entries, like the side panes */
.kind-collection .prose ul { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.kind-collection .prose li { margin: 0; padding: 8px 0 7px; border-bottom: 1px solid var(--rule); }
.kind-collection .prose li p { margin: 0; }
.kind-collection .prose li em:first-of-type { font-style: italic; }
.kind-collection .prose li .note, .kind-collection .prose li small { display: block; font-size: var(--s); color: var(--muted); margin-top: .15em; }
.kind-collection .prose h2 + ul { margin-top: .8em; }

/* highlight: hovered links and the current page get the neon green ----- */
a:hover, a[aria-current],
.lb-close:hover { background: var(--select); color: #000; text-decoration: none; }
/* block links: only their title lights up, not the whole row */
.plist a:hover, .plist a[aria-current], .plate:hover, .entries a:hover { background: none; }
.plist a:hover .pl-t, .plist a[aria-current] .pl-t,
.plate:hover .cap, .entries a:hover .e-t { background: var(--select); color: #000; text-decoration: none; display: inline; }
.pl-t { display: inline; }
.pl-m, .pl-s { display: block; }

/* phones-only header */
.mhead { display: none; }

/* medium screens: drop the words pane under the content --------------- */
@media (max-width: 1100px) {
  .panes { grid-template-columns: var(--side) minmax(0, 1fr); }
  .pane-words { grid-column: 2; position: static; height: auto; border-left: 0; border-top: 1px solid var(--rule); margin: 0 clamp(var(--pad), 3vw, 44px); padding: 0; }
  .pane-words .pane-head { position: static; }
}

/* phones: one column — content first, then works, then words ----------- */
@media (max-width: 720px) {
  :root { --side: auto; }
  .mhead { display: flex; justify-content: space-between; padding: 8px var(--pad); border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 5; font-weight: 500; }
  .panes { display: flex; flex-direction: column; }
  .center { order: 1; padding: var(--pad) var(--pad) 48px; }
  .pane { align-self: stretch; width: 100%; }
  .pane-works { order: 2; position: static; height: auto; border-right: 0; border-top: 1px solid var(--rule); }
  .pane-words { order: 3; margin: 0; padding: 0 var(--pad); }
  .pane-head { position: static; }
  .ident { position: static; }
      .plates { gap: 40px; }
  .proj { grid-template-columns: 1fr; row-gap: 32px; }
  .proj-info { position: static; height: auto; }
  .proj-nav { margin-top: 32px; }
  .note { grid-template-columns: 5em minmax(0, 1fr); }
}