/* FACETS — shared styles */

:root{
  /* One generous size, no control, but it has to bend: at 300px a 768pt tablet
     fits two thumbnails to a row and they come out 354px each, which is bigger
     than a desktop's. This gives three there, four at 1024, five from 1400 up,
     and one on a phone, all without a breakpoint. */
  --col: clamp(200px, 22vw, 300px);
  --ctl: 30px;                            /* every navbar control is exactly this tall */
  --gap-x: 12px;
  --gap-y: 34px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1720px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

[data-theme="dark"]{
  --bg:#0b0b0c; --bg-2:#141416; --line:#25252a; --line-2:#1a1a1e;
  --ink:#f2f1ef; --ink-2:#8d8d96; --ink-3:#5a5a63;
  --logo:#f2f1ef;
  --bar-bg:color-mix(in srgb, #0b0b0c 70%, transparent);
  --tint-l:68%; --tint-mul:.7; --tint-bg:.14;
  --acc:#E6FF6D;
  --title-weight:500; --title-ls:0;
  --frame:0;
  --shadow:0 8px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f4f2ee; --bg-2:#fffefc; --line:#ddd9d1; --line-2:#e8e4dc;
  --ink:#242424; --ink-2:#7a736a; --ink-3:#a9a196;
  --logo:#242424;
  --bar-bg:color-mix(in srgb, #f4f2ee 70%, transparent);
  --tint-l:38%; --tint-mul:.85; --tint-bg:.13;
  --acc:#FF7686;      /* the acid dies on a light ground; the coral is the brand's other half */
  --title-weight:400; --title-ls:.01em;
  --frame:1;
  --shadow:0 8px 40px rgba(60,50,35,.12);
  color-scheme:light;
}

*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* A classic scrollbar takes its width off the right only, so a centred
     column ends up sitting left of the window centre — which reads as a
     balance problem rather than as a scrollbar. Reserving the same gutter on
     both edges keeps the work centred in the window, scrolling or not. */
  scrollbar-gutter:stable both-edges;
}
/* one frame with no transitions, for restoring a state rather than animating to it */
html.no-anim *{ transition:none !important; animation:none !important }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  transition:background .35s var(--ease), color .35s var(--ease);
}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--ink-2);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}

/* ===================== sticky header ===================== */
.bar{
  position:sticky;top:0;z-index:40;
  /* Same glass as the dock, denser ground. The dock can sit at 46% because its
     text is full ink; the nav's inactive items are --ink-3 by design and go
     invisible over bright work below about 70%. */
  background:var(--bar-bg);
  backdrop-filter:blur(30px) saturate(2);
  -webkit-backdrop-filter:blur(30px) saturate(2);
  border-bottom:1px solid transparent;
  padding-top:36px;
  transition:border-color .25s var(--ease), padding-top .3s var(--ease),
             box-shadow .25s var(--ease);
}
.bar.stuck{
  padding-top:16px;
  /* the same three parts the dock's edge is made of — hairline, inner line,
     drop — at about half the contrast, so it stays soft against the glass */
  border-bottom-color:color-mix(in srgb, var(--ink) 11%, transparent);
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--bg) 30%, transparent),
    0 8px 22px color-mix(in srgb, #000 11%, transparent);
}

.barin{position:relative}
/* the brand is placed out of flow so it can move between the two states
   instead of being swapped out for a second copy */
.barin > .brand{
  position:absolute;left:0;top:0;z-index:2;
  transform-origin:0 50%;
  transition:transform .42s var(--ease);
  will-change:transform;
}
.topspace{height:52px;transition:height .42s var(--ease)}
.bar.stuck .topspace{height:0}
.bar.stuck .barin > .brand{transform:scale(.78)}

.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand svg path{fill:var(--logo)}
.sym{height:30px;width:32px;display:block}
.wordmark{height:21px;width:auto;display:block}
.tools{display:flex;align-items:center;gap:26px;flex:none}

.navline{
  display:flex;align-items:center;gap:32px;
  padding-bottom:16px;padding-left:0;
  transition:padding-left .42s var(--ease);
}
.bar.stuck .navline{padding-left:var(--nav-pad,180px)}
/* one height for every control in the bar, so the underlines share a baseline */
.modes button,
.ddbtn,
.finder input,
.themebtn{
  height:var(--ctl);
  padding-top:0;padding-bottom:0;
  box-sizing:border-box;
}
/* Uppercase carries no descender, so a vertically centred line box leaves the
   caps sitting high against the wordmark. This drops them onto its optical
   centre; the underline stays where it is, the text just moves toward it. */
:root{ --capfix:3.5px }
.modes button,
.ddbtn{ padding-top:var(--capfix) }
.navline .gap{flex:1 1 auto}
/* nav + chrome share the interface face */
.modes{display:flex;align-items:center;flex:none}
.modes button{
  font:inherit;cursor:pointer;border:0;background:transparent;
  color:var(--ink-3);margin-right:28px;
  display:inline-flex;align-items:center;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.modes button:last-child{margin-right:0}
.modes button:hover{color:var(--ink-2)}
.modes button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}

/* series pulldown */
.dd{position:relative;flex:none}
.ddbtn{
  font:inherit;cursor:pointer;border:0;background:transparent;outline:none;
  display:inline-flex;align-items:center;gap:9px;
  /* browse spells this control as a button and the piece page as a link, and a
     button carries 6px of the browser's own side padding that a link does not.
     Stated here so the two render at the same width and the accent underline
     under it is the same length on both. */
  padding-left:6px;padding-right:6px;
  color:var(--ink-3);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.ddbtn:hover{color:var(--ink-2)}
.ddbtn.on{color:var(--ink);border-bottom-color:var(--acc);
  box-shadow:0 1px 0 var(--acc)}   /* reads as 2px without shifting layout */
.ddbtn.on svg{color:var(--acc)}
.ddbtn svg{width:9px;height:6px;stroke:currentColor;fill:none;stroke-width:1.7;
  transition:transform .2s var(--ease)}
.ddbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ddmenu{
  position:absolute;top:calc(100% + 12px);left:0;z-index:60;
  min-width:250px;max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg-2);border:1px solid var(--line);
  box-shadow:var(--shadow);padding:6px 0;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.ddmenu::-webkit-scrollbar{width:8px}
.ddmenu::-webkit-scrollbar-track{background:transparent}
.ddmenu::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;
  border:2px solid var(--bg-2)}
.ddmenu::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
.ddmenu button{
  font:inherit;cursor:pointer;border:0;background:transparent;width:100%;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 18px;text-align:left;color:var(--ink-2);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:color .15s var(--ease),background-color .15s var(--ease);
}
.ddmenu button:hover{color:var(--ink);background:color-mix(in srgb, var(--ink) 5%, transparent)}
.ddmenu button[aria-selected="true"]{color:var(--ink)}
.ddmenu button[aria-selected="true"] .ct{color:var(--acc)}
.ddmenu button .ct{font-family:var(--mono);color:var(--ink-3);font-size:9.5px;letter-spacing:.06em}
.ddmenu .sep{height:1px;background:var(--line);margin:6px 0}

/* only present when a link has filtered the view, so it can be seen and cleared */
.chip{
  font:inherit;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;gap:9px;
  height:22px;padding:0 11px;border-radius:0;
  border:1px solid color-mix(in srgb, var(--acc) 55%, transparent);
  background:color-mix(in srgb, var(--acc) 10%, transparent);
  color:var(--ink);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.chip:hover{background:color-mix(in srgb, var(--acc) 18%, transparent);
  border-color:var(--acc)}
.chip svg{width:8px;height:8px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;opacity:.55}
.chip:hover svg{opacity:1}
.chip[hidden]{display:none}   /* the flex display would otherwise beat [hidden] */

.finder{position:relative;display:flex;align-items:center}
.finder input{
  font:inherit;font-size:10.5px;letter-spacing:.13em;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:2.5px 0 0 22px;   /* an input shifts its line box differently to a flex box */
  width:130px;
  transition:border-color .2s var(--ease),width .25s var(--ease);
}
.finder input::placeholder{color:var(--ink-3);text-transform:uppercase;letter-spacing:.14em}
.finder input:focus{outline:0;border-bottom-color:var(--ink-2);width:200px}
.finder > svg{position:absolute;left:0;top:50%;transform:translateY(-50%);width:13px;height:13px;stroke:var(--ink-3);fill:none;stroke-width:1.6;pointer-events:none}

.themebtn{
  cursor:pointer;border:0;background:transparent;padding:0;width:var(--ctl);
  display:grid;place-items:center;
  color:var(--ink-2);transition:color .2s var(--ease);
}
.themebtn:hover{color:var(--ink)}
.aboutlink{
  height:var(--ctl);display:inline-flex;align-items:center;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
  transition:color .2s var(--ease);
}
.aboutlink:hover{color:var(--ink)}
@media (max-width:900px){
  .navline{gap:20px}
  .modes button{margin-right:20px}
  .tools{gap:14px}
}
.themebtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .themebtn .sunset{display:none}
[data-theme="light"] .themebtn .sunrise{display:none}

main{padding:30px 0 150px}

/* ===================== the dock =====================
   A quiet persistent strip: who made this on the left, where you are on the
   right. It also gives About a home, so the nav row stays purely filters. */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 26px 24px;pointer-events:none;
}
/* glass: the ground shows through and moves under it */
.dock-pill{
  display:flex;align-items:center;gap:15px;pointer-events:auto;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
  background:color-mix(in srgb, var(--bg) 46%, transparent);
  backdrop-filter:blur(30px) saturate(2);
  -webkit-backdrop-filter:blur(30px) saturate(2);
  border:1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--bg) 24%, transparent),
    0 8px 26px color-mix(in srgb, #000 10%, transparent);
  padding:10px 18px;border-radius:0;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
/* The dock is chrome, and it was sitting at full ink while the caption it
   shares a screen with sits at --ink-2 — so the footer read louder than the
   work's own information. It takes the caption's hierarchy instead: one full
   ink anchor (the byline, as the title is in the caption) and everything else
   a step down. */
.dock-pill .who{color:var(--ink);white-space:nowrap;opacity:1}
.dock-pill a.who:hover{text-decoration:underline;text-underline-offset:3px}
.dock-pill a{color:var(--ink-2);opacity:1;transition:color .2s var(--ease)}
.dock-pill a:hover{color:var(--ink)}
.dock-pill a.who{color:var(--ink)}
.dock-rule{width:1px;height:13px;background:color-mix(in srgb, var(--ink) 20%, transparent);flex:none}
.social{display:flex;align-items:center;gap:13px}
.social a{display:grid;place-items:center;width:15px;height:15px}
.social svg{width:15px;height:15px;fill:currentColor}
.social svg.stroked{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* the day slides out of the capsule while you are moving, and back in when you stop */
.tick, .tick-rule{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  transition:max-width .4s var(--ease),opacity .3s var(--ease),margin-left .4s var(--ease);
  margin-left:-15px;
}
.dock-pill.moving .tick{max-width:97px;opacity:1;margin-left:0}
.dock-pill.moving .tick-rule{max-width:1px;opacity:1;margin-left:0}
.tick{color:var(--ink-2);opacity:1;font-variant-numeric:tabular-nums;
  width:97px}   /* tabular figures render every day at 96.2px, so the capsule never resizes */

@media (max-width:767px){
  .dock{padding:0 14px 14px}
  .dock-pill{font-size:9px;gap:11px;padding:9px 13px;max-width:calc(100vw - 28px)}
  /* the byline is the first thing to go on a phone, and the rule that was
     separating it from the icons has to go with it or it reads as a stray mark */
  .dock-pill .who,
  .dock-pill .who + .dock-rule{display:none}
  .social{gap:12px}
  /* the day capsule is the widest thing left; let it shorten rather than push
     the pill off the screen */
  .tick{width:auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .dock-pill.moving .tick{max-width:110px}
}

/* ===================== cards ===================== */
.card{
  display:block;position:relative;
  /* Paired puts 730 cards in the document at once. This lets the browser skip
     layout and paint for the ones off screen; `auto` means it remembers the
     real size after a card has been seen, so the scrollbar stays honest. */
  content-visibility:auto;
  /* Only the HEIGHT is guessed. Stating a width too made every off-screen card
     claim the single-column width, which in Paired — where a card is half a
     duo — was 350px inside a 172px cell, and the grid spilled off the side of a
     phone. The width comes from whatever cell the card is in; the height is the
     part the browser cannot know without laying it out. */
  contain-intrinsic-height:auto calc(var(--thumb, 300px) + 32px);
}
.shot{
  position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  background:var(--bg-2);border:calc(var(--frame) * 1px) solid var(--line-2);
}
.shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.shot img.on{opacity:1}
.card:hover .shot img{transform:scale(1.035)}

.cap{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 8px 8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.cap .ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cap .num{flex:none;color:var(--ink-3);transition:color .25s var(--ease)}

/* per-piece hue, on hover only */
.card:hover .cap,
.card:hover .cap .num{
  color:hsl(var(--h,0) calc(var(--s,0%) * var(--tint-mul)) var(--tint-l));
}
.card:hover .cap{
  background-color:hsl(var(--h,0) calc(var(--s,0%) * var(--tint-mul)) var(--tint-l) / var(--tint-bg));
}

/* ===================== layouts ===================== */
.grid{
  display:grid;row-gap:var(--gap-y);column-gap:var(--gap-x);
  grid-template-columns:repeat(auto-fill,var(--thumb,var(--col)));
  justify-content:center;
}
/* pairs use the same measured thumb width, so a piece is the same size
   whichever mode you are in; only the grouping changes */
/* paired fills the row: a pair is the unit you are reading, so it gets the
   space a pair needs rather than being held to the single-thumb size */
.pairs{
  display:grid;row-gap:var(--gap-y);column-gap:46px;
  grid-template-columns:repeat(auto-fill,minmax(calc(var(--col) * 2),1fr));
}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:6px}

.empty{color:var(--ink-3);padding:70px 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase}

/* The old piece page's styles lived here: a centred plate with an arrow either
   side, a caption under it and a footer rule. All of it went when piece.html
   took over, and .stage in particular is gone on purpose — it was claiming a
   name the new page wanted and silently overriding it. */

/* ===================== responsive ===================== */
@media (max-width:1024px){
  .wrap{padding:0 24px}
  .tools{gap:16px}
  .navline{gap:20px}
  /* The collapsed bar is one row: mark, collection, series, find, theme. At a
     tablet's width those five do not fit at their desktop sizes, and the search
     field is the one that can give — it opens to full size the moment you put a
     cursor in it. Without this the tools ran 56px off the right edge of a 768pt
     iPad on every page whose header is collapsed. */
  .finder input{width:78px}
  .finder input:focus{width:160px}
}
/* A 768pt tablet is the tightest case: the collapsed bar has to hold the mark,
   its indent, three collections, a series name, a search field and the theme
   toggle in 690px, and at desktop sizes that is 67px too much. Everything gives
   a little rather than one thing being thrown out. */
@media (max-width:900px){
  .navline{gap:14px}
  .tools{gap:14px}
  .finder input{width:58px}
  .finder input:focus{width:130px}
  .modes button, .ddbtn{font-size:9.5px;letter-spacing:.10em}
}
/* ===================== the phone =====================
   One row. The mark and the filters, nothing else, exactly the shape the
   collapsed header has on a desktop. The row scrolls sideways if a long series
   name needs more than the screen.

   Find goes: at this width the input costs more room than it earns, and the
   series pulldown is the filter people actually reach for. The theme toggle
   goes too, and the phone is dark: a page of artwork on a handset held at
   arm's length is a dark-room experience, and the light theme exists for a
   desk. Every page forces dark below this width in its own head script, so
   there is nothing to toggle. */
@media (max-width:767px){
  .wrap{padding:0 20px}
  /* One pair to a row, the same way browse gives one thumbnail to a row. The
     minmax above asks for twice the thumb width as a minimum, which on a narrow
     screen is wider than the column itself once a scrollbar gutter is taken off,
     and the grid pushed past the edge. */
  .pairs{grid-template-columns:1fr}

  .bar{padding-top:0}
  .bar.stuck{padding-top:0}
  .sym{height:22px;width:24px}
  .wordmark{display:none}

  /* the mark comes back into the row with the filters rather than sitting on a
     line of its own above them */
  .barin{display:flex;align-items:center}
  .barin > .brand{position:static;transform:none !important;order:0;
    align-self:center;flex:none;margin-right:15px}
  .topspace{display:none}
  .tools{display:none}

  .navline{
    flex-wrap:nowrap;padding:11px 0;gap:0;flex:1 1 auto;min-width:0;
    padding-left:0 !important;
    /* a long series name is reached by dragging the row rather than being cut
       off or wrapped onto a second line */
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .navline::-webkit-scrollbar{display:none}
  /* the scrollable row clips absolute children, so the open menu becomes a
     sheet pinned under the bar (fixed resolves against the bar's own
     containing block, courtesy of its backdrop-filter) */
  .ddmenu{position:fixed;left:12px;right:12px;top:58px;min-width:0}
  .modes{flex:none}
  /* The capfix above drops the caps onto the WORDMARK's optical centre. There
     is no wordmark here, and against the mark alone that correction leaves the
     filters sitting low. Measured off the rendered glyphs, not guessed. */
  .modes button, .ddbtn{ padding-top:2px }
  .modes button{margin-right:13px;font-size:9px;letter-spacing:.09em}
  .ddbtn{font-size:9px;letter-spacing:.09em;padding-left:0;padding-right:0;
    margin-left:13px;flex:none;white-space:nowrap;gap:7px}
  .ddbtn svg{width:8px;height:5px}
  .dd{flex:none}
  .navline .gap{display:none}

  main{padding:22px 0 96px}
}

@media (max-width:640px){
  .cap{font-size:9.5px;letter-spacing:.08em;padding:8px 6px 7px}
  .ddmenu{min-width:220px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}