/*
Theme Name: Ana Parente
Description: Static one-page artist site for Ana Parente - flat saturated colour on warm cream, hard edges, no shadows, no rounded corners. Built from Claude Design "Ana Parente - Site v2".
Version: 1.7
Author: DB
Text Domain: ana-parente
*/

:root {
  --cream: #F7EFE5;
  --ink: #1B1917;
  --body: #4A4540;
  --stone: #8C857C;
  /* --pink is the accent token; per Ana's brief the accent is olive green #588030 */
  --pink: #588030;
  --softpink: #F2A0CE;
  --blue: #2AA7DC;
  --green: #35A02F;
  --yellow: #fad241;
  --red: #cc0816;
  --olive: #3F471C;
  --teal: #1F7F80;
  --serif: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Mono', monospace;
  --mono: 'IBM Plex Mono', monospace;
  --gutter: 40px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-weight: 500; }
/* iOS rubber-band: area revealed below the footer stays footer-ink, not cream */
body::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: -60vh; height: 60vh;
  background: var(--ink); z-index: -1; pointer-events: none;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--pink); color: var(--cream); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ap-shell { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--body);
}
.dot { width: 8px; height: 8px; display: block; flex: none; }

.btn {
  display: inline-block;
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 16px 28px; cursor: pointer; transition: background .2s, color .2s;
}
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: var(--pink); color: var(--cream); }
.btn-outline { border: 1.5px solid var(--ink); }
.btn-outline:hover { background: var(--yellow); color: var(--ink); }
.btn-yellow { background: var(--yellow); color: var(--ink); padding: 15px 26px; }
.btn-yellow:hover { background: var(--cream); }

/* ---------- header ---------- */
.ap-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247,239,229,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--ink);
}
.ap-header .ap-shell {
  padding-top: 16px; padding-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--pink); display: block; }
.brand-name { font-family: var(--serif); font-size: 26px; letter-spacing: .01em; }
.ap-nav {
  display: flex; gap: 28px;
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
}
.ap-nav a { padding-bottom: 3px; border-bottom: 2px solid transparent; }
.ap-nav a:hover { border-color: var(--u, var(--pink)); color: var(--ink); }

/* ---------- ticker ---------- */
.ticker {
  background: var(--pink); color: var(--cream);
  overflow: hidden; border-bottom: 1.5px solid var(--ink); padding: 9px 0;
}
.ticker-track {
  display: flex; width: max-content; gap: 40px; padding-right: 40px;
  animation: slide 40s linear infinite;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ---------- art frames (colour pad + inked image) ---------- */
.art-frame { position: relative; }
.art-pad { position: absolute; inset: 16px -14px -14px 16px; }
.art-frame--hero .art-pad { inset: 22px -18px -18px 22px; }
.art-frame--band .art-pad { inset: 18px -16px -16px 18px; }
.art-frame--print .art-pad { inset: 14px -12px -12px 14px; }
.art-frame > img, .art-frame > .art-img {
  position: relative; width: 100%;
  border: 1.5px solid var(--ink);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.art-img {
  aspect-ratio: 3 / 4;
  background-color: var(--cream);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.art-img--print { aspect-ratio: 4 / 5; }
a:hover .art-frame > img, a:hover .art-frame > .art-img,
.art-frame--hero:hover > img { transform: translate(-6px, -6px); }
.art-frame--hero:hover > img { transform: translate(-8px, -8px); }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 64px; align-items: center; padding: 88px 0 72px;
}
.hero-copy { display: flex; flex-direction: column; gap: 26px; }
.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: 64px; line-height: 1.04; letter-spacing: -.03em;
  margin: 0; text-wrap: balance;
}
.hero h1 em { color: var(--pink); }
.hero-lede {
  font-size: 18px; line-height: 1.6; color: var(--body);
  margin: 0; max-width: 44ch; text-wrap: pretty;
}
.hero-ctas { display: flex; gap: 12px; }

/* ---------- palette strip ---------- */
.palette { display: flex; flex-direction: column; gap: 18px; padding: 0 0 84px; }
.rule-row {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1.5px solid var(--ink); padding-top: 14px;
}
.rule-row .label { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.rule-row .meta { font-family: var(--mono); font-size: 12px; color: var(--stone); }
.palette-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.swatch { display: flex; flex-direction: column; gap: 8px; }
.swatch-chip { height: 76px; border: 1.5px solid var(--ink); }
.swatch-name { font-size: 12px; line-height: 1.3; }
.swatch-hex { font-family: var(--mono); font-size: 11px; color: var(--stone); }

/* ---------- section headers ---------- */
.section { padding: 0 0 92px; }
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  border-top: 1.5px solid var(--ink); padding-top: 14px; margin-bottom: 40px;
}
.section-head h2 { font-family: var(--serif); font-weight: 500; font-size: 52px; margin: 0; line-height: 1; }
.section-head .meta {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--body);
}

/* ---------- works ---------- */
.works-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 44px; }
.work-card { display: flex; flex-direction: column; gap: 16px; }
.work-caption {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  border-bottom: 1px solid rgba(27,25,23,.2); padding-bottom: 10px;
}
.work-title-wrap { display: flex; flex-direction: column; gap: 4px; }
.work-title { font-family: var(--serif); font-size: 26px; font-style: italic; line-height: 1.1; }
.work-meta { font-family: var(--mono); font-size: 11.5px; color: var(--stone); }
.work-price { font-family: var(--mono); font-size: 13px; white-space: nowrap; }

/* ---------- prints ---------- */
.prints-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 28px; }
.print-card { display: flex; flex-direction: column; gap: 14px; }
.print-caption { display: flex; flex-direction: column; gap: 5px; }
.print-title { font-family: var(--serif); font-size: 23px; font-style: italic; }
.print-edition { font-family: var(--mono); font-size: 11.5px; color: var(--stone); }
.print-price { font-family: var(--mono); font-size: 13px; }

/* ---------- exhibition band ---------- */
.band {
  background: var(--olive); color: #F3EFE0;
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
}
.band .ap-shell {
  padding-top: 76px; padding-bottom: 76px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center;
}
.band-copy { display: flex; flex-direction: column; gap: 20px; }
.band .eyebrow { color: var(--yellow); }
.band h2 { font-family: var(--serif); font-weight: 500; font-size: 60px; line-height: 1; margin: 0; }
.band-lede { font-size: 16px; line-height: 1.65; color: rgba(243,239,224,.82); margin: 0; max-width: 40ch; }
.show-list {
  display: flex; flex-direction: column;
  font-family: var(--mono); font-size: 13px;
  border-top: 1px solid rgba(243,239,224,.3); margin-top: 8px;
}
.show-list > div {
  display: flex; justify-content: space-between; padding: 11px 0;
  border-bottom: 1px solid rgba(243,239,224,.18);
}
.show-list > div:last-child { border-bottom: 0; }
.show-list .year { color: rgba(243,239,224,.55); }
.band .btn-yellow { align-self: flex-start; }

/* ---------- about ---------- */
.about {
  padding-top: 92px; padding-bottom: 92px;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start;
}
.about-copy { display: flex; flex-direction: column; gap: 22px; }
.pull-quote {
  font-family: var(--serif); font-size: 40px; line-height: 1.18;
  margin: 0; max-width: 26ch; text-wrap: pretty;
}
.about-p { font-size: 16px; line-height: 1.75; color: var(--body); margin: 0; max-width: 54ch; text-wrap: pretty; }
.link-underline {
  font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 2px solid var(--pink); align-self: flex-start; padding-bottom: 4px;
}
.link-underline:hover { color: var(--pink); }

/* ---------- footer / letter ---------- */
.letter { background: var(--ink); color: var(--cream); }
.letter-main {
  padding-top: 80px; padding-bottom: 36px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start;
}
.letter-copy { display: flex; flex-direction: column; gap: 18px; }
.letter h2 { font-family: var(--serif); font-weight: 500; font-size: 52px; line-height: 1.02; margin: 0; }
.letter-lede { font-size: 16px; line-height: 1.6; color: rgba(247,239,229,.68); margin: 0; max-width: 44ch; }
.letter-form { display: flex; max-width: 480px; border-bottom: 1.5px solid rgba(247,239,229,.45); }
.letter-form input {
  flex: 1; font-family: var(--mono); font-size: 14px;
  padding: 14px 2px; border: 0; background: transparent; color: var(--cream); outline: none;
}
.letter-form button {
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  background: none; border: 0; color: var(--pink); cursor: pointer; padding: 0 6px;
}
.letter-form button:hover { color: var(--cream); }
.form-note { font-family: var(--mono); font-size: 11.5px; color: rgba(247,239,229,.42); }
.form-msg { font-family: var(--mono); font-size: 12px; color: var(--green); }
.form-msg.is-err { color: var(--red); }
.letter-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  font-size: 14px; line-height: 2.1; color: rgba(247,239,229,.72);
}
.letter-cols .col { display: flex; flex-direction: column; }
.letter-cols .col-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(247,239,229,.42); margin-bottom: 8px;
}
.letter-cols a:hover { color: var(--pink); }
.letter-bottom {
  padding-bottom: 36px; padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(247,239,229,.42);
  border-top: 1px solid rgba(247,239,229,.16);
}
.dots-row { display: flex; gap: 8px; align-items: center; }

/* ---------- popup ---------- */
.popup-veil {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(27,25,23,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: veil .35s ease both;
}
.popup-veil[hidden] { display: none; }
.popup-card {
  position: relative; width: 100%; max-width: 860px;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--cream);
  box-shadow: 0 30px 80px rgba(27,25,23,.4);
  animation: fadeUp .5s cubic-bezier(.2,.8,.2,1) both;
}
.popup-art { position: relative; background: var(--pink); overflow: hidden; }
.popup-art img { width: 100%; height: 100%; object-fit: cover; }
.popup-body {
  padding: 52px 44px 40px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.popup-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pink);
}
.popup-body h2 {
  font-family: var(--serif); font-weight: 500; font-size: 46px;
  line-height: 1.02; margin: 0; letter-spacing: -.01em;
}
.popup-lede { font-size: 15px; line-height: 1.6; color: var(--body); margin: 0; max-width: 32ch; text-wrap: pretty; }
.popup-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.popup-form input {
  font-family: var(--mono); font-size: 14px; padding: 13px 2px;
  border: 0; border-bottom: 1.5px solid var(--ink);
  background: transparent; outline: none; color: var(--ink);
}
.popup-form button {
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 18px; border: 0; background: var(--pink); color: var(--cream);
  cursor: pointer; transition: background .2s;
}
.popup-form button:hover { background: var(--ink); }
.popup-later {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--stone); background: none; border: 0; padding: 0;
  cursor: pointer; align-self: flex-start;
}
.popup-later:hover { color: var(--ink); }
.popup-x {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--sans); font-size: 22px; line-height: 1;
  background: none; border: 0; color: var(--ink); cursor: pointer;
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); }
  .prints-grid { grid-template-columns: repeat(3, 1fr); }
  .hero h1 { font-size: 52px; }
}

@media (max-width: 899px) {
  :root { --gutter: 20px; }
  /* single-line header: brand + horizontally swipeable nav */
  .ap-header .ap-shell { flex-wrap: nowrap; gap: 14px; padding-top: 10px; padding-bottom: 10px; }
  .brand { flex: none; }
  .brand-name { font-size: 20px; white-space: nowrap; }
  .brand-dot { width: 10px; height: 10px; }
  .ap-nav {
    gap: 16px; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 92%, transparent);
  }
  .ap-nav::-webkit-scrollbar { display: none; }
  .ap-nav a { white-space: nowrap; flex: none; }
  /* ticker ~30% shorter on mobile */
  .ticker { padding: 4px 0; }
  .ticker-track { font-size: 10px; gap: 24px; }
  .hero { grid-template-columns: 1fr; gap: 44px; padding: 60px 0 48px; }
  .hero h1 { font-size: 38px; }
  .palette { padding-bottom: 60px; }
  .palette-grid { grid-template-columns: repeat(4, 1fr); }
  .section { padding-bottom: 60px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .works-grid { grid-template-columns: 1fr; gap: 44px; }
  .prints-grid { grid-template-columns: 1fr; gap: 40px; }
  .band .ap-shell { grid-template-columns: 1fr; gap: 44px; padding-top: 56px; padding-bottom: 56px; }
  .band h2 { font-size: 44px; }
  .about { grid-template-columns: 1fr; gap: 44px; padding-top: 60px; padding-bottom: 60px; }
  .pull-quote { font-size: 30px; }
  .letter-main { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; }
  .letter-bottom { flex-wrap: wrap; gap: 10px; }
  .popup-card { grid-template-columns: 1fr; max-width: 420px; }
  .popup-art { height: 200px; }
  .popup-body { padding: 32px 28px 28px; }
  .popup-body h2 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .art-frame > img, .art-frame > .art-img { transition-duration: .15s; }
  .popup-veil, .popup-card { animation: none; }
}