/* ============================================================
   Sean's experiment — look and feel.
   Loaded AFTER /styles.css on the experiment's own site-styled
   pages. Palette taken from the Diana Teaches banner and llama:
   sun yellow, ink navy, sky blue, coral, cream. /styles.css is
   shared with Diana's live site and is never edited for this.
   ============================================================ */

:root {
  --sun:        #F5B324;
  --sun-deep:   #D99A12;
  --sun-soft:   #FDECBF;
  --ink:        #1E2A38;
  --sky:        #2D5C8F;
  --sky-soft:   #E3ECF5;
  --coral:      #E8764F;
  --good:#2E7D5B; --good-soft:#E2F2EA; --coral-soft: #FBE3D9;
  --cream:      #FFF8EC;
  --cocoa:      #5A3A2E;

  /* re-point the shared stylesheet's tokens */
  --paper:      var(--cream);
  --paper-warm: #FFFDF7;
  --muted:      #6E6257;
  --rule:       #EFE1C4;
  --en:         var(--sky);
  --es:         var(--coral);
}

body { background: var(--cream); }

/* Short pages: the footer sits at the bottom of the screen (not sticky — it
   just doesn't float mid-screen when there's nothing to scroll). */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.wrap { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; }
.wrap > .foot { margin-top: auto; }
.wrap > *:has(+ .foot) { margin-bottom: 4.5rem; }
@media (max-width: 40rem) { body { padding-bottom: 0; } }   /* the footer carries its own bottom padding */

/* ---------- masthead + headings ---------------------------- */

/* the sign-in / dashboard page gets a wider column than a lesson */
.wrap-wide { max-width: 46rem; }
.wrap-wide .standfirst { max-width: none; }

/* .bi: a line in both languages; data-primary picks which comes first */
.bi { display: flex; flex-direction: column; gap: 0.2rem; }
.bi[hidden] { display: none; }
.bi [lang] { display: block; }
.bi[data-primary="es"] [lang="en"], .bi[data-primary="en"] [lang="es"], .bi:not([data-primary]) [lang="es"] {
  order: 2; font-size: 0.9em; font-style: italic; opacity: 0.8;
}
.wrap-wide .signin { max-width: 24rem; }

/* the banner bleeds wider than the text column */
.masthead { display: block; width: min(calc(100vw - 2rem), 48rem); max-width: none; height: auto;
  position: relative; left: 50%; transform: translateX(-50%); margin: -0.5rem 0 2rem; }
/* Spanish twin of a line: same size, quieter */
.es { color: var(--muted); font-weight: 400; }
h1 .es { font-size: 0.55em; font-style: italic; color: var(--cocoa); opacity: 0.85; white-space: nowrap; }
@media (max-width: 40rem) { h1 .es { display: block; margin-top: 0.15em; } }
label .es { color: var(--cocoa); opacity: 0.75; }

h1 { letter-spacing: -0.01em; }

/* a highlighter stroke under the main heading, echoing the banner's tilt */
.wrap > h1, #dashboard h1, #signin h1 {
  position: relative; display: inline-block; z-index: 0;
}
.wrap > h1::before, #dashboard h1::before, #signin h1::before {
  content: ""; position: absolute; z-index: -1; left: -0.25em; right: -0.35em; top: 62%; bottom: -0.02em;
  background: var(--sun); border-radius: 3px; transform: skew(-6deg) rotate(-1.2deg); opacity: 0.85;
}

.eyebrow { color: var(--sky); }

/* ---------- entries -------------------------------------------- */

.entry:hover, .entry:focus-visible { border-left-color: var(--sun); background: #FFFCF3; }
.headword .tag {
  font-style: normal; font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; vertical-align: middle;
  background: var(--sun-soft); color: var(--cocoa);
}
.headword .tag.lang-en { background: var(--sky-soft); color: var(--sky); }
.headword .tag.lang-es { background: var(--coral-soft); color: var(--coral); }
/* Unread messages: the one count on a dashboard that wants answering. */
.headword .tag.unread { background: var(--coral); color: var(--cream); }
.path { color: var(--sky); }

.entries li.group { font-family:"Lexend",system-ui,sans-serif; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cocoa); padding: 1.6rem 0 0.4rem; border-top: 0; }
.entries li.group + li { border-top-color: var(--ink); }
#admin-lessons { margin-top: 3rem; }

/* ---------- buttons -------------------------------------------- */

/* form.signin outranks the page's own inline .signin rule, which loads later */
button.primary, form.signin button, .row button, #class-start {
  background: var(--sun); color: var(--ink); border: 0; border-radius: 999px; font-weight: 600;
  padding: 0.6rem 1.4rem; box-shadow: 0 1px 0 var(--sun-deep);
}
button.primary:hover, form.signin button:hover, .row button:hover, #class-start:hover { background: #F8BE3F; }
button.quiet { border-radius: 999px; }
button { border-radius: 999px; }

/* ---------- sign-in hero ---------------------------------------- */

.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: end; }

/* the llama in front of a chalkboard (desktop only) */
.board-scene { position: relative; justify-self: end; width: clamp(14rem, 34vw, 19rem); margin-bottom: -2.5rem; }
.board {
  position: relative; height: 11.5rem; margin: 0 0 -6.5rem 0.5rem;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.08), transparent 45%),
    radial-gradient(ellipse at 75% 70%, rgba(255,255,255,0.06), transparent 50%),
    #2F5147;
  border: 9px solid #B8804A; border-radius: 6px;
  box-shadow: inset 0 0 28px rgba(0,0,0,0.35), 0 8px 18px rgba(30,42,56,0.16);
}
.board::after {  /* the chalk ledge */
  content: ""; position: absolute; left: -14px; right: -14px; bottom: -18px; height: 10px;
  background: #C98F55; border-radius: 2px; box-shadow: 0 3px 5px rgba(30,42,56,0.22);
}
.chalk {
  position: absolute; left: 1rem; top: 1rem; font-family: Caveat, "Comic Sans MS", cursive; font-weight: 600;
  font-size: 2.1rem; line-height: 1; color: #F4EFE3; opacity: 0.92; letter-spacing: 0.01em;
  transform: rotate(-3deg); text-shadow: 0 0 1px rgba(255,255,255,0.6);
}
.chalk-line { position: absolute; left: 1.2rem; top: 3.7rem; width: 7rem; height: 2px; border-radius: 2px;
  background: rgba(244,239,227,0.75); transform: rotate(-3deg); }
.hero-llama { position: relative; display: block; width: clamp(9rem, 24vw, 12.5rem); height: auto; margin: 0 auto; }

@media (max-width: 40rem) {
  .hero { grid-template-columns: 1fr; }
  .board-scene { display: none; }   /* phones: the banner already has a llama; no scrolling past a second one */
}
.signin input { background: #fff; border-color: var(--rule); border-radius: 8px; }
.signin input:focus { outline-color: var(--sun); border-color: var(--sun); }
.error { color: var(--coral); }

/* ---------- empty state / no-access ------------------------------ */

.empty { display: flex; gap: 1.25rem; align-items: center; margin: 1.5rem 0; color: var(--muted); }
.empty[hidden] { display: none; }
.empty img { width: 6.5rem; height: auto; flex: 0 0 auto; }
.figure-llama { width: clamp(9rem, 30vw, 13rem); height: auto; display: block; margin: 1rem 0 0; }

/* ---------- notes and cards ------------------------------------- */

.note { background: #FFFDF7; border-color: var(--rule); border-left: 4px solid var(--sun); border-radius: 0 6px 6px 0; }
.note a, .lesson a, p a { color: var(--sky); }
blockquote { border-left-color: var(--sun); }
.vocab dt { color: var(--ink); }

/* ---------- admin widgets ---------------------------------------- */

dialog { background: var(--cream); border-color: var(--rule); border-radius: 12px; }
.grid input, .grid select, .row select { background: #fff; border-radius: 8px; }
th { color: var(--cocoa); }
.status { color: var(--cocoa); }
.status.err { color: var(--coral); }
#shown-once code { color: var(--sky); }

/* ---------- footer ------------------------------------------------ */

.foot { border-top-color: var(--rule); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }   /* clears Android/iOS bottom bars */
.foot a { color: var(--sky); }
@media (max-width: 40rem) { .foot .foot-dot { display: none; } .foot .foot-line { display: block; margin-top: 0.3rem; } }

/* ============================================================
   Landing page (the experiment's front door)
   ============================================================ */

body.landing { padding-top: 0; }
.site-header {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 1.5rem; background: rgba(255,248,236,0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ink);
  font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.25rem; }  /* the logo keeps Fraunces, like the banner */
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand .wordmark { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.brand .rule { display: none; }
.brand .teaches { font-family:"Lexend",system-ui,sans-serif; font-style: normal; font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--sky); }
.btn-signin, .btn-sun { display: inline-block; background: var(--sun); color: var(--ink); text-decoration: none; font-weight: 600;
  padding: 0.5rem 1.1rem; border-radius: 999px; box-shadow: 0 1px 0 var(--sun-deep); }
.btn-signin:hover, .btn-sun:hover { background: #F8BE3F; }
.btn-quiet { display: inline-block; color: var(--sky); font-weight: 600; text-decoration: none; padding: 0.5rem 0.2rem; }
.btn-sky { display: inline-block; background: var(--sky); color: #FFF8EC; text-decoration: none; font-weight: 600;
  padding: 0.5rem 1.1rem; border-radius: 999px; box-shadow: 0 1px 0 #1F4368; }
.btn-sky:hover { background: #3A6DA3; }
/* The two calls to action stack, and they read as a pair, so they share a
   width: one grid column sized to the wider of them, both stretched to fill
   it. The arrow sits at the right edge of each. */
.hero-links { display: grid; grid-template-columns: max-content; gap: 0.6rem;
  margin: 0.5rem 0 0; max-width: 100%; }
.hero-links a { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%; box-sizing: border-box; }
/* The long one breaks English above Spanish rather than wrapping mid-phrase,
   so the middle dot goes and the Spanish half takes its own line. */
.hero-links .two-line .dot { display: none; }
.hero-links .two-line .l2 { display: block; }
.hero-links.single { grid-template-columns: max-content; }
@media (max-width: 40rem) {
  .hero-links { grid-template-columns: 1fr; }          /* full width on a phone */
  .hero-links.single { grid-template-columns: max-content; }  /* a lone button needn't stretch */
}
.cta-lead { font-family:"Lexend",system-ui,sans-serif; font-style:normal; font-weight: 600; font-size: 1.15rem; color: var(--ink); margin: 1.75rem 0 0.4rem; }
.cta-lead .es { font-size: 0.85em; color: var(--cocoa); }

.landing .hero { align-items: center; margin-bottom: 0.5rem; }
.hero-llama.solo { justify-self: end; width: clamp(8rem, 20vw, 11rem); }
.interp-hero h1 { font-size: clamp(2.1rem, 6vw, 2.8rem); }
@media (max-width: 40rem) { .hero-llama.solo { display: none; } }
.landing .hero .masthead { left: 0; transform: none; width: min(100%, 34rem); margin: 0 0 1.5rem; }
.thesis { font-family:"Lexend",system-ui,sans-serif; font-weight: 500; font-size: 1.25rem; line-height: 1.45; color: var(--ink); max-width: 34rem; }
.thesis [lang="en"] { font-size: 0.92em; }
.thesis [lang="es"] { font-weight: 400; }
/* The value proposition: the page's one h1, right under the banner. */
.landing .vp { margin: 0; font-size: clamp(1.7rem, 3.6vw, 2.2rem); line-height: 1.2; font-weight: 600; max-width: 32rem; }
.landing .vp [lang="es"] { font-size: 0.6em; font-weight: 400; margin-top: 0.3rem; color: var(--cocoa); }
/* Interpreting gets its own line under the headline, in the blue of its card,
   so it reads as the second service rather than an afterthought. */
.vp-interp { margin: 1rem 0 0; padding-left: 0.9rem; border-left: 3px solid var(--sky);
  font-size: 1.2rem; line-height: 1.35; font-weight: 500; color: var(--sky); max-width: 30rem; }
.vp-interp [lang="es"] { font-weight: 400; color: var(--sky); }
/* The old opening line now leads into the story. */
.about-thesis { margin: 0 0 1.25rem; }
.story-hook em { font-style: normal; }

.landing h2 { font-size: 1.7rem; margin: 3.5rem 0 1rem; }
/* English leads in ink; the Spanish twin sits under it in a lighter blue */
.landing .es-sub { display: block; font-family:"Lexend",system-ui,sans-serif; font-weight: 400; font-style: italic;
  font-size: 0.9rem; line-height: 1.4; color: #4F79A8; margin-top: 0.15rem; }

.landing h2 .es { font-size: 0.6em; font-style: italic; color: var(--cocoa); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: start; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags li { background: var(--sun-soft); color: var(--cocoa); padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.875rem; }
.tags li:nth-child(2n) { background: var(--sky-soft); color: var(--sky); }

/* About me: places and figures as pills, then Diana's story in one language at a
   time. The switch is two radio buttons and CSS alone, so the public page still
   runs no script of its own. */
.story-stats { margin: 0.5rem 0 0; }
.story-stats li { background: var(--cream); color: var(--ink); border: 1px solid var(--rule); }
.story-stats li:nth-child(2n) { background: var(--cream); color: var(--ink); }
.story-stats .es { color: var(--cocoa); font-style: italic; }
.story { margin: 1.75rem 0 0; max-width: 42rem; }
.story input { position: absolute; opacity: 0; pointer-events: none; }
.story label { display: inline-block; cursor: pointer; font-weight: 600; font-size: 0.9rem; padding: 0.3rem 0.95rem;
  border-radius: 999px; border: 1px solid var(--rule); color: var(--muted); margin: 0 0.3rem 1rem 0; }
.story #story-en:checked + label, .story #story-es:checked + label { background: var(--sky); border-color: var(--sky); color: var(--cream); }
.story input:focus-visible + label { outline: 2px solid var(--sun-deep); outline-offset: 2px; }
.story #story-en:checked ~ .story-es, .story #story-es:checked ~ .story-en { display: none; }
.story-text p { margin: 0 0 1rem; line-height: 1.65; }
.story-hook { font-family:"Lexend",system-ui,sans-serif; font-weight: 600; font-size: 1.3rem; line-height: 1.4; }
.story-close { font-weight: 600; }


.offer-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; margin: 1.5rem 0; }
.offer-cards article { background: #FFFDF7; border: 1px solid var(--rule); border-left: 4px solid var(--sun); border-radius: 0 8px 8px 0;
  padding: 1.2rem 1.4rem; display: flex; flex-direction: column; }
.offer-cards article > a { margin-top: auto; padding-top: 1rem; align-self: flex-start; }   /* links line up at the bottom */
.offer-cards h3 { font-family:"Lexend",system-ui,sans-serif; font-weight: 600; font-size: 1.3rem; margin: 0 0 0.6rem; }
.offer-cards h3 .es { font-size: 0.65em; font-style: italic; color: var(--cocoa); }
.offer-cards a { color: var(--sky); font-weight: 600; text-decoration: none; white-space: nowrap; }
/* Home page: the offer sits right under the thesis and carries the calls to
   action. Each title is a pill in its colour, and so is the button at the foot. */
.hero-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; margin: 2rem 0 0; }
.hero-offer article { border-radius: 14px; padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; }
.hero-offer .classes { background: var(--sun-soft); }
.hero-offer .interp { background: var(--sky-soft); }
.landing .hero-offer .pill { margin: 0; white-space: nowrap; font-size: 1.1rem; }
.pill { align-self: flex-start; font-family:"Lexend",system-ui,sans-serif; font-weight: 600; font-size: 1.15rem;
  padding: 0.35rem 1rem; border-radius: 999px; margin: 0; }
.pill .es { font-size: 0.7em; font-style: italic; }
.classes .pill { background: var(--sun); color: var(--ink); }
.classes .pill .es { color: var(--cocoa); }
.interp .pill { background: var(--sky); color: var(--cream); }
.interp .pill .es { color: var(--sun-soft); }
.hero-offer .bi { color: var(--ink); margin: 0; }
.hero-offer .open-door { font-weight: 600; color: var(--sky); }
.hero-offer .classes .open-door { color: var(--cocoa); }
.hero-offer .open-door [lang="es"] { font-weight: 400; }
.hero-offer .go { margin-top: auto; align-self: flex-start; display: flex; align-items: center; gap: 1rem; }
.hero-offer .go .dot { display: none; }
.hero-offer .go .l2 { display: block; }
.regions { font-size: 0.95rem; color: var(--muted); margin: 1.5rem 0 0.5rem; }
.regions .label { font-family:"Lexend",system-ui,sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cocoa); margin-right: 0.6rem; }
.education { list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: 0.95rem; }
.education li { padding: 0.45rem 0; border-top: 1px solid var(--rule); color: var(--ink); }
.regions .es-sub { margin-top: 0.05rem; }
.regions { margin-bottom: 0.25rem; }
.education + .regions { margin-top: 1.75rem; }

.contact .aside { margin-top: 0.75rem; font-size: 0.95rem; }
.contact-wrap { background: #FFFDF7; border: 1px solid var(--rule); border-radius: 8px; padding: 0.75rem; margin: 1.5rem 0 0; }
.contact-wrap iframe { display: block; width: 100%; border: 0; }

/* The booking page embeds the scheduler with a transparent background, so it
   gets no card of its own — the cream page shows through and the whole thing
   reads as one page rather than a tool bolted on. */
.demo-intro .bi { margin-top: 0.75rem; }
.booking-wrap { margin: 1.75rem 0 0; }
.booking-wrap iframe { display: block; width: 100%; border: 0; }

@media (max-width: 40rem) {
  .landing .board-scene { display: none; }      /* the banner already has a llama */
  .site-header { padding: 0.5rem 1rem; margin-bottom: 1.5rem; }
  /* phones: stacked mark — Diana / gold rule / TEACHES */
  .brand .wordmark { display: flex; flex-direction: column; align-items: stretch; gap: 0; line-height: 1; }
  .brand .name { font-size: 1.2rem; }
  .brand .rule { display: block; height: 2px; background: var(--sun); margin: 3px 0 4px; border-radius: 1px; }
  .brand .teaches { font-size: 0.55rem; letter-spacing: 0.32em; }
  .about-grid { grid-template-columns: 1fr; }
  .landing .hero { margin-bottom: 0; }
}

/* ---------- shelves: lessons and reports as sections you open ---------- */
/* Shared by the admin screen and the admin's dashboard. */
/* Lessons and reports as three sections you open and put away, rather than
   two long tables always on show. */
.shelf { display: flex; flex-direction: column; gap: 0.7rem; margin: 1rem 0 2rem; max-width: 52rem; }
.shelf-section { border: 1px solid var(--rule); border-radius: 10px; background: var(--paper-warm); overflow: hidden; }
.shelf-bar { width: 100%; display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem;
  background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 0; }
.shelf-bar:hover { background: var(--sun-soft); }
.chev { flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--sky); transition: transform 0.18s ease; }
.shelf-section.open .chev { transform: rotate(90deg); }
.shelf-name { font-family:"Lexend",system-ui,sans-serif; font-style:normal; font-weight: 600; font-size: 1.25rem; flex: 1 1 auto; }
.shelf-name .es-sub { font-family:"Lexend",system-ui,sans-serif; font-style: italic; font-weight: 400; font-size: 0.85rem; color: var(--muted); }
.shelf-count, .shelf-gap { font-family:"Lexend",system-ui,sans-serif; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.shelf-count { color: var(--cocoa); background: var(--sun-soft); }
.shelf-gap { color: var(--coral); background: var(--coral-soft); }
.shelf-gap[hidden] { display: none; }
.shelf-action { font-family:"Lexend",system-ui,sans-serif; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); white-space: nowrap; }
.shelf-body { display: none; padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--rule); }
.shelf-section.open .shelf-body { display: block; }
.shelf-note { font-size: 0.9rem; color: var(--muted); margin: 0.8rem 0 0; }
.shelf-row { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.65rem 0.1rem; border-bottom: 1px dashed var(--rule); }
.shelf-row:last-child { border-bottom: 0; }
.shelf-slug { font-family:"Lexend",system-ui,sans-serif; font-size: 0.78rem;
  color: var(--muted); flex: 0 0 13rem; }
/* The slug opens the page. Muted like the rest of the cell until you reach for
   it, so a list of twenty rows doesn't read as twenty links. */
.shelf-slug a { color: inherit; text-decoration-color: var(--rule); }
.shelf-slug a:hover, .shelf-slug a:focus-visible { color: var(--sky); text-decoration-color: currentColor; }
.shelf-title { flex: 1 1 12rem; font-weight: 600; }
.shelf-who { font-size: 0.85rem; color: var(--good); background: var(--good-soft);
  border-radius: 999px; padding: 0.1rem 0.55rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shelf-who.none { color: var(--coral); background: var(--coral-soft); }
.shelf-row.is-hidden .shelf-title { color: var(--muted); font-weight: 400; text-decoration: line-through; }
.shelf-row.is-hidden .shelf-slug { color: var(--muted); }
.shelf-actions { display: flex; gap: 0.4rem; white-space: nowrap; }
.rename-box { font: inherit; font-weight: 600; flex: 1 1 12rem; padding: 0.2rem 0.5rem;
  border: 1px solid var(--sky); border-radius: 6px; background: #fff; color: var(--ink); }
.shelf-empty { color: var(--muted); padding: 0.9rem 0.1rem; }
.shelf-body .row { margin-bottom: 0; }
.shelf-body .grow { flex: 1 1 12rem; }
.shelf-body .grow input { width: 100%; }
@media (max-width: 34rem) {
  .shelf-slug { flex: 1 0 100%; }
  .shelf-bar { flex-wrap: wrap; gap: 0.5rem 0.7rem; }
  .shelf-action { display: none; }
}

/* Diana's story as five stops on a trip, each with a passport stamp drawn in
   CSS: no images, and the city names live in the stamps rather than in pills. */
.story { max-width: 52rem; }
.trip { list-style: none; margin: 1.5rem 0; padding: 0; position: relative; }
.trip::before { content: ""; position: absolute; left: 50%; top: 0.5rem; bottom: 0.5rem; border-left: 2px dashed var(--rule); }
.stop { position: relative; width: calc(50% - 2rem); margin: 0 0 1.4rem; padding: 1.3rem 1.4rem 1.2rem; border-radius: 14px; background: #FFFDF7; border: 1px solid var(--rule); }
.stop:nth-child(odd)  { margin-right: auto; }
.stop:nth-child(even) { margin-left: auto; }
.stop + .stop { margin-top: -3.5rem; }
.stop::after { content: ""; position: absolute; top: 1.6rem; width: 12px; height: 12px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px var(--cream); }
.stop:nth-child(odd)::after  { right: calc(-2rem - 7px); }
.stop:nth-child(even)::after { left:  calc(-2rem - 7px); }
.stop.sky::after { background: var(--sky); } .stop.coral::after { background: var(--coral); }
.stop h3 { margin: 0.2rem 0 0.4rem; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.stop p { margin: 0; line-height: 1.6; font-size: 0.97rem; }
/* The stamp floats inside the card, so the title and text wrap around it and
   it can never sit on top of the words, whatever the language or length. */
.stamp { float: right; margin: -2rem -0.5rem 0.6rem 0.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.1; transform: rotate(-9deg); background: var(--cream);
  border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 3px; opacity: 0.92; }
.stamp.circle { width: 5.3rem; height: 5.3rem; border-radius: 50%; }
.stamp.rect { padding: 0.4rem 0.6rem; border-radius: 6px; transform: rotate(7deg); max-width: 6.5rem; }
.stamp b { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.04em; }
.stamp i { font-style: normal; font-size: 0.5rem; margin-top: 0.15rem; opacity: 0.85; }
.stop.sun .stamp { color: var(--sun-deep); } .stop.sky .stamp { color: var(--sky); } .stop.coral .stamp { color: var(--coral); }
@media (max-width: 44rem) {
  .trip::before { left: 0.4rem; }
  .stop { width: auto; margin-left: 1.6rem !important; margin-right: 0 !important; }
  .stop + .stop { margin-top: 1.8rem; }
  .stop:nth-child(odd)::after, .stop:nth-child(even)::after { left: calc(-1.6rem - 1px); right: auto; }
}

/* "Try a class": three public sample lessons at /try/, each card showing which
   of the four skills that sample works on. */
.try-lead { max-width: 40rem; margin: 0 0 1.25rem; }
.try-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1.1rem; }
.try-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.2rem 1.3rem; border-radius: 14px; background: #FFFDF7;
  border: 1px solid var(--rule); border-top: 5px solid var(--sun); color: var(--ink); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.try-card.sky { border-top-color: var(--sky); } .try-card.coral { border-top-color: var(--coral); }
.try-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(30, 42, 56, 0.08); }
.try-card h3 { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.try-card .bi { margin: 0; font-size: 0.95rem; }
.try-meta { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cocoa); }
.skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.skills li { font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px dashed var(--rule); color: var(--muted); }
.skills li.on { border-style: solid; border-color: transparent; background: var(--sun-soft); color: var(--cocoa); }
.try-card.sky .skills li.on { background: var(--sky-soft); color: var(--sky); }
.try-card.coral .skills li.on { background: var(--coral-soft); color: var(--cocoa); }
.try-go { margin-top: auto; font-weight: 600; color: var(--sky); }

/* ============================================================
   Home page (body.home): one language at a time
   ============================================================ */
/* The body text shows in one language, picked by the EN | ES switch in the
   header: two radio buttons at the top of <body> and :has(), so the public
   page still runs no script of its own. Anything with a lang attribute
   follows the switch; .both keeps a line in the two languages (the headline).
   Section titles carry their Spanish in .es, with no lang, so they stay
   bilingual. */
.lang-radio { position: absolute; opacity: 0; pointer-events: none; }
.lang-switch { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; background: #FFFDF7; }
.lang-switch label { cursor: pointer; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; padding: 0.25rem 0.7rem;
  border-radius: 999px; color: var(--muted); }
body:has(#lang-en:checked) label[for="lang-en"],
body:has(#lang-es:checked) label[for="lang-es"] { background: var(--sky); color: var(--cream); }
body:has(.lang-radio:focus-visible) .lang-switch { outline: 2px solid var(--sun-deep); outline-offset: 2px; }
.header-right { display: flex; align-items: center; gap: 0.75rem; }

body:has(#lang-en:checked) [lang="es"]:not(.both [lang]) { display: none !important; }
body:has(#lang-es:checked) [lang="en"]:not(.both [lang]) { display: none !important; }
/* the one line left reads as the main one, not as a quiet twin */
.home .bi:not(.both) [lang] { font-size: inherit; font-style: normal; opacity: 1; }
.home .hero-offer .open-door [lang="es"] { font-weight: 600; }
/* In Spanish the headline swaps: Spanish on top, English underneath. */
body:has(#lang-es:checked) .vp [lang="es"] { order: 0; font-size: 1em; font-weight: 600; font-style: normal; color: var(--ink); opacity: 1; margin: 0; }
body:has(#lang-es:checked) .vp [lang="en"] { order: 2; font-size: 0.6em; font-weight: 400; font-style: italic; color: var(--cocoa); opacity: 0.8; margin-top: 0.3rem; }

/* a wider page on a computer, so the hero and the cards can breathe */
.home .wrap-wide { max-width: 58rem; }
.home .try-lead, .home .contact .bi { max-width: 40rem; }
.home .try-lead { color: var(--muted); }
.home h2 { margin: 5rem 0 1rem; }

/* the hero: no banner (the header already says Diana teaches), the two
   calls to action right under the offer */
.home .hero { align-items: center; margin: 1.5rem 0 0; }
.home .vp { font-size: clamp(1.9rem, 4.2vw, 2.6rem); line-height: 1.15; }
.home .vp-interp { margin-top: 1.25rem; font-size: 1.15rem; }
.hero-ctas { display: flex; flex-wrap: wrap; max-width: none; gap: 0.7rem; margin: 1.75rem 0 0; }
.hero-ctas a { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1.3rem; }

/* Each card ends in a button, not a link: a button reads as something you
   can tap, where a line of text may not. */
.home .hero-offer { margin-top: 4rem; gap: 1.4rem; }
.home .hero-offer article { gap: 0.8rem; padding: 1.5rem 1.6rem; }
.card-link { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 1.2rem; font-weight: 600; text-decoration: none; }

/* About me: the short version on show, the five stops behind "Read my story" */
.home .about .story-hook { margin: 2rem 0 0.75rem; max-width: 36rem; }
details.story-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 600; color: var(--sky); padding: 0.55rem 1.1rem; border: 1.5px solid var(--sky); border-radius: 999px; }
details.story-more summary::-webkit-details-marker { display: none; }
details.story-more summary::after { content: "↓"; transition: transform 0.15s; }
details.story-more[open] summary::after { transform: rotate(180deg); }
details.story-more summary:hover { background: var(--sky-soft); }
.route { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cocoa); margin: 0 0 0.25rem; }
.story-more .story-text { margin-top: 1.5rem; }

@media (max-width: 40rem) {
  .home .hero { margin-top: 0.5rem; }
  /* phones: with the banner gone, a smaller llama and board under the buttons */
  .home .board-scene { display: block; width: 11rem; justify-self: center; margin: 0.5rem 0 -1.5rem; }
  .home .board { height: 7rem; margin-bottom: -4rem; border-width: 7px; }
  .home .chalk { font-size: 1.45rem; left: 0.7rem; top: 0.7rem; }
  .home .chalk-line { top: 2.5rem; left: 0.8rem; width: 4.8rem; }
  .home .hero-llama { width: 6.5rem; }
  .hero-ctas a { width: 100%; justify-content: space-between; box-sizing: border-box; }
  .home .hero-offer { margin-top: 3rem; }
  .home h2 { margin-top: 3.75rem; }
  /* the header is one line, whatever the phone: nothing wraps, and the
     three pieces shrink instead */
  .home .site-header, .home .header-right { gap: 0.4rem; }
  .home .btn-signin { padding: 0.45rem 0.85rem; font-size: 0.9rem; white-space: nowrap; }
  .home .lang-switch label { padding: 0.25rem 0.55rem; font-size: 0.75rem; }
  .home .brand img { width: 26px; height: 26px; }
  .home .card-link { width: 100%; justify-content: space-between; box-sizing: border-box; }
}