/* =====================================================================
   SIMONA HAMER — PREMIUM DESIGN LAYER  (v2)
   Editorial / cinematic upgrade. Loads ON TOP of the theme's main.css.
   Palette unchanged: white paper · black ink · grass green.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Spectral:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap");

:root{
  --grain: 0.025;
  --ease: cubic-bezier(.22,1,.36,1);
  --ink: #0E0F0E;
  --paper: #FAFAF7;          /* warm paper, not clinical white */
  --grass: #2F8F2A;
  --grass-deep: #246E20;
  --grass-tint: #EEF4EA;
  --hair: #E6E7E1;
  --soft: #565A53;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Spectral", Georgia, serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --nav-h: 70px;
}

/* warm the page + smoother rendering */
body{
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* subtle film grain over the whole site for tactile, premium feel */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity: var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){ body::after{ display:none; } }

/* ---------------------------------------------------------------
   TYPE — bigger, tighter, more expressive (2026 editorial)
   --------------------------------------------------------------- */
.hero h1,
.page-hero h1{
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.92;
}
.hero h1{ font-size: clamp(3.4rem, 11vw, 9rem); }

/* optical kerning + ligatures everywhere it matters */
.hero h1, .page-hero h1, .scene__head h2, .work__title, .shelf__body h3{
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-optical-sizing: auto;
}

/* refined eyebrow with a leading tick */
.slug{ position:relative; }

/* ---------------------------------------------------------------
   NAV — glassy, refined, with a hairline that appears on scroll
   --------------------------------------------------------------- */
.nav{
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.nav.is-scrolled{
  border-bottom-color: var(--hair);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}
.nav__logo{ letter-spacing:-0.02em; }
.nav__links a{ transition: color .25s var(--ease); }

/* ---------------------------------------------------------------
   CINEMATIC HERO  (theme front-page hero)
   Full-bleed feel via a soft vignette + slow zoom on the portrait.
   --------------------------------------------------------------- */
.hero{ position:relative; }
.hero__figure{ overflow:hidden; }
.hero__figure img{
  filter: grayscale(1) contrast(1.06) brightness(.98);
  transform: scale(1.04);
  transition: transform 1.6s var(--ease), filter .8s var(--ease);
}
.hero__figure:hover img{ filter: grayscale(0) contrast(1.02); transform: scale(1); }
.hero__figure::after{
  /* duotone-ish green wash + bottom vignette */
  background:
    linear-gradient(180deg, transparent 55%, rgba(14,15,14,.28) 100%),
    rgba(47,143,42,.16);
  mix-blend-mode: normal;
}
.hero__rule{ background: linear-gradient(90deg, var(--grass), transparent); }

/* big faint folio numeral behind hero, editorial signature */
.hero::before{
  content:"";
  position:absolute; right:-2vw; top:8%;
  width: 42vw; height: 42vw; max-width:560px; max-height:560px;
  background: radial-gradient(circle at 50% 50%, var(--grass-tint), transparent 62%);
  z-index:-1; pointer-events:none;
}

/* ---------------------------------------------------------------
   SECTION HEADS — oversized index numerals, magazine style
   --------------------------------------------------------------- */
.scene__head{ position:relative; }
.scene__head-left .slug{
  display:inline-flex; align-items:center; gap:.7rem;
}
.scene__head-left .slug::before{
  content:""; width:26px; height:1px; background: var(--grass);
  display:inline-block;
}
.scene__head h2{ letter-spacing:-0.03em; }

/* ---------------------------------------------------------------
   WORK LIST — editorial rows with hover image-peek + arrow
   --------------------------------------------------------------- */
.work{
  align-items:center;
  transition: background .4s var(--ease), padding .4s var(--ease);
}
.work::after{
  content:"→";
  position:absolute; right:.2rem; top:50%; transform:translateY(-50%) translateX(-8px);
  font-family: var(--font-body); color: var(--grass);
  opacity:0; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
a.work:hover{ background: linear-gradient(90deg, var(--grass-tint), transparent 70%); padding-left:1.2rem; }
a.work:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); }
.work__title{ transition: color .25s var(--ease); }
a.work:hover .work__title{ color: var(--grass-deep); }
.work__tag{ border-radius: 100px; transition: background .25s var(--ease), color .25s var(--ease); }
a.work:hover .work__tag{ background: var(--grass); color:#fff; border-color:var(--grass); }

/* ---------------------------------------------------------------
   SHELVES / CARDS — premium hover lift, image zoom, fine border
   --------------------------------------------------------------- */
.shelf{
  border-radius: 4px; overflow:hidden;
  box-shadow: 0 1px 0 rgba(14,15,14,.03);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.shelf:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -28px rgba(14,15,14,.45);
}
.shelf__img{ overflow:hidden; }
.shelf__img img{
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
  filter: grayscale(1) contrast(1.05);
}
.shelf:hover .shelf__img img{ transform: scale(1.06); filter: grayscale(0); }

/* ---------------------------------------------------------------
   EVENTS — refined date chips
   --------------------------------------------------------------- */
.event{ transition: background .35s var(--ease); border-radius:4px; }
.event:hover{ background: linear-gradient(90deg,var(--grass-tint),transparent 75%); }
.event__date{ border-radius:3px; transition: transform .35s var(--ease); }
.event:hover .event__date{ transform: translateY(-2px); }

/* ---------------------------------------------------------------
   BUTTONS — quiet luxury: underline-reveal + crisp solid
   --------------------------------------------------------------- */
.btn{ border-radius: 2px; position:relative; overflow:hidden; isolation:isolate; }
.btn--solid::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: var(--grass); transform: translateY(101%);
  transition: transform .4s var(--ease);
}
.btn--solid:hover::before{ transform: translateY(0); }
.btn--ghost::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: var(--grass-tint); transform: scaleX(0); transform-origin:left;
  transition: transform .4s var(--ease);
}
.btn--ghost:hover::before{ transform: scaleX(1); }

/* ---------------------------------------------------------------
   FINALE / FOOTER — deeper, with oversized closing word
   --------------------------------------------------------------- */
.finale{ background: #0B0C0B; }
.finale h2{ letter-spacing:-0.03em; }
.finale h2 a{ transition: color .3s var(--ease); }

/* ---------------------------------------------------------------
   SCROLL REVEAL — the premium "rise as you scroll" choreography
   Applied by premium.js to sections, headings, rows, cards.
   --------------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal].d1{ transition-delay:.06s; }
[data-reveal].d2{ transition-delay:.12s; }
[data-reveal].d3{ transition-delay:.18s; }
[data-reveal].d4{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* line-by-line hero reveal */
.hero h1 .line{ overflow:hidden; }
.hero h1 .line > span{
  display:block; transform: translateY(110%);
  transition: transform 1s var(--ease);
}
.hero.is-ready h1 .line > span{ transform: translateY(0); }
.hero.is-ready h1 .line:nth-child(2) > span{ transition-delay:.08s; }
.hero.is-ready h1 .line:nth-child(3) > span{ transition-delay:.16s; }

/* ---------------------------------------------------------------
   CUSTOM CURSOR DOT (desktop, fine pointer only) — subtle agency touch
   --------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .sh-cursor{
    position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
    background: var(--grass); z-index:10000; pointer-events:none;
    transform: translate(-50%,-50%); mix-blend-mode: multiply;
    transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
  }
  .sh-cursor.is-hovering{ width:46px; height:46px; background: color-mix(in srgb, var(--grass) 30%, transparent); }
}

/* ---------------------------------------------------------------
   MOBILE polish — keep the premium feel on phones
   --------------------------------------------------------------- */
@media (max-width:880px){
  .hero::before{ width:70vw; height:70vw; top:auto; bottom:-10%; right:-20%; }
  .hero h1{ font-size: clamp(2.8rem, 15vw, 4.4rem); }
}

/* ---------------------------------------------------------------
   v4 — prose thumbnails in work rows + richer shelf covers
   --------------------------------------------------------------- */
.work--has-thumb{ grid-template-columns: 64px 4.5rem 1fr auto; gap:1.1rem; }
@media (max-width:640px){
  .work--has-thumb{ grid-template-columns: 56px 1fr auto; grid-template-areas:"thumb year tag" "thumb title title"; }
  .work__thumbwrap{ grid-area: thumb; }
}
.work__thumbwrap{ display:block; }
.work__thumb{
  width:64px; height:auto; border-radius:2px;
  filter: grayscale(1) contrast(1.04);
  transition: filter .4s var(--ease), transform .4s var(--ease);
  box-shadow: 0 6px 16px -10px rgba(14,15,14,.5);
}
a.work:hover .work__thumb{ filter:grayscale(0); transform: translateY(-2px); }

/* prose shelves: real cover images sit beautifully */
.shelf__img{ background: var(--grass-tint); aspect-ratio: auto; }
.shelf__img img{ width:100%; height:auto; display:block; }

/* =====================================================================
   v7 — THE WORK PAGE AS A PLAYSCRIPT  (.shw)
   Concept: a dramaturge's prompt-book. Scene-heading band, title page
   with ONE cover, a margin rail of metadata, typeset "script" body,
   and Enter/Exit stage-direction navigation.
   ===================================================================== */

.shw-single .entry-header,
.shw-single .page-header,
.shw-single .entry-title:not(.shw__title){ display:none !important; }

.shw{
  --rail: 220px;
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(var(--nav-h, 70px) + 2.4rem) clamp(1.2rem, 4vw, 3rem) 6rem;
}

/* ---------- SCENE HEADING BAND ---------- */
.shw__slug{
  display:flex; align-items:center; gap:.85rem;
  font-family: var(--font-mono);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  padding-bottom:1.1rem; margin-bottom: clamp(2rem,5vw,3.4rem);
  border-bottom:1px solid var(--ink);
}
.shw__slug-link{ color: var(--ink); text-decoration:none; transition:color .2s var(--ease); }
.shw__slug-link:hover{ color: var(--grass-deep); }
.shw__slug-sep{ color: var(--grass); }
.shw__slug-spacer{ flex:1; }
.shw__slug-year{ color: var(--grass-deep); }

/* ---------- TITLE PAGE ---------- */
.shw__titlepage{
  display:grid;
  grid-template-columns: 1fr clamp(220px, 30%, 340px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items:center;
  margin-bottom: clamp(2.6rem, 6vw, 4.4rem);
}
.shw__titletext{ min-width:0; }
.shw__title{
  font-family: var(--font-display);
  font-weight:600; letter-spacing:-0.04em; line-height:0.92;
  font-size: clamp(3rem, 8vw, 6.4rem);
  margin:0;
  /* a touch of optical drama: the title hangs slightly into the margin */
  margin-left: -0.04em;
}
.shw__form{
  font-family: var(--font-mono);
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--soft);
  margin:1.1rem 0 0;
}
.shw__award{
  display:inline-block; margin:1.2rem 0 0;
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--grass-deep); border:1px solid var(--grass); border-radius:100px; padding:.4rem .9rem;
}
.shw__cta-wrap{ margin-top:1.8rem; }
.shw__cta{
  display:inline-flex; align-items:center; gap:.8rem;
  font-family: var(--font-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color: var(--paper);
  background: var(--ink); padding:1rem 1.5rem; border-radius:2px;
  position:relative; overflow:hidden; isolation:isolate;
  transition: color .3s var(--ease);
}
.shw__cta i{ font-style:normal; transition: transform .3s var(--ease); }
.shw__cta::before{
  content:""; position:absolute; inset:0; z-index:-1; background: var(--grass);
  transform: translateX(-101%); transition: transform .35s var(--ease);
}
.shw__cta:hover::before{ transform: translateX(0); }
.shw__cta:hover i{ transform: translateX(5px); }

/* the single cover — framed like a poster on a wall, with a slight tilt */
.shw__cover{
  margin:0; position:relative;
  transform: rotate(-1.4deg);
  transition: transform .5s var(--ease);
}
.shw__cover img{
  width:100%; height:auto; display:block; border-radius:3px;
  box-shadow: 0 34px 70px -34px rgba(14,15,14,.6);
}
.shw__cover::before{
  /* green passe-partout frame peeking behind */
  content:""; position:absolute; inset:-10px -10px -10px -10px;
  border:1px solid var(--grass); border-radius:5px; z-index:-1;
  transform: rotate(2.4deg); opacity:.5;
  transition: transform .5s var(--ease);
}
.shw__cover:hover{ transform: rotate(0deg); }
.shw__cover:hover::before{ transform: rotate(0deg); }
.shw__cover.is-placeholder img{ filter: grayscale(1) contrast(1.04); opacity:.92; }
.shw__cover figcaption{
  position:absolute; left:8px; bottom:8px;
  font-family: var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background: rgba(14,15,14,.62); padding:.3rem .5rem; border-radius:2px;
}

/* ---------- THE SCRIPT BODY (prompt-book) ---------- */
.shw__page{
  display:grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items:start;
  border-top:1px solid var(--hair);
  padding-top: clamp(2.2rem, 5vw, 3.4rem);
}
.shw__margin{
  position: sticky; top: calc(var(--nav-h, 70px) + 1.4rem);
  display:flex; flex-direction:column; gap:1.1rem;
  font-family: var(--font-mono);
}
.shw__margin-label{
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--grass-deep); padding-bottom:.6rem; border-bottom:1px solid var(--hair);
}
.shw__margin-item{
  display:flex; flex-direction:column; gap:.2rem;
  font-size:.82rem; color: var(--ink);
}
.shw__margin-item b{
  font-weight:400; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color: var(--soft);
}

/* the description, set like a literary script page */
.shw__body{ max-width: 60ch; }
.shw__body > p:first-of-type{
  font-family: var(--font-display);
  font-weight:420; font-style:normal;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height:1.42; letter-spacing:-0.015em;
  color: var(--ink); margin:0 0 1.6rem;
}
.shw__body > p:first-of-type::first-letter{
  font-family: var(--font-display); font-weight:600;
  float:left; font-size:5rem; line-height:.74; color: var(--grass);
  padding:.42rem .55rem 0 0;
}
.shw__body p{
  font-family: var(--font-body);
  font-size: 1.13rem; line-height:1.72; color: var(--ink); margin:0 0 1.3rem;
}
.shw__body strong{ font-weight:600; }
/* review quotes as dialogue-style pull-quotes with a speaker rule */
.shw__body blockquote{
  margin: 2.2rem 0; padding:1.4rem 0 1.4rem 1.8rem;
  border-left:3px solid var(--grass);
  font-family: var(--font-display); font-style:italic; font-weight:400;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height:1.4; letter-spacing:-0.01em;
  color: var(--ink);
}
.shw__body blockquote + blockquote{ margin-top:1.2rem; }

/* ---------- ENTER / EXIT CUES ---------- */
.shw__cues{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  gap:1.5rem;
  margin-top: clamp(3.4rem, 7vw, 5.5rem);
  padding-top: 1.8rem; border-top:1px solid var(--ink);
}
.shw__cue{ text-decoration:none; display:flex; flex-direction:column; gap:.35rem; max-width: 26ch; }
.shw__cue--enter{ text-align:right; align-items:flex-end; }
.shw__cue-dir{
  font-family: var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--grass-deep);
}
.shw__cue-title{
  font-family: var(--font-display); font-weight:560; font-size:1.25rem; letter-spacing:-0.015em;
  color: var(--ink); line-height:1.1; transition: color .2s var(--ease);
}
.shw__cue:hover .shw__cue-title{ color: var(--grass-deep); }
.shw__cue-up{
  font-family: var(--font-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color: var(--soft);
  border:1px solid var(--hair); border-radius:100px; padding:.6rem 1.1rem; white-space:nowrap;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.shw__cue-up:hover{ border-color: var(--grass); color: var(--grass-deep); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .shw__titlepage{ grid-template-columns:1fr; gap:2.2rem; }
  .shw__cover{ max-width:260px; transform: rotate(-1.4deg); order:-1; }
  .shw__page{ grid-template-columns:1fr; }
  .shw__margin{
    position:static; flex-direction:row; flex-wrap:wrap; gap:1.2rem 2rem;
    padding-bottom:1.4rem; margin-bottom:.4rem; border-bottom:1px solid var(--hair);
  }
  .shw__margin-label{ width:100%; border:0; padding:0; }
}
@media (max-width: 560px){
  .shw__cues{ grid-template-columns:1fr; gap:1.4rem; text-align:left; }
  .shw__cue--enter{ text-align:left; align-items:flex-start; }
  .shw__cue-up{ justify-self:start; order:3; }
}

/* =====================================================================
   v8 — single-work template is full-bleed, theme chrome neutralised
   ===================================================================== */
.shw-wrap{
  width:100%;
  /* break out of any theme container that wraps the_content */
  margin:0; padding:0;
}
/* Some themes still wrap main in a max-width container; force ours wide. */
.shw-single .site-main,
.shw-single .content-area,
.shw-single #primary,
.shw-single #content,
.shw-single .entry-content{
  max-width:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
}
.shw-single .sidebar,
.shw-single #secondary,
.shw-single .widget-area{ display:none !important; }

/* =====================================================================
   v9 — single-work hardening (works even with stubborn theme resets)
   ===================================================================== */
.shw, .shw *{ box-sizing:border-box; }
.shw__margin-item{ display:flex !important; flex-direction:column; gap:.2rem; }
.shw__margin-item b{ display:block; }
.shw__cover{ max-width:340px; }                 /* never full-bleed huge */
@media (min-width:901px){ .shw__cover{ width:100%; } }
.shw__cues{ flex-wrap:wrap; }
/* ensure body font applies even if theme sets a global serif/min on article */
.shw__body p, .shw__body blockquote{ font-family: var(--font-body); }
.shw__title{ font-family: var(--font-display); }

/* =====================================================================
   v10 — uniform card imagery (shelves + segment cards)
   ===================================================================== */
/* shelf images: consistent height, graceful placeholder */
.shelf__img{
  position:relative; overflow:hidden;
  aspect-ratio: 3 / 2;            /* uniform across all shelves */
  background: var(--grass-tint);
}
.shelf__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: grayscale(1) contrast(1.04);
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
}
.shelf:hover .shelf__img img{ transform: scale(1.05); filter: grayscale(0); }

/* segment cards (Elementor inner columns): image on top, grayscale-to-color */
.elementor-widget-image img{ transition: filter .5s var(--ease), transform .6s var(--ease); }
/* target the seg-card images we injected: they sit above an "Explore" button column */
.elementor-column .elementor-widget-image img{ display:block; width:100%; }

/* Give segment-card images a uniform cinematic crop + hover */
.elementor-widget-image:has(+ .elementor-widget-heading) img,
.elementor-inner-column .elementor-widget-image img{
  aspect-ratio: 3 / 2; object-fit:cover; border-radius:3px;
  filter: grayscale(1) contrast(1.04);
}
.elementor-inner-column:hover .elementor-widget-image img{ filter: grayscale(0); transform: scale(1.02); }

/* =====================================================================
   v11 — FINAL: complete self-sufficient component styles + polish
   The plugin no longer depends on the theme's CSS for any component
   it renders. Playscript vernacular throughout.
   ===================================================================== */

/* ---------- global final polish ---------- */
::selection{ background: var(--grass); color:#fff; }
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--grass); outline-offset:3px; border-radius:2px;
}
.sh-empty{
  font-family: var(--font-mono); font-size:.8rem; letter-spacing:.06em;
  color: var(--soft); border:1px dashed var(--hair); border-radius:3px;
  padding:1.2rem 1.4rem;
}
.footnote{
  font-family: var(--font-mono); font-size:.72rem; color: var(--soft);
  margin-top:1.1rem;
}
.footnote b{ color: var(--grass-deep); }

/* ---------- WORK LIST (plays & prose index) — script cast-list rows ---------- */
.worklist{ list-style:none; margin:0; padding:0; }
.worklist > li{ border-bottom:1px solid var(--hair); }
.worklist > li:first-child{ border-top:1px solid var(--hair); }
.work{
  position:relative;
  display:grid;
  grid-template-columns: 4.5rem minmax(0,1fr) auto;
  gap:1.2rem; align-items:center;
  padding:1.15rem .4rem;
  text-decoration:none; color: var(--ink);
}
.work__year{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em;
  color: var(--grass-deep);
}
.work__title{
  font-family: var(--font-display); font-weight:560;
  font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing:-0.015em; line-height:1.15;
  display:flex; flex-direction:column; gap:.25rem; min-width:0;
}
.work__title sup{ color: var(--grass); font-size:.6em; }
.work__note{
  font-family: var(--font-body); font-weight:400;
  font-size:.92rem; line-height:1.45; color: var(--soft); letter-spacing:0;
}
.work__tag{
  font-family: var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink); border:1px solid var(--hair); border-radius:100px;
  padding:.42rem .85rem; white-space:nowrap;
}
@media (max-width:640px){
  .work{ grid-template-columns: 1fr auto; }
  .work__year{ grid-column:1; order:0; }
  .work__tag{ grid-column:2; grid-row:1; }
  .work__title{ grid-column:1 / -1; }
}

/* ---------- PROSE SHELVES grid ---------- */
.shelves{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
@media (max-width:900px){ .shelves{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .shelves{ grid-template-columns:1fr; } }
.shelf{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--hair);
}
.shelf__body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.shelf__body h3{
  font-family: var(--font-display); font-weight:600; letter-spacing:-0.02em;
  font-size:1.35rem; margin:0;
}
.shelf__body p{
  font-family: var(--font-body); font-size:.94rem; line-height:1.55; color: var(--soft); margin:0;
}
.more{
  margin-top:auto; align-self:flex-start;
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--grass-deep); text-decoration:none;
  padding-bottom:.15rem; border-bottom:1px solid var(--grass);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.more:hover{ color: var(--ink); border-color: var(--ink); }

/* ---------- COURSES — programme cards ---------- */
.courses{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
@media (max-width:760px){ .courses{ grid-template-columns:1fr; } }
.course{
  background:#fff; border:1px solid var(--hair); border-top:3px solid var(--grass);
  padding:1.5rem 1.6rem 1.6rem;
  display:flex; flex-direction:column; gap:.7rem;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.course:hover{ transform: translateY(-4px); box-shadow: 0 20px 42px -30px rgba(14,15,14,.4); }
.course__meta{
  font-family: var(--font-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--grass-deep);
}
.course h3{
  font-family: var(--font-display); font-weight:600; letter-spacing:-0.02em;
  font-size:1.45rem; margin:0; line-height:1.1;
}
.course p{
  font-family: var(--font-body); font-size:.97rem; line-height:1.6; color: var(--soft); margin:0;
}

/* ---------- EVENTS — call-sheet rows ---------- */
.events{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.events > li{ border-bottom:1px solid var(--hair); }
.events > li:first-child{ border-top:1px solid var(--hair); }
.event{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto;
  gap:1.3rem; align-items:center; padding:1.15rem .4rem;
}
.event__date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:64px; height:64px; background: var(--ink); color:#fff; border-radius:3px;
}
.event__date .d{ font-family: var(--font-display); font-weight:600; font-size:1.5rem; line-height:1; }
.event__date .m{ font-family: var(--font-mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; margin-top:.25rem; color:#9FE08C; }
.event__body{ min-width:0; display:flex; flex-direction:column; gap:.3rem; }
.event__kind{
  font-family: var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--grass-deep);
}
.event__body h3{
  font-family: var(--font-display); font-weight:560; letter-spacing:-0.015em;
  font-size:1.25rem; margin:0; line-height:1.15;
}
.event__body p{
  font-family: var(--font-body); font-size:.92rem; line-height:1.5; color: var(--soft); margin:0;
}
.btn--small{ font-size:.62rem !important; padding:.7rem 1.1rem !important; }
.btn--ghost{
  font-family: var(--font-mono); letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color: var(--ink); border:1px solid var(--ink); border-radius:2px; padding:.85rem 1.3rem;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.btn--ghost:hover{ border-color: var(--grass); color: var(--grass-deep); }
@media (max-width:600px){
  .event{ grid-template-columns:56px 1fr; }
  .event .btn--ghost{ grid-column:2; justify-self:start; }
  .event__date{ width:56px; height:56px; }
}

/* ---------- NEWS / announcement cards ---------- */
.post-card{
  padding:1.35rem 0; border-bottom:1px solid var(--hair);
  display:flex; flex-direction:column; gap:.4rem;
}
.post-card:first-of-type{ border-top:1px solid var(--hair); }
.post-card__meta{
  font-family: var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--grass-deep);
}
.post-card h3{ margin:0; line-height:1.15; }
.post-card h3 a{
  font-family: var(--font-display); font-weight:560; letter-spacing:-0.015em;
  font-size:1.3rem; color: var(--ink); text-decoration:none;
  transition: color .2s var(--ease);
}
.post-card h3 a:hover{ color: var(--grass-deep); }
.post-card p{
  font-family: var(--font-body); font-size:.95rem; line-height:1.55; color: var(--soft); margin:0;
}

/* ---------- final mobile hero + section rhythm ---------- */
@media (max-width:640px){
  .shw__title{ font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .shw__cover{ max-width:230px; }
}

/* =====================================================================
   v11.3 — homepage card imagery + hero proportion
   ===================================================================== */
/* course cards: image header */
.course{ padding:0; overflow:hidden; }
.course__img{
  position:relative; aspect-ratio: 5 / 2; overflow:hidden; background: var(--grass-tint);
}
.course__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: grayscale(1) contrast(1.04);
  transition: transform 1s var(--ease), filter .5s var(--ease);
}
.course:hover .course__img img{ transform: scale(1.04); filter: grayscale(0); }
.course__body{ padding:1.3rem 1.6rem 1.6rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }


/* =====================================================================
   v12.1 — Elementor header & footer templates, styled to match the
   original theme design EXACTLY (fixed glassy nav with underline-grow
   links; ink finale with green-bracket direction, Fraunces address,
   slug + mono links). Widgets stay fully editable in Elementor.
   ===================================================================== */
.shc-elnav{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}
.shc-elnav .elementor-container{ max-width: 1200px; min-height: var(--nav-h, 4.25rem); align-items: center; }
.shc-elnav .elementor-widget-container p{ margin: 0; }
.elnav-logo .elementor-heading-title{
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em;
}
.elnav-logo .elementor-heading-title a{ color: var(--ink); text-decoration: none; }
.elnav-logo em{ font-style: italic; color: var(--grass-deep); }
@media (max-width:760px){
    }

.shc-elfooter{
  background: var(--ink); color: #fff;
  padding: clamp(3.5rem, 8vw, 6rem) 0 2.2rem;
}
.shc-elfooter .elementor-container{ max-width: 1200px; }
.shc-elfooter .elementor-widget-container p{ margin: 0; }
.elftr-direction p{ font-family: var(--font-body); font-style: italic; color: #B9C2B7; }
.elftr-direction p::before{ content:"[ "; color: var(--grass); font-style: normal; }
.elftr-direction p::after{ content:" ]"; color: var(--grass); font-style: normal; }
.elftr-heading .elementor-heading-title{
  font-family: var(--font-display); font-weight: 520; color: #fff;
  font-size: clamp(1.8rem, 4.8vw, 3.4rem); letter-spacing: -0.02em;
  line-height: 1.12; max-width: 20ch; margin: 1.1rem 0 1.8rem;
}
.elftr-heading a{
  color: var(--grass); text-decoration: none; font-style: italic;
  border-bottom: 2px solid transparent; transition: border-color .2s ease;
  overflow-wrap: anywhere;
}
.elftr-heading a:hover{ border-color: var(--grass); }
.elftr-grid > .elementor-container{
  border-top: 1px solid #2A2E2A; padding-top: 2rem; margin-top: 3rem; align-items: flex-end;
}
.elftr-brand p:first-child{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: #7FB36F;
}
.elftr-brand p + p{
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: #8B928A; margin-top: .3rem;
}
.elftr-links p{ display: flex; gap: 1.5rem; justify-content: flex-end; flex-wrap: wrap; }
.elftr-links a{
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: #D7DCD5; padding: .4rem 0; display: inline-block;
  transition: color .2s ease;
}
.elftr-links a:hover{ color: var(--grass); }
@media (max-width:760px){
  .elftr-links p{ justify-content: flex-start; }
}

/* =====================================================================
   v12.2 — real navigation inside the Elementor header: dropdown submenus
   (Plays, Prose) with the green marker, plus the mobile slide-in panel.
   Markup comes from [sh_nav], so the menu stays editable in
   Appearance -> Menus while the design is applied here.
   ===================================================================== */
.shc-elnav .elnav-menu .elementor-widget-container{
  display: flex; align-items: center; justify-content: flex-end;
}
.shc-elnav nav{ display: block; }

/* ---- top level ---- */
.shc-elnav .nav__links{
  display: flex; gap: 1.9rem; list-style: none; margin: 0; padding: 0;
}
.shc-elnav .nav__links li{ position: relative; }
.shc-elnav .nav__links a{
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding: .35rem 0; position: relative; display: inline-block;
}
.shc-elnav .nav__links a::after{
  content:""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--grass);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.shc-elnav .nav__links a:hover::after,
.shc-elnav .nav__links .current-menu-item > a::after{ transform: scaleX(1); }
.shc-elnav .nav__links .current-menu-item > a{ color: var(--grass-deep); }
@media (max-width:1024px){ .shc-elnav .nav__links{ gap: 1.35rem; } }

/* the green marker on items that open a dropdown */
.shc-elnav .nav__links li.menu-item-has-children > a::before{
  content:"\25BE"; font-size:.6rem; margin-right:.4rem; color: var(--grass);
}

/* ---- dropdown ---- */
.shc-elnav .nav__links .sub-menu{
  list-style: none; margin: 0;
  position: absolute; top: 100%; left: -1.1rem;
  min-width: 13rem;
  background: #fff;
  border: 1px solid var(--hair);
  border-top: 2px solid var(--grass);
  padding: .4rem 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.shc-elnav .nav__links li:hover > .sub-menu,
.shc-elnav .nav__links li:focus-within > .sub-menu{
  opacity: 1; visibility: visible; transform: translateY(0);
}
.shc-elnav .nav__links .sub-menu a{
  display: block; padding: .6rem 1.1rem; letter-spacing: .14em;
}
.shc-elnav .nav__links .sub-menu a::after{ display: none; }
.shc-elnav .nav__links .sub-menu a:hover{ color: var(--grass-deep); background: var(--grass-tint); }

/* ---- burger ---- */
.shc-elnav .nav__toggle{
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; margin-right: -10px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  position: relative; z-index: 60;
}
.shc-elnav .nav__toggle span{
  display: block; width: 24px; height: 2px; background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.shc-elnav .nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.shc-elnav .nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.shc-elnav .nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---- mobile panel ---- */
@media (max-width: 880px){
  /* margin-left:auto pins the burger to the right edge */
  .shc-elnav .nav__toggle{ display: flex; margin-left: auto; }
  .shc-elnav .nav__links{
    position: fixed; inset: 0; z-index: 40;
    background: var(--paper);
    flex-direction: column; justify-content: flex-start; align-items: flex-start;
    gap: 0;
    padding-top:    calc(var(--nav-h, 4.25rem) + 1.25rem);
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    padding-left:   max(22px, env(safe-area-inset-left));
    padding-right:  max(22px, env(safe-area-inset-right));
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(.2,.7,.3,1);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .shc-elnav .nav__links.open{ transform: translateX(0); }
  .shc-elnav .nav__links > li{ width: 100%; border-bottom: 1px solid var(--hair); }
  .shc-elnav .nav__links > li:first-child{ border-top: 1px solid var(--hair); }
  .shc-elnav .nav__links > li > a{
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 56px; padding: .9rem 0;
    font-size: .95rem; letter-spacing: .14em;
  }
  .shc-elnav .nav__links > li > a[data-n]::before{
    content: attr(data-n); font-size: .65rem; color: var(--grass-deep);
    order: 2; margin: 0;
  }
  .shc-elnav .nav__links li.menu-item-has-children > a::before{ content: attr(data-n); }
  .shc-elnav .nav__links a::after{ display: none; }

  .shc-elnav .nav__links .sub-menu{
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; background: none; padding: 0 0 .4rem 1.2rem; min-width: 0; width: 100%;
  }
  .shc-elnav .nav__links .sub-menu li{ border: 0 !important; width: 100%; }
  .shc-elnav .nav__links .sub-menu a{
    display: flex; align-items: center;
    min-height: 44px; padding: .45rem 0; font-size: .82rem;
  }
  .shc-elnav .nav__links .sub-menu a::before{
    content:"\2014"; color: var(--grass); margin-right: .5rem;
  }
  .shc-elnav .nav__links .sub-menu a:hover{ background: none; }
}
body.menu-open{ overflow: hidden; }

/* =====================================================================
   v12.3 — homepage "who's speaking" strip (portrait + short bio + link)
   ===================================================================== */
.sh-about-portrait img{
  width: 100%; height: auto; display: block;
  border: 1px solid var(--hair);
  filter: grayscale(1) contrast(1.03);
  transition: filter .6s var(--ease);
}
.sh-about-portrait:hover img{ filter: grayscale(0); }

.sh-about-more a,
a.sh-about-more{
  color: var(--grass-deep); text-decoration: none;
  border-bottom: 1px solid var(--grass);
  padding-bottom: .2rem;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.sh-about-more a:hover,
a.sh-about-more:hover{ color: var(--ink); border-color: var(--ink); }

/* shortcode fallback version (no Elementor) */
.sh-aboutstrip{
  display: grid; grid-template-columns: 300px minmax(0,1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  background: #F2F4EF; padding: clamp(1.8rem, 4vw, 3rem);
  margin: 2.5rem 0;
}
.sh-aboutstrip img{
  width: 100%; height: auto; display: block;
  border: 1px solid var(--hair); filter: grayscale(1) contrast(1.03);
}
.sh-aboutstrip__eyebrow{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--grass-deep); margin: 0 0 .6rem;
}
.sh-aboutstrip h2{
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 .8rem;
}
.sh-aboutstrip p{
  font-family: var(--font-body); font-size: 1rem; line-height: 1.7;
  color: #3A3E38; margin: 0 0 1rem;
}
.sh-aboutstrip a.sh-about-more{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase;
}
@media (max-width: 760px){
  .sh-aboutstrip{ grid-template-columns: 1fr; text-align: center; }
  .sh-aboutstrip img{ max-width: 260px; margin: 0 auto; }
}

/* =====================================================================
   v12.4 — About page: title page, bio, and the awards call sheet
   ===================================================================== */

/* small-caps surname in the bio opening */
.sh-sc{ font-variant: small-caps; letter-spacing: .04em; }

/* bio body — script-page measure, drop cap on the opening paragraph */
.sh-bio p{ max-width: 62ch; }
.sh-bio p:first-of-type::first-letter{
  float: left; font-family: var(--font-display); font-weight: 600;
  font-size: 3.4em; line-height: .84; margin: .06em .12em 0 0; color: var(--grass-deep);
}
.sh-bio p + p{ margin-top: 1.1rem; }

/* fallback-only headings (no Elementor) */
.sh-eyebrow{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--grass-deep); margin: 0 0 .8rem;
}
.sh-juggler{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 4rem); letter-spacing: -0.03em;
  margin: 0 0 .6rem; line-height: 1;
}
.sh-roles{
  font-family: var(--font-body); font-style: italic;
  font-size: 1.15rem; color: var(--grass); margin: 0 0 2rem;
}
.sh-bio-portrait{
  float: right; width: 300px; max-width: 40%; height: auto;
  margin: 0 0 1.5rem 2rem; border: 1px solid var(--hair);
  filter: grayscale(1) contrast(1.03);
}
.sh-credit{
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--soft); clear: right; text-align: right;
}
@media (max-width: 700px){
  .sh-bio-portrait{ float: none; width: 100%; max-width: 260px; margin: 0 auto 1rem; display: block; }
  .sh-credit{ text-align: center; }
}

/* ---------- awards call sheet ---------- */
.awards{ list-style: none; margin: 0; padding: 0; }
.award{
  display: grid; grid-template-columns: 5.5rem minmax(0,1fr);
  gap: 1.6rem; align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hair);
}
.award:first-child{ border-top: 1px solid var(--hair); }
.award__year{
  font-family: var(--font-mono); font-size: .95rem; font-weight: 700;
  letter-spacing: .04em; color: var(--grass-deep);
}
.award__body{ display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.award__name{
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--soft); line-height: 1.5;
}
.award__name em{ font-style: italic; text-transform: none; letter-spacing: .06em; }
.award__work{
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem); letter-spacing: -0.015em;
  color: var(--ink); line-height: 1.25;
}
/* the awards block sits inside an Elementor text widget — clear its defaults */
.sh-awards-wrap p{ margin: 0; }
@media (max-width: 620px){
  .award{ grid-template-columns: 1fr; gap: .45rem; padding: 1rem 0; }
  .award__year{ font-size: .8rem; }
}

/* =====================================================================
   v13.1 — MOBILE HARDENING PASS
   Audited every component at 390px and 360px. Fixes below address:
   type that stayed too large, elements that could push the page wide,
   tap targets under 44px, and side margins that didn't match between
   the Elementor sections and the plugin's own components.
   ===================================================================== */

/* ---- 1. nothing may scroll the page sideways ---- */
html, body{ max-width: 100%; overflow-x: hidden; }
/* long titles, emails and URLs wrap instead of pushing the layout wide */
.shw__title, .work__title, .award__work, .shelf__body h3, .course h3,
.event__body h3, .post-card h3, .sh-juggler, .elftr-heading .elementor-heading-title{
  overflow-wrap: anywhere; word-break: break-word;
}

@media (max-width: 640px){
  /* ---- 2. display type: readable, not overwhelming ---- */
  .hero h1{ font-size: clamp(2.1rem, 11vw, 3rem); letter-spacing: -0.02em; }
  .shw__title{ font-size: clamp(2rem, 10.5vw, 2.8rem); }
  .sh-juggler{ font-size: clamp(2rem, 10vw, 2.6rem); }
  .scene__head h2{ font-size: clamp(1.5rem, 6.5vw, 2rem); }

  /* ---- 3. consistent 22px gutter for plugin-rendered components,
           matching the Elementor sections' padding_mobile ---- */
  .shelves, .courses, .worklist, .events, .awards{ padding-left: 0; padding-right: 0; }

  /* ---- 4. tap targets ---- */
  .work{ padding: 1.25rem .1rem; min-height: 56px; }
  .more, .post-card h3 a, .shelf__body h3 a{ min-height: 44px; display: inline-flex; align-items: center; }
  .btn, .btn--ghost{ min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }

  /* ---- 5. the form tag no longer forces the row wide ---- */
  .work__tag{ white-space: normal; font-size: .58rem; padding: .34rem .7rem; }

  /* ---- 6. stage-cue navigation stacks instead of squeezing to 3 columns ---- */
  .shw__cues{ grid-template-columns: 1fr; gap: .9rem; text-align: left; }
  .shw__cue-up{ white-space: normal; }
  .shw__cues > *{ justify-self: start; }

  /* ---- 7. cards: tighter internal padding so text keeps its measure ---- */
  .shelf__body{ padding: 1.1rem 1.15rem 1.25rem; }
  .course__body{ padding: 1.1rem 1.2rem 1.3rem; }
  .course__img{ aspect-ratio: 16 / 9; }

  /* ---- 8. quotes and pull-quotes ---- */
  .quote, .shw__pull{ font-size: 1.15rem; line-height: 1.45; padding-left: 1rem; }

  /* ---- 9. awards read as year -> award -> work, left aligned ---- */
  .award{ padding: .95rem 0; }
  .award__year{ font-size: .78rem; }
  .award__name{ font-size: .62rem; letter-spacing: .1em; }
  .award__work{ font-size: 1.05rem; }

  /* ---- 10. about strip: portrait above, text left-aligned (centred
           text reads awkwardly at paragraph length) ---- */
  .sh-aboutstrip{ text-align: left; padding: 1.5rem 1.25rem; }
  .sh-aboutstrip img{ max-width: 200px; margin: 0 0 1rem; }
}

/* ---- 11. very small phones (360px and under) ---- */
@media (max-width: 380px){
  .hero h1{ font-size: 1.95rem; }
  .shw__title{ font-size: 1.85rem; }
  .sh-juggler{ font-size: 1.85rem; }
  .work__title{ font-size: 1.05rem; }
  .award__work{ font-size: 1rem; }
  .event__date{ width: 50px; height: 50px; }
  .event{ grid-template-columns: 50px 1fr; gap: .9rem; }
}

/* ---- 12. the fixed nav is shorter on phones, so content clears it
         by the right amount ---- */
@media (max-width: 640px){
  :root{ --nav-h: 58px; }
}

/* ---- 13. landscape phones: don't waste the short viewport on hero ---- */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape){
  .hero, .cine_hero{ min-height: 320px !important; }
}