/* ==========================================================
   Juana Salonia — shared design system
   Archetype: "Structured Playfulness" — editorial grid order
   (Zack Millsaps / DesignThinkers-style hairlines, numbered
   sections) + scrapbook collage warmth (polaroids, washi tape).
   ========================================================== */

:root{
  /* Palette 1 — finalized brand colors */
  --color-background: #FDFAF5;
  --color-eggplant:   #66253D;
  --color-pink:       #F6C1C1;
  --color-terracotta: #ED5C30;
  --color-accent-text: #C2410F;   /* darker terracotta for TEXT (4.7:1 on cream; the bright one is 3.1:1) */
  --color-lime:       #C9C65F;
  --color-cyan:       #B8D8F0;

  --color-text: var(--color-eggplant);
  --color-text-muted: #8a5063;

  /* Typography — Google Fonts standing in for the licensed brand fonts
     (Orpheus Pro / The Seasons Regular -> Fraunces,
      Manslava / Six Hands -> Permanent Marker). Swap the font-family
      values below once licensed font files are provided. Fraunces is a
      variable serif that can go quiet/italic (logo, captions) and huge
      high-contrast display (hero, page titles) from one family — closer
      to the zackmillsaps.com / iarasnei.com references than a single
      static italic serif. */
  --font-serif: 'Bodoni Moda', 'Georgia', serif;
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --container: 1240px;
  --side-pad: clamp(1.25rem, 4vw, 4rem);
  --section-pad: clamp(3rem, 7vw, 6.5rem);
  --rule: 1px solid var(--color-eggplant);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
h1,h2,h3,h4{ margin: 0; font-weight: 600; }
p{ margin: 0; }
.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--side-pad); }

/* washi-tape strip, pure CSS */
.tape{
  position: absolute;
  width: 84px; height: 30px;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--color-pink) 85%, white),
    color-mix(in srgb, var(--color-pink) 85%, white) 6px,
    color-mix(in srgb, var(--color-pink) 55%, white) 6px,
    color-mix(in srgb, var(--color-pink) 55%, white) 12px);
  opacity: .9;
  box-shadow: 0 2px 5px rgba(102,37,61,.12);
  pointer-events: none;
}

/* ---------- header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--side-pad);
  background: color-mix(in srgb, var(--color-background) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: var(--rule);
}
.site-header.over-hero{ border-bottom-color: transparent; }
/* flat wordmark logo (pre-trimmed PNG), sized by height */
.logo-mark{ display: flex; align-items: center; flex-shrink: 0; height: 40px; }
.logo-mark img{ height: 100%; width: auto; }

/* nav links live directly in the header on tablet/desktop; the hamburger
   + full-screen drawer only take over once they no longer fit (mobile) */
.header-nav-inline{ display: none; align-items: center; gap: 1.75rem; }
.header-nav-inline a{ position: relative; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; font-weight: 600; padding-bottom: .2rem; }
.header-nav-inline a::after{
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.header-nav-inline a:hover, .header-nav-inline a[aria-current="page"]{ color: var(--color-accent-text); }
.header-nav-inline a:hover::after, .header-nav-inline a[aria-current="page"]::after{ transform: scaleX(1); transform-origin: left; }

.header-right{ display: flex; align-items: center; gap: 1.5rem; }
.lang-toggle{
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; letter-spacing: .05em; color: var(--color-text-muted);
}
.lang-toggle button{ font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: .2rem .1rem; cursor: pointer; border-bottom: 1px solid transparent; }
.lang-toggle button:hover{ color: var(--color-eggplant); }
.lang-toggle button[aria-pressed="true"]{ color: var(--color-eggplant); font-weight: 700; border-bottom-color: var(--color-terracotta); }
.hamburger{ width: 34px; height: 26px; display:flex; flex-direction:column; justify-content:space-between; }
.hamburger span{ display:block; height: 1.5px; width: 100%; background: var(--color-eggplant); transition: transform .3s ease, opacity .3s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(11.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-11.5px) rotate(-45deg); }

@media (min-width: 720px){
  .header-nav-inline{ display: flex; }
  .hamburger{ display: none; }
}

/* ---------- nav drawer ---------- */
.site-nav{
  position: fixed; inset: 0; z-index: 400;
  background: var(--color-eggplant); color: var(--color-background);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.25rem;
  transform: translateY(-100%); transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.site-nav.is-open{ transform: translateY(0); }
.site-nav ul{ display:flex; flex-direction: column; gap: 1rem; text-align: center; }
.site-nav a{ font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.6rem, 5vw, 2.6rem); }
.site-nav a[aria-current="page"]{ color: var(--color-accent-text); }
.site-nav a:hover{ color: var(--color-accent-text); }

/* ---------- thick framing bar (Anna Koyn moodboard reference) ---------- */
/* a bold structural bar instead of a hairline, used to frame a key
   section edge-to-edge (e.g. under the header, or closing the hero) */

/* ---------- confetti dots ---------- */
/* ---------- dividers ---------- */
.divider{ position: relative; border-top: var(--rule); margin-inline: var(--side-pad); height: 2px; }

/* ---------- section scaffolding ---------- */
.mini-section{ padding-block: var(--section-pad); padding-inline: var(--side-pad); position: relative; }
/* cap each section's content on very wide screens so it doesn't sprawl
   into empty space — the section itself stays full-bleed for block-lime
   etc. backgrounds, only its children get centered/capped */
.mini-section > *{ max-width: 1400px; margin-inline: auto; }
/* Section markers read as a small "catalog" tag — [ 01 / ABOUT ME ] in a
   typewriter face — per the Anna Koyn (ODW) moodboard reference, instead
   of a big bold heading. */
.section-head{ display: flex; align-items: baseline; gap: 0; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); font-family: var(--font-mono); }
.section-head::before{ content: "["; color: var(--color-text-muted); margin-right: .35em; }
.section-head::after{ content: "]"; color: var(--color-text-muted); margin-left: .1em; }
.section-number{ font-size: .72rem; letter-spacing: .03em; color: var(--color-text-muted); font-weight: 400; }
.section-number::after{ content: " /"; margin-right: .35em; }
.section-title{ font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; font-weight: 400; color: var(--color-text-muted); }
.eyebrow{ font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 500; }
/* same catalog-tag treatment for the single-line labels in page headers */
.tag-label{ font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; }
.tag-label::before{ content: "["; margin-right: .35em; }
.tag-label::after{ content: "]"; margin-left: .35em; }

/* underline draws in on hover instead of sitting there statically —
   per the Harriet (Webflow) reference's link/button interactions */
.link-arrow{ position: relative; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; padding-bottom: .15rem; }
.link-arrow::after{
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.65,0,.35,1);
}
.link-arrow:hover{ color: var(--color-accent-text); }
.link-arrow:hover::after{ transform: scaleX(1); transform-origin: left; }

[data-reveal]{ opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].in-view{ opacity: 1; transform: translateY(0); }

/* ---------- buttons — sharp corners, no pills ---------- */
.btn{
  display: inline-block; padding: .9rem 1.7rem; font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; border: 1.5px solid var(--color-eggplant);
  border-radius: 2px; transition: background .25s ease, color .25s ease;
}
.btn-primary{ background: var(--color-eggplant); color: var(--color-background); }
.btn-primary:hover{ background: var(--color-accent-text); border-color: var(--color-accent-text); }

/* ---------- full-bleed color blocks (iarasnei.com) ---------- */
/* A mini-section can opt into an edge-to-edge flat color background
   instead of a bordered card — bolder punctuation between the quiet
   cream sections. */
.block-lime{ background: #E7E3DD; } /* warm neutral gray (was lime) */

.block-cyan{ background: var(--color-cyan); }

/* ==========================================================
   HERO — full-bleed photo with the wordmark overlaid directly on the
   image (per the client's "brand book" cover reference), name + claim
   centered over a desaturated portrait instead of a split layout.
   ========================================================== */
.hero{
  position: relative; overflow: hidden;
  min-height: min(92vh, 820px);
  display: flex; align-items: center; justify-content: flex-start;
  text-align: left; padding: clamp(2rem,6vw,4rem) var(--side-pad);
}
.hero-photo-full{ position: absolute; inset: 0; z-index: 0; }
/* she stands at the bottom of the frame, so anchor the crop to the bottom */
.hero-photo-full img{ width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero-scrim{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,30,45,.42) 0%, rgba(20,30,45,.22) 50%, rgba(20,30,45,.08) 100%);
}
/* phones: center the crop on her and put the name + buttons up in the empty sky */
@media (max-width: 719px){
  .hero{ align-items: flex-start; padding-top: 7rem; }
  .hero-photo-full img{ object-position: 65% bottom; }
}

.hero-overlay{
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
  max-width: 720px; color: var(--color-background);
}
.hero-wordmark{ width: min(78vw, 480px); }
/* tagline + button match the "Let's work together →" link: normal case, bold,
   no tracking — fewer type treatments stacked on the photo */
.hero-tagline{ font-size: 1.1rem; font-weight: 600; }
.hero-overlay .btn{ text-transform: none; letter-spacing: 0; font-size: 1rem; }
.hero-overlay .hero-sub{ color: color-mix(in srgb, var(--color-background) 90%, transparent); font-size: 1.05rem; max-width: 42ch; }
.hero-ctas{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; margin-top: .5rem; }
.hero-overlay .hero-ctas{ justify-content: flex-start; }
.hero-overlay .link-arrow:hover{ color: var(--color-lime); }

/* ==========================================================
   PAGE HEADER — for internal pages (about/services/work/contact)
   ========================================================== */
.page-header{ padding: clamp(2.5rem,6vw,5rem) var(--side-pad) clamp(1.5rem,4vw,3rem); position: relative; }
.page-header .eyebrow{ margin-bottom: .75rem; }
.page-title{
  font-family: var(--font-serif); font-weight: 500; font-style: italic;
  font-size: clamp(2.2rem, 7vw, 4.4rem); line-height: 1.08;
  overflow-wrap: break-word;
}
.page-lede{ max-width: 56ch; font-size: 1.05rem; color: var(--color-text-muted); margin-top: 1.25rem; }
.back-link{ font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.back-link:hover{ opacity: 1; color: var(--color-accent-text); }

/* ==========================================================
   ABOUT — minimalist: the client's own ready-made polaroid cutout
   (photo + washi tape, already composited, transparent background)
   on the left, plain serif copy on the right. No notebook, no card.
   ========================================================== */
.about-simple{ display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 720px){
  .about-simple{ grid-template-columns: minmax(240px, 320px) 1fr; gap: 4.5rem; }
  .about-simple--lg{ grid-template-columns: minmax(300px, 460px) 1fr; gap: 3.5rem; }
}
.about-simple-photo{ justify-self: center; width: min(70vw, 320px); }
.about-simple--lg .about-simple-photo{ width: min(85vw, 460px); }
.about-simple--lg{ align-items: center; }
.about-simple-photo img{ width: 100%; height: auto; display: block; }
.about-simple-copy{ display: flex; flex-direction: column; gap: 1.5rem; max-width: 60ch; }
.about-simple-copy p{ font-size: 1.05rem; line-height: 1.7; }
/* emphasis inside paragraphs: same color as the text, just bold */
.highlight{ color: inherit; font-weight: 700; }

/* small photo carousel — About page only, same minimal polaroid frame
   but cycling through a few real photos instead of one fixed shot */
.about-carousel{ position: relative; }
.about-carousel-frame{
  position: relative; aspect-ratio: 4/5; background: #fff;
  border: 1px solid var(--color-eggplant); box-shadow: 4px 8px 18px rgba(102,37,61,.14);
}
.about-carousel-frame img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s ease;
}
.about-carousel-frame img.is-active{ opacity: 1; }
/* phones: squarer frame anchored near the top so the full-length portraits lose the feet */
@media (max-width: 719px){
  .about-carousel-frame{ aspect-ratio: 1/1; }
  .about-carousel-frame img{ object-position: center 20%; }
}
.about-carousel-arrow{
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-background) 88%, transparent); color: var(--color-eggplant);
  font-size: 1.6rem; line-height: 1; padding-bottom: 3px;
  box-shadow: 0 3px 10px rgba(102,37,61,.18); transition: background .2s ease, color .2s ease;
}
.about-carousel-arrow:hover{ background: var(--color-eggplant); color: var(--color-background); }
.about-carousel-arrow--prev{ left: .6rem; }
.about-carousel-arrow--next{ right: .6rem; }
.about-carousel-tape{ top: -14px; left: 50%; transform: translateX(-50%) rotate(-2deg); z-index: 2; }
.about-carousel-dots{ display: flex; justify-content: center; gap: .55rem; margin-top: 1.1rem; }
.about-carousel-dot{
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none;
  background: color-mix(in srgb, var(--color-eggplant) 28%, transparent);
  cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.about-carousel-dot:hover{ background: color-mix(in srgb, var(--color-eggplant) 55%, transparent); }
.about-carousel-dot.is-active{ background: var(--color-terracotta); transform: scale(1.3); }

/* room to grow — more text or photos can drop in below the intro
   without needing a layout change */
.about-more{ margin-top: 3rem; display: flex; flex-direction: column; gap: 1.5rem; max-width: 70ch; }

/* ==========================================================
   LANDING-ONLY — the static fanned photo stack + short blurb, used just
   in the home page's About preview (index.html). The full About page
   uses the notebook spread above instead.
   ========================================================== */

@media (min-width: 720px){
  
}

/* ==========================================================
   ORIGINAL SCRAPBOOK ACCENTS — built in-house (not the stock/Pinterest
   stickers from the moodboard reference) in Juana's own palette: a
   ribbon banner tag + a circular "stamp" badge for photo corners.
   ========================================================== */

/* solid variant — filled disc for sitting on top of a photo, cream text on eggplant */

/* typed "character file" card, per the folder-tab moodboard reference */

/* ==========================================================
   SELECTED WORK — grid + b/w-to-color hover
   ========================================================== */

/* plain stacked caption, no rule/italic — zackmillsaps.com reads quieter than a boxed label */

/* Landing preview only — small, playful square tiles instead of the big
   rectangular cards used on the full archive (work.html), per the
   "creative projects" 6-tile moodboard reference. */

/* Landing preview — auto-scrolling ribbon/marquee, per the client's
   reference: the track holds the project set twice and glides on its
   own, looping seamlessly; hovering (or focusing a tile) pauses it so
   it stays readable and clickable. */
.work-carousel{ position: relative; margin-bottom: 1.75rem; overflow: hidden; }
.work-carousel-track{
  display: flex; gap: 1.5rem; width: max-content;
  animation: work-marquee 34s linear infinite;
}
.work-carousel:hover .work-carousel-track,
.work-carousel-track:has(:focus-visible){ animation-play-state: paused; }
@keyframes work-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
/* prev/next arrows (script.js), centered on the photos, not the captions */
.work-carousel-arrow{ top: calc(min(74vw, 300px) * .375); }
@media (min-width: 720px){ .work-carousel-arrow{ top: calc(min(30vw, 340px) * .375); } }
@media (prefers-reduced-motion: reduce){ .work-carousel-arrow{ display: none; } }
@media (prefers-reduced-motion: reduce){ .work-carousel-track{ animation: none; } }
.work-carousel-item{ flex: 0 0 auto; width: min(74vw, 300px); cursor: pointer; }
.work-carousel-image{ position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--color-pink); }
.work-carousel-image img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.work-carousel-item:hover .work-carousel-image img{ transform: scale(1.04); }
/* project without a cover photo yet: same-size title on a plain box, so every
   placeholder reads the same whatever the title length */
.work-carousel-image--empty{ display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: #E7E3DD; text-align: center; }
.work-carousel-image--empty span{ font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; line-height: 1.3; color: var(--color-eggplant); }
.work-carousel-caption{ display: flex; flex-direction: column; gap: .15rem; margin-top: .85rem; }
.work-carousel-title{ font-size: .92rem; font-weight: 600; }
.work-carousel-meta{ font-size: .76rem; color: var(--color-text-muted); }
@media (min-width: 720px){
  .work-carousel-item{ width: min(30vw, 340px); }
}

.filter-tags{ display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-bottom: 3rem; }
.filter-tag{ font-size: .78rem; letter-spacing: .035em; text-transform: uppercase; padding-block: .35rem; border-bottom: 1.5px solid transparent; }
.filter-tag[aria-pressed="true"]{ border-color: var(--color-terracotta); color: var(--color-accent-text); }
.filter-tag:hover{ color: var(--color-accent-text); }

/* Work archive — trial list layout: numbered text rows that reveal the
   project photo on hover (wipe-in from the right), per the Harriet
   (Webflow) reference's "art pieces" list. Swap back to .work-grid if
   this doesn't stick. */
.work-list{ display: flex; flex-direction: column; margin-bottom: 2.5rem; }
.work-list-row{
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1.25rem; padding-block: 1.75rem; border-top: var(--rule); cursor: pointer;
}
.work-list-row:last-child{ border-bottom: var(--rule); }
.work-list-index{ font-family: var(--font-mono); font-size: .8rem; color: var(--color-text-muted); }
.work-list-title{ font-family: var(--font-serif); font-size: clamp(1.3rem, 3.5vw, 2rem); font-weight: 600; transition: color .3s ease; }
.work-list-meta{ margin-left: auto; font-size: .82rem; color: var(--color-text-muted); }
.work-list-row:hover .work-list-title{ color: var(--color-accent-text); }
.work-list-media{
  position: absolute; top: 0; right: 0; bottom: 0; width: 0; overflow: hidden; z-index: 0;
  transition: width .5s cubic-bezier(.65,0,.35,1);
  background: var(--color-background);
  display: flex; align-items: center; justify-content: center;
}
/* client/collaborator logo, not a project photo yet — contained + centered
   rather than cropped, so wordmarks don't get cut off */
.work-list-media img{
  width: auto; height: auto; max-width: 150px; max-height: 60px; object-fit: contain;
}
/* Hamlin's wordmark reads heavier than the rest at the same size */
.work-list-media img[src$="work/hamlin.png"]{ max-width: 120px; }
.work-list-row:hover .work-list-media{ width: min(42%, 320px); }
@media (max-width: 719px){
  .work-list-media{ display: none; }
  .work-list-meta{ margin-left: 0; width: 100%; }
}

/* ==========================================================
   PROJECT DETAIL (work-detail.html)
   ========================================================== */
.project-hero-media{ aspect-ratio: 16/9; overflow: hidden; margin-inline: var(--side-pad); border: 1px solid var(--color-eggplant); }
.project-hero-media img{ width: 100%; height: 100%; object-fit: cover; }
/* quick-facts band — sits directly under the hero photo, pastel full-bleed
   strip per the "clean case study" reference, mirrors .block-lime/.block-pink */
.project-facts{ padding-block: clamp(2rem, 5vw, 2.75rem); }
.project-meta{ display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem 2rem; margin-bottom: 0; }
.project-meta div span:first-child{ display:block; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: .3rem; }
.project-meta div span:last-child{ font-size: 1rem; }
.project-copy{ max-width: 62ch; display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 3rem; }
.project-link{ margin-top: 1.75rem; }
.project-copy h2{ font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; }
/* collage: 6-column grid, shapes set by content.js (collageShapes) */
.gallery-grid{ display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(110px, 17vw, 230px); gap: clamp(.5rem, 1.2vw, 1rem); }
.gallery-grid > img, .gallery-item{ display: block; width: 100%; height: 100%; min-width: 0; overflow: hidden; grid-column: span 2; }
.gallery-grid img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery-item{ padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery-item--big{ grid-column: span 4; grid-row: span 2; }
.gallery-item--small{ grid-column: span 2; }
.gallery-item--half{ grid-column: span 3; grid-row: span 2; }
.gallery-item--full{ grid-column: span 6; grid-row: span 2; }
.gallery-item:hover img, .gallery-item:focus-visible img{ transform: scale(1.03); }

/* ==========================================================
   SERVICES — numbered rows, no boxed cards
   ========================================================== */
.services-list{ display: flex; flex-direction: column; }
.service-row{ position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; padding-block: 2rem; border-top: var(--rule); transition: background-color .3s ease; }
.service-row:last-child{ border-bottom: var(--rule); }
.service-row:hover, .service-row:focus-within{ background-color: color-mix(in srgb, var(--color-terracotta) 8%, transparent); }
.service-title{ font-size: 1.05rem; text-transform: uppercase; letter-spacing: .01em; margin-bottom: .5rem; }
.service-text{ color: var(--color-text-muted); font-size: .95rem; max-width: 60ch; }
.service-detail{ margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.service-detail li{ font-size: .92rem; padding-left: 1.1rem; position: relative; }
.service-detail li::before{ content: "—"; position: absolute; left: 0; color: var(--color-accent-text); }

/* image wipes in from the right edge on hover — per the Harriet (Webflow)
   reference's list-row interaction */
.service-row-media{
  position: absolute; top: 0; right: 0; bottom: 0; width: 0; overflow: hidden;
  transition: width .5s cubic-bezier(.65,0,.35,1);
}
.service-row-media img{
  position: absolute; top: 0; right: 0; width: 260px; max-width: 40vw; height: 100%;
  object-fit: cover; filter: grayscale(1); transform: scale(1.08);
  transition: filter .5s ease, transform .5s ease;
}
.service-row:hover .service-row-media{ width: min(38%, 260px); }
.service-row:hover .service-row-media img{ filter: grayscale(0); transform: scale(1); }
@media (max-width: 719px){ .service-row-media{ display: none; } }

/* ==========================================================
   LATELY
   ========================================================== */
.lately-grid{ display: grid; grid-template-columns: 1fr; }
.lately-item{ padding-block: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--color-eggplant) 25%, transparent); display: flex; gap: 1.25rem; align-items: baseline; }
.lately-item:last-child{ border-bottom: 1px solid color-mix(in srgb, var(--color-eggplant) 25%, transparent); }

/* ==========================================================
   CONTACT — copy-email / LinkedIn + testimonials
   (no contact form — the client wants a direct email/LinkedIn only)
   ========================================================== */
.contact-methods{ display: grid; grid-template-columns: 1fr; max-width: 46rem; }
.contact-method{
  display: flex; flex-direction: column; gap: .4rem;
  width: 100%; text-align: left; padding: 1.75rem 0;
  border-top: var(--rule);
}
.contact-method:first-child{ border-top: 0; padding-top: 0; }
.contact-method:last-child{ padding-bottom: 0; }
.contact-method-label{ font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.contact-method-value{ font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.1rem, 5vw, 1.7rem); overflow-wrap: break-word; word-break: break-word; }
.contact-method-desc{ font-size: .95rem; color: var(--color-text-muted); }
.contact-method-action{ font-size: .85rem; color: var(--color-accent-text); }
.contact-method:hover .contact-method-value{ color: var(--color-accent-text); }
.testimonials{ display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2rem; }
.testimonial{ padding-top: 1.75rem; border-top: var(--rule); }
.testimonial-quote{ margin: 0; font-family: var(--font-sans); font-style: normal; font-size: 1.05rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.testimonial cite{ display: block; margin-top: .85rem; font-style: normal; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; color: var(--color-text-muted); }
.testimonial-more{ display: inline-block; margin-top: .6rem; font-family: var(--font-sans); font-size: .85rem; font-weight: 600; color: var(--color-accent-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.testimonial-more:hover{ color: var(--color-eggplant); }

/* Full-quote modal: blurred/dimmed backdrop, a card with a squared-off top
   corner and rounded everywhere else, a color accent bar on top, sliding up
   into place. Adapted from the reference site's case-study modal. */
.testimonial-modal-overlay{
  position: fixed; inset: 0; z-index: 998; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(102,37,61,0); backdrop-filter: blur(0px); opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(.25,.46,.45,.94), background .4s, backdrop-filter .4s;
}
.testimonial-modal-overlay.is-open{ opacity: 1; pointer-events: auto; background: rgba(102,37,61,.55); backdrop-filter: blur(6px); }
.testimonial-modal-box{
  width: 90vw; max-width: 620px; max-height: 88vh; overflow-y: auto; position: relative;
  background: var(--color-background); border-radius: 6px 22px 22px 22px;
  transform: translateY(28px) scale(.97); transition: transform .4s cubic-bezier(.25,.46,.45,.94);
  box-shadow: 0 30px 70px rgba(102,37,61,.35);
}
.testimonial-modal-overlay.is-open .testimonial-modal-box{ transform: translateY(0) scale(1); }
.testimonial-modal-body{ padding: 2.6rem 2.4rem 2.4rem; }
.testimonial-modal-body blockquote{ margin: 0; font-family: var(--font-sans); font-size: 1.15rem; line-height: 1.75; color: var(--color-eggplant); }
.testimonial-modal-body cite{ display: block; margin-top: 1.25rem; font-style: normal; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.testimonial-modal-close{ position: absolute; top: 1.1rem; right: 1.1rem; width: 36px; height: 36px; border-radius: 50%; background: var(--color-background); box-shadow: 0 4px 10px rgba(102,37,61,.18); display: flex; align-items: center; justify-content: center; color: var(--color-eggplant); z-index: 5; transition: background .2s, color .2s; }
.testimonial-modal-close:hover{ background: var(--color-terracotta); color: var(--color-background); }
@media (prefers-reduced-motion: reduce){ .testimonial-modal-overlay, .testimonial-modal-box{ transition: none; } }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{ background: var(--color-eggplant); color: var(--color-background); padding-block: var(--section-pad); position: relative; overflow: hidden; }
.site-footer .eyebrow{ color: var(--color-background); }
.footer-top{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3rem; margin-bottom: 3.5rem; }
.footer-claim{ font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 3.4vw, 2.2rem); max-width: 20ch; }
.footer-contact{ display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.footer-contact .btn-primary{ background: var(--color-background); color: var(--color-eggplant); border-color: var(--color-background); }
.footer-contact .btn-primary:hover{ background: var(--color-accent-text); color: var(--color-background); border-color: var(--color-accent-text); }
/* loose, centered logo cloud (ref: iarasnei.com/collabs): no rules, no slots, varied sizes */
.site-footer .container > .eyebrow{ text-align: center; margin-top: -2rem; }
.collab-row{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.75rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); max-width: 68rem; margin: 0 auto; padding-block: 3.5rem clamp(3rem, 6vw, 4.5rem); }
.collab-row span{ font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; color: var(--color-background); }
/* every logo is pre-recolored to the same cream (Logos/footer/mono) and sits
   centered in an identical slot; width/height attrs give each the same visual weight */
.collab-chip{ flex: none; display: flex; align-items: center; justify-content: center; transition: opacity .3s ease; }
a.collab-chip:hover{ opacity: .7; }
.collab-logo{ flex: none; object-fit: contain; }
@media (max-width: 719px){ .collab-logo{ zoom: .65; } }
.footer-bottom{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.footer-bottom nav ul{ display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ---------- responsive ---------- */
@media (min-width: 720px){
  .testimonials{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px){
  .hero{ grid-template-columns: .8fr 1.2fr; }
}

/* About: academic credential */
.credential{ border-top: 1px solid var(--color-eggplant); border-bottom: 1px solid var(--color-eggplant); padding: 1.75rem 0; margin-bottom: 4rem; display: flex; flex-direction: column; gap: .6rem; }
.credential-degree{ font-family: var(--font-serif, "Bodoni Moda", serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25; color: var(--color-eggplant); }
.credential-school{ font-family: "Inter", sans-serif; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--color-eggplant); opacity: .8; }

/* Lately: single-column editorial list */
.lately-grid{ max-width: 900px; }
.lately-item{ padding-block: 1.5rem; align-items: baseline; gap: 1.5rem; transition: padding-left .3s ease; }
.lately-item:hover{ padding-left: .5rem; }
.lately-num{ font-family: 'Space Mono', monospace; font-size: .75rem; color: var(--color-accent-text); min-width: 1.75rem; }
.lately-item p{ flex: 1; font-family: var(--font-serif); font-size: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.3; }
.lately-status{ font-family: 'Space Mono', monospace; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
@media (max-width: 560px){ .lately-item{ flex-wrap: wrap; } .lately-status{ width: 100%; padding-left: 3.25rem; } }

/* Services: whole row links to filtered Work */

/* closing line under the services list, between the last rule and the divider */
/* the note sits in its own band: the last service row's rule above, a
   matching rule below, compact padding, one line on desktop */
.services-section{ padding-bottom: 0; }
.services-note{ padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: var(--rule); text-align: center; text-wrap: balance; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.4; }
.service-cta{ display: inline-block; margin-top: 1.25rem; font-size: .9rem; font-weight: 600; color: var(--color-eggplant); border-bottom: 1px solid currentColor; }
.work-list-row[hidden]{ display: none; }

.admin-link{ display:inline-flex; vertical-align:middle; margin-left:.25rem; opacity:.7; color:inherit; transition:opacity .2s; }
.admin-link:hover, .admin-link:focus-visible{ opacity:1; }

/* Touch targets: on phones / touch screens, enlarge the tappable area of the tiny
   controls with an invisible pseudo-element, without changing how they look. */
@media (pointer: coarse), (max-width: 719px){
  .lang-toggle button, .admin-link, .hamburger, .about-carousel-dot{ position: relative; }
  .lang-toggle button::after, .admin-link::after, .hamburger::after{ content: ''; position: absolute; inset: -10px -6px; }
  .about-carousel-dot::after{ content: ''; position: absolute; inset: -14px; }
  .filter-tag{ min-height: 44px; }
}

/* Contact form (Netlify Forms) */
.contact-form{ max-width: 46rem; display: flex; flex-direction: column; gap: 1.5rem; }
.cf-field label{ display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: .35rem; }
.cf-field input, .cf-field select, .cf-field textarea{
  width: 100%; font: inherit; font-size: 1rem; color: var(--color-eggplant);
  background: transparent; border: 0; border-bottom: 1px solid var(--color-eggplant); border-radius: 0; padding: .6rem 0;
}
.cf-field textarea{ resize: vertical; min-height: 8rem; border: 1px solid var(--color-eggplant); padding: .75rem; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{ outline: 2px solid var(--color-terracotta); outline-offset: 2px; }
.cf-field [aria-invalid="true"]{ border-color: var(--color-terracotta); }
.contact-form .btn{ align-self: flex-start; }
.contact-form .btn[disabled]{ opacity: .6; cursor: wait; }
.cf-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-privacy{ margin-top: -.75rem; font-size: .8rem; color: var(--color-text-muted); }
.cf-status{ min-height: 1.4em; font-size: .95rem; }
.cf-status.is-ok{ color: var(--color-eggplant); font-weight: 600; }
.cf-status.is-err{ color: var(--color-accent-text); }
/* thank-you block that replaces the form after sending */
.cf-thanks{ max-width: 46rem; padding-block: clamp(2rem, 5vw, 3.5rem); border-block: var(--rule); }
.cf-thanks:focus{ outline: none; }
.contact-form[hidden], .cf-thanks[hidden]{ display: none; }
.cf-thanks-eyebrow{ font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: .75rem; }
.cf-thanks-title{ font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; margin-bottom: 1rem; }
.cf-thanks-text{ font-size: 1.15rem; margin-bottom: 1.75rem; }
.cf-thanks-ctas{ justify-content: flex-start; margin-top: 0; }


/* ---------- accessibility ---------- */
/* keyboard focus ring everywhere (mouse clicks don't show it) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline: 2px solid var(--color-accent-text); outline-offset: 3px; }
.site-nav :focus-visible{ outline-color: var(--color-background); }

/* skip link: first tab stop, visible only when focused */
.skip-link{ position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: .7rem 1.1rem; background: var(--color-eggplant); color: var(--color-background); font-weight: 600; transition: top .15s ease; }
.skip-link:focus{ top: .75rem; }

/* closed drawer must not be reachable by keyboard / screen readers */
.site-nav:not(.is-open){ visibility: hidden; transition: transform .45s cubic-bezier(.65,0,.35,1), visibility 0s .45s; }

/* pause controls for auto-moving content (WCAG 2.2.2) */
.motion-toggle{ display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; padding: .5rem .2rem; color: var(--color-eggplant); border-bottom: 1px solid transparent; }
.motion-toggle:hover{ border-bottom-color: var(--color-accent-text); }
.work-carousel.is-paused .work-carousel-track{ animation-play-state: paused; }
.about-carousel-controls{ display: flex; justify-content: center; margin-top: .25rem; }

/* screen-reader-only text (visible to assistive tech, invisible on screen) */
.visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Lightbox (project photo gallery) */
.lightbox{ border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop{ background: rgba(40,14,24,.92); }
.lightbox[open]{ display: grid; place-items: center; }
.lightbox img{ max-width: 92vw; max-height: 84vh; object-fit: contain; }
.lightbox-close, .lightbox-nav{ position: absolute; color: var(--color-background); font-size: 2rem; line-height: 1; padding: .5rem 1rem; }
.lightbox-close{ top: 1rem; right: 1rem; font-size: 1.5rem; }
.lightbox-nav{ top: 50%; transform: translateY(-50%); font-size: 3rem; }
.lightbox-prev{ left: .5rem; } .lightbox-next{ right: .5rem; }
.lightbox-close:hover, .lightbox-nav:hover{ color: var(--color-lime); }
.lightbox-count{ position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: var(--color-background); font-size: .8rem; letter-spacing: .06em; }

/* stacked / round logos (Fist Bump, UCA) get more height inside the same-size tile */