/* ————————————————————————————————————————————————
   madebyniki · assets/site.css
   tokens · paper & ink, one corrector's pencil
   ———————————————————————————————————————————————— */
:root{
  --paper:      #F8F6F1;
  /* the card is a shade cooler than the sheet, and only just darker:
     a difference of temperature, not of volume. the eye settles on it
     because it rests there, not because it is being called */
  --placard:    #ECEEE4;
  --ink:        #191712;
  --graphite:   #6E6A60;
  --rule:       #D9D4C7;
  --cinnabar:   #C0331B;

  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --serif:   "Libre Caslon Text", Georgia, serif;
  --body:    "Source Serif 4", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --measure: 66ch;
  --datecol: 6.2rem;   /* the date column in a journal listing, gutter included */
}

*{ box-sizing:border-box; margin:0; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.03rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--cinnabar); color:var(--paper); }
a{ color:inherit; }

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

.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* pages cross-fade on navigation in browsers that can;
   the rest simply turn the page, as books have always done */
@view-transition{ navigation:auto; }

/* ————————————————————————————————————————————————
   page frame · one column of content, one of margins
   ———————————————————————————————————————————————— */
.page{
  max-width:1120px;
  margin:0 auto;
  padding:0 44px;
}

.row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  column-gap:64px;
  padding:56px 0;
}

.content{ max-width:var(--measure); }

/* the philosopher lives in the margins */
.margin-note{
  font-family:var(--mono);
  font-size:0.74rem;
  line-height:1.7;
  color:var(--graphite);
  padding-top:0.5rem;
}
.margin-note::before{
  content:"—";
  display:block;
  color:var(--cinnabar);
}

/* ————————————————————————————————————————————————
   header · the menu doesn't navigate; it loads
   ———————————————————————————————————————————————— */
header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:2rem;
  flex-wrap:wrap;
  padding:28px 0 26px;
}

.wordmark{ text-decoration:none; white-space:nowrap; }
.wordmark .made{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  color:var(--graphite);
}
.wordmark .niki{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.35rem;
  margin-left:0.3rem;
}

nav{ display:flex; flex-wrap:wrap; gap:0.6rem 1.8rem; }
nav a{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-decoration:none;
  position:relative;
  padding-bottom:3px;
}
nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:var(--cinnabar);
  transition:width .25s ease;
}
nav a:hover::after,
nav a:focus-visible::after,
nav a[aria-current="page"]::after{ width:100%; }

/* ————————————————————————————————————————————————
   hero · the cover of the catalogue (index page only)
   ———————————————————————————————————————————————— */
.hero{ padding-top:64px; padding-bottom:64px; }

.kicker{
  font-family:var(--mono);
  font-size:0.76rem;
  letter-spacing:0.1em;
  color:var(--graphite);
  margin-bottom:2.2rem;
}
.kicker b{ color:var(--cinnabar); font-weight:500; }

h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem, 4.6vw, 3.6rem);
  line-height:1.16;
  letter-spacing:-0.01em;
  max-width:22ch;
}
h1 .line{ display:block; }
h1 em{
  font-family:var(--serif);
  font-style:italic;
  color:var(--cinnabar);
}

.hero-sub{
  font-family:var(--mono);
  font-size:0.82rem;
  color:var(--graphite);
  margin-top:2.4rem;
}

.settle{ opacity:0; transform:translateY(10px); animation:settle .7s ease forwards; }
.d1{ animation-delay:.05s } .d2{ animation-delay:.2s } .d3{ animation-delay:.35s } .d4{ animation-delay:.6s }
@keyframes settle{ to{ opacity:1; transform:none; } }

/* ————————————————————————————————————————————————
   the command line · `ls` on the cover, the heading elsewhere
   ———————————————————————————————————————————————— */
.cmd{
  border-top:1px solid var(--ink);
  padding:1.1rem 0;
  font-family:var(--mono);
  font-size:0.85rem;
  display:flex;
  align-items:center;
  gap:0.7rem;
}
.cmd .prompt{ color:var(--cinnabar); font-weight:500; }
.cmd .cursor{
  display:inline-block;
  width:0.55ch; height:1.05em;
  background:var(--cinnabar);
  animation:blink 1.1s steps(2, start) infinite;
}
@keyframes blink{ to{ visibility:hidden; } }

/* frontmatter — the placard of a text file, shown verbatim */
.frontmatter{
  font-family:var(--mono);
  font-size:0.72rem;
  line-height:1.7;
  color:var(--graphite);
  margin-bottom:2.4rem;
}
.frontmatter i{ font-style:normal; color:var(--cinnabar); }

/* ————————————————————————————————————————————————
   the index · a table of contents in its native dress
   ———————————————————————————————————————————————— */
.listing{
  font-family:var(--mono);
  font-size:0.84rem;
  border-bottom:1px solid var(--rule);
}
.listing a{
  display:grid;
  grid-template-columns:1fr max-content max-content;
  column-gap:2.4rem;
  align-items:baseline;
  padding:0.7rem 0.2rem;
  border-top:1px solid var(--rule);
  text-decoration:none;
}
.listing .fname{ color:var(--ink); }
.listing .meta{ color:var(--graphite); font-size:0.76rem; }
.listing a:hover .fname,
.listing a:focus-visible .fname{ color:var(--cinnabar); }
/* a shelf of articles carries a name and a date, no size */
.listing.two a{ grid-template-columns:1fr max-content; }

/* ————————————————————————————————————————————————
   markdown, worn openly · construction lines left visible
   ———————————————————————————————————————————————— */
.md h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.5rem;
  margin:2.2rem 0 0.9rem;
}
.md h2:first-of-type{ margin-top:0; }
.md h2::before{
  content:"## ";
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--graphite);
  vertical-align:0.4em;
  margin-right:0.3rem;
}
.md h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.25rem;
  margin:1.8rem 0 0.7rem;
}
.md p{ margin-bottom:1.05rem; }
.md strong{ font-weight:600; }
.md a{
  text-decoration:none;
  border-bottom:1px solid var(--cinnabar);
  padding-bottom:1px;
}
.md a:hover{ color:var(--cinnabar); }
.md ul{ list-style:none; padding:0; margin-bottom:1.05rem; }
.md li{
  padding-left:1.6rem;
  text-indent:-1.6rem;
  margin-bottom:0.55rem;
}
.md li::before{ content:"— "; color:var(--cinnabar); }
.md blockquote{
  border-left:2px solid var(--cinnabar);
  padding-left:1.2rem;
  margin:1.5rem 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
}
.md code{
  font-family:var(--mono);
  font-size:0.82em;
  background:var(--placard);
  border:1px solid var(--rule);
  padding:0.06em 0.35em;
}
.md pre{
  background:var(--placard);
  border:1px solid var(--rule);
  padding:1rem 1.2rem;
  overflow:auto;
  font-size:0.8rem;
  line-height:1.6;
  margin:1.5rem 0;
}
.md pre code{ background:none; border:0; padding:0; }

/* a code block that knows what language it is · the label is set
   in the corner the way a plate is labelled, not inside the frame */
.codeblock{ position:relative; margin:1.5rem 0; }
.codeblock pre{ margin:0; padding-top:1.9rem; }
.codeblock::after{
  content:attr(data-lang);
  position:absolute; top:0; right:0;
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--graphite);
  background:var(--paper);
  border-left:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:0.3rem 0.7rem;
}

/* highlighting, in the pencils already on the desk:
   a comment is graphite italic, a keyword has weight, a literal is red */
.md pre .c{ color:var(--graphite); font-style:italic; }
.md pre .k{ font-weight:600; }
.md pre .s{ color:var(--cinnabar); }

/* the contact page opens in the serif voice */
.page-contact .md > p:first-of-type{
  font-family:var(--serif);
  font-size:1.45rem;
  line-height:1.4;
  max-width:34ch;
}

/* ————————————————————————————————————————————————
   the catalogue · objects keep their placards
   ———————————————————————————————————————————————— */
/* a category band · a ## with exhibits under it earns a heavier rule */
.category{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  margin:3.6rem 0 0;
  padding-bottom:0.7rem;
  border-bottom:1px solid var(--ink);
}
.category:first-child{ margin-top:0; }
.md .category h2{ margin:0; }

.exhibit{ padding:2.2rem 0 2.6rem; border-top:1px solid var(--ink); }
/* the band already drew the rule */
.category + .exhibit{ border-top:0; padding-top:1.6rem; }

.exhibit-head{
  display:flex;
  align-items:baseline;
  gap:1.2rem;
  flex-wrap:wrap;
}
.obj-no{
  font-family:var(--mono);
  font-size:0.8rem;
  font-weight:500;
  color:var(--cinnabar);
  letter-spacing:0.05em;
}
.exhibit h3,
.md .exhibit h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.55rem;
  margin:0;
}

.plate{
  margin:1.6rem 0 1.4rem;
  aspect-ratio:16/9;
  border:1px solid var(--rule);
  background:
    repeating-linear-gradient(45deg,
      transparent 0 12px,
      rgba(25,23,18,0.028) 12px 13px);
  display:grid;
  place-items:center;
}
.plate span{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  color:var(--graphite);
}
.plate-img{
  aspect-ratio:auto;
  background:none;
  padding:0;
  display:block;
}
.plate-img a{ display:block; }
.plate-img img{ display:block; width:100%; height:auto; }

/* several plates of one object, hung together.
   the first is the establishing view; the rest are details. */
.plates{
  display:grid;
  gap:1rem;
  margin:1.6rem 0 1.4rem;
}
.plates .plate{ margin:0; }
/* alone, a plate keeps its own proportions. hung in a group it becomes
   a tile, so the row lines up. And since every plate links to its own
   file, the crop is a thumbnail rather than a claim about the image. */
.plates .plate-img img{
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:top center;
}
.plates-2{ grid-template-columns:1fr 1fr; }
.plates-3{ grid-template-columns:1fr 1fr; }
.plates-4{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.plates-3 > :first-child,
.plates-4 > :first-child{ grid-column:1 / -1; }
.plates figcaption{
  font-family:var(--mono);
  font-size:0.7rem;
  line-height:1.5;
  color:var(--graphite);
  padding-top:0.45rem;
}

.placard{
  background:var(--placard);
  border:1px solid var(--rule);
  padding:1.1rem 1.3rem;
  display:grid;
  grid-template-columns:max-content 1fr;
  column-gap:1.6rem;
  row-gap:0.35rem;
  font-family:var(--mono);
  font-size:0.78rem;
  line-height:1.6;
}
.placard dt{ color:var(--graphite); letter-spacing:0.06em; }
.placard dd{ color:var(--ink); }

.case{
  margin-top:1.5rem;
  display:grid;
  grid-template-columns:max-content 1fr;
  column-gap:1.6rem;
  row-gap:0.5rem;
}
.case dt{
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--cinnabar);
  padding-top:0.25rem;
}
.case dd{ font-size:0.98rem; }

.result-line{ margin-top:1.4rem; }
.result-line b{
  font-family:var(--mono);
  font-size:0.74rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--cinnabar);
  margin-right:0.8rem;
}

/* ————————————————————————————————————————————————
   the journal · a shelf, then one thing taken off it
   ———————————————————————————————————————————————— */
.articles{
  list-style:none;
  padding:0;
  margin:0;
  border-bottom:1px solid var(--rule);
}
.articles li{
  border-top:1px solid var(--rule);
  padding:1.1rem 0.2rem 1.3rem;
}
.articles a{
  display:grid;
  grid-template-columns:var(--datecol) 1fr max-content;
  align-items:baseline;
  column-gap:0;
  text-decoration:none;
}
.articles time{
  font-family:var(--mono);
  font-size:0.76rem;
  color:var(--graphite);
}
.articles .atitle{
  font-family:var(--serif);
  font-size:1.2rem;
  padding-right:1.4rem;
}
.articles .ameta{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--graphite);
}
.articles a:hover .atitle,
.articles a:focus-visible .atitle{ color:var(--cinnabar); }
.ablurb{
  margin:0.45rem 0 0 var(--datecol);
  max-width:56ch;
  font-size:0.96rem;
  color:var(--graphite);
}

/* one article */
.md h2.article-title{
  font-family:var(--display);
  font-size:clamp(1.7rem, 3.6vw, 2.5rem);
  line-height:1.18;
  letter-spacing:-0.01em;
  max-width:20ch;
  margin:0 0 0.7rem;
}
.md h2.article-title::before{ content:none; }
.md .byline{
  font-family:var(--mono);
  font-size:0.74rem;
  color:var(--graphite);
  margin-bottom:2.6rem;
}
/* the opening paragraph is read standing up */
.md .byline + p{
  font-size:1.13rem;
  line-height:1.6;
}

/* what stands beside it on the shelf */
.beside{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  border-top:1px solid var(--ink);
  padding:1.5rem 0 0.4rem;
}
.beside a{
  font-family:var(--serif);
  font-size:1.05rem;
  text-decoration:none;
}
.beside a span{
  display:block;
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--cinnabar);
  margin-bottom:0.35rem;
}
.beside .older{ grid-column:2; text-align:right; }
.beside a:hover{ color:var(--cinnabar); }

/* ————————————————————————————————————————————————
   colophon
   ———————————————————————————————————————————————— */
footer{
  border-top:1px solid var(--ink);
  padding:1.6rem 0 3.4rem;
  display:flex;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--graphite);
  line-height:1.8;
}
footer .ps{ width:100%; }
footer .ps i{ font-style:normal; color:var(--cinnabar); }

/* ————————————————————————————————————————————————
   smaller pages · the margin folds into the text
   ———————————————————————————————————————————————— */
@media (max-width:900px){
  .page{ padding:0 22px; }
  .row{ grid-template-columns:1fr; row-gap:2rem; padding:44px 0; }
  .margin-note{
    border-left:1px solid var(--rule);
    padding:0.2rem 0 0.2rem 1rem;
  }
  .margin-note::before{ display:inline; margin-right:0.5rem; }
  .hero{ padding-top:32px; }
}

/* a phone hangs its plates one above the other, and gives an
   article's date its own line rather than a sixth of the width */
@media (max-width:700px){
  nav{ gap:0.5rem 1.1rem; }
  .plates-2, .plates-3, .plates-4,
  .plates-3 > :first-child, .plates-4 > :first-child{ grid-template-columns:1fr; grid-column:auto; }
  .articles a{ grid-template-columns:1fr; }
  .articles .atitle{ padding:0.25rem 0 0.15rem; }
  .ablurb{ margin-left:0; }
  .beside{ grid-template-columns:1fr; gap:1.2rem; }
  .beside .older{ grid-column:1; text-align:left; }
}

/* ————————————————————————————————————————————————
   the plate page · one image, one way back
   the room goes dark so the screenshot is the only lit thing in it.
   the picture is still unframed: no border, no shadow, no overlay.
   the only furniture is a button in a corner the image rarely reaches.
   ———————————————————————————————————————————————— */
.plate-page{
  /* not from the paper palette, and deliberately so. a screen is not
     a page, and a screenshot is read better off a dark ground. */
  background:#333;
  color-scheme:dark;   /* the scrollbar comes with the room */
}
/* one material for all three controls: grey and thin, so the picture
   goes on showing through them. at rest each is a presence rather than
   an object; under the hand it thickens into one, which is the only
   moment it needs to be solid.

   the shadow is not decoration. it says the control is above the
   picture rather than in it, which matters when the picture is a
   screenshot of another interface and could otherwise claim it. */
.plate-close,
.plate-step{
  position:fixed;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:1.15rem;
  line-height:1;
  text-decoration:none;
  color:var(--paper);
  background:rgba(64,64,64,0.55);
  border:1px solid rgba(248,246,241,0.22);
  box-shadow:0 1px 2px rgba(0,0,0,0.45), 0 5px 16px rgba(0,0,0,0.5);
  transition:background-color 140ms ease, border-color 140ms ease;
}
.plate-close:hover, .plate-close:focus-visible,
.plate-step:hover,  .plate-step:focus-visible{
  background:rgba(64,64,64,0.97);
  border-color:rgba(248,246,241,0.42);
}

/* the way out: a cross in a square, in the corner. a corner is where
   one leaves a room, and a square is not going anywhere. */
.plate-close{
  top:1.1rem;
  left:1.1rem;
  /* the same ink on the page as a step, not the same measurement.
     a disc covers π/4 of the square it sits in, so to match a 46px
     disc this square wants a 41px side. matched by width instead,
     it would read as the heavier of the two. */
  width:41px;
  height:41px;
}

/* the ways across: arrows in discs, against the edges and halfway
   down. round, because they carry you along a series, and placed
   where the eye looks when it wants the next thing rather than out. */
.plate-step{
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
}
.plate-step.prev{ left:1.1rem; }
.plate-step.next{ right:1.1rem; }

/* the zoom is a checkbox, so it survives with scripting off */
.plate-zoom{ position:absolute; opacity:0; pointer-events:none; }

/* closed: fitted to the window, as the browser shows a file */
.plate-page label{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  cursor:zoom-in;
}
.plate-page label img{
  display:block;
  width:auto;
  height:auto;
  max-width:100vw;
  max-height:100vh;
}

/* open: the full width of the window, and the page scrolls.
   a screenshot is read, not glanced at, so width beats fitting. */
.plate-zoom:checked + label{
  display:block;
  min-height:0;
  cursor:zoom-out;
}
.plate-zoom:checked + label img{
  width:100%;
  max-width:none;
  max-height:none;
}

/* on a touch screen the browser already zooms better than we can.
   the image is simply as wide as the glass, and pinch does the rest. */
@media (pointer:coarse){
  .plate-page label,
  .plate-zoom:checked + label{
    display:block;
    min-height:0;
    cursor:default;
  }
  .plate-page label img,
  .plate-zoom:checked + label img{
    width:100%;
    max-width:100%;
    max-height:none;
  }
}

/* printed, the catalogue becomes a catalogue */
@media print{
  nav, .cmd, .plate, .plates, .beside{ display:none; }
  footer .ps{ display:none; }
  body{ background:#fff; }
  .row{ break-inside:avoid; }
  .exhibit, .articles li{ break-inside:avoid; }
  .codeblock::after{ display:none; }
  .codeblock pre{ padding-top:1rem; }
}

@media (prefers-reduced-motion:reduce){
  .settle{ animation:none; opacity:1; transform:none; }
  .cmd .cursor{ animation:none; }
}