/* awptic_media — site styles
   Colors, type and timing live in :root so they are easy to change.
   Palette is sampled from the logo: indigo wave, near-black ink, stone-gray backdrop. */

@font-face {
  font-family: "Handlee";
  src: url("../fonts/handlee-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f4f2ee;        /* page background */
  --mist: #e9e7e2;         /* soft bands */
  --stone: #d4d3d0;        /* logo backdrop gray: footer and link band */
  --ink: #1e1b2e;          /* text (logo near-black, warmed) */
  --muted: #56526a;        /* secondary text */
  --accent: #2f2b5c;       /* logo indigo: buttons, accents, dark band */
  --accent-soft: #c9c6dc;  /* accent text on the indigo band */

  --hand: "Handlee", "Noteworthy", "Comic Neue", "Segoe Print", cursive;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: 20px;
  --section: 56px;
  --max: 1240px;
  --header-h: 72px;
  --gap: 8px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-menu: 260ms;
  --t-enter: 400ms;
  --t-lb: 240ms;

  /* Wave motif, echoing the line under the logo */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'%3E%3Cpath d='M2 7c10-6 20-6 30 0s20 6 30 0 20-6 32 0' fill='none' stroke='%232f2b5c' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'%3E%3Cpath d='M2 7c10-6 20-6 30 0s20 6 30 0 20-6 32 0' fill='none' stroke='%23c9c6dc' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (min-width: 600px) { :root { --gutter: 32px; --section: 72px; --gap: 12px; } }
@media (min-width: 1000px) { :root { --gutter: 48px; --section: 80px; --header-h: 164px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--hand);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.7rem + 3vw, 4.25rem); }
h2 { font-size: clamp(2rem, 1.55rem + 1.8vw, 3rem); }
h3 { font-size: 1.625rem; }
/* Emphasised words in headings: indigo instead of italic (the hand font has no italic) */
h1 em, h2 em { font-style: normal; color: var(--accent); }
p { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.center { text-align: center; }
.lede { color: var(--muted); max-width: 46ch; margin-inline: auto; font-size: 1.125rem; }

/* Heading with the small wave underneath */
.has-wave::after {
  content: "";
  display: block;
  width: 72px;
  height: 10px;
  margin: 14px auto 0;
  background: var(--wave) center / contain no-repeat;
}
.has-wave.left::after { margin-left: 0; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

/* ---------- Buttons: outlined, fill fades in on hover ---------- */
.button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 28px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-family: var(--hand);
  font-size: 1.25rem;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.button:hover { color: var(--paper); }
.button:hover::before { opacity: 1; }
.button:active { transform: scale(0.98); }
.button.light { border-color: var(--paper); color: var(--paper); }
.button.light::before { background: var(--paper); }
.button.light:hover { color: var(--accent); }

/* ---------- Header: brand centered over the nav on desktop ---------- */
.site-header { position: relative; z-index: 20; background: var(--paper); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
}
.brand img { width: 40px; height: 40px; }
.brand-name { font-family: var(--hand); font-size: 1.625rem; line-height: 1; }

.nav-toggle {
  display: none;
  min-height: 44px;
  min-width: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-family: var(--hand);
  font-size: 1.125rem;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
}
.nav-toggle:active { opacity: 0.6; }

.site-nav ul { display: flex; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--hand);
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--muted);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 36px;
  height: 7px;
  margin-left: -18px;
  background: var(--wave) center / contain no-repeat;
}

@media (min-width: 1000px) {
  .header-inner { flex-direction: column; justify-content: center; gap: 8px; padding-block: 20px 10px; }
  .brand { gap: 16px; }
  .brand img { width: 72px; height: 72px; }
  .brand-name { font-size: 2.75rem; }
  .site-nav ul { gap: 4px 16px; }
  .site-nav a { min-height: 48px; padding: 0 18px; font-size: 1.5rem; }
  .site-nav a[aria-current="page"]::after { width: 44px; height: 8px; margin-left: -22px; }
}

/* Phone and tablet menu (only when JS runs; without JS the links simply wrap) */
@media (max-width: 799px) {
  .header-inner { flex-wrap: wrap; }
  html:not(.js) .site-nav ul { flex-wrap: wrap; margin-left: -14px; }
  .js .nav-toggle { display: inline-flex; align-items: center; }
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 4px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--stone);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--t-menu) var(--ease), transform var(--t-menu) var(--ease);
  }
  .js .site-nav[hidden] { display: none; }
  .js .site-nav.is-open { opacity: 1; transform: none; }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav a { width: 100%; padding: 0; min-height: 52px; font-size: 1.5rem; color: var(--ink); }
  .js .site-nav a[aria-current="page"] { color: var(--accent); }
  .js .site-nav a[aria-current="page"]::after { left: auto; right: 0; bottom: 50%; margin: 0 0 -3px; }
}

/* ---------- Hero ---------- */
.hero-media img { width: 100%; }
@media (max-width: 799px) {
  /* Tall phone photo: full frame on phones; on wider small screens, trim to fit the screen */
  .hero-media img {
    max-height: calc(100svh - var(--header-h));
    object-fit: cover;
    object-position: 50% 30%;
  }
}
@media (min-width: 800px) {
  /* 16:9 normally; shortens to fit the screen, never wider than 2:1 so the shoes stay in */
  .hero-media img {
    height: clamp(50vw, calc(100svh - var(--header-h)), 56.25vw);
    object-fit: cover;
    object-position: 50% 45%;
  }
}
.intro { padding-block: var(--section); }
.intro h1 { max-width: 16ch; margin-inline: auto; }
.intro .lede { margin-top: 18px; }
.intro .button { margin-top: 28px; }

/* ---------- Full-bleed strip of three portraits ---------- */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.strip img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Stone band of gallery links, notched toward the photos above ---------- */
.link-band { position: relative; background: var(--stone); }
.link-band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -13px;
  width: 28px;
  height: 14px;
  margin-left: -14px;
  background: var(--stone);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.link-band ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 28px var(--gutter);
  list-style: none;
}
.link-band li + li { border-left: 1px solid var(--muted); }
.link-band a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 clamp(14px, 5vw, 64px);
  font-family: var(--hand);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.link-band a:hover { color: var(--accent); }

/* Portfolio tabs (JS turns the links into tabs; without JS they jump to each gallery) */
.js .tabs a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.js .tabs a:hover { color: var(--ink); }
.js .tabs a[aria-selected="true"] { color: var(--accent); }
.js .tabs a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 44px;
  height: 8px;
  margin-left: -22px;
  background: var(--wave) center / contain no-repeat;
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity var(--t-menu) var(--ease), transform var(--t-menu) var(--ease);
}
.js .tabs a[aria-selected="true"]::after { opacity: 1; transform: none; }
/* Outgoing gallery fades before the next one rises in (rows reuse the entrance reveal) */
/* Links like portfolio.html#seniors land with the tab bar still in view */
.js .gallery[role="tabpanel"] { transition: opacity var(--t-fast) var(--ease); scroll-margin-top: var(--tabs-h, 104px); }
.js .gallery.is-leaving { opacity: 0; }

/* ---------- Galleries: equal-height rows, every photo at its true shape ----------
   Each tile gets flex-grow = its width/height ratio (set inline as --r),
   so all photos in a row share one height and the row fills the width. */
.rows { display: grid; gap: var(--gap); }
.row { display: grid; gap: var(--gap); }
.tile { display: block; position: relative; overflow: hidden; background: var(--mist); }
.tile img { width: 100%; }
@media (min-width: 600px) {
  .row { display: flex; }
  .row > .tile { flex: var(--r) 1 0; min-width: 0; }
}
a.tile { cursor: zoom-in; }
a.tile img { transition: transform var(--t-enter) var(--ease), opacity var(--t-fast) var(--ease); }
a.tile:hover img { transform: scale(1.02); }
a.tile:focus-visible { outline-offset: 2px; }

.section-head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .lede { margin-top: 14px; }
.section-foot { margin-top: clamp(32px, 4vw, 48px); text-align: center; }

/* ---------- Split: photo beside centered text ---------- */
.split { display: grid; gap: 32px; align-items: center; }
.split-text { text-align: center; }
.split-text p { max-width: 44ch; margin: 18px auto 0; }
.split-text .button { margin-top: 28px; }
@media (min-width: 800px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
  .split.flip .split-media { order: 2; }
}

/* ---------- Indigo band ---------- */
.band-dark { background: var(--accent); color: var(--paper); }
.band-dark h2 em { color: var(--accent-soft); }
.band-dark .has-wave::after { background-image: var(--wave-light); }
.band-dark .lede { color: var(--accent-soft); }
.band-dark :focus-visible { outline-color: var(--paper); }
.contact-lines {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 40px;
  margin: 24px 0 28px;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
}
.contact-lines span { color: var(--accent-soft); }

/* ---------- Inner page intro ---------- */
.page-intro { padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 48px); text-align: center; }
.page-intro .lede { margin-top: 16px; }

.gallery { scroll-margin-top: 16px; }
.gallery + .gallery { padding-top: 0; }

/* ---------- About ---------- */
/* Austin's tall portrait: capped width so it doesn't tower over the text beside it */
.portrait { display: block; max-width: 420px; margin-inline: auto; }
.portrait img { width: 100%; }

.portrait-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  max-width: 480px;
  margin-inline: auto;
  width: 100%;
  border: 1.5px dashed var(--muted);
  background: var(--mist);
  color: var(--muted);
  text-align: center;
  padding: 24px;
}
.portrait-slot strong { display: block; font-family: var(--hand); font-weight: 400; font-size: 1.5rem; color: var(--ink); }
.draft-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 2px 12px;
  border: 1px solid var(--muted);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.mark-band { background: var(--stone); }
.mark-band .lockup-wrap { width: min(100%, 420px); }

/* ---------- Pricing ---------- */
.steps-band { background: var(--mist); }
.steps { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.step { padding: 36px 28px 40px; background: var(--paper); text-align: center; }
.step-num {
  display: block;
  font-family: var(--hand);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--accent);
}
.step h3 { margin-top: 10px; }
.step p { max-width: 30ch; margin: 12px auto 0; color: var(--muted); }
.retainer-figure {
  margin: 0;
  font-family: var(--hand);
  font-size: clamp(5rem, 3rem + 9vw, 9rem);
  line-height: 1;
  color: var(--accent);
}
.retainer h2 { margin-top: 8px; }
.retainer .lede { margin-top: 18px; }

/* ---------- Contact ---------- */
.details { margin: 24px auto 0; padding: 0; list-style: none; max-width: 30rem; text-align: left; }
.details li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--stone);
}
.details li:last-child { border-bottom: 1px solid var(--stone); }
.details dt, .details .label { font-family: var(--hand); font-size: 1.25rem; color: var(--accent); }

/* The lockup's gray backdrop is semi-transparent and was designed on white.
   A white backing makes it render as #d4d3d0 (= --stone), so it blends into stone areas. */
.lockup { background: #fff; }

/* Trademark symbol beside the logo (kept separate so the logo artwork itself is untouched).
   Sized and placed as a share of the logo's width, so it sits just after "media" at any size. */
.lockup-wrap { display: block; position: relative; margin-inline: auto; container-type: inline-size; }
.lockup-wrap .lockup { display: block; width: 100%; height: auto; }
.lockup-wrap .tm {
  position: absolute;
  left: 85.5%;
  top: 78.5%;
  font-family: var(--hand);
  font-size: max(9px, 5cqw);
  line-height: 1;
  color: #000;
}
.brand-name .tm { margin-left: 0.08em; font-size: 0.42em; vertical-align: 0.95em; }

/* ---------- Footer (stone matches the logo backdrop, so the lockup sits seamlessly) ---------- */
.site-footer { background: var(--stone); padding-block: 40px 32px; text-align: center; }
.site-footer .lockup-wrap { width: 168px; }
.site-footer .tagline { margin-top: 4px; color: var(--muted); }
.footer-social { margin-top: 2px; color: var(--muted); }
.footer-social a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.footer-social a:hover { color: var(--accent); }
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 4px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--hand);
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.3em; }

/* ---------- Lightbox ---------- */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #16142a;
  color: var(--paper);
  opacity: 0;
  transition: opacity var(--t-lb) var(--ease);
}
.lightbox::backdrop { background: transparent; }
.lightbox.is-open { opacity: 1; }
.lightbox figure {
  display: grid;
  place-items: center;
  gap: 12px;
  height: 100%;
  margin: 0;
  padding: 64px 16px 24px;
  grid-template-rows: 1fr auto;
}
.lightbox img {
  max-width: 100%;
  max-height: calc(100dvh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(0.98);
  transition: transform var(--t-lb) var(--ease), opacity var(--t-fast) var(--ease);
}
.lightbox.is-open img { transform: none; }
.lightbox img.is-loading { opacity: 0; }
.lightbox figcaption { font-size: 0.9375rem; color: var(--accent-soft); text-align: center; }
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(244 242 238 / 0.4);
  border-radius: 50%;
  background: rgb(22 20 38 / 0.5);
  color: var(--paper);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lb-btn:hover { opacity: 0.8; }
.lb-btn:active { transform: scale(0.94); }
.lb-btn:focus-visible { outline-color: var(--paper); }
.lb-close { top: 12px; right: 12px; }
.lb-prev, .lb-next { top: 50%; margin-top: -24px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
@media (max-width: 599px) {
  .lb-prev, .lb-next { top: auto; bottom: 16px; margin: 0; }
  .lightbox figure { padding-bottom: 80px; }
  .lightbox img { max-height: calc(100dvh - 180px); }
}

/* ---------- Entrance motion (JS adds .js; content is visible without it) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .tabs a::after, .js .gallery[role="tabpanel"] { transition: none; }
  .js .site-nav { transform: none; transition: opacity 1ms; }
  a.tile img, a.tile:hover img { transition: none; transform: none; }
  .button, .button:active, .lb-btn:active { transform: none; }
  .lightbox, .lightbox img { transition: opacity 1ms; transform: none; }
}