/* Belford's own site. The brand is silver on slate (the wordmark's two
   colours); reading surfaces are a cool off-white so the product's own
   screens, which are ivory, sit on them as photographs rather than as part
   of the page. Type: Libre Caslon Text for headings (the wordmark's face),
   Lora for reading, Inter for labels. */

@font-face{font-family:"Libre Caslon Text";src:url(/fonts/libre-caslon-text-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/fonts/libre-caslon-text-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Lora";src:url(/fonts/lora.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Lora";src:url(/fonts/lora-italic.woff2) format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter.woff2) format("woff2");font-weight:400 600;font-display:swap}

:root{
  --slate:#333A41; --slate-deep:#262C32; --silver:#C9CBCE; --silver-soft:#E4E5E7;
  --ground:#F5F5F3; --panel:#ECECE8; --ink:#22272C; --muted:#545B62; --line:#D6D7D3;
  --heading:"Libre Caslon Text",Georgia,serif;
  --body:"Lora",Georgia,serif;
  --label:"Inter",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
[hidden]{display:none!important}

.skip{position:absolute;left:-9999px;top:8px;background:#fff;color:var(--ink);padding:8px 14px;z-index:10;font-family:var(--label)}
.skip:focus{left:16px}
:focus-visible{outline:2px solid #6E8FB0;outline-offset:3px}

.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.narrow{max-width:760px}

.eyebrow{font-family:var(--label);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
h1,h2{font-family:var(--heading);font-weight:400;letter-spacing:.005em;line-height:1.15}
h1{font-size:clamp(38px,6vw,64px)}
h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:18px;max-width:22em}
h3{font-family:var(--heading);font-weight:700;font-size:21px;line-height:1.3;margin-bottom:10px}
p+p{margin-top:14px}
.intro{color:var(--muted);max-width:40em;margin-bottom:40px}
.note{font-size:15.5px;color:var(--muted)}
.quote{font-style:italic}

/* Buttons are at least 44px tall: they are the page's one action. */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:4px;font-family:var(--label);font-weight:600;font-size:15px;
  text-decoration:none;background:var(--silver);color:var(--slate-deep);border:1px solid var(--silver);transition:background-color .2s,color .2s,border-color .2s}
.btn:hover{background:#fff;border-color:#fff}
.btn-line{background:transparent;color:var(--silver);border-color:rgba(201,203,206,.55)}
.btn-line:hover{background:rgba(255,255,255,.08);color:#fff;border-color:#fff}
.btn-quiet{min-height:44px;padding:0 16px;font-size:14px;background:transparent;color:var(--silver);border-color:rgba(201,203,206,.4)}
.btn-quiet:hover{background:rgba(255,255,255,.08);color:#fff;border-color:#fff}
.btn-silver{background:var(--silver);color:var(--slate-deep)}

/* The slate head: the wordmark, the claim and the one action. */
.top{background:var(--slate);color:var(--silver-soft)}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px}
.plate img{width:168px}
.hero{padding-top:72px;padding-bottom:96px}
.hero .eyebrow{color:var(--silver)}
.hero h1{color:#F2F3F4;margin-bottom:26px}
.lede{font-size:clamp(18px,2vw,21px);max-width:36em;color:var(--silver-soft)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

.band{padding:96px 0}
.band-panel{background:var(--panel)}
.band-slate{background:var(--slate);color:var(--silver-soft)}
.band-slate .eyebrow{color:var(--silver)}
.band-slate h2{color:#F2F3F4}
.band-slate .intro{color:var(--silver)}

/* A screen beside what it shows. */
.pair{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:64px}
.pair:first-of-type{margin-top:0}
.pair-flip .shot{order:2}
.pair-narrow{grid-template-columns:minmax(0,.7fr) minmax(0,1fr)}
.pair-text h3+p{margin-top:0}
.pair-text p+h3{margin-top:30px}
.shot{background:#F8F6F1;border:1px solid var(--line);border-radius:8px;padding:10px;box-shadow:0 18px 40px -24px rgba(34,39,44,.35)}
.shot img{border-radius:4px}
.shot figcaption{font-family:var(--label);font-size:13px;line-height:1.5;color:var(--muted);padding:10px 4px 2px}
.shot-phone{max-width:320px;justify-self:center;border-radius:22px;padding:12px}
.shot-phone img{border-radius:14px}

.rules{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;margin-top:40px}
.rules li{border-top:1px solid var(--line);padding-top:18px}
.rules strong{display:block;font-family:var(--heading);font-weight:700;font-size:19px;line-height:1.35;margin-bottom:6px}

/* Films. */
.voice{border:0;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-bottom:28px;font-family:var(--label);font-size:15px}
.voice legend{float:left;margin-right:8px;font-weight:600;color:var(--silver)}
.voice label{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.voice input{width:18px;height:18px;accent-color:var(--silver)}
.films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.film video{width:100%;aspect-ratio:16/9;background:#111;border-radius:6px}
.film h3{color:#F2F3F4;margin-top:16px}
.film p{color:var(--silver);font-size:16px}
.film .length{font-family:var(--label);font-size:13px;letter-spacing:.06em;color:var(--silver);margin-top:6px}

.foot{background:var(--slate-deep);color:var(--silver);font-family:var(--label);font-size:13.5px;line-height:1.7;padding:44px 0}
.foot-row{display:flex;gap:32px;align-items:flex-start}
.foot img{width:120px;flex:none;margin-top:4px}
.foot a{color:var(--silver-soft)}
.foot p+p{margin-top:8px}

@media (max-width:860px){
  .pair,.pair-narrow{grid-template-columns:minmax(0,1fr);gap:24px}
  .pair-flip .shot{order:0}
  .rules,.films{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  body{font-size:16px}
  .band{padding:64px 0}
  .hero{padding-top:44px;padding-bottom:64px}
  .top-row .btn-quiet{display:none}
  .plate img{width:140px}
  .hero-actions .btn{width:100%;justify-content:center}
  .shot{padding:6px}
  .foot-row{flex-direction:column;gap:16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}