/* Lupo — lupocamera site
   Single-theme by intent: the app is black, the site is black.
   Type: Helvetica Neue Light throughout, mono for utility labels. */

:root{
  --bg:#000000;
  --ink:#F2F2F2;
  --dim:#9A9A9A;
  --faint:#5E5E5E;
  --hair:#1A1A1A;
  --hair-soft:#111111;
  --card:#0A0A0A;
  --red:#CE1126;
  --red-lift:#E0263A;

  --sans:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --measure:660px;
  --wide:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:18px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 26px}
.wrap-wide{max-width:var(--wide);margin:0 auto;padding:0 26px}

img{max-width:100%;height:auto;display:block}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid #333;transition:border-color .15s ease,color .15s ease}
a:hover{border-bottom-color:var(--red)}
a:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){ a{transition:none} }

/* ---------- nav ---------- */
nav.site{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--wide);margin:0 auto;padding:30px 26px;
}
nav.site .home{border-bottom:none;display:block;flex:none}
nav.site .home img{width:72px}
nav.site .links{display:flex;gap:24px;align-items:center}
nav.site .links a{
  font-family:var(--mono);font-weight:400;
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--dim);border-bottom:none;padding-bottom:2px;
}
nav.site .links a:hover{color:var(--ink)}
nav.site .links a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--red)}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-weight:400;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--red);margin:0 0 22px;
}
.eyebrow.quiet{color:var(--faint)}

h1,h2,h3{font-weight:300;margin:0}
h1{font-size:clamp(30px,5.4vw,42px);line-height:1.1;letter-spacing:-.025em;margin-bottom:14px;text-wrap:balance}
h2{font-size:clamp(26px,4.4vw,38px);line-height:1.14;letter-spacing:-.024em;margin-bottom:18px;text-wrap:balance}
h3{font-size:19px;line-height:1.35;letter-spacing:-.01em;margin-bottom:8px;color:var(--ink)}

p{margin:0 0 18px;color:var(--dim)}
p:last-child{margin-bottom:0}
p strong,li strong{color:var(--ink);font-weight:400}
.lede{color:var(--ink);font-size:19px}

ul{margin:0 0 18px;padding-left:21px;color:var(--dim)}
li{margin-bottom:10px}
li::marker{color:var(--faint)}

/* ---------- hero ---------- */
.hero{padding:58px 0 0;text-align:center}
.hero .thesis{
  font-size:clamp(25px,3.9vw,38px);line-height:1.2;letter-spacing:-.022em;
  color:var(--ink);margin:0 auto 22px;max-width:27ch;text-wrap:balance;
}
.hero .sub{max-width:46ch;margin:0 auto 34px;font-size:18px}
.hero + .panel{padding-top:66px}

/* ---------- download button ---------- */
.get{display:flex;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:#FFFFFF;color:#000000;border:none;border-radius:999px;
  padding:17px 34px;font-family:var(--sans);font-weight:400;font-size:18px;letter-spacing:-.01em;
  transition:background .16s ease,transform .16s ease;
}
.btn:hover{background:#DEDEDE;border-bottom-color:transparent}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.btn .glyph{font-size:20px;line-height:1}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} .btn:active{transform:none} }
/* compound, not descendant — the note carries both classes on one element */
.get.note{
  display:block;
  font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:44px 0 0;text-align:center;
}

/* ---------- device shots ---------- */
.shot{margin:0}
.shot img{margin:0 auto;border-radius:4px}
.shot.portrait img{max-width:400px}
.shot figcaption .credit{
  display:block;margin-top:7px;
  font-size:9px;letter-spacing:.16em;color:#454545;text-transform:none;
}
.shot figcaption{
  font-family:var(--mono);font-weight:400;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);margin-top:20px;text-align:center;
}

/* ---------- sections ---------- */
.panel{padding:120px 0}
.panel.tight{padding:88px 0}
.panel .inner{max-width:var(--measure);margin:0 auto;text-align:center}
.panel .inner.left{text-align:left}
.panel .inner p{margin-left:auto;margin-right:auto;max-width:52ch}
.panel .inner.left p{margin-left:0;margin-right:0}

.statement{
  font-size:clamp(24px,4vw,34px);line-height:1.24;letter-spacing:-.022em;
  color:var(--ink);max-width:20ch;margin:0 auto;text-wrap:balance;
}

/* images sit closer to the copy they illustrate */
.panel:has(.shot){padding-top:52px;padding-bottom:48px}
.panel:has(.shot) + .panel{padding-top:52px}
.hero + .panel:has(.shot){padding-top:60px}

.rule{border:none;border-top:1px solid var(--hair-soft);margin:0}

/* reveal — one restrained motion cue */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- support page ---------- */
section.block{padding:64px 0;border-top:1px solid var(--hair-soft)}
section.block:first-of-type{border-top:none}

.contact{
  background:var(--card);border:1px solid var(--hair);border-radius:6px;
  padding:32px 30px;margin-top:34px;
}
.contact .eyebrow{margin-bottom:16px}
.contact .addr{font-size:clamp(19px,3.4vw,24px);letter-spacing:-.014em;word-break:break-all;color:var(--ink);margin:0}
.contact .addr a{border-bottom:1px solid var(--red)}
.contact p.note{margin:16px 0 0;font-size:16px}

.faq{display:flex;flex-direction:column}
details{border-top:1px solid var(--hair-soft)}
details:last-child{border-bottom:1px solid var(--hair-soft)}
summary{
  cursor:pointer;list-style:none;padding:20px 36px 20px 0;position:relative;
  font-size:18px;color:var(--ink);
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:19px;color:var(--faint);line-height:1;
}
details[open] summary::after{content:"−";color:var(--red)}
summary:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:2px}
details .body{padding:0 0 24px}
details .body p{margin-bottom:14px}
details .body p:last-child{margin-bottom:0}

/* ---------- legal pages ---------- */
.doc h2{margin-top:48px;font-size:23px;letter-spacing:-.014em}
.doc h2:first-of-type{margin-top:0}
.doc .updated{
  font-family:var(--mono);font-weight:400;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 42px;
}
.doc a{word-break:break-word}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--hair);margin-top:0}
footer.site .bar{
  max-width:var(--wide);margin:0 auto;padding:40px 26px 80px;
  display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;
}
footer.site .bar img{width:58px;opacity:.85}
footer.site a,footer.site span{
  font-family:var(--mono);font-weight:400;
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--faint);border-bottom:none;
}
footer.site a:hover{color:var(--ink)}
footer.site .spacer{margin-left:auto}

@media (max-width:640px){
  body{font-size:17px}
  nav.site{padding:22px 20px}
  nav.site .links{gap:18px}
  .panel{padding:84px 0}
  .panel.tight{padding:64px 0}
  .hero{padding-top:52px}
  .shot.portrait img{max-width:300px}
  footer.site .bar{padding:32px 20px 64px}
  footer.site .spacer{margin-left:0;flex-basis:100%}
}