/* ==========================================================
   Katérina Vinciguerra — personal website
   Palette: pure white · ivory · champagne gold (+ ink for text)
   Typefaces: Bodoni Moda (display) · Jost (text)
   ========================================================== */

:root {
  --white:     #FFFFFF;   /* pure white: the page              */
  --ivory:     #F8F4EA;   /* ivory: the figure, the notice, the footer */
  --gold:      #A8874E;   /* champagne gold: names, rules, drawing     */
  --gold-deep: #86683A;   /* champagne gold for small text (readable)  */
  --ink:       #1C1A17;   /* text                               */
  --grey:      #6B6760;   /* secondary text                     */

  --rule:    rgba(28, 26, 23, .14);
  --display: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --text:    "Jost", "Futura", "Avenir Next", -apple-system, sans-serif;
  --gutter:  clamp(20px, 5vw, 72px);
  --wrap:    1200px;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 350;
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(168, 135, 78, .26); }
.ic { width: 1em; height: 1em; display: block; flex: none; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gold);
  text-underline-offset: .28em;
  transition: color .3s ease;
}
a:hover { color: var(--gold-deep); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.skip { position: absolute; left: 16px; top: -80px; background: var(--ink); color: var(--white); padding: 8px 14px; z-index: 10; }
.skip:focus { top: 16px; }

/* ---------- masthead ---------- */
.masthead {
  max-width: var(--wrap); margin: 0 auto;
  padding: 30px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px 40px;
  flex-wrap: wrap;
}
.monogram {
  font: 400 21px/1 var(--display);
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--ink);
}
.monogram span { color: var(--gold); font-size: .42em; vertical-align: .45em; margin: 0 .5em; }
.masthead nav { display: flex; gap: clamp(20px, 3.4vw, 44px); }
.masthead nav a,
.colophon__links a {
  font-size: 11.5px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  position: relative; padding: 6px 0;
}
.masthead nav a::after,
.colophon__links a::after {
  content: ""; position: absolute; left: 0; right: .24em; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.masthead nav a:hover, .colophon__links a:hover { color: var(--ink); }
.masthead nav a:hover::after, .colophon__links a:hover::after { transform: scaleX(1); }

main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(40px, 8vw, 110px); }

.name {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(50px, 12.2vw, 170px);
  line-height: .98;
  letter-spacing: -.012em;
  font-optical-sizing: auto;
}
.name__line { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.14em; }
.name__line > span { display: inline-block; }
.name__line--last { font-style: italic; padding-left: clamp(0px, 11vw, 190px); }

.hero__rule {
  height: 1px; background: var(--gold); margin-top: clamp(22px, 3vw, 36px);
  transform-origin: left;
}

.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 32px; padding-top: 22px;
}
.role {
  margin: 0;
  font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; font-weight: 400;
}
.role span { white-space: nowrap; }
.role .dash { color: var(--gold); margin: 0 .55em; }
.links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.links a { text-decoration: none; display: block; }
.links .ic { font-size: 17px; color: var(--ink); transition: color .3s ease; }
.links a:hover .ic { color: var(--gold); }
.links .cv {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .2em; line-height: 1;
  color: var(--ink); transition: color .3s ease;
}
.links .cv .ic { width: .8em; height: 1.05em; font-size: 14px; color: var(--gold); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.links .cv:hover { color: var(--gold-deep); }
.links .cv:hover .ic { transform: translateY(2px); }
.links .mail {
  font-size: 14.5px; letter-spacing: .03em; font-weight: 400;
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .35em;
}

.hero__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas: "bio bio bio bio bio bio scene scene scene scene scene scene";
  column-gap: 24px;
  margin-top: clamp(56px, 8vw, 104px);
  align-items: start;
}
.bio   { grid-area: bio; }
.scene { grid-area: scene; }

.bio p { margin: 0 0 1.2em; max-width: 60ch; }
.bio__lead { font-size: 19px; line-height: 1.75; }

/* the animated figure, printed on an ivory plate */
.scene { margin: 6px 0 0 clamp(0px, 3vw, 40px); }
.scene canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  background: var(--ivory);
  touch-action: pan-y;
}
.scene figcaption {
  margin-top: 16px; text-align: center;
  font-family: var(--display); font-style: italic; font-size: 17px; color: var(--grey);
}

/* ---------- chapters ---------- */
.chapter { padding-top: clamp(96px, 13vw, 170px); }
.chapter__title {
  margin: 0 0 clamp(36px, 5vw, 64px);
  font-family: var(--display); font-weight: 400;
  font-size: clamp(44px, 7.4vw, 100px); line-height: 1; letter-spacing: -.015em;
  font-optical-sizing: auto;
}

/* one entry = a row of the editorial grid, separated by hairlines */
.entry {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  padding: clamp(32px, 4vw, 48px) 0 clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--rule);
}
.entry__side { grid-column: 1 / span 4; padding-right: 24px; }
.entry__main { grid-column: 5 / span 8; }
.entry p { margin: 0 0 1em; }

.entry__partner {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 2.15vw, 29px); line-height: 1.22;
  color: var(--gold);
  margin-bottom: 14px !important;
}
.entry__status,
.entry__note {
  font-family: var(--display); font-style: italic; font-size: 16.5px; line-height: 1.5;
  color: var(--grey);
}
.entry p.entry__note { margin-top: 18px; }

.entry h3 {
  margin: 0 0 20px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.16;
  font-variation-settings: "opsz" 20;
}
.tags {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 400;
  color: var(--grey); margin-top: 22px !important;
}
.tags span { color: var(--gold); margin: 0 .7em; }

.weather {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 30px;
}
.weather li { display: flex; align-items: center; gap: 9px; font-size: 15.5px; color: var(--ink); }
.weather .ic { font-size: 21px; color: var(--gold); }

.more { margin-top: 24px !important; font-size: 15.5px; color: var(--grey); }
.more a { color: var(--ink); }

.papers__lead {
  margin-top: 32px !important; margin-bottom: 14px !important;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--grey);
}
.papers { list-style: none; counter-reset: p; margin: 0; padding: 0; }
.papers li {
  counter-increment: p; position: relative;
  padding: 16px 0 16px 2.4em; border-top: 1px solid var(--rule);
}
.papers li:last-child { border-bottom: 1px solid var(--rule); }
.papers li::before {
  content: counter(p, lower-roman) ".";
  position: absolute; left: 0; top: 16px;
  font-family: var(--display); font-style: italic; font-size: 19px; color: var(--gold);
}
.papers a {
  font-family: var(--display); font-size: 20px; line-height: 1.35; font-variation-settings: "opsz" 14;
  text-decoration: none; background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .6s cubic-bezier(.2, .7, .2, 1), color .3s ease;
}
.papers a:hover { background-size: 100% 1px; color: var(--ink); }
.venue { display: block; margin-top: 4px; font-size: 13.5px; color: var(--grey); letter-spacing: .02em; }

/* the general warning: dashed champagne frame, its title set into the top edge */
.notice {
  position: relative;
  margin: clamp(64px, 8vw, 104px) auto 0; max-width: 820px;
  padding: 46px clamp(22px, 5vw, 56px) 38px;
  border: 1px dashed var(--gold);
  background: var(--ivory);
  text-align: center;
}
.notice__label {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  margin: 0; padding: 0 18px; white-space: nowrap;
  font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 450; line-height: 2;
  color: var(--gold-deep);
  background: linear-gradient(var(--white) 50%, var(--ivory) 50%);
}
.notice__text { margin: 0; font-size: 18px; line-height: 1.75; }

/* wins */
.entry--win { align-items: center; }
.rank {
  margin: 0 !important;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(64px, 8.4vw, 118px); line-height: .9; letter-spacing: -.02em;
  color: var(--gold);
  font-variation-settings: "opsz" 96;
  white-space: nowrap;
}
.rank sup { font-size: .3em; font-style: italic; letter-spacing: 0; vertical-align: top; position: relative; top: .25em; margin-left: .04em; }
.rank__sep { font-style: italic; font-size: .42em; color: var(--grey); margin: 0 .25em; vertical-align: .5em; }
.entry--win h3 { margin-bottom: 12px; }
.entry--win:last-of-type { border-bottom: 1px solid var(--rule); }

/* ---------- "pages" mode: About, Collaborations, Competitions one at a time ---------- */
.pager { display: none; }
[data-mode="pages"] .pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-top: clamp(96px, 12vw, 150px);
  padding-top: clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--rule);
}
.pager a { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); }
.pager__prev { align-items: flex-start; text-align: left; }
.pager__next { align-items: flex-end; text-align: right; grid-column: 2; }
.pager__label { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); }
.pager__title {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 3.2vw, 46px); line-height: 1.2;
  white-space: nowrap; padding-bottom: .1em;
}
.pager__arrow { width: 1.1em; height: .3em; flex: none; color: var(--gold); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pager a:hover { color: var(--ink); }
.pager__next:hover .pager__arrow { transform: translateX(12px); }
.pager__prev:hover .pager__arrow { transform: translateX(-12px); }
@media (max-width: 600px) {
  [data-mode="pages"] .pager { grid-template-columns: 1fr; gap: 40px; }
  .pager__next { grid-column: 1; }
  .pager > span:empty { display: none; }
  .pager__title { font-size: clamp(24px, 7.4vw, 30px); }
}

[data-mode="pages"].js .page { display: none; }
[data-mode="pages"].js[data-page="about"] #about,
[data-mode="pages"].js[data-page="collaborations"] #collaborations,
[data-mode="pages"].js[data-page="competitions"] #competitions { display: block; }
[data-mode="pages"] .chapter { padding-top: clamp(40px, 8vw, 110px); }
[data-mode="pages"] .masthead nav a[aria-current="page"]::after { transform: scaleX(1); }
[data-mode="pages"] .colophon { margin-top: clamp(80px, 10vw, 140px); }
.page { transition: opacity .38s ease, transform .38s ease; }
.page.is-leaving { opacity: 0; transform: translateY(-10px); }

/* ---------- colophon (ivory band) ---------- */
.colophon {
  margin-top: clamp(120px, 14vw, 200px);
  padding: 64px var(--gutter) 56px;
  text-align: center;
  background: var(--ivory);
}
.colophon .monogram { font-size: 30px; }
.colophon__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 40px; margin: 34px 0 20px; }
.colophon__note { margin: 0; font-family: var(--display); font-style: italic; font-size: 16px; color: var(--grey); }

/* ---------- motion ---------- */
.js .name__line > span { transform: translateY(105%); }
.js.is-loaded .name__line > span { transform: none; transition: transform 1.3s cubic-bezier(.2, .75, .15, 1); }
.js.is-loaded .name__line--last > span { transition-delay: .14s; }
.js .hero__rule { transform: scaleX(0); }
.js.is-loaded .hero__rule { transform: scaleX(1); transition: transform 1.6s .35s cubic-bezier(.65, 0, .25, 1); }
.js .hero__meta, .js .hero__body { opacity: 0; }
.js.is-loaded .hero__meta, .js.is-loaded .hero__body { opacity: 1; transition: opacity 1.4s .8s ease; }

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero__body { grid-template-areas: "scene" "bio"; grid-template-columns: 1fr; }
  .scene { max-width: 600px; width: 100%; margin: 0 auto 56px; }
  .entry__side { grid-column: 1 / -1; padding-right: 0; margin-bottom: 18px; }
  .entry__main { grid-column: 1 / -1; }
  .entry--win .entry__side { margin-bottom: 8px; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .masthead { justify-content: center; padding-top: 24px; padding-bottom: 8px; }
  .masthead nav { width: 100%; justify-content: center; gap: 22px; }
  .masthead nav a { font-size: 10.5px; letter-spacing: .2em; }
  .hero__meta { flex-direction: column; align-items: flex-start; }
  .role { line-height: 2; }
  .bio__lead { font-size: 18px; }
  .notice__label { font-size: 10.5px; letter-spacing: .2em; padding: 0 12px; }
  .notice__text { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .name__line > span, .js .hero__rule, .js .hero__meta, .js .hero__body, .js .reveal {
    transform: none !important; opacity: 1 !important; transition: none !important;
  }
}

@media print {
  .masthead nav, .scene { display: none; }
  .js .reveal, .js .hero__meta, .js .hero__body { opacity: 1; transform: none; }
  .hero__body { grid-template-areas: "bio"; grid-template-columns: 1fr; }
}