/* ==========================================================================
   Kassandra Nevarez — shared styles
   ========================================================================== */


/* ---------- Brand colors ---------- */
:root {
  --plum: #7a2a52;          /* primary accent: main buttons, H1, dividers */
  --green: #1f5e34;         /* secondary accent: links, labels (sparingly) */
  --pink-bg: #faf0f5;       /* page background */
  --pale-plum: #e1c8d5;     /* cards, section bands */
  --pale-green: #f0faf3;    /* backgrounds (sparingly) */
  --ink: #2d2d2d;           /* body text, other headings */
  --facet-light: rgb(250 240 245 / 0.55);                          /* thin inner line on plum shapes */
  --facet-dark: color-mix(in srgb, var(--plum) 25%, var(--pale-plum)); /* thin inner line on pale shapes */

  --font-body: 'Zalando Sans', system-ui, sans-serif;
  --font-display: 'Cinzel Decorative', Georgia, serif;

  --max-width: 64rem;
  --space-section: clamp(3.5rem, 8vw, 6rem);   /* padding at the top and bottom of each section */
  --space-gap: clamp(2.5rem, 6vw, 4rem);       /* space above and below every long divider, and above page titles */
  --gutter: 1rem;
  --radius: 0.75rem;
}

@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
}

/* Smooth cross-fade between pages (and image morphs on work pages) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ---------- Type scale ----------
   Desktop: ×1.333 scale (your sizes). Mobile: ×1.2 scale.
   Each size grows smoothly between a 375px phone and a 1200px screen. */
html { font-size: 100%; } /* 16px */

body {
  margin: 0;
  font-size-adjust: from-font;   /* fallback fonts match the web fonts' size, so text doesn't jump */
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--pink-bg);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.488rem, 1.706rem + 3.34vw, 4.21rem); color: var(--plum); }
h2 { font-size: clamp(2.074rem, 1.581rem + 2.102vw, 3.158rem); }
h3 { font-size: clamp(1.728rem, 1.437rem + 1.243vw, 2.369rem); }
h4 { font-size: clamp(1.44rem, 1.287rem + 0.654vw, 1.777rem); }
h5 { font-size: clamp(1.2rem, 1.14rem + 0.258vw, 1.333rem); }
small { font-size: clamp(0.75rem, 0.871rem - 0.161vw, 0.833rem); }

p { margin: 0 0 1em; }

a { color: var(--green); text-underline-offset: 0.2em; }
a:hover { color: var(--plum); }

img { max-width: 100%; height: auto; display: block; }

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

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }

/* Spacing rules: a long divider always has the same space above and
   below it, so whatever sits next to it drops its own padding. */
.ornament { margin-block: var(--space-gap); }
.ornament + .section,
.ornament + [hidden] + .section { padding-top: 0; }
.section:has(+ .closing-cta) { padding-bottom: 0; }

/* Section headings with a short plum divider underneath */
.section-title {
  text-align: center;
  margin-bottom: 0.4em;
}
.section-title + .rule { margin-bottom: clamp(2rem, 5vw, 3rem); }


.label {
  font-size: 1rem;
  color: var(--green);
}

.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: var(--gutter);
  top: 0.5rem;
  z-index: 100;
  background: var(--plum);
  color: var(--pink-bg);
  padding: 0.5rem 1rem;
}

/* ---------- Buttons ----------
   Lozenge shape (pointed at both ends, like a stretched diamond) with a
   thin inner "facet" line. The facet is a 1px ring cut out with an
   even-odd clip path; --i is how far in (px) the ring sits. */
.btn {
  --p: 1rem;                         /* how far the points stick out */
  --h: 48;                           /* button height in px, for the facet math */
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  height: 3rem;
  padding: 0 2.4rem;
  border: 0;
  background: var(--plum);
  clip-path: polygon(var(--p) 0, calc(100% - var(--p)) 0, 100% 50%, calc(100% - var(--p)) 100%, var(--p) 100%, 0 50%);
  font-family: var(--font-body);
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.btn::before,
.btn::after {
  content: '';
  position: absolute;
  inset: calc(var(--i) * 1px);
  z-index: -1;
  --pi: calc(var(--p) * (var(--h) - 2 * var(--i)) / var(--h));           /* point size at this depth */
  --pj: calc(var(--p) * (var(--h) - 2 - 2 * var(--i)) / var(--h) + 1px); /* ...and 1px further in */
  transition: opacity 0.2s, background-color 0.2s;
}
.btn::after {                        /* the facet ring */
  clip-path: polygon(evenodd,
    var(--pi) 0, calc(100% - var(--pi)) 0, 100% 50%, calc(100% - var(--pi)) 100%, var(--pi) 100%, 0 50%, var(--pi) 0,
    var(--pj) 1px, calc(100% - var(--pj)) 1px, calc(100% - 1px) 50%, calc(100% - var(--pj)) calc(100% - 1px), var(--pj) calc(100% - 1px), 1px 50%, var(--pj) 1px);
}
.btn-primary { color: var(--pink-bg); }
.btn-primary::after { --i: 4; background: var(--facet-light); }
.btn-primary:hover { background: var(--green); color: var(--pink-bg); } /* every button hovers to green with pale text */

.btn-outline { color: var(--plum); }
.btn-outline::before {               /* light inside that turns it into an outline */
  --i: 2;
  background: var(--pink-bg);
  clip-path: polygon(var(--pi) 0, calc(100% - var(--pi)) 0, 100% 50%, calc(100% - var(--pi)) 100%, var(--pi) 100%, 0 50%);
}
.btn-outline::after { --i: 5; background: var(--plum); }
.btn-outline:hover { background: var(--green); color: var(--pink-bg); }
.btn-outline:hover::before { opacity: 0; }
.btn-outline:hover::after { background: var(--facet-light); }

.btn:focus-visible {                 /* the shape hides outlines, so show focus with an underline */
  outline: none;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Link-out button (goes to another site): a ribbon with both ends
   notched inward, in a forest green outline with a thin inner facet
   line. Fills green on hover. The px values keep each layer's edges
   parallel for a 48px-tall button. */
.btn-link-out {
  --p: 0.9rem;                       /* how deep the end notches go */
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  height: 3rem;
  padding: 0 2.6rem;
  background: var(--green);
  color: var(--green);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--p)) 50%, 100% 100%, 0 100%, var(--p) 50%);
  font-family: var(--font-body);
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.2s;
}
.btn-link-out::before {              /* light inside that turns it into an outline */
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--pink-bg);
  clip-path: polygon(1.5px 0, calc(100% - 1.5px) 0, calc(100% - 14.7px) 50%, calc(100% - 1.5px) 100%, 1.5px 100%, 14.7px 50%);
  transition: opacity 0.2s;
}
.btn-link-out::after {               /* the facet line, 5px in */
  content: '';
  position: absolute;
  inset: 5px;
  z-index: -1;
  background: var(--green);
  clip-path: polygon(evenodd,
    3.8px 0, calc(100% - 3.8px) 0, calc(100% - 15.2px) 50%, calc(100% - 3.8px) 100%, 3.8px 100%, 15.2px 50%, 3.8px 0,
    5px 1px, calc(100% - 5px) 1px, calc(100% - 16.4px) 50%, calc(100% - 5px) calc(100% - 1px), 5px calc(100% - 1px), 16.4px 50%, 5px 1px);
  transition: background-color 0.2s;
}
.btn-link-out:hover { color: var(--pink-bg); }
.btn-link-out:hover::before { opacity: 0; }
.btn-link-out:hover::after { background: var(--facet-light); }
.btn-link-out:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--plum);
}
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
}
.site-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  color: var(--pink-bg);
  text-decoration: none;
}
.site-name:hover { color: var(--pale-plum); }
.site-nav ul {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Header and footer links get the faded line from the heading dividers.
   --line sets its color; it turns solid-ish on hover. */
.fade-link {
  text-decoration: none;
  padding-bottom: 0.3rem;
  background: linear-gradient(to right, transparent, var(--line), transparent) bottom / 100% 1px no-repeat;
  transition: background-size 0.2s;
}
.fade-link:hover { background-size: 100% 2px; }
.site-nav a {
  --line: var(--pale-plum);
  color: var(--pink-bg);
}
.site-nav a:hover { color: var(--pink-bg); }
.site-nav a[aria-current='page'] { --line: var(--pink-bg); background-size: 100% 2px; } /* page you're on */

/* ---------- Hero ---------- */
.hero .container {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-block: var(--space-gap) 0;
}
.hero-photo {
  order: -1;                       /* photo above the name on phones */
  justify-self: center;
  width: min(16.5rem, 66vw);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  border: 0.5rem solid var(--pale-plum);
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(122 42 82 / 0.45);
}
.statement {
  font-size: clamp(2.074rem, 1.581rem + 2.102vw, 3.158rem);   /* H2 size */
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;                /* splits the chain into even lines */
  margin-bottom: 0.75em;
}
.statement > span { white-space: nowrap; }  /* a word always keeps its arrow */
.flow-arrow {                      /* fading line ending in a pointed head */
  position: relative;
  display: inline-block;
  width: 0.7em;
  height: 0.4em;
  margin-inline: 0.2em;
  vertical-align: 0.1em;
  background: linear-gradient(to right, transparent, var(--plum)) left center / calc(100% - 0.2em) 2px no-repeat;
}
.flow-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 0.32em;
  height: 100%;
  background: var(--plum);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%);
}
.sr-only {                           /* read by screen readers, not shown */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bio { max-width: 38rem; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* Side by side on large screens. The headline shrinks a little if
   needed so each phrase stays on one line next to the photo. */
@media (min-width: 64rem) {
  .hero .container { grid-template-columns: 1fr 19.8rem; gap: 3rem; }
  .hero-photo { order: 2; width: 100%; }
}

/* ---------- Ornamental divider: line, diamond, line ---------- */
.ornament {                         /* nearly full-width thin line with a diamond in the middle */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--plum) 25%);
}
.ornament::after { background: linear-gradient(to left, transparent, var(--plum) 25%); }
.ornament span {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--plum);
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 2px var(--plum), inset 0 0 0 3px var(--facet-light);
}

/* Short line under section headings, faded at both ends */
.rule {
  width: 10rem;
  height: 2px;
  margin-inline: auto;
  background: linear-gradient(to right, transparent, var(--plum), transparent);
}

.closing-cta { padding-bottom: var(--space-section); }
.closing-cta .hero-actions { justify-content: center; margin-top: 0; }


/* ---------- Stats (count-up, effect 1) ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 36rem) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
/* Faceted card: four cut corners and a thin inner line, 6px in */
.facet-card {
  --cut: 1.25rem;
  position: relative;
  background: var(--pale-plum);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.facet-card::before {
  content: '';
  position: absolute;
  inset: 6px;
  --ci: calc(var(--cut) - 2.5px);
  --cj: calc(var(--cut) - 2.9px + 1px);
  background: var(--facet-dark);
  clip-path: polygon(evenodd,
    var(--ci) 0, calc(100% - var(--ci)) 0, 100% var(--ci), 100% calc(100% - var(--ci)),
    calc(100% - var(--ci)) 100%, var(--ci) 100%, 0 calc(100% - var(--ci)), 0 var(--ci), var(--ci) 0,
    var(--cj) 1px, calc(100% - var(--cj)) 1px, calc(100% - 1px) var(--cj), calc(100% - 1px) calc(100% - var(--cj)),
    calc(100% - var(--cj)) calc(100% - 1px), var(--cj) calc(100% - 1px), 1px calc(100% - var(--cj)), 1px var(--cj), var(--cj) 1px);
  pointer-events: none;
}
.facet-card > * { position: relative; } /* content sits above the facet line */

.stat {
  padding: 2rem 1.5rem;
  text-align: center;
}
.stat-number {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.696rem, 2.055rem + 2.733vw, 4.105rem);  /* 30% above H2 */
  line-height: 1.1;
  color: var(--plum);
  font-variant-numeric: tabular-nums;
}
.stat-label { display: block; margin-top: 0.6rem; }
.stat-source { display: block; margin-top: 0.5rem; }

/* ---------- Testimonials slider ---------- */
.testimonials { background: var(--pale-green); }
.carousel { position: relative; max-width: 50rem; margin-inline: auto; }
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.carousel-track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem clamp(0.5rem, 4vw, 3rem);
  box-sizing: border-box;
}
.slide blockquote { margin: 0; }
.quote-mark {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.75rem;
  fill: var(--plum);
}
.slide p {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.5;
}
.slide cite { font-style: normal; }
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.carousel-arrow {                   /* diamond-shaped arrow buttons */
  width: 2.25rem;
  height: 2.25rem;
  margin-inline: 0.5rem;
  padding: 0;
  border: 2px solid var(--plum);
  background: transparent;
  color: var(--plum);
  font-size: 1.1rem;
  cursor: pointer;
  transform: rotate(45deg);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.carousel-arrow span { display: block; transform: rotate(-45deg); }
.carousel-arrow { box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 3px var(--facet-dark); }
.carousel-arrow:hover {
  border-color: var(--green);
  background: var(--green);
  color: var(--pink-bg);
  box-shadow: inset 0 0 0 2px var(--green), inset 0 0 0 3px var(--facet-light);
}
.carousel-dots { display: flex; gap: 0.85rem; }
.carousel-dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: 2px solid var(--plum);
  background: transparent;
  cursor: pointer;
  transform: rotate(45deg);
}
.more-link { text-align: center; margin: 3rem 0 0; }
.more-link a { --line: var(--plum); color: var(--green); }
.carousel-dot[aria-current='true'] {
  background: var(--plum);
  box-shadow: inset 0 0 0 1px var(--plum), inset 0 0 0 2px var(--facet-light);
}

/* ---------- Timeline ----------
   Phones: one column with icons on the left.
   Desktop: entries alternate left and right of a center line. */
.timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 60rem;
}
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: 1rem;
  padding-bottom: 2.75rem;
}
.timeline-item:last-child { padding-bottom: 0; }

/* One continuous line, fading at both ends like the dividers */
.timeline { position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: calc(1.625rem - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--plum) 8%, var(--plum) 92%, transparent);
  opacity: 0.5;
}

/* Diamond icon badges: briefcase = work, cap = school.
   Each entry is a small grid (year / name / role / details), and the
   badge sits on the name's row so it lines up with the name. */
.timeline-badge {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: var(--plum);
  color: var(--pink-bg);
  box-shadow: inset 0 0 0 3px var(--plum), inset 0 0 0 4px var(--facet-light), 0 0 0 5px var(--pink-bg);
  transform: rotate(45deg);
}
.timeline-badge svg {
  width: 1.15rem;
  height: 1.15rem;
  transform: rotate(-45deg);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.timeline-content { display: contents; }
.timeline-content > * { grid-column: 2; }
.timeline-content > .label { grid-row: 1; }
.timeline-item h3 {
  grid-row: 2;
  font-size: clamp(1.44rem, 1.287rem + 0.654vw, 1.777rem);
  margin: 0.2em 0 0.15em;
}
.timeline-role { grid-row: 3; font-size: 1.1rem; color: var(--plum); margin-bottom: 0.4em; }
.timeline-content > p:not(.timeline-role) { grid-row: 4; }
.timeline-content > :last-child { margin-bottom: 0; }

@media (min-width: 48rem) {
  .timeline-item { grid-template-columns: 1fr 3.25rem 1fr; column-gap: 2rem; }
  .timeline::before { left: calc(50% - 1px); }
  .timeline-badge { grid-column: 2; }
  .timeline-item:nth-child(odd) .timeline-content > * { grid-column: 1; text-align: right; }
  .timeline-item:nth-child(even) .timeline-content > * { grid-column: 3; }
}

/* Icons pop in as you scroll (replays every time). Browsers without
   scroll-driven animations simply show them. */
@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {
    .timeline-badge {
      animation: pop-in auto linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 90%;
    }
  }
}
@keyframes pop-in {
  0% { transform: rotate(45deg) scale(0); }
  70% { transform: rotate(45deg) scale(1.15); }
  100% { transform: rotate(45deg) scale(1); }
}

/* ---------- Work With Me page ---------- */
.page-intro .container { padding-block: var(--space-gap) 0; }
.intro-text {
  max-width: 40rem;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.333rem);
  line-height: 1.55;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 40rem) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
.service { padding: 2rem 1.75rem; }
.service h3 { font-size: clamp(1.2rem, 1.14rem + 0.258vw, 1.333rem); color: var(--plum); } /* H5 size */
.service p { margin: 0; }

/* Contact form: one column, labels above fields */
#contact .section-title { margin-bottom: 1.5rem; }
.contact-form {
  --cut: 1.5rem;
  max-width: 32rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 5vw, 2.75rem);
}
.field { margin-bottom: 1.5rem; }
.field label { display: block; margin-bottom: 0.35rem; }
.optional { color: color-mix(in srgb, var(--ink) 75%, var(--pale-plum)); }
/* Fields share the form's cut corners. The plum frame is the wrapper
   showing around the field; it thickens on focus and on errors. */
.input-shape {
  --cut: 0.6rem;
  --pad: 1px;
  display: block;
  padding: var(--pad);
  background: var(--plum);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.input-shape:focus-within { --pad: 3px; }
.input-shape:has(:user-invalid),
.input-shape:has([aria-invalid='true']) { --pad: 2px; }
.input-shape:focus-within:has([aria-invalid='true']) { --pad: 3px; }
.field input,
.field textarea {
  --c: calc(var(--cut) - var(--pad) * 0.41);
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  font: inherit;                     /* 16px+ so phones don't zoom in */
  color: var(--ink);
  background: var(--pink-bg);
  border: 0;
  border-radius: 0;
  outline: none;                     /* focus shows as the thicker frame */
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.field textarea {                  /* the cut corner hides the resize grip, so the box grows as you type */
  resize: none;
  field-sizing: content;
  min-height: 9rem;
}
.field-error {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--plum);
}
.field-error:not(:empty)::before { content: '◆ '; }   /* a shape, not just color, marks the error */
.trap { position: absolute; left: -9999px; }
.form-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.form-status { margin: 0; text-align: center; }

/* ---------- My Work page ----------
   One list of project cards that switches between a grid and a slider. */
.work-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.25rem;
}
.view-toggle { display: flex; gap: 0.4rem; margin-left: auto; }

/* Filter: one button that opens a checklist */
.work-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.work-filter[hidden] { display: none; }
.work-filter-label { font-size: 0.85rem; color: var(--plum); }
.filter-status { margin: 0; font-size: 0.85rem; color: var(--green); }
.filter-menu { position: relative; }
.filter-menu summary { --cut: 0.45rem; width: 10.5rem; font-size: 0.85rem; line-height: 1.4; list-style: none; cursor: pointer; }
.filter-menu summary::-webkit-details-marker { display: none; }
.filter-menu summary:focus-visible { --pad: 3px; outline: none; }
.filter-summary {
  --c: calc(var(--cut) - var(--pad) * 0.41);
  display: block;
  padding: 0.25rem 1.75rem 0.25rem 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--pink-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a2a52' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 0.65rem center / 0.6rem;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
                     calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.filter-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 5;
  width: min(32rem, calc(100vw - 2 * var(--gutter)));
  padding: 1.5rem 1.75rem;
  box-sizing: border-box;
}
@media (max-width: 35.99rem) {
  .filter-panel { left: -2.6rem; }     /* lines up with the page edge, past the "Filter" label */
}
.filter-groups {
  display: grid;
  gap: 1rem 2rem;
  max-height: 60vh;
  overflow-y: auto;
}
@media (min-width: 30rem) { .filter-groups { grid-template-columns: 1fr 1.4fr; } }
.filter-groups fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-groups legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--plum);
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.25rem;
  padding-left: 0.3rem;
  cursor: pointer;
}
.filter-option input {               /* diamond checkbox */
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  margin: 0;
  appearance: none;
  background: var(--pink-bg);
  border: 2px solid var(--plum);
  transform: rotate(45deg);
  cursor: pointer;
}
.filter-option input:checked {
  background: var(--plum);
  box-shadow: inset 0 0 0 1px var(--plum), inset 0 0 0 2px var(--facet-light);
}
.filter-option input:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.filter-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.filter-empty { padding-block: 3rem; text-align: center; font-size: 1.1rem; }
.work-list[hidden] { display: none; }

/* Small lozenge buttons; the chosen one looks like a filled button */
.btn-sm { --p: 0.75rem; --h: 36; height: 2.25rem; padding: 0 1.6rem; font-size: 0.95rem; }
.btn-xs { --p: 0.6rem; --h: 28; height: 1.75rem; padding: 0 1.2rem; font-size: 0.85rem; }
.toggle-btn[aria-pressed='true'] { background: var(--plum); color: var(--pink-bg); }
.toggle-btn[aria-pressed='true']::before { opacity: 0; }
.toggle-btn[aria-pressed='true']::after { background: var(--facet-light); }
.toggle-btn[aria-pressed='true']:hover { background: var(--green); }

.work-list .carousel-track { gap: 1.25rem; }
.work-card a {
  display: block;
  padding: 0.75rem 0.75rem 1.5rem;
  color: var(--ink);
  text-decoration: none;
}
.work-card img {
  width: 100%;
  aspect-ratio: 16 / 9;              /* every project image is 1600 x 900, so nothing gets cropped */
  object-fit: cover;
  --cut: 0.85rem;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.work-card h2 {
  font-size: clamp(1.2rem, 1.14rem + 0.258vw, 1.333rem);   /* H5 size */
  margin: 1rem 0.5rem 0.25rem;
  color: var(--ink);
  transition: color 0.2s;
}
.work-card a:hover h2 { color: var(--plum); }
.work-card a:focus-visible { outline-offset: -4px; }
.work-type { margin: 0 0.5rem; color: var(--plum); }
.work-card .label { margin: 0 0.5rem; }
.work-blurb { margin: 0.6rem 0.5rem 0; }
.work-card[hidden] { display: none; }

/* Grid view */
.work-list.is-grid .carousel-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  overflow: visible;
}
.work-list.is-grid .carousel-controls,
.work-list.is-single .carousel-controls { display: none; }
.work-list.is-single .work-card { flex-basis: 100%; }

/* 15 dots won't fit on a phone, so phones get "3 of 15" instead */
.carousel-count { display: none; margin: 0; min-width: 4.5rem; text-align: center; color: var(--plum); }
@media (max-width: 35.99rem) {
  .work-list .carousel-dots { display: none; }
  .work-list .carousel-count { display: block; }
}

/* Slider view (default): one large card with a slice of the next */
.work-list.is-slider .work-card { flex: 0 0 85%; scroll-snap-align: start; }
.work-list.is-slider .work-card h2 { font-size: clamp(1.44rem, 1.287rem + 0.654vw, 1.777rem); } /* H4 size */
.work-list.is-slider .work-card a { padding: 1rem 1rem 1.75rem; }

/* ---------- Project pages ---------- */
.project-header { padding-block: var(--space-gap) 1.5rem; }
.back-link { margin: 0 0 1.5rem; }
.back-link a { --line: var(--plum); color: var(--green); }
.project-header h1 { margin-bottom: 0.2em; }
.project-subhead { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.333rem); color: var(--plum); margin: 0; }
.project-image {
  --cut: 1.25rem;
  width: 100%;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.project-body section { max-width: 44rem; margin-inline: auto; margin-bottom: 2.5rem; } /* comfortable reading width, centered */
.project-body section:last-child { margin-bottom: 0; }
.project-media { max-width: none !important; text-align: center; } /* video or link button, centered */
.details-list { font-size: 1.1rem; padding-left: 2rem; margin: 0 0 1em; }
.details-list li { margin-bottom: 0.35rem; }
.results-sub { list-style: none; padding-left: 0; margin: 0.4rem 0 0; }
.results-sub li { position: relative; padding-left: 1.25rem; color: color-mix(in srgb, var(--ink) 85%, var(--plum)); }
.results-sub li::before {           /* hollow diamond for sub-points */
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.6em;
  width: 0.45rem;
  height: 0.45rem;
  box-sizing: border-box;
  border: 1px solid var(--plum);
  transform: rotate(45deg);
}
.project-body h2 { font-size: clamp(1.6rem, 1.4rem + 0.85vw, 2.05rem); margin-bottom: 0.4em; } /* a step above H4 */

/* Collapsible sections. main.js builds these from each section's heading:
   heading, a fading line, then a small "Show" / "Hide" lozenge button.
   Without the script, sections simply stay open. */
.project-body section.is-collapsible { margin-bottom: 1.75rem; }
.collapse-head {                     /* heading, short line and Show/Hide button, centered together */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.collapse-head h2 { margin: 0; text-align: center; }
@media (min-width: 22rem) { .collapse-head h2 { flex: none; } }  /* the line shrinks before a heading wraps */
.collapse-line {
  flex: 0 1 15rem;                   /* up to 15rem, shrinking on narrow screens so nothing wraps */
  min-width: 1.5rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--plum));
}
.collapse-btn { --h: 27.2; --p: 0.6rem; flex: none; height: 1.7rem; padding: 0 1.2rem; font-size: 0.663rem; }
.collapse-body {                      /* slides open by growing from 0 to full height */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.collapse-body > div { overflow: hidden; }
.collapse-body > div > :first-child { margin-top: 0.75rem; }
.is-open .collapse-body { grid-template-rows: 1fr; }
.project-body p { font-size: 1.1rem; }
.footnote { font-size: 0.9rem !important; margin-top: 0.75rem; }
.results-list { list-style: none; padding: 0; margin: 0; font-size: 1.1rem; }
.results-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.results-list li::before {           /* small plum diamond bullet */
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.6em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--plum);
  transform: rotate(45deg);
}
.video-embed {
  --cut: 1rem;
  max-width: 48rem;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
                     calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Footer (a touch thinner than the header) ---------- */
.site-footer {
  background: var(--pale-green);
  padding-block: 0.75rem;
  font-size: 0.9rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer a { --line: var(--plum); color: var(--ink); }
.site-footer a:hover { color: var(--plum); }

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