/* Ordinary — one column, one typeface, nothing that moves on its own.
   The only animation on the site is the picture reel, and it waits to be asked. */

:root{
  --paper:#F2F1EF;
  --ink:#0A0A0A;
  --mut:#6B6864;
  --hair:#DFDDD9;
  --link:#0000FF;        /* links and the one word. Nothing else is coloured. */
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --column:38rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#0C0C0D;
    --ink:#F0F0EE;
    --mut:#8E8B87;
    --hair:#262626;
    --link:#5468FF;      /* #0000FF is unreadable on near-black */
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.06rem,1rem + .25vw,1.2rem);
  line-height:1.78;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

.sheet{
  max-width:var(--column);
  margin:0 auto;
  padding:clamp(4rem,12vh,10rem) clamp(1.5rem,6vw,3rem) clamp(4rem,10vh,8rem);
  position:relative;
  z-index:1;              /* the reel runs underneath this */
}

/* letterhead */
.mark{display:block;width:clamp(150px,34%,196px);height:auto}
:root .only-dark{display:none}
@media (prefers-color-scheme: dark){
  :root .only-light{display:none}
  :root .only-dark{display:block}
}

.letter{margin-top:clamp(3.5rem,9vh,7rem)}
.letter p + p{margin-top:1.55em}
.letter a{
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:currentColor;
}
.letter a:hover{text-decoration-thickness:2px}

/* ---- the opening ----------------------------------------------------
   What it is, then the photographs. Someone who reads two sentences and
   scrolls no further has still seen the only argument that matters. */
.opening{margin-top:clamp(2.5rem,7vh,4.5rem)}
.what{font-size:1.06em;line-height:1.6}
.shot-with{margin-top:.9em;font-family:var(--sans);font-size:.82rem;color:var(--mut);line-height:1.6}
.shot-with + .shot-with{margin-top:.35em}
.shot-with a{color:var(--link);text-decoration:underline;text-underline-offset:.18em}

/* ---- the plates ----------------------------------------------------
   Wider than the letter on purpose: the text is a column, the pictures
   are not. Breaks out of the sheet without leaving the document order. */
.plates{
  width:min(1180px, calc(100vw - 3rem));
  margin:clamp(2rem,5vh,3.5rem) 0 clamp(3rem,8vh,5rem) 50%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(6px,1vw,12px);
}
.plate{
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  display:block;
  line-height:0;
  -webkit-tap-highlight-color:transparent;
}
.plate img{
  width:100%;
  height:auto;
  display:block;
  transition:opacity .15s;
}
.plate:hover img{opacity:.82}
.plate:focus-visible{outline:2px solid var(--link);outline-offset:2px}
/* two to a row on a phone: one photograph per screen is a slideshow, not a gallery */
@media (max-width:620px){
  .plates{grid-template-columns:repeat(2,1fr)}
  /* Most visitors arrive on the phone this app is for. Tighten the top so the
     first row of photographs is on screen without scrolling. */
  .sheet{padding-top:clamp(2.5rem,7vh,3.5rem)}
  .opening{margin-top:2rem}
  .what{font-size:1em}
  .plates{margin-top:1.5rem}
}
@media (prefers-reduced-motion: reduce){ .plate img{transition:none} }

/* ---- call to action -------------------------------------------------
   Written once in a <template> and cloned into place, so release day is
   one edit in one file. */
/* ---- the wide sheet -------------------------------------------------
   The homepage is a gallery and a list, not a letter, so it gets room.
   Running text inside it keeps a readable measure of its own — a 960 px
   line of prose is a line nobody finishes. */
.sheet-wide{max-width:60rem}
.sheet-wide .opening{max-width:40rem}
.sheet-wide .asked dl{max-width:44rem}

.cta{margin:clamp(1.6rem,4vh,2.4rem) 0 0}
.cta-go{
  font-size:1.14em;
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:.2em;
}
.cta-go:hover{text-decoration-thickness:3px}
.cta-where{
  display:block;
  margin-top:.5em;
  font-family:var(--sans);
  font-size:.78rem;
  color:var(--mut);
}

/* ---- features -------------------------------------------------------
   The list reads on the left, one phone stands on the right and changes
   with it. Each line fills over the time that item is on screen. */
.features{
  display:grid;
  grid-template-columns:1fr minmax(200px,270px);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
  margin-top:clamp(3rem,8vh,5.5rem);
}
.feature-stage{order:2}
.feature-stage img{width:100%;height:auto;display:block;border-radius:2px}
.feature-list{order:1;list-style:none;margin:0;padding:0}
.feature-head{
  display:block;
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:1.15rem 0 0;
  cursor:pointer;
}
.feature-title{display:block;font-weight:600}
.feature-note{
  display:block;
  margin-top:.15em;
  font-family:var(--sans);
  font-size:.82rem;
  line-height:1.55;
  color:var(--mut);
}
.feature .bar{display:block;height:1px;background:var(--hair);margin-top:1.1rem;overflow:hidden}
.feature .bar i{display:block;height:100%;width:0;background:var(--ink)}
.feature.is-on .bar i{width:100%;transition:width var(--dwell,4600ms) linear}
.feature:not(.is-on) .feature-title{color:var(--mut)}

@media (max-width:760px){
  .features{grid-template-columns:1fr;gap:1.5rem}
  .feature-stage{order:1;max-width:230px;margin:0 auto}
  .feature-list{order:2}
}
@media (prefers-reduced-motion: reduce){
  .feature.is-on .bar i{transition:none;width:100%}
  .feature:not(.is-on) .feature-title{color:inherit}
}

/* ---- the short answers ---------------------------------------------- */
.asked{margin-top:clamp(3.5rem,9vh,6rem)}
.asked dl{margin:0}
.asked dt{font-weight:600;margin-top:1.9em}
.asked dd{margin:.3em 0 0;color:var(--mut)}
.asked a{color:var(--link);text-decoration:underline;text-underline-offset:.18em}

/* ---- the lens ------------------------------------------------------- */
.lens{
  display:grid;
  grid-template-columns:minmax(160px,240px) 1fr;
  gap:clamp(1.5rem,4vw,2.5rem);
  align-items:center;
  margin-top:clamp(3.5rem,9vh,6rem);
  padding-top:clamp(2rem,5vh,3rem);
  border-top:1px solid var(--hair);
}
.lens img{width:100%;height:auto;display:block}
.lens-text p{margin:0}
.lens-text p + p{margin-top:.7em}
.lens-text p:first-child{font-weight:600}
.lens-text a{color:var(--link);text-decoration:underline;text-underline-offset:.18em}
@media (max-width:620px){ .lens{grid-template-columns:1fr} }

/* ---- the last word -------------------------------------------------- */
.closing{margin-top:clamp(3.5rem,9vh,6rem)}
.plain-facts{
  margin-top:1.4rem;
  font-family:var(--sans);
  font-size:.82rem;
  color:var(--mut);
}

/* the sign-off, set as a card rather than drawn: name, then where to find him */
.signature{margin-top:clamp(3rem,7vh,5rem);line-height:1.5}
.signature a{font-size:.86em}

/* the one word that answers back */
.reel{
  font:inherit;
  color:var(--link);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:currentColor;
}
.reel:hover,.reel:focus-visible{text-decoration-thickness:2px}

.reel-frame{
  position:fixed;
  height:50vh;
  width:auto;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:0;              /* behind the letter, above the paper */
  display:block;
}

#lightbox{
  position:fixed;
  inset:0;
  z-index:60;
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(3.5rem,8vw,5rem) clamp(3rem,10vw,7rem);
}
#lightbox[hidden]{display:none}
#lightbox img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* the three controls: close, back, forward. Text-sized, ink-coloured, no chrome. */
#lightbox button{
  position:absolute;
  font:inherit;
  color:var(--mut);
  background:none;
  border:0;
  cursor:pointer;
  padding:.75rem;
  line-height:0;
  transition:color .12s;
}
#lightbox button:hover{color:var(--ink)}
.lb-close{
  top:clamp(.75rem,3vw,1.75rem);
  right:clamp(.75rem,3vw,1.75rem);
  font-family:var(--sans);
  font-size:.82rem;
  line-height:1.4;
}
.lb-prev{left:clamp(.25rem,2vw,1.5rem);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(.25rem,2vw,1.5rem);top:50%;transform:translateY(-50%)}
#lightbox svg{width:22px;height:22px;display:block}

.lb-count{
  position:absolute;
  bottom:clamp(1rem,3vw,2rem);
  left:0;
  right:0;
  margin:0;
  text-align:center;
  font-family:var(--sans);
  font-size:.78rem;
  color:var(--mut);
}

@media (max-width:560px){
  #lightbox{padding:3.5rem .75rem 3.5rem}
  .lb-prev{left:0}
  .lb-next{right:0}
}

/* foot of every page */
footer{
  margin-top:clamp(4rem,10vh,7rem);
  padding-top:1.6rem;
  border-top:1px solid var(--hair);
  font-size:.86rem;
  color:var(--mut);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem}
footer nav:empty{display:none}
.colophon{margin:0;font-family:var(--sans);font-size:.82rem;text-align:center}
footer a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
footer a:hover{text-decoration-thickness:2px}

/* inner pages — same sheet, a little more furniture */
h1{font-size:1.5em;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin-top:clamp(3rem,8vh,5rem)}
h2{font-size:1.06em;font-weight:600;margin-top:2.6em;margin-bottom:0}
/* one step quieter than h2 — used for the list of things that go wrong on the support page */
h3{font-size:1em;font-weight:600;margin-top:2.5em;margin-bottom:0}
/* A heading belongs to what follows it, not to what came before. The paragraph
   under a heading drops its own top margin, so the gap below the heading is
   small and the gap above it is the one that separates the two questions. */
.page h2 + p, .page h3 + p{margin-top:.45em}
/* the first question under a section title sits closer than the ones after it */
.page h2 + h3{margin-top:1.1em}
.page p + p{margin-top:1.1em}
.page p{margin-top:1.1em}
.page ul{margin:1em 0 0 1.2em}
.page li{margin-top:.5em}
.page a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.page a:hover{text-decoration-thickness:2px}
.lede{color:var(--mut);margin-top:1.1em}
.meta{font-size:.86rem;color:var(--mut)}

dl.facts{margin-top:1.4em}
dl.facts div{display:flex;gap:1.5rem;padding:.7em 0;border-bottom:1px solid var(--hair);align-items:baseline}
dl.facts dt{flex:0 0 9.5rem;color:var(--mut);font-size:.9rem}
dl.facts dd{flex:1 1 0}
@media (max-width:520px){
  dl.facts div{flex-direction:column;gap:.15rem}
  dl.facts dt{flex:none}
}

.swatches{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.4em}
.swatch{width:5.5rem}
.swatch i{display:block;height:3.4rem;border:1px solid var(--hair)}
.swatch span{display:block;font-size:.78rem;color:var(--mut);margin-top:.4em;line-height:1.5}

.logos{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.4em;align-items:flex-end}
.logos figure{width:9.5rem}
.logos img{width:100%;height:auto;background:#F2F1EF;border:1px solid var(--hair);padding:.8rem}
.logos figcaption{font-size:.78rem;color:var(--mut);margin-top:.5em;line-height:1.5}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin-top:1.6em}
.grid img{width:100%;height:auto;display:block}
.slot{
  aspect-ratio:3/4;
  border:1px dashed var(--hair);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
  font-size:.78rem;
  line-height:1.6;
  color:var(--mut);
}

:focus-visible{outline:2px solid var(--link);outline-offset:3px}
img{max-width:100%}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}