/* Rien ne presse - Talia Halawi. The booklet that comes alive. Paper, sky-blue dots, olive marbling. Mobile first. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;1,6..96,400;1,6..96,500&family=Codystar:wght@400&display=swap');
:root { --paper: #fefff7; --ink: #23231c; --ink-soft: #4b4a3a; --sky: #9fe2fc; --sky-mid: #6ec9f2; --sky-deep: #2e9fd8; --sky-ink: #1a6f9c; --olive: #b8b263; --olive-deep: #514d36; --ease: cubic-bezier(.22, .61, .36, 1); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: italic 400 18px/1.6 "Bodoni Moda", Georgia, "Times New Roman", serif; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 3px; }
.ui { font: 500 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.dot { font-family: Codystar, "Courier New", monospace; font-style: normal; font-weight: 400; color: var(--sky-deep); letter-spacing: .06em; line-height: 1; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 18px; background: rgba(254, 255, 247, .9); backdrop-filter: blur(8px); border-bottom: 1px dotted var(--sky-mid); }
.brand { text-decoration: none; white-space: nowrap; } .brand .dot { font-size: 22px; }
.nav { display: flex; gap: 6px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; text-decoration: none; color: var(--ink-soft); transition: background .2s, color .2s; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--sky); color: var(--ink); }
@media (max-width: 480px) { .brand .dot { font-size: 17px; } .nav a { padding: 0 8px; font-size: 12px; letter-spacing: .04em; white-space: nowrap; } .top { padding: 8px 12px; } }
.ticker { overflow: hidden; white-space: nowrap; background: var(--sky); color: #fff; padding: 9px 0; }
.ticker span { display: inline-block; padding-right: 2em; font: 400 22px Codystar, monospace; letter-spacing: .08em; animation: slide 26s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }
.wrap { max-width: 980px; margin: 0 auto; padding: 26px 20px 50px; }
.hero { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 34px; align-items: center; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } }
.paper { position: relative; aspect-ratio: 1748 / 2480; background: #fff; border-radius: 3px; overflow: hidden; box-shadow: 0 18px 40px rgba(81, 77, 54, .18), 0 2px 6px rgba(0, 0, 0, .06); }
.paper img { width: 100%; height: 100%; object-fit: cover; }
h1 { font-size: clamp(38px, 7vw, 76px); margin: 0 0 10px; }
h2 { font-size: clamp(24px, 4vw, 36px); margin: 36px 0 10px; }
p { margin: 0 0 14px; max-width: 62ch; }
.lead { font-size: clamp(20px, 2.6vw, 25px); color: var(--ink-soft); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s; }
.btn:hover { background: var(--sky-ink); border-color: var(--sky-ink); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px dotted var(--ink); }
.btn.ghost:hover { background: var(--sky); border-color: var(--sky); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.steps li { position: relative; padding-left: 44px; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--sky-mid); color: #fff; font: 700 15px/30px system-ui, sans-serif; font-style: normal; text-align: center; }
.pages { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; }
@media (max-width: 560px) { .pages { grid-template-columns: 1fr; } }
.pages figure { margin: 0; }
.pages figcaption { margin-top: 8px; color: var(--ink-soft); font-size: 16px; }
.qr-card { display: grid; justify-items: center; gap: 12px; padding: 24px; border: 2px dotted var(--sky-deep); border-radius: 18px; background: #fff; max-width: 420px; margin: 18px auto; text-align: center; }
.qr-card img { width: min(70vw, 300px); height: auto; }
.dots-line { height: 6px; background: radial-gradient(circle, var(--sky-mid) 2px, transparent 2.5px) 0 0 / 12px 6px repeat-x; animation: simmer 6s linear infinite; max-width: 240px; margin: 0 auto 16px; }
@keyframes simmer { to { background-position: 24px 0; } }
footer { padding: 24px 20px 40px; text-align: center; color: var(--ink-soft); font-size: 15px; }
.hidden { display: none !important; }
.a-enter-vr, .a-enter-ar, .a-orientation-modal { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }