/* ================= Base ================= */
:root {
  --bg: #000000;
  --fg: #ffffff;
  --muted: #ffffff;
  --faint: #C2C2C24D;          /* small titles on About ("Clientes", "Contacto"…) */
  --on-dark: #ffffff;          /* text and icons on buttons and over images */
  --pill: rgba(130, 130, 130, 0.3);
  --pill-hover: rgba(130, 130, 130, 0.45);
  /* darker glass, used when a button or block sits over pictures or colour
     (on plain black the lighter glass above is kept) */
  --pill-dark: rgba(28, 28, 30, 0.55);
  --pill-dark-hover: rgba(28, 28, 30, 0.7);
  --glass-dark: rgba(22, 22, 24, 0.5);
  --glass-dark-active: rgba(22, 22, 24, 0.68);
  --glass: rgba(130, 130, 130, 0.15);
  --glass-active: rgba(130, 130, 130, 0.35);
  --pad: 28px;
  --radius: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.light {
  --bg: #ecebe8;
  --fg: #141414;
  --muted: #777;
  --faint: #aaa;
  --pill: rgba(255, 255, 255, 0.6);
  --pill-hover: rgba(255, 255, 255, 0.9);
  --glass: rgba(255, 255, 255, 0.45);
  --glass-active: rgba(255, 255, 255, 0.8);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

/* Home and Projects never scroll the page: no elastic bounce either */
html.locked, html.locked body {
  overflow: hidden;
  overscroll-behavior: none;
}
.view-home { touch-action: none; }

html { background: #000000; }

/* Page background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #000000;
  pointer-events: none;
}

body {
  background: transparent;
  color: var(--fg);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  transition: background .5s, color .5s;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; text-transform: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

/* ================= Custom cursor (from jasonbradley.co) ================= */
.mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-mouse, html.has-mouse * { cursor: none !important; }

  .mouse {
    display: block;
    position: fixed;
    left: 0; top: 0;
    z-index: 998;
    pointer-events: none;
    will-change: transform;
    transition: opacity .3s ease;
  }
  .mouse.is-hidden { opacity: 0; }

  .mouse__bg {
    position: absolute;
    left: 0; top: 0;
    width: 90px; height: 42px;
    transform: translate3d(-50%, -50%, 0);
    transition: transform .5s ease, opacity .5s ease;
  }
  .mouse__bg.is-hover { opacity: .5; }
  .mouse__bg.is-down { transform: translate3d(-50%, -50%, 0) scale(.7); }
  .mouse__bg.is-explore.is-down { transform: translate3d(-50%, -50%, 0) scale(.8); }

  /* The blurred shape: a 14px circle by default (same size as sidebvinyl.com)... */
  .mouse__bg__background {
    position: absolute;
    inset: 0;
    background: var(--pill);          /* same glass as the header buttons */
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    clip-path: inset(14px 38px 14px 38px round 42px);
    transition: clip-path 333ms ease, background 333ms ease;
  }
  /* ...that stretches into a rounded label over the gallery */
  .mouse__bg.is-explore .mouse__bg__background {
    background: var(--pill-dark);       /* the label always sits over a picture */
    clip-path: inset(4px 14px 4px 14px round 10px);
  }

  .mouse__bg__explore {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate3d(-50%, -50%, 0);
    font-size: 11px;
    color: var(--on-dark);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 222ms ease;
  }
  .mouse__bg.is-explore .mouse__bg__explore { opacity: 1; transition: opacity 333ms ease .2s; }
}

/* ================= Side blur (from lambert-lambert.com) =================
   Fixed strips on the left and right of the screen. Four stacked layers
   blur what is behind them more and more (5 / 10 / 15 / 20px) towards the
   outer edge. They sit above images and the background (z-index 46) but
   below all text and buttons (z-index 47+), so text is never blurred. */
.edge-blur {
  position: fixed;
  top: 0; bottom: 0;
  width: clamp(60px, 9.7vw, 140px);
  z-index: 46;
  pointer-events: none;
}
.edge-blur--left  { left: 0; }
.edge-blur--right { right: 0; }
/* Only on the home page */
body:not(.route-home) .edge-blur { display: none; }
.edge-blur i { position: absolute; inset: 0; }
.edge-blur i:nth-child(1) { -webkit-backdrop-filter: blur(5px);  backdrop-filter: blur(5px);  --a: 16.667%; --b: 33.333%; --c: 50%;      --d: 66.667%; }
.edge-blur i:nth-child(2) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); --a: 33.333%; --b: 50%;      --c: 66.667%; --d: 83.333%; }
.edge-blur i:nth-child(3) { -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); --a: 50%;      --b: 66.667%; --c: 83.333%; --d: 100%; }
.edge-blur i:nth-child(4) { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); --a: 66.667%; --b: 83.333%; --c: 100%;    --d: 116.667%; }
.edge-blur--left i {
  -webkit-mask-image: linear-gradient(270deg, transparent var(--a), #000 var(--b), #000 var(--c), transparent var(--d));
          mask-image: linear-gradient(270deg, transparent var(--a), #000 var(--b), #000 var(--c), transparent var(--d));
}
.edge-blur--right i {
  -webkit-mask-image: linear-gradient(90deg, transparent var(--a), #000 var(--b), #000 var(--c), transparent var(--d));
          mask-image: linear-gradient(90deg, transparent var(--a), #000 var(--b), #000 var(--c), transparent var(--d));
}

/* ================= Gradient placeholders ================= */
.ph { background-size: 160% 160%; animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

.g1 { background-image: linear-gradient(170deg, #f2f2f0 0%, #9a9a98 45%, #1a1a1a 100%); }
.g2 { background-image: linear-gradient(135deg, #0e0e0e 0%, #3a3a3a 50%, #8c8c8c 100%); }
.g3 { background-image: radial-gradient(circle at 60% 35%, #ffffff 0%, #e2e2df 35%, #b5b5b2 100%); }
.g4 { background-image: radial-gradient(ellipse at 50% 50%, #e8e8e6 0%, #7d7d7b 45%, #2b2b2b 100%); }
.g5 { background-image: linear-gradient(160deg, #5a5a5a 0%, #222222 55%, #050505 100%); }
.g6 { background-image: radial-gradient(circle at 40% 70%, #111111 0%, #6e6e6e 50%, #d6d6d4 100%); }
.g7 { background-image: radial-gradient(circle at 50% 40%, #a8a8a8 0%, #2e2e2e 40%, #000000 80%); }
.g8 { background-image: linear-gradient(200deg, #fafaf8 0%, #d8d8d5 50%, #a3a3a1 100%); }
.g9 { background-image: linear-gradient(120deg, #6b6b6b 0%, #cfcfcc 45%, #3d3d3d 100%); }
.g10 { background-image: radial-gradient(circle at 30% 30%, #f0f0ee 0%, #9e9e9c 45%, #262626 100%); }
.g11 { background-image: linear-gradient(150deg, #e4e4e2 0%, #8f8f8d 50%, #1f1f1f 100%); }
.g12 { background-image: radial-gradient(circle at 70% 60%, #c4c4c2 0%, #555555 50%, #0a0a0a 100%); }
.g-team { background-image: linear-gradient(135deg, #1c1c1c 0%, #5c5c5c 40%, #b8b8b6 75%, #eeeeec 100%); }

/* Pictures can't be dragged out or selected */
.ph, .ph video, img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* Real images and videos: fill the box, cropped to fit (no drift) */
.ph-img { background-size: cover; background-position: center; background-repeat: no-repeat; animation: none; }
.ph-img video { opacity: 1; transition: opacity .35s ease; }
.ph-img video.is-loading { opacity: 0; }
.ph-img video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================= Top bar ================= */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--pad);
  z-index: 50;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 10px;
  background: var(--pill);
  color: var(--on-dark);
  border: 1px solid rgba(99, 99, 99, 0.05);
  backdrop-filter: blur(7px);              /* same glass as jasonbradley.co */
  -webkit-backdrop-filter: blur(7px);
  white-space: nowrap;
  transition: background .25s;
}
.pill:hover { background: var(--pill-hover); }
/* Over pictures / video / colour: darker glass for better reading */
.pill.on-media, .video-toggle, .video-sound, .video-expand { background: var(--pill-dark); }
.pill.on-media:hover, .video-toggle:hover, .video-sound:hover, .video-expand:hover { background: var(--pill-dark-hover); }

/* ---- Button text roll (from sidebvinyl.com) ---- */
[data-button] {
  --button-index-offset: 1;
  --button-char-offset: 0.02s;
  --button-ease-hover: cubic-bezier(0.625, 0.05, 0, 1);
}
[data-button-text] { display: inline-block; line-height: 1.2; white-space: nowrap; }
.button-char { display: inline-block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (hover: hover) and (pointer: fine) {
  [data-button-text] { clip-path: inset(0 -0.15em); }
  .button-char {
    text-shadow: 0 1.25em currentColor;
    transition: translate 0.3s var(--button-ease-hover), text-shadow 0.1s 0.15s ease;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-button]:is(:hover, :focus-visible) .button-char {
    translate: 0 -1.25em;
    transition:
      translate 0.5s calc((var(--char) - var(--button-index-offset)) * var(--button-char-offset)) var(--button-ease-hover),
      text-shadow 0.175s calc((var(--char) - var(--button-index-offset)) * 24ms + 0.25s) ease;
  }
}

.logo { font-weight: 400; }

.topbar-right { display: flex; gap: 8px; align-items: flex-start; }

#navMail { display: none; }
body.route-info #navInfo { display: none; }
body.route-info #navMail { display: inline-flex; }

/* Thumbnails (project page) */
.thumbs {
  position: absolute;
  left: 50%;
  top: var(--pad);
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility 0s .4s;
}
body.route-project .thumbs { opacity: 1; visibility: visible; transition: none; }

.thumb {
  width: 89px;
  height: 114px;
  border-radius: 5px;
  overflow: hidden;
  opacity: 0.85;
  transform-origin: 50% 0;
  will-change: transform;
  transition: opacity .3s;
}
.thumb > div { width: 100%; height: 100%; }
.thumb:hover { opacity: 1; }
.thumb.active { opacity: 1; }
.thumb:focus { outline: none; }

/* Copies of the home cards that fly into place when a project opens */
.ghost-layer {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
}
.ghost {
  position: fixed;
  overflow: hidden;
  will-change: left, top, width, height;
}

/* ================= Views ================= */
.view {
  display: none;
  min-height: 100vh;
}
.view.active { display: block; }
/* The page being left stays on screen (on top) while it animates out */
.view.leaving {
  position: fixed;
  left: 0; right: 0;
  z-index: 5;
  pointer-events: none;
}

/* ================= HOME ================= */
.view-home.active {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  height: 100dvh;              /* the visible screen on phones (address bar excluded) */
  overflow: hidden;
  padding-top: calc(var(--pad) + 32px);   /* starts right below the header buttons */
}

.statement {
  position: relative;
  z-index: 47;                 /* text stays above the side blur */
  /* fills the space between the header buttons and the cards,
     and sits vertically centred in it */
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  font-size: clamp(24px, 3.1vw, 42px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.045em;
  color: #C2C2C24D;
  max-width: 1300px;
  white-space: pre-line;       /* keeps the line break between the two lines */
}
.statement a:hover { opacity: .6; }
.statement-line { display: block; }

.strip {
  position: relative;
  width: 100%;
  padding-bottom: var(--pad);
  cursor: grab;
  user-select: none;
}
.strip.dragging { cursor: grabbing; }



.strip-track {
  display: flex;
  gap: 14px;
  will-change: transform;
}

.strip-card {
  flex: 0 0 auto;
  width: min(30vw, 400px);
  aspect-ratio: 400 / 512;
  max-height: 58vh;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transition: transform .6s var(--ease);
}
.strip-card:hover { transform: translateY(-14px); }
.strip-card .ph { width: 100%; height: 100%; }
/* Subtle dark gradient at the bottom of each card, so the caption reads well */
.strip-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 100%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.strip-card:hover::after { opacity: 1; }

.strip-card .card-name {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--on-dark);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s, transform .35s var(--ease);
  z-index: 1;                  /* above the dark gradient */
}
.strip-card:hover .card-name { opacity: 1; transform: none; }
.card-name b { display: block; font-weight: 400; }
.card-name span { opacity: .8; }

/* ================= PROJECT ================= */
.view-project { padding: 170px var(--pad) 120px; }

.project-media {
  width: 100%;
  height: calc(100vh - 170px - var(--pad));
  min-height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.project-media .ph { width: 100%; height: 100%; }
/* A project top made of rows of pictures (e.g. SIDE B: two rows of 4:5) */
.project-media.is-rows {
  height: auto;
  min-height: 0;
  overflow: visible;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* A top video is never cropped and always fits on screen: 16:9, as wide as
   possible while its full height fits below the thumbnails, centred */
.project-media.is-video {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  width: min(100%, calc((100vh - 170px - var(--pad)) * 16 / 9));
  margin: 0 auto;
}
/* Same size for a single full-width row at the top (e.g. Banco Montepio) */
.project-media.is-rows.is-fit {
  width: min(100%, calc((100vh - 170px - var(--pad)) * 16 / 9));
  margin: 0 auto;
}
/* Clicking the top video plays / pauses it */
.project-media.is-video video, video[data-sound] { cursor: pointer; }
/* Play / Pause: in the middle of the video, shown while hovering it */
.video-toggle {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s cubic-bezier(0.22, 1, 0.36, 1), background .25s;
}
/* (only on devices with a real mouse: phones keep a "hover" after a tap) */
@media (hover: hover) {
  .video-host:hover .video-toggle,
  .video-full-frame:hover .video-toggle,
  .video-toggle:focus-visible { opacity: 1; }
}
/* Phones (no hover): shown while the video is paused */
@media (hover: none) {
  .video-toggle[data-paused] { opacity: 1; }
}
/* Sound on / off (icon): top right, left of the full screen button */
.video-sound {
  position: absolute;
  right: calc(16px + 32px + 6px); top: 16px;
  z-index: 2;
  width: 32px;
  padding: 0;
  justify-content: center;
}
.video-sound svg { display: block; }
/* "Coming soon": a blurred layer over the video's first frame, with a label */
.video-soon {
  position: absolute;
  inset: 0;
  z-index: 1;                  /* above the video, below its buttons */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .18);
  pointer-events: none;
}
/* the frame itself is blurred (scaled up a little so the edges stay soft too) */
video[data-locked] { filter: blur(24px); transform: scale(1.2); }
.video-soon span {
  font-size: 12px;             /* same as the Play / Pause button */
  color: #fff;
}
video[data-locked] { cursor: default !important; }
/* Full screen button (top right of a video with buttons) */
.video-expand {
  position: absolute;
  right: 16px; top: 16px;
  z-index: 2;
  width: 32px;
  padding: 0;
  justify-content: center;
}
.video-expand svg { display: block; }

/* Full screen layer: a background that fades in, and the video gliding
   from its place on the page to the middle of the screen */
.video-full {
  position: fixed;
  inset: 0;
  z-index: 55;                 /* over the header */
  touch-action: none;
}
.video-full-bg {
  position: absolute;
  inset: -80px;                /* reaches past the screen edges so the blur stays even there */
  background: #000;
  opacity: 0;
  transition: opacity .6s ease;
}
.video-full-bg.is-blurred {
  background: rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.video-full-bg.in { opacity: 1; }
.video-full-frame {
  position: fixed;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  will-change: left, top, width, height, transform;
  transition: transform .7s cubic-bezier(0.22, 1, 0.36, 1);   /* turning sideways on phones */
}
.video-full-frame video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.video-full-keep { width: 100%; height: 100%; }


.project-body {
  position: relative;
  z-index: 47;                 /* text stays above the side blur */
  max-width: 700px;
  margin: 130px auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.project-title { font-size: 15px; font-weight: 400; margin-bottom: 52px; color: #ffffff; }
.project-text {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #C2C2C24D;
  margin-bottom: 52px;
  white-space: pre-line;       /* keeps paragraph breaks in project texts */
}

/* Credits + Visit site, side by side */
.project-buttons { display: flex; gap: 6px; justify-content: center; }
.project-buttons [hidden] { display: none; }
.credits {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 24px;
  text-align: left;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .6s var(--ease), opacity .4s, margin .4s;
}
.credits.open { max-height: 300px; opacity: 1; margin-top: 24px; }
.credits dt { color: #C2C2C24D; }
.credits dd { color: #ffffff; }

.project-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 14px;            /* images run straight on from the top media */
}
.project-gallery:empty { margin-top: 0; }
.g-center, .g-pair > div { position: relative; overflow: hidden; }
.g-center {
  width: min(64%, 900px);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
}
.g-pair {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.g-pair > div { aspect-ratio: 4 / 5; border-radius: var(--radius); }
/* Wide image: full page width, so its edges line up with the header
   buttons on the left and right (16:9) */
.g-full {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
}

/* Full width (same as the row of two above it), at the video's own shape */
.g-full.g-fit { width: 100%; aspect-ratio: auto; }
.g-full.g-fit video { height: auto; }
.reveal {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1s ease, transform 1.2s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* Fixed Credits / Close buttons */
.project-bar {
  position: fixed;
  left: 50%;
  bottom: var(--pad);
  display: flex;
  gap: 6px;
  z-index: 48;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .4s ease, transform .6s var(--ease);
}
.project-bar.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

/* ================= ARCHIVE ================= */
.view-archive.active { height: 100vh; overflow: hidden; position: relative; cursor: pointer; }
.archive-item, .archive-preview { cursor: auto; }

.archive-bg {
  position: fixed;
  inset: -10%;
  filter: blur(70px) saturate(1.1);
  z-index: 0;
}
.archive-bg > .layer,
.archive-preview > .layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.archive-bg > .layer.on,
.archive-preview > .layer.on { opacity: 1; }
.archive-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.12);
}

.archive-preview {
  position: fixed;
  /* left edge lines up with the "André Pina" button, vertically centred */
  left: var(--pad);
  top: 50%;
  translate: 0 -50%;
  /* same size and portrait shape as the homepage cards */
  width: min(30vw, 400px);
  aspect-ratio: 400 / 512;
  max-height: 58vh;
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 1;
  transition: opacity .3s;
}
.archive-preview .ph { width: 100%; height: 100%; }

.archive-list {
  position: fixed;
  top: 0; right: var(--pad); bottom: 0;
  width: min(400px, 40vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 58vh 0 var(--pad);   /* the list starts low and travels up as you scroll */
  scrollbar-width: none;
  z-index: 47;                 /* list stays above the side blur */
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.archive-list::-webkit-scrollbar { display: none; }

.archive-item {
  position: relative;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--glass-dark);       /* the Projects page sits over a coloured background */
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  cursor: pointer;
  transition: background .25s, transform .4s var(--ease);
}
.archive-item:hover, .archive-item.active { background: var(--glass-dark-active); }
.archive-item h3 { font-size: 15px; font-weight: 400; color: var(--fg); }
.archive-item p {
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 50px;
}
.archive-item.active h3, .archive-item.active p, .archive-item:hover h3, .archive-item:hover p { color: var(--fg); }
.archive-item .year {
  position: absolute;
  right: 18px; top: 16px;
  color: #C2C2C24D;
}
body.light .archive-item h3, body.light .archive-item p { color: rgba(0,0,0,.7); }
body.light .archive-item .year { color: rgba(0,0,0,.3); }

/* ================= INFO ================= */
.view-info { position: relative; z-index: 1; padding: var(--pad) var(--pad) 120px; }
/* The page About was opened from stays underneath, frozen and blurred */
.view.under-about {
  position: fixed;
  left: 0; right: 0;
  z-index: 0;
  pointer-events: none;
}
body.has-underlay .info-blobs { display: none; }
.view-info .info-col { cursor: auto; }

.info-blobs {
  position: fixed;
  left: -10%; right: -10%; bottom: -20%;
  height: 70vh;
  display: flex;
  gap: 4vw;
  filter: blur(60px);
  opacity: 0.85;
  z-index: 0;
}
.info-blobs > div { flex: 1; border-radius: 30px; }

.info-col {
  position: relative;
  z-index: 47;                 /* About blocks stay above the side blur */
  width: min(521px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.info-photo {
  aspect-ratio: 521 / 399;
  border-radius: 8px;
}

.glass {
  background: var(--glass);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 10px;
  padding: 22px 22px 24px;
  transition: background .4s ease;
}
/* About over a page (blurred underneath): darker blocks for better reading */
body.has-underlay .glass { background: var(--glass-dark); }
.glass-label { display: block; color: var(--faint); margin-bottom: 30px; }

.info-lead {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.info-lead a:hover { opacity: .6; }
.inline-link {
  text-decoration: none;
  position: relative;          /* keeps its hidden screen-reader label in place */
}
.info-lead a.inline-link:hover, .statement a.inline-link:hover { opacity: 1; }   /* the letter roll is the hover effect */
.inline-link [data-button-text] { line-height: inherit; vertical-align: top; }
#infoLead { white-space: pre-line; }

.clients {
  columns: 2;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Work Experience: studio name with its dates underneath */
.experience {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.experience span { display: block; }
.experience .exp-years {           /* the years, in the same size as the block title */
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

/* ================= Mobile ================= */
@media (max-width: 800px) {
  :root { --pad: 14px; }

  .pill { height: 28px; padding: 0 8px; font-size: 11px; }
    #navMail { display: none !important; }
  body.route-info #navInfo { display: inline-flex; }

  .thumbs { top: 52px; left: 0; transform: none; width: 100%; padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; }
  .thumb { flex: 0 0 auto; width: 56px; height: 72px; }

  .view-home.active { padding-top: calc(var(--pad) + 28px); }
  .strip-card { width: 58vw; max-height: none; }     /* a bit narrower: more of the strip shows */
  /* lifted clear of the phone's bottom bar */
  .strip { padding-bottom: calc(var(--pad) + 8vh + env(safe-area-inset-bottom, 0px)); }

  /* Captions and the dark gradient always visible; no lift on touch */
  .strip-card::after { opacity: 1; }
  .strip-card .card-name { opacity: 1; transform: none; font-size: 11px; }
  .strip-card:hover { transform: none; }

  /* Side blur: narrower and softer */
  .edge-blur { width: 26px; }
  .edge-blur i:nth-child(1) { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
  .edge-blur i:nth-child(2) { -webkit-backdrop-filter: blur(3px);   backdrop-filter: blur(3px); }
  .edge-blur i:nth-child(3) { -webkit-backdrop-filter: blur(4.5px); backdrop-filter: blur(4.5px); }
  .edge-blur i:nth-child(4) { -webkit-backdrop-filter: blur(6px);   backdrop-filter: blur(6px); }


  /* Type: the homepage text matches the header text; body texts a touch smaller */
  .project-title { font-size: 12px; }               /* same size as "Clients" on About */
  .info-lead, .clients, .experience, .project-text { font-size: 15px; }
  .glass-label, .experience .exp-years { font-size: 12px; }
  .archive-item h3 { font-size: 14px; }
  .archive-item p { font-size: 12px; }

  .view-project { padding-top: 150px; }
  .project-media { height: 60vh; }
  .project-media.is-rows { height: auto; }
  .project-media.is-video { height: auto; width: 100%; }
  .project-media.is-rows.is-fit { width: 100%; }
  .video-sound, .video-expand { width: 28px; }
  .video-sound { right: calc(16px + 28px + 6px); }
  .video-soon span { font-size: 11px; }
  .project-body { margin-top: 70px; }
  .g-center { width: 100%; }
  .g-pair { grid-template-columns: 1fr; }

  /* Projects: portrait preview centred right below the header; the list
     scrolls underneath and the line in the middle of it is the selected one */
  .archive-preview {
    left: 50%;
    top: calc(var(--pad) + 28px + 14px);
    translate: -50% 0;
    width: 44vw;
    max-height: none;
  }
  .archive-list {
    left: var(--pad);
    width: auto;
    top: 0;                          /* full screen: lines slide under the preview */
    padding: 0;                      /* top / bottom space is set by script.js */
    scroll-snap-type: y mandatory;
  }
  .archive-preview { z-index: 48; }  /* above the list, below the header */
  .archive-bg { filter: blur(40px) saturate(1.1); will-change: opacity; }   /* lighter for phones */
  .archive-list.is-opening { scroll-snap-type: none; }
  .archive-item {
    scroll-snap-align: center;
    /* no glass blur while scrolling on phones (it showed as a blurred band) */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(22, 22, 24, 0.62);
  }
  .archive-item:hover, .archive-item.active { background: rgba(22, 22, 24, 0.85); }

  .view-info { padding-top: 70px; }
}