@font-face {
  font-family: Peyda;
  src: url("peyda-medium.ttf") format("truetype");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: Peyda;
  src: url("peyda-bold.ttf") format("truetype");
  font-weight: 600 900;
  font-display: swap;
}

@font-face {
  font-family: Peyda;
  src: url("peyda-light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Aginoe Sans";
  src: url("aginoe-sans-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Aginoe Sans";
  src: url("aginoe-sans-bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #111110;
  --surface: #191817;
  --paper: #f6f0e8;
  --mute: #c2b9ad;
  --line: #37332e;
  --accent: #ff775e;
  --measure: 73rem;
  --latin-font: "Aginoe Sans", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 500 1rem/1.85 Peyda, Tahoma, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
p, h1, h2, figure { margin: 0; }
p + p { margin-top: .8em; }
img { display: block; max-width: 100%; height: auto; }
h1, h2 { font-weight: 800; }
h2 { font-size: clamp(2.15rem, 5.3vw, 4.25rem); line-height: 1.2; margin-top: .7rem; }
section[id] { scroll-margin-top: 1.5rem; }
.wrap { width: min(calc(100% - 5rem), var(--measure)); margin-inline: auto; }
.skip { position: fixed; z-index: 3; inset: .7rem .7rem auto auto; padding: .5rem 1rem; background: var(--paper); color: var(--ink); transform: translateY(-160%); }
.skip:focus { transform: none; }
.masthead { min-height: 5.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; border-bottom: 1px solid var(--line); }
.signature { display: block; width: clamp(8rem, 16vw, 11rem); flex: 0 0 auto; }
.signature img { width: 100%; }
.footer small { display: block; text-align: right; color: var(--mute); font: 400 .61rem/1.65 var(--latin-font); letter-spacing: .11em; }
nav { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem clamp(.5rem, 2.1vw, 1.7rem); color: var(--mute); }
nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.nav-contact { color: var(--paper); gap: .35rem; }
.nav-contact span, .red { color: var(--accent); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(1rem, 4vw, 4rem); padding-block: 2.2rem 3.5rem; }
.eyebrow, .index { display: flex; align-items: center; gap: .7rem; color: var(--mute); font-size: .88rem; }
.eyebrow span { width: 1.65rem; height: 1px; background: var(--accent); }
.hero h1 { font-size: clamp(3.4rem, 7.5vw, 7.1rem); line-height: 1.04; margin-block: .36em .19em; }
.hero-latin { text-align: right; color: var(--paper); font: 700 clamp(.72rem, 1.65vw, 1.04rem)/1.5 var(--latin-font); letter-spacing: .13em; text-transform: uppercase; }
.roles { color: var(--paper); font-size: clamp(.94rem, 1.6vw, 1.15rem); margin-top: 1.4rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 3.1rem; padding: .45rem 1.05rem; font-weight: 800; margin-top: 1.45rem; transition: background .2s ease, color .2s ease; }
.primary { background: var(--accent); color: #1d1110; }
.primary:hover { background: var(--paper); color: #1d1110; }
.hero-visual { position: relative; background: #0b0b0a; border: 1px solid var(--line); }
.hero-visual img { width: 100%; aspect-ratio: 1.05; object-fit: cover; object-position: 50% 33%; }
.hero-visual figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; border-top: 1px solid var(--line); }
figcaption { color: var(--mute); font-size: .82rem; }
.hero-visual figcaption span:last-child { font: 700 .62rem/1.3 var(--latin-font); letter-spacing: .14em; }
.section-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 7vw, 6rem); }
.about, .work, .gallery-section { padding-block: clamp(3.1rem, 8vw, 6.3rem); border-top: 1px solid var(--line); }
.index b { color: var(--accent); font-size: .85rem; }
.index span { width: 1.35rem; height: 1px; background: currentColor; opacity: .38; }
.copy { max-width: 39rem; color: var(--mute); }
.lead { color: var(--paper); font-size: clamp(1.12rem, 2.22vw, 1.48rem); line-height: 1.7; }
.book-section { background: radial-gradient(ellipse at 17% 70%, #351e19 0%, transparent 57%), var(--surface); border-block: 1px solid var(--line); }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: center; gap: 2rem clamp(2rem, 8vw, 7rem); padding-block: clamp(3rem, 8vw, 6.3rem); }
.book-copy > p:not(.lead, .latin, .index), details p { color: var(--mute); }
.latin { text-align: right; color: var(--accent); margin-block: .5rem 1.6rem; font: 700 .79rem/1.5 var(--latin-font); letter-spacing: .22em; }
.book-visual { width: min(100%, 20rem); justify-self: center; }
.book-visual > img { width: 100%; box-shadow: -12px 16px 38px #0b0706ba; }
.book-visual figcaption { margin: 1rem auto 0; width: 76%; }
details { margin-top: 1.1rem; border-top: 1px solid var(--line); }
summary { cursor: pointer; padding-block: .75rem; }
summary:hover { color: var(--accent); }
details > p { margin-bottom: .75rem; }
.work-list { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.work-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: .55rem 1rem; min-height: 4.9rem; padding: .8rem .15rem; border-bottom: 1px solid var(--line); }
.work-type, .work-desc { color: var(--mute); font-size: .92rem; }
.work-row strong { font-size: clamp(1.08rem, 2vw, 1.34rem); }
.work-row .arrow { color: var(--accent); min-width: 1.25rem; text-align: center; }
.work-details { margin: 0; border: 0; }
.work-details summary::-webkit-details-marker { display: none; }
.work-details[open] summary .arrow { transform: rotate(45deg); }
.work-details > p { padding-block: .75rem; padding-inline: .15rem; margin: 0; border-bottom: 1px solid var(--line); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.55rem; }
.gallery-link { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.gallery-link img { width: 100%; height: clamp(12rem, 30vw, 23rem); object-fit: cover; object-position: center 44%; transition: transform .28s ease; }
.gallery-link:hover img { transform: scale(1.025); }
.gallery-link span { position: absolute; bottom: .6rem; left: .6rem; width: 2rem; height: 2rem; display: grid; place-items: center; background: var(--ink); }
.gallery figcaption { margin-top: .5rem; }
.contact { background: var(--surface); border-block: 1px solid var(--line); padding-block: clamp(2.8rem, 7vw, 5rem); }
.contact-note { color: var(--mute); }
.footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-block: 1.4rem; }
.footer a { color: var(--mute); padding-block: .45rem; }
.footer a:hover { color: var(--accent); }
.lightbox { max-width: calc(100% - 2rem); max-height: calc(100% - 2rem); margin: auto; padding: 0; border: 1px solid var(--line); background: var(--ink); overflow: visible; }
.lightbox::backdrop { background: #000d; }
.lightbox img { max-width: 100%; max-height: 84dvh; width: auto; height: auto; object-fit: contain; }
.lightbox button { position: absolute; z-index: 1; top: .45rem; left: .45rem; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); background: var(--ink); color: var(--paper); font-size: 1.6rem; cursor: pointer; }
.about-portrait { width: min(100%, 15rem); margin-top: 1.5rem; }
.about-portrait img { border: 1px solid var(--line); }
.about .copy { align-self: center; }
.roles { font-weight: 300; }
.teaser { max-width: 52rem; margin: 0 auto clamp(2.8rem, 7vw, 5.5rem); border: 1px solid var(--line); }
.teaser summary { display: block; padding: 0; }
.teaser summary::-webkit-details-marker { display: none; }
.teaser summary img { width: 100%; }
.teaser-label { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; }
.play-icon { color: var(--accent); font-size: .8rem; }
.teaser-duration { margin-inline-start: auto; color: var(--mute); font-size: .85rem; }
.teaser video { display: block; width: 100%; aspect-ratio: 16/9; background: #000; }
.teaser noscript a { display: inline-block; padding: .75rem; text-decoration: underline; }
@media (max-width: 820px) {
  .wrap { width: calc(100% - 3rem); }
  .hero { gap: 1.5rem; }
  .hero h1 { font-size: clamp(3rem, 8.9vw, 5.5rem); }
  .hero-visual img { aspect-ratio: .84; object-position: 50% 30%; }
}
@media (max-width: 620px) {
  .wrap { width: calc(100% - 2rem); }
  .masthead { display: block; padding-block: .75rem .05rem; }
  nav { margin-top: .3rem; justify-content: space-between; font-size: .93rem; gap: .15rem .42rem; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 1.4rem; padding-block: 1.7rem 2.25rem; }
  .hero h1 { font-size: clamp(3rem, 12vw, 4.5rem); }
  .hero-visual img { aspect-ratio: 1.16; object-position: 50% 30%; }
  .roles { margin-top: .85rem; }
  .about-portrait { width: min(60%, 12rem); }
  .button { margin-top: 1rem; }
  .section-grid, .book-grid, .gallery { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .book-visual { width: min(78%, 17rem); margin-top: .35rem; }
  .work-row { grid-template-columns: 1fr auto; gap: .15rem .75rem; }
  .work-row > :not(.arrow) { grid-column: 1; }
  .work-row .arrow { grid-column: 2; grid-row: 1 / span 3; }
  .gallery-link img { height: auto; aspect-ratio: 1.48; }
  .footer { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}