/* soft "braking" so each section settles into full view, at the device's normal scroll speed */
html:has(body.home) { scroll-snap-type: y proximity; }
.hero, .archivo, .about, .menu { scroll-snap-align: start; }

/* ================= 1. HERO ================= */
.hero {
  position: relative; height: 100svh; min-height: 520px;
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  background: #1a1512;
}
/* where the next picture waits, and where the outgoing one goes */
.hero-half { position: relative; overflow: hidden; --park: translate3d(0, 100%, 0); --leave: translate3d(0, -18%, 0); }
.hero-half img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: var(--park);
  will-change: transform;
}
.hero-half img.is-current { transform: translate3d(0, 0, 0); }
.hero-half img.is-leaving { transform: var(--leave); filter: brightness(.7); }
.hero-half img.is-moving { transition: transform 1.05s var(--ease-io), filter 1.05s var(--ease-io); }
.hero-half[data-side="b"] img.is-moving { transition-delay: .09s; }
.hero-half img.is-current.is-moving { z-index: 2; }
/* desktop, laptop and iPad: the left pictures move up, the right pictures move down */
.hero-half[data-side="b"] { --park: translate3d(0, -100%, 0); --leave: translate3d(0, 18%, 0); }

.monogram {
  position: absolute; inset: 0; z-index: 5; margin: 0; pointer-events: none;
  display: grid; place-items: center;
  color: #f3eee6;
}
/* hand-drawn in the AOI manner: heavy stems flaring into wide hairline serifs */
.monogram svg { height: min(56svh, 112vw); width: auto; filter: drop-shadow(0 2px 18px rgba(0,0,0,.12)); }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  /* phones: the top picture swipes off to the left, the bottom one to the right */
  .hero-half[data-side="a"] { --park: translate3d(100%, 0, 0); --leave: translate3d(-100%, 0, 0); }
  .hero-half[data-side="b"] { --park: translate3d(-100%, 0, 0); --leave: translate3d(100%, 0, 0); }
  .hero-half img.is-leaving { filter: none; }
  .monogram svg { height: min(46svh, 92vw); }
}

/* ================= 2. ARCHIVO VISUAL ================= */
.archivo {
  padding: calc(var(--nav-h) + 6vh) var(--gutter) 10vh;
  background: var(--paper);
}
.archivo-head { text-align: center; margin-bottom: clamp(36px, 7vh, 80px); }
.archivo-head h2 {
  margin: 0; font-family: "KC Sans", sans-serif; font-weight: 300;
  font-size: clamp(30px, 4.4vw, 64px); letter-spacing: .06em; text-transform: uppercase; line-height: 1;
}
.archivo-head p {
  margin: 14px 0 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
}
.archivo-row {
  display: grid; grid-template-columns: 1.2fr 1.4fr .95fr 1.1fr; gap: clamp(10px, 1.4vw, 20px);
  align-items: start; max-width: 1500px; margin: 0 auto;
}
.tile { position: relative; overflow: hidden; background: #e8e3db; }
.tile:nth-child(1) { aspect-ratio: 4 / 5; }
.tile:nth-child(2) { aspect-ratio: 3 / 4; }
.tile:nth-child(3) { aspect-ratio: 4 / 3; } /* the smallest of the four, and landscape */
.tile:nth-child(4) { aspect-ratio: 4 / 5; } /* top edge in line with the others */
.tile > * {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s var(--ease-out);
}
.tile > .is-on { opacity: 1; }

/* scene caption, a hairline that fills over the scene, and the count */
.archivo-meta {
  display: grid; grid-template-columns: minmax(80px, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 48px);
  max-width: 1500px; margin: clamp(22px, 4vh, 40px) auto 0;
  font-family: "KC Mono", monospace; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
}
.archivo-meta p { margin: 0; }
.archivo-scene .n { color: var(--ink-soft); }
.archivo-scene .t { display: inline-block; animation: cap-in .7s var(--ease-out) both; }
@keyframes cap-in { from { opacity: 0; transform: translateY(5px); } }
.archivo-count { text-align: right; color: var(--ink-soft); }
.archivo-count .c { color: var(--ink); }
.archivo-progress { height: 1px; background: rgba(27, 23, 20, .14); overflow: hidden; }
.archivo-progress i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.archivo-progress.run i { animation: archive-fill var(--hold, 4s) linear forwards; }
@keyframes archive-fill { to { transform: scaleX(1); } }

@media (max-width: 760px) {
  .archivo-row { grid-template-columns: 1fr 1fr; }
  .archivo-meta { font-size: 9.5px; }
}

/* ================= 3. ABOUT ME ================= */
.about { position: relative; height: 170svh; }
.about-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
.about-bg { position: absolute; inset: -40px; }
.about-bg .bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s var(--ease-out); transform: scale(1.04);
}
.about-bg .bg.is-on { opacity: 1; }
.about-bg .grain {
  position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.about-cards {
  position: relative; z-index: 2; align-self: start;
  display: flex; gap: clamp(28px, 6vw, 120px); align-items: stretch;
  margin-top: calc(var(--nav-h) + 3svh); padding: 0 var(--gutter);
}
.about-card {
  width: min(470px, 38vw); min-height: 62svh;
  background: var(--card); color: var(--ink);
  padding: 32px 32px 150px;
  font-family: "KC Serif", "Times New Roman", Times, serif; font-size: 15px; line-height: 1.55;
  box-shadow: 0 30px 60px -30px rgba(20, 12, 8, .45);
  transition: filter .5s var(--ease-out), opacity .5s var(--ease-out), transform .5s var(--ease-out);
  outline: none; cursor: default;
}
.about-card p { margin: 0 0 1em; }
.about-card .label { font-size: 17px; margin-bottom: 18px; }
.about-cards.has-active .about-card:not(.is-active) { filter: blur(7px); opacity: .62; transform: scale(.985); cursor: pointer; }
/* pointing at the card at the back lifts it towards you and half-clears it, so it reads as clickable
   (set from home.js on mouse/trackpad hover, which also works on an iPad with a trackpad) */
.about-cards.has-active .about-card.is-peek:not(.is-active) {
  filter: blur(1.5px); opacity: .96; transform: translateY(-8px) scale(1.02);
  box-shadow: 0 40px 70px -28px rgba(20, 12, 8, .55);
}

/* hand-drawn "About Me": half on the boxes, half hanging below, like the Atelier reference */
.about-script {
  position: absolute; z-index: 3; margin: 0; pointer-events: none;
  left: 50%; bottom: 0; width: min(800px, 72vw);
  transform: translate(-50%, 50%);
}
.about-script .ink { display: block; }
.about-script .ink svg { display: block; width: 100%; height: auto; transform: rotate(-4deg); }
/* the ink stays crisp: one layer over the photo, plus a layer clipped to each card (home.js), no blending */
.about-script .ink-card { position: absolute; inset: 0; }
.about-cards[data-active="prof"] .about-script .ink-photo { color: #f3eee6; }
.about-cards[data-active="prof"] .about-script .ink-card { color: #1b1714; }
.about-cards[data-active="pers"] .about-script .ink { color: var(--espresso); }

@media (max-width: 760px) {
  .about-cards { width: 100%; padding: 0; margin-top: 0; display: block; height: 100svh; }
  .about-card {
    position: absolute; top: calc(var(--nav-h) + 8px); left: 50%;
    width: 80vw; min-height: 0; height: 64svh; padding: 22px 20px 64px;
    font-size: 13.5px; line-height: 1.5; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-50%);
  }
  .about-card[data-key="pers"] { transform: translateX(34%); }
  .about-cards[data-active="pers"] .about-card[data-key="prof"] { transform: translateX(-134%); }
  .about-cards[data-active="pers"] .about-card[data-key="pers"] { transform: translateX(-50%); }
  .about-cards.has-active .about-card:not(.is-active)[data-key="pers"] { transform: translateX(34%) scale(.96); }
  .about-cards[data-active="pers"] .about-card:not(.is-active)[data-key="prof"] { transform: translateX(-134%) scale(.96); }
  .about-script { bottom: auto; top: calc(var(--nav-h) + 8px + 64svh); width: 94vw; transform: translate(-50%, -50%); }
}

/* ================= 4. MENU ================= */
.menu {
  height: 100svh; min-height: 520px; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 20px) var(--gutter) 40px;
}
.menu { position: relative; overflow: hidden; }
.menu-head { position: absolute; left: 0; right: 0; top: var(--nav-h); pointer-events: none; }
.menu-word {
  margin: 0; text-align: center; white-space: nowrap; user-select: none;
  font-family: "KC Sans", sans-serif; font-weight: 300; font-size: 23.5vw; line-height: .82; letter-spacing: -.02em;
  color: rgba(27, 23, 20, .055);
}
/* the big pale MENU, hand-drawn in the same hand as the KC */
.menu-word-svg { display: block; width: min(80vw, 1400px); height: auto; margin: 2.2vw auto 0; }
.menu-labels {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 6vw;
  display: grid; grid-template-columns: 1fr 1.4fr .6fr; gap: 16px;
  font-family: "KC Mono", monospace; font-weight: 700; font-size: 11px; line-height: 1.25; text-transform: uppercase; letter-spacing: .01em;
}
.menu-labels > :last-child { justify-self: end; }
.menu-corner {
  position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); margin: 0; pointer-events: none;
  font-family: "KC Mono", monospace; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .01em;
}
.menu-corner-l { left: var(--gutter); }
.menu-corner-r { right: var(--gutter); text-align: right; }
.menu-row {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, .8vw, 12px);
  width: min(1500px, 100%); height: 66svh; padding-bottom: 44px;
  background: linear-gradient(rgba(27, 23, 20, .18), rgba(27, 23, 20, .18)) left calc(100% - 12px) / 100% 1px no-repeat;
}
.menu-item {
  position: relative; flex: 1 1 0; min-width: 0; height: 36svh;
  transition: flex .9s var(--ease-io), height .9s var(--ease-io);
  outline-offset: 6px;
}
/* each picture sits in its own frame, with one shared, slightly muted grade so the row reads as a set */
.menu-pic {
  position: absolute; inset: 0; overflow: hidden; background: #ddd7ce;
  box-shadow: 0 1px 0 rgba(27, 23, 20, .06), 0 18px 34px -26px rgba(27, 23, 20, .5);
  transition: box-shadow .9s var(--ease-io);
}
.menu-pic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.82) contrast(.97) brightness(.98);
  transform: scale(1.06);
  transition: filter .9s var(--ease-io), opacity .9s var(--ease-io), transform 1.4s var(--ease-out);
}
/* the number under each strip, on a fine baseline that runs the width of the row */
.menu-num {
  position: absolute; left: 0; top: calc(100% + 12px);
  font-family: "KC Mono", monospace; font-size: 10px; letter-spacing: .04em; color: var(--ink-soft);
  transition: color .5s var(--ease-out);
}
.menu-label {
  position: absolute; left: 0; bottom: calc(100% + 12px);
  font-family: "KC Mono", monospace; font-weight: 700; font-size: 12px; line-height: 1.2;
  text-transform: uppercase; white-space: nowrap; letter-spacing: 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
/* the open picture is shown whole: its width follows its own proportions (set in home.js) */
.menu-item.is-open { flex: 0 0 var(--open-w, 40%); height: var(--open-h, 56svh); }
.menu-item.is-open .menu-label { opacity: 1; transform: none; transition-delay: .25s; }
.menu-item.is-open .menu-pic { box-shadow: 0 1px 0 rgba(27, 23, 20, .06), 0 40px 60px -34px rgba(27, 23, 20, .6); }
.menu-item.is-open .menu-pic img { filter: none; transform: scale(1); }
.menu-item.is-open .menu-num { color: var(--ink); }
/* everything else steps back into monochrome */
.menu-row.has-open .menu-item:not(.is-open) .menu-pic img { filter: grayscale(1) contrast(.92) brightness(1.04); opacity: .78; }

@media (max-width: 760px) {
  .menu-row { height: 70svh; gap: 4px; }
  .menu-word { font-size: 25vw; }
  .menu-word-svg { width: 88vw; margin-top: 4vw; }
  .menu-labels { top: 14vw; grid-template-columns: 1fr 1fr; font-size: 10px; }
  .menu-labels > :nth-child(2) { display: none; }
  .menu-item { height: 30svh; }
  .menu-num { font-size: 9px; top: calc(100% + 10px); }
  .menu-label { font-size: 11px; white-space: normal; width: 44vw; }
}