/* The Whispers · Shanghai — site styles.
   Brand tokens come from the FINAL Instagram kit (15. 9. 2026):
   ivory #F7F4EE · black #141414 · red #A8122B · Libre Caslon Display / Text · Inter Tight.
   Fonts are self-hosted (fonts/) so the page renders the same inside mainland China. */

@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/libre-caslon-display-400.woff2) format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/libre-caslon-text-400.woff2) format('woff2')}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/libre-caslon-text-400i.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-tight-600.woff2) format('woff2')}

:root{
  --ivory:#F7F4EE;
  --ink:#141414;
  --red:#A8122B;
  --mute:#5f5b54;
  --rule:rgba(20,20,20,.18);
  --display:'Libre Caslon Display',Georgia,'Times New Roman',serif;
  --text:'Libre Caslon Text',Georgia,'Times New Roman',serif;
  --label:'Inter Tight',Inter,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}
html{background:var(--ivory);color-scheme:light only;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100svh;display:flex;flex-direction:column;
  background:var(--ivory);color:var(--ink);
  font:400 18px/1.55 var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:2px}
::selection{background:var(--red);color:var(--ivory)}

.label{
  font:600 12px/1 var(--label);letter-spacing:.28em;text-transform:uppercase;color:var(--mute);
}

/* ---------- home ---------- */
.home{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(48px,9vh,96px) 24px clamp(40px,7vh,72px);
}
.stamp{width:clamp(112px,26vw,168px);aspect-ratio:1/1}
.wordmark{margin:clamp(20px,4vh,36px) 0 0;line-height:0}
.wordmark img{width:clamp(240px,62vw,520px)}
.line{
  margin:clamp(28px,5vh,48px) 0 0;max-width:22ch;
  font:400 clamp(24px,3.4vw,38px)/1.18 var(--display);letter-spacing:-.005em;
}
.who{color:var(--red);font:italic 400 1em/1 var(--text)}

.contacts{
  list-style:none;margin:clamp(40px,7vh,72px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 56px;
}
.contacts li{display:flex;flex-direction:column;align-items:center;gap:10px}
.contacts a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  font:400 19px/1.2 var(--text);border-bottom:1px solid var(--rule);
  transition:border-color .2s ease,color .2s ease;
}
.contacts a:hover{color:var(--red);border-color:var(--red)}

/* ---------- footer ---------- */
.foot{
  margin:0 24px;padding:20px 0 max(20px,env(safe-area-inset-bottom));
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;
  font:600 11px/1 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 4px}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;transition:color .2s ease}
.foot a:hover{color:var(--red)}
.foot p{margin:0;padding:12px 0}
.foot .sep{opacity:.5}

/* ---------- documents (privacy, terms, data deletion, 404) ---------- */
.top{margin:0 24px;padding:8px 0;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:14px}
.top a{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:600 12px/1 var(--label);letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
.top a:hover{color:var(--red)}
.top img{width:30px;height:30px}

.doc{flex:1;width:100%;max-width:700px;margin:0 auto;padding:clamp(40px,7vh,72px) 24px clamp(56px,9vh,96px)}
.doc h1{margin:0 0 10px;font:400 clamp(34px,6vw,52px)/1.06 var(--display);letter-spacing:-.005em}
.doc .date{margin:0 0 32px;color:var(--mute);font:italic 400 17px/1.5 var(--text)}
.doc h2{margin:36px 0 10px;font:600 12px/1.4 var(--label);letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.doc p{margin:0 0 1em;font:400 18px/1.6 var(--text)}
.doc p:last-child{margin-bottom:0}
.doc a{color:var(--red);border-bottom:1px solid rgba(168,18,43,.35)}
.doc a:hover{border-color:var(--red)}
.doc strong{font-weight:700;font-family:var(--text)}

.doc.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.doc.center .stamp{margin-bottom:28px}
.doc.center p{max-width:26ch;font:400 clamp(24px,3.4vw,36px)/1.2 var(--display)}
.doc.center .back{margin-top:36px;display:inline-flex;align-items:center;min-height:44px;font:400 19px/1.2 var(--text);color:var(--ink);border-bottom:1px solid var(--rule)}
.doc.center .back:hover{color:var(--red);border-color:var(--red)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.foot,.top{display:none}body{min-height:0}}