/* Cali Samurai: shared look for the secondary pages (thank-you, privacy policy, disclaimer). */
@font-face { font-family: 'Anton'; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/anton-400.woff2) format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-weight: 400 900; font-style: normal; font-display: swap; src: url(fonts/schibsted-grotesk-var.woff2) format('woff2'); }
@font-face { font-family: 'Zen Old Mincho'; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/zen-old-mincho-700.woff2) format('woff2'); }

:root { --washi: #EBE6D8; --sumi: #1E1C1A; --red: #C0362C; --soft: #3a3632; }
* { box-sizing: border-box; }
/* Paper: two real textures (Desings\Assets\Textures\processed), white = no change, multiplied over washi at different scales. */
html { background-color: var(--washi); background-image: url(tex/paper-flecks-soft.jpg), url(tex/paper-fibre.jpg); background-size: 700px 700px, 512px 512px; background-blend-mode: multiply, multiply; color: var(--sumi); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--red); }
a:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
mark { background: #fff2cc; color: inherit; padding: 0 2px; }
.wrap { width: min(100% - 32px, 720px); margin: 0 auto; padding: 12px 0 40px; }
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; font-size: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--sumi); }
.top a { text-decoration: none; }

/* Big title: plain text first, then fit.js swaps in the ink version fitted exactly margin to margin. */
h1.big { margin: 14px 0 16px; }
h1.big .txt { display: block; font-family: 'Anton', 'Arial Narrow', sans-serif; font-weight: 400; font-size: clamp(44px, 13vw, 88px); line-height: .95; text-transform: uppercase; text-wrap: balance; }
h1.big svg.fit { display: none; width: 100%; height: auto; overflow: visible; }
h1.big.fitted .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1.big.fitted svg.fit { display: block; }
.sub { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: clamp(20px, 5.6vw, 30px); letter-spacing: .02em; text-transform: uppercase; line-height: 1; margin: -6px 0 18px; }
.voice { font-family: 'Zen Old Mincho', serif; font-weight: 700; font-size: clamp(20px, 5.4vw, 26px); line-height: 1.35; margin: 0 0 14px; text-wrap: pretty; }
.voice b { color: var(--red); }
/* Thank-you page: the spam note (emails often land in spam until we send from our own domain) */
.spam { border-left: 4px solid var(--red); padding: 2px 0 2px 14px; margin: 6px 0 0; }
.spam-head { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: clamp(20px, 5.2vw, 26px); letter-spacing: .02em; text-transform: uppercase; color: var(--red); line-height: 1.1; }
.spam p { margin: 6px 0 0; }
p { font-size: 15.5px; line-height: 1.55; }

/* Legal documents */
.doc .updated { font-size: 13px; color: var(--soft); margin: 0 0 22px; }
.doc h2 { font-weight: 800; font-size: 19px; line-height: 1.3; margin: 30px 0 8px; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.55; }
.doc p { margin: 0 0 10px; }
.doc ul { margin: 0 0 12px; padding-left: 20px; }
.doc li { margin: 0 0 4px; }
.doc li::marker { color: var(--red); }
.doc table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14px; line-height: 1.45; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid rgba(30, 28, 26, .35); overflow-wrap: break-word; }
.doc th { font-weight: 800; border-bottom: 1px solid var(--sumi); }
.doc hr { border: 0; border-top: 1px solid var(--sumi); margin: 26px 0; }

footer { margin-top: 36px; padding-top: 12px; border-top: 1px solid var(--sumi); }
.small { font-size: 12px; line-height: 1.5; color: var(--soft); margin: 0; }
@media (min-width: 760px) {
  .wrap { padding-top: 24px; }
  .top { font-size: 13px; padding-bottom: 9px; }
  h1.big { margin-top: 18px; }
}