/* Poppins, self-hosted (@fontsource/poppins 5.2.7, OFL): latin + latin-ext subsets. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/poppins-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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/poppins-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; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/poppins-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; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/poppins-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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/poppins-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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/poppins-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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/poppins-latin-ext-700-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; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/poppins-latin-700-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; }

/* Sizes follow honlapterv.pdf, drawn on a 1920 px wide canvas: one design unit u = 100vw / 1920. */
:root {
  --u: calc(100vw / 1920);
  --margin: max(16px, calc(80 * var(--u)));
  --nav: max(17px, calc(30 * var(--u)));
  --text: max(14px, calc(23 * var(--u)));
  --top-pad: max(16px, calc(100 * var(--u)));
  --main-pad: max(24px, calc(90 * var(--u)));
  --col-gap: max(10px, calc(42 * var(--u)));
  --row-gap: max(10px, calc(30 * var(--u)));
  --cols: 9;
  /* Large photo box: the photo's left edge sits at 50% of the page, as in the design. */
  --H: max(240px, min(36vw, calc(100vh - var(--top-pad) - 1.2 * var(--nav) - 2 * var(--main-pad))));
  --W: 38vw;
  --W-wide: calc(100vw - 2 * var(--margin) - 280 * var(--u) - 20px);
  --arrow-gap: calc(55 * var(--u));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #000;
  font: 400 var(--text)/1.2 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; transition: opacity .4s ease; }
img.loading { opacity: 0; }

/* Current page and hovered links: italic with a strike line (design pages 3 and 6). */
.link.on { font-style: italic; text-decoration: line-through; text-decoration-thickness: max(1px, .05em); }
@media (hover: hover) {
  .link:hover { font-style: italic; text-decoration: line-through; text-decoration-thickness: max(1px, .05em); }
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  padding: var(--top-pad) var(--margin) 0;
  font-size: var(--nav);
  line-height: 1.2;
}
.top nav { display: flex; gap: max(14px, calc(50 * var(--u))); }

main { padding: var(--main-pad) var(--margin); }

/* Thumbnail grids (home, series overview): equal columns, photos top-aligned in rows. */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--row-gap) var(--col-gap);
  align-items: start;
}
.grid a { display: block; background: #f4f4f4; }
.grid img { width: 100%; height: auto; aspect-ratio: var(--r); }

/* Text column on the left half, large photo on the right half. */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "head stage" "text stage";
  align-items: start;
}
.head { grid-area: head; position: relative; z-index: 1; }
.text { grid-area: text; }
.head, .text { padding-right: calc(70 * var(--u)); }

.work-title { font-size: var(--nav); font-weight: 600; line-height: 1.2; }
.work-year { margin-bottom: 1.2em; }
.work-text p { margin-bottom: 1.2em; }
.work-text .credit { font-style: italic; text-align: right; }
.works-list { font-size: var(--nav); }
.page-slide .head { font-size: var(--nav); }

.stage { grid-area: stage; height: var(--H); display: flex; align-items: center; }
.stage.wide { grid-area: 1 / 1 / -1 / -1; justify-content: center; }
.frame { position: relative; }
.frame img { width: auto; height: min(var(--H), calc(var(--W) / var(--r))); aspect-ratio: var(--r); }
.stage.wide .frame img { height: min(var(--H), calc(var(--W-wide) / var(--r))); }
.frame img.advance { cursor: pointer; }

/* Hand-drawn arrows, traced from the vector strokes in honlapterv.pdf page 2. */
.arrow { position: absolute; padding: 10px; line-height: 0; }
.arrow svg { width: var(--aw); height: auto; overflow: visible; }
.arrow path { fill: none; stroke: currentColor; stroke-width: 1px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (hover: hover) { .arrow:hover path { stroke-width: 1.7px; } }
.arrow.prev { --aw: max(30px, calc(49 * var(--u))); right: 100%; top: 50%; transform: translateY(-50%); margin-right: calc(var(--arrow-gap) - 10px); }
.arrow.next { --aw: max(27px, calc(43.3 * var(--u))); left: 100%; top: 50%; transform: translateY(-50%); margin-left: calc(var(--arrow-gap) - 10px); }
.arrow.up { --aw: max(40px, calc(65 * var(--u))); bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: calc(50 * var(--u) - 10px); }

.page-about .stage { height: auto; display: block; }
.portrait { width: max(200px, calc(512.8 * var(--u))); height: auto; aspect-ratio: var(--r); }
.cv h2 { font-size: inherit; font-weight: 700; margin-top: 1.2em; }

.overview-head { font-size: var(--nav); font-weight: 600; margin-bottom: calc(60 * var(--u)); }

@media (max-width: 1199px) { :root { --cols: 7; } }
@media (max-width: 999px) { :root { --cols: 6; } }

/* Phones and small tablets: one column, arrows in a row under the photo. */
@media (max-width: 799px) {
  :root {
    --cols: 4; --margin: 16px; --nav: 18px; --text: 15px;
    --top-pad: 16px; --main-pad: 28px; --col-gap: 10px; --row-gap: 10px;
  }
  body { line-height: 1.35; }
  .page { display: block; }
  .head, .text { padding-right: 0; }
  .text { margin-top: 28px; }
  .stage, .stage.wide { height: auto; display: block; margin-top: 24px; }
  .frame { padding-bottom: 58px; }
  .frame img, .stage.wide .frame img {
    width: 100%; height: auto; max-height: 72vh; max-height: 72svh; object-fit: contain;
  }
  .arrow, .arrow.prev, .arrow.next, .arrow.up { top: auto; bottom: 0; margin: 0; transform: none; }
  .arrow.prev { right: auto; left: -10px; }
  .arrow.next { left: auto; right: -10px; }
  .arrow.up { left: 50%; transform: translateX(-50%); }
  .works-list { line-height: 1.6; }
  .page-works .stage { display: none; }
  .page-about .stage { margin: 0 0 28px; }
  .portrait { width: 100%; }
  .overview-head { margin-bottom: 20px; }
}
@media (max-width: 559px) { :root { --cols: 3; } }