/* ==========================================================================
   Aron Davila — Portfolio
   Built from the "portfolio mockup-dev" Adobe XD file.
   Desktop artboard: 1920px wide, 1050px content column.
   Mobile artboard: 393px wide, 293px content column.
   Fluid sizes interpolate between those two artboards.
   ========================================================================== */

/* Design font is Remora Sans W1 (G-Type), served by the Adobe Fonts kit linked
   in index.html as "remora-sans-w1". Weights used: Light 300, Medium 500,
   Demi 600, Bold 700. */

:root {
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-accent: #ff8900;
  --color-muted: #a7a7a7;
  --color-logo: #707070;
  --color-blue: #038dd1; /* matches the starburst screenshot as browsers render it (XD: #3B8CCB) */
  --color-paper: #ffffff;

  --font: "remora-sans-w1", sans-serif;

  /* Mobile type, scaling up from the 393px artboard */
  --fs-hero: clamp(48px, 53.63px + 4.928vw, 148.25px);
  --fs-tagline: clamp(28px, 28.13px + 3.274vw, 91px);
  --fs-section: clamp(22px, 19.63px + 1.113vw, 41px);
  --fs-body: clamp(17px, 16.4px + 0.917vw, 34px);
  --lh-body: 1.4118; /* XD: 48px on 34px */

  --gutter: clamp(20px, 12.7vw, 50px);
  --column: min(1050px, 100% - var(--gutter) * 2);
}

/* Desktop type is the 1920px artboard scaled to the content column:
   exact design sizes once the column reaches 1050px (viewport ≥ 1150px),
   proportionally smaller below that. Column = 100vw - 100px here. */
@media (min-width: 700px) {
  :root {
    --fs-section: min(41px, 3.905vw - 3.9px);
    --fs-body: min(34px, 3.238vw - 3.24px);
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, address { margin: 0; }

/* While Remora Sans loads (class set by the inline script in <head>), text is
   hidden so it never flashes in a fallback font. Images still show. */
.fonts-loading :is(h1, h2, h3, h4, p, address, .skip-link) { visibility: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

[tabindex="-1"]:focus { outline: none; }

::selection { background: var(--color-accent); color: var(--color-bg); }

.container {
  width: var(--column);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  padding: 0.5em 1em;
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 700;
  text-decoration: none;
  transform: translate(-50%, -110%);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- Hero ---------- */
.hero {
  /* Lets the headline and tagline size against the column width (cqi units) */
  container-type: inline-size;
  padding-top: clamp(40px, 49.08px + 5.658vw, 157.72px); /* XD bird top: 71.32 mobile, 157.72 desktop */
}

.hero__logo {
  /* hummingbird.svg artwork: 198.84 × 141.92 on desktop, 152.35 × 108.74 on mobile */
  width: clamp(130px, 140.39px + 3.0445vw, 198.84px);
  margin-inline: auto;
}

.hero__title {
  margin-top: clamp(20px, 13.1px + 2.876vw, 68.28px);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  /* XD: 2px center stroke, #FF8900 (1.5px on the mobile artboard) */
  -webkit-text-stroke: clamp(1.5px, 0.105vw, 2px) var(--color-accent);
}

/* Browsers without text-stroke get solid orange text instead. */
@supports not (-webkit-text-stroke: 1px black) {
  .hero__title { color: var(--color-accent); }
}

/* XD: Remora Sans W1 Light, 91px, #A7A7A7, uppercase, 0 tracking (41px on mobile) */
.hero__tagline {
  margin-top: 0.043em;
  font-size: var(--fs-tagline);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* XD: both lines fill the 1050px frame edge to edge (148.25px and 91px on 1050),
   so on desktop they scale with the column and stay flush with the paragraph. */
@media (min-width: 700px) {
  .hero__title { font-size: 14.119cqi; }
  .hero__tagline { font-size: 8.667cqi; }
}

/* XD: Remora Sans W1 Medium, 34px / 48px, #FFF, 0 tracking, 1050px wide at y 642 */
.hero__intro { margin-top: clamp(25px, 27.5px - 0.131vw, 27px); }

.lead {
  font-size: 1.03em;
  font-weight: 600;
  color: var(--color-accent);
}

/* ---------- Scroll cue ---------- */
.scroll-cue {
  display: block;
  width: 24px;
  margin: 4.35em auto 4.465em;
  color: var(--color-accent);
  transition: transform 0.25s ease;
}
.scroll-cue:hover { transform: translateY(6px); }
.scroll-cue svg { width: 24px; height: auto; }

/* ---------- Section titles ---------- */
.section-title {
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ---------- Case studies ---------- */
.case-studies .section-title { margin-bottom: clamp(10px, 0.99vw, 19px); }

.case-study + .case-study { margin-top: clamp(32px, 7.5vw, 144px); }

/* XD: Remora Sans W1 Medium 34px / 48px, #FFF, 0 tracking, 1050px wide,
   49.5px below the last collage image */
.case-study__body { margin-top: 1.456em; }

.case-study__body h3 {
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
}

.case-study__body h4,
.about h3 {
  font-size: 1em;
  font-weight: 600;
  color: var(--color-accent);
}

/* One blank line before each new subheading, as in the design */
.case-study__body p + h4,
.about p + h3,
.about .spaced { margin-top: calc(var(--lh-body) * 1em); }

/* ---------- Collages ---------- */
.collage { display: grid; }
.tile { position: relative; overflow: hidden; }
.tile img { width: 100%; }

/* Nexio: two 525px columns on the 1050px column */
.collage--nexio {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "palette palette"
    "shirt   agent"
    "kit     agent"
    "booth   booth";
}
/* 1050 × 527 cell; slides of other proportions fill it, aimed by --pos */
.tile--palette {
  grid-area: palette;
  aspect-ratio: 1050 / 527;
  background: var(--color-paper);
}
.tile--palette > img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
/* Shown smaller instead of cropped: the slide is drawn 926px wide (top 88%
   visible, above its dark footer) between 62px white margins. The margins are
   the image's own padding, so the slide underneath can't show through during
   the crossfade. */
.tile--palette > img.slide--inset {
  padding: 0 5.9%;   /* 62 / 1050 */
  background: var(--color-paper);
  object-position: 50% 0;
}
.tile--shirt {
  grid-area: shirt;
  background: var(--color-paper); /* keeps the white from dimming mid-crossfade */
}
.tile--agent {
  grid-area: agent;
  background: #000;
}
.tile--agent video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile--kit { grid-area: kit; }
/* XD crop of "you can be a champ 02.jpg": 1050 × 460 window onto the photo
   scaled to 1618px wide, offset 338px left and 474px up. */
.tile--booth {
  grid-area: booth;
  aspect-ratio: 1050 / 460;
}
.tile--booth img {
  position: absolute;
  top: -103.04%;    /* -474 / 460 */
  left: -32.19%;    /* -338 / 1050 */
  width: 154.1%;    /* 1618 / 1050 */
  max-width: none;
}

/* Modere: full-width rows plus one 331 / 719 split row.
   Every tile reproduces an XD mask group: the tile is the frame, .crop is the
   mask window inside it, and the full image is positioned inside .crop.
   All values are percentages of the XD pixel geometry, so they scale. */
.collage--modere { grid-template-columns: minmax(0, 331fr) minmax(0, 719fr); }
.collage--modere > .tile:not(.tile--starburst, .tile--stage) { grid-column: 1 / -1; }

.crop {
  position: absolute;
  left: var(--mx, 0);
  top: var(--my, 0);
  width: var(--mw, 100%);
  height: var(--mh, 100%);
  overflow: hidden;
}
.crop > img,
.crop > video {
  position: absolute;
  left: var(--ix, 0);
  top: var(--iy, 0);
  width: var(--iw, 100%);
  max-width: none;
  height: auto;
}

/* 1050 × 219 white band; mask 965.87 × 125.3 at 42, 46; image 1040 wide */
.tile--icons {
  aspect-ratio: 1050 / 219;
  background: var(--color-paper);
  --mx: 4%;  --my: 21%;  --mw: 91.99%;  --mh: 57.21%;
  --ix: -3.727%;  --iy: -182.76%;  --iw: 107.67%;
}
/* 1050 × 177; image 1088 wide at -21, -217 */
.tile--tiles {
  aspect-ratio: 1050 / 177;
  --ix: -2%;  --iy: -122.6%;  --iw: 103.62%;
}
/* 1050 × 551.25 white; mask 1026.25 wide at 24, 0; image 1480 wide */
.tile--social {
  aspect-ratio: 1050 / 551.25;
  background: var(--color-paper);
  --mx: 2.286%;  --mw: 97.74%;
  --ix: -29.04%;  --iy: -25.58%;  --iw: 144.21%;
}
/* 331 × 341 blue; mask 245.25 × 196.875 at 43, 72; image 350 wide */
.tile--starburst {
  aspect-ratio: 331 / 341;
  background: var(--color-blue);
  --mx: 12.99%;  --my: 21.11%;  --mw: 74.09%;  --mh: 57.73%;
  --ix: -21.61%;  --iw: 142.71%;
}
/* 719.25 × 341.18; image 719 wide at 0, -47 */
.tile--stage {
  aspect-ratio: 719.25 / 341.18;
  --iy: -13.78%;
}
/* 1050 × 551.25; video placed like the XD frame: 1115 wide at -36, -40 */
.tile--opener {
  aspect-ratio: 1050 / 551.25;
  background: #000;
  --ix: -3.43%;  --iy: -7.26%;  --iw: 106.19%;
}

/* ---------- Slideshow (crossfade, driven by script.js) ---------- */
.slideshow { display: grid; }
/* The incoming slide fades in over the outgoing one, which stays fully opaque
   underneath (.is-prev) so the fade never dips toward the black page. */
.slideshow > img {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.slideshow > img.is-active { opacity: 1; z-index: 2; }
.slideshow > img.is-prev { opacity: 1; z-index: 1; transition: none; }

/* Pause/play button shared by slideshows and autoplay videos */
.media-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}
/* Speaker button sits to the left of pause/play */
.media-toggle--sound { right: 56px; }

.tile:hover .media-toggle,
.media-toggle:focus-visible,
.is-paused > .media-toggle,
.is-unmuted > .media-toggle--sound { opacity: 1; }
.media-toggle:hover { background: var(--color-accent); }
.media-toggle svg { width: 14px; height: 14px; }
@media (hover: none) {
  .media-toggle { opacity: 1; }
}

/* ---------- About ---------- */
.about { margin-top: 0; }
.about .section-title { margin-bottom: 0.154em; }

/* ---------- Contact ---------- */
.contact {
  margin-top: 4.076em;
  padding-bottom: clamp(40px, 7.6vw, 146px);
}

.contact address { font-style: normal; }

.contact__label {
  font-weight: 600;
  color: var(--color-accent);
}

.contact a {
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease, color 0.25s ease;
}
.contact a:hover,
.contact a:focus-visible {
  color: var(--color-accent);
  background-size: 100% 2px;
}

.contact__sep { margin-inline: 0.55em; }

/* ---------- Scroll reveal (enabled by script.js) ---------- */
.has-reveal .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.has-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Mobile (matches the 393px artboard) ---------- */
@media (max-width: 699px) {
  .collage--nexio {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "palette" "shirt" "agent" "kit" "booth";
  }
  .tile--agent { aspect-ratio: 525 / 873; }

  /* The mobile artboard has no scroll arrows */
  .scroll-cue { display: none; }

  /* ---- Mobile type and spacing: "iPhone 14 Pro – 1" artboard (393px) ----
     Hello: Bold 73 / 74 · Tagline: Light 41 / 43 · Body: Medium 20 / 28
     Headers: Bold 24, uppercase · Footer: Medium 20 / 28 */
  :root { --lh-body: 1.4; }                  /* 28px on 20px */
  .hero__title { margin-top: 12.94px; line-height: 1.0137; }
  .hero__tagline { margin-top: 13px; line-height: 1.0488; }
  .hero__intro { margin-top: 27px; }
  .hero { padding-bottom: 60px; }

  .section-title { line-height: 35px; }
  .case-studies .section-title,
  .about .section-title { margin-bottom: 0; }
  .case-studies { padding-bottom: 34px; }
  .case-study + .case-study { margin-top: 45px; }
  .case-study__body { margin-top: 31px; }
  /* Open panels sit slightly further from the next header than closed ones (XD) */
  #case-studies-panel:not([hidden]) { padding-bottom: 3px; }
  #about-panel:not([hidden]) { padding-bottom: 2px; }

  .contact { margin-top: 36px; padding-bottom: 72px; }
  .contact__sep { display: none; }
  .contact a[href^="tel"] { display: table; }
}

/* ---------- Mobile accordion (toggle added by script.js under 700px) ---------- */
.section-toggle {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* XD: 6.5 × 13.3 orange triangle, 163.6px from the column edge */
.section-toggle__icon {
  position: absolute;
  top: calc(50% - 1.7px); /* XD centers it slightly above the text box */
  left: 163.6px;
  width: 6.5px;
  height: 13.3px;
  transform: translateY(-50%);
  transition: transform 0.25s ease;
}
.section-toggle[aria-expanded="true"] .section-toggle__icon {
  transform: translateY(-50%) rotate(90deg);
}
/* Space between a header and its open panel (XD: 11px case studies, 6px about) */
#case-studies-panel:not([hidden]) { margin-top: var(--panel-gap-cases, 0); }
#about-panel:not([hidden]) { margin-top: var(--panel-gap-about, 0); }
@media (max-width: 699px) {
  :root { --panel-gap-cases: 11px; --panel-gap-about: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue,
  .contact a,
  .slideshow > img,
  .has-reveal .reveal { transition: none; }
  .has-reveal .reveal { opacity: 1; transform: none; }
  .scroll-cue:hover { transform: none; }
}