/* Creative Conviction — home, essays, gatherings, about */
/* The home page is the rails layout: fixed columns of pictures either side of the interview list (#wall and #ribbon still work from the URL hash, for comparison).
     Pictures carry the passage of the interview they come from. No italics anywhere but the wordmark. */
  :root {
    --bg: var(--cc-paper, #F7F5FA); --paper: var(--cc-paper-soft, #F7F5FA); --ink: #1A1130; --ink-2: #4A4260; --ink-3: #6A6378; --rule: #E5E1ED; --magenta: #D8016A; --magenta-deep: #B80059; --magenta-tint: #FBE0EC;
    --serif: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --ease: cubic-bezier(.16, 1, .3, 1);
    color-scheme: light; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
    @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #15121E; --paper: #1E1A2A; --ink: #F1EEF7; --ink-2: #C4BED3; --ink-3: #9790A8; --rule: #2E2940; color-scheme: dark; } :root[data-bg="paper"]:not([data-theme="light"]) { --bg: #1A1626; --paper: #15121E; } }
  :root[data-theme="dark"] { --bg: #15121E; --paper: #1E1A2A; --ink: #F1EEF7; --ink-2: #C4BED3; --ink-3: #9790A8; --rule: #2E2940; color-scheme: dark; }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }
  a:focus-visible, button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  img { display: block; max-width: 100%; }


  /* Hero: each letter rises out of a clipped line; the list starts right under the tagline */
  .hero { display: grid; place-items: center; padding: clamp(84px, 14vh, 140px) clamp(16px, 5vw, 64px) clamp(56px, 10vh, 112px); }
  .logo { display: flex; flex-direction: column; align-items: center; }
  .logo h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 15.5vw, 212px); line-height: .86; letter-spacing: -.035em; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .logo .line { display: block; overflow: hidden; padding: .06em .04em 0; margin: -.06em -.04em 0; }
  .logo .l2 { font-style: italic; color: var(--magenta); margin-top: .02em; }
  .logo .ch { display: inline-block; transform: translateY(115%) rotate(4deg); opacity: 0; animation: letter 1.1s var(--ease) forwards; animation-delay: calc(var(--i) * 45ms + var(--d, 0ms)); transform-origin: left bottom; }
  @keyframes letter { to { transform: none; opacity: 1; } }
  .logo .tag { margin-top: clamp(12px, 2vw, 24px); font-family: var(--serif); font-size: clamp(18px, 2vw, 26px); line-height: 1.3; text-align: center; color: var(--ink); max-width: 30ch; text-wrap: balance; opacity: 0; transform: translateY(14px); filter: blur(6px); animation: tag 1s 1.05s var(--ease) forwards; }
  @keyframes tag { to { opacity: 1; transform: none; filter: none; } }

  /* Tiles: a picture over the passage it comes from. Hold the pointer on it and the picture dissolves; move away and it returns. */
  .tile { position: relative; display: block; background: var(--paper); overflow: hidden; }
  .tile .back { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(8px, .8vw, 14px); font-family: var(--serif); font-size: clamp(11px, .82vw, 14px); line-height: 1.2; color: var(--ink); text-wrap: pretty; overflow: hidden; }
  .tile .back .q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
  .tile.h2 .back .q { -webkit-line-clamp: 14; }
  .tile .back small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 9.5px; line-height: 1.4; color: var(--ink-3); }
  .tile .back small em { font-style: normal; color: var(--magenta); }
  .tile.h2 .back { font-size: clamp(12px, .9vw, 15px); }
  .tile .pic { position: absolute; inset: 0; }
  .tile .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, filter .5s ease; }
  .tile .pic img.next { opacity: 0; transition: opacity .6s ease; }
  .tile .pic img.next.on { opacity: 1; }
  @media (hover: hover) { .wall .tile:hover .pic img, .ribbon .tile:hover .pic img { opacity: 0; filter: blur(8px); transition: opacity .3s ease-out, filter .3s ease-out; } }
  .tile.show .pic img { opacity: 0; filter: blur(8px); transition: opacity .3s ease-out, filter .3s ease-out; }

  /* Wall */
  .wall { display: grid; gap: 4px; grid-auto-flow: dense; }
  .wall .tile.h2 { grid-row: span 2; }

  /* Ribbon: rows you can drag or scroll sideways; they drift on their own and loop */
  .ribbon { overflow-x: auto; overflow-y: hidden; padding: 4px 0; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; }
  .ribbon::-webkit-scrollbar { display: none; }
  .ribbon.dragging { cursor: grabbing; }
  .ribbon .track { display: flex; gap: 4px; width: max-content; }
  .ribbon .tile { flex: none; width: var(--h); height: var(--h); }
  .ribbon .tile .pic img { -webkit-user-drag: none; }

  /* Rails: fixed-width columns of pictures either side of the list; the middle takes whatever width is left. Hover a picture (or press and hold it on a phone) to see it big with its passage. */
  :root { --rail: 240px; --rail-cols: 2; }
  .rails { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail); gap: clamp(16px, 2.5vw, 40px); }
  .rail { height: 100vh; height: 100svh; position: sticky; top: 0; overflow: hidden; }
  .rail .track { display: grid; grid-template-columns: repeat(var(--rail-cols), 1fr); gap: 4px; animation: climb var(--dur, 140s) linear infinite; }
  .rail .track.rev { animation-direction: reverse; }
  .rail:hover .track, .rail.held .track { animation-play-state: paused; }
  .rail .tile { width: 100%; aspect-ratio: 1; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
  .rail .tile .pic img { -webkit-user-drag: none; -webkit-touch-callout: none; }
  .rail .tile .back { display: none; }
  @keyframes climb { to { transform: translateY(-50%); } }
  .peek { position: fixed; z-index: 25; width: min(420px, 38vw); background: var(--paper); box-shadow: 0 20px 60px rgba(26, 17, 48, .22); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
  .peek.on { opacity: 1; transform: none; }
  .peek img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .peek .cap { padding: 16px 18px 18px; font-family: var(--serif); font-size: 19px; line-height: 1.25; color: var(--ink); text-wrap: pretty; }
  .peek .cap small { display: block; margin-top: 10px; font-family: var(--sans); font-size: 11px; color: var(--ink-3); }
  .peek .cap small em { font-style: normal; color: var(--magenta); }

  /* Lists */
  .interviews { padding: 0 clamp(16px, 4vw, 48px) clamp(32px, 4vw, 56px); }
  .list { list-style: none; max-width: 816px; margin: 0 auto; }
  .row a { display: grid; grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1fr) 88px; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); transition: color .2s ease; }
  .list.five .row a { grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .8fr) 88px; }
  .row .ph { width: 56px; height: 56px; object-fit: cover; }
  .row .t { font-family: var(--serif); font-size: 24px; line-height: 1.15; text-align: center; }
  .row .w, .row .au { color: var(--ink-3); font-size: 14px; text-align: center; line-height: 1.4; }
  .row .au { color: var(--ink-2); }
  .row .w b { font-weight: 400; color: var(--ink-2); }
  .row .w em { font-style: normal; color: var(--magenta); }
  .row .d { color: var(--ink-3); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
  .list:hover .row a { color: var(--ink-3); }
  .list:hover .row a .w b, .list:hover .row a .au { color: var(--ink-3); }
  .list:hover .row a:hover, .list:hover .row a:hover .w b, .list:hover .row a:hover .au { color: var(--ink); }
  .rails .interviews { padding-inline: 0; }
  /* An interview that is not out yet: listed, dated "Coming soon", not a link */
  .row a.soon { pointer-events: none; cursor: default; }
  /* Card shown when a picture is tapped: the passage, and a magenta arrow to the article */
  .peekveil { position: fixed; inset: 0; z-index: 33; background: rgba(26, 17, 48, .32); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  .peekveil.on { opacity: 1; pointer-events: auto; }
  .peek.card { pointer-events: auto; z-index: 34; left: 50%; right: auto; top: 50%; width: min(84vw, 420px); transform: translate(-50%, -50%) translateY(8px); }
  .peek.card.on { transform: translate(-50%, -50%); }
  .peek .x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: #fff; filter: drop-shadow(0 0 3px rgba(26, 17, 48, .55)); cursor: pointer; }
  .peek .cap .go { color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; padding: 10px 6px; margin: -10px -2px -10px 4px; font-size: 15px; }
  .m-ribbon { padding: 0; margin: 0 0 14px; cursor: auto; }
  .m-ribbon .track { gap: 3px; }
  .m-ribbon .tile .back { display: none; }
  body.no-hero .m-ribbon { margin-top: 6px; }
  .m-fly { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 32; pointer-events: none; }
  .m-fly div { position: absolute; overflow: hidden; will-change: transform; background: var(--paper); }
  .m-fly img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* On a phone the rows arrive one after another once the title and the ribbon have settled */
  @media (max-width: 720px) {
    .row { transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(min(var(--i, 0), 9) * 70ms); }
    body.m-pending .row { opacity: 0; transform: translateY(18px); transition: none; }
  }

  /* Essays, Gatherings, About */
  body.sub .hero { display: none; }
  body.no-hero .hero { display: none; }
  body.sub #page { padding-top: 0; min-height: 100vh; }
  /* Writing and Community sit in the same three-column frame as Interviews (empty side columns where the pictures are), so the list is the same width and starts at the same height on all three */
  body.sub .interviews { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail); gap: clamp(16px, 2.5vw, 40px); padding-inline: 0; }
  body.sub .interviews .list { grid-column: 2; width: 100%; }
  .about { max-width: 640px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px) 96px; text-align: center; }
  .about .people { display: flex; justify-content: center; gap: 24px; margin-bottom: 36px; }
  .about .person { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .about .person img { width: 168px; height: 168px; object-fit: cover; }
  .about .person a { font-size: 13px; color: var(--ink-3); }
  .about .person a:hover { color: var(--ink); }
  .about p { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink-2); margin-bottom: 20px; text-align: left; text-wrap: pretty; }
  .about p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .about p a:hover { color: var(--magenta); }


  /* The big wordmark's motion (see logo.js): the letters take over from the rise-in, sit above the top bar, and hand over to the small wordmark once docked */
  body[data-logo="assemble"] .logo h1 { position: relative; z-index: 31; pointer-events: none; transition: opacity .25s ease; }
  body[data-logo="assemble"] .logo .line { overflow: visible; }
  body[data-logo="assemble"] .logo .ch { animation: none; opacity: 0; transform-origin: 50% 50%; will-change: transform; }
  body[data-logo="assemble"].logo-go .logo .ch { opacity: 1; }
  body[data-logo="assemble"].docked .logo h1 { opacity: 0; }
  .logo .tag.late { animation: tag-late .9s var(--ease) forwards; }
  @keyframes tag-late { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

  @media (max-width: 1100px) {
    .row a, .list.five .row a { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
    .row .ph { width: 48px; height: 48px; grid-row: 1 / span 4; }
    .row .t, .row .w, .row .au, .row .d { grid-column: 2; text-align: left; }
    .row .t { font-size: 20px; }
    .row .d { font-size: 12px; }
  }
  @media (max-width: 720px) {
    .hero { padding-top: 72px; padding-bottom: 28px; }
    .row .t { font-size: 16px; }
    .row .w, .row .au { font-size: 12px; }
    .row .d { font-size: 11px; }
    /* Phone: one narrow column of pictures each side, the list between them */
    :root { --rail: 56px; --rail-cols: 1; }
    .rails, body.sub .interviews { gap: 10px; }
    .rail { display: none; }
    .rails { display: block; }
    .row a, .list.five .row a { grid-template-columns: 40px minmax(0, 1fr); gap: 3px 10px; padding: 14px 0; }
    .row .ph { width: 40px; height: 40px; }
    /* Press and hold a picture and it appears large, with its passage, over the middle of the screen; let go and it leaves */
    .peek { left: 50%; right: auto; top: 50%; width: min(84vw, 360px); transform: translate(-50%, -50%) translateY(8px); }
    .peek.on { transform: translate(-50%, -50%); }
    .peek .cap { font-size: 17px; padding: 14px 16px 16px; }
    .tile .back { font-size: 12px; padding: 8px; }
    .tile .back .q { -webkit-line-clamp: 5; }
    .tile.h2 .back .q { -webkit-line-clamp: 12; }
    .tile .back small { font-size: 9px; margin-top: 4px; }
    .wall { gap: 3px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .logo .ch { animation: none; transform: none; opacity: 1; }
    .logo .tag { animation: none; opacity: 1; transform: none; filter: none; }
    .rail .track { animation: none; }
  }

  /* The top ribbon on the Interviews / Writing / Community pages: pictures stay pictures under the mouse; a click opens the passage */
  @media (hover: hover) { .m-ribbon .tile:hover .pic img { opacity: 1; filter: none; } .m-ribbon .tile { cursor: pointer; } }
  body.no-hero .m-ribbon { margin-top: 10px; }