/* Anek Latin, served with the site (SIL Open Font License: fonts/OFL.txt) and preloaded, so a
   page paints with it straight away instead of swapping fonts after the first frame. */
@font-face {
  font-family: "Anek Latin"; font-style: normal; font-weight: 100 800; font-stretch: 75% 125%; font-display: swap;
  src: url(/assets/fonts/anek-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;
}
@font-face {
  font-family: "Anek Latin"; font-style: normal; font-weight: 100 800; font-stretch: 75% 125%; font-display: swap;
  src: url(/assets/fonts/anek-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Changing page (another feeling): a quick crossfade instead of a blank repaint. The brand and tabs are
   their own layer with no animation, so they never move. Films and AI switch inside the page (site.js). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.band-top { view-transition-name: band-top; }
::view-transition-group(band-top), ::view-transition-new(band-top) { animation: none; }
::view-transition-old(band-top) { display: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }

  :root {
    --wall: #E4EEF1;      /* lime-washed wall */
    --ink: #133740;       /* peacock ink */
    --ink-soft: #4E6B73;
    --paper: #FFFFFF;
    --marigold: #F5A400;  /* focus */
    --pad: clamp(16px, 4vw, 40px);
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* no sideways jump between short and long pages */
  body {
    margin: 0;
    background: var(--wall);
    color: var(--ink);
    font-family: "Anek Latin", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    padding-bottom: calc(env(safe-area-inset-bottom) + 32px); /* the last row stays clear of the iPhone home bar */
  }
  button, input { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* The banner: the one loud thing on the page */
  .band {
    --band: #133740;
    --band-text: #FFFFFF;
    background: var(--band);
    color: var(--band-text);
    padding: calc(env(safe-area-inset-top) + 30px) var(--pad) 26px;
  }
  .band-word {
    margin: 0;
    max-width: 12ch;
    font-weight: 800;
    font-stretch: 75%;
    font-size: clamp(3.4rem, 17vw, 9.5rem);
    line-height: .98;
    overflow-wrap: anywhere;
  }
  .band-word.ask { max-width: 14ch; font-size: clamp(2.6rem, 12vw, 6.5rem); } /* questions and searches run longer */
  .band-word.enter { animation: rise .45s cubic-bezier(.2, .7, .2, 1); }
  .band-sub { margin: 14px 0 0; max-width: 42ch; font-size: 1.05rem; }
  .band-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
  .band-top .brand { margin: 0; }
  .main-nav { display: flex; gap: 4px; }
  /* Fixed-size tabs: their place never depends on the font's letter widths, so they don't move. */
  .main-nav a { display: inline-flex; align-items: center; justify-content: center; width: 5em; min-height: 44px; padding: 0; color: inherit; text-decoration: none; font-weight: 700; border-radius: 6px; border: 1px solid transparent; }
  .main-nav a[aria-current="page"] { border-color: currentColor; }
  /* Only where a pointer can hover: on a phone a tapped tab would keep the underline. */
  @media (hover: hover) and (pointer: fine) {
    .main-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
  }
  .choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .choice {
    min-block-size: 44px; /* a thumb-sized target; the padding alone gives 43px */
    padding: 8px 14px 7px;
    border: 2px solid var(--band-text);
    border-radius: 6px;
    background: transparent;
    color: var(--band-text);
    font-weight: 700;
    font-stretch: 87.5%;
    font-size: 1.05rem;
    cursor: pointer;
  }
  .choice[aria-pressed="true"] { background: var(--band-text); color: var(--band); }
  @keyframes rise { from { transform: translateY(18px); opacity: 0; } }

  /* The AI setup uses the same painted banner, with a readable terminal panel. */
  .ai-band { background: var(--ink); color: var(--paper); padding: calc(env(safe-area-inset-top) + 30px) var(--pad) 48px; }
  .ai-hero, .ai-content { max-width: 1200px; }
  /* Films and AI: two views of one page, switched by site.js; the banner turns ink for AI. */
  .films-view { display: contents; }
  body[data-view="ai"] .films-view, body[data-view="films"] .ai-view { display: none; }
  body[data-view="ai"] .band { background: var(--ink); color: var(--paper); padding-bottom: 48px; }
  .ai-hero { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(32px, 5vw, 72px); padding-top: 20px; }
  .ai-intro h1 { margin: 0; font-size: clamp(3.4rem, 7.5vw, 6.8rem); font-weight: 800; font-stretch: 75%; line-height: .98; letter-spacing: -.025em; }
  .ai-intro p { max-width: 34ch; font-size: 1.25rem; margin: 24px 0 0; }
  .ai-intro .ai-detail { font-size: 1rem; opacity: .8; margin-top: 14px; }
  .ai-connect { background: var(--paper); color: var(--ink); padding: clamp(20px, 3vw, 32px); border-radius: 10px; min-width: 0; }
  .ai-connect h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-stretch: 87.5%; line-height: 1.1; margin: 0; }
  .ai-connect > p { margin: 12px 0; max-width: 48ch; }
  .ai-platform { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; font-size: .95rem; font-weight: 700; }
  .ai-platform[hidden] { display: none; }
  .ai-platform select { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 6px; padding: 8px 12px; }
  .ai-connect #ai-platform-hint { font-size: .85rem; margin-top: 8px; }
  .ai-connect .ai-terminal-label { font-size: .85rem; color: var(--ink-soft); margin-top: 24px; margin-bottom: 8px; }
  .ai-command { background: var(--wall); border-left: 4px solid var(--ink); padding: 16px; }
  .ai-command code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere; user-select: all; }
  .ai-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px; }
  .ai-copy-row a { color: var(--ink); text-underline-offset: 3px; }
  .ai-copy[hidden] { display: none; }
  .ai-copy-status { min-height: 1.5em; font-size: .85rem; margin: 8px 0; color: var(--ink-soft); }
  .ai-clients { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 16px 0 0; margin: 16px 0 12px; border-top: 1px solid var(--wall); font-size: .95rem; font-weight: 700; }
  .ai-connect .ai-small { font-size: .9rem; color: var(--ink-soft); }
  .ai-content { padding: 0 var(--pad); }
  .ai-content h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-stretch: 87.5%; line-height: 1.1; margin: 0 0 12px; }
  .ai-content p { max-width: 48ch; margin: 12px 0; }
  .ai-prompts { padding: 44px 0; }
  .ai-prompts ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; list-style: none; padding: 0; margin: 28px 0 0; }
  .ai-prompts li { border-left: 3px solid var(--ink); padding-left: 18px; }
  .ai-prompts blockquote { margin: 0; font-size: 1.2rem; line-height: 1.4; max-width: 28ch; }
  .ai-call { margin: 10px 0 0; font-size: .9rem; color: var(--ink-soft); }
  .ai-call code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; color: var(--ink); background: rgba(19, 55, 64, .08); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }
  @media (max-width: 760px) {
    .ai-hero { grid-template-columns: 1fr; gap: 28px; }
    .ai-hero { padding-top: 10px; }
    .ai-intro h1 { font-size: clamp(3.2rem, 13vw, 5.5rem); }
    .ai-intro p { margin-top: 20px; }
    .ai-prompts ul { grid-template-columns: 1fr; gap: 24px; }
    .ai-prompts blockquote { max-width: 40ch; }
  }

  /* Feeling picker: painted signboards */
  .moods {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px var(--pad);
    background: var(--wall);
    border-bottom: 1px solid rgba(19, 55, 64, .14);
    scrollbar-width: none;
  }
  .moods::-webkit-scrollbar { display: none; }
  /* A mouse cannot swipe this row, so wrap it and keep every feeling in view. */
  @media (min-width: 600px) and (hover: hover) and (pointer: fine) { .moods { flex-wrap: wrap; } }
  .chip {
    flex: none;
    padding: 8px 14px 7px;
    border: 2px solid var(--c);
    border-radius: 6px;
    background: var(--paper);
    font-weight: 700;
    font-stretch: 87.5%;
    font-size: 1.1rem;
    line-height: 1.15;
    cursor: pointer;
  }
  .chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--c); color: var(--t); }

  .controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    padding: 14px var(--pad) 0;
    font-size: .95rem;
  }
  .search { flex: 1 1 260px; max-width: 440px; }
  .search input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: var(--paper);
    font-size: 1rem;
  }
  .search input::placeholder { color: var(--ink-soft); }
  .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
  .switch .short { display: none; }
  .switch input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
  .linkish { padding: 0; border: 0; background: none; text-decoration: underline; cursor: pointer; }
  .note { max-width: 70ch; margin: 8px 0 0; padding: 0 var(--pad); font-size: .82rem; color: var(--ink-soft); }

  /* Poster wall */
  .wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 22px 14px;
    max-width: 1280px;
    padding: 18px var(--pad) 8px;
  }
  /* Cards never crop text: poster, title and details stack in block flow and the text wraps inside the card, so every title shows in full at any length, in any script and on any screen, whether or not its poster has loaded. */
  .film { all: unset; display: block; cursor: pointer; }
  .film { min-width: 0; overflow-wrap: anywhere; }
  .film:focus-visible { outline: 3px solid var(--marigold); outline-offset: 4px; }
  .poster {
    display: block;
    aspect-ratio: 2 / 3;
    padding: 4px;
    background: var(--paper);
    box-shadow: 0 1px 0 rgba(19, 55, 64, .18), 0 8px 16px -10px rgba(19, 55, 64, .55);
  }
  .poster img { display: block; width: 100%; height: 100%; object-fit: cover; background: #CFDDE2; }
  .poster-placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 90px; padding: 12px; box-sizing: border-box; background: #D9E4E7; color: #38535B; text-align: center; font-size: .82rem; font-weight: 600; }
  .sheet-art .poster-placeholder { min-height: 220px; }
  .name { display: block; margin-top: 6px; font-weight: 600; font-stretch: 87.5%; font-size: .95rem; line-height: 1.2; }
  .meta { display: block; margin-top: 6px; font-size: .8rem; line-height: 1.25; color: var(--ink-soft); }
  .meta > span { display: block; }
  .empty { grid-column: 1 / -1; max-width: 50ch; margin: 12px 0; font-size: 1.05rem; }
  .sentinel { height: 1px; }
  .end-note { margin: 0; padding: 18px var(--pad) 0; color: var(--ink-soft); }

  /* Film sheet */
  dialog.sheet {
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    max-height: 85dvh;  /* leaves a band of the page above the sheet to tap to close it */
    margin: auto auto 0;
    padding: 0;
    border: 0;
    border-radius: 18px 18px 0 0;
    /* Keep white out from behind the full-bleed image: Safari showed the sheet's white as a hairline along the image's top edge.
       .sheet-body is white instead, and the lower half stays white for the bounce at the end of a scroll. */
    background: linear-gradient(transparent 50%, var(--paper) 50%);
    color: var(--ink);
    overflow: auto;
    overscroll-behavior: contain;
    /* Safari on iPhone fires no click on an element it thinks can't be clicked, so a tap on the backdrop
       (which lands on the dialog) never closed the sheet. A pointer cursor marks it clickable; its content keeps the default. */
    cursor: pointer;
  }
  dialog.sheet > * { cursor: auto; }
  dialog.sheet[open] { animation: sheet-up .28s ease-out; }
  dialog.sheet::backdrop { background: rgba(19, 55, 64, .55); }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
  @media (min-width: 700px) {
    dialog.sheet { margin: auto; border-radius: 14px; }
  }
  .sheet-art { display: block; width: 100%; aspect-ratio: 16 / 9; background: #CFDDE2; }
  .sheet-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .sheet-body { padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); }
  .sheet .sheet-body { background: var(--paper); }
  .sheet h2 { margin: 0; font-size: 1.65rem; font-weight: 700; font-stretch: 87.5%; line-height: 1.1; }
  .loading { margin: 12px 0 0; color: var(--ink-soft); }
  .facts { margin: 10px 0 0; font-size: .95rem; }
  .people { margin: 4px 0 0; font-size: .92rem; color: var(--ink-soft); }
  .suits { margin: 14px 0 0; font-size: .85rem; color: var(--ink-soft); }
  .guessed { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; font-size: .85rem; }
  .guessed li { padding: 2px 9px 1px; border-radius: 4px; background: var(--c); color: var(--t); }
  .overview { max-width: 60ch; margin: 12px 0 0; }
  .sheet h3 { margin: 20px 0 8px; font-size: 1.05rem; }
  .providers { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .providers li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; overflow-wrap: anywhere; }
  .providers img { width: 36px; height: 36px; border-radius: 8px; }
  .providers .kind { margin-left: auto; font-size: .88rem; color: var(--ink-soft); }
  .source { margin: 10px 0 0; font-size: .82rem; color: var(--ink-soft); }
  .source a { color: inherit; }
  .sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
  .btn {
    padding: 10px 16px;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    cursor: pointer;
  }
  .btn.quiet { background: transparent; color: var(--ink); }

  @media (prefers-reduced-motion: reduce) {
    .band { transition: none; }
    .band-word.enter, dialog.sheet[open] { animation: none; }
  }

a { color: inherit; }
a.chip, a.choice { text-decoration: none; }
.brand {display:block; margin-bottom:20px; font-weight:700; text-decoration:none;}
.film-page {max-width:900px;margin:auto;background:white;}
.film-page .sheet-body {padding:24px var(--pad);}
.film-page h1 {font-size:clamp(2rem,6vw,3.5rem);line-height:1.1;margin:0;}
.load-sentinel { min-height: 1px; padding: 0 var(--pad); }
.load-sentinel .btn { margin: 20px 0; }
.status {padding:0 var(--pad);}
.tmdb-logo {width:90px;height:32px;object-fit:contain;}
.credits-page .sheet-body {max-width:70ch;min-height:50vh;}
.credits-page .tmdb-logo {width:120px;height:auto;}
.poster img.failed {object-fit:contain;font-size:14px;}
[hidden] {display:none!important;}
.film-page .film-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px var(--pad); }
.film-page .film-top .brand { margin: 0; }
.film-page .back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: none; }

.directory { max-width: 900px; min-height: 70vh; margin: auto; padding: 20px var(--pad) 44px; background: var(--paper); }
.directory h1 { margin: 12px 0 4px; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.1; }
.directory > p { margin: 0 0 24px; color: var(--ink-soft); }
.directory-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 30px; margin: 0; padding-left: 24px; }
.directory-list li { position: relative; padding: 8px 4px; overflow-wrap: anywhere; border-bottom: 1px solid #D9E4E7; }
/* The whole row opens the film, not only the 17px line of its title. */
.directory-list a::after { content: ""; position: absolute; inset: 0; }
.directory-list span { color: var(--ink-soft); }
.directory-industry { display: flex; gap: 8px; margin: 12px 0 0; }
.directory-industry a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; text-decoration: none; }
.directory-industry a[aria-current] { background: var(--ink); color: var(--paper); }
.directory-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.directory-pages a { min-height: 44px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 6px; font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .directory-pages a:hover { background: var(--ink); color: var(--paper); }
}

.sort { display: inline-flex; align-items: center; gap: 8px; }
.sort select { font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 6px; padding: 8px 10px; min-height: 44px; } /* 16px: iPhone Safari zooms into smaller fields */

@media (max-width: 479px) {
  /* Phones: search and sort share a row, and the two filters become short pills, so films start higher. */
  .controls { gap: 8px; }
  .search { flex: 1 1 130px; max-width: none; }
  .sort .sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sort select { padding: 8px 6px; }
  .switch { min-height: 44px; padding: 0 12px; border: 2px solid rgba(19, 55, 64, .28); border-radius: 999px; background: var(--paper); font-size: .9rem; }
  .switch .full { display: none; }
  .switch .short { display: inline; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .sheet-body { padding-inline: var(--pad); }
  .sheet-actions .btn { min-height: 44px; }
}
@media (min-width: 480px) and (max-width: 699px) {
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Small links keep their look but get a 44px tall tap area: an invisible box, centred on the link,
   that only ever grows it. Each has room above and below, so no two areas overlap. */
.brand, .source a, .ai-copy-row a { position: relative; }
.brand::after, .source a::after, .ai-copy-row a::after { content: ""; position: absolute; inset: min(0px, (100% - 44px) / 2); }
.source a { white-space: nowrap; } /* one line, so its tap area is one box */

/* The count changes on every keystroke in search; equal-width digits stop the words after it jumping. */
#results { font-variant-numeric: tabular-nums; }

/* Touch screens: thumb-sized feeling chips, and a fade at the edge that says the row scrolls. */
@media (hover: none) {
  .moods { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .chip { padding: 11px 16px 10px; }
}