/* =========================================================
   The Kathy Butler Conference on Employment Law
   in the Fifth Circuit
   "Verde Antequera" — Oaxacan green cantera stone, cochineal
   crimson, Santo Domingo gold, with Mitla greca + papel picado.
   ========================================================= */

:root {
  --cantera:        #2F4636;
  --cantera-2:      #34503D;
  --cantera-deep:   #243528;
  --sage:           #8FA590;
  --parchment:      #EEF0E9;
  --parchment-2:    #F7F8F3;
  --cochineal:      #9E2B25;
  --cochineal-dk:   #7E211C;
  --gold:           #B0863C;
  --gold-lt:        #E7C98A;
  --ink:            #1C2620;
  --ink-soft:       #43504A;

  --maxw: 1080px;
  --gap: clamp(1.25rem, 4vw, 3rem);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  --shadow: 0 1px 2px rgba(28,38,32,0.06), 0 14px 30px -20px rgba(28,38,32,0.35);

  /* Mitla greca (stepped-fret) divider */
  --greca: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='22'%20viewBox='0%200%2040%2022'%3E%3Cpath%20d='M0%2020%20L0%2015%20L8%2015%20L8%2010%20L16%2010%20L16%205%20L24%205%20L24%2010%20L32%2010%20L32%2015%20L40%2015'%20fill='none'%20stroke='%232F4636'%20stroke-width='2'/%3E%3C/svg%3E");
  --greca-gold: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='22'%20viewBox='0%200%2040%2022'%3E%3Cpath%20d='M0%2020%20L0%2015%20L8%2015%20L8%2010%20L16%2010%20L16%205%20L24%205%20L24%2010%20L32%2010%20L32%2015%20L40%2015'%20fill='none'%20stroke='%23B0863C'%20stroke-width='2'/%3E%3C/svg%3E");
  /* Papel picado pennant banner (gold, cut-out holes) */
  --papel: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='58'%20height='66'%20viewBox='0%200%2058%2066'%3E%3Crect%20x='0'%20y='1'%20width='58'%20height='2'%20fill='%23B0863C'/%3E%3Cpath%20fill='%23B0863C'%20fill-rule='evenodd'%20d='M3%203%20H55%20V46%20L29%2062%20L3%2046%20Z%20M29%2013%20L37%2023%20L29%2033%20L21%2023%20Z%20M14%2020%20L18%2025%20L14%2030%20L10%2025%20Z%20M44%2020%20L48%2025%20L44%2030%20L40%2025%20Z%20M29%2040%20L33%2045%20L29%2050%20L25%2045%20Z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before { animation: none !important; transition: none !important; }
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gap); }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; position: relative; }
.section--alt { background: var(--parchment-2); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cochineal); margin: 0 0 0.9rem;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; color: var(--cantera); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); margin: 0 0 1.1rem; letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; margin: 0 0 0.4rem; color: var(--ink); }

p { margin: 0 0 1rem; max-width: 65ch; }
a { color: var(--cochineal); text-underline-offset: 0.18em; }
a:hover { color: var(--cochineal-dk); }
code { background: rgba(47,70,54,0.08); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.9em; }

/* ---------- Greca + papel dividers ---------- */
.greca {
  height: 22px; background-image: var(--greca);
  background-repeat: repeat-x; background-position: center; opacity: 0.85;
}
.greca--gold { background-image: var(--greca-gold); }
.papel {
  height: 64px; background-image: var(--papel);
  background-repeat: repeat-x; background-position: top center;
}

/* ---------- Header / nav ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--cantera-deep); color: var(--parchment-2);
  border-bottom: 1px solid rgba(176,134,60,0.35); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 62px; gap: 1rem; flex-wrap: wrap; }
.brand { font-family: var(--serif); font-size: 1.04rem; font-weight: 500; color: var(--parchment-2); text-decoration: none; letter-spacing: 0.01em; }
.brand span { color: var(--gold); }
.nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.nav a { color: var(--parchment-2); text-decoration: none; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--gold); color: #fff; }
.nav a[aria-current="page"] { border-bottom-color: var(--gold); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center; color: var(--parchment-2);
  background:
    radial-gradient(135% 105% at 50% -18%, rgba(176,134,60,0.20), transparent 56%),
    linear-gradient(180deg, var(--cantera-2) 0%, var(--cantera-deep) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--greca-gold); background-repeat: repeat;
  opacity: 0.045; pointer-events: none;
}
.hero .papel { position: relative; z-index: 2; }
.hero .wrap { position: relative; z-index: 2; padding-top: clamp(2.2rem, 5vw, 3.4rem); padding-bottom: 0; }
.hero .eyebrow { color: var(--gold-lt); }
.hero h1 {
  color: var(--parchment-2); font-size: clamp(2.05rem, 5.2vw, 3.5rem);
  font-weight: 400; font-optical-sizing: auto; margin: 0 auto 1.1rem;
  max-width: 17ch; letter-spacing: -0.02em;
}
.hero .place { font-family: var(--sans); font-size: clamp(1rem, 2.4vw, 1.2rem); font-weight: 500;
  letter-spacing: 0.05em; color: var(--sage); margin: 0 0 2rem; }
.hero .place strong { color: var(--gold-lt); font-weight: 600; }

/* Conference seal */
.seal { width: clamp(132px, 20vw, 178px); height: auto; display: block; margin: 0 auto 1.5rem; }
.seal-arc { font-family: var(--sans); font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.seal-place { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: 4px; fill: #fff; }
.seal-year { font-family: var(--serif); font-size: 16px; letter-spacing: 3px; fill: var(--gold-lt); }

/* Hero facts as a framed group */
.hero-facts {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0;
  margin: 0 auto; padding: 1.1rem 0; list-style: none; max-width: 660px;
  border-top: 1px solid rgba(176,134,60,0.45); border-bottom: 1px solid rgba(176,134,60,0.45);
}
.hero-facts li { flex: 1 1 150px; padding: 0.25rem 1rem; border-left: 1px solid rgba(143,165,144,0.25); }
.hero-facts li:first-child { border-left: 0; }
.hero-facts .lbl { display: block; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.25rem; }
.hero-facts .val { font-family: var(--serif); font-size: 1.12rem; color: var(--parchment-2); }
.hero .greca { margin-top: 1.8rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.03em; padding: 0.8rem 1.55rem; border-radius: 2px; text-decoration: none;
  border: 2px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn--primary { background: var(--cochineal); color: #fff; }
.btn--primary:hover { background: var(--cochineal-dk); color: #fff; transform: translateY(-1px); }
.btn--ghost { border-color: var(--cantera); color: var(--cantera); background: transparent; }
.btn--ghost:hover { background: var(--cantera); color: var(--parchment-2); }
.btn--gold { background: var(--gold); color: #2a2010; }
.btn--gold:hover { background: var(--gold-lt); color: #2a2010; transform: translateY(-1px); }
.btn-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* ---------- Generic blocks ---------- */
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 60ch; }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.3rem 0; padding: 0; list-style: none; }
.tag { font-size: 0.82rem; font-weight: 600; background: rgba(47,70,54,0.06); color: var(--cantera);
  border: 1px solid var(--sage); border-radius: 999px; padding: 0.32rem 0.9rem; }
.note { border-left: 3px solid var(--gold); background: rgba(176,134,60,0.08); padding: 0.9rem 1.15rem;
  margin: 1.4rem 0; font-size: 0.98rem; color: var(--ink-soft); border-radius: 0 3px 3px 0; }
.note strong { color: var(--ink); }

/* section eyebrow + heading stack helper */
.kicker { display: flex; align-items: center; gap: 0.8rem; }

/* ---------- Speakers ---------- */
.speakers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; margin-top: 1.9rem; }
.speaker { background: var(--parchment-2); border: 1px solid var(--sage); border-radius: 4px;
  padding: 1.7rem 1.3rem; text-align: center; box-shadow: var(--shadow); position: relative; }
.speaker::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 46px; height: 3px; background: var(--cochineal); border-radius: 2px; }
.avatar { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 0.95rem; display: grid; place-items: center;
  background: var(--cantera); color: var(--gold-lt); font-family: var(--serif); font-size: 1.4rem; border: 2px solid var(--gold); }
.speaker h3 { color: var(--cantera); font-family: var(--serif); font-size: 1.28rem; margin-bottom: 0.2rem; }
.speaker .role { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }
.speaker.tba .avatar { background: transparent; color: var(--gold); border-style: dashed; }
.speaker.tba::after { background: var(--gold); }

/* ---------- Hotel / panel ---------- */
.panel { display: grid; grid-template-columns: 1.25fr 0.9fr; gap: 0; border: 1px solid var(--sage);
  border-radius: 5px; overflow: hidden; background: var(--parchment-2); margin-top: 1.9rem; box-shadow: var(--shadow); }
.panel__main { padding: clamp(1.6rem, 3vw, 2.3rem); }
.panel__side { position: relative; overflow: hidden; background: var(--cantera); color: var(--parchment-2);
  padding: clamp(1.6rem, 3vw, 2.3rem); }
.panel__side::before { content: ""; position: absolute; inset: 0; background-image: var(--greca-gold);
  background-repeat: repeat; opacity: 0.05; pointer-events: none; }
.panel__side > * { position: relative; z-index: 1; }
.panel__side h3 { color: var(--gold-lt); font-family: var(--serif); font-size: 1.35rem; margin-bottom: 0.5rem; }
.panel__side p { color: rgba(238,240,233,0.85); font-size: 0.96rem; }
.panel__side a { color: #fff; }
.side-eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.2rem; font-weight: 700; }
.deadline { font-family: var(--serif); font-size: 1.5rem; color: #fff; margin: 0 0 0.2rem; }
.side-rule { height: 22px; background-image: var(--greca-gold); background-repeat: repeat-x; opacity: 0.6; margin: 1.3rem 0; }
.side-note { font-size: 0.9rem; color: var(--sage); border-top: 1px solid rgba(143,165,144,0.25); padding-top: 0.9rem; margin-top: 1.2rem; }

.dl { margin: 0; }
.dl dt { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cochineal); margin-top: 1.05rem; font-weight: 700; }
.dl dd { margin: 0.15rem 0 0; }
.steps { margin: 0.6rem 0 0; padding-left: 1.15rem; }
.steps li { margin-bottom: 0.5rem; font-size: 0.96rem; }

/* ---------- Gallery (past) ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1rem; margin-top: 1.9rem; }
.frame { aspect-ratio: 4/3; background: repeating-linear-gradient(45deg, #e6eae0, #e6eae0 12px, #dfe4d8 12px, #dfe4d8 24px);
  border: 1px solid var(--sage); display: flex; align-items: center; justify-content: center; color: var(--ink-soft);
  font-size: 0.85rem; text-align: center; padding: 1rem; border-radius: 3px; box-shadow: var(--shadow); }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame--photo { padding: 0; background: none; overflow: hidden; transition: box-shadow 0.18s ease, transform 0.18s ease; }
.frame--photo:hover, .frame--photo:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(47,70,54,0.22); }

.past-list { list-style: none; padding: 0; margin: 1.9rem 0 0; }
.past-list li { display: flex; gap: 1.3rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--sage); }
.past-list .yr { font-family: var(--serif); font-size: 1.5rem; color: var(--cochineal); min-width: 4ch; }
.past-list .loc { font-weight: 700; }
.past-list .ppl { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Past locations ---------- */
.place-list { list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
  column-gap: 2rem; border-top: 1px solid var(--sage); }
.place-list li { position: relative; padding: 0.9rem 0.5rem 0.9rem 1.5rem;
  border-bottom: 1px solid var(--sage); display: flex; flex-direction: column; gap: 0.12rem; }
.place-list li::before { content: ""; position: absolute; left: 0.2rem; top: 1.45rem;
  width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.place-list .city { font-family: var(--serif); font-size: 1.15rem; color: var(--cantera); line-height: 1.25; }
.place-list .country { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 280px 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; margin-top: 1.9rem; }
.portrait { aspect-ratio: 3/4; border: 1px solid var(--sage); background: repeating-linear-gradient(45deg, #e6eae0, #e6eae0 12px, #dfe4d8 12px, #dfe4d8 24px);
  display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 0.85rem; text-align: center; padding: 1rem; border-radius: 3px; box-shadow: var(--shadow); }
.portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.portrait--photo { padding: 0; background: none; overflow: hidden; }
.pull { font-family: var(--serif); font-size: clamp(1.3rem,2.6vw,1.7rem); color: var(--cantera); line-height: 1.3;
  border-left: 3px solid var(--gold); padding-left: 1.2rem; margin: 1.8rem 0; }

/* ---------- Footer ---------- */
.footer { background: var(--cantera-deep); color: var(--parchment-2); padding: 0 0 2.2rem; }
.footer .papel { transform: scaleY(-1); margin-bottom: 2.6rem; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer-cols--two { grid-template-columns: 1.8fr 1fr; }
.footer h4 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.8rem; }
.footer a { color: var(--parchment-2); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer p, .footer li { font-size: 0.9rem; color: var(--sage); }
.footer .name { font-family: var(--serif); color: var(--parchment-2); font-size: 1.1rem; max-width: 30ch; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.45rem; }
.colophon { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(143,165,144,0.3); font-size: 0.8rem; color: var(--sage); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .panel { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .portrait { max-width: 240px; }
  .footer-cols, .footer-cols--two { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero-facts li { flex-basis: 100%; border-left: 0; border-top: 1px solid rgba(143,165,144,0.2); padding: 0.6rem 0; }
  .hero-facts li:first-child { border-top: 0; }
}

a:focus-visible, .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }