/* Siska Katrine Jørgensen — mobile-first, gallery white.
   Written narrow-first: every rule below is the phone layout; min-width
   queries add the wider compositions on top. */

/* Open Sans, the original typeface. Self-hosted rather than loaded from
   Google: it is one less third-party request, and hotlinking Google Fonts
   has been found to breach the GDPR in the EU. One variable file covers
   300-800; unicode-range means latin-ext is only fetched if a page needs it. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/open-sans-latin.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;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/open-sans-latin-ext.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;
}

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

:root {
  color-scheme: light;
  --ink:        #1a1a1a;
  --ink-muted:  #5d5d5d;   /* 6.4:1 on white */
  --rule:       #e4e4e4;
  --paper:      #ffffff;
  --focus:      #2b6cb0;

  /* Menu. #767676 is the lightest grey that still meets AA at 14px (4.54:1) —
     anything lighter fails — so the selected item cannot be lightened further.
     The separation comes from darkening the others instead: 2.99:1 between the
     two, against 1.96:1 for the original's pairing. */
  --nav:         #2e2e2e;   /* 13.4:1 on white */
  --nav-current: #767676;   /*  4.54:1 — the AA floor */
  --body-grey:   #666666;   /* the original's body text, 5.7:1 */

  --gutter:     clamp(1rem, 5.5vw, 3rem);
  --stack:      clamp(2.5rem, 9vw, 5.5rem);  /* space between works */
  --measure:    38rem;                       /* readable line length */
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

/* Nothing anywhere on the site changes appearance on hover — no underline, no
   colour shift. The pointer cursor is the only cue. Keyboard focus rings are a
   separate thing and stay: they are how someone navigating without a mouse can
   see where they are. */
a { color: inherit; text-decoration: none; }

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

h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--ink); color: #fff; padding: 0.75rem 1rem;
}
.skip:focus { left: 0; }

.muted, .credit { color: var(--ink-muted); }

/* ---------- header ---------- */

.site-head {
  padding: 1rem var(--gutter);
  padding-top: max(1rem, env(safe-area-inset-top));
}
.site-head ul {
  display: flex;
  /* one gap for every item, the bullet included — 22px, as in the original */
  gap: 22px;
  list-style: none;
  margin: 0; padding: 0;
}
.site-head a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  color: var(--nav);
}
/* The page you are on is the lighter one, as in the original: it recedes
   because you are already there, and the places you can still go stay darker. */
.site-head a[aria-current="page"] { color: var(--nav-current); }

/* The bullet glyph is only about 5px wide, which is far too small to tap.
   Widen the hit area with an overlay so the target reaches ~25x44 without
   changing the spacing by a single pixel. */
.site-head .mark { position: relative; }
.site-head .mark::after { content: ""; position: absolute; inset: 0 -10px; }

main {
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-bottom: var(--stack);
}

/* ---------- works index ---------- */

.works { list-style: none; margin: 0; padding: 0; }

.work-card + .work-card { margin-top: var(--stack); }
.work-card a { display: block; }

/* Caption: three consecutive lines in one grey. What separates the title is
   weight, not colour or size — that is what makes the original subtle. Set at
   14px on a phone and at the original's 13px from the sidebar width up. */
.work-card__meta { margin-top: 0.9rem; }
.work-card__meta h2,
.work-card__meta .credit {
  margin: 0;
  font-size: 0.875rem;
  color: var(--body-grey);
  line-height: 1.4;
}
.work-card__meta h2     { font-weight: 700; }
.work-card__meta .credit { font-weight: 500; }

/* ---------- work detail ---------- */

/* Vertical rhythm measured off the original: 14px after the title, materials
   and credit as consecutive lines with no gap between them, 14px before the
   description, and 50px before the first image. */
.work__head { margin-block: 0.5rem 14px; max-width: var(--measure); }
.work__head h1 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }
.work__head .materials,
.work__head .credit { font-size: 0.9375rem; color: var(--ink-muted); line-height: 1.45; }
.work__head .materials { margin: 14px 0 0; }
.work__head .credit    { margin: 0; }

.prose { max-width: var(--measure); margin-bottom: 0; }
.prose p { margin: 0 0 1.15em; }
.prose p:last-child { margin-bottom: 0; }

/* 50px before the first image. Put on the gallery rather than under the
   description so the spacing holds for a work that has no description — the
   margins then collapse to this 50px instead of the head's 14px. */
.gallery { margin-top: 50px; }
.gallery figure { margin: 0; }
.gallery figure + figure { margin-top: clamp(1.5rem, 6vw, 3.5rem); }

.zoom {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  font: inherit; color: inherit;
}

.work-nav {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--stack);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.work-nav a { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.work-nav span { display: block; color: var(--ink-muted); font-size: 0.8125rem; }
.work-nav .all { color: var(--ink-muted); }

/* ---------- CV ---------- */

.cv { max-width: 54rem; }
.cv__head { margin-bottom: var(--stack); }
.cv__head h1 { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }
.cv__head .bio { margin: 0.4rem 0 0; color: var(--ink-muted); }

.cv__section + .cv__section { margin-top: 3.5rem; }
.cv__section h2 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1rem;
}
.cv dl { margin: 0; }

/* On a phone the year sits above its entry, so a wrapped entry is several
   lines 24.8px apart. The gap between entries has to be clearly larger than
   that or neighbouring entries read as one block — which is what made this
   feel cramped. Sections step up again from there. */
.cv__row + .cv__row { margin-top: 2rem; }
.cv__row dt {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  font-size: 0.875rem;
}
.cv__row dd { margin: 0.1rem 0 0; }

/* ---------- home / contact ---------- */

/* Contact reads as one plain block, as in the original: the name is set like
   the rest of the text, then the address, then how to reach her. */
.contact { color: var(--body-grey); }
.contact h1 { font-size: inherit; font-weight: 400; margin: 0; }

/* The front page is one centred image, 46% of the viewport at every width —
   measured off the original at 375px, 540px, 768px, 1440px and 1920px, where
   it is 46% throughout. It sits about 202px down the page on a phone. */
.home__image {
  max-width: 46vw;
  margin-inline: auto;
  margin-top: 126px;
}
.home__intro { max-width: var(--measure); color: var(--ink-muted); margin: 1.5rem auto 0; text-align: center; }

/* one blank line after the name, then the address as consecutive lines */
.contact address { font-style: normal; margin: 1.3em 0 0; }
.contact address span { display: block; }
/* 14px before the email and phone, 45px before the photo */
.contact__reach { margin: 14px 0 0; }
.contact__image { margin-top: 45px; }

.notfound { padding-block: var(--stack); }
.notfound p { margin: 0.75rem 0 0; }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.985);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  overflow: auto;
}
.lightbox img { max-width: 100%; max-height: 100vh; object-fit: contain; margin: auto; }
.lightbox__close {
  position: fixed; top: 0.5rem; right: 0.5rem;
  width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--ink);
}
body.is-locked { overflow: hidden; }

/* ---------- wider screens ---------- */

@media (min-width: 46em) {
  /* the studio photo on Contact was 230px and left-aligned with the text */
  .contact__image { max-width: 230px; }
}

@media (min-width: 40em) {
  .work-nav { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .work-nav .next { text-align: right; }
  .work-nav .all { text-align: center; }

  /* Wide enough for the year to sit beside its entry: each row then delimits
     itself and does not need the phone's generous separation. */
  .cv__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
  .cv__row dt { font-size: 0.9375rem; }
  .cv__row dd { margin-top: 0; }
  .cv__row + .cv__row { margin-top: 0.9rem; }
  .cv__section + .cv__section { margin-top: 3.25rem; }
}

/* ---------- desktop: the fixed side nav and the layout built around it ----------

   Her original switches at 981px: above it the header is a fixed 222px column
   down the left with the menu stacked vertically; below it the menu sits
   horizontally on top. The left indents on every page (230px on Works, 140px
   on a project, 130px on the CV, 300px on Contact) exist to clear that fixed
   column — which is why they must switch on at exactly the same width as the
   sidebar, and off again below it. */

@media (min-width: 981px) {
  .site-head {
    position: fixed;
    inset: 0 auto 0 0;
    width: 222px;
    padding: 113px 0 0 40px;
    background: var(--paper);
    z-index: 10;
  }
  /* stacked, 33px rows — the bullet is simply the first of them */
  .site-head ul { flex-direction: column; gap: 0; }
  .site-head a { min-width: 142px; min-height: 33px; }

  /* the fixed header is out of flow, so the content sets its own top */
  main { padding-top: 80px; }

  /* Previous / next is a phone convenience — there the menu has scrolled away
     by the time you reach the bottom of a long gallery. On a desktop the menu
     is pinned in the sidebar the whole way down, so this is just noise. */
  .work-nav { display: none; }
  /* that 80px already places the front-page image where the original has it */
  .home__image { margin-top: 0; }

  /* Her original desktop composition, measured off the Divi layout at 1440px
     and 1920px (it was fixed, not fluid): a 960px row holding a 230px indent,
     a 471px image, a 77px gap and a 182px caption. Kept as fr units so the
     proportions survive at any width, and capped at 960px so the images stay
     the size they have always been rather than filling the screen. */
  .works { max-width: 60rem; margin-inline: auto; }

  .work-card a {
    display: grid;
    grid-template-columns: 230fr 471fr 77fr 182fr;
    align-items: start;
  }
  .work-card__img  { grid-column: 2; }
  .work-card__meta { grid-column: 4; margin-top: 0; }
  /* the original's caption size: 13px on an 18.2px line */
  .work-card__meta h2,
  .work-card__meta .credit { font-size: 13px; line-height: 18.2px; }

  /* 130px between works, as in the original */
  .work-card + .work-card { margin-top: 130px; }

  /* Project pages, measured the same way: one 960px row with everything —
     text and images alike — 820px wide and inset 140px from its left edge.
     The inset is the part that had to go on a phone; here there is room. */
  /* The inset lives on the container, not on each child: with border-box that
     keeps the content box exactly 820px and leaves max-width on the children
     free to mean what it says. */
  .work {
    max-width: 60rem;
    margin-inline: auto;
    padding-left: 140px;
  }

  .work__head { max-width: none; }
  .work__head h1 { font-size: 1.125rem; }

  /* The description runs the full 820px, matching the image above it, with the
     original's tighter 1.3 line-height — at 1.55 the lines drifted apart and
     the block read as cramped sideways and loose vertically at the same time.
     Lines run long at this width; that is the original's proportion. */
  .prose {
    max-width: none;          /* overrides the narrow measure used on a phone */
    font-size: 0.875rem;
    line-height: 1.3;
  }
  .prose p { margin: 0 0 1.3em; }

  /* 90px between images */
  .gallery figure + figure { margin-top: 90px; }

  /* CV: 130px indent inside the same 960px row, giving an 830px column */
  .cv {
    max-width: 60rem;
    margin-inline: auto;
    padding-left: 130px;
    font-size: 0.875rem;
  }

  /* Contact: 300px indent, giving a 660px column, set at the original's
     14px/1.3 — on a phone it stays 16px so an address is still easy to read. */
  .contact {
    max-width: 60rem;
    margin-inline: auto;
    padding-left: 300px;
    font-size: 0.875rem;
    line-height: 1.3;
  }
}

/* Between the sidebar breakpoint and about 1200px the content is centred in a
   viewport narrow enough that the smallest indent (130px, on the CV) no longer
   clears the fixed nav — in the original the CV text runs underneath it there.
   Hold the content clear in that band only; from 1200px up the natural
   centring already clears and the layout is left exactly as measured. */
@media (min-width: 981px) and (max-width: 1199px) {
  main { padding-left: 90px; }
}

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