@charset "UTF-8";
:root{
  --paper:#f9f9f9;
  --ink:#111111;
  --muted:#6d6d6d;
  --line:#e3e3e0;
  --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16.8px/1.75 Inter,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1.5px solid var(--ink);outline-offset:5px}
img{display:block;width:100%;height:auto}
figure,h1,h2,p{margin:0}
h1,h2{font:400 clamp(34px,3.6vw,46px)/1.24 Cardo,Georgia,'Times New Roman',serif;letter-spacing:-.005em;text-wrap:balance}

.skip{position:absolute;left:16px;top:-100px;z-index:20;padding:10px;background:#fff}
.skip:focus{top:12px}

/* ---- header ---- */
header{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:26px max(24px,5vw);
}
.wordmark{font-size:15px;font-weight:500;letter-spacing:-.01em}
nav{display:flex;gap:30px;font-size:14px}
nav a{color:var(--muted);padding:4px 0}
nav a:hover{color:var(--ink)}

/* ---- hero ---- */
.hero{
  text-align:center;
  padding:78px max(24px,5vw) 62px;
  display:flex;flex-direction:column;align-items:center;
}
.hero h1{max-width:14ch}
.hero p{
  margin-top:20px;max-width:44ch;
  font-size:15.5px;line-height:1.72;color:var(--muted);
}
.pill{
  display:inline-block;margin-top:30px;
  background:var(--ink);color:var(--paper);
  font-size:13.5px;font-weight:500;
  padding:12px 22px;border-radius:6px;
  transition:opacity .2s;
}
.pill:hover{opacity:.82}

/* ---- images ---- */
.full,.pair figure{border-radius:var(--radius);overflow:hidden}
.full{
  max-width:1180px;margin:0 auto;
  padding:0;width:calc(100% - max(48px,10vw));
}
.full img{aspect-ratio:16/10;object-fit:cover;object-position:50% 42%}

/* ---- centred text blocks ---- */
.note,.block,.contact{
  max-width:1180px;margin:0 auto;
  padding:104px max(24px,5vw) 0;
  text-align:center;
}
.note p,.block>p{
  margin:20px auto 0;max-width:52ch;
  font-size:15.5px;line-height:1.75;color:var(--muted);
}

/* ---- image pairs ---- */
.pair{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
  margin-top:46px;text-align:left;
}
.pair img{aspect-ratio:3/2;object-fit:cover}
.pair figure{position:relative}
.pair figcaption{
  position:absolute;left:16px;bottom:14px;
  color:#fff;font-size:12.5px;font-weight:500;
  letter-spacing:.02em;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}

/* ---- product list, no images ---- */
.types{
  margin:56px auto 0;max-width:600px;
  padding:0 0 0 20px;
  text-align:left;list-style:disc;
}
.types li{
  margin-bottom:15px;padding-left:4px;
  font-size:14.8px;line-height:1.72;color:var(--muted);
}
.types li::marker{color:#b9b9b4}
.types b{
  font:400 17px/1.5 Cardo,Georgia,serif;
  color:var(--ink);margin-right:7px;
}

/* ---- quiet spec line ---- */
.line{
  max-width:1180px;margin:104px auto 0;
  padding:0 max(24px,5vw);
  text-align:center;font-size:13px;color:var(--muted);
}

/* ---- contact ---- */
.contact{padding-bottom:104px}
.mark{width:60px;height:auto;margin:0 auto 26px;border-radius:5px}
.contact p{
  margin:18px auto 0;max-width:40ch;
  font-size:15.5px;color:var(--muted);
}

/* ---- footer ---- */
footer{
  border-top:1px solid var(--line);
  margin:0 max(24px,5vw);
  padding:30px 0 38px;
  display:flex;flex-wrap:wrap;gap:8px 26px;
  justify-content:center;align-items:center;
  text-align:center;
  font-size:13px;color:var(--muted);
}

/* ---- entrance ---- */
.hero h1,.hero p,.hero .pill{animation:rise .8s both}
.hero p{animation-delay:.08s}
.hero .pill{animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  header{padding:20px 22px}
  nav{gap:20px;font-size:13.5px}
  .hero{padding:52px 22px 46px}
  .hero h1{max-width:none}
  .full{width:calc(100% - 44px)}
  .full img{aspect-ratio:4/5}
  .note,.block,.contact{padding:72px 22px 0}
  .pair{grid-template-columns:1fr;gap:16px;margin-top:34px}
  .line{margin-top:72px;padding:0 22px;line-height:2.1}
  .contact{padding-bottom:72px}
  .types{margin-top:40px;padding-left:19px}
  .types li{margin-bottom:16px}
  footer{margin:0 22px;justify-content:center;gap:6px 20px;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1,.hero p,.hero .pill{animation:none}
}