/* ---------- Abril Palmanovich — portfolio ---------- */

html, body {
  margin: 0; padding: 0;
  background: #FFFFFF;
  color: #1B1A17;
  font-family: Archivo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: #1B1A17; text-decoration: none; }
a:hover { color: #8C4A2F; }
::selection { background: #1B1A17; color: #F2F0EB; }
img { max-width: none; }

@keyframes fadeUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
@keyframes bendPulse { 0%{opacity:0} 18%{opacity:.55} 48%{opacity:1} 82%{opacity:.5} 100%{opacity:0} }

/* ---------- landing ---------- */

.landing {
  position: relative;
  min-height: 100vh; height: 100dvh;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(18px, 3vw, 42px) 6%;
  background: #FFFFFF;
}

.stage-outer {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  container-type: size;
  display: flex; align-items: center; justify-content: center;
}

/* The composition is a fixed 820x490 canvas that only changes scale. Sizing it
   in CSS (instead of measuring in JS) means it is already centred on the first
   paint — no jump from the bottom of the page. */
.stage-box {
  position: relative;
  flex: 0 0 auto;
  width: min(100cqw, calc(100cqh * 820 / 490));
  aspect-ratio: 820 / 490;
  container-type: size;
}
.stage { position: absolute; inset: 0; background: transparent; }

.strip {
  position: absolute;
  background: transparent;
  cursor: pointer;
}
.strip .clip { position: absolute; inset: 0; overflow: hidden; }
.strip .plate {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  user-select: none; pointer-events: none;
}
.plate.cover { z-index: 1; opacity: 1; transition: opacity .45s cubic-bezier(.2,.8,.2,1); }
.plate.hover { z-index: 2; opacity: 0; transition: opacity .45s cubic-bezier(.2,.8,.2,1); }
.strip:hover .plate.cover { opacity: 0; }
.strip:hover .plate.hover { opacity: 1; }

/* The labels hug the artwork: 49px / 762px are the left and right edges of the
   composition inside the 820x490 canvas, so they track it at any scale. */
.name-wrap {
  position: absolute;
  left: 5.9756%;                 /* 49 / 820  — left edge of the composition */
  top: 12.6316%;                 /* top of the first strip */
  z-index: 8; margin: 0; width: auto;
  transform: translateX(calc(-100% - 14px)) rotate(180deg);
  transform-origin: center center;
}
.name {
  display: block;
  font-family: Archivo, sans-serif;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 4.591cqh;           /* spans the height of the first strip */
  text-align: center;
  line-height: 1.02;
  white-space: nowrap;
  writing-mode: vertical-rl;
  color: #1B1A17;
  cursor: pointer;
  transition: color .2s ease;
}
.name:hover { color: #8A857C; }

.about-wrap {
  position: absolute;
  left: calc(92.8478% + 14px);   /* right edge of the composition */
  top: 23.3852%;                 /* top of the last strip */
  z-index: 8; margin: 0; width: auto;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center center;
}
.about-link {
  font-family: Archivo, sans-serif;
  /* scales with the composition like everything else, with a floor so it stays
     readable once the canvas gets phone-sized */
  font-size: clamp(8px, 1.9cqh, 18px);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #4A473F;
  writing-mode: vertical-rl;
  white-space: nowrap;
  padding-left: .5em;
  cursor: pointer;
  transition: color .2s ease;
}
.about-link:hover { color: #8A857C; }

/* ---------- project / book page ---------- */

.project {
  min-height: 100vh; height: 100dvh;
  overflow-x: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(12px, 2vw, 24px);
  animation: fadeUp .4s ease both;
}
.project-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 46% 46%,
    #FFFFFF 0%,
    color-mix(in oklab, #FFFFFF 99.2%, #1B1A17 0.8%) 62%,
    color-mix(in oklab, #FFFFFF 97.4%, #1B1A17 2.6%) 100%);
}
.book-row {
  flex: 1 1 auto; min-height: 0; width: 100%; position: relative;
  clip-path: inset(-40vh 0px -40vh 0px);
  padding: clamp(6px,1.4vw,18px) 0 26px;
  touch-action: pan-y;
  container-type: size;
}

.topbar { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: 0 0 auto; }
.back {
  font-family: Archivo, sans-serif;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: #8A857C; cursor: pointer;
  min-height: 32px; display: flex; align-items: center;
  background: none; border: 0; padding: 0;
}
.back:hover { color: #8C4A2F; }
.topbar-right {
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #8A857C;
}

.book {
  position: absolute;
  left: 11%;
  top: 50%;
  transform: translateY(-50%);
  /* measured against the row's own box, so turning the phone sideways actually
     buys the sheet the width it just gained */
  width: min(81cqw, calc(100cqh * 1.6735));
  aspect-ratio: 984 / 588;
  background: #FFFFFF;
  border-radius: 0 4px 5px 0;
  box-shadow:
    0 26px 46px -36px rgba(27,26,23,.42),
    0 5px 12px -8px rgba(27,26,23,.16),
    0 1px 0 0 rgba(27,26,23,.10),
    0 -1px 0 0 rgba(27,26,23,.06);
  perspective: none;
  perspective-origin: 0% 50%;
}
.book.turning { perspective: 2600px; }

.stub {
  position: absolute; right: 100%; top: 0; bottom: 0; width: 150%;
  z-index: 3; border-radius: 2px 0 0 2px; overflow: hidden; cursor: pointer;
  background:
    linear-gradient(to bottom, rgba(27,26,23,.05) 0%, rgba(27,26,23,0) 7%,
                               rgba(27,26,23,0) 93%, rgba(27,26,23,.055) 100%),
    linear-gradient(to right, color-mix(in oklab, #FFFFFF 98.5%, #1B1A17 1.5%) 0%, #FFFFFF 34%,
      color-mix(in oklab, #FFFFFF 99%, #1B1A17 1%) 78%, color-mix(in oklab, #FFFFFF 95%, #1B1A17 5%) 96%,
      color-mix(in oklab, #FFFFFF 91%, #1B1A17 9%) 100%);
  box-shadow: 0 16px 26px -26px rgba(27,26,23,.30),
              0 1px 0 0 rgba(27,26,23,.07),
              0 -1px 0 0 rgba(27,26,23,.045);
}
.stub::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 100% 100%, rgba(27,26,23,.055), rgba(27,26,23,0) 60%),
    radial-gradient(120% 70% at 100% 0%,  rgba(27,26,23,.045), rgba(27,26,23,0) 62%);
}

:root {
  /* the striations fade out well before the corners, so the stack reads as
     paper rather than as a printed stripe */
  --end-mask: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 1.6%,
              rgba(0,0,0,.85) 4.5%, #000 9%, #000 91%, rgba(0,0,0,.85) 95.5%,
              rgba(0,0,0,.35) 98.4%, rgba(0,0,0,0) 100%);
}

/* ---- fore-edge ----
   Three leaves of the block, each a little shorter and a little further out
   than the one before, with rounded outer corners on a tall ellipse so the
   silhouette curves away at top and bottom instead of stopping square. */
.edge1 { position:absolute; left: calc(100% - 1px); top:.35%; bottom:.35%;
  width: clamp(7px,1.5%,20px); z-index:4;
  border-radius: 0 3px 3px 0 / 0 14px 14px 0;
  background:
    repeating-linear-gradient(to right, rgba(27,26,23,.075) 0 .5px, rgba(27,26,23,0) .5px 2.1px),
    repeating-linear-gradient(to right, rgba(27,26,23,.05)  0 .5px, rgba(27,26,23,0) .5px 3.4px),
    repeating-linear-gradient(to right, rgba(27,26,23,.032) 0 .5px, rgba(27,26,23,0) .5px 5.3px),
    linear-gradient(to right, #FFFFFF 0%, color-mix(in oklab, #FFFFFF 98%, #1B1A17 2%) 38%,
      color-mix(in oklab, #FFFFFF 94%, #1B1A17 6%) 74%, color-mix(in oklab, #FFFFFF 89.5%, #1B1A17 10.5%) 100%);
  mask-image: var(--end-mask); }
.edge2 { position:absolute; left: calc(100% - 2px); top:.85%; bottom:.85%;
  width: clamp(11px,2.3%,30px); z-index:3;
  border-radius: 0 4px 4px 0 / 0 20px 20px 0;
  background:
    repeating-linear-gradient(to right, rgba(27,26,23,.05)  0 .5px, rgba(27,26,23,0) .5px 3.4px),
    linear-gradient(to right, color-mix(in oklab, #FFFFFF 99.5%, #1B1A17 .5%) 0%,
      color-mix(in oklab, #FFFFFF 96%, #1B1A17 4%) 52%, color-mix(in oklab, #FFFFFF 91%, #1B1A17 9%) 100%);
  mask-image: var(--end-mask); filter: blur(.35px); }
.edge3 { position:absolute; left: calc(100% - 3px); top:1.5%; bottom:1.5%;
  width: clamp(15px,3.1%,40px); z-index:2;
  border-radius: 0 5px 5px 0 / 0 26px 26px 0;
  background: linear-gradient(to right, color-mix(in oklab, #FFFFFF 99%, #1B1A17 1%) 0%,
    color-mix(in oklab, #FFFFFF 95.5%, #1B1A17 4.5%) 60%, color-mix(in oklab, #FFFFFF 90%, #1B1A17 10%) 100%);
  mask-image: var(--end-mask); filter: blur(.8px); }

/* the crease where the block meets the sheet, so the two are not separated by
   a flat band of white */
.book::after { content:""; position:absolute; left: calc(100% - 2px); top:.35%; bottom:.35%;
  width: clamp(6px,1.3%,17px); z-index:5; pointer-events:none;
  background: linear-gradient(to right, rgba(27,26,23,.10) 0%, rgba(27,26,23,.035) 34%, rgba(27,26,23,0) 100%);
  mask-image: var(--end-mask); }

.top-edge { position:absolute; left:46%; right: calc(-1 * clamp(5px,1.1%,15px));
  top: calc(-1 * clamp(2px,.42%,6px)); height: clamp(2px,.42%,6px); z-index:1; pointer-events:none;
  background: repeating-linear-gradient(to bottom, #FFFFFF 0 1px, color-mix(in oklab, #FFFFFF 95%, #1B1A17 5%) 1px 2px);
  border-radius: 0 3px 0 0; transform: skewX(-16deg); transform-origin: bottom right;
  filter: blur(.45px);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 46%, rgba(0,0,0,.8) 84%, rgba(0,0,0,0) 100%); }

.cast-shadow { position:absolute; left:-42%; right:-2.4%; bottom:-7%; height:15%; z-index:0; pointer-events:none;
  background: radial-gradient(50% 100% at 46% 0%, rgba(27,26,23,.075) 0%, rgba(27,26,23,.022) 42%, rgba(27,26,23,0) 100%);
  filter: blur(14px); }
.top-shadow  { position:absolute; left:-38%; right:-1.6%; top:-2.4%; height:6%; z-index:0; pointer-events:none;
  background: radial-gradient(50% 100% at 46% 100%, rgba(27,26,23,.045) 0%, rgba(27,26,23,.014) 50%, rgba(27,26,23,0) 100%);
  filter: blur(12px); }

.clip  { position: absolute; inset: 0; overflow: hidden; z-index: 5; }
.page  { position: absolute; inset: 0; background: #FFFFFF; overflow: hidden; cursor: pointer; z-index: 2; }

.item { position: absolute; background: transparent; }

.item img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  background: #FFFFFF;
  pointer-events: none; user-select: none;
}
/* a gif keeps its own proportion and paints over the printed artwork */
.gif-item { z-index: 6; }
/* a white mat just outside the gif: the same drawing is printed on the sheet
   underneath, and without this its edges show around the animation */
.gif-item::before { content: ""; position: absolute; inset: -3%; background: #FFFFFF; }
/* a gif that is transparent on purpose must not have white painted behind it */
.gif-item.no-mat::before { display: none; }
/* blanks the printed artwork a gif stands in for, so the gif is free to sit
   somewhere other than exactly on top of it */
.gif-cover { position: absolute; background: #FFFFFF; z-index: 5; pointer-events: none; }
.gif-item img { position: relative; width: 100%; height: auto; background: transparent; }

.page-overlay {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background:
    linear-gradient(to right, rgba(27,26,23,.30) 0%, rgba(27,26,23,.30) .14%,
      rgba(27,26,23,.10) .9%, rgba(27,26,23,.045) 3%, rgba(27,26,23,.012) 7.5%, rgba(27,26,23,0) 13%),
    radial-gradient(90% 55% at 0% 100%, rgba(27,26,23,.075), rgba(27,26,23,0) 62%),
    radial-gradient(80% 45% at 0% 0%,   rgba(27,26,23,.05),  rgba(27,26,23,0) 60%),
    linear-gradient(to bottom, rgba(27,26,23,.07) 0%, rgba(27,26,23,.02) 1.2%, rgba(27,26,23,0) 4%),
    linear-gradient(to top,    rgba(27,26,23,.085) 0%, rgba(27,26,23,.025) 1.4%, rgba(27,26,23,0) 5%),
    linear-gradient(to left,   rgba(27,26,23,.05) 0%, rgba(27,26,23,0) 2.4%),
    linear-gradient(105deg, rgba(27,26,23,.028) 0%, rgba(27,26,23,0) 34%,
                            rgba(255,255,255,.05) 76%, rgba(27,26,23,.02) 100%);
}

.nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: Archivo, sans-serif; font-size: 26px; line-height: 1;
  padding: 12px 14px; color: #4A473F; user-select: none; z-index: 14;
  opacity: .45; cursor: pointer; transition: opacity .2s ease;
  background: none; border: 0;
}
.nav:hover { opacity: 1; }
/* both arrows sit in the margins, clear of the sheet that holds the artwork */
.nav.left  { right: 100%; margin-right: 4px; }
.nav.right { left:  100%; margin-left: clamp(18px, 3.4%, 46px); }
.nav[hidden] { display: none; }

.counter { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  z-index: 14; font-size: 9px; letter-spacing: .26em; color: #A9A39A;
  font-variant-numeric: tabular-nums; pointer-events: none; }

.leaf {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform .52s cubic-bezier(.34,.03,.27,1);
  z-index: 9; will-change: transform; border-radius: 0 5px 6px 0;
}
.leaf-front {
  position: absolute; inset: 0; backface-visibility: hidden;
  background: #FFFFFF; overflow: hidden;
}
.leaf-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  transform: rotateY(180deg);
  background: linear-gradient(to left, color-mix(in oklab, #FFFFFF 98%, #1B1A17 2%) 0%, #FFFFFF 26%,
    color-mix(in oklab, #FFFFFF 97%, #1B1A17 3%) 92%, color-mix(in oklab, #FFFFFF 93%, #1B1A17 7%) 100%);
}
.leaf-shade {
  position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(27,26,23,.17) 0%, rgba(27,26,23,.05) 26%,
              rgba(255,255,255,.13) 62%, rgba(27,26,23,.11) 100%);
}
.leaf-shade.animate { animation: bendPulse .54s ease-in-out both; }
.base-shade {
  position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0;
  background: linear-gradient(to right, rgba(27,26,23,.24) 0%, rgba(27,26,23,.09) 22%, rgba(27,26,23,0) 52%);
}
.base-shade.animate { animation: bendPulse .54s ease-in-out both; }

.caption { position: absolute; left: clamp(16px,4%,34px); bottom: clamp(14px,3.5%,28px);
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #8A857C; max-width: 70%; z-index: 7; }

@media (max-width: 860px) {
  .book {
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(96cqw, calc(100cqh * 1.6735));
    background: none; border-radius: 0; box-shadow: none;
  }
  .stub, .edge1, .edge2, .edge3, .top-edge, .cast-shadow, .top-shadow { display: none; }

  /* pinned to the screen instead of hanging off the sheet, which pushed the
     page sideways on phones */
  .nav { position: fixed; }
  .nav.left  { left: 2px; right: auto; margin: 0; }
  .nav.right { right: 2px; left: auto; margin: 0; }
}

/* ---------- about page ---------- */

.about {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  padding: clamp(14px, 2.4vw, 30px);
  animation: fadeUp .4s ease both;
}
.about-body { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center;
              padding: clamp(10px,2vw,24px) 0; }

.about-stage {
  position: relative;
  width: min(96%, 1180px);
  max-width: calc(78vh * 1.6735);
}
.about-sheet {
  position: relative;
  width: 100%;
  aspect-ratio: 1.6735;
  background: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid color-mix(in oklab, #FFFFFF 93%, #1B1A17 7%);
  box-shadow: 0 26px 60px -34px rgba(27,26,23,.34);
  overflow: hidden;
}

.cv-row { position: absolute; inset: 0; pointer-events: none; }

.cv-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  font-family: Archivo, sans-serif;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  height: 42px;
  padding: 0 16px;
  border: 1px solid #1B1A17;
  background: rgba(242,240,235,.94);
  color: #1B1A17;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.cv-btn:hover { color: #8C4A2F; }

.chip-label { font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase;
              color: #1B1A17; min-height: 11px; }
.chip-value { font-size: 13px; letter-spacing: .02em; color: #1B1A17;
              border-bottom: 1px solid rgba(27,26,23,.45); padding-bottom: 3px;
              text-decoration: none; }

/* ---------- full-screen sheet viewer ---------- */

/* Crop marks rather than a glyph: the same drafting language as the sheets,
   and it does not change shape from one device's font to the next. */
.zoom-open {
  position: absolute; top: 11px; right: 13px; z-index: 12;
  width: 34px; height: 34px; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none;
  color: #8A857C; cursor: zoom-in; opacity: 0;
  transition: opacity .2s ease, color .25s ease;
}
.zoom-open svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* a soft white halo rather than a white panel, so the marks stay legible over
     a drawing without pasting a square onto the sheet */
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.95))
          drop-shadow(0 0 3.5px rgba(255,255,255,.85));
}
.zoom-open svg * { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.page:hover .zoom-open { opacity: 1; }
.zoom-open:hover { color: #1B1A17; }
/* the heads step apart on hover — the gesture the button performs */
.zoom-open:hover svg .tl { transform: translate(-1.8px, -1.8px); }
.zoom-open:hover svg .br { transform: translate( 1.8px,  1.8px); }

.zv { position: fixed; inset: 0; z-index: 50; background: rgba(18,17,15,.965);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; touch-action: none; }
.zv[hidden] { display: none !important; }

.zv-sheet {
  position: relative;
  width: min(96vw, calc(90vh * 1.6735));
  aspect-ratio: 984 / 588;
  background: #FFFFFF;
  transform-origin: center center;
  will-change: transform;
  cursor: grab;
}
.zv-sheet.grabbing { cursor: grabbing; }
/* pointer-events off, or mousedown on the image starts the browser's own
   image drag, which cancels the pointer and kills the pan and the swipe */
.zv-sheet > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
                  background: #FFFFFF; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.zv-sheet .gif-item { position: absolute; pointer-events: none; }
.zv-sheet .gif-item img { position: relative; width: 100%; height: auto;
                          pointer-events: none; user-select: none; -webkit-user-drag: none; }

.zv-caption, .zv-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  font-family: Archivo, sans-serif; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: #8A857C; z-index: 52;
}
.zv-caption { top: 18px; }
.zv-bar { bottom: 18px; display: flex; gap: 16px; align-items: center; }
.zv-bar button, .zv-nav, .zv-close {
  background: none; border: 0; color: #8A857C; cursor: pointer;
  font-family: Archivo, sans-serif; letter-spacing: .2em;
}
.zv-bar button { font-size: 11px; padding: 6px 4px; }
.zv-bar button:hover, .zv-nav:hover, .zv-close:hover { color: #F2F0EB; }
.zv-level { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }

.zv-nav { position: fixed; top: 50%; transform: translateY(-50%); font-size: 26px; padding: 12px 14px; z-index: 52; }
.zv-nav.left { left: 8px; }
.zv-nav.right { right: 8px; }
.zv-nav[hidden] { display: none; }
.zv-close { position: fixed; top: 12px; right: 16px; font-size: 16px; padding: 8px; z-index: 52; }

@media (max-width: 860px) {
  /* always visible without a pointer to hover with, so it wants to be small */
  .zoom-open { opacity: 1; width: 22px; height: 22px; padding: 3px; top: 7px; right: 8px; }
  .zv-sheet { width: 96vw; }
}

/* A phone held sideways has very little height to spare — give the sheet as
   much of it as possible. */
@media (max-width: 950px) and (orientation: landscape) {
  .project { padding: 6px 10px; }
  .book-row { padding: 4px 0 12px; }
  .topbar { font-size: 9px; }
  .counter { display: none; }
}

/* Three side-by-side buttons cannot fit across a phone, so they leave the
   sheet and stack underneath it at full width. */
@media (max-width: 760px) {
  .cv-row {
    position: static; inset: auto; pointer-events: auto;
    display: flex; flex-direction: column; gap: 9px;
    margin-top: 14px;
  }
  .cv-btn {
    position: static; transform: none;
    width: 100%; height: 44px; font-size: 10.5px;
  }
}