/* ==========================================================================
   Margo Weishar — playwright
   One page. No JavaScript. No external fonts, scripts, or trackers.

   Everything you'd normally want to change is in the :root block below.
   ========================================================================== */

/* ==========================================================================
   FONTS — Libertinus Serif and Inter, both open-licensed (SIL OFL) and
   served from this site's own fonts/ folder. Nothing is fetched from
   Google or any other server. Licences are in fonts/.

   Browsers download only the subset a page actually needs, so the
   latin-ext files usually stay untouched. Leave these blocks alone.
   ========================================================================== */

/* Libertinus Serif normal — latin */
@font-face {
  font-family: 'Libertinus Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/libertinus-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Libertinus Serif normal — latin-ext */
@font-face {
  font-family: 'Libertinus Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/libertinus-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Libertinus Serif italic — latin */
@font-face {
  font-family: 'Libertinus Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/libertinus-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Libertinus Serif italic — latin-ext */
@font-face {
  font-family: 'Libertinus Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/libertinus-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Libertinus Serif bold normal — latin */
@font-face {
  font-family: 'Libertinus Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/libertinus-serif-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Libertinus Serif bold normal — latin-ext */
@font-face {
  font-family: 'Libertinus Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/libertinus-serif-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Libertinus Serif bold italic — latin */
@font-face {
  font-family: 'Libertinus Serif';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/libertinus-serif-700-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Libertinus Serif bold italic — latin-ext */
@font-face {
  font-family: 'Libertinus Serif';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/libertinus-serif-700-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter normal — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter normal — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter bold — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter bold — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Colours, drawn from the headshot ----
     The warm paper comes from the sweater, the deep ink and the accent from
     the blue wall. Warm page + cool photo is what makes the photo carry. */
  --paper:    #f2ede5;   /* page background — warm paper */
  --ink:      #1d333f;   /* body text — deep teal slate */
  --ink-soft: #4e6976;   /* nav, labels, small print */
  --rule:     #ded5c9;   /* hairlines between sections */
  --accent:   #3b718e;   /* the blue of the wall — link underlines on hover */

  /* ---- Fonts (served from this site's own fonts/ folder) ---- */
  --serif: "Libertinus Serif", "Iowan Old Style", Palatino, Georgia,
           "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
           Arial, sans-serif;

  /* ---- Layout ---- */
  --page:   96rem;                       /* the page is centred inside this */
  --gutter: clamp(1.5rem, 5vw, 4.5rem);  /* side margins — raise for more air */
  --col:    clamp(13rem, 50%, 44rem);    /* width of the left-hand column */
  --gap:    clamp(1.75rem, 4vw, 3.5rem); /* space between the two columns */
  /* How tall the headshot gets, at minimum. The second value is a ceiling —
     without it a very tall browser window would zoom the photo into a
     close-up of her face. */
  --photo:  min(80vh, 52rem);
  --header: 4rem;                        /* height of the sticky bar once shrunk */
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Centre the whole page on large screens. */
main, footer {
  max-width: var(--page);
  margin-inline: auto;
}

/* Jumping to #about / #plays / #contact shouldn't hide the heading
   underneath the sticky bar. */
main > section { scroll-margin-top: calc(var(--header) + 1rem); }

/* ==========================================================================
   The two-column grid used by every section: a narrow left column
   (photo, play title, label) and a wide right column (the reading text).
   It collapses to one column on narrow screens.
   ========================================================================== */

.duo {
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

@media (max-width: 56rem) {
  .duo {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* ---------- Masthead ---------------------------------------------------- */

/* The bar spans the full window and stays at the top of the screen; the
   name and menu inside it stay lined up with the rest of the page. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid transparent;
}

/* Frosted glass, where the browser supports it. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .masthead {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
  }
}

.masthead-inner {
  max-width: var(--page);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) var(--gutter);
}

/* ---- The transition ----------------------------------------------------
   As the first 7rem of the page scrolls away the bar draws itself in: the
   padding tightens and a hairline fades in underneath. This is driven by
   scroll position rather than by a timer, so it tracks the scrollbar
   exactly — and it needs no JavaScript. Browsers without scroll-driven
   animation simply get the plain sticky bar, which is fine.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .masthead,
    .masthead-inner {
      animation: linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 7rem;
    }
    .masthead       { animation-name: bar-settle; }
    .masthead-inner { animation-name: bar-tighten; }

    @keyframes bar-settle {
      to { border-bottom-color: var(--rule); }
    }
    @keyframes bar-tighten {
      to { padding-top: 0.9rem; padding-bottom: 0.9rem; }
    }
  }
}

/* Without scroll-driven animation the hairline is always there once the
   bar can overlap content, so it never floats untethered. */
@supports not (animation-timeline: scroll()) {
  .masthead { border-bottom-color: var(--rule); }
}

.wordmark {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 0.9rem + 0.7vw, 1.375rem);
  font-weight: 700;          /* 400 for light, 700 for bold */
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.masthead nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.masthead nav a {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.masthead a { color: inherit; text-decoration: none; }
.masthead a:hover,
.masthead a:focus-visible { color: var(--ink); }

/* ---------- Sections --------------------------------------------------- */

main > section {
  padding: 0 var(--gutter) clamp(3.5rem, 8vw, 6rem);
}

.section-title {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Portrait (left column of the About section) ----------------- */

/* The photo stays beside the bio as you scroll past it, so the left
   column never reads as empty space. Delete these two lines to have it
   scroll away normally. */
.portrait {
  margin: 0;
  position: sticky;
  top: calc(var(--header) + clamp(0.75rem, 3vh, 1.75rem));
}

/* The photo shows at its own shape, but never shorter than --photo. When
   the floor kicks in the sides are trimmed rather than the face. */
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  min-height: var(--photo);
  object-fit: cover;
  object-position: center 22%;
  background: var(--rule);
}

/* On narrow screens the photo stacks above the bio. */
@media (max-width: 56rem) {
  .portrait { position: static; }
  .portrait img { min-height: 55vh; }
}

/* ---------- Bio -------------------------------------------------------- */

.bio p { margin: 0 0 1.35em; }
.bio p:last-child { margin-bottom: 0; }

.lede {
  font-size: 1.15em;
  line-height: 1.5;
}

/* ---------- Plays ------------------------------------------------------ */

.play {
  padding-bottom: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}

.play:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.play h3 {
  margin: 0 0 0.6rem;
  font-size: 1.3em;
  font-weight: 700;
  font-style: italic;
  line-height: 1.25;
}

/* Synopses can run to several paragraphs. */
.synopsis p { margin: 0 0 1.1em; }
.synopsis p:last-child { margin-bottom: 0; }

/* Links belonging to one play: interviews, reviews, event listings. Each is
   a headline you can scan, with the source named quietly underneath, so the
   eye catches the piece first and the publication second. Set in the sans
   face to read as apparatus rather than part of the play's description. */
.play-links {
  margin: 1.4em 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
}

.play-links li + li { margin-top: 0.85em; }

.play-links a {
  font-size: 0.92rem;
  line-height: 1.35;
}

/* The publication, venue, or byline. Same small uppercase treatment as the
   play details in the left column. */
.play-links .source {
  display: block;
  margin-top: 0.25em;
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* A credit belonging to one play: a prize, a fund, a commission. Sans face,
   like the other apparatus around a play, with any detail in a quieter line
   underneath. */
.credit {
  margin: 1.4em 0 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.45;
}

.credit-note {
  display: block;
  margin-top: 0.3em;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Praise for a play: a review, or what a performer said about it. Set apart
   from the synopsis by a rule down the left edge and a touch less weight, so
   it reads as someone else's voice without shouting. The attribution sits
   underneath in the same small uppercase treatment as everything else. */
.praise {
  margin: 1.6em 0 0;
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
  border-left: 2px solid var(--rule);
  color: var(--ink-soft);
}

.praise + .praise { margin-top: 2em; }

.praise blockquote { margin: 0; }

.praise blockquote p {
  margin: 0 0 1em;
  font-size: 0.95em;
  line-height: 1.6;
}

.praise blockquote p:last-child { margin-bottom: 0; }

/* Name first, then whoever they are underneath. */
.praise figcaption {
  margin-top: 0.9em;
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink);
}

.praise figcaption .source {
  display: block;
  margin-top: 0.25em;
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The play's links come after any praise, with room between them. */
.praise + .play-links { margin-top: 1.8em; }

/* Small uppercase labels: play details, the contact heading. */
.meta {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.9;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Contact ---------------------------------------------------- */

.contact-line { margin: 0 0 0.6rem; }
.contact-line:last-child { margin-bottom: 0; }

main a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

main a:hover,
main a:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ---------- Footer ----------------------------------------------------- */

footer {
  padding: clamp(2rem, 5vw, 3rem) var(--gutter) clamp(3rem, 6vw, 4rem);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

footer p { margin: 0; }

/* ---------- Accessibility helpers -------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip { position: absolute; left: -9999px; }

.skip:focus {
  position: fixed;
  left: var(--gutter);
  top: 0.5rem;
  z-index: 30;
  padding: 0.5rem 0.85rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.8rem;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Print ------------------------------------------------------ */

@media print {
  :root { --paper: #fff; --rule: #ccc; }
  .masthead nav, .skip, .portrait { display: none; }
  .duo { display: block; }
  body { font-size: 11pt; }
  main a { text-decoration: none; }
}