/* ==========================================================================
   annahemmerich.com
   --------------------------------------------------------------------------
   Design language: Anna's own reference set — 7 sites she sent, all Cargo —
   read for what they actually do. The shared house style across all seven:

     ground      white. #fff, no tint, no bone, no paper texture.
     type        one neutral grotesque, small. Cargo's own scale, all four
                 values below taken from it: 14.5px body (--fontSize-default),
                 12px captions and nav (--fontSize-small), the name at 22px
                 (--fontSize-large). Regular weight, 400 throughout — the same
                 weight Cargo declares for its own typeface. The seven set
                 their own names at 14.4-23px, measured; ours matches the top
                 of that range, not above it.
     colour      none in the interface. The paintings are the only colour on
                 the page. Where a reference uses an accent it replaces the
                 type colour outright; none of them tints a surface. Ours is
                 the accent three of the seven declare outright (#FF0000);
                 the other two carry their own — erlendpederkvam's link
                 colour measures #0022FF, Cameron Platter's #00EA00 — so
                 there is no single accent in the set, only a per-site one.
     chrome      none. No bars, cards, boxes, borders, shadows, radii, icons.
                 Two glyphs appear across the whole set: an up arrow and a
                 return mark.
     images      one work to a screen, centred, at ~31% of the frame at 1440 —
                the sheet rhythm five of the seven use on their fronts. The
                frame measures 77% white here; the seven run 72/75/76/95/98/99%
                with one at 29%.
     captions    one wrapped line of small text directly under each image,
                 in the portfolio document's own format.
     nav         plain text, sitting in a line. Never a bar.
     years       NOT from the set — nothing in the seven has a year control.
                 Ours, at Anna's direction: one vertical stream per year, the
                 years set as rails beside the painting window — older left,
                 newer right, each centred against the scroll — with All
                 outside each of them. Plain text, the same small size as the
                 nav, no buttons and no arrows. Under 700px the rails move to
                 a line above the scroll and a line below it.

   The portfolio PDF is already written in this language — white page, black
   12pt Helvetica captions, a plain List of Works — so nothing here fights it.
   ========================================================================== */

:root{
  /* Pure white, as every one of the seven references declares. An earlier
     build used #f4f3f0 on the theory that her photographs would lose their
     edge against white; measured, it was the wrong way round — the outer
     ring of all twenty photographs sits 23 to 85 ΔLuminance from white, and
     the off-white reduced that separation rather than adding to it. */
  --paper: #fff;
  --ink:   rgba(0,0,0,.85);          /* Cargo's own default text colour   */
  --ink-2: rgba(0,0,0,.60);          /* Cargo's, verbatim                  */
  --ink-3: rgba(0,0,0,.40);          /* in flatfix's own stylesheet        */
  --rule:  rgba(0,0,0,.15);          /* declared by the set, 8 times       */
  --live:  #ff0000;                  /* the set's own accent: Cargo's
                                        --baseColor-accent, declared by
                                        hughfrost, zartnan and ailsaogden  */

  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Monaco, Menlo, Consolas,
          "Liberation Mono", monospace;

  --fs-name: clamp(19px, 2.6vw, 22px);  /* Cargo's --fontSize-large = 22px */
  --fs-base: 14.5px;                    /* Cargo's --fontSize-default      */
  --fs-small: 12px;                     /* Cargo's --fontSize-small        */
  --fs-cap: 12px;                       /* the same token; captions are not
                                           set smaller than the page's own
                                           small size in any of the seven    */

  /* The page's one inset. The set's own spread, measured off their 1440
     captures by _build/ref_insets.py: 3 (erlendpederkvam), 10
     (cameronplatter), 15 (zartnan), 22 (flatfix), 30 (hughfrost), 53
     (tareklakhrissi), 70px (ailsaogden). The build sat at 15px — the tight
     end of the set — and read as cramped against the two generous references.
     It now runs to ailsaogden's 70px on a wide screen and stays tight on a
     phone, where every reference is tight. */
  --pad: clamp(14px, 4.8vw, 70px);
  /* The grid gutter: the set's range is 4-15px; this is its top end. */
  --gap: clamp(8px, 1.05vw, 15px);
  /* Not from the set: the air under the header and between a work's picture
     and its own caption. Kept modest — the set's captions sit tight. */
  --pad-top-block: clamp(20px, 3vw, 44px);
  --cap-lift: 5px;
}

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

html{
  -webkit-text-size-adjust:100%;
  /* No wheel down the side of any page: the stream pages scroll in place and
     hide their own bar, the long pages (CV, a single work) scroll the window
     without one either. Anna's ask — scrolling is untouched, only the bar. */
  scrollbar-width:none; -ms-overflow-style:none;
}
html::-webkit-scrollbar{ width:0; height:0 }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:1.4;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* A page is at least one screen tall and the footer sits at its bottom, on
     every kind of page, however short the content is. */
  min-height:100svh;
  display:flex; flex-direction:column;
}

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

/* the page column takes the room the footer does not, so the footer can sit at
   the bottom of a short page instead of floating under the content */
#main{ flex:1 1 auto }
a{ color:inherit; text-decoration:none }
a:hover{ color:var(--live) }
hr{ border:0; margin:0 }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:-9999px; top:0; background:#000; color:#fff; padding:8px 12px; z-index:9; font-size:var(--fs-small) }
.skip:focus{ left:0; top:0 }

/* ==========================================================================
   The top block. A name on the left, the section links on the right — the
   reference set's own arrangement (hughfrost: name top-left, nav top-right).
   It used to stack name over links at the left, which left a line of type
   sitting directly under the name and no air across the top of the page.
   ========================================================================== */
.top{
  padding:var(--pad) var(--pad) 0;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:6px 24px; flex-wrap:wrap;
}
.top__inner{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:6px 20px; flex-wrap:wrap;
}
.name{
  font-size:var(--fs-name); font-weight:400;
  letter-spacing:-.015em; line-height:1.06; margin:0;
}
.name a:hover{ color:var(--ink) }
/* the CV: a year column, then what happened. Plain type, no rules. */
.cvlist{ list-style:none; margin:0; padding:0; max-width:62ch }
.cvlist li{
  display:grid; grid-template-columns:5.2em minmax(0,1fr);
  padding:5px 0; color:var(--ink-2);
}
.cvlist .yr{
  color:var(--ink-3); font-family:var(--mono); font-size:var(--fs-cap);
  text-align:right; padding-right:.35em;
}
.top{
  padding:var(--pad) var(--pad) var(--pad);   /* equal air above the row and below it */
  display:flex; align-items:baseline; justify-content:center;
  gap:clamp(30px, 5vw, 76px); flex-wrap:wrap;
}
/* The three links join the name's own row, so the four items — Anna
   Hemmerich, Work, CV, About — are spaced equally and centred as a group. */
.top__nav{ display:contents }
.top__nav a{ color:var(--ink-2) }
.top__nav a[aria-current="page"]{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.top__nav a:hover{ color:var(--live) }

/* ==========================================================================
   The index, in the set's SHEET rhythm: one work to a screen, centred, its
   single line of text beneath, the name and nav at the page edges.

   Measured off the seven references' own 1440 captures (_build/refs/shots), a
   1440x1000 frame is 72% white on hughfrost, 75-85% on ailsaogden, 98-99% on
   erlendpederkvam, zartnan and tareklakhrissi, and 19-29% on Cameron Platter
   alone. Five of the seven give a single work roughly 30-39% of the frame
   width with everything else white. The old 4-across wall here measured 31%
   white — denser than every reference in the set but one. This is the set's
   own answer, not an invention: hughfrost's front is exactly this, one work,
   centred, caption beneath, name top-left, nav top-right.
   ========================================================================== */
/* The painting window and the year rails beside it. Anna's layout: the years
   flank the scroll — older to the left, newer to the right — each vertically
   centred against it, with "All" outside each of them (left of the left year,
   right of the right year). Plain small text in the section nav's own size; no
   buttons, no bar, no arrows. Nothing in the seven references has a year
   control at all: this one is ours. */
.streamwrap{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:stretch; padding:0 var(--pad);
}
.rail{
  display:flex; align-items:center; gap:clamp(10px,1.4vw,22px);
  font-size:var(--fs-small); color:var(--ink-2); white-space:nowrap;
}
.rail--left{ justify-content:flex-start; padding-right:clamp(10px,1.6vw,26px) }
.rail--right{ justify-content:flex-end; padding-left:clamp(10px,1.6vw,26px) }
.rail a{ color:var(--ink-2) }

.index{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(56px, 11vh, 150px);
  padding:var(--pad-top-block) var(--pad) clamp(56px, 11vh, 150px);
}

.index figure{
  margin:0;
  width:clamp(260px, 31vw, 490px);   /* hughfrost's own picture is 31% of 1440 */
  text-align:center;
}
.index img{ width:100% }
.index figcaption{
  font-size:var(--fs-cap); line-height:1.5; color:var(--ink-2);
  padding-top:var(--cap-lift); word-break:break-word;
}

/* ==========================================================================
   The stream pages scroll IN PLACE: the name, the section links and the year
   row stay where they are while the paintings move inside their own window.
   Anna's direction — and named as ours: nothing in the seven references does
   this, they all scroll the whole document. Plain CSS, no script: the body is
   one viewport tall and .index is the scroller.
   ========================================================================== */
body.stream{ display:flex; flex-direction:column; height:100svh; overflow:hidden }
body.stream #main{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column }
body.stream .index{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  scroll-snap-type:y proximity;
  padding-left:0; padding-right:0;      /* the rails carry the page inset now */
  padding-top:0;                        /* the air below the header holds still */
  scrollbar-width:none;                 /* no wheel/track down the side */
  -ms-overflow-style:none;
}
body.stream .index::-webkit-scrollbar{ width:0; height:0 }
body.stream .index figure{ scroll-snap-align:center }
body.stream .backtop{ text-align:center }
@media (max-width:699px){
  /* a phone frame is too narrow for rails beside the paintings: the years move
     to a line above the scroll and a line below it, All still outside each */
  .streamwrap{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto }
  .rail{ justify-content:center; padding:8px 0 }
  body.stream .index{ gap:clamp(40px, 8vh, 90px) }
}
.index figcaption b{ color:var(--ink) }
.index figure:hover figcaption,
.index figure:hover figcaption b{ color:var(--live) }
.index figure:hover figcaption b{ text-decoration:underline; text-underline-offset:2px }
.index figure:hover img{ opacity:.88 }

.top__nav a[aria-current="page"]{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }

/* affordance: the whole tile is the link, so say so */
.index figure a{ display:block }
.backtop{
  padding:clamp(8px,1.5vw,18px) var(--pad) 0;   /* a little air above it */
  font-size:var(--fs-cap); color:var(--ink-3); margin:0;
}
.backtop a{ display:inline-block; padding:6px 0 }

/* ==========================================================================
   A single work. One picture given the room, caption beneath, no chrome.
   ========================================================================== */
.sheet{
  padding:var(--pad) var(--pad) 0;
  display:flex; flex-direction:column; min-height:0;   /* the body sets the floor */
}
/* One header on every kind of page — the stream pages, a single work, CV,
   About. The name and the three section links are one centred row, equally
   spaced, so no page pushes Work / CV / About off to the right. */
.sheet__head{
  display:flex; align-items:baseline; justify-content:center;
  gap:clamp(30px, 5vw, 76px); flex-wrap:wrap; font-size:var(--fs-small);
  padding-bottom:var(--pad);        /* the same air below the row as above it */
}
.sheet__head .name{ font-size:var(--fs-small); letter-spacing:0 }
.sheet__nav{ display:contents }
.sheet__nav a{ color:var(--ink-2) }
.sheet__nav a[aria-current="page"]{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.sheet__nav a:hover{ color:var(--live) }
.sheet__body{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  gap:clamp(9px,1.2vw,16px); padding-bottom:clamp(20px,4vw,52px);
}
/* the picture is sized to the room left after the header, the caption, the
   prev/next line and the footer, so a single work fits one screen and the
   footer sits on the bottom edge instead of below the fold. A height:100%
   cap does not work here — the parent's height is auto, so the browser drops
   the constraint and the picture grows past the screen. */
.sheet__body img{
  max-height:max(220px, calc(100svh - 360px));
  width:auto; max-width:100%; object-fit:contain;
}
.sheet__cap{
  text-align:center; font-size:var(--fs-small); line-height:1.5;
  color:var(--ink-2); max-width:62ch;
}
.sheet__cap b{ font-weight:400; color:var(--ink); font-style:italic }
.sheet__foot{
  display:flex; justify-content:space-between; gap:16px;
  font-size:var(--fs-small); color:var(--ink-2);
  padding:14px 0 clamp(14px,2.2vw,24px);
}
.sheet__foot a{ max-width:46% }
.sheet__foot span{ color:var(--ink-3) }

/* ==========================================================================
   Reading pages: about and the CV. Plain type, one column.
   ========================================================================== */
.page{
  padding:0 var(--pad) clamp(50px,9vw,120px);   /* the header carries the air above */
  max-width:80ch;
}
.page h1{
  font-size:var(--fs-name); font-weight:400;
  letter-spacing:-.015em; line-height:1.06; margin:0 0 4px;
}
.page .sub{ font-size:var(--fs-small); color:var(--ink-2); margin:0 0 clamp(20px,3.2vw,42px) }
.page p{ margin:0 0 1em; max-width:62ch; color:var(--ink-2) }
.page p strong{ color:var(--ink); font-weight:400 }
.page a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule) }
.page a:hover{ color:var(--live); text-decoration-color:var(--live) }

.page h2{ font-size:var(--fs-small); font-weight:400; margin:2.4em 0 .6em; color:var(--ink) }

/* touch: give the text links a tappable box without moving the type.
   Keyed on width as well as pointer, so a narrow desktop window and a phone
   behave the same and the hit box is never 17px tall. */
@media (pointer:coarse), (max-width:699px){
  .top__nav{ gap:0 30px }
  .top__nav a{ padding:9px 0 }
  .rail a{ padding:9px 0 }
  .sheet__nav a{ padding:9px 0 }
  .sheet__foot a{ padding:9px 0 }
}

.tags{ display:flex; flex-wrap:wrap; gap:4px 16px; font-size:var(--fs-small); color:var(--ink-3); padding:0; margin:1em 0 0; list-style:none }

.tail{
  padding:0 var(--pad) clamp(9px,1.5vw,18px);
  font-size:var(--fs-cap); color:var(--ink-3);
  display:flex; gap:5px 20px; flex-wrap:wrap;
}
.tail a:hover{ color:var(--live) }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important } }

@media print{
  .top__nav,.sheet__foot,.tail,.sheet__nav{ display:none }
  .index{ columns:3 }
}