/* ==========================================================================
   Ordinary, homepage built from Tom's own layout (Desktop - 1.pdf).
   His section order and his sentences are kept. Added here: what it does not
   do, the price, the photographs, essays, FAQ, a real footer.
   Yellow sampled from his file (#F7CE46), band grey #D9D9D9.
   Geist everywhere, Geist Mono for running text, both self hosted. The latin
   and latin-ext subsets are both declared because the notes to himself are in
   Czech and the diacritics live in latin-ext.
   ========================================================================== */

@font-face{
  font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/geist-400-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:'Geist';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/geist-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Geist Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/geist-mono-400-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:'Geist Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/geist-mono-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --paper:#FFFFFF;
  --band:#D9D9D9;
  --ink:#000000;
  --mut:#5A5A5A;
  --rule:#ABABAB;
  /* Plain, cheerful pink. 1.93:1 on white and 1.37:1 on the grey band, so the
     fill is still below the 3:1 a control is asked for; black on it is 10.86:1,
     so the label itself is never in doubt. His call, knowingly made. */
  --accent:#FF9EBB;
  --on-accent:#000000;
  --link:#0000FF;

  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --shell:1240px;
  --gutter:clamp(20px,5vw,48px);
  --band-pad:clamp(72px,11vh,132px);
  --col-gap:clamp(32px,6vw,88px);
  --radius:5px;
  /* one gap under every heading and one between blocks, so nothing is spaced
     by hand any more */
  --head-gap:clamp(18px,2.2vh,26px);
  --block-gap:clamp(30px,4vh,46px);
}
@media (prefers-color-scheme:dark){
  :root{
    /* the band was #1A1A1B, only 1.12:1 against the paper, so the alternating
       rhythm that carries the whole layout went missing. #26262A gives 1.30:1,
       close to the 1.41:1 the light mode has between white and the grey. */
    --paper:#0C0C0D; --band:#26262A; --ink:#F2F2F0; --mut:#9A9792;
    --rule:#444447; --link:#5B72FF;
    /* the pink needs no dark variant either: 8.80:1 on the dark paper and
       7.80:1 on the dark band, so there the fill carries the shape by itself */
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:clamp(0.95rem,0.9rem + 0.25vw,1.0625rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter)}

/* bands: strict alternation, equal padding top and bottom ------------------ */
.band{padding-block:var(--band-pad)}
/* a hairline that reads on white disappears on the grey, so the band carries
   its own darker rule and the dividers stay visible in both */
.band.grey{background:var(--band);--rule:#9E9E9E}
@media (prefers-color-scheme:dark){.band.grey{--rule:#4C4C50}}

/* type scale --------------------------------------------------------------- */
h1,h2,h3,.btn,.nav a,.eyebrow,cite,.brand,.label,.callout{font-family:var(--sans)}
/* balance evens the lines out, which is what stops a heading ending on "I" or
   "for" and keeps the last line from being one short word */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
h1{
  font-weight:700;
  font-size:clamp(2.5rem,1.3rem + 5.4vw,5rem);
  line-height:1.02;
  letter-spacing:-0.035em;
  max-width:16ch;
}
h2{
  font-weight:700;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.125rem);
  line-height:1.16;
  letter-spacing:-0.02em;
  /* In the two column sections the column already limits the heading, so this
     cap only has to stop a heading on a full width band from running the whole
     1240px. At 24ch it was breaking headings that fit on one line. */
  max-width:40ch;
}
/* the mono body reads optically larger than the sans at the same size, so an h3
   set to match the body looked smaller than the paragraph under it */
h3{
  font-weight:700;
  font-size:clamp(1.1875rem,1.1rem + 0.5vw,1.4375rem);
  line-height:1.3;
  letter-spacing:-0.012em;
}
p + p{margin-top:1.1em}
/* every heading gets the same gap under it, whatever follows: a paragraph, a
   list, or a wrapping div. The grids and the links after them get the bigger
   block gap. */
h2 + *{margin-top:var(--head-gap)}
h3 + *{margin-top:calc(var(--head-gap) * 0.6)}
.after-block{margin-top:var(--block-gap)}
ul + p{margin-top:1.1em}
.eyebrow + h3{margin-top:0.4em}
.strip-note{margin-top:0.9em}
.prose{max-width:62ch}
.meta{font-size:0.8125rem;color:var(--mut);line-height:1.6}
.eyebrow{
  font-size:0.75rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mut);
}

/* two column sections, both rails identical everywhere --------------------- */
/* .pair       picture left, words right
   .pair.narrow words left, picture right
   .pair.even   two equal columns of words
   In every variant the words get the wider rail, so the measure stays even. */
.pair{display:grid;grid-template-columns:0.82fr 1.18fr;gap:var(--col-gap);align-items:center}
.pair.narrow{grid-template-columns:1.18fr 0.82fr}
.pair.even{grid-template-columns:1fr 1fr;align-items:start}
/* every paired picture is cropped to the same shape, so the rails stay level */
.pair .picture img{aspect-ratio:3/4;object-fit:cover;width:100%}
.pair .picture.wide img{aspect-ratio:3/2}
@media (max-width:820px){
  .pair,.pair.narrow,.pair.even{grid-template-columns:1fr;gap:clamp(28px,6vw,44px)}
  .pair .picture{order:-1}
}

/* header -------------------------------------------------------------------- */
.site-head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-block:clamp(20px,3vh,30px);
}
.site-head .brand{font-weight:700;font-size:1.0625rem;letter-spacing:-0.01em;text-decoration:none}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);flex-wrap:wrap}
.nav a{font-size:0.9375rem;font-weight:500;text-decoration:none;color:var(--ink)}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}

.btn{
  display:inline-block;
  background:var(--accent);color:var(--on-accent);
  font-size:0.875rem;font-weight:700;letter-spacing:-0.005em;
  padding:0.68em 1.1em;
  border-radius:var(--radius);
  text-decoration:none;
  transition:filter .15s ease;
}
.btn:hover{filter:brightness(0.86)}

/* Secondary action. The green belongs to the App Store, so asking people for
   their photographs gets an outline instead. The padding is reduced by the
   border width so both buttons keep the same height. */
.btn-ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--ink);
  padding:calc(0.68em - 1px) calc(1.1em - 1px);
  transition:background-color .15s ease,color .15s ease;
}
.btn-ghost:hover{background:var(--ink);color:var(--paper);filter:none}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* hero ---------------------------------------------------------------------- */
.hero{position:relative;container-type:inline-size}
.hero img{width:100%}
/* the asterisk is the Geist bold character, not a drawing, and it is the other
   half of the H1 under the picture */
.hero .mark-asterisk{
  position:absolute;top:4.5%;right:6.5%;
  font-family:var(--sans);font-weight:400;color:#fff;
  font-size:15cqw;line-height:1;
  user-select:none;
}
/* the drawn arrow starts at the bottom left of its box and loops up to the
   right, so the words sit on that starting point rather than beside the middle
   of the curve */
.hero .callout{
  position:absolute;left:6.5%;bottom:17%;
  display:flex;align-items:flex-end;gap:0.9cqw;
  color:#fff;font-weight:700;
  font-size:2.2cqw;letter-spacing:-0.01em;white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.hero .callout span{transform:translateY(0.35cqw)}
.hero .callout svg{width:15cqw;height:auto;flex:none;overflow:visible}
@media (max-width:560px){.hero .callout{display:none}}

/* the hero sits outside a band, so it carries its own bottom rhythm */
.hero-caption{margin-top:clamp(22px,4vh,44px);padding-bottom:var(--band-pad)}

/* lists --------------------------------------------------------------------- */
.plain{list-style:none}
.plain li{position:relative;padding-left:1.15em}
.plain li::before{content:"\2022";position:absolute;left:0;color:var(--ink)}
.plain li + li{margin-top:0.45em}
.abc{list-style:none}
.abc li + li{margin-top:0.1em}

/* reviews -------------------------------------------------------------------- */
.reviews{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px) var(--col-gap)}
.reviews blockquote{margin:0}
/* U+2605 is outside the Geist subsets, so the stars fall back to the system
   font on purpose; the shape is the same everywhere */
.reviews .stars{
  font-size:1.5rem;line-height:1;letter-spacing:0.1em;
  margin-bottom:0.6em;color:var(--ink);
}
.reviews cite{display:block;font-style:normal;font-size:0.8125rem;font-weight:700;margin-top:1em;letter-spacing:0.01em}
@media (max-width:820px){.reviews{grid-template-columns:1fr}}

/* photographs ---------------------------------------------------------------- */
/* on a site about a camera the photographs are the evidence, so they get three
   columns instead of four: the same grid, bigger pictures */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.plate-set{font-family:var(--mono);font-size:0.6875rem;color:var(--mut);line-height:1.5}

/* text pages: support, terms, privacy, contact. One measure, headings that
   breathe, links that look like links because there is nothing else to click */
.page-body{max-width:var(--prose)}
.page-body h2{margin-top:clamp(38px,5.5vh,60px)}
.page-body h3{margin-top:clamp(26px,3.6vh,36px)}
.page-body ul{margin-top:var(--head-gap);padding-left:1.2em}
.page-body li + li{margin-top:0.4em}
.page-body a{text-decoration:underline;text-underline-offset:3px}
.lede{max-width:46ch}
.contact-grid{display:grid;grid-template-columns:0.85fr 1fr;gap:var(--col-gap);align-items:start}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr;gap:clamp(28px,6vw,40px)}}
.portrait{margin:0}
.portrait img{width:100%}
.portrait figcaption{font-family:var(--mono);font-size:0.75rem;color:var(--mut);margin-top:0.6em}

/* the photographs page leads with an h1 rather than a hero */
.page-title{font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem);letter-spacing:-0.03em;line-height:1.05;max-width:18ch}
.page-title + *{margin-top:var(--head-gap)}
[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
@media (max-width:820px){.plates{grid-template-columns:repeat(2,1fr)}}
.plates figure{margin:0}
.plates figcaption{margin-top:0.5em;font-size:0.6875rem;color:var(--mut);letter-spacing:0.04em}

/* the block that asks people to send a series of their own */
.submit{border-top:1px solid var(--rule);padding-top:clamp(26px,4vh,40px)}
.submit p{max-width:58ch}

/* lightbox: a native dialog, so escape, the focus trap and the backdrop are the
   browser's job. The cursor only changes once the script has run. */
.has-lightbox [data-gallery] figure img{cursor:zoom-in}
#lightbox{
  border:0;padding:0;background:transparent;color:#fff;
  /* the universal reset sets margin to 0, which pins a modal dialog to the top
     left corner, because the browser centres it with margin:auto */
  margin:auto;
  max-width:min(94vw,1200px);max-height:94vh;
}
#lightbox::backdrop{background:rgba(0,0,0,.9)}
.lb-figure{margin:0;display:grid;gap:14px}
#lightbox img{max-width:100%;max-height:76vh;width:auto;margin:0 auto;object-fit:contain}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.lb-cap{font-family:var(--mono);font-size:0.8125rem;line-height:1.5;margin:0}
.lb-controls{display:flex;align-items:center;gap:10px;flex:none}
.lb-pos{font-family:var(--mono);font-size:0.8125rem;font-variant-numeric:tabular-nums}
.lb-btn{
  background:none;border:1px solid rgba(255,255,255,.55);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:0.8125rem;
  padding:0.5em 0.8em;border-radius:var(--radius);cursor:pointer;
}
.lb-btn:hover{background:rgba(255,255,255,.16)}
.lb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ordinary plus: three real screens, capped so a 1292px tall shot does not
   run the whole column */
.plus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.plus-grid figure{margin:0}
.plus-grid img{max-width:250px;width:100%;aspect-ratio:620/1292;object-fit:contain}
.plus-grid h3{margin-top:1.1em}
.plus-grid .spec{margin-top:0.35em}
@media (max-width:820px){.plus-grid{grid-template-columns:1fr;gap:clamp(32px,7vw,48px)}}

/* essays ---------------------------------------------------------------------- */
.essay-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * clamp(10px,1.4vw,20px)) / 3.5);
  gap:clamp(10px,1.4vw,20px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-bottom:6px;
}
.strip figure{margin:0;scroll-snap-align:start}
.strip figcaption{margin-top:0.45em;font-size:0.6875rem;color:var(--mut);line-height:1.45}
.essay-list{list-style:none;border-top:1px solid var(--rule)}
.essay-list li{border-bottom:1px solid var(--rule);padding-block:1.05em}
.essay-list a{text-decoration:none;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.essay-list a:hover h3{text-decoration:underline;text-underline-offset:4px}
.essay-list time{font-size:0.8125rem;color:var(--mut);flex:none;font-variant-numeric:tabular-nums}

/* faq ----------------------------------------------------------------------- */
.faq{border-top:1px solid var(--rule)}
.faq > div{border-bottom:1px solid var(--rule);padding-block:1.5em}
.faq h3{margin-bottom:0.5em}
.faq p{max-width:62ch}

/* closing: the invitation, the concession, the terms, the action ------------- */
/* the one heading allowed above the h2 size: it asks, the others describe */
.closing h2{
  max-width:20ch;
  font-size:clamp(1.75rem,1.2rem + 2.2vw,2.75rem);
}
.closing .sub{margin-top:1.1em;max-width:46ch}
.closing .after{margin-top:clamp(28px,4vh,44px)}
/* the conditions sit under the button: same size as everything else, just later */
.closing .terms{margin-top:clamp(26px,4vh,40px);max-width:52ch}

/* footer ------------------------------------------------------------------------ */
.site-foot{padding-block:var(--band-pad) clamp(44px,7vh,72px)}
.foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.foot-cols ul{list-style:none}
.foot-cols li{margin-top:0.35em}
/* the address is longer than its column on narrow rails, so let it wrap.
   The padding takes the tap target past 24px, which the bare line box misses. */
.foot-cols a{text-decoration:none;overflow-wrap:anywhere;display:inline-block;padding-block:3px}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-cols .eyebrow{margin-bottom:0.6em}
@media (max-width:560px){.foot-cols{grid-template-columns:1fr 1fr}}
/* below the line: the legal pages, a rank lower than the footer links */
.colophon{
  margin-top:clamp(40px,6vh,72px);padding-top:1.3em;border-top:1px solid var(--rule);
  font-size:0.8125rem;color:var(--mut);
}
.colophon .legal{display:flex;gap:1.4em;margin-top:0.9em}
.colophon a{color:var(--mut);text-decoration:none}
.colophon a:hover{text-decoration:underline;text-underline-offset:3px}

/* placeholders Tom fills in ------------------------------------------------------ */
.todo{background:#FFF2A8;color:#111;box-shadow:0 0 0 2px #FFF2A8;font-family:var(--mono);font-weight:400}
@media (prefers-color-scheme:dark){.todo{background:#5C5210;color:#FFF;box-shadow:0 0 0 2px #5C5210}}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

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