/*
 * noprompt.app: one stylesheet for every page.
 *
 * The look is a contact sheet on a lightbox. A photo lab prints every frame of
 * a roll on one sheet, and the photographer circles the keeper in red grease
 * pencil and crosses out the rest. NoPrompt shows every take on every post, so
 * that sheet is the product: black film, frame numbers on the edge, a red
 * loop around the photo that was posted, the amber date stamp in its corner.
 *
 * Fonts are served from /assets/fonts (OFL, licences beside them), never from a
 * third party: the page promises no trackers, and that includes font hosts.
 * Dark mode is the darkroom: the lightbox goes dark, the film stays film.
 */

/* ----------------------------------------------------------------- fonts -- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo.woff2') format('woff2');
}

@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/reenie-beanie.woff2') format('woff2');
}

/* Seven-segment digits for the date stamp, as the app's FilmStamp draws them. */
@font-face {
  font-family: 'DSEG7 Classic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/dseg7-classic-bold.woff2') format('woff2');
}

/* ---------------------------------------------------------------- tokens -- */

:root {
  --lightbox: #f6f7f5;
  --ink: #1b1b1b;
  --ink-muted: #5c5c5c;
  --hairline: #d5d6d1;
  --film: #000;
  --film-edge: transparent;
  --edge-print: #e9e3d3;
  --blank: #d6d7d2;
  --unshot: #161616;
  --pencil: #d3262e;
  --stamp: #ffa41c;
  --sprocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9'%3E%3Crect x='6' width='14' height='9' rx='2' fill='%23f6f7f5'/%3E%3C/svg%3E");

  --font-body: 'Archivo', system-ui, sans-serif;
  --font-pencil: 'Reenie Beanie', 'Segoe Print', cursive;
  --font-stamp: 'DSEG7 Classic', ui-monospace, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightbox: #161615;
    --ink: #ecedea;
    --ink-muted: #a7a7a2;
    --hairline: #34342f;
    --film-edge: #3a3a36;
    --blank: #3a3a36;
    --unshot: #0c0c0c;
    --pencil: #ef5a5f;
    --sprocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9'%3E%3Crect x='6' width='14' height='9' rx='2' fill='%23161615'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ base -- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--lightbox);
  color: var(--ink);
  font: 400 1.125rem/1.55 var(--font-body);
}

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2.5px;
}

:focus-visible {
  outline: 3px solid var(--pencil);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: min(100% - 2rem, 75rem);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 20;
  transform: translateY(-200%);
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--lightbox);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  transform: none;
}

/* Wide headings: Archivo stretched to 125%. */
h1,
h2,
.wordmark,
.tagline {
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------- header -- */

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 1rem;
}

.wordmark {
  font-size: 1.5rem;
  text-decoration: none;
}

.site-header nav {
  display: flex;
  gap: 0 1.25rem;
}

.site-header nav a {
  display: inline-block;
  padding-block: 0.7rem;
  text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a[aria-current='page'] {
  text-decoration: underline;
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  padding-block: clamp(2rem, 6vw, 4.5rem) 2.5rem;
}

.hero h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.75rem, 8vw, 6.75rem);
  line-height: 0.95;
}

.sub {
  max-width: 46ch;
  margin: 1.75rem 0 0;
  font-size: 1.1875rem;
}

.stores-soon {
  margin: 1rem 0 0;
  font-weight: 700;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.stores[hidden] {
  display: none;
}

/* 48px minimum: Apple's 44pt and Material's 48dp floors. */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.45rem 1.1rem;
  background: var(--ink);
  color: var(--lightbox);
  font-weight: 700;
  text-decoration: none;
}

.store-btn small {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
}

.store-icon {
  width: 1.4rem;
  height: 1.4rem;
}

/* ---------------------------------------------------------------- strip -- */

/* One strip of film, the width of the window. */
.strip {
  margin: 0;
  padding-block: 0.75rem 0.65rem;
  border-block: 1px solid var(--film-edge);
  background: var(--film);
}

.sprockets {
  height: 9px;
  background: var(--sprocket) left center / 26px 9px repeat-x;
}

.frames,
.edge,
.notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 14px);
}

.frames {
  margin-block: 0.75rem 0.5rem;
}

/* A container, so the date stamp can size itself to its frame (cqw). */
.frame {
  position: relative;
  aspect-ratio: 3 / 4;
  container-type: inline-size;
}

.frame.blank {
  background: var(--blank);
}

.frame.unshot {
  background: var(--unshot);
}

.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cross,
.loop {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

.cross {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The loop is drawn wider than the frame: grease pencil does not stay inside the lines. */
.loop {
  top: -7%;
  left: -9%;
  width: 118%;
  height: 114%;
}

.cross path,
.loop path {
  fill: none;
  stroke: var(--pencil);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cross path {
  stroke-width: 3px;
}

.loop path {
  stroke-width: 4px;
}

/* The date stamp a film camera burns into the corner of the frame. */
.stamp {
  position: absolute;
  right: 7%;
  bottom: 5%;
  display: flex;
  gap: 4cqw;
  transform: skewX(-6deg);
  color: var(--stamp);
}

.stamp > span {
  display: flex;
  flex-direction: column;
  gap: 1cqw;
}

.stamp small {
  font-size: max(5px, 3.4cqw);
  font-stretch: 62%;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stamp b {
  font: 700 max(7px, 8.5cqw) / 1 var(--font-stamp);
  text-shadow:
    0 0 4px rgba(255, 150, 40, 0.85),
    0 0 1px rgba(255, 150, 40, 0.9);
}

/* Seven segments cannot draw an "s" that is not a 5. */
.stamp i {
  margin-left: 0.1em;
  font: 700 0.7em var(--font-body);
  font-style: normal;
}

/* On a phone the frames are too narrow for the film's name. */
@media (max-width: 40rem) {
  .edge-brand {
    display: none;
  }
}

.edge {
  white-space: nowrap;
  color: var(--edge-print);
  font-size: 0.75rem;
  font-stretch: 62%;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.notes {
  margin-top: 0.6rem;
  color: var(--pencil);
  font: 400 clamp(1.3rem, 2.6vw, 1.9rem) / 1.05 var(--font-pencil);
}

.notes .n1 {
  grid-column: 1 / span 2;
  transform: rotate(-1.5deg);
}

.notes .n3 {
  grid-column: 3 / span 2;
  transform: rotate(-2deg);
}

/* ---------------------------------------------------------- the rules -- */

.section {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 4rem;
  padding-top: clamp(4rem, 9vw, 6.5rem);
}

.section-head {
  flex: 1 1 26rem;
}

.section-head h2 {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1;
}

.section-head p {
  max-width: 32ch;
  margin: 1rem 0 0;
  color: var(--ink-muted);
}

.ticks {
  flex: 999 1 32rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--hairline);
}

.tick {
  width: 2.1rem;
  height: 1.75rem;
}

.tick path {
  fill: none;
  stroke: var(--pencil);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ticks h3 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
}

.ticks p {
  max-width: 60ch;
  margin: 0.35rem 0 0;
  color: var(--ink-muted);
}

.cta-end {
  padding-block: clamp(5rem, 10vw, 7rem) 1rem;
}

.tagline {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  line-height: 1;
}

/* --------------------------------------------------------------- the doc -- */

.doc {
  max-width: 46rem;
  padding-block: 2rem 1rem;
}

.doc h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
}

.doc h2 {
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 1.5rem;
  line-height: 1.2;
}

.doc h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.125rem;
}

.doc :where(p, ul, ol) {
  margin: 0 0 1rem;
}

.doc li {
  margin-bottom: 0.4rem;
}

.updated {
  color: var(--ink-muted);
  font-size: 0.875rem;
  font-stretch: 75%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  margin-top: 5rem;
  border-top: 1px solid var(--hairline);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-block: 1.25rem 2.5rem;
  font-size: 0.9375rem;
}

.site-footer p {
  margin: 0;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

.site-footer nav a {
  display: inline-block;
  padding-block: 0.7rem;
}

/* ---------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}