/* Always loaded. Theme-independent: reset, the banner, switcher chrome.
   The look of the site lives in themes/serif.css and themes/grid.css. */

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

body {
  font-size: 16px;
  line-height: 1.65;
}

/* ── Banner ─────────────────────────────────────────────── */
.banner {
  position: relative;
  /* Wide at rest, spanning the text column, at the photo's own ratio. */
  width: 100%;
  aspect-ratio: 1659 / 948;
  margin-bottom: 44px;
  border-radius: 28px;
  overflow: hidden;
  background: #e6e6e6;
  isolation: isolate;
}

.banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps a head-and-shoulders portrait framed on the face when the
     source is cropped to a wide rectangle. */
  object-position: center 8%;
}

/* The rasterised overlay, drawn only while the pointer is inside. */
.banner-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.banner.is-rastered .banner-fx { opacity: 1; }

@media (max-width: 600px) {
  .banner {
    border-radius: 20px;
    margin-bottom: 32px;
  }
}

/* ── iOS-style sheet ────────────────────────────────────────
   A <dialog>, so focus trapping and Esc come from the platform.
   Full-width and bottom-anchored on phones; a centred card with
   a little breathing room on larger screens.
   ───────────────────────────────────────────────────────── */
.sheet {
  width: 100%;
  max-width: none;
  max-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
}

.sheet::backdrop {
  background: rgba(0, 0, 0, 0.35);
  /* With a card open, the scrim carries that card's colour. */
  background: color-mix(in srgb, var(--accent, #000) 34%, rgba(0, 0, 0, 0.62));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.sheet.is-opening::backdrop {
  animation: sheet-fade 0.35s ease both;
}

.sheet.is-closing::backdrop {
  animation: sheet-fade 0.28s ease both reverse;
}

.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;          /* the strip of page left visible above an iOS sheet */
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  box-shadow: 0 -12px 50px -12px rgba(0, 0, 0, 0.28);
  transform: translateY(100%);
}

/* Added a frame after showModal(), so the slide starts from a rendered
   element rather than from inside a display:none dialog. */
.sheet.is-opening .sheet-panel {
  animation: sheet-up 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.sheet[open]:not(.is-opening):not(.is-closing) .sheet-panel {
  transform: translateY(0);
}

.sheet.is-closing .sheet-panel {
  animation: sheet-down 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* The iOS grabber. */
.sheet-grabber {
  flex: none;
  width: 36px;
  height: 5px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: #d8d8d8;
}

.sheet-close {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f0f0f0;
  color: #6b6b6b;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sheet-close:hover { background: #e4e4e4; color: #1a1a1a; }

.sheet-close:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

.sheet-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 24px 64px;
}

/* The title holds its place at the top of the panel and the content passes
   underneath it, rather than riding up over it. */
.sheet-head {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 -24px;
  padding: 28px 24px 16px;
  background: #ffffff;
}

.has-accent .sheet-head { background: var(--accent); }

/* The panel spans the window; the text inside it keeps one reading column,
   while figures are free to use the full width. */
.sheet-eyebrow,
.sheet h2,
.sheet-body p,
.sheet-list {
  max-width: 600px;
  margin-inline: auto;
}

/* Title first, then the line that qualifies it — the same order the
   cards use. */
.sheet h2 {
  font-size: 17px;
  font-weight: 550;
  line-height: 1.45;
  margin-bottom: 1px;
}

.sheet-eyebrow {
  font-size: 17px;
  line-height: 1.45;
  color: #a6a6a6;
  margin-bottom: 24px;
}

.sheet-body p {
  font-size: 17px;
  line-height: 1.6;
  color: #222;
  margin-bottom: 16px;
}

.sheet-body p:last-child { margin-bottom: 0; }

.sheet-list {
  margin: 0 auto 16px;
  padding-left: 20px;
  list-style: disc;
}

.sheet-list li {
  font-size: 17px;
  line-height: 1.6;
  color: #222;
  margin-bottom: 10px;
}

.sheet-list li::marker { color: #b4b4b4; }

/* A supporting shot inside a sheet. Text keeps the 680px reading column;
   the screenshots break out of it and sit on a grey panel, so they read as
   objects rather than floating on the white. */
/* Three snapshots pinned above the text, overlapping like a handful of
   prints dropped on a table. The files are flat rectangles now, so the
   angle, the rounding and the shadow all belong here. */
.about-photos {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto 46px;
  padding-bottom: 18px;
}

.photo-card {
  position: relative;
  flex: 0 1 300px;
  margin: 0;
  z-index: 1;
}

.photo-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 34px -18px rgba(20, 20, 40, 0.34),
              0 2px 6px rgba(20, 20, 40, 0.06);
  -webkit-user-drag: none;
}

.photo-card figcaption {
  position: relative;
  z-index: 4;
  margin-top: 16px;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
}

/* Later prints lie on top of earlier ones. */
.photo-card:nth-child(2) { margin-left: -6%; z-index: 2; }
.photo-card:nth-child(3) { margin-left: -6%; z-index: 3; }

.photo-card:nth-child(1) { transform: rotate(-5deg); }
.photo-card:nth-child(2) { transform: rotate(3deg) translateY(-14px); }
.photo-card:nth-child(3) { transform: rotate(-2deg) translateY(10px); }

@media (max-width: 700px) {
  .about-photos { flex-wrap: wrap; margin-bottom: 34px; }
  .photo-card { flex: 0 1 46%; }
  .photo-card:nth-child(2),
  .photo-card:nth-child(3) { margin-left: -5%; }
  .photo-card figcaption { font-size: 15px; margin-top: 10px; }
}

.sheet-shot {
  max-width: 1440px;
  width: 100%;
  margin: 30px auto 0;
  padding: 28px 28px 0;
  border-radius: 16px;
  background: #f1f1f1;
}

/* Where to find him, at the end of the piece. */
.sheet-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 600px;
  margin: 36px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(20, 20, 40, 0.10);
}

.sheet-contact a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #c9c9c9;
  transition: text-decoration-color 0.18s ease;
}

.sheet-contact a:hover { text-decoration-color: currentColor; }

.sheet-contact a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 3px;
}

.has-accent .sheet-contact {
  border-top-color: rgba(255, 255, 255, 0.22);
}

.has-accent .sheet-contact a { text-decoration-color: rgba(255, 255, 255, 0.45); }

/* The same reel as the card, opened out: full width, at the frames' own
   ratio so nothing is cropped, with dots to step through by hand. */
.reel--sheet {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 26px auto 0;
  aspect-ratio: 1198 / 1058;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
}

.reel--sheet img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.reel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.reel-dot:hover { background: rgba(255, 255, 255, 0.6); }

.reel-dot.is-on {
  background: #ffffff;
  transform: scale(1.3);
}

.reel-dot:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.sheet-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px -12px rgba(20, 20, 40, 0.28),
              0 1px 3px rgba(20, 20, 40, 0.06);
}

.sheet-shot figcaption {
  padding: 16px 2px 18px;
  font-size: 13.5px;
  color: #8a8a8a;
}

@media (max-width: 600px) {
  .sheet-shot { padding: 14px 14px 0; border-radius: 12px; }
  .sheet-shot figcaption { padding: 12px 2px 14px; }
}

/* Keep the page still behind the sheet. */
body.sheet-open { overflow: hidden; }

/* The colour carries past the scrim: a wash on the page, the eyebrow, and
   the panels the screenshots sit on. */
.has-accent body {
  background: color-mix(in srgb, var(--accent) 6%, #fff);
}

/* The whole sheet takes the card's colour, and its contents turn light. */
.has-accent .sheet-panel { background: var(--accent); }

.has-accent .sheet-eyebrow { color: rgba(255, 255, 255, 0.7); }
.has-accent .sheet h2 { color: #fff; }
.has-accent .sheet-body p { color: rgba(255, 255, 255, 0.92); }
.has-accent .sheet-list li { color: rgba(255, 255, 255, 0.92); }
.has-accent .sheet-list li::marker { color: rgba(255, 255, 255, 0.45); }
.has-accent .sheet-body strong { color: #fff; }

.has-accent .sheet-shot {
  background: rgba(255, 255, 255, 0.10);
}

.has-accent .sheet-shot figcaption {
  color: rgba(255, 255, 255, 0.7);
}

.has-accent .sheet-grabber { background: rgba(255, 255, 255, 0.45); }

.has-accent .sheet-close {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
}

.has-accent .sheet-close:hover {
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
}


@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes sheet-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

@keyframes sheet-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet-panel,
  .sheet.is-closing .sheet-panel,
  .sheet::backdrop,
  .sheet.is-closing::backdrop { animation-duration: 0.01ms; }
}