/* About Me page only. Fixed UI duplicates Home's positioning/typography
   (see home.css) in black-on-white, same as Home. Layout below is
   About-specific: a left-aligned toggle list with hover-preview /
   click-to-pin panels floating on the right half of the viewport,
   plus a custom illustrated pointer for this page only. */

/* about.css is only linked from about.html, so scoping the color
   variables here (instead of editing base.css) keeps this page's
   palette independent of Home/Design/Photography. */
:root {
  --color-bg: #f5f4ee;
  --color-fg: #b9b14c;
}

/* Hide the native scrollbar chrome while keeping real scrolling
   (the min-height:100vh content flow) fully functional. */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
}
html::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--page-padding);
  z-index: 50;
  pointer-events: none;
}

.site-header a {
  pointer-events: auto;
}

.logo {
  font-weight: 800;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.primary-nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2em;
  pointer-events: auto;
}

.primary-nav a {
  position: relative;
  font-weight: 700;
  font-size: clamp(0.85rem, 1vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}

.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-footer-meta {
  position: fixed;
  bottom: var(--page-padding);
  right: var(--page-padding);
  left: auto;
  font-weight: 800;
  z-index: 50;
}

@media (min-width: 641px) {
  .site-header {
    padding-top: calc(var(--page-padding) * 0.5);
  }

  .logo {
    font-size: clamp(1.4rem, 1.96vw, 1.75rem);
  }

  .primary-nav a {
    font-size: clamp(1.02rem, 1.2vw, 1.26rem);
  }

  .site-footer-meta {
    font-size: 1.495rem;
    bottom: calc(var(--page-padding) * 0.35);
  }
}

.menu-toggle {
  display: none;
}

.mobile-menu {
  display: none;
}

/* ---------- mobile header + menu (<=640px) ---------- */
/* Ported as-is from Home/Photography's shared mobile pattern (same
   markup classes, layout, spacing, bullets, close button and slide
   transition) — only the colors are inverted for this page's
   cream/olive palette: olive panel with cream text, instead of the
   white panel with olive text used elsewhere. */
@media (max-width: 500px) {
  .primary-nav {
    display: none;
  }

  .logo br {
    display: none;
  }

  .logo {
    font-size: 1.3rem;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    width: 32px;
    height: 23px;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
  }

  .menu-toggle span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #b9b14c;
  }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: #b9b14c;
    color: #f6f5f0;
    padding: var(--page-padding);
    transform: translateX(100%);
    transition: transform 320ms ease;
  }

  .mobile-menu.is-open {
    transform: translateX(0);
  }

  .mobile-menu-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75em;
    border-bottom: 1px solid #f6f5f0;
  }

  .mobile-menu-name {
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .mobile-menu-close {
    font-size: 1.75rem;
    line-height: 1;
    color: #f6f5f0;
    cursor: pointer;
  }

  .mobile-menu-nav ul {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu-nav li {
    border-bottom: 1px solid #f6f5f0;
  }

  .mobile-menu-nav a {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.9em 0;
    font-weight: 800;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #f6f5f0;
  }

  .mobile-menu-nav a::before {
    content: "";
    width: 7px;
    height: 7px;
    background: #f6f5f0;
    flex-shrink: 0;
  }

  .mobile-menu-brand {
    margin-top: auto;
    font-weight: 800;
    font-size: clamp(3.4375rem, 17.5vw, 4.375rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: #f6f5f0;
  }

  /* Bottom alignment: footer meta centered horizontally. (CV button's
     phone override lives in the phone content block below, after its
     base rule, so it isn't lost to source-order cascade — see note
     there.) */
  .site-footer-meta {
    left: 0;
    right: 0;
    text-align: center;
    transform: translateY(28px);
  }
}

/* Main composition: left toggle list + right panel stack */
.about {
  position: relative;
  min-height: 100vh;
}

.about-content {
  position: relative;
  min-height: 100vh;
  transform: translateX(6vw);
}

.about-list {
  position: absolute;
  left: var(--page-padding);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.about-list-item {
  display: block;
  font: inherit;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 4.2vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: inherit;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.about-list-item:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 6px;
}

/* Panel stack: pieces float over the right half of the viewport and
   accumulate like prints left on a table. */
.about-pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
transform: translate(4vw, 2vh);
}

.piece {
  position: absolute;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

.piece.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.piece.is-preview {
  z-index: 20;
}

.piece img {
  display: block;
  width: 100%;
  height: auto;
}

.piece-id {
  top: 12%;
  left: 40%;
  width: clamp(280px, 27vw, 440px);
  z-index: 1;
}

.piece-como-pienso {
  top: 16%;
  left: 49%;
  width: clamp(320px, 30vw, 480px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  z-index: 2;
}

.piece-contacto {
  top: 50%;
  left: 61%;
  width: clamp(240px, 22vw, 360px);
  z-index: 3;
}

.como-pienso-flyer-link {
  display: block;
  width: 100%;
}

.contacto-flyer-link {
  display: block;
  width: 100%;
}

.id-flyer-link {
  display: block;
  width: 100%;
}

.piece-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  margin: -8px -12px;
  font-size: clamp(0.8rem, 0.95vw, 0.95rem);
  font-weight: 400;
  text-decoration: underline;
  color: var(--color-fg);
}

/* Custom illustrated cursor (pointer/hover-capable devices only) */
body.custom-cursor-active,
body.custom-cursor-active * {
  cursor: none !important;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: auto;
  z-index: 2000;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.15s ease;
  will-change: transform;
}

.custom-cursor.is-hidden {
  opacity: 0;
}

/* CV download button: iPad-only (see breakpoint below), hidden
   elsewhere by default. Reuses the same CV asset as the desktop
   "(4) CV" link. */
.cv-download-btn {
  display: none;
  position: fixed;
  left: var(--page-padding);
  bottom: var(--page-padding);
  z-index: 50;
  padding: 0.85em 1.6em;
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  background: var(--color-fg);
  border-radius: 6px;
  color: transparent;
  -webkit-text-stroke: 1px #f6f5f0;
}

/* Visual-only text enlargement: transform doesn't participate in the
   button's own layout sizing, so the anchor's box (padding, width,
   height) stays pixel-identical while the glyphs render bigger. */
.cv-download-btn-text {
  display: inline-block;
  -webkit-text-stroke-width: 0.75px;
  transform: scale(1.15);
}

/* ---------- iPad portrait recomposition ---------- */
/* Same assets, colors and typography as desktop — the numbered
   toggle list is replaced by an always-visible layered stack of the
   three pieces (tap brings one to front, none can be hidden), plus
   a fixed CV download button. */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .about-list {
    display: none;
  }

  .about-content {
    transform: none;
  }

  .about-pieces {
    transform: translate(3vw, -4vh);
  }

  .about-pieces .piece {
    opacity: 1;
    pointer-events: auto;
  }

  .about-pieces .piece-id {
    top: 39%;
    left: 2%;
    width: 56vw;
    transform: rotate(-6deg);
  }

  .about-pieces .piece-como-pienso {
    top: 23%;
    left: 16%;
    width: 68vw;
    transform: rotate(3deg);
  }

  .about-pieces .piece-contacto {
    top: 47%;
    left: 35%;
    width: 58vw;
    transform: rotate(-2deg);
  }

  /* Article link: compact hit-area tightly fitted to the text +
     underline only (no enlarged touch-target backdrop), so it never
     shadows the cards behind it. Rotated independently of the card's
     own tilt to the exact angle provided. */
  .piece-como-pienso .piece-link {
    display: inline-block;
    min-height: auto;
    padding: 0;
    margin: 0;
    transform: rotate(353.298deg);
  }

  .cv-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- phone recomposition (<=640px) ---------- */
/* Reuses the approved iPad recomposition above exactly (same
   selectors, same properties, same always-visible layered stack —
   list hidden, pieces forced visible, article link rotation, CV
   button shown): only the numeric position/size values are
   scaled/repositioned to fit the narrower phone viewport. Placed
   after the base .about-list/.about-pieces/.piece/.cv-download-btn
   rules (like the iPad block above) so it actually wins the cascade —
   the mobile-menu block earlier in this file sits before those base
   rules and can't override them. */
@media (max-width: 640px) {
  /* .about resolves to exactly 100vh here (min-height:100vh, no
     in-flow content forces it taller). Nothing was clipping the
     rotated/absolutely-positioned .piece cards, so any edge that
     rendered past that 100vh line extended the document's scrollable
     height, making the whole page scroll. Clipping here contains
     that overflow without touching any card's position/size. */
  .about {
    overflow: hidden;
  }

  .about-list {
    display: none;
  }

  .about-content {
    transform: none;
  }

  /* Safe, responsively-centered composition wrapper: top/bottom
     insets (clamp(px, vh, px)) reserve clearance above (logo/
     hamburger) and below (CV button/footer) so a fixed minimum is
     always kept clear while still scaling with viewport height. The
     wrapper's own width is capped (min(92vw, 400px)) and centered
     via left:50%/translateX(-50%) — responsive at every phone width
     up to the iPad breakpoint, not a fixed offset tuned to one size.
     Each piece's top/left % below resolves against this centered,
     capped box (not the raw viewport), so the whole three-card group
     moves and sizes together as one composition instead of drifting
     left as the viewport widens. Individual piece rules are
     untouched. */
  /* Available phone area for the three-card group: header clearance
     above, CV/footer clearance below. The group itself is centered
     inside this area by flexbox, not by manual left/top nudges. */
  .about-pieces {
    top: clamp(75px, 14vh, 105px);
    bottom: clamp(140px, 18vh, 180px);
    left: 0;
    right: 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Cancel the base rule's transform: translate(4vw, 2vh) — on
       phone the flex rule above is the only centering mechanism;
       leaving the base transform active pushed the flex-centered
       group ~4vw past the right edge, causing overflow. */
    transform: none;
  }

  /* Shared bounding-box reference for id/como-pienso/contacto: its
     width caps at min(90vw, 400px), giving a >=5vw safety margin on
     both sides once centered by the flex rule above; its height is
     90% of the available area, giving matching top/bottom breathing
     room so the group's vertical center lands on the area's center.
     Individual pieces keep their original relative top/left/rotation
     offsets (the intentional internal chaos), just resolved against
     this box instead of the full-viewport .about-pieces box. */
  .piece-group {
    position: relative;
    width: min(90vw, 400px);
    height: 90%;
    /* Rigid shift of the whole three-card composition, on top of the
       flex centering above — moves the group up as one unit without
       touching the individual cards' relative offsets. */
    transform: translateY(-6%);
  }

  .about-pieces .piece {
    opacity: 1;
    pointer-events: auto;
  }

  /* ID: above + modestly left of the central Como Pienso anchor —
     a real vertical gap (vs. Como Pienso's 18.75%) so a clearly
     visible, tappable strip stays exposed above it. */
  .about-pieces .piece-id {
    top: 1%;
    left: 5%;
    width: clamp(220px, 78vw, 320px);
    transform: rotate(-6deg);
  }

  /* Como Pienso: stable central reference — size, rotation and
     horizontal position unchanged; top moved ~15% closer to the top
     relative to its prior value (18.75% -> 15.9%). */
  .about-pieces .piece-como-pienso {
    top: 15.9%;
    left: 4%;
    width: clamp(240px, 86vw, 350px);
    transform: rotate(3deg);
  }

  /* Contact: below + only modestly right of Como Pienso. left (not
     right:0) keeps it clear of the group's own right edge on every
     phone width, so it never approaches the viewport edge. Top moved
     ~10% further down relative to its prior value (56% -> 61.6%). */
  .about-pieces .piece-contacto {
    top: 61.6%;
    left: 16%;
    width: clamp(200px, 74vw, 300px);
    transform: rotate(-2deg);
  }

  /* Pulled out of the flex column and pinned to the sheet's own
     upper-right corner so it reads as attached to the flyer instead
     of floating below it. Hit area stays limited to the text/underline
     itself (no enlarged touch backdrop); link href/target unchanged. */
  .piece-como-pienso .piece-link {
    position: absolute;
    top: 24%;
    right: -14%;
    display: inline-block;
    min-height: auto;
    padding: 0;
    margin: 0;
    transform: rotate(94deg) scale(0.85);
  }

  .cv-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    bottom: calc(var(--page-padding) + 3.75em);
    transform: translateX(-50%) translateY(28px);
  }
}