/* The reading pages (About, the blog and its posts) as a panel of frosted glass over the scene: about
   three quarters of the screen wide, with the scene showing round its top and sides, and its foot
   flush with the screen's. In the app it opens over the live view (sheet.js); a page visited by its
   own address stands on a still of Paris behind the same glass (pages.css). Everything here is scoped to .sheet, and
   its parts carry sheet- names, so none of the app's own header, edge or blur rules reach them. */

.sheet {
  --ink: #0f1720;
  --ink-2: rgba(15, 23, 32, 0.68);
  --ink-3: rgba(15, 23, 32, 0.45);
  --rule: rgba(15, 23, 32, 0.12);
  --gap: 20px;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Plus Jakarta Sans', 'Instrument Sans', system-ui, sans-serif;

  --panel-top: 96px; /* below the wordmark and the scene's name, which stay on the page */

  position: fixed;
  inset: 0;
  z-index: 40;
  font: 17px/1.6 var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* round the panel, the scene dims a little, so the panel reads as above it (a tint only: a blur
     here would stop the panel's own glass from seeing the scene) */
  background: rgba(15, 23, 32, 0.22);
}

/* the glass itself: the app's glass, frosted harder so a column of text reads over any scene */
.sheet-panel {
  position: absolute;
  left: 50%;
  top: var(--panel-top);
  bottom: 0;
  width: 76%;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  backdrop-filter: blur(32px) saturate(1.4);
  box-shadow: 0 -8px 48px rgba(15, 23, 32, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* the column scrolls inside the glass, fading out along the panel's top so it never runs under the
   close button */
.sheet-scroll {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(transparent 0, transparent 56px, #000 96px);
  mask-image: linear-gradient(transparent 0, transparent 56px, #000 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

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

.sheet a {
  color: var(--ink);
  text-underline-offset: 2px;
}

/* ---------- the wordmark, as in the app ---------- */

/* on a page visited by its own address, the wordmark stands on the scene, top left, as in the app
   (in the app, sheet.js takes the panel only, and the app's own wordmark stays) */
.sheet-top {
  position: absolute;
  left: 0;
  top: 0;
  padding: 22px var(--gap) 0;
}

/* the icon and the wordmark lead home; the credit under them keeps its own link */
.sheet-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.sheet-brand-icon {
  display: flex;
  color: inherit;
}

.sheet-brand svg {
  flex: none;
  width: 50px;
  height: 50px;
}

.sheet-brand-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sheet-brand-name {
  font: 800 24px/1 var(--display);
  letter-spacing: 0.1em;
  color: inherit;
  text-decoration: none;
}

.sheet-tagline {
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink-2);
}

.sheet-tagline-by {
  display: none;
}

/* as in the app: no underline, the handle's ink and weight already set it apart */
.sheet-tagline-by a {
  font-weight: 600;
  text-decoration: none;
}

/* back to the scene: a round glass button in the panel's top right corner */
.sheet-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 16px rgba(15, 23, 32, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.2s ease;
}

.sheet-close:hover {
  background: rgba(255, 255, 255, 0.85);
}

.sheet-close svg {
  width: 18px;
  height: 18px;
}

/* ---------- the right edge, on the scene, as in the app ---------- */

.sheet-edge {
  position: absolute;
  right: 14px;
  top: 112px;
  z-index: 1;
  margin: 0;
  writing-mode: vertical-rl;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}

.sheet-edge .sheet-sep {
  margin-inline: 0.5em; /* along the line, which runs down the edge */
}

/* the page you're on reads in the credit's grey, without a line under it */
.sheet-edge a[aria-current='page'] {
  color: var(--ink-2);
  text-decoration: none;
}

/* ---------- the column ---------- */

.sheet .page {
  max-width: 640px;
  margin: 0 auto;
  padding: 96px var(--gap) 120px; /* the first line below the fade under the close button */
}

.sheet .page h1 {
  margin: 0 0 16px;
  font: 700 40px/1.15 var(--display);
  letter-spacing: -0.01em;
}

.sheet .page h2 {
  margin: 48px 0 12px;
  font: 700 22px/1.3 var(--display);
}

.sheet .page p,
.sheet .page ul,
.sheet .page ol {
  margin: 0 0 16px;
}

.sheet .page ul,
.sheet .page ol {
  padding-left: 1.2em;
}

.sheet .page li {
  margin-bottom: 6px;
}

/* no orphans: lines fill as they naturally would, and a word only moves down when the last line
   would otherwise hold it alone */
.sheet .page :is(h1, h2, p, li, figcaption),
.sheet .page .posts a {
  text-wrap: pretty;
}

/* the words a post leans on: full ink at the app's semibold, even inside the grey lede */
.sheet .page b {
  font-weight: 600;
  color: var(--ink);
}

.sheet .lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-2);
}

.sheet .meta {
  margin: 0 0 32px;
  font-size: 14px;
  color: var(--ink-3);
}

/* a call back to the scene */
.sheet .cta {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

/* ---------- screens in a post ---------- */

/* a still or a short clip from Refrac, a touch wider than the column, and centred on it */
.sheet-scroll {
  container-type: inline-size;
}

.sheet .page figure {
  --fw: min(calc(100% + 96px), calc(100cqw - 48px)); /* 48 px past the column each side */
  width: var(--fw);
  margin: 32px 0 32px calc((100% - var(--fw)) / 2);
}

.sheet .page figure img,
.sheet .page figure video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: rgba(15, 23, 32, 0.08);
  box-shadow: 0 6px 24px rgba(15, 23, 32, 0.14);
}

.sheet .page figcaption {
  max-width: 600px;
  margin: 10px auto 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

@media (max-width: 600px) {
  .sheet .page figure {
    --fw: min(calc(100% + 24px), calc(100cqw - 20px));
  }
}

/* ---------- the blog's list ---------- */

.sheet .page .posts {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.sheet .posts li {
  margin: 0;
  padding: 24px 0;
}

/* each post: its thumbnail, and beside it, centred on it, the post's number, its title and its date */
.sheet .page .posts li {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sheet .post-thumb {
  flex: none;
  display: block;
  width: 144px;
}

.sheet .post-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15, 23, 32, 0.12);
  transition: transform 0.3s var(--ease-out, ease);
}

.sheet .post-thumb:hover img {
  transform: scale(1.02);
}

.sheet .post-text {
  min-width: 0;
}

/* the post's number in the series, on its own line over the title, in the quieter ink */
.sheet .post-no {
  display: block;
  margin-bottom: 4px;
  font: 700 15px/1.2 var(--display);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.sheet .posts a:not(.post-thumb) {
  display: block;
  font: 700 22px/1.3 var(--display);
  text-decoration: none;
}

.sheet .posts a:not(.post-thumb):hover {
  text-decoration: underline;
}

.sheet .posts time {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-3);
}

@media (max-width: 600px) {
  .sheet .page .posts li {
    gap: 16px;
  }

  .sheet .post-thumb {
    width: 104px;
  }

  .sheet .posts a:not(.post-thumb) {
    font-size: 19px;
  }
}

/* ---------- coming and going (sheet.js) ---------- */

/* the scene dims and the panel rises into place. (The fade is on the panel, never the outer layer:
   fading that would cut the panel's glass off from the scene behind it.) */
.sheet {
  transition: background-color 0.35s ease;
}

.sheet-panel {
  transition:
    transform 0.45s var(--ease-out, ease),
    opacity 0.3s ease;
}

.sheet.is-closed {
  background-color: transparent;
  pointer-events: none;
  visibility: hidden;
  transition:
    background-color 0.25s ease,
    visibility 0s 0.25s;
}

.sheet.is-closed .sheet-panel {
  opacity: 0;
  transform: translate(-50%, 32px);
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sheet,
  .sheet-panel,
  .sheet.is-closed,
  .sheet.is-closed .sheet-panel {
    transition: none;
  }

  .sheet.is-closed .sheet-panel {
    transform: translateX(-50%);
  }
}

/* narrower screens: the panel takes all but a margin each side */
@media (max-width: 860px) {
  .sheet-panel {
    width: calc(100% - 32px);
  }
}

@media (max-width: 600px) {
  .sheet-top {
    right: 0;
    display: flex;
    justify-content: center;
    padding-top: max(18px, env(safe-area-inset-top, 0px));
  }

  .sheet-brand svg {
    width: 40px;
    height: 40px;
  }

  .sheet-brand-name {
    font-size: 20px;
  }

  /* as in the app: the credit under the wordmark, and the edge holds the pages only, under the
     close button */
  .sheet-tagline-text {
    display: none;
  }

  .sheet-tagline-by {
    display: inline;
  }

  .sheet {
    --panel-top: max(108px, calc(env(safe-area-inset-top, 0px) + 92px)); /* below the wordmark and the edge */
  }

  .sheet-panel {
    width: calc(100% - 20px);
    border-radius: 20px 20px 0 0;
  }

  .sheet-edge {
    top: max(22px, env(safe-area-inset-top, 0px));
    right: 10px;
  }

  .sheet-edge-credit {
    display: none;
  }

  .sheet .page {
    padding: 96px 18px 96px;
  }

  .sheet .page h1 {
    font-size: 28px;
  }
}