/* Roxana Calderón, author site
   Colors: paper, teal, mustard. Type: Archivo Condensed (headings), Spectral (text).

   Contents
   1. Settings
   2. Base
   3. Header and footer
   4. Type and buttons
   5. Sections and page headers
   6. Home
   7. About
   8. Books
   9. Schools
   10. Press
   11. Contact
*/


/* 1. Settings ------------------------------------------------------------ */

:root {
  color-scheme: light;

  /* Palette: aubergine (her childhood color) and palm green (Gazcue), on white.
     Kept far from Pivot (no cream, wine, pink, beige or terracotta). */
  --paper: #ffffff;        /* page background */
  --white: #f4f4f3;        /* light boxes, form fields */
  --ink: #1e1a1d;          /* body text */
  --muted: #585858;        /* secondary text */
  --line: #dcdcda;         /* borders and dividers */

  --teal: #48233f;         /* aubergine: home name panel, titles, menu, footer, bands */
  --teal-ink: #1e1a1d;     /* dark text */
  --on-teal: #ffffff;      /* text on aubergine or palm */
  --palma: #2e5b3c;        /* palm green: buttons and bands */
  --palma-light: #e7efe9;  /* very light palm green: light sections */
  --ratan: #2e5b3c;        /* alias of palm (kept for old rules) */
  --rosa: #ffffff;         /* alias: light text on aubergine */
  --mustard: #2e5b3c;      /* alias of palm (kept for old rules) */

  --head: "Archivo", "Arial Narrow", Arial, sans-serif;
  --text: "Spectral", Georgia, "Times New Roman", serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
}


/* 2. Base ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--head);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* 3. Header and footer --------------------------------------------------- */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--teal);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.wordmark {
  font-family: var(--head);
  font-stretch: 75%;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* "Writer, Poet, Editor" in the home page header */
.header-roles {
  margin: 0;
  font-family: var(--head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.site-nav a {
  display: inline-block;
  padding: 6px 12px;
  font-family: var(--text);
  font-style: italic;
  font-size: 18px;
  line-height: 1.2;
  text-decoration: none;
  transition: background 160ms ease;
}
.site-nav a:hover { background: var(--palma-light); }
.site-nav a[aria-current="page"] { background: var(--teal); color: #ffffff; }

/* Menu button (three lines): phones only */
.menu-toggle { display: none; }

@media (max-width: 760px) {
  .site-header .wrap {
    flex-wrap: wrap;
    gap: 0;
    min-height: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .wordmark { font-size: 22px; }
  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle span { display: block; height: 2px; background: var(--teal); transition: transform 160ms ease, opacity 160ms ease; }
  .menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .site-nav { display: none; width: 100%; padding: 12px 0 8px; }
  .menu-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 2px; }
  .site-nav a { display: block; font-size: 22px; padding: 10px 12px; }
}

.site-footer {
  padding: 56px 0 40px;
  background: var(--teal);
  color: var(--white);
  font-size: 15px;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
}
.site-footer .wordmark { color: var(--rosa); font-size: 26px; }
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.site-footer a {
  font-family: var(--head);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 18%);
}
.footer-logo { display: block; width: auto; height: 40px; opacity: 0.9; }
.site-footer .small {
  margin: 0;
  color: var(--on-teal);
  font-family: var(--head);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.site-footer .small a {
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* 4. Type and buttons ---------------------------------------------------- */

h1, h2, h3 {
  margin: 0 0 0.5em;
  font-family: var(--head);
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: clamp(42px, 6vw, 72px); }
h2 { font-size: clamp(32px, 4vw, 50px); }
h3 { font-size: clamp(24px, 2.4vw, 30px); }

p { margin: 0 0 1.2em; }

.eyebrow {
  margin: 0 0 16px;
  color: var(--muted);
  font-family: var(--head);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(21px, 2.1vw, 25px);
  line-height: 1.55;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid var(--palma);
  background: var(--palma);
  color: #ffffff;
  font-family: var(--head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.button:hover { background: transparent; color: var(--palma); }

.button.ghost { background: transparent; color: var(--palma); }
.button.ghost:hover { background: var(--palma); color: #ffffff; }

.text-link {
  font-family: var(--head);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-underline-offset: 5px;
}


/* 5. Sections and page headers ------------------------------------------- */

.section { padding: clamp(48px, 7vw, 96px) 0; }
.section.light { background: var(--palma-light); }

/* Centered call-to-action band */
.band { text-align: center; }
.band h2 { margin-bottom: 16px; }
.band p { max-width: 560px; margin: 0 auto 28px; }

/* Mustard band ("Let's work together", "Press inquiries", "Read new work") */
.band-yellow { background: var(--palma-light); color: var(--ink); }
.band-yellow h2 { color: var(--teal); }
.band-yellow .eyebrow,
.band-yellow .text-link { color: var(--ink); }
.band-yellow .button { background: var(--palma); border-color: var(--palma); color: #ffffff; }
.band-yellow .button:hover { background: transparent; color: var(--palma); }

/* Inner pages: mustard strip on the left with the page title written
   vertically, like the name on the home page. The strip stays in place
   while the page scrolls. On phones it becomes a band across the top. */
.inner main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}
.inner main > * { grid-column: 2; min-width: 0; }
.inner main > .page-title { grid-column: 1; grid-row: 1 / span 40; }
.page-title {
  position: sticky;
  top: 0;
  align-self: start;
  height: calc(100svh - 72px);
  display: flex;
  align-items: flex-end;
  padding: clamp(28px, 3vw, 44px) clamp(18px, 2.2vw, 34px);
  background: var(--teal);
  color: var(--on-teal);
}
.page-title h1 {
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(56px, calc((100svh - 150px) * 0.18), 150px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* Phones: the title stays vertical in a narrower strip */
@media (max-width: 820px) {
  .page-title { height: calc(100svh - 64px); padding: 16px 10px; }
  .page-title h1 { font-size: clamp(40px, 12vw, 64px); }
  .inner main > :not(.page-title) .wrap,
  .inner main > .wrap { padding-left: 18px; padding-right: 18px; }
}

.book-list { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 8vw, 110px); }
.schools-lead { font-size: clamp(36px, 4.4vw, 60px); }
.split.schools-intro { align-items: start; }
.schools-intro .portrait { position: sticky; top: 24px; }
.portrait-stack { display: grid; gap: 16px; align-self: start; }

/* Two columns: photo and text */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.split.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.reverse > :first-child { order: 2; }
@media (max-width: 820px) {
  .split,
  .split.reverse { grid-template-columns: 1fr; }
  .split.reverse > :first-child { order: 0; }
}

.portrait img { width: 100%; height: auto; }

.prose { max-width: 680px; }
.prose p { margin-bottom: 1.3em; }
.prose a { text-underline-offset: 4px; }


/* 6. Home ---------------------------------------------------------------- */

/* Mustard panel with the name written vertically, photo beside it */
.home-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: calc(100svh - 64px);
}
.home-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.6vw, 40px);
  background: var(--teal);
  color: var(--rosa);
}
.home-hero-text h1 {
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: clamp(56px, calc((100svh - 64px) * 0.19), 200px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.home-hero-photo { position: relative; background: #1c1c1c; }
.home-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
/* Desktop: the name panel stays on the left while the page scrolls,
   like the title strip on the inner pages */
@media all {
  .home main { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .home main > * { grid-column: 2; min-width: 0; }
  .home-hero { display: contents; }
  .home main .home-hero-text {
    grid-column: 1;
    grid-row: 1 / span 20;
    position: sticky;
    top: 0;
    align-self: start;
    min-height: calc(100svh - 64px);
  }
  .home main .home-hero-photo { grid-column: 2; grid-row: 1; min-height: calc(100svh - 64px); }
}
/* Phones: the name stays vertical, in one line, beside the photo */
@media (max-width: 820px) {
  .home main .home-hero-text { min-height: calc(100svh - 64px); }
  .home main .home-hero-photo { min-height: 0; aspect-ratio: 4 / 5; }
  .home-hero-text { padding: 14px 10px; }
  .home-hero-text h1 { font-size: clamp(36px, 11vw, 60px); }
  .home-hero-text h1 br { display: none; }
  .schools-lead { font-size: 30px; }
  h1, h2 { overflow-wrap: anywhere; }
}

/* "Todos llevamos un equipaje por dentro." */
.home-line {
  padding: clamp(72px, 10vw, 140px) clamp(20px, 5vw, 56px) 0;
  text-align: center;
}
.home-line blockquote { max-width: 900px; margin: 0 auto; }
.home-line p {
  margin: 0 0 18px;
  font-style: italic;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.2;
  text-wrap: balance;
}
.home-line footer {
  color: var(--muted);
  font-family: var(--head);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.home-line cite { font-style: normal; }

/* Books, Schools, Newsletter: three light blocks, edge to edge */
.home-links { padding: clamp(56px, 8vw, 104px) 0 0; }
.home-links .wrap { max-width: none; padding: 0; }
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-height: clamp(200px, 22vw, 320px);
  padding: 28px clamp(20px, 2.4vw, 32px) 30px;
  background: var(--palma-light);
  color: var(--palma);
  transition: filter 160ms ease;
}
.card + .card .card-body { border-left: 1px solid rgb(46 91 60 / 20%); }
.card:hover .card-body { filter: brightness(0.97); }
.card-label {
  color: var(--palma);
  font-family: var(--head);
  font-stretch: 75%;
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1;
  text-transform: uppercase;
}
.card:hover .card-label {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.card-note { font-size: 16px; line-height: 1.45; }
@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
  .card + .card .card-body { border-left: 0; border-top: 1px solid rgb(46 91 60 / 20%); }
}

/* 7. About --------------------------------------------------------------- */

.about-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
}
.about-cols a { text-underline-offset: 4px; }
@media (max-width: 760px) { .about-cols { grid-template-columns: 1fr; } }

/* "Moments": event photos */
.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--line); }
.gallery figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.45; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.moments-group + .moments-group { margin-top: clamp(56px, 7vw, 88px); }
.moments-head { font-size: clamp(24px, 2.6vw, 34px); color: var(--teal); margin: 8px 0 24px; }
.moments-head em { font-style: normal; }

/* Spanish bio with photo */
.split-es { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.portrait-tall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 820px) { .split-es { grid-template-columns: 1fr; } }


/* 8. Books --------------------------------------------------------------- */

.book-row {
  display: grid;
  grid-template-columns: minmax(200px, 340px) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
  padding: clamp(40px, 6vw, 72px) 0;
}
.book-row:first-child { padding-top: 0; }
.book-row + .book-row { border-top: 1px solid var(--line); }
.book-row .cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  box-shadow: 10px 14px 28px rgb(22 22 22 / 18%);
}
.book-row h2 { margin-bottom: 10px; }
.book-row .meta {
  margin-bottom: 24px;
  color: var(--muted);
  font-family: var(--head);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.book-quote { margin: 4px 0 28px; }
.book-quote p { font-style: italic; font-size: 21px; line-height: 1.45; color: var(--teal); margin: 0 0 8px; }
.book-quote footer { font-size: 14px; color: var(--muted); }
.book-quote cite { font-style: normal; }
.book-row .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
@media (max-width: 720px) {
  .book-row { grid-template-columns: 1fr; }
  .book-row .cover { max-width: 240px; }
}


/* 9. Schools ------------------------------------------------------------- */


.program-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.program-list li { padding: 32px 28px; background: var(--paper); }
.program-list h3 { margin-bottom: 12px; font-size: 22px; }
.program-list p { margin: 0; color: var(--muted); font-size: 17px; }
@media (max-width: 960px) { .program-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .program-list { grid-template-columns: 1fr; } }


/* 10. Press -------------------------------------------------------------- */

.press-quote { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(32px, 5vw, 56px); }
.press-quote blockquote { max-width: 820px; margin: 0 auto; text-align: center; }
.press-quote blockquote p {
  margin: 0 0 14px;
  color: var(--teal);
  font-family: var(--head);
  font-stretch: 75%;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1;
  text-transform: uppercase;
}
.press-quote footer {
  color: var(--muted);
  font-family: var(--head);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.press-quote cite { font-style: normal; }

.press-groups { display: grid; gap: clamp(40px, 6vw, 72px); }
.press-group { display: grid; gap: 16px; }
.press-group h2 { margin: 0; font-size: clamp(26px, 2.8vw, 34px); }

.press-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.press-list li { padding: 26px 28px; background: var(--paper); scroll-margin-top: 24px; }
.press-list li:target { outline: 3px solid var(--ratan); outline-offset: -3px; }
.press-list h3 { margin: 0 0 10px; font-size: clamp(22px, 2.2vw, 28px); }
.press-list h3 a { text-decoration: none; }
.press-list h3 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.press-list h3 em { font-style: normal; }
.press-list p { margin: 0 0 12px; color: var(--muted); }
.press-list .bio-copy { margin: 0 0 12px; color: var(--ink); }
.press-list .bio-copy:last-child { margin-bottom: 0; }
.press-list details summary {
  margin-bottom: 4px;
  color: var(--teal);
  font-family: var(--head);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.press-list details[open] summary { margin-bottom: 14px; }

.press-meta {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: var(--head);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Press kit */
.kit-intro { margin: 0 0 18px; }
.kit-photos {
  list-style: none;
  margin: 24px 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.kit-photos a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.kit-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--line); }
.kit-photos span {
  font-family: var(--head);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.kit-photos a:hover span { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 620px) { .kit-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* 11. Contact ------------------------------------------------------------ */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-lead { font-size: clamp(48px, 6vw, 88px); color: var(--teal); margin: 0 0 24px; }

.form { display: grid; gap: 20px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--head);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #b9b7b0;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
}
.form textarea { min-height: 170px; resize: vertical; }
.form .hidden { position: absolute; left: -9999px; }
.form .button { justify-self: start; }

/* About: wide portrait above the English bio */
.about-intro { grid-template-columns: 1fr; gap: clamp(32px, 4vw, 56px); }
.about-intro .portrait img { width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.about-intro .prose { max-width: 760px; margin: 0 auto; }