/* ======================================================
   DESIGN TOKENS — Maker Comet brand palette
   ====================================================== */
:root {
  /* Brand colors */
  --c-bg:           #1c1c1c;                     /* Dark grey — main bg */
  --c-bg-card:      #232762;                     /* Dark navy — card / placeholder bg */
  --c-navy:         #232762;                     /* Brand dark blue */
  --c-accent:       #6666cc;                     /* Brand accent purple-blue */
  --c-accent-bright:#8a8ae0;                     /* Slightly brighter accent for hover */
  --c-accent-soft:  rgba(102, 102, 204, 0.12);
  --c-accent-glow:  rgba(102, 102, 204, 0.55);
  --c-text:         #ffffff;
  --c-text-muted:   #b8b8c0;
  --c-border:       rgba(102, 102, 204, 0.4);    /* Section dividers, visible */
  --c-border-soft:  rgba(102, 102, 204, 0.2);    /* Card / button borders */
  --c-overlay:      rgba(0, 0, 0, 0.6);
  --c-label-bg:     rgba(0, 0, 0, 0.85);

  --font-base: 'PT Sans', sans-serif;

  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  --max-w:  1200px;
  --gutter: 1.5rem;

  --banner-h:        33vh;
  --banner-h-mobile: 120px;

  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 160ms;
  --dur-med:  280ms;
}

/* ======================================================
   RESET & BASE
   ====================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-base);
  font-weight: 400;
  color: var(--c-text);
  background-color: var(--c-bg);
  line-height: 1.7;
  overflow-x: hidden;
}

img, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

ul[role="list"] {
  list-style: none;
}

/* Anchor links land below the fixed banner */
section[id] {
  scroll-margin-top: var(--banner-h);
}

/* ======================================================
   BODY LINKS — glow on hover (desktop)
   ====================================================== */
.body-link {
  color: var(--c-accent);
  font-weight: 700;
  border-bottom: 1px solid rgba(102, 102, 204, 0.35);
  transition:
    color var(--dur-fast),
    border-color var(--dur-fast),
    text-shadow var(--dur-med) var(--ease-out);
}

.body-link:hover,
.body-link:focus-visible {
  color: var(--c-accent-bright);
  border-bottom-color: var(--c-accent);
  text-shadow:
    0 0 8px var(--c-accent-glow),
    0 0 18px rgba(102, 102, 204, 0.35);
  outline: none;
}

/* ======================================================
   FIXED HEADER (banner + logo)
   ====================================================== */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--banner-h);
  z-index: 100;
  overflow: hidden;
  background: var(--c-bg);
}

.banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
}

.banner-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: auto;
  height: auto;
  max-width: min(820px, 78vw);
  max-height: 94%;
}

/* Hamburger — top-level fixed so it stays above the overlay */
.nav-hamburger {
  position: fixed;
  top: var(--sp-6);
  right: var(--sp-6);
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.55rem;
  border-radius: 4px;
  transition: opacity var(--dur-fast);
}

.nav-hamburger:hover { opacity: 0.75; }

.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform var(--dur-med) var(--ease-out),
    opacity var(--dur-med) var(--ease-out),
    background-color var(--dur-fast);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Slide-in nav panel */
.nav-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(300px, 80vw);
  background: var(--c-bg);
  border-left: 1px solid var(--c-border);
  padding: calc(var(--sp-16) + var(--sp-4)) var(--sp-6) var(--sp-8);
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-out);
  z-index: 110;
}

.nav-menu[aria-hidden="false"] {
  transform: translateX(0);
}

.nav-menu ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.nav-link {
  display: block;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 4px;
  color: var(--c-text);
  transition:
    color var(--dur-fast),
    background-color var(--dur-fast),
    text-shadow var(--dur-med) var(--ease-out);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--c-accent-bright);
  background-color: var(--c-accent-soft);
  text-shadow:
    0 0 8px var(--c-accent-glow),
    0 0 18px rgba(102, 102, 204, 0.3);
  outline: none;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-overlay);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 105;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out);
}

.nav-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ======================================================
   HERO
   ====================================================== */
#hero {
  min-height: 100svh;
  padding-top: var(--banner-h);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Soft navy depth glow over the dark grey base */
#hero::before {
  content: '';
  position: absolute;
  top: var(--banner-h);
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%, rgba(35, 39, 98, 0.45) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 15% 90%, rgba(102, 102, 204, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 35% 25% at 85% 85%, rgba(35, 39, 98, 0.12) 0%, transparent 50%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-12) var(--gutter) var(--sp-16);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-6);
}

.hero-headline {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: clamp(2.25rem, 6.5vw, 4.5rem);
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--c-text);
}

.hero-copy {
  max-width: 70ch;
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  color: var(--c-text);
  line-height: 1.75;
}

/* ======================================================
   CAROUSEL
   ====================================================== */
.carousel {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-top: var(--sp-4);
}

.carousel-viewport {
  overflow: hidden;
  border-radius: 8px;
}

.carousel-track {
  display: flex;
  gap: var(--sp-4);
  transition: transform var(--dur-med) var(--ease-out);
  will-change: transform;
}

/* Explicit width + max-width prevent the video's intrinsic dimensions from
   expanding the flex slot in some browsers. */
.carousel-item {
  flex: 0 0 calc((100% - 2 * var(--sp-4)) / 3);
  width: calc((100% - 2 * var(--sp-4)) / 3);
  max-width: calc((100% - 2 * var(--sp-4)) / 3);
  min-width: 0;
}

.world-thumb {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--c-border-soft);
  background: var(--c-bg-card);
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-fast),
    box-shadow var(--dur-med) var(--ease-out);
}

/* Padding-top trick locks the 16:9 ratio independently of child video dimensions */
.world-thumb::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 9 / 16 */
}

/* Hover lift only on devices with a real pointer (mouse). On touch screens
   the transform would move the tile under the finger and cause the browser to
   cancel the tap, which stopped the carousel links from opening on mobile. */
@media (hover: hover) {
  .world-thumb:hover {
    transform: translateY(-3px) scale(1.015);
    border-color: var(--c-accent);
    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.5),
      0 0 0 1px var(--c-accent-soft);
  }
}

.world-thumb:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* "Coming Soon" tiles: not clickable, so no hover lift and a default cursor.
   The image is dimmed slightly to read as inactive. */
.world-thumb--soon {
  cursor: default;
}

.world-thumb--soon:hover {
  transform: none;
  border-color: var(--c-border-soft);
  box-shadow: none;
}

.world-thumb--soon .world-video {
  opacity: 0.55;
}

.world-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.world-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: var(--sp-8) var(--sp-4) var(--sp-3);
  background: linear-gradient(to top, var(--c-label-bg) 0%, transparent 100%);
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-align: left;
  color: var(--c-text);
  text-transform: uppercase;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(28, 28, 28, 0.85);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--dur-fast),
    border-color var(--dur-fast),
    opacity var(--dur-fast);
  z-index: 10;
}

.carousel-arrow:hover {
  background: var(--c-navy);
  border-color: var(--c-accent);
}

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.carousel-arrow--prev { left:  -1.35rem; }
.carousel-arrow--next { right: -1.35rem; }

.carousel-controls-mobile {
  display: none;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.carousel-mobile-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--dur-fast),
    background-color var(--dur-fast);
}

.carousel-mobile-btn:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

.icon-play { display: none; }

/* ======================================================
   SECTION SHARED — all headings centered + regular weight
   ====================================================== */
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-24) var(--gutter);
}

.section-inner h2 {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  letter-spacing: 0.03em;
  color: var(--c-text);
  margin-bottom: var(--sp-16);
  text-align: center;
}

/* Tighter spacing under the Other Work heading since the first subsection
   heading sits right below it. Adjust this value to tune the gap. */
#other-work .section-inner h2 {
  margin-bottom: var(--sp-8);
}

/* Alternating section colors: hero (grey) → about (navy) → other (grey) → teaching (navy) → contact (grey) */
#about      { background: var(--c-navy); border-top: 1px solid var(--c-border); }
#other-work { background: var(--c-bg);   border-top: 1px solid var(--c-border); }
#faqs       { background: var(--c-navy); border-top: 1px solid var(--c-border); }
#contact    { background: var(--c-bg);   border-top: 1px solid var(--c-border); }

/* ======================================================
   ABOUT
   ====================================================== */
.about-intro {
  display: flow-root; /* Contains the floated portrait */
  margin-bottom: var(--sp-12);
}

.about-portrait {
  float: right;
  width: min(250px, 32%);
  height: auto;
  margin: -1rem 0 var(--sp-4) var(--sp-8); /* first value (top) shifts portrait up/down to center with paragraph — negative = move up, positive = move down */
  border-radius: 4px;
  border: 1px solid var(--c-border-soft);
}

.about-intro p,
.about-body {
  font-size: 1.1875rem;
  line-height: 1.8;
  color: var(--c-text);
}

/* Diptych: both images render at the same height; widths auto-adjust to each
   image's natural aspect ratio so the wider rustic-cafe gets more horizontal
   space and ends up flush with go-beans top-to-bottom. */
.about-diptych {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-24); /* bumped from var(--sp-6) — adjust here to tune spacing between the two images */
  max-width: 1100px;
  margin: var(--sp-16) auto;
}

.about-diptych img {
  height: clamp(120px, 14vw, 190px);
  width: auto;
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid var(--c-border-soft);
}

.about-body {
  margin-bottom: var(--sp-12);
}

.about-cta {
  text-align: center;
  font-size: 1.25rem;
  margin-top: var(--sp-12);
}

/* ======================================================
   OTHER WORK
   ====================================================== */
.subsection-heading {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-text);
  opacity: 0.85;
  margin-top: var(--sp-16);
  margin-bottom: var(--sp-8);
}

/* First subsection sits right under the section h2, so no top margin */
.subsection-heading:first-of-type {
  margin-top: 0;
}

/* Optional intro paragraph that sits between a subsection heading and its content */
.subsection-intro {
  text-align: center;
  max-width: 560px;
  margin: calc(-1 * var(--sp-4)) auto var(--sp-8);
  font-size: 1.0625rem;
  color: var(--c-text);
  line-height: 1.7;
}

.hologram-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  max-width: 800px;
  margin: 0 auto;
}

.hologram-item {
  width: 100%;
  margin: 0;
}

/* Print grid — equal-height treatment like the about diptych so prints with
   different aspect ratios still feel uniform */
.print-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-8);
  max-width: 900px;
  margin: 0 auto;
}

.print-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.print-item img {
  height: clamp(280px, 32vw, 440px);
  width: auto;
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid var(--c-border-soft);
}

.work-caption {
  text-align: center;
  margin-top: var(--sp-4);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--c-text);
  text-transform: uppercase;
  font-weight: 400;
}

/* ======================================================
   FAQS
   ====================================================== */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
}

.faq-question {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--c-text);
  margin-top: var(--sp-12); /* spacing between Q&A pairs — adjust to tune */
  margin-bottom: var(--sp-4);
}

/* Circular bullet before each question */
.faq-question::before {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--c-text);
  margin-right: 0.65em;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
}

.faq-question:first-of-type {
  margin-top: 0;
}

.faq-answer {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--c-text);
  margin-left: 0; /* override default <dd> indent */
}

/* Footnote marker — small superscript asterisk linking to the note */
.footnote-marker {
  font-size: 0.7em;
  color: var(--c-accent-bright);
  text-decoration: none;
  margin-left: 0.05em;
  transition: text-shadow var(--dur-fast);
}

.footnote-marker:hover,
.footnote-marker:focus-visible {
  text-shadow: 0 0 8px var(--c-accent-glow);
  outline: none;
}

/* Footnote paragraph below the FAQ list */
.faq-footnote {
  max-width: 820px;
  margin: var(--sp-16) auto 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border-soft);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--c-text-muted);
}

.faq-footnote sup {
  font-size: 0.75em;
  color: var(--c-accent-bright);
  margin-right: 0.15em;
}

/* ======================================================
   CONTACT FORM
   ====================================================== */
.contact-intro {
  text-align: center;
  font-size: 1.0625rem;
  color: var(--c-text);
  margin-top: calc(-1 * var(--sp-8)); /* pull up under the centered h2 */
  margin-bottom: var(--sp-12);
}

.contact-form {
  max-width: 760px;
  margin: 0 auto;
}

/* Name + Email share a row on desktop */
.form-row {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.form-field {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: var(--sp-4);
}

/* Fields already inside .form-row don't need their own bottom margin */
.form-row .form-field {
  margin-bottom: 0;
}

.form-label {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}

.form-input,
.form-textarea {
  font-family: var(--font-base);
  font-size: 1rem;
  color: #1c1c1c;
  background: #ffffff;
  border: 1px solid var(--c-border-soft);
  border-radius: 4px;
  padding: 0.75rem 0.85rem;
  width: 100%;
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}

.form-textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.6;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* Honeypot — visually hidden but still present for bots */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  margin-top: var(--sp-2);
}

.form-submit {
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c-text);
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: 4px;
  padding: 0.7rem 2.2rem;
  transition:
    background-color var(--dur-fast),
    border-color var(--dur-fast),
    box-shadow var(--dur-med) var(--ease-out),
    opacity var(--dur-fast);
}

.form-submit:hover,
.form-submit:focus-visible {
  background: var(--c-accent-bright);
  border-color: var(--c-accent-bright);
  box-shadow:
    0 0 10px var(--c-accent-glow),
    0 0 22px rgba(102, 102, 204, 0.3);
  outline: none;
}

.form-submit:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
  background: var(--c-accent);
  border-color: var(--c-accent);
}

/* Status / thank-you message */
.form-status {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}

.form-status--success {
  color: var(--c-text);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-border);
}

.form-status--error {
  color: #ffd9d9;
  background: rgba(180, 60, 60, 0.15);
  border: 1px solid rgba(200, 90, 90, 0.5);
}

/* ======================================================
   FOOTER
   ====================================================== */
#site-footer {
  border-top: 1px solid var(--c-border);
  background: var(--c-bg);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-8) var(--gutter);
  text-align: center;
}

.footer-copy {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
}

/* ======================================================
   RESPONSIVE — TABLET (768 – 1023px)
   ====================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .carousel-item {
    flex: 0 0 calc((100% - var(--sp-4)) / 2);
    width: calc((100% - var(--sp-4)) / 2);
    max-width: calc((100% - var(--sp-4)) / 2);
  }
}

/* ======================================================
   RESPONSIVE — MOBILE (< 768px)
   ====================================================== */
@media (max-width: 767px) {
  :root {
    --gutter: 1.25rem;
  }

  #site-header {
    height: var(--banner-h-mobile);
  }

  .banner-logo {
    max-width: min(320px, 78vw);
    max-height: 88%;
  }

  .nav-hamburger {
    top: var(--sp-4);
    right: var(--sp-4);
    width: 2.5rem;
    height: 2.5rem;
  }

  #hero {
    padding-top: var(--banner-h-mobile);
  }

  #hero::before {
    top: var(--banner-h-mobile);
  }

  section[id] {
    scroll-margin-top: var(--banner-h-mobile);
  }

  .hero-inner {
    padding: var(--sp-12) var(--gutter) var(--sp-16);
    gap: var(--sp-5);
  }

  .carousel-item {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .carousel-item:not(.is-active) {
    visibility: hidden;
    pointer-events: none;
  }

  .carousel-arrow {
    display: none;
  }

  .carousel-controls-mobile {
    display: flex;
  }

  .section-inner {
    padding: var(--sp-16) var(--gutter);
  }

  /* About — stack portrait on top, stack diptych vertically */
  .about-portrait {
    float: none;
    display: block;
    margin: 0 auto var(--sp-6);
    width: min(260px, 70%);
  }

  .about-diptych {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    max-width: 420px;
  }

  .about-diptych img {
    height: auto;
    width: 100%;
  }

  /* Other Work — stack holograms and prints vertically on mobile */
  .hologram-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }

  .print-grid {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
    max-width: 420px;
  }

  .print-item img {
    height: auto;
    width: 100%;
    max-height: 480px;
  }

  /* Contact — Name and Email stack instead of sharing a row */
  .form-row {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
  }

  .form-row .form-field {
    margin-bottom: var(--sp-4);
  }
}

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