/* Syml, from the archive — on top of inquisitive.css. The film at the
   centre, on an iPad drawn as River's is (river/styles.css, .ipad): bezel as
   a share of the width, outer radius the screen's plus the bezel. The title
   card is the old site's: Syml's sliver, its name in thin Avenir, the play
   button, on the film's own pale ground. */

.masthead.small { padding-bottom: clamp(20px, 4vh, 40px); }
.masthead.small .logo { height: clamp(56px, 8vw, 84px); }
.masthead.small a { display: inline-block; }

.syml { flex: 1; max-width: 1040px; width: 100%; margin: 0 auto; padding-bottom: clamp(56px, 12vh, 120px); }
/* Archived · 2015–2020: the page's heading, so larger than the home page's
   group labels, and lined up with the iPad's left edge. */
.syml .group {
  width: min(860px, 100%); margin: clamp(8px, 2vh, 20px) auto 0;
  font-size: clamp(20px, 2.4vw, 28px); letter-spacing: 0.06em; color: var(--ink);
}
.syml .group .dates { font-weight: 400; letter-spacing: 0.04em; color: var(--dim); }

/* ---------- the iPad ---------- */
.syml-ipad {
  --w: min(860px, 100%);
  --bz: calc(var(--w) * 0.034);
  --r-screen: calc(var(--w) * 0.018);
  width: var(--w); margin: clamp(12px, 3vh, 32px) auto clamp(40px, 7vh, 72px);
  padding: var(--bz); border-radius: calc(var(--r-screen) + var(--bz));
  background: #101315;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1.5px #3b4247,
    0 30px 80px -24px rgba(44, 42, 39, 0.55),
    0 12px 30px -12px rgba(44, 42, 39, 0.4);
}
.syml-screen {
  position: relative; aspect-ratio: 1200 / 900; overflow: hidden;
  border-radius: var(--r-screen); background: #F7F7F7;   /* the film's first frame */
  container-type: inline-size;
}
.syml-screen video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #F7F7F7; }
.syml-screen video:focus { outline: none; }

/* ---------- the title card ---------- */
.syml-card {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-template-columns: 3fr 5fr 4fr; align-items: center;
  background: #F7F7F7;
  transition: opacity 0.6s ease;
}
.syml-card.gone { opacity: 0; pointer-events: none; }
.syml-sliver { justify-self: end; height: 62cqi; width: auto; margin-right: 3cqi; }
.syml-title { padding: 0 3cqi; }
.syml-title h1 {
  margin: 0 0 2.4cqi; line-height: 1;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", var(--sans);
  font-weight: 100; font-size: 9cqi; color: #333;
}
.syml-title p {
  margin: 0; font-family: "Avenir Next", Avenir, "Helvetica Neue", var(--sans);
  font-weight: 300; font-size: 2.9cqi; line-height: 1.35; color: #606060;
}
.syml-play { justify-self: center; display: block; border-radius: 50%; transition: transform 0.2s, opacity 0.2s; }
.syml-play img { display: block; width: 15cqi; height: auto; }
.syml-play:hover { transform: scale(1.05); }
.syml-play:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .syml-card, .syml-play { transition: none; } }

/* ---------- the old site's words ---------- */
.syml-words { max-width: 720px; margin: 0 auto; }
.syml-words p, .syml-words li { font-size: 17px; line-height: 1.6; color: var(--dim); }
.syml-words p { margin: 0 0 16px; }
.syml-words .lede { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; color: var(--ink); margin-bottom: 24px; }
.syml-words ul { margin: 0 0 24px; padding-left: 1.2em; }
.syml-words li { margin: 6px 0; }
.syml-words li::marker { color: rgba(44, 42, 39, 0.4); }