@font-face {
  font-family: Anaktoria;
  src: url("./assets/fonts/Anaktoria.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("./assets/fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: HelveticaNeueCyr;
  src: url("./assets/fonts/HelveticaNeueCyr-Roman.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: HelveticaNeueCyr;
  src: url("./assets/fonts/HelveticaNeueCyr-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f4f4f4;
  --ink: #828282;
  --line: #b6b6b6;
  --profile-width: 43.5vw;
  --preview-width: 28.1vw;
  --name-size: 69.45px;
  --serif-size: 23.64px;
  --body-size: 17px;
  --small-size: 16px;
  --digit-gap: 15px;

}

body { color: var(--ink); font-family: HelveticaNeueCyr, Arial, sans-serif; font-size: var(--body-size); -webkit-font-smoothing: antialiased; }
h1, h2, p, ol, ul { margin: 0; padding: 0; }
h1, h2 { font-weight: 400; }
ol, ul { list-style: none; }
.orientation-notice { display: none; }
@media (max-width: 900px) and (orientation: portrait) {
  .orientation-notice {
    position: fixed; inset: 0; z-index: 1000;
    display: block; overflow: hidden;
    background: #fff; color: #828282;
    user-select: none; -webkit-user-select: none;
  }
  .portrait-canvas {
    --portrait-scale: 1;
    position: absolute; left: 50%; top: 50%; width: 1080px; height: 1920px;
    overflow: hidden; transform: translate(-50%, -50%) scale(var(--portrait-scale));
    transform-origin: center; background: #fff; color: #888;
  }
  .portrait-copyright {
    position: absolute; left: 441.5px; top: 43px; width: 198.5px; height: 33px;
    z-index: 2; pointer-events: none;
    display: flex; align-items: center; justify-content: center; gap: 36px;
    font: 400 28px/1 HelveticaNeueCyr, Arial, sans-serif; letter-spacing: 0;
  }
  .portrait-copyright > span:first-child { font: 400 38px/1 "Instrument Serif", Georgia, serif; }
  .portrait-year { display: flex; gap: 28px; }
  .portrait-name {
    position: absolute; left: 195px; top: 130px; width: 690px; height: 164px;
    z-index: 2; pointer-events: none;
    font: 400 103.665px/.79 Anaktoria, Georgia, serif; letter-spacing: -2.073px;
    text-align: center; text-transform: uppercase;
  }
  .portrait-profession {
    position: absolute; left: 213px; top: 325px; width: 667px; height: 40px;
    z-index: 2; pointer-events: none;
    font: 400 39.107px/1 Anaktoria, Georgia, serif; text-align: center;
  }
  .portrait-rotate {
    position: absolute; left: 363px; top: 462px; width: 355px;
    z-index: 2; pointer-events: none;
    font: 400 26.2px/26.2px HelveticaNeueCyr, Arial, sans-serif;
    letter-spacing: -.524px; text-align: center;
  }
  .portrait-phone {
    position: absolute; left: 449px; top: 686px; width: 182px; height: 78px;
    z-index: 2; pointer-events: none;
    display: block; max-width: none; -webkit-user-drag: none;
  }
  .portrait-game-title {
    position: absolute; left: 128px; top: 866px; width: 837px;
    z-index: 2; pointer-events: none;
    font: 400 25.907px/30px Anaktoria, Georgia, serif;
    letter-spacing: .518px; text-align: center;
  }
  .portrait-divider {
    position: absolute; left: 53px; top: 904px; width: 988px; height: 1px;
    z-index: 2; pointer-events: none;
    background: #888;
  }
  .portrait-game-copy {
    position: absolute; left: 296px; top: 974px; width: 488px;
    z-index: 2; pointer-events: none;
    font: 400 26.2px/26.2px HelveticaNeueCyr, Arial, sans-serif;
    letter-spacing: -.524px; text-align: center;
  }
  .portrait-playfield { position: absolute; inset: 0; z-index: 1; }
  .portrait-shape {
    position: absolute; display: block; max-width: none;
    touch-action: none; cursor: grab; -webkit-user-drag: none;
  }
  .portrait-shape.is-dragging { cursor: grabbing; }
  .portrait-shape--union { left: 448px; top: 1249.37px; width: 542px; height: 564px; }
  .portrait-shape--design-witch { left: 97.56px; top: 1199.35px; width: 450px; height: 190px; }
  .portrait-shape--vector { left: 166.86px; top: 1518.72px; width: 250px; height: 293px; }
  .portrait-shape--union-1 { left: 197.11px; top: 1431.27px; width: 369px; height: 342px; }
  .portrait-shape--nine { left: 572.21px; top: 1352.57px; width: 276px; height: 360px; }
  .portrait-shape--vector-1 { left: 85.97px; top: 1361.09px; width: 65px; height: 198px; }
  .portrait-shape--vector-2 { left: 185.24px; top: 1115.62px; width: 226px; height: 86px; }
  .portrait-shape--vector-3 { left: 749.91px; top: 1535.03px; width: 157px; height: 178px; }
  .portrait-shape--vector-4 { left: 536.76px; top: 1346.69px; width: 223px; height: 149px; }
  .portrait-shape--vector-5 { left: 233.39px; top: 1299.07px; width: 252px; height: 184px; }
  .portrait-shape--vector-6 { left: 895.10px; top: 1199.42px; width: 114px; height: 369px; }
  .portrait-shape--vector-7 { left: 807.50px; top: 1481.81px; width: 171px; height: 60px; }
  .portrait-shape--vector-8 { left: 587.63px; top: 1124px; width: 120px; height: 158px; }
}
/* Résumé (cover): a centred column that scrolls, sized like the 839x1594
   Figma frame — every length is an em of the 17px body text at 1920. */
.profile-content {
  position: relative; width: var(--profile-width); min-height: 100%;
  padding: 1.94em 0 3.4em; text-align: center; font-size: max(10px, .885vw);
}
.copyright { display: flex; align-items: center; justify-content: center; gap: 1.3em; font-size: .94em; }
.copyright-mark { font-family: "Instrument Serif", serif; font-size: 1.75em; line-height: 1; }
.year { display: inline-flex; align-items: baseline; gap: 1.1em; white-space: nowrap; }
.identity { margin-top: 2em; }
.identity-name { position: relative; height: 6.45em; font-size: 1em; cursor: pointer; }
.identity-name:focus-visible { outline: 1px solid var(--ink); outline-offset: .5em; }
.identity-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.name-face {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 100%; width: auto; max-width: 78%; object-fit: contain; visibility: hidden;
}
.name-face.is-current { visibility: visible; }
.profession { margin-top: 1em; font-family: Anaktoria, Georgia, serif; font-style: normal; font-size: 1.36em; line-height: 1; }
.resume-block { margin-top: 5.2em; }
.introduction + .resume-block { margin-top: 3.6em; }
.resume-clock + .resume-block { margin-top: calc(3.6em + 40px); }
.resume-label {
  position: relative; padding-bottom: 1em; font-family: Anaktoria, Georgia, serif;
  font-style: normal; font-size: 1.18em; font-weight: 400; line-height: 1;
}
.resume-label::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--line); }
.resume-list {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  column-gap: 2.6em; row-gap: .35em; margin-top: .95em;
  font-family: Anaktoria, Georgia, serif; font-size: 1.53em; line-height: 1.15; text-transform: uppercase;
}
.resume-list li { white-space: nowrap; }
.resume-list sup { margin-right: .3em; font-size: .5em; font-style: italic; vertical-align: .9em; }
.introduction { margin-top: 2.1em; line-height: 1.04; }
.school-name { text-decoration: underline; text-underline-offset: 2px; }
.resume-note { margin-top: 2.1em; line-height: 1.04; }
.resume-note + .resume-note { margin-top: 2em; }
.resume-clock { display: block; width: 26%; height: auto; margin: calc(3.6em + 40px) auto 0; }
.timeline-table { position: relative; margin-top: 1em; font-size: .94em; }
.timeline-list { display: grid; row-gap: 1.1em; width: calc(100% - 6.8em); margin-left: 6.8em; }
.timeline-list > li { display: grid; grid-template-columns: 10.88em 7.06em minmax(0, 1fr); align-items: start; text-align: left; }
.timeline-list .year { gap: .75em; }
.timeline-from, .timeline-to { position: absolute; top: 50%; transform: translateY(-50%); }
.timeline-from { left: 2.8em; }
.timeline-to { left: 14.44em; }
.timeline-list .studio-list { display: grid; gap: .2em; }
.studio-list > span { display: grid; grid-template-columns: 11.2em 1fr; align-items: baseline; }
.studio-list small { font-size: .76em; white-space: nowrap; }
.resume-contacts-block { margin-bottom: 1.5em; }
.resume-contacts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: start; margin-top: 1.45em; padding-inline: 7%;
}
.resume-contacts a {
  display: flex; align-items: center; justify-content: center; gap: .72em;
  color: inherit; font: inherit; text-decoration: none;
}
.resume-contacts img {
  display: block; width: 18px; height: 18px; max-width: none; flex: none;
  object-fit: contain;
  transition: transform .2s ease;
}
.resume-contacts span { font-size: .94em; line-height: 1; }
.resume-contacts a:hover img,
.resume-contacts a:focus-visible img { transform: translateY(-2px); }
.resume-contacts a:focus-visible {
  outline: 1px solid var(--ink); outline-offset: .45em;
}
.works-content {
  position: relative; z-index: 1; height: 100%;
  /* The Figma frame is 393 × 1086. Keep that design area independent from
     the wider physical sheet so the two clocks never scale into each other. */
  width: min(100%, 36.19dvh); min-width: 0; margin-inline: auto;
  text-align: center; transform-style: preserve-3d;
}
.work-years { position: absolute; top: 3.1%; width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: var(--small-size); }
.work-years .year { gap: 13px; }
.year-rule { height: 1px; width: 40px; background: var(--line); }
.works-title { position: absolute; top: 24.7%; width: 100%; font-family: HelveticaNeueCyr, Arial, sans-serif; font-size: var(--body-size); line-height: 1.05; }
/* Both artworks sit at their Figma centres, as shares of the 393x1086 page. */
.artworks { position: absolute; inset: 0; }
.artworks img { position: absolute; left: 50%; display: block; height: auto; transform: translate(-50%, -50%); }
.artwork-matin { width: 89.6%; top: 53.1%; }
.artwork-clock { width: 85.8%; top: 82.5%; }
@media (max-width: 1700px) {
  :root { --name-size: 58px; --serif-size: 20px; --body-size: 14px; --small-size: 13px; --digit-gap: 12px; }
  .work-years .year { gap: 10px; }
  .year-rule { width: 32px; }
}
@media (max-width: 1450px) {
  :root { --name-size: 51px; --serif-size: 18px; --body-size: 12px; --small-size: 11px; --digit-gap: 10px; }
  .work-years .year { gap: 9px; }
  .year-rule { width: 28px; }
}
@media (max-width: 1250px) and (min-width: 901px) {
  :root { --name-size: 44px; --serif-size: 16px; --body-size: 11px; --small-size: 10px; --digit-gap: 8px; }
  .work-years { gap: 6px; }
  .work-years .year { gap: 7px; }
  .year-rule { width: 23px; }
}
@media (max-width: 900px) {
  :root { --profile-width: 88vw; --preview-width: 88vw; --name-size: 58px; --serif-size: 22px; --body-size: 14px; --small-size: 13px; --digit-gap: 10px; }
  .profile-content { font-size: var(--body-size); padding-inline: 4%; }
  .resume-list { column-gap: 1.6em; }
  .resume-clock { width: 46%; }
  .introduction br, .resume-note br { display: none; }
  .resume-contacts { padding-inline: 0; gap: .5em; }
  .resume-contacts span { font-size: .8em; }
}
@media (max-width: 600px) {
  :root { --name-size: 42px; --serif-size: 20px; --body-size: 13px; --small-size: 10px; --digit-gap: 5px; }
  .studio-list > span { display: block; }
  .studio-list small { display: block; font-size: .7em; line-height: 1.2; }
  .studio-list > span + span { margin-top: .2em; }
  .work-years { font-size: 12px; }
  .work-years .year { gap: 11px; }
  .works-title { font-size: 15px; }
}
@media (max-width: 370px) {
  :root { --name-size: 35px; --body-size: 12px; --small-size: 9px; }
}

/* Project spread: images on the back of the previous leaf, text on the next.
   Horizontal values are shares of the 540px text page and 394px image column
   in the 1920px Figma frame; vertical rhythm is in ems of the body size. */
:root { --project-width: 28.1vw; }
.project-photos { display: grid; gap: 2.34vw; padding: .78vw .88vw 2.34vw; }
/* Each image keeps the frame its Figma export has, whatever the source size. */
.project-photos img { display: block; width: 100%; height: auto; object-fit: cover; opacity: .8; box-shadow: none; filter: none; }
.project-photos--tight { gap: .95vw; padding: 0 .9vw .95vw; }
.project-text {
  position: relative; width: var(--project-width); min-height: 100%;
  /* Side padding follows the text's own width, not the leaf's, so the lines
     never rewrap while a leaf changes width during a turn. */
  padding: 1.94em calc(var(--project-width) * var(--text-right, .105)) 6em calc(var(--project-width) * .039);
  text-align: left;
  /* The text scales with the screen like the 1920px frame (17px there), so
     the Figma line breaks hold at every desktop width. */
  font-size: max(10px, .885vw);
}
.project-page[aria-label="Fedalio Korach"] { --text-right: .083; }
.project-page[aria-label="Mivra Jewelry"] { --text-right: .083; }
.project-page[aria-label="Mivra Jewelry"] .project-scope {
  left: 67.1%; top: 7.616em; font-size: 1em; line-height: 1.06;
}
.project-page[aria-label="Mivra Jewelry"] .section-label { margin-top: 4.35em; }
.project-logo--mivra { width: 40.7%; margin: 4.8em 0 5.3em 27.3%; }
.mivra-comparison {
  display: flex; align-items: center; justify-content: center; gap: 3.6%;
  width: 81%; margin: 4.8em 0 0 9.5%;
}
.mivra-comparison img { display: block; width: 39.5%; height: auto; opacity: .8; }
.mivra-comparison span { display: block; width: 11%; height: 1px; background: var(--line); }
.project-photos--mivra { gap: .66vw; padding: .78vw .9vw 2.34vw; }
.project-page[aria-label="Materia Prima"] { --text-right: .083; }
.project-page[aria-label="Materia Prima"] .project-scope {
  left: 67.1%; top: 7.616em; font-size: 1em; line-height: 1.06;
}
.project-page[aria-label="Materia Prima"] .section-label { margin-top: 4.35em; }
.materia-diagram {
  display: block; width: calc(var(--project-width) * .74); max-width: none; height: auto;
  margin: 13em 0 0 calc(var(--project-width) * .085);
}
.materia-progress {
  width: 100%; margin: 5.5em 0 0; text-align: center; text-indent: 0 !important;
  font-size: 1.12em; line-height: 1;
}
.project-photos--materia { gap: .95vw; padding: .78vw .9vw .95vw; }
.page-back .project-photos { width: var(--sheet-width, 100%); }
.project-year { display: flex; align-items: center; gap: 1.3em; font-size: .94em; }
.project-year .copyright-mark { font-size: 1.75em; }
.project-year .year { gap: 1.125em; }
.project-header { position: relative; margin-top: 1.95em; }
.project-title {
  font-family: Anaktoria, Georgia, serif; font-size: 4.085em; line-height: .79;
  text-transform: uppercase; white-space: nowrap;
  transform: scaleX(.9); transform-origin: left center; -webkit-text-stroke: .2px var(--ink);
}
.project-scope { position: absolute; left: 71.2%; top: 7.616em; font-size: 1em; line-height: 1.2; white-space: nowrap; }
.project-scope sup { font-size: .58em; line-height: 0; vertical-align: .62em; }
/* A scope item that wraps keeps its second line under the words, not the number. */
.project-scope li > span { display: inline-block; vertical-align: top; }
.section-label {
  display: flex; justify-content: space-between; padding: 0 2.6% 0 20.8%; margin: 4.6em 0 0;
  font-size: 1em; font-weight: 400; line-height: 1.12;
}
.project-section + .project-section .section-label { margin-top: 4.6em; }
/* A two-line title keeps the same header depth as a three-line one. */
@media (min-width: 901px) { .project-header { min-height: calc(4.085em * .79 * 3); } }
.project-text p { line-height: 1.12; }
.section-label + p, .project-logo + p { margin-top: 2.7em; text-indent: 21.3%; }
.project-logo + p { margin-top: 0; }
@media (max-width: 1130px) { .wide-break { display: none; } }
.project-text p + p { margin-top: 1.12em; }
.project-logo { display: block; width: 53.5%; height: auto; margin: 4.2em 0 5.2em 27.2%; }
.project-logo--wide { width: 64.8%; margin-left: 20.1%; }
.project-logo--sunday { width: 68%; margin-left: 19.9%; }
.project-text p.indented { text-indent: 21.3%; }
/* Without a year line the title still starts at the same height. */
.project-text > .project-header:first-child { margin-top: 3.6em; }
.project-page[aria-label="Inhabitants of Sunday"] { --text-right: .083; }
.project-page[aria-label="IN–OUT Brain Workout Zine"] { --text-right: .083; }
.project-logo--inout { width: 68.1%; margin: 5.4em 0 7.1em 20.4%; }
.project-photos--inout,
.project-photos--studio { gap: .66vw; padding: .94vw .9vw 5.2vw; }
.project-page[aria-label="IN–OUT Studio Identity"] { --text-right: .083; }
.project-page[aria-label="IN–OUT Studio Identity"] .project-scope {
  left: 71.2%; top: 7.616em; font-size: 1em; line-height: 1.32;
}
.project-logo--studio { width: 68.1%; margin: 4.1em 0 5.2em 20.4%; }
.project-page[aria-label="MR Group"] { --text-right: .083; }
.project-logo--mr { width: 67.5%; margin: 2.6em 0 4.55em 19.8%; }
/* At rest the bookmark ends exactly at the sheet edge. Hovering the open page
   slides it out and unfolds the note. */
.bookmark {
  position: absolute; z-index: 5; top: 1em; left: calc(var(--project-width) * .624);
  width: calc(var(--project-width) * .376); padding: 0 1em;
  font-size: max(11.2px, .991vw); color: var(--ink);
  background: #f7f7f7;
  box-shadow: 0 0 0 .5px rgb(0 0 0 / .05), 0 1px 3px rgb(0 0 0 / .05);
  overflow: hidden; cursor: default;
  transition: left .35s ease, width .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.bookmark > span { display: block; height: 2.32em; line-height: 2.32em; white-space: nowrap; }
.bookmark-note {
  max-height: 0; overflow: hidden; margin: 0;
  font-size: .9em; line-height: 1.15; opacity: 0;
  transition: max-height .45s ease, opacity .3s ease, padding .45s ease;
}
.bookmark:hover { left: calc(var(--project-width) * .413); width: calc(var(--project-width) * .587); background: #f7f7f7; box-shadow: 0 0 0 .5px rgb(0 0 0 / .06), 0 4px 14px rgb(0 0 0 / .08); }
.bookmark:hover .bookmark-note { max-height: 8em; opacity: 1; padding: .2em 0 .8em; }
/* Tabs in the stack keep the bookmark still; only an open page reacts. */
.project-page:not([data-state="current"]) .bookmark { pointer-events: none; }
.section-label > [aria-hidden="true"] { display: none; }
.project-page[aria-label="Cosmoscow Auction"] { --text-right: .083; }
.project-page[aria-label="Cosmoscow Auction"] .section-label + p { margin-top: 3.7em; }
.project-page[aria-label="Ultima Yandex Go"] { --text-right: .083; }
.project-page[aria-label="Ultima Yandex Go"] .section-label + p { margin-top: 3.7em; }
.project-page[aria-label=".Sense Monolith"] { --text-right: .083; }
.project-page[aria-label=".Sense Monolith"] .project-section + .project-section .section-label + p { margin-top: 3.7em; }
/* Its three-line scope is set smaller and tighter, and starts further left. */
.project-page[aria-label=".Sense Monolith"] .project-scope,
.project-page[aria-label="Fashion Rebels"] .project-scope {
  left: 67.1%;
  top: 7.616em;
  font-size: 1em;
  line-height: 1.06;
}
.project-page[aria-label="Fashion Rebels"] { --text-right: .083; }
.project-page[aria-label="Fashion Rebels"] .project-section + .project-section .section-label + p { margin-top: 4.1em; }
/* Practical Alchemy: the logotype closes the first section, above label 02. */
.project-page[aria-label="Practical Alchemy Zine"] { --text-right: .083; }
.project-logo--alchemy { width: 61.8%; margin: 8.4em 0 0 20.3%; }
.project-page[aria-label="Practical Alchemy Zine"] .project-section + .project-section .section-label + p { margin-top: 3.7em; }
@media (max-width: 900px) { .bookmark { font-size: calc(var(--body-size) * 1.12); } }
@media (max-width: 900px) {
  :root { --project-width: 76vw; }
  .project-photos { gap: 5vw; padding: 3vw 3vw 5vw; }
  .project-text { padding: 2.2em calc(var(--project-width) * .07) 5em; font-size: var(--body-size); }
  .page-back .project-photos { --sheet-width: 76vw; }
  .project-title { font-size: calc(var(--name-size) * .82); }
  .project-scope { position: static; margin-top: 1.4em; margin-left: 38%; }
  .section-label,
  .project-section + .project-section .section-label { margin-top: 3.75em; }
}
@media (max-width: 900px) {
    .works-page { overflow-y: auto; overscroll-behavior: contain; }
  .works-content { min-width: 0; }
}

/* All client groups share one grid cell: changing names never shifts the page. */
.client-rotation { display: grid; margin-top: 1.45em; }
.client-frame {
  grid-area: 1 / 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0; padding-inline: 1%; column-gap: .3em; row-gap: .2em;
  font-family: Anaktoria, Georgia, serif; font-size: 1.647em; line-height: 1;
  opacity: 0; visibility: hidden; transition: opacity 800ms ease, visibility 800ms;
}
.client-frame.is-current { opacity: 1; visibility: visible; }
.client-frame li { grid-column: span 2; align-self: baseline; }
.client-frame li:nth-child(n+4) { grid-column: span 3; }
.client-frame--two-first li { grid-column: span 2; }
.client-frame--two-first li:nth-child(-n+2) { grid-column: span 3; }
.client-frame--two-first li:nth-child(n+3) { grid-column: span 2; }
.client-frame sup { font-size: .645em; vertical-align: .4em; }
@media (min-width: 901px) {
  /* The Figma composition is deliberately asymmetric. Each rotation frame
     gets its own fixed placement while all three keep the same footprint. */
  .client-frame {
    grid-template-columns: repeat(100, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    padding-inline: 0;
    column-gap: 0;
  }
  .client-frame li { justify-self: start; }
  .client-frame[start="1"] li:nth-child(1) { grid-column: 5 / span 22; grid-row: 1; }
  .client-frame[start="1"] li:nth-child(2) { grid-column: 32 / span 46; grid-row: 1; }
  .client-frame[start="1"] li:nth-child(3) { grid-column: 82 / span 19; grid-row: 1; }
  .client-frame[start="1"] li:nth-child(4) { grid-column: 22 / span 30; grid-row: 2; }
  .client-frame[start="1"] li:nth-child(5) { grid-column: 53 / span 36; grid-row: 2; }

  .client-frame[start="6"] li:nth-child(1) { grid-column: 10 / span 34; grid-row: 1; }
  .client-frame[start="6"] li:nth-child(2) { grid-column: 49 / span 52; grid-row: 1; }
  .client-frame[start="6"] li:nth-child(3) { grid-column: 5 / span 44; grid-row: 2; }
  .client-frame[start="6"] li:nth-child(4) { grid-column: 53 / span 18; grid-row: 2; }
  .client-frame[start="6"] li:nth-child(5) { grid-column: 75 / span 26; grid-row: 2; }

  .client-frame[start="11"] li:nth-child(1) { grid-column: 10 / span 25; grid-row: 1; }
  .client-frame[start="11"] li:nth-child(2) { grid-column: 39 / span 40; grid-row: 1; }
  .client-frame[start="11"] li:nth-child(3) { grid-column: 79 / span 22; grid-row: 1; }
  .client-frame[start="11"] li:nth-child(4) { grid-column: 19 / span 32; grid-row: 2; }
  .client-frame[start="11"] li:nth-child(5) { grid-column: 54 / span 40; grid-row: 2; }
}
/* Match the actual dial diameter, not the files’ unequal transparent canvases.
   Two and a half seconds per artwork, including a crisp .2-second crossfade.
   Pausing the CSS timeline freezes even a transition already in progress. */
.resume-clock { position: relative; aspect-ratio: 1; outline-offset: 8px; }
.resume-clock:focus-visible { outline: 1px solid var(--ink); border-radius: 50%; }
.clock-frame {
  position: absolute; left: 50%; top: 50%; width: var(--clock-width); height: auto;
  transform: translate(var(--clock-x, -50%), var(--clock-y, -50%));
  opacity: 0; animation: clock-crossfade 7.5s linear infinite both;
  animation-play-state: paused; pointer-events: none;
}
.clock-frame:nth-child(1) { --clock-width: 145%; --clock-x: -49.724%; animation-delay: -.2s; }
.clock-frame:nth-child(2) { --clock-width: 111.42%; animation-delay: 2.3s; }
.clock-frame:nth-child(3) { --clock-width: 112.06%; --clock-x: -50%; --clock-y: -50%; animation-delay: 4.8s; }
.resume-clock.is-playing:not(:hover):not(:focus-within) .clock-frame { animation-play-state: running; }
@keyframes clock-crossfade {
  0% { opacity: 0; }
  2.666667%, 33.333333% { opacity: 1; }
  36%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .clock-frame { animation: none; opacity: 0; }
  .clock-frame:first-child { opacity: 1; }
}
@media (max-width: 900px) {
  .identity-name { height: 6.1em; }
  .client-frame { font-size: 1.3em; }
  .client-frame li { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .client-frame { transition: none; }
}

/* The enlarged photographs use the original files at full opacity. */
.project-photos img { cursor: zoom-in; }
.project-photos img:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.photo-viewer {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 32px 0; border: 0; background: transparent; color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain; cursor: zoom-out;
}
.photo-viewer::backdrop {
  background: rgb(244 244 244 / .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.photo-viewer-strip { display: grid; justify-items: center; gap: 32px; }
.photo-viewer-strip img {
  display: block; width: auto; height: auto;
  max-width: min(660px, 58vw); max-height: calc(100dvh - 64px);
  object-fit: contain; opacity: 1; cursor: default;
}
.photo-viewer-close {
  position: fixed; top: 16px; right: 20px; z-index: 1; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgb(244 244 244 / .85); color: #555;
  font: 32px/1 Arial, sans-serif; cursor: pointer;
}
.portrait-viewer {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; cursor: zoom-out;
}
.portrait-viewer::backdrop {
  background: rgb(244 244 244 / .22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.portrait-viewer-heading {
  position: absolute; z-index: 1; color: var(--ink); text-align: center; pointer-events: none;
}
.portrait-viewer-heading .identity { margin-top: 0; }
.portrait-viewer-heading .identity-name { cursor: default; }
.portrait-viewer > img {
  position: absolute; left: calc(var(--profile-width) / 2); top: 34dvh;
  display: block; width: calc(var(--profile-width) * .52); height: auto; max-width: none;
  transform: translateX(-50%); opacity: .88; cursor: default;
  box-shadow: 0 7px 20px rgb(0 0 0 / .08);
}
@media (max-width: 900px) {
  .photo-viewer { padding-top: 64px; }
  .photo-viewer-strip { gap: 20px; }
  .photo-viewer-strip img { max-width: 76vw; max-height: calc(100dvh - 96px); }
}

/* Landscape phones keep the complete desktop book visible. */
@media (max-width: 900px) and (orientation: landscape) {
  :root {
    --profile-width: 43.5vw; --preview-width: 28.1vw; --project-width: 28.1vw;
    --name-size: 3.02vw; --serif-size: 1.05vw; --body-size: max(6px, .73vw);
    --small-size: max(6px, .68vw); --digit-gap: .5vw;
  }
  .profile-content { padding-inline: 0; font-size: var(--body-size); }
  .resume-list { column-gap: 2.6em; }
  .resume-clock { width: 26%; }
  .introduction br, .resume-note br { display: initial; }
  .resume-contacts { padding-inline: 7%; gap: 0; }
  .resume-contacts span { font-size: .94em; }
  .project-photos { gap: 2.34vw; padding: .78vw .88vw 2.34vw; }
  .project-photos--tight { gap: .95vw; padding: 0 .9vw .95vw; }
  .project-text { padding: 1.94em calc(var(--project-width) * var(--text-right, .105)) 6em calc(var(--project-width) * .039); font-size: max(6px, .73vw); }
  .page-back .project-photos { --sheet-width: 28.1vw; }
  .project-title { font-size: 4.085em; }
  .project-scope { position: absolute; margin: 0; }
  .photo-viewer-strip img { max-width: min(660px, 58vw); max-height: calc(100dvh - 64px); }
}

/* Mobile typography: add 10% breathing room without changing desktop. */
@media (max-width: 900px) {
  .school-name {
    text-decoration: none;
  }

  .profession,
  .resume-label,
  .resume-contacts span,
  .materia-progress-label,
  .client-frame {
    line-height: 1.1;
  }

  .resume-list {
    line-height: 1.265;
  }

  .introduction,
  .resume-note {
    line-height: 1.144;
  }

  .studio-list small,
  .project-scope {
    line-height: 1.32;
  }

  .works-title {
    line-height: 1.155;
  }

  .project-title {
    line-height: .869;
  }

  .mivra-scope,
  .materia-scope,
  .sense-scope,
  .fashion-scope {
    line-height: 1.166;
  }

  .inout-scope {
    line-height: 1.452;
  }

  .section-label,
  .project-text p {
    line-height: 1.232;
  }

  .bookmark-note {
    line-height: 1.265;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .portrait-copyright,
  .portrait-profession {
    line-height: 1.1;
  }

  .portrait-name {
    height: 182px;
    line-height: .869;
  }

  .portrait-rotate,
  .portrait-game-copy {
    line-height: 28.82px;
  }

  .portrait-game-title {
    line-height: 33px;
  }
}