/* ==================================================================
   SARATH KS. PORTFOLIO, V5
   Home: a desktop collage on the blurred landscape photograph.
   Click anywhere and the photograph comes into focus with the contact
   details. Scroll for two work pages: video editor, then graphics.
   ================================================================== */

:root {
  --ink: #0b0e0c;
  --ink-2: #141815;
  --text: #15171a;
  --text-2: rgba(21, 23, 26, .62);
  --paper: #f1eee6;
  --paper-2: rgba(241, 238, 230, .72);
  --paper-3: rgba(241, 238, 230, .5);
  --line: rgba(241, 238, 230, .16);
  --accent: #fff;

  --gutter: clamp(16px, 2.8vw, 40px);
  --bar-h: 0px;
  /* One unit scales the whole collage to the screen. */
  --u: min(1vw, 1.6vh);

  --ease: cubic-bezier(.2, .78, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --display: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: var(--display);
  --system: var(--display);
}

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

html {
  background: var(--ink);
  color: var(--paper);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

html:has(dialog[open]) { overflow: hidden; }

h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 3px;
}
/* A window takes the focus itself when it opens (autofocus on the dialog),
   so Safari no longer draws a white box around its close button. */
dialog:focus, dialog:focus-visible { outline: none; }

.eyebrow {
  font: 400 12px/1.4 var(--mono);
  color: var(--paper-2);
}

.skip {
  position: fixed;
  z-index: 100;
  left: var(--gutter);
  top: -60px;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink);
  font: 400 13px var(--mono);
}
.skip:focus { top: 10px; }

/* ---------- Home ---------- */

.desk {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

/* The photograph, just blurred. No wash and no overlay. */
.photo {
  position: absolute;
  inset: -3%;
  background: url('assets/portrait-white-shirt.webp') 50% 40% / cover no-repeat;
  filter: blur(5px);
  transform: scale(1.03);
  transition: filter 1s var(--ease), transform 1.2s var(--ease);
}

.center {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(19.66vw, 34.9vh);
  translate: -50% -42%;
  text-align: center;
  color: #fff;
  transition: opacity .45s ease, scale .7s var(--ease);
}
.name {
  display: flex;
  justify-content: center;
  font-size: 8vw;   /* script.js fits this exactly */
  font-weight: 600;
  font-kerning: normal;
  line-height: 1.1;
  letter-spacing: -.08em;   /* Photoshop tracking -80 */
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.word { display: block; clip-path: inset(0 -1em); }
.name i { font-style: normal; }
.ch {
  display: inline-block;
  transition: transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 30ms + 80ms);
}
.js .desk:not(.is-in) .ch { transform: translateY(108%); }
.desk.is-settled .word { clip-path: none; }
.desk.is-settled .ch { transition: none; transform-origin: 0 100%; }

/* Photoshop sizes 18 and 8.5. To change the title, edit the .center width. */
.tagline {
  margin-top: calc(var(--title-size, 76px) * -.04);
  font-size: max(14px, calc(var(--title-size, 76px) * .4));
  white-space: nowrap;
  font-weight: 300;
  line-height: 1.2;
}

/* Collage items */

.items { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--w) * var(--u));
  translate: var(--dx, 0px) var(--dy, 0px);
  pointer-events: auto;
  text-align: left;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  transition: translate .7s var(--ease);
  /* Its own layer, so Safari repaints the whole label when it moves. Without
     this, the parts of a folder name wider than the icon were left behind. */
  will-change: transform;
}
.item.is-dragging, .item.is-gliding { transition: none; }
.item.is-dragging { cursor: grabbing; }

.item__body {
  display: block;
  transition: transform .75s var(--ease), opacity .45s ease, filter .6s ease;
  transition-delay: calc(var(--i) * 14ms);
}
/* Opening, one thing after another, never in a rush: the photo fades in,
   the name rises, the line under it follows, then the dock, then the work,
   one piece at a time. */
.js .desk:not(.is-in) .photo { opacity: 0; }
.js .desk.is-entering .photo { transition: opacity .7s ease, filter 1s var(--ease), transform 1.2s var(--ease); }
.js .desk:not(.is-in) .tagline { opacity: 0; translate: 0 10px; }
.js .desk.is-entering .tagline { transition: opacity .6s ease .55s, translate .7s var(--ease-out) .55s; }
.js .desk:not(.is-in) .item__body { opacity: 0; transform: scale(.86) translateY(18px); }
.js .desk.is-entering .item__body {
  transition: transform .6s var(--ease-out), opacity .4s ease;
  transition-delay: calc(var(--i) * 55ms + 1.05s);
}
.item:hover .item__body { transform: translateY(-5px) scale(1.025); transition-delay: 0s; }
.item:focus-visible .item__body { transform: scale(1.03); }

/* Windows */
.win {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #f4f3f0;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .4);
}
.win__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 25px;
  padding: 0 8px;
  color: #33363a;
}
.win__bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.win__bar i:nth-child(2) { background: #febc2e; }
.win__bar i:nth-child(3) { background: #28c840; }
.win__bar b {
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 12px var(--system);
}
.win__media { position: relative; display: block; overflow: hidden; }
.win__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.item--player .win__media { aspect-ratio: 16 / 10.5; }
/* Video windows take the true shape of their video. */
.item--wide .win__media { aspect-ratio: 16 / 9; }
.item--tall .win__media { aspect-ratio: 9 / 16; }
.items .item--tall { --w: 8.6; min-width: 150px; }
/* The silent preview sits over the still frame and fades in once it plays. */
.win__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.item.is-playing .win__video { opacity: 1; }
.item.is-playing .win__ctrl svg { opacity: 0; }
.item--window .win__media { aspect-ratio: 4 / 5; }
.item--player, .item--window { min-width: 186px; }

.win__ctrl {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(18, 18, 18, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.win__ctrl svg { flex: none; width: 11px; height: 11px; fill: #fff; }
.win__ctrl span { flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #fff var(--t, 35%), rgba(255, 255, 255, .34) var(--t, 35%)); }

/* Prints */
.print { display: block; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .4); }
.print__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px; }
.print img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.item__label {
  display: block;
  width: max-content;
  margin: 7px 0 0 50%;
  translate: -50% 0;
  white-space: nowrap;
  color: #fff;
  font: 500 13px var(--system);
}

/* Folders */
.item--folder { text-align: center; }
.item--folder svg { display: block; width: 100%; height: auto; pointer-events: none; }
.item--folder .item__label { font-weight: 500; font-size: 13px; }
/* The Logos zip file is a little narrower than a folder, like on a Mac. */
.item--zip .item__icon { display: block; width: 94%; height: auto; margin: 0 auto; pointer-events: none; }
/* The AI Toolkit text document, sized to sit evenly with the folders. */
.item--doc .item__icon { display: block; width: 72%; height: auto; margin: 0 auto; pointer-events: none; }

.item:nth-child(1)  { --x: 6%;    --y: 9%;  --w: 12; }
.item:nth-child(2)  { --x: 84.5%; --y: 8%;  --w: 9.2; }
.item:nth-child(3)  { --x: 7%;    --y: 67%; --w: 11.5; }
.item:nth-child(4)  { --x: 25%;   --y: 15%; --w: 6.2; }
.item:nth-child(5)  { --x: 67%;   --y: 12%; --w: 11; }
.item:nth-child(6)  { --x: 84%;   --y: 54%; --w: 9; }
.item:nth-child(7)  { --x: 66.5%; --y: 71%; --w: 11.5; }
.item:nth-child(8)  { --x: 26%;   --y: 70%; --w: 6.2; }
.item:nth-child(9)  { --x: 42%;   --y: 13%; --w: 4.6; }
.item:nth-child(10) { --x: 53.5%; --y: 10%; --w: 4.6; }
.item:nth-child(11) { --x: 9%;    --y: 43%; --w: 4.6; }

.hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 104px;
  translate: -50% 0;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  transition: opacity .45s ease;
}
/* Instead of an arrow: now and then the top of the Video work page peeks up
   from the bottom edge and slides away again, so people know there is more
   below. The dock floats over it. */
.peek {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  padding: 14px var(--gutter) 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--ink);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -30px 70px rgba(0, 0, 0, .3);
  transform: translateY(110%);
  pointer-events: none;
}
.peek i { width: 12px; height: 12px; margin-top: 8px; border-radius: 50%; background: #ff5f57; }
.peek i:nth-child(2) { background: #febc2e; }
.peek i:nth-child(3) { background: #28c840; }

/* Right-click menu */
.ctx {
  position: fixed;
  z-index: 40;
  min-width: 200px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(246, 245, 241, .97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
  color: var(--text);
}
.ctx button {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border-radius: 5px;
  text-align: left;
  font: 400 13px var(--system);
  white-space: nowrap;
}
.ctx button:hover, .ctx button:focus-visible { background: #15171a; color: #fff; outline: none; }
.ctx hr { height: 1px; margin: 4px 8px; border: 0; background: rgba(21, 23, 26, .12); }

/* Revealed state */

.desk.is-contact .photo { filter: none; transform: scale(1); }
.desk.is-contact .center { opacity: 0; scale: .97; pointer-events: none; }
.desk.is-contact .hint { opacity: 0; pointer-events: none; }

/* Both Click anywhere lines arrive about a second after their screen. */
@keyframes hint-in { from { opacity: 0; } to { opacity: 1; } }
.hint { animation: hint-in .6s ease 2.25s both; }
.desk.is-contact .hint { animation: none; }
.desk.is-contact .contact__back { animation: hint-in .7s ease 1.2s both; }
.desk.is-contact .item { pointer-events: none; }
.desk.is-contact .item__body { opacity: 0; filter: blur(8px); }
.desk.is-contact .item[data-side="left"] .item__body { transform: translateX(-40vw) rotate(-8deg); }
.desk.is-contact .item[data-side="right"] .item__body { transform: translateX(40vw) rotate(8deg); }

.contact {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6vw;
  padding: 24px clamp(20px, 5.2vw, 84px) clamp(60px, 9vh, 90px);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity .55s ease, visibility .55s;
}
.desk.is-contact .contact { opacity: 1; visibility: visible; transition-delay: .25s; }
.contact a, .contact button { cursor: pointer; }

.contact__main { width: min(42vw, 560px); }
.contact h2 {
  margin-top: 8px;
  font-size: clamp(44px, min(5.4vw, 11vh), 88px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.08em;
}
.contact__lines { margin-top: clamp(16px, 3vh, 28px); }
.contact__lines li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  padding: 8px 0;
}
/* Email and phone pop up on hover, like the social links. No underline. */
.contact__lines a {
  display: inline-block;
  font-size: clamp(17px, 1.6vw, 23px);
  font-weight: 400;
  overflow-wrap: anywhere;
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
/* Only the size changes. A bolder weight would widen the text and shift the
   whole Get in touch block, so the weight stays the same. */
.contact__lines a:hover,
.contact__lines a:focus-visible,
.contact__lines a:active {
  transform: scale(1.12);
}

.contact__social { flex: none; }
.contact__social li { }
/* Logo and name are one link that pops up on hover. */
.contact__social a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 500;
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), font-weight .3s ease;
}
.contact__social a:hover,
.contact__social a:focus-visible,
.contact__social a:active {
  transform: translateY(-2px) scale(1.16);
  font-weight: 600;
}
.glyph {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  font-size: 14px;
  font-weight: 600;
}
.glyph svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.contact__back {
  position: absolute;
  left: 50%;
  bottom: 102px;
  translate: -50% 0;
  font: 400 13px var(--mono);
  white-space: nowrap;
  pointer-events: none;
}

/* Dock */

.dock {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 12px;
  translate: -50% 0;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  height: 80px;
  padding: 11px 13px;
  border-radius: 26px;
  /* Liquid glass: clear, half the old blur, with light caught on the edges. */
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .09));
  -webkit-backdrop-filter: blur(13px) saturate(1.8) brightness(1.06);
  backdrop-filter: blur(13px) saturate(1.8) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    inset 1px 0 0 rgba(255, 255, 255, .14),
    inset -1px 0 0 rgba(255, 255, 255, .14),
    inset 0 0 18px rgba(255, 255, 255, .1),
    0 12px 32px rgba(0, 0, 0, .18);
  isolation: isolate;
}
/* A soft highlight across the top, like light on curved glass. */
.dock::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  top: 1px;
  height: 45%;
  border-radius: 24px 24px 50% 50% / 24px 24px 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.js .desk:not(.is-in) .dock { opacity: 0; translate: -50% 20px; }
.js .desk.is-entering .dock { transition: opacity .55s ease .8s, translate .7s var(--ease-out) .8s; }

.dock__app {
  position: relative;
  width: calc(56px * var(--m, 1));
  height: calc(56px * var(--m, 1));
  flex: none;
  border-radius: 13px;
  /* Grows and settles softly instead of snapping. */
  transition: width .5s cubic-bezier(.22, 1, .36, 1), height .5s cubic-bezier(.22, 1, .36, 1);
}
.dock.is-tracking .dock__app { transition-duration: .32s; }
.dock__app img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.dock__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 16px);
  translate: -50% 6px;
  width: max-content;
  min-width: 208px;
  padding: 11px 15px 12px;
  border-radius: 12px;
  background: rgba(20, 21, 22, .94);
  color: #fff;
  text-align: left;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease .06s, translate .35s var(--ease) .06s;
}
.dock__tip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% 0;
  border: 8px solid transparent;
  border-top-color: rgba(20, 21, 22, .94);
  border-bottom: 0;
}
.dock__tip strong { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 500; }
.dock__meta { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dock__meta small { font-size: 13px; color: rgba(255, 255, 255, .7); }
.dock__app:hover .dock__tip,
.dock__app:focus-visible .dock__tip,
.dock__app.is-open .dock__tip { opacity: 1; translate: -50% 0; }

.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .26); }
.dots i.on { background: #fff; }

/* ---------- Work page 1: the video timeline ---------- */

.reel {
  position: relative;
  z-index: 2;
  height: calc(var(--reels, 4) * 75vh + 100vh);
  background: var(--ink);
  border-radius: 14px 14px 0 0;
  color: var(--paper);
  box-shadow: 0 -30px 70px rgba(0, 0, 0, .3);
}
.reel__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 2vh, 20px);
  padding: calc(var(--bar-h) + 14px) var(--gutter) 20px;
  border-radius: 14px 14px 0 0;
  isolation: isolate;
}

.reel__ambient { position: absolute; inset: -14%; z-index: -1; }
.reel__ambient img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(80px) saturate(1.45) brightness(.5);
  opacity: 0;
  transition: opacity .9s ease;
}
.reel__ambient img.is-on { opacity: 1; }

.reel__head { display: flex; align-items: center; gap: 18px; min-height: 28px; white-space: nowrap; }
/* The Instagram repost badge pops like the other links on hover. */
.reel__highlight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.reel__highlight:hover, .reel__highlight:focus-visible { transform: scale(1.08); }
.reel__lights { display: flex; align-items: center; gap: 8px; }
.reel__lights > * { display: block; width: 12px; height: 12px; border-radius: 50%; }
.reel__lights > :nth-child(1) { background: #ff5f57; position: relative; }
.reel__lights > :nth-child(1)::after { content: ''; position: absolute; inset: -8px; }
.reel__lights > :nth-child(2) { background: #febc2e; }
.reel__lights > :nth-child(3) { background: #28c840; }
.reel__tc { margin-left: auto; font: 400 clamp(15px, 1.5vw, 20px) var(--display); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.reel__touch { font-size: 14px; font-weight: 500; white-space: nowrap; opacity: .9; transition: opacity .25s; }
.reel__touch:hover { opacity: 1; }

.reel__cards { position: relative; min-height: 0; }
.card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  visibility: hidden;
}
.card.is-active { visibility: visible; }

.card__text { min-width: 0; }
.card__no { font: 400 13px var(--mono); color: var(--paper-2); margin-bottom: 12px; }
.card__no b { font-weight: 400; color: var(--accent); }
.card h3 {
  overflow: hidden;
  padding: 0 .08em .06em 0;
  font-size: clamp(40px, min(6.8vw, 13vh), 124px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.08em;
  text-transform: uppercase;
  text-wrap: balance;
}
.card h3 span { display: block; transform: translateY(102%); }
.card.is-active h3 span { transform: none; transition: transform .8s var(--ease-out); }
.card__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  margin-top: clamp(12px, 2.2vh, 22px);
  max-width: 620px;
  opacity: 0;
}
.card.is-active .card__sub { opacity: 1; transition: opacity .7s ease .18s; }
.card__desc { flex: 1 1 100%; font-size: clamp(16px, 1.35vw, 20px); font-weight: 300; line-height: 1.4; color: var(--paper-2); }
.card__meta { font: 400 13px var(--mono); color: var(--paper-2); }
.card__open {
  font: 400 13px var(--mono);
  padding-bottom: 2px;
}

.card__frame {
  display: block;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 5px;
  overflow: hidden;
  cursor: zoom-in;
  clip-path: inset(0 0 100% 0);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
}
.card.is-active .card__frame { clip-path: inset(0); transition: clip-path .85s var(--ease-out); }
.card__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.card__frame:hover img { transform: scale(1.035); }
.card__frame { position: relative; background: #000; }
.card__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.card.is-playing .card__frame video { opacity: 1; }
/* Landscape videos take a share of the width instead of the full height. */
.card__frame--wide { height: auto; width: 50vw; max-width: 100%; align-self: center; justify-self: end; }
.card--wide h3 { font-size: clamp(40px, min(5.4vw, 10vh), 96px); }
.card__sound {
  position: absolute;
  left: 50%;
  bottom: 14px;
  translate: -50% 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(12, 14, 13, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s ease, translate .25s var(--ease);
}
.card__frame:hover .card__sound, .card__frame:focus-visible .card__sound { opacity: 1; translate: -50% 0; }
/* The speaker on a work card: bottom right, frosted, always there while it plays. */
.card__mute {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(12, 14, 13, .5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .3s ease, transform .25s cubic-bezier(.32, .72, 0, 1), background .25s;
  cursor: pointer;
}
.card.is-playing .card__mute, .card__mute.is-on { opacity: 1; }
.card__mute:hover { background: rgba(12, 14, 13, .72); }
.card__mute:active { transform: scale(.9); }
.card__mute svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card__mute svg .f { fill: #fff; stroke: none; }
.card__badge {
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.timeline {
  --label: 34px;
  position: relative;
  padding: 0 0 2px;
}
.timeline__ruler {
  position: relative;
  height: 22px;
  margin-left: var(--label);
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 64)) bottom / 100% 5px no-repeat;
}
.timeline__ruler span {
  position: absolute;
  top: 3px;
  font: 400 12px var(--mono);
  color: var(--paper-3);
  padding-left: 4px;
  line-height: 14px;
}
.timeline__row { display: flex; align-items: stretch; margin-top: 4px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.timeline__label {
  flex: 0 0 var(--label);
  align-self: center;
  font: 400 12px var(--mono);
  color: var(--paper-3);
}
.timeline__clips { flex: 1; display: flex; gap: 2px; min-width: 0; }
.clip {
  position: relative;
  flex: var(--len) 1 0;
  min-width: 0;
  height: clamp(44px, 7vh, 62px);
  overflow: hidden;
  border-radius: 3px;
  background-repeat: repeat-x;
  background-size: auto 100%;
  filter: saturate(.55) brightness(.62);
  transition: filter .35s;
}
.clip:hover, .clip.is-active { filter: none; }
.clip span {
  position: absolute;
  left: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  padding: 1px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(8, 10, 9, .78);
  font: 400 12px var(--mono);
  text-align: left;
}
.timeline__wave { position: relative; flex: 1; height: 26px; min-width: 0; }
.timeline__wave svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.timeline__wave path { fill: rgba(76, 201, 120, .32); }
.timeline__wave svg + svg { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.timeline__wave svg + svg path { fill: #4cd37a; }

/* The text layer: one long, unbroken tan layer, like a title track. */
.timeline__row--text { margin-top: 2px; }
.tbar { flex: 1; height: 14px; border-radius: 3px; background: #b5a48a; opacity: .85; }

.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--label) + (100% - var(--label)) * var(--p, 0));
  width: 1px;
  background: var(--accent);
  pointer-events: none;
}
.playhead::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0;
  border: 5.5px solid transparent;
  border-top: 8px solid var(--accent);
}

/* The folder card: a grid of the reels inside. */
.card__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  background: #000;
}
.card__grid img { width: 100%; height: 100%; object-fit: cover; }
a.card__badge { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
a.card__badge:hover, a.card__badge:focus-visible { transform: scale(1.08); }

/* ---------- Reel folder window: a horizontal strip ---------- */

.window.window--dump {
  --reel-h: clamp(260px, calc(94dvh - 270px), 760px);
  --reel-w: calc(var(--reel-h) * 9 / 16);
  width: calc(100vw - 48px);
  max-width: none;
  height: 94dvh;
  max-height: 94dvh;
  /* 95% opaque, so the homepage shows through just a touch. */
  background: rgba(17, 19, 18, .95);
  color: var(--paper);
}
.window--dump .window__bar { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.window--dump .window__name { color: var(--paper-2); }
.window--dump .light:not(.light--close) { background: rgba(255, 255, 255, .16); }
.strip__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 22px clamp(20px, 3vw, 44px) 0;
}
.window.window--dump .eyebrow { color: var(--paper-2); }
.window--dump h2 { color: var(--paper); font-size: clamp(28px, 3vw, 42px); }
.strip__count { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--paper-2); }

.strip__box { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.strip {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  padding: 0 calc(50% - var(--reel-w) / 2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}
.strip::-webkit-scrollbar { display: none; }
.reelx {
  position: relative;
  flex: none;
  width: var(--reel-w);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  scroll-snap-align: center;
  opacity: .38;
  transform: scale(.84);
  transition: transform .5s var(--ease), opacity .5s ease;
}
.reelx.is-active { opacity: 1; transform: none; }
/* While the folder flows open, script.js shapes each reel frame by frame. */
.is-flowing .reelx { transition: none; will-change: transform, opacity, filter; }
.reelx:not(.is-active):hover { opacity: .6; }
.reelx img, .reelx video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.reelx video { opacity: 0; transition: opacity .3s ease; }
.reelx.is-playing video { opacity: 1; }
/* In the folder, the reel in the middle has a full video player. */
.has-player .reelx.is-active video { opacity: 1; }
.has-player .reelx.show-player video { pointer-events: auto; }
.has-player .strip__sound { display: none; }

.strip__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  padding: 14px clamp(20px, 3vw, 44px) 22px;
}
.strip__info { min-width: min(320px, 40vw); text-align: center; }
.strip__name { font-size: 17px; font-weight: 500; }
.strip__meta { font-size: 13px; color: var(--paper-2); }
.strip__arrow {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  font-size: 18px;
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), background .25s;
}
.strip__arrow:hover, .strip__arrow:focus-visible { transform: scale(1.1); background: rgba(255, 255, 255, .16); }
.strip__sound {
  flex: none;
  padding: 6px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  font-size: 13px;
  transition: background .25s;
}
.strip__sound:hover { background: rgba(255, 255, 255, .16); }

/* The Logos folder: the same dark strip, with wide 3:2 logo cards. */
.window.window--logos {
  --reel-h: clamp(220px, calc(94dvh - 300px), 600px);
  --reel-w: min(calc(var(--reel-h) * 3 / 2), 64vw);
}
.window--logos .reelx { aspect-ratio: var(--reel-ratio, 3 / 2); border-radius: 12px; }
.window--logos .strip__sound { display: none; }
/* The Logos window is white with dark text: the opposite of the reel folder. */
.window.window--logos { background: rgba(247, 246, 242, .95); color: var(--text); }
.window--logos .window__bar { border-bottom-color: rgba(0, 0, 0, .08); }
.window--logos .window__name { color: rgba(21, 23, 26, .6); }
.window--logos .light:not(.light--close) { background: rgba(21, 23, 26, .14); }
.window.window--logos .eyebrow, .window--logos .strip__count, .window--logos .strip__meta { color: rgba(21, 23, 26, .55); }
.window--logos h2, .window--logos .strip__name { color: #15171a; }
/* Showing only its folders, the zip window is just big enough for them. */
.window.window--logos.is-folders { width: fit-content; height: fit-content; max-height: none; }
.is-folders .zip__folders { flex: none; padding: 40px 64px 44px; }
/* Inside a zip with several groups: big Finder-style folders. */
.zip__folders {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 8vw, 120px);
}
.zip__folder { display: flex; flex-direction: column; align-items: center; gap: 12px; width: clamp(110px, 10vw, 150px); }
.zip__folder svg { width: 100%; height: auto; transition: transform .35s var(--ease); }
.zip__folder:hover svg { transform: scale(1.05); }
.zip__folder span { font-size: 15px; font-weight: 500; color: #15171a; }
/* The back arrow in the bar, Finder style: just the arrow. */
.window__back { display: grid; place-items: center; width: 22px; height: 22px; margin-left: 10px; opacity: .6; transition: opacity .2s; }
.window__back:hover { opacity: 1; }
.window__back svg { width: 8px; height: 13px; fill: none; stroke: #15171a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Brand names written in small letters (appleby) stay that way. */
.window--logos h2.is-lowercase { text-transform: none; }
.window--logos .reelx { background: #e9e8e4; opacity: .45; }
.window--logos .reelx.is-active { opacity: 1; }

/* The Motion graphics folder: the dark strip with wide 16:9 cards. */
.window.window--motion {
  --reel-h: clamp(220px, calc(94dvh - 300px), 620px);
  --reel-w: min(calc(var(--reel-h) * 16 / 9), 70vw);
}
.window--motion .reelx { aspect-ratio: 16 / 9; }
.window--motion .reelx img, .window--motion .reelx video { object-fit: contain; background: #000; }

/* The reel strip on the Video work page: sized from its own height. */
.card__strip {
  height: 100%;
  width: min(62vw, 980px);
  color: var(--paper);
}
.card__strip .strip { container-type: size; padding: 0; }
.card__strip .strip::before, .card__strip .strip::after { content: ''; flex: none; width: calc(50cqw - 28.125cqh); }
.card__strip .reelx { width: 56.25cqh; }
.card__strip .strip__foot { padding: 10px 0 0; }
.card__frame--dump { display: none; }
@media (max-width: 899px), (max-height: 599px) {
  .card__strip { display: none; }
  .card__frame--dump { display: block; }
}

/* ---------- Project viewer ---------- */

/* Full screen, with the macOS buttons at the top left and the video's own
   blurred colours behind it. The small video morphs into it (script.js). */
.viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  /* Rounded top corners, like the Video work page. */
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  isolation: isolate;
  /* The dark background is its own layer (.viewer__back) so it can fade in
     while the video grows, instead of appearing all at once. */
  background: transparent;
  color: var(--paper);
}
.viewer__back { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.viewer[open] {
  display: grid;
  grid-template-columns: auto fit-content(400px);
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  padding: 64px var(--gutter) 40px;
}
.viewer__bar {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
}
.viewer__bar .light--min { background: #febc2e; }
.viewer__bar .light:hover { filter: brightness(.85); }
.viewer__glow {
  position: absolute;
  inset: -14%;
  z-index: -1;
  background-size: cover;
  background-position: center;
  filter: blur(80px) saturate(1.45) brightness(.5);
}
.viewer__shot {
  position: relative;
  height: min(860px, calc(100dvh - 140px));
  aspect-ratio: 2 / 3;
}
.viewer__shot.is-wide { height: auto; width: min(1000px, calc(100vw - 2 * var(--gutter) - 340px - clamp(40px, 5vw, 80px) - 8vw)); }
.viewer[open]:has(.is-wide) { grid-template-columns: auto fit-content(340px); }
/* The picture fills the box without pushing it wider. */
.viewer__shot > video, .viewer__shot > img { position: absolute; inset: 0; }
.viewer__shot video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
  background: #000;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .8);
}
.viewer__shot [hidden] { display: none; }
.viewer__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .8);
}
.viewer__text { position: relative; max-width: 520px; }
.viewer__text h2 {
  margin-top: 10px;
  font-size: clamp(34px, 4.2vw, 68px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.08em;
  text-transform: uppercase;
}
.viewer__desc { margin-top: 18px; font-size: clamp(17px, 1.4vw, 20px); font-weight: 300; line-height: 1.45; color: var(--paper-2); }
.viewer__desc:empty { display: none; }
[hidden] { display: none !important; }
.viewer__link {
  display: inline-block;
  margin-top: 22px;
  padding-bottom: 2px;
  font: 400 14px var(--mono);
}
.viewer__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(28px, 6vh, 56px);
  font: 400 13px var(--mono);
  color: var(--paper-2);
}
.viewer__nav button, .viewer__close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--paper);
  transition: background .25s, color .25s;
}
.viewer__nav button:hover, .viewer__close:hover { opacity: .65; }
.viewer__close {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  top: 16px;
  font-size: 24px;
  line-height: 1;
}

::view-transition-group(shot) { animation-duration: .6s; animation-timing-function: var(--ease-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* ---------- Quick Look, for pictures ---------- */

.quicklook {
  margin: auto;
  padding: 0;
  border: 0;
  max-width: none;
  max-height: none;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
  color: #fff;
  isolation: isolate;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
/* Liquid glass, the same recipe as the dock: the page behind is blurred and
   brightened, with light caught on the edges. It sits on its own layer, as
   Safari hides a window's shadow when the blur is on the window itself. */
.quicklook::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, .12));
  -webkit-backdrop-filter: blur(24px) saturate(1.8) brightness(1.06);
  backdrop-filter: blur(24px) saturate(1.8) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 0 rgba(255, 255, 255, .18),
    inset 1px 0 0 rgba(255, 255, 255, .16),
    inset -1px 0 0 rgba(255, 255, 255, .16),
    inset 0 0 22px rgba(255, 255, 255, .12);
  pointer-events: none;
}
.quicklook[open] { display: flex; flex-direction: column; }
.quicklook::backdrop { background: transparent; }
.quicklook__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px;
}
/* Just the × itself: no circle behind it. */
.quicklook__close {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  opacity: .85;
  transition: opacity .2s;
}
.quicklook__close:hover { opacity: 1; }
.quicklook__close svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; }
.quicklook__name { font-size: 13px; font-weight: 600; text-shadow: none; }
.quicklook__img {
  display: block;
  height: min(86dvh, 980px);
  width: auto;
  max-width: calc(92vw - 16px);
  margin: 0 8px 8px;
  border-radius: 11px;
  object-fit: contain;
}

/* ---------- Windows ---------- */

.window {
  width: min(960px, calc(100vw - 32px));
  max-width: none;
  max-height: min(86dvh, 840px);
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #f7f6f2;
  color: var(--text);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .34);
}
.window[open] { display: flex; flex-direction: column; animation: window-in .4s var(--ease-out); }
.window.is-zoomed { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); height: 100dvh; }
.window::backdrop { background: rgba(20, 20, 18, .22); }
.viewer::backdrop { background: transparent; }
@keyframes window-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.window__bar {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
}
.light {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(21, 23, 26, .14);
}
button.light::after { content: ''; position: absolute; inset: -8px -3px; }
.light--close { background: #ff5f57; }
.light--zoom { background: #28c840; }
.window__name {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.window__body { overflow: auto; padding: clamp(22px, 3.2vw, 36px); }
.window .eyebrow { color: var(--text-2); }
.window h2 {
  margin-top: 4px;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.08em;
  text-transform: uppercase;
}
.window__intro { max-width: 36em; margin-top: 8px; font-weight: 300; color: var(--text-2); }

/* ---------- AI Toolkit: a small text window ---------- */
.window.window--ai { width: min(560px, calc(100vw - 32px)); }
/* The skills read as a quiet description under the title. */
.toolkit__skills { margin-top: 6px; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--text-2); white-space: nowrap; }
@media (max-width: 767.98px) { .toolkit__skills { white-space: normal; } }
.toolkit__skills b { font-weight: 600; color: var(--text); }
.toolkit { margin-top: 16px; }
.toolkit div {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid rgba(21, 23, 26, .08);
}
.toolkit dt { font-size: 14px; font-weight: 600; }
.toolkit dd { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--text-2); }

/* ---------- Smaller screens ---------- */

/* Tablets and small windows: work pages flow normally. */
/* The Brik Oven folder sits in a video window's spot, at folder size. */
.items .item--folder:nth-child(7) { --w: 4.6; }
@media (min-width: 900px) and (orientation: landscape) {
  .items .item--folder:nth-child(7) { --x: 78%; --y: 77%; }
}

/* Laptops and desktops: keep white text off the white shirt. */
@media (min-width: 900px) and (orientation: landscape) {
  /* Be creative. a little smaller than the 18 / 8.5 ratio. */
  .tagline { font-size: max(14px, calc(var(--title-size, 76px) * .38)); }
  .contact__lines a { font-size: clamp(15px, 1.3vw, 19px); }

  /* Both hints sit small at the top centre. */
  .hint, .contact__back {
    top: clamp(14px, 2.4vh, 24px);
    bottom: auto;
    left: 50%;
    right: auto;
    translate: -50% 0;
    font-size: 12px;
  }
  .item:nth-child(8) { --x: 24%; --y: 38%; }

  /* Get in touch moves right, over the grey wall. Socials sit bottom left. */
  .contact { flex-direction: row-reverse; }
  .contact__main { width: max-content; }
}

@media (max-width: 899px), (max-height: 599px) {
  .reel { height: auto; min-height: 100svh; }
  .reel__pin {
    position: relative;
    height: auto;
    min-height: 100svh;
    display: block;
    padding: 14px 0 28px;
  }
  .reel__head { padding: 0 var(--gutter); }
  .reel__cards {
    display: flex;
    gap: 14px;
    margin-top: 18px;
    padding: 0 var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .reel__cards::-webkit-scrollbar { display: none; }
  .card {
    position: relative;
    inset: auto;
    flex: 0 0 min(66vw, 340px, 44svh);
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    justify-content: flex-end;
    gap: 14px;
    visibility: visible;
    scroll-snap-align: start;
  }
  .card__frame { height: auto; width: 100%; clip-path: none; }
  .card h3 { font-size: clamp(30px, 8vw, 44px); }
  .card h3 span { transform: none; }
  .card__sub { opacity: 1; }
  .card__no { margin-bottom: 6px; }
  .timeline { margin: 20px var(--gutter) 0; --label: 0px; }
  .timeline__label, .clip span { display: none; }
  .clip { height: 34px; }
  .timeline__ruler span:nth-child(even) { display: none; }

}

/* Tablets held upright */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  :root { --u: 1.45vw; }
  .center { width: 28vw; }
  .item:nth-child(1)  { --x: 6%;  --y: 6%;  --w: 16; }
  .item:nth-child(2)  { --x: 73%; --y: 5%;  --w: 12; }
  .item:nth-child(3)  { --x: 6%;  --y: 63%; --w: 16; }
  .item:nth-child(4)  { --x: 41%; --y: 7%;  --w: 8.5; }
  .item:nth-child(5)  { --x: 50%; --y: 27%; --w: 15; }
  .item:nth-child(6)  { --x: 73%; --y: 62%; --w: 11; }
  .item:nth-child(7)  { --x: 47%; --y: 76%; --w: 15; }
  .item:nth-child(8)  { --x: 34%; --y: 63%; --w: 8.5; }
  .item:nth-child(9)  { --x: 9%;  --y: 27%; --w: 6.5; }
  .item:nth-child(10) { --x: 32%; --y: 26%; --w: 6.5; }
  .item:nth-child(11) { --x: 11%; --y: 80%; --w: 6.5; }

  .desk.is-contact .photo { transform: translateY(-6%) scale(1.14); }
  .contact {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 18px;
    padding-bottom: 134px;
  }
  .contact__main { width: min(560px, 100%); }
  .contact__social ul { display: flex; gap: 26px; margin-top: 0; }
  .contact__social li { border: 0; }
  .contact__social a { padding: 0; }
}

/* Phones */
@media (max-width: 760px) {
  :root { --u: min(1vw, .46vh); }
  body { font-size: 16px; }

  .center { width: 44vw; top: 48%; translate: -50% -50%; }

  .item__label { font-size: 12px; margin-top: 5px; }
  .win__bar { height: 19px; padding: 0 6px; gap: 3px; }
  .win__bar i { width: 6px; height: 6px; }
  .win__ctrl { left: 5px; right: 5px; bottom: 5px; padding: 3px 6px; }

  .item:nth-child(1)  { --x: 6%;  --y: 6%;   --w: 34; }
  .item:nth-child(2)  { --x: 73%; --y: 5%;   --w: 20; }
  .item:nth-child(3)  { --x: 6%;  --y: 62%;  --w: 32; }
  .item:nth-child(4)  { --x: 46%; --y: 8%;   --w: 15; }
  .item:nth-child(5)  { --x: 58%; --y: 26%;  --w: 30; }
  .item:nth-child(6)  { --x: 75%; --y: 60%;  --w: 18; }
  .item:nth-child(7)  { --x: 42%; --y: 73%;  --w: 29; }
  .item:nth-child(8)  { --x: 46%; --y: 59%;  --w: 15; }
  .item:nth-child(9)  { --x: 9%;  --y: 25%;  --w: 12; }
  .item:nth-child(10) { --x: 33%; --y: 27%;  --w: 12; }
  .item:nth-child(11) { --x: 11%; --y: 77%;  --w: 12; }
  .win__bar b, .win__ctrl { display: none; }
  .item--player, .item--window { min-width: 0; }
  .item--print .item__label { display: none; }
  .item--folder .item__label { font-size: 12px; margin-top: 2px; }
  .items .item--folder:nth-child(7) { --w: 12; }

  .hint { bottom: 82px; font-size: 12px; }

  .dock { gap: 7px; height: 66px; padding: 8px 10px; border-radius: 20px; bottom: 10px; }
  .dock__app { width: 47px; height: 47px; }
  .dock__tip { min-width: 180px; }
  .dock__app:first-child .dock__tip, .dock__app:nth-child(2) .dock__tip { left: 0; translate: 0 6px; }
  .dock__app:first-child .dock__tip::after, .dock__app:nth-child(2) .dock__tip::after { left: 26px; }
  .dock__app:first-child.is-open .dock__tip, .dock__app:nth-child(2).is-open .dock__tip { translate: 0 0; }
  .dock__app:last-child .dock__tip, .dock__app:nth-child(4) .dock__tip { left: auto; right: 0; translate: 0 6px; }
  .dock__app:last-child .dock__tip::after, .dock__app:nth-child(4) .dock__tip::after { left: auto; right: 18px; translate: 0 0; }
  .dock__app:last-child.is-open .dock__tip, .dock__app:nth-child(4).is-open .dock__tip { translate: 0 0; }

  /* The dark shirt is the space for the contact details. */
  .desk.is-contact .photo { transform: translateY(-7%) scale(1.15); }
  .contact {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 12px;
    padding: 0 20px 112px;
  }
  .contact__main { width: auto; }
  .contact h2 { font-size: clamp(36px, 11.5vw, 64px); margin-top: 4px; }
  .contact__lines { margin-top: 12px; }
  .contact__lines li { padding: 7px 0; }
  .contact__social ul { display: flex; gap: 16px; margin-top: 0; }
  .contact__social li { border: 0; }
  .contact__social a { gap: 6px; padding: 0; font-size: 13px; }
  .contact__back { bottom: 84px; font-size: 12px; }

  .reel__head { gap: 10px; }
  .reel__head .eyebrow { letter-spacing: .08em; }
  .reel__tc { font-size: 14px; }

  .viewer[open] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px;
    overflow-y: auto;
    padding: 68px var(--gutter) 28px;
  }
  .viewer__shot { flex: none; height: auto; width: min(66vw, 300px); align-self: center; justify-self: auto; }
  .viewer__nav { margin-top: 22px; }
  .viewer__glow { position: fixed; }

}

/* Very small phones */
@media (max-width: 760px) and (max-height: 720px) {
  .item:nth-child(7)  { --y: 70%; --w: 26; }
  .item:nth-child(11) { --y: 75.5%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
  }
}

/* ---------- Homepage layout on laptops ----------
   LOCKED on 8 Nov 2026 from the user's screenshot (updated the same day:
   Videos folder moved right of the name, above Logos.zip). Do not move anything here
   unless the user asks. Every refresh comes back to it.
   Order on the desktop: 1 Gold Digger, 2 Sunday Services, 3 Sandwiches,
   4 avocadogallery.mp4, 5 02_final.jpg (poster), 6 Videos (folder), 7 AI Toolkit.txt,
   8 Logos.zip, 9 Visual identity.zip. (The Video work folder was removed on
   8 Nov; the others kept their exact spots.) --x and --y are the top left corner, as a share of the
   screen. avocadogallery.mp4 is about 10% smaller than Sandwiches. */
/* ---------- Phone design (below 768px): an iPhone-style home screen ----------
   No status bar (like the Mac design has no top bar). The Mac desktop items,
   the name and the hints are hidden; the wallpaper photo and the dock stay. */
.phone, .dock__phoneapp { display: none; }
@media (max-width: 767.98px) {
  .items, .center, #contactHint, .peek { display: none !important; }
  /* The phone wallpaper: the black-shirt portrait, clear (no blur). */
  /* Face centred (it sits left of the middle in the photo) and zoomed in 3%. */
  .photo { background-image: url('assets/portrait-black-shirt.jpg'); background-position: 34% 30%; filter: none; inset: 0; transform: scale(1.03); transform-origin: 50% 35%; }
  .phone {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    /* Sized from an iPhone home screen: the app rows end about 40px above the dock. */
    /* About 15% smaller than a real iPhone, since Safari's and Chrome's own
       bars take space at the bottom of the screen. */
    padding: max(54px, calc(env(safe-area-inset-top) + 24px)) 20px calc(env(safe-area-inset-bottom) + 12px + 90px + 28px);
  }
  .desk.is-contact .phone { opacity: 0; pointer-events: none; transition: opacity .4s ease; }

  /* Two rows of apps, right above the dock (iPhone sizes: 63px icons). */
  .phone__apps {
    margin-top: auto !important;
    --icon: min(57px, calc((100vw - 40px) / 4 * .7));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 6px;
    justify-items: center;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }
  .app { display: flex; flex-direction: column; align-items: center; gap: 5px; width: calc(var(--icon) + 22px); color: #fff; text-decoration: none; }
  .app__icon { display: block; width: var(--icon); height: var(--icon); transition: transform .2s ease; }
  /* The iPhone icon shape: a superellipse (n = 5), rounder than a plain rounded square,
     the same for every icon on the home screen and in the dock. */
  .app__icon, .dock .dock__phoneapp {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100.00 50.00L99.97 65.36L99.89 70.26L99.75 73.81L99.56 76.68L99.31 79.12L99.01 81.26L98.64 83.17L98.22 84.89L97.74 86.46L97.20 87.89L96.60 89.21L95.94 90.43L95.20 91.54L94.40 92.58L93.53 93.53L92.58 94.40L91.54 95.20L90.43 95.94L89.21 96.60L87.89 97.20L86.46 97.74L84.89 98.22L83.17 98.64L81.26 99.01L79.12 99.31L76.68 99.56L73.81 99.75L70.26 99.89L65.36 99.97L50.00 100.00L34.64 99.97L29.74 99.89L26.19 99.75L23.32 99.56L20.88 99.31L18.74 99.01L16.83 98.64L15.11 98.22L13.54 97.74L12.11 97.20L10.79 96.60L9.57 95.94L8.46 95.20L7.42 94.40L6.47 93.53L5.60 92.58L4.80 91.54L4.06 90.43L3.40 89.21L2.80 87.89L2.26 86.46L1.78 84.89L1.36 83.17L0.99 81.26L0.69 79.12L0.44 76.68L0.25 73.81L0.11 70.26L0.03 65.36L0.00 50.00L0.03 34.64L0.11 29.74L0.25 26.19L0.44 23.32L0.69 20.88L0.99 18.74L1.36 16.83L1.78 15.11L2.26 13.54L2.80 12.11L3.40 10.79L4.06 9.57L4.80 8.46L5.60 7.42L6.47 6.47L7.42 5.60L8.46 4.80L9.57 4.06L10.79 3.40L12.11 2.80L13.54 2.26L15.11 1.78L16.83 1.36L18.74 0.99L20.88 0.69L23.32 0.44L26.19 0.25L29.74 0.11L34.64 0.03L50.00 0.00L65.36 0.03L70.26 0.11L73.81 0.25L76.68 0.44L79.12 0.69L81.26 0.99L83.17 1.36L84.89 1.78L86.46 2.26L87.89 2.80L89.21 3.40L90.43 4.06L91.54 4.80L92.58 5.60L93.53 6.47L94.40 7.42L95.20 8.46L95.94 9.57L96.60 10.79L97.20 12.11L97.74 13.54L98.22 15.11L98.64 16.83L99.01 18.74L99.31 20.88L99.56 23.32L99.75 26.19L99.89 29.74L99.97 34.64Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100.00 50.00L99.97 65.36L99.89 70.26L99.75 73.81L99.56 76.68L99.31 79.12L99.01 81.26L98.64 83.17L98.22 84.89L97.74 86.46L97.20 87.89L96.60 89.21L95.94 90.43L95.20 91.54L94.40 92.58L93.53 93.53L92.58 94.40L91.54 95.20L90.43 95.94L89.21 96.60L87.89 97.20L86.46 97.74L84.89 98.22L83.17 98.64L81.26 99.01L79.12 99.31L76.68 99.56L73.81 99.75L70.26 99.89L65.36 99.97L50.00 100.00L34.64 99.97L29.74 99.89L26.19 99.75L23.32 99.56L20.88 99.31L18.74 99.01L16.83 98.64L15.11 98.22L13.54 97.74L12.11 97.20L10.79 96.60L9.57 95.94L8.46 95.20L7.42 94.40L6.47 93.53L5.60 92.58L4.80 91.54L4.06 90.43L3.40 89.21L2.80 87.89L2.26 86.46L1.78 84.89L1.36 83.17L0.99 81.26L0.69 79.12L0.44 76.68L0.25 73.81L0.11 70.26L0.03 65.36L0.00 50.00L0.03 34.64L0.11 29.74L0.25 26.19L0.44 23.32L0.69 20.88L0.99 18.74L1.36 16.83L1.78 15.11L2.26 13.54L2.80 12.11L3.40 10.79L4.06 9.57L4.80 8.46L5.60 7.42L6.47 6.47L7.42 5.60L8.46 4.80L9.57 4.06L10.79 3.40L12.11 2.80L13.54 2.26L15.11 1.78L16.83 1.36L18.74 0.99L20.88 0.69L23.32 0.44L26.19 0.25L29.74 0.11L34.64 0.03L50.00 0.00L65.36 0.03L70.26 0.11L73.81 0.25L76.68 0.44L79.12 0.69L81.26 0.99L83.17 1.36L84.89 1.78L86.46 2.26L87.89 2.80L89.21 3.40L90.43 4.06L91.54 4.80L92.58 5.60L93.53 6.47L94.40 7.42L95.20 8.46L95.94 9.57L96.60 10.79L97.20 12.11L97.74 13.54L98.22 15.11L98.64 16.83L99.01 18.74L99.31 20.88L99.56 23.32L99.75 26.19L99.89 29.74L99.97 34.64Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  .app--soft .app__icon > img { scale: 1.08; }
  .app:active .app__icon { transform: scale(.92); }
  .app__icon > img { width: 100%; height: 100%; object-fit: contain; }
  .app__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  }

  /* The name, small, in the middle. */

  /* The skill card a software app shows. */
  .phone__skill {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    padding: 20px 24px;
    border-radius: 22px;
    background: rgba(20, 21, 22, .82);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: #fff;
    opacity: 0;
    scale: .92;
    pointer-events: none;
    transition: opacity .25s ease, scale .3s var(--ease);
  }
  .phone__skill.is-open { opacity: 1; scale: 1; }
  .phone__skill img { width: 52px; height: 52px; }
  .phone__skill strong { font-size: 16px; font-weight: 600; }

  /* The user's icon PNGs. Their own rounded square sits a little inside the
     image, so the plates for Gallery and Notes are drawn at the same size. */
  /* Each PNG has some empty space around its rounded square; scale it up so
     the square itself fills the slot, like the icons on the iPhone. */
  .ic-img { display: block; width: 100%; height: 100%; object-fit: contain; scale: var(--fill, 1); }
  .ic-img[src$="phone.png"] { --fill: 1.14; }
  .ic-img[src$="mail.png"] { --fill: 1.1; }
  .ic-img[src$="instagram.png"] { --fill: 1.05; }
  .ic-img[src$="behance.png"] { --fill: 1.04; }
  .ic-plate { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #fff; }
  .ic-plate img { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
  .ic-plate--gallery img { width: 92%; height: 92%; }
  /* The dock: Phone, Mail, Gallery, Notes instead of the Mac apps. */
  .dock .dock__app:not(.dock__phoneapp) { display: none; }
  .dock .dock__phoneapp { display: block; width: min(57px, calc((100vw - 24px) / 4 * .67)); height: min(57px, calc((100vw - 24px) / 4 * .67)); }
  /* The dock as on an iPhone: nearly full width, tall, very rounded. */
  .dock {
    /* Just wide enough for its icons, with the same spacing as the apps above. */
    left: 50%;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom) + 26px);
    translate: -50% 0;
    width: auto;
    height: auto;
    padding: 14px 16px;
    gap: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    /* Plain frosted glass, like the iPhone dock: no shine, no edge lights. */
    background: rgba(140, 140, 150, .28);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    backdrop-filter: blur(30px) saturate(1.5);
    box-shadow: none;
  }
  .dock::before { display: none; }
  .js .desk:not(.is-in) .dock { translate: -50% 20px; }

  /* No scrolling on phones: the home screen and the work page are two
     screens side by side, switched by a sideways swipe. */
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .desk, .reel {
    position: fixed;
    inset: 0;
    height: 100%;
    min-height: 0;
    transition: transform .55s cubic-bezier(.32, .72, 0, 1);
  }
  .reel { z-index: 4; transform: translateX(100%); overflow-y: auto; border-radius: 0; box-shadow: none; }
  .reel__pin { min-height: 100%; border-radius: 0; }
  .on-work .desk { transform: translateX(-30%); }
  .on-work .reel { transform: none; }
  /* Page dots, just above the dock. */
  .pagedots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .pagedots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: background .3s; }
  .pagedots i.is-on { background: #fff; }
  .phone { padding-bottom: calc(env(safe-area-inset-bottom) + 26px + 85px + 14px) !important; }

  /* A video opened on a phone fills the screen: no title, no text. */
  .viewer { border-radius: 0; background: #000; }
  .viewer[open] { display: block !important; padding: 0 !important; overflow: hidden !important; }
  .viewer .viewer__text, .viewer .viewer__glow { display: none !important; }
  .viewer .viewer__shot { position: fixed; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; max-width: none; }
  .viewer .viewer__shot video, .viewer .viewer__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0; box-shadow: none; background: #000; }
  .viewer .viewer__bar { top: max(14px, env(safe-area-inset-top)); left: 16px; z-index: 3; }
}

/* ---------- Photos (the phone Gallery), dark, like the iPhone Photos app ---------- */
/* Every tap gives a little press, the way iOS does. */
.ph__tile, .ph__album, .ph__memory, .ph__pill, .ph__round, .ph__tab, .ph__film button, .ph__controls button { transition: transform .25s cubic-bezier(.32, .72, 0, 1), opacity .25s ease; }
.ph__tile:active { opacity: .7; }
.ph__album:active, .ph__memory:active { transform: scale(.97); }
.ph__pill:active, .ph__round:active, .ph__tab:active, .ph__controls button:active { transform: scale(.92); }
.ph__film button:active { opacity: .5; }
.dock .dock__phoneapp { transition: transform .25s cubic-bezier(.32, .72, 0, 1); }
.dock .dock__phoneapp:active { transform: scale(.9); }
.gallery {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.ph__page { position: absolute; inset: 0; display: none; overflow-y: auto; padding-bottom: 120px; background: #000; touch-action: pan-y; }
.ph__albums { touch-action: auto; }
.ph__page.is-on { display: block; }
/* Frosted glass, the clean iPhone way: a strong blur with a light tint, a
   hairline edge and a faint light along the top. No shine or gradients. */
.ph__pill, .ph__round, .ph__tabs, .ph__title, .ph__controls {
  background: rgba(118, 118, 128, .26);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .28), inset 0 0 0 .5px rgba(255, 255, 255, .14), 0 8px 24px rgba(0, 0, 0, .25);
  color: #fff;
}
.ph__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: max(26px, calc(env(safe-area-inset-top) + 14px)) 16px 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}
.ph__head--solid { background: #000; }
.ph__head h2 { font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.ph__head p { margin-top: 2px; font-size: 17px; font-weight: 600; }
.ph__pill { padding: 9px 18px; border-radius: 99px; font-size: 16px; font-weight: 500; }
.ph__round { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; }
.ph__round svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ph__head--album { justify-content: flex-start; align-items: center; }
.ph__head--album h2 { font-size: 26px; }
.ph__head--album p { font-size: 14px; font-weight: 400; opacity: .7; }

/* Library grid: edge to edge, thin gaps, video lengths at the bottom right. */
.ph__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.ph__tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #111; }
.ph__tile img { width: 100%; height: 100%; object-fit: cover; }
.ph__len { position: absolute; right: 6px; bottom: 4px; font-size: 13px; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

/* Collections: a memory card and albums. */
.ph__section { padding: 8px 16px 12px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.ph__memory { position: relative; display: block; width: calc(100% - 32px); aspect-ratio: 1; margin: 0 16px 28px; overflow: hidden; border-radius: 26px; text-align: left; }
/* The memory's videos take turns, cross-fading slowly. */
.ph__memory .ph__memimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1.2s ease, transform 5s ease-out; }
.ph__memory .ph__memimg.is-on { opacity: 1; transform: scale(1); }
.ph__memtext, .ph__memplay { z-index: 1; }
.ph__memtext { position: absolute; left: 22px; bottom: 22px; }
.ph__memtext b { display: block; font-size: 26px; font-weight: 700; }
.ph__memtext small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.ph__memplay { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(40, 40, 44, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ph__memplay svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.ph__albums { display: flex; gap: 12px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.ph__albums::-webkit-scrollbar { display: none; }
.ph__album { position: relative; flex: none; width: 42vw; max-width: 180px; aspect-ratio: 1; overflow: hidden; border-radius: 22px; text-align: left; }
.ph__album img { width: 100%; height: 100%; object-fit: cover; }
.ph__album::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55)); }
.ph__album span { position: absolute; z-index: 1; left: 14px; bottom: 26px; font-size: 16px; font-weight: 600; }
.ph__album small { position: absolute; z-index: 1; left: 14px; bottom: 10px; font-size: 12px; opacity: .8; }

/* The tab bar at the bottom: Library and Collections. */
.ph__tabs { position: absolute; z-index: 3; left: 16px; bottom: calc(env(safe-area-inset-bottom) + 28px); display: flex; padding: 4px; border-radius: 99px; }
/* The highlight behind the active tab glides between them. */
.ph__tabglow { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 99px; background: rgba(255, 255, 255, .12); transition: transform .45s cubic-bezier(.32, .72, 0, 1), width .45s cubic-bezier(.32, .72, 0, 1); }
.ph__tab { position: relative; }
.ph__tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 22px; border-radius: 99px; font-size: 12px; font-weight: 500; color: #fff; }
.ph__tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ph__tab { transition: color .3s ease; }
.ph__tab.is-on { color: #0a84ff; }

/* The viewer: title pill at the top, the piece in the middle, filmstrip below. */
.ph__view { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #000; }
.ph__top, .ph__controls, .ph__film { transition: opacity .2s ease; }
.ph__view[hidden] { display: none; }
.ph__top { position: absolute; z-index: 2; top: max(20px, calc(env(safe-area-inset-top) + 8px)); left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ph__spacer { visibility: hidden; }
.ph__title { min-width: 0; max-width: 64%; padding: 7px 22px; border-radius: 99px; text-align: center; }
.ph__title b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.ph__title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; opacity: .85; }
.ph__stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: visible; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.ph__stage img, .ph__stage video { width: 100%; height: 100%; object-fit: contain; }
.ph__controls { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 92px); display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 18px; border-radius: 99px; }
.ph__controls[hidden] { display: none; }
.ph__controls button { display: grid; place-items: center; flex: none; width: 30px; height: 30px; }
.ph__controls svg { width: 24px; height: 24px; fill: #fff; }
.ph__controls svg .w { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.ph__bar { position: relative; flex: 1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .3); cursor: pointer; }
.ph__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: #fff; }
.ph__film { flex: none; display: flex; gap: 2px; height: 44px; margin: 10px 0 calc(env(safe-area-inset-bottom) + 28px); padding: 0 50%; overflow-x: auto; scrollbar-width: none; }
.ph__film::-webkit-scrollbar { display: none; }
.ph__film button { flex: none; width: 30px; height: 44px; overflow: hidden; opacity: .75; transition: width .3s var(--ease), opacity .3s; }
.ph__film button.is-on { width: 60px; margin: 0 6px; opacity: 1; }
.ph__film img { width: 100%; height: 100%; object-fit: cover; }

/* Laptop design (768px wide and up). Wide windows of ANY size use the locked layout. Positions are shares of the
   screen; sizes use --u (it shrinks with the window), and the minimum sizes
   only hold down to the laptop reference size, then shrink in proportion. */
@media (min-width: 768px) and (orientation: landscape) {
  .items > .item:nth-child(1) { --x: 65%;   --y: 9.9%;  --w: 13.2; }
  .items > .item:nth-child(2) { --x: 5.2%;  --y: 72.8%; --w: 12.7; }
  .items > .item:nth-child(3) { --x: 82.6%; --y: 36.9%; --w: 14; }
  .items > .item:nth-child(4) { --x: 5.4%;  --y: 6.6%;  --w: 12.6; min-width: min(180px, calc(12.5 * var(--u))); }
  .items > .item:nth-child(5) { --x: 87.9%; --y: 6.7%;  --w: 6.2; }
  .items > .item:nth-child(6) { --x: 69.95%; --y: 46.4%; --w: 4.6; }
  .items > .item:nth-child(7) { --x: 24.9%; --y: 51.6%; --w: 4.6; }
  .items > .item:nth-child(8) { --x: 69.8%; --y: 71.9%; --w: 4.6; }
  .items > .item:nth-child(9) { --x: 26.65%; --y: 22.3%; --w: 4.6; }
  /* Motion graphics folder, added 8 Nov in an empty spot below avocadogallery.mp4. */
  .items > .item:nth-child(10) { --x: 9.5%; --y: 55%; --w: 4.6; }
  .items > .item--wide { min-width: min(205px, calc(14.24 * var(--u))); }
  .items > .item--tall { min-width: min(200px, calc(13.9 * var(--u))); }
  .items > .item--tall:nth-child(4) { min-width: min(180px, calc(12.5 * var(--u))); }
  /* Sunday Services, 5% bigger than the other wide video. */
  .items > .item--wide:nth-child(2) { --w: 13.34; min-width: min(215px, calc(14.93 * var(--u))); }
}
/* Short wide screens: lift the bread reel clear of the bottom. */
@media (min-width: 768px) and (orientation: landscape) and (max-height: 720px) {
  .items > .item:nth-child(3) { --y: 32.5%; }
}

/* ---------- Homepage layout on tall windows (portrait) ----------
   Tall windows 768px wide and up (tablets held upright, tall browser windows).
   Below 768px the phone design takes over. Same nine items:
   videos and the poster across the top, the two tall reels low on each side,
   the folder and files in between, all clear of the name and the dock. */
@media (min-width: 768px) and (orientation: portrait) {
  :root { --u: min(1vw, .62vh); }
  .items > .item:nth-child(1) { --x: 5%;  --y: 5%;  --w: 40; }
  .items > .item:nth-child(5) { --x: 72%; --y: 4.5%; --w: 21; }
  .items > .item:nth-child(9) { --x: 9%;  --y: 24%; --w: 11; }
  .items > .item:nth-child(6) { --x: 36%; --y: 25%; --w: 11; }
  .items > .item:nth-child(2) { --x: 55%; --y: 27%; --w: 38; }
  .items > .item:nth-child(3) { --x: 5%;  --y: 58%; --w: 24; }
  .items > .item:nth-child(4) { --x: 71%; --y: 56%; --w: 23; }
  .items > .item:nth-child(8) { --x: 37%; --y: 63%; --w: 11; }
  .items > .item:nth-child(7) { --x: 52%; --y: 70%; --w: 11; }
  .items > .item:nth-child(10) { --x: 37%; --y: 79%; --w: 11; }
  .items > .item { min-width: 0; }
}
/* Roomy enough tall windows show the file names on the videos and poster. */
@media (min-width: 768px) and (orientation: portrait) {
  .win__bar b { display: block; }
  .item--print .item__label { display: block; }
}

/* ---------- Phone: an iPhone back button instead of the Mac buttons ----------
   Everywhere the Mac design shows red, yellow and green, phones show one
   round frosted button with a back chevron in the top left. It does what the
   red button did (close, or go back). */
@media (max-width: 767.98px) {
  .window__bar .light:not(.light--close), .viewer__bar .light:not(.light--close),
  .reel__lights > i, .window__back { display: none !important; }
  .window__bar .light.light--close, .viewer__bar .light.light--close, #reelClose {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    background: rgba(118, 118, 128, .2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    filter: none !important;
  }
  .window__bar .light.light--close::before, .viewer__bar .light.light--close::before, #reelClose::before {
    content: '';
    width: 11px;
    height: 18px;
    margin-left: -2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 18'%3E%3Cpath d='M9 2 2 9l7 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 18'%3E%3Cpath d='M9 2 2 9l7 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .window__bar .light.light--close:active, .viewer__bar .light.light--close:active, #reelClose:active { transform: scale(.92); }
  .window__bar { height: 52px; }
  .reel__lights { color: var(--paper); }
  .viewer__bar { color: #fff; }
}

/* Phone: in the AI Toolkit, each area sits above its tools. */
@media (max-width: 767.98px) {
  .toolkit div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* The iPhone home bar: a white line at the bottom centre. Tapping it goes
   back to the home screen from anywhere. Phones only. */
.homebar { display: none; }
@media (max-width: 767.98px) {
  .homebar {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + 4px);
    translate: -50% 0;
    display: grid;
    place-items: center;
    width: 160px;
    height: 20px;
  }
  .homebar::before { content: ''; width: 134px; height: 5px; border-radius: 3px; background: #fff; opacity: .9; transition: transform .25s cubic-bezier(.32, .72, 0, 1); }
  .homebar:active::before { transform: scaleX(.92); }
}

/* Phone work page: more room above the back button and the timecode. */
@media (max-width: 767.98px) {
  .reel__pin { padding-top: max(28px, calc(env(safe-area-inset-top) + 16px)) !important; }
  /* And room at the bottom so the timeline clears the home bar. */
  .reel__pin { padding-bottom: calc(env(safe-area-inset-bottom) + 34px) !important; }
  /* Slightly smaller cards so the whole page, timeline included, fits on screen. */
  .card { flex-basis: min(62vw, 300px, 25svh) !important; gap: 10px !important; }
  .card h3 { font-size: clamp(22px, 6.4vw, 30px) !important; }
  /* The page fills the screen exactly; the timeline layers sit halfway
     between the card text and the home bar. */
  .reel__pin { display: flex !important; flex-direction: column; height: 100%; min-height: 0 !important; }
  .reel__cards { flex: none; }
  .timeline { margin-top: auto !important; margin-bottom: auto !important; }
}
/* Shorter phones: smaller work cards so the timeline still clears the home bar. */
@media (max-width: 767.98px) and (max-height: 780px) {
  .card { flex-basis: min(62vw, 300px, 20svh) !important; }
}

/* The phone's own player is used for full-screen video; the element itself
   stays out of sight on the page. */
.native-video { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
.native-video:fullscreen, .native-video:-webkit-full-screen { width: 100%; height: 100%; opacity: 1; }
/* Phone work page: no back button (swipe or the home bar go back) and no
   "watch with sound" hint on the videos. */
@media (max-width: 767.98px) {
  #reelClose, .card__sound { display: none !important; }
}

/* Phone opening: the photo, then the dock, then the apps one by one. */
@media (max-width: 767.98px) {
  .js .desk.is-entering .dock { transition: opacity .55s ease .35s, translate .7s var(--ease-out) .35s; }
  .js .desk:not(.is-in) .phone .app { opacity: 0; transform: scale(.82) translateY(10px); }
  .js .desk.is-entering .phone .app { transition: opacity .4s ease, transform .6s var(--ease-out); transition-delay: calc(var(--k, 0) * 45ms + .65s); }
  .js .desk:not(.is-in) .pagedots { opacity: 0; }
  .js .desk.is-entering .pagedots { transition: opacity .4s ease 1.2s; }
}