/* ==========================================================================
   Phil Sison, portfolio homepage
   Mobile-first. Design reference widths: 360px (mobile), 768px (tablet), 1440px (desktop).
   Everything scales fluidly in between (and from 320px up to ultra-wide) with clamp(),
   percentages and grid/flex. Media queries only switch layout at 768px and 1200px.

   TABLE OF CONTENTS
   1. Design tokens (custom properties)
   2. Reset and base
   3. Utilities and layout container
   4. Shared components (pills, links, buttons)
   5. Header
   6. Hero
   7. Selected work (tiles)
   8. About
   9. More work gallery
  10. Footer
  11. Tablet and up (min-width: 768px)
  12. Desktop and up (min-width: 1200px)
  13. Accessibility and motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Values below are the 360px (mobile) values. Sections 11 and 12 redefine the
   tokens that change at tablet and desktop. clamp() ramps each one smoothly
   between the sizes shown in Figma.
   ========================================================================== */
:root {
  /* Colors (from Figma) */
  --color-bg: #faf9f6;          /* page background */
  --color-surface: #ffffff;     /* header, hero, tiles */
  --color-gray: #f5f5f7;        /* work + gallery sections, hero strip */
  --color-ink: #17171c;         /* body text, dark buttons, About background */
  --color-title: #1c1c1f;       /* tile + gallery headings */
  --color-muted: #666670;       /* hero lead paragraph */
  --color-subline: #6e6e75;     /* tile sublines */
  --color-accent: #4f45e5;      /* links, pills, "Philip Sison" */
  --color-accent-hover: #4338ca;
  --color-on-dark: #d1d1db;     /* paragraphs on the dark About band */

  /* Typography: SF Pro on Apple devices, close system fallbacks elsewhere */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro",
               "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-hello: 22px;
  --wordmark: min(300px, 100%);   /* width of the script "Phil Sison" wordmark */
  --fs-hero-lead: 16px;
  --fs-tile-title: clamp(34px, 3.5vw + 17px, 44px);
  --fs-tile-sub: clamp(15px, 0.735vw + 12.35px, 18px);   /* Figma: 15px @360 → 18px @768 */
  --fs-half-title: clamp(28px, 2.5vw + 19px, 38px);
  --fs-half-sub: clamp(15px, 0.3vw + 14px, 16px);
  --fs-link: 15px;
  --fs-about-title: 28px;
  --fs-about-text: 16px;
  --fs-gallery-title: 40px;

  /* Radii */
  --radius-card: 18px;
  --radius-pill: 999px;

  /* Spacing (fluid) */
  --gutter: clamp(20px, 4.9vw + 2.4px, 40px);   /* page side padding */
  --inset: 12px;                                 /* gray inset around tiles */
  --tile-gap: 12px;
  --tile-pad-x: clamp(20px, 1.85vw + 13.3px, 40px);
  --tile-pad-y: clamp(36px, 1.67vw + 30px, 54px);
  --section-y: clamp(48px, 3.5vw + 28px, 80px);
  --work-bottom: clamp(32px, 4.44vw + 16px, 80px);

  /* Content width: 1216px of content at the 1440px design */
  --container-max: 1216px;

  /* Hero photo size. On mobile it is capped to the available width. */
  --photo: min(320px, 100vw - 2 * var(--gutter));
}


/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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


/* ==========================================================================
   3. UTILITIES AND LAYOUT CONTAINER
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -48px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--color-ink);
  color: #fff;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* Centered content column: full width minus the gutters, capped at 1216px */
.container {
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
}

/* Tiles sit in a slightly narrower inset than the rest of the page on small screens */
.container--work {
  width: min(100% - 2 * var(--inset), var(--container-max));
}


/* ==========================================================================
   4. SHARED COMPONENTS
   ========================================================================== */

/* Pill button (accent by default) */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.pill:hover { background: var(--color-accent-hover); }
.pill:active { transform: scale(0.97); }

.pill--dark { background: var(--color-ink); }
.pill--dark:hover { background: #3a3a44; }

/* Header and footer "Let's connect" pill */
.pill--nav {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
}
.icon-arrow { flex: none; }

/* Text link with chevron */
.link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-accent);
  font-size: var(--fs-link);
  font-weight: 500;
  line-height: 1.25;
  transition: color 0.2s ease;
}
.link:hover { color: var(--color-accent-hover); }
/* Underline the words only, never the › chevron or the lock icon */
.link:hover .link__text {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.icon-lock { flex: none; }

/* Outlined button used on the dark About band */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 1px solid #fff;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.14); }
.btn-outline:active { transform: scale(0.97); }


/* ==========================================================================
   5. HEADER
   ========================================================================== */
.site-header { background: var(--color-surface); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-block: 28px;
}

.brand {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--color-ink);
}


/* ==========================================================================
   6. HERO
   The profile photo is a cutout. It sits flush with the bottom of the hero on top of
   a full-width gray strip (80/500 of the photo height) and a small gray band behind
   the lower edge of the photo. Both scale with --photo, as in the Figma file.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
}

/* Gray strip across the bottom of the hero */
.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--photo) * 0.16);
  background: var(--color-gray);
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
}

/* "Hi, I'm" over the script wordmark (an SVG of the name, with real alt text) */
.hero__title {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.hero__hello {
  /* nudged right so it lines up with the start of the script P (22/491 of the wordmark) */
  padding-left: calc(var(--wordmark) * 0.0448);
  font-size: var(--fs-hello);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--color-muted);
}
.hero__wordmark {
  width: var(--wordmark);
  max-width: 100%;
  height: auto;
  aspect-ratio: 490.91 / 177.1;
}

.hero__lead {
  max-width: 601px;
  font-size: var(--fs-hero-lead);
  line-height: 1.4;
  color: var(--color-muted);
}

/* Profile photo */
.profile {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--photo);
  margin-inline: auto;
}
/* Gray band behind the lower part of the photo (69/500 of its height) */
.profile::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 13.8%;
  background: var(--color-gray);
}
.profile img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}


/* ==========================================================================
   7. SELECTED WORK
   Apple-style stacked tiles on gray.
   ========================================================================== */
.work {
  padding-bottom: var(--work-bottom);
  background: var(--color-gray);
}
.container--work {
  display: grid;
  gap: var(--tile-gap);
}

/* Tile base */
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: var(--tile-pad-y) var(--tile-pad-x) 0;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  text-align: center;
}

.tile__text {
  width: 100%;
  max-width: 876px;
}

/* Eyebrow: small tracked caps on every tile */
.tile__eyebrow {
  padding-block: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.tile__title {
  padding-block: 8px;
  font-size: var(--fs-tile-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-title);
  text-wrap: balance;
}

.tile__sub {
  padding-block: 8px;
  font-size: var(--fs-tile-sub);
  line-height: 1.35;
  color: var(--color-subline);
}

.tile__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-block: 14px;
}

/* Full-width Adobe tile: screenshot runs off the bottom of the card. The visible area is
   900x390 as in Figma. The image fills it from the top, so the card has no white gap at the bottom. */
.tile--hero .pill { padding-inline: 16px; }
.tile__shot {
  width: 100%;
  max-width: 900px;
  margin-top: 25px;
  aspect-ratio: 900 / 390;
  overflow: hidden;
}
.tile__shot picture { height: 100%; }
.tile__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Two-up tiles: stacked on mobile, side by side from 768px */
.work__pair {
  display: grid;
  gap: var(--tile-gap);
}
.tile--half {
  padding-bottom: var(--tile-pad-y);
}
.tile--half .tile__title { font-size: var(--fs-half-title); }
.tile--half .tile__sub { font-size: var(--fs-half-sub); }
.tile--half .tile__text { max-width: 560px; }

/* Apple Watch image is wider than the tile and is clipped by it on both sides */
.tile__media { width: 100%; }
.tile__media--wide {
  flex: none;
  width: 124.9%;
  aspect-ratio: 743 / 347;
  display: grid;
  place-items: center;
}
.tile__media--wide img { width: 100%; }

/* West Elm couch with dimension labels, centered in the same-height box */
.tile__media--couch {
  aspect-ratio: 515 / 347;
  display: grid;
  place-items: center;
}
.tile__media--couch img { width: 100%; }


/* ==========================================================================
   8. ABOUT
   ========================================================================== */
.about {
  padding-block: var(--section-y);
  background: var(--color-ink);
  color: #fff;
}

.about__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  max-width: 814px;
}

.about__intro { display: flex; flex-direction: column; gap: 14px; }

.about__title {
  font-size: var(--fs-about-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}

.about__intro p {
  font-size: var(--fs-about-text);
  line-height: 1.5;
  color: var(--color-on-dark);
}

.approach {
  display: grid;
  gap: 20px;
}
.approach h3 {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.approach p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-on-dark);
}

/* Colleague quote and résumé button (replaces the signature) */
.about__quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.quote { display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 0; }
.quote__text { margin: 0; }
.quote__mark {
  height: 22px;
  font-size: 44px;
  font-weight: 700;
  line-height: 44px;
  color: #9e94fa;
}
.quote__text p {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: #fff;
}
.quote__by { display: flex; align-items: center; gap: 12px; }
.quote__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #4d4d57;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.quote__who { display: flex; flex-direction: column; gap: 2px; }
.quote__name { font-size: 14px; font-style: normal; font-weight: 600; line-height: 18px; color: #fff; }
.quote__role { font-size: 13px; line-height: 17px; color: var(--color-on-dark); }


/* ==========================================================================
   9. MORE WORK GALLERY
   One horizontal row of cards. Every measurement is its Figma value (at 1440px)
   multiplied by --u, so the cards shrink smoothly: 1px at 1440+, about .62px at 768
   and .45px at 360. Text never drops below --gmin.
   ========================================================================== */
.gallery {
  --u: clamp(0.45px, calc(0.45px + (100vw - 360px) * 0.000509), 1px);
  --gmin: 12px;
  /* Left edge of the page content, so the first card lines up with the heading */
  --edge: max(var(--gutter), calc((100vw - var(--container-max)) / 2));

  padding-block: var(--section-y);
  background: var(--color-gray);
}

.gallery__title {
  font-size: var(--fs-gallery-title);
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: -0.03em;
  color: var(--color-title);
}

/* Scroll area. Cards bleed off the right edge */
.gallery__viewport {
  margin-top: 32px;
  overflow-x: auto;
  padding-inline: var(--edge);
  scroll-padding-inline: var(--edge);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gallery__viewport::-webkit-scrollbar { display: none; }

.gallery__track {
  display: flex;
  gap: calc(24 * var(--u));
  width: max-content;
}

/* Card */
.gcard {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: calc(14 * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(448 * var(--u));
  padding: calc(24 * var(--u)) calc(28 * var(--u));
  overflow: hidden;
  border-radius: calc(18 * var(--u));
  background: var(--c);
  color: var(--fg, #fff);
  scroll-snap-align: start;
}

.gcard__company {
  font-size: max(calc(24 * var(--u)), 14px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.gcard__media {
  position: relative;
  flex: 1;
  min-height: 0;
}
.gcard__media picture { height: 100%; }
.gcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* AppleCare screenshot is slightly narrower than the card and centered */
.gcard__media--inset picture { width: 90.6%; margin-inline: auto; }

/* Fade so the meta row stays readable over the artwork */
.gcard__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, transparent 0%, var(--fade, var(--c)) 78%);
  pointer-events: none;
}

/* Meta row: pill, category, tagline */
.gcard__meta {
  position: absolute;
  left: 0;
  bottom: calc(8 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  white-space: nowrap;
}

.gcard__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  padding: max(calc(12 * var(--u)), 7px) max(calc(22 * var(--u)), 14px);
  border-radius: var(--radius-pill);
  background: var(--pill-bg, #fff);
  color: var(--pill-fg, var(--color-title));
  font-size: max(calc(16 * var(--u)), var(--gmin));
  font-weight: 500;
  line-height: 1.2;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.gcard__pill:hover { opacity: 0.85; }
.gcard__pill:active { transform: scale(0.97); }

.gcard__cat {
  font-size: max(calc(17 * var(--u)), var(--gmin));
  line-height: 1.2;
}
.gcard__cat { font-weight: 600; }

/* Arrow buttons under the gallery */
.gallery__controls {
  display: flex;
  gap: 24px;
  margin-top: 32px;
}

.arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(210, 210, 215, 0.64);
  color: rgba(64, 64, 69, 0.85);
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.arrow:hover:not(:disabled) { background: rgba(190, 190, 196, 0.8); }
.arrow:active:not(:disabled) { transform: scale(0.94); }
.arrow:disabled {
  background: rgba(210, 210, 215, 0.32);
  color: rgba(128, 128, 133, 0.45);
  cursor: default;
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-surface);  /* #FFFFFF */
  padding-block: clamp(24px, 1.5vw + 19px, 40px) clamp(32px, 0.75vw + 29px, 40px);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.social {
  display: block;
  border-radius: 8px;
}

.footer-copy {
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--color-muted);   /* #666670, same as the case-study footers */
}


/* ==========================================================================
   11. TABLET AND UP (min-width: 768px)
   ========================================================================== */
/* Large phones / small tablets (549px to 767px): the hero heading and lead are
   centered as blocks. The lead's text stays left-aligned inside its centered box. */
@media (min-width: 549px) and (max-width: 767px) {
  .hero__text { align-items: center; }
  .hero__title {
    width: fit-content;
    align-items: center;
    text-align: center;
  }
  .hero__hello { padding-left: 0; }
  .hero__lead {
    max-width: 500px;
    margin-inline: auto;
    text-align: left;
  }
}


@media (min-width: 768px) {
  :root {
    --fs-hello: clamp(22px, 0.89vw + 15.1px, 28px);
    --wordmark: clamp(280px, 31.4vw + 38.8px, 491px);
    --fs-hero-lead: clamp(16px, 0.6vw + 11.4px, 20px);
    --fs-tile-title: clamp(44px, 2.38vw + 25.7px, 60px);
    --fs-tile-sub: clamp(18px, 0.298vw + 15.71px, 20px);   /* Figma: 18px @768 → 20px @1440 */
    --fs-half-title: clamp(24px, 2.98vw + 1px, 44px);
    --fs-half-sub: clamp(14px, 0.74vw + 8.3px, 19px);
    --fs-link: clamp(16px, 0.15vw + 14.9px, 17px);
    --fs-about-title: clamp(30px, 0.89vw + 23.2px, 36px);
    --fs-about-text: clamp(16px, 0.3vw + 13.7px, 18px);
    --fs-gallery-title: clamp(54px, 1.79vw + 40.3px, 66px);

    --gutter: clamp(40px, 10.7vw - 42px, 112px);
    --inset: clamp(24px, 13.1vw - 76.6px, 112px);
    --tile-gap: clamp(16px, 1.19vw + 6.8px, 24px);

    /* Photo grows from 340px (768) to 412px (1440) */
    --photo: clamp(340px, 10.71vw + 257.7px, 412px);
  }

  .gallery { --gmin: 13px; }

  /* Hero: text left, photo right */
  /* Gray strip: the photo's own gray band (13.7%) plus the space under the photo (5.7%) = 80px at 1440 */
  .hero::before { height: calc(var(--photo) * 0.1942); }

  .hero__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-top: 4px;
    /* at 1440 the text starts 75px and the photo ends 50px inside the 1216px column */
    padding-left: clamp(0px, 11.16vw - 85.7px, 75px);
    padding-right: clamp(0px, 7.44vw - 57px, 50px);
  }
  .hero__text {
    flex: 1 1 0;
    min-width: 0;
    max-width: 601px;
    padding-top: 24px;
  }
  .profile {
    margin-inline: 0;
    /* photo sits 30px lower than the text block and no longer touches the bottom of the hero */
    margin-top: clamp(12px, 2.68vw - 8.6px, 30px);
    margin-bottom: calc(var(--photo) * 0.057);
  }

  /* Tiles */
  .tile--hero .pill { font-size: 15px; padding-inline: 20px; }
  .tile__cta { gap: 16px; }
  .tile--half .link { font-size: clamp(14px, 0.5vw + 10px, 17px); }
  .tile--half .tile__cta { gap: 12px; }

  /* Two tiles side by side */
  .work__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--half .tile__text { max-width: none; }

  /* About: three columns */
  .approach {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  /* Footer: links left, copyright right */
  .site-footer__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}


/* ==========================================================================
   12. DESKTOP AND UP (min-width: 1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  /* Adobe metrics line: 20px / 32px (Figma 795:1458) */
  .tile--hero .tile__sub { line-height: 32px; }
  .tile__cta { gap: 22px; }
  .tile--half .tile__cta { gap: 22px; }
  .tile--half .pill { font-size: 15px; padding-inline: 20px; }

  /* About: text and colleague quote side by side, split by a divider */
  .about__inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
  .about__body { flex: 1 1 0; }
  .about__quote {
    flex: none;
    width: 400px;
    padding-top: 0;
    padding-left: 48px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
}


/* ==========================================================================
   13. ACCESSIBILITY AND MOTION
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.about :focus-visible,
.gcard :focus-visible { outline-color: #fff; }
.gcard[style*="--fg"] :focus-visible { outline-color: var(--color-title); }

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