/* Plural site. The page is the paper from the film 「海的尽头」: same tone, same graphite,
   the pencil's green as the only colour. Fonts and media come from promo/scripts/web_assets.py. */

@font-face { font-family: "Plural Serif SC"; src: url(fonts/serif-sc.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Plural Garamond"; src: url(fonts/garamond.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Plural Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --paper: #f1ece1;          /* the film's paper */
  --ink: #282a30;            /* the film's wordmark */
  --ink-body: #383a40;
  --ink-2: #4e5056;          /* the film's tagline */
  --ink-3: #66676d;
  --rule: rgba(40, 42, 48, 0.16);
  --green: #2b5843;          /* the pencil */
  --green-deep: #1a3b2c;
  --en: "Plural Garamond", "Plural Serif SC", Georgia, serif;
  --zh: "Plural Serif SC", "Songti SC", "Noto Serif CJK SC", serif;
  --sans: "Plural Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif;
  --gutter: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html {
  background: var(--paper) url(media/paper.jpg) 0 0 / 512px repeat;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  color: var(--ink-body);
  font: 400 1.25rem/1.55 var(--en);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
[lang="zh-Hans"] { font-family: var(--zh); }
img, video { max-width: 100%; }
.nw { white-space: nowrap; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--green-deep); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(43, 88, 67, 0.18); }

/* ---- language: English unless the fragment is #zh ---- */
.anchor { position: absolute; top: 0; }
.zh { display: none; }
body:has(#zh:target) .en { display: none; }
body:has(#zh:target) .zh { display: revert; }

.top {
  display: flex; justify-content: flex-end;
  padding: max(12px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 0 var(--gutter);
}
.langs { display: flex; gap: 2px; font: 500 0.8rem/1 var(--sans); }
.langs [lang] { font-family: inherit; }
.langs a { color: var(--ink-3); text-decoration: none; padding: 8px 10px; }
.langs a:hover { color: var(--ink); }
.l-en, body:has(#zh:target) .l-zh { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
body:has(#zh:target) .l-en { color: var(--ink-3); text-decoration: none; }

/* ---- edges fade into the page, the way the film's frame has no edge ---- */
.feather {
  --fx: 5%; --fy: 7%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
    linear-gradient(transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
    linear-gradient(transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
  mask-composite: intersect;
}

/* ---- hero ---- */
main { padding: 0 max(var(--gutter), env(safe-area-inset-left)); }
.hero { text-align: center; }
/* As wide as it can be while the name below still makes the first screen. */
.film {
  position: relative; aspect-ratio: 16 / 9; margin: 4px auto 0;
  width: min(100%, 1200px, max(640px, (100vh - 330px) * 16 / 9));
  width: min(100%, 1200px, max(640px, (100svh - 330px) * 16 / 9));
}
.film video, .film .still { display: block; width: 100%; height: 100%; object-fit: cover; }
.film .still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .film video { display: none; }
  .film .still { display: block; }
}
.icon { display: block; width: 80px; height: 80px; margin: 20px auto 0; }
h1 {
  margin: 14px 0 0;
  font: 600 clamp(2.75rem, 6vw, 3.5rem)/1 var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lede { max-width: 30rem; margin: 20px auto 0; font-size: 1.45rem; line-height: 1.45; color: var(--ink-2); }
.lede[lang] { max-width: 25em; font-size: 1.2rem; line-height: 1.85; letter-spacing: 0.03em; }
.get { margin: 30px 0 0; }
.store {
  display: inline-block;
  padding: 13px 24px;
  border: 1.5px solid var(--green);
  border-radius: 999px;
  color: var(--green);
  font: 500 1rem/1 var(--sans);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.store [lang] { font-family: inherit; }
.store:hover { background: var(--green); color: var(--paper); }
.fine { margin: 16px 0 0; font: 400 0.85rem/1.7 var(--sans); color: var(--ink-3); }
.fine[lang] { font-family: var(--sans); letter-spacing: 0.02em; }

/* ---- sections ---- */
.part { max-width: 1040px; margin: clamp(104px, 14vw, 176px) auto 0; }
.sketch, .scene { position: relative; max-width: 960px; margin: 0 auto; }
.sketch { --fx: 2.2%; --fy: 4.5%; }
.scene { --fx: 9%; --fy: 11%; }
.sketch img, .scene img { display: block; width: 100%; height: auto; }
.sketch .ink { position: absolute; inset: 0; }
.words { max-width: 37rem; margin: 36px auto 0; }
.part > .words:first-child { margin-top: 0; }
h2 {
  margin: 0 0 16px;
  font: 500 2.125rem/1.15 var(--en);
  letter-spacing: -0.005em;
  color: var(--ink);
}
h2[lang] { font: 600 1.625rem/1.4 var(--zh); letter-spacing: 0.04em; }
.words p { margin: 0 0 14px; }
p[lang="zh-Hans"] { font-size: 1.0625rem; line-height: 1.95; letter-spacing: 0.02em; }
.more { margin-top: 20px; }

/* The film draws first and colours after; scrolling does the same where the browser can. */
@property --seep { syntax: "<percentage>"; inherits: false; initial-value: 150%; }
@keyframes seep { from { --seep: 0%; } to { --seep: 150%; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sketch .ink {
      mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 calc(var(--seep) - 40%), transparent var(--seep));
      animation: seep linear both;
      animation-timeline: view();
      animation-range: entry 70% cover 50%;
    }
  }
}

/* ---- formats ---- */
.specs dl { max-width: 37rem; margin: 28px auto 0; }
.row {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0 20px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.row:last-child { border-bottom: 1px solid var(--rule); }
dt { padding-top: 0.3em; font: 500 0.85rem/1.5 var(--sans); color: var(--ink-3); }
dt [lang] { font: 500 0.95rem/1.5 var(--zh); letter-spacing: 0.06em; }
dd { margin: 0; }
dd p { margin: 0; font-size: 1.125rem; line-height: 1.5; }
dd p[lang="zh-Hans"] { font-size: 1rem; line-height: 1.85; }

/* ---- questions ---- */
details { border-top: 1px solid var(--rule); }
details:last-of-type { border-bottom: 1px solid var(--rule); }
summary {
  position: relative;
  padding: 15px 36px 15px 0;
  list-style: none;
  cursor: pointer;
  font: 500 1.3rem/1.35 var(--en);
  color: var(--ink);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  font: 400 1.4rem/1 var(--sans);
  color: var(--green);
}
details[open] summary::after { content: "−"; }
summary [lang] { font: 600 1.1rem/1.6 var(--zh); letter-spacing: 0.03em; }
details p { margin: 0 0 18px; }

/* ---- contact, footer ---- */
.mail { margin-top: 22px; }
.mail a { font: 500 1.6rem/1.3 var(--en); text-decoration: none; border-bottom: 1px solid currentColor; }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  max-width: 1040px;
  margin: 128px auto 0;
  padding: 22px var(--gutter) max(32px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  font: 400 0.85rem/1.6 var(--sans);
  color: var(--ink-3);
}
.foot p { margin: 0; }
.foot [lang] { font-family: var(--sans); }
.foot a { color: var(--ink-3); }
.foot a:hover { color: var(--ink); }

/* ---- privacy policy ---- */
.doc { max-width: 40rem; margin: 48px auto 0; }
.doc .back { font: 500 0.85rem/1 var(--sans); text-decoration: none; }
.doc .back [lang] { font-family: inherit; }
.doc h1 { margin: 28px 0 0; font: 500 2.75rem/1.1 var(--en); letter-spacing: -0.01em; text-align: left; }
.doc h1[lang] { font: 600 2.1rem/1.3 var(--zh); letter-spacing: 0.04em; }
.doc .meta { margin: 12px 0 36px; font: 400 0.85rem/1.6 var(--sans); color: var(--ink-3); }
.doc .meta[lang] { font-family: var(--sans); }
.doc h2 { margin: 44px 0 12px; font-size: 1.6rem; }
.doc div[lang] { font-size: 1.0625rem; line-height: 1.95; letter-spacing: 0.02em; }
.doc div[lang] h2 { font: 600 1.3rem/1.5 var(--zh); letter-spacing: 0.04em; }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 1.1em; }
.doc li { margin: 0 0 12px; padding-left: 0.2em; }
.doc li::marker { color: var(--ink-3); }
.doc strong { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  body { font-size: 1.125rem; }
  .film { width: auto; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .lede { font-size: 1.25rem; }
  .lede[lang] { font-size: 1.075rem; }
  h2 { font-size: 1.75rem; }
  h2[lang] { font-size: 1.4rem; }
  .row { grid-template-columns: 1fr; padding: 14px 0; }
  dt { padding: 0 0 4px; }
  summary { font-size: 1.2rem; }
  .mail a { font-size: 1.35rem; }
  .doc h1 { font-size: 2.25rem; }
  .doc h1[lang] { font-size: 1.75rem; }
}