/* ══════════════════════════════════════════════════════════════════════════ css/stories.css — PATIENT STORIES BY COUNTRY (fw-sty) /stories and /stories/, built 9 Oct 2026, journal redesign the same day (owner: "emotional story telling pages need clean section breaks, journal style premiumness"). Its idea is A JOURNAL OF FAMILIES: §1 the opening on the TOOLS-PAGE PATTERN: a compact title with three clay icons in rings and three plain promises; the hub then shows "Where would you like to read from?" as a JOURNEY LINE of country stops (photograph in a ring, flag badge, count); a country shows its CONTENTS (01, 02, 03) as jumps to the chapters §2 hub: one story as an open JOURNAL SPREAD (the opening line large and signed; the story with its paragraphs numbered I, II, III) country: the country's photograph as a full-width COVER carrying the opening line of its first story §3 hub: every story as a DATED JOURNAL ENTRY (began, country, where now | title, line, read in place | the writer), chips, Show every story country: every story a CHAPTER: the number beside the title and byline, the facts in one strip, the story (opening paragraph set larger, signed) beside its pull quote; an ornament between chapters §4 the clinics as PHOTO TILES with the stories told at each (jumps to the chapters) and an "every clinic here" tile; then the other countries on the hub's journey line §5 the invitation: "The next page is yours" PALETTE: blue is the page's voice (words in --bl-ink / --bl-d), pink the actions and the quotation marks, and each "where they are now" group a quiet tint (parents mint, expecting pink, still on the journey gold, preserved purple). No boxes, no radius on photographs, no inline styles, no max-width: reading measure comes from the grid columns. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-sty-page{ --pad:28px; --ink:var(--dk-d); --line:color-mix(in srgb, var(--dk) 10%, transparent); --fade:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); --fade-v:linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent); --sec:clamp(32px, 5.8vh, 64px); --gap:clamp(28px, 5vw, 80px); --glow:0 8px 20px -8px color-mix(in srgb, var(--pk-dd) 70%, transparent); --glow-lg:0 14px 28px -10px color-mix(in srgb, var(--pk-dd) 75%, transparent); --ease:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); background:var(--wh); } .fw-sty{display:block;position:relative;background:var(--wh)} .fw-sty em{font-family:var(--ff);font-style:normal} .fw-sty .fw-ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fw-sty-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-sty-sec{position:relative;padding:var(--sec) 0} .fw-sty-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-sty-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(18px, 2.8vh, 30px)} .fw-sty-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:14px 40px;flex-wrap:wrap} .fw-sty-head--row > div:first-child{display:flex;flex-direction:column;gap:8px;min-width:0} .fw-sty-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bl-ink)} .fw-sty-eyebrow img{width:34px;height:34px;object-fit:contain;flex:none} .fw-sty-eyebrow--plain::before{content:"";width:22px;height:1px;background:currentColor} .fw-sty-flag{display:inline-block;width:22px;height:16px;flex:none;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px var(--line)} .fw-sty-sample{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:999px;background:var(--go-l);color:var(--go-ink);font-size:11.5px;font-weight:700;vertical-align:2px} .fw-sty-h2{margin:0;font-family:var(--ff);font-weight:600;color:var(--ink);font-size:clamp(26px, 4.2vh, 40px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance} .fw-sty-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-sty-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border:0;border-radius:999px;background:linear-gradient(150deg, var(--pk-d), var(--pk-dd));box-shadow:var(--glow);color:var(--wh);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease), box-shadow .25s var(--ease)} .fw-sty-btn:hover{color:var(--wh);transform:translateY(-2px);box-shadow:var(--glow-lg)} .fw-sty-btn .fw-ico{width:18px;height:18px} .fw-sty-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--pk-dd);transition:color .2s var(--ease)} .fw-sty-link .bi-arrow-right{transition:transform .25s var(--ease)} .fw-sty-link:hover{color:var(--pk-ink)} .fw-sty-link:hover .bi-arrow-right{transform:translateX(4px)} .fw-sty-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(18px, 3vh, 28px)} .fw-sty-ver{display:inline-flex;align-items:center;gap:5px;margin:0;padding:2px 10px 2px 7px;border-radius:999px;background:var(--mt-l);color:var(--mt-ink);font-size:12px;font-weight:700;white-space:nowrap} .fw-sty-ver .fw-ico{width:14px;height:14px} .fw-sty-tag{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700;background:var(--g1);color:var(--g7);white-space:nowrap} .fw-sty-tag--parents{background:var(--mt-l);color:var(--mt-ink)} .fw-sty-tag--expecting{background:var(--pk-l);color:var(--pk-ink)} .fw-sty-tag--journey{background:var(--go-l);color:var(--go-ink)} .fw-sty-tag--preserved{background:var(--pu-l);color:var(--pu-ink)} .fw-sty-av{display:block;width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;background:var(--g0)} .fw-sty-av.is-initial{display:grid;place-items:center;background:linear-gradient(150deg, var(--bl-l), var(--pk-l));color:var(--bl-ink);font-family:var(--ff);font-size:16px;font-weight:700} .fw-sty-av--lg{width:58px;height:58px;font-size:22px} /* a signature: a short pink rule, the name, where they are */ .fw-sty-sig{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;font-size:14px;color:var(--g6)} .fw-sty-sig::before{content:"";align-self:center;width:28px;height:2px;border-radius:2px;background:var(--pk-d)} .fw-sty-sig span{font-family:var(--ff);font-size:16px;font-weight:600;color:var(--ink)} @keyframes fw-sty-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} /* ══════════════════════════════════════════════════════════════ 01 · THE OPENING — the tools-page title ══════════════════════════════════════════════════════════════ */ .fw-sty .fw-sty-mast{position:relative;padding-bottom:clamp(22px, 3.6vh, 40px)} .fw-sty-title{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:14px 40px} .fw-sty .fw-sty-h1{margin:0;font-size:clamp(34px, 5.8vh, 56px);letter-spacing:-.03em;background:linear-gradient(100deg, var(--dk-d) 30%, var(--bl-d) 70%, var(--pk-d));-webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance} .fw-sty-lead{margin:8px 0 0;font-size:clamp(15.5px, 2.1vh, 18px);line-height:1.55;color:var(--g6);text-wrap:pretty} .fw-sty-lead b{color:var(--pk-dd)} .fw-sty-title__side{display:grid;justify-items:end;gap:12px} .fw-sty-title__art{display:flex} .fw-sty-title__art > img,.fw-sty-title__flag{width:clamp(52px, 7vh, 64px);aspect-ratio:1;object-fit:contain;padding:6px;border-radius:50%;background:var(--wh);box-shadow:0 8px 22px var(--bl-ring), 0 0 0 3px var(--wh);animation:fw-sty-float 6s ease-in-out infinite} .fw-sty-title__art > * + *{margin-left:-12px} .fw-sty-title__art > :nth-child(2){animation-delay:-2s} .fw-sty-title__art > :nth-child(3){animation-delay:-4s} .fw-sty-title__flag{display:grid;place-items:center;padding:0;overflow:hidden} .fw-sty-title__flag img{width:100%;height:100%;object-fit:cover} .fw-sty-trust{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 16px;margin:0;padding:0;list-style:none} .fw-sty-trust li{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--g7)} .fw-sty-trust .bi{color:var(--bl-d);font-size:14px} /* the hub's journey line: a country photograph in each ring */ .fw-sty-journey{position:relative;display:grid;gap:clamp(16px, 2.6vh, 24px);margin-top:clamp(20px, 3.4vh, 34px);padding-top:clamp(16px, 2.6vh, 24px)} .fw-sty-journey::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sty-journey__q,.fw-sty-contents__k{display:flex;align-items:center;gap:14px;margin:0} .fw-sty-journey__q img,.fw-sty-contents__k img{width:52px;aspect-ratio:1;object-fit:contain;animation:fw-sty-float 6s ease-in-out infinite} .fw-sty-journey__q span,.fw-sty-contents__k span{display:grid;gap:2px} .fw-sty-journey__q b,.fw-sty-contents__k b{font-family:var(--ff);font-size:clamp(20px, 3vh, 26px);font-weight:700;color:var(--ink)} .fw-sty-journey__q small,.fw-sty-contents__k small{font-size:14.5px;color:var(--g6)} .fw-sty-stops{position:relative;display:grid;grid-template-columns:repeat(var(--n, 5), minmax(0, 1fr));gap:clamp(10px, 1.6vw, 24px);margin:0;padding:0;list-style:none} .fw-sty-n1{--n:1}.fw-sty-n2{--n:2}.fw-sty-n3{--n:3}.fw-sty-n4{--n:4}.fw-sty-n5{--n:5}.fw-sty-n6{--n:6}.fw-sty-n7{--n:7} .fw-sty-stops::before{content:"";position:absolute;left:calc(50% / var(--n));right:calc(50% / var(--n));top:46px;height:3px;border-radius:3px;background:linear-gradient(90deg, var(--bl-l2), var(--pk-l2), var(--mt-l2))} .fw-sty-stop{position:relative;display:grid;justify-items:center;gap:6px;width:100%;padding:0 4px 6px;text-align:center;color:inherit} .fw-sty-stop__dot{position:relative;width:94px;height:94px;border-radius:50%;background:var(--bl-l);box-shadow:0 0 0 5px var(--wh), inset 0 0 0 2px var(--bl-l2), 0 14px 28px -16px var(--bl);transition:transform .35s var(--ease-pop), box-shadow .25s var(--ease)} .fw-sty-stop__dot > img:first-child{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover} .fw-sty-stop__flag{position:absolute;right:-2px;bottom:2px;width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--wh), 0 4px 10px -4px var(--dk)} .fw-sty-stop b{margin-top:8px;font-size:16px;font-weight:700;color:var(--ink);transition:color .2s var(--ease)} .fw-sty-stop small{font-size:13px;font-weight:600;color:var(--bl-ink)} .fw-sty-stop:hover .fw-sty-stop__dot{transform:translateY(-4px);box-shadow:0 0 0 5px var(--wh), inset 0 0 0 3px var(--pk-d), 0 18px 34px -14px var(--pk)} .fw-sty-stop:hover b{color:var(--pk-dd)} /* one country: the contents, numbered like a journal */ .fw-sty-contents{position:relative;display:grid;gap:clamp(14px, 2.2vh, 20px);margin-top:clamp(20px, 3.4vh, 34px);padding-top:clamp(16px, 2.6vh, 24px)} .fw-sty-contents::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sty-toc{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr));gap:0 clamp(20px, 3vw, 48px);margin:0;padding:0;list-style:none} .fw-sty-toc li{position:relative} .fw-sty-toc li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fade)} .fw-sty-toc a{display:grid;grid-template-columns:48px minmax(0, 1fr) auto;align-items:center;gap:14px;padding:14px 0;color:inherit} .fw-sty-toc a::after{content:"\F138";font-family:bootstrap-icons;font-size:15px;color:var(--g4);transition:transform .25s var(--ease), color .2s var(--ease)} .fw-sty-toc a:hover::after{color:var(--pk-dd);transform:translateY(2px)} .fw-sty-toc__n{font-family:var(--ff);font-size:28px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--pk-l2);font-variant-numeric:tabular-nums;transition:color .2s var(--ease)} .fw-sty-toc a:hover .fw-sty-toc__n{color:var(--pk-d)} .fw-sty-toc__t{display:grid;gap:2px;min-width:0} .fw-sty-toc__t b{overflow:hidden;font-size:15.5px;font-weight:600;color:var(--ink);text-overflow:ellipsis;white-space:nowrap} .fw-sty-toc__t small{font-size:13px;color:var(--g6)} /* ══════════════════════════════════════════════════════════════ 02a · THE HUB — one story as an open journal spread ══════════════════════════════════════════════════════════════ */ .fw-sty-spread{background:linear-gradient(180deg, var(--bl-wash), var(--wh) 70%)} .fw-sty-spread__grid{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:var(--gap);align-items:start} .fw-sty-spread__open{display:flex;flex-direction:column;align-items:flex-start;gap:18px} .fw-sty-spread__q{position:relative;margin:6px 0 0;padding-top:46px;font-family:var(--ff);font-size:clamp(26px, 4vh, 38px);font-weight:500;line-height:1.3;letter-spacing:-.02em;color:var(--ink);text-wrap:pretty} .fw-sty-spread__q::before{content:"\201C";position:absolute;left:-4px;top:-18px;font-family:Georgia, serif;font-size:110px;line-height:1;color:var(--pk-l2)} .fw-sty-spread__page{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:var(--gap);margin-left:calc(var(--gap) * -1)} .fw-sty-spread__page::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-sty-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;font-size:13.5px;font-weight:600;color:var(--g6)} .fw-sty-numbered{display:flex;flex-direction:column;margin-top:8px} .fw-sty-numbered p{position:relative;display:grid;grid-template-columns:44px minmax(0, 1fr);gap:0 12px;margin:0;padding:16px 0;font-size:16.5px;line-height:1.75;color:var(--g7)} .fw-sty-numbered p + p{border-top:1px dashed var(--g2)} .fw-sty-numbered__n{font-family:var(--ff);font-size:14px;font-weight:700;letter-spacing:.08em;line-height:1.9;color:var(--bl-ink)} /* ══════════════════════════════════════════════════════════════ 02b · ONE COUNTRY — the cover ══════════════════════════════════════════════════════════════ */ .fw-sty-cover{position:relative;margin:0;height:clamp(300px, 50vh, 500px);overflow:hidden;background:linear-gradient(120deg, var(--bl-d), var(--pk-dd))} .fw-sty-cover img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover} .fw-sty-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, color-mix(in srgb, var(--dk-d) 78%, transparent) 0%, color-mix(in srgb, var(--dk-d) 40%, transparent) 50%, transparent 80%)} .fw-sty-cover__cap{position:absolute;left:var(--pad);bottom:clamp(26px, 5vh, 56px);z-index:1;display:flex;flex-direction:column;gap:14px;width:min(100% - var(--pad) * 2, 60%)} .fw-sty-cover__q{font-family:var(--ff);font-size:clamp(24px, 3.8vh, 38px);font-weight:500;line-height:1.3;letter-spacing:-.02em;color:var(--wh);text-wrap:pretty} .fw-sty-cover__who{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:.04em;color:color-mix(in srgb, var(--wh) 85%, transparent)} .fw-sty-cover__who::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--pk)} /* ══════════════════════════════════════════════════════════════ 03a · THE HUB — dated journal entries ══════════════════════════════════════════════════════════════ */ .fw-sty-journal .fw-sty-head--row{align-items:center} .fw-sty-chips{display:flex;flex-wrap:wrap;gap:8px} .fw-sty-chips button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 15px;border:0;border-radius:999px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--g2);font-size:13.5px;font-weight:600;color:var(--g7);white-space:nowrap;cursor:pointer;transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease)} .fw-sty-chips button span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--g1);color:var(--g7);font-size:12px;font-weight:700} .fw-sty-chips button:hover{box-shadow:inset 0 0 0 1.5px var(--bl)} .fw-sty-chips button.is-on{background:var(--bl-d);color:var(--wh);box-shadow:0 8px 18px -10px var(--bl-d)} .fw-sty-chips button.is-on span{background:var(--wh);color:var(--bl-d)} .fw-sty-entries{margin:0;padding:0;list-style:none} .fw-sty-entry{position:relative;display:grid;grid-template-columns:minmax(160px, 2fr) minmax(0, 7fr) minmax(220px, 3fr);gap:16px clamp(22px, 3vw, 48px);align-items:start;padding:clamp(22px, 3.4vh, 32px) 0} .fw-sty-entry[hidden]{display:none} .fw-sty-entry::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sty-entry__when{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .fw-sty-entry__k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g5)} .fw-sty-entry__when b{font-family:var(--ff);font-size:17px;font-weight:600;color:var(--ink)} .fw-sty-entry__when a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--g7)} .fw-sty-entry__when a:hover{color:var(--pk-dd)} .fw-sty-entry__text{display:flex;flex-direction:column;gap:10px;min-width:0} .fw-sty-entry__title{margin:0;font-family:var(--ff);font-size:clamp(19px, 2.6vh, 22px);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-wrap:balance} .fw-sty-entry__q{margin:0;font-size:16px;line-height:1.65;color:var(--g7)} .fw-sty-entry__more summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--bl-d)} .fw-sty-entry__more summary::-webkit-details-marker{display:none} .fw-sty-entry__more summary .bi{font-size:11px;transition:transform .25s var(--ease)} .fw-sty-entry__more[open] summary .bi{transform:rotate(180deg)} .fw-sty-entry__body{position:relative;margin-top:12px;padding-left:18px} .fw-sty-entry__body::before{content:"";position:absolute;top:2px;bottom:2px;left:0;width:3px;border-radius:999px;background:linear-gradient(180deg, var(--bl), var(--pk-l2))} .fw-sty-entry__body p{margin:0 0 12px;font-size:15.5px;line-height:1.75;color:var(--g7)} .fw-sty-entry__who{display:flex;align-items:flex-start;gap:12px} .fw-sty-entry__who > span{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0} .fw-sty-entry__who b{font-size:15px;font-weight:700;color:var(--ink)} .fw-sty-entry__who small{font-size:13px;line-height:1.45;color:var(--g6)} .fw-sty-entry__who .fw-sty-ver{margin-top:4px} .fw-sty-more{display:flex;justify-content:center;margin-top:18px} .fw-sty-more[hidden]{display:none} .fw-sty-more button{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--bl-l2);font-size:14px;font-weight:600;color:var(--bl-d);cursor:pointer;transition:background .2s var(--ease)} .fw-sty-more button:hover{background:var(--bl-l)} /* ══════════════════════════════════════════════════════════════ 03b · ONE COUNTRY — every story a chapter The number beside the title and byline, the facts in one strip, the story beside its pull quote: a chapter is only as tall as its story. ══════════════════════════════════════════════════════════════ */ .fw-sty-chapters{padding:clamp(6px, 1.4vh, 14px) 0 clamp(16px, 3vh, 32px)} .fw-sty-chapter{display:flex;flex-direction:column;gap:clamp(18px, 2.8vh, 26px);padding-block:clamp(30px, 5vh, 52px);scroll-margin-top:110px} .fw-sty-chapter__head{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:clamp(18px, 2.4vw, 32px)} .fw-sty-chapter__n{font-family:var(--ff);font-size:clamp(64px, 10vh, 96px);font-weight:700;line-height:.8;letter-spacing:-.05em;background:linear-gradient(160deg, var(--pk-l2), var(--bl-l2));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums} .fw-sty-chapter__heading{display:flex;flex-direction:column;gap:12px;min-width:0} .fw-sty-chapter__title{margin:0;font-family:var(--ff);font-size:clamp(26px, 4vh, 38px);font-weight:600;line-height:1.14;letter-spacing:-.025em;color:var(--ink);text-wrap:balance} .fw-sty-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0} .fw-sty-byline > span{display:flex;align-items:baseline;gap:8px} .fw-sty-byline b{font-family:var(--ff);font-size:16.5px;font-weight:600;color:var(--ink)} .fw-sty-byline small{font-size:14px;color:var(--g6)} .fw-sty-byline small::before{content:"·";margin-right:8px;color:var(--g4)} /* the facts: one row, a thin rule between, fade rules above and below */ .fw-sty-strip{position:relative;display:grid;grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));margin:0;padding:14px 0} .fw-sty-strip::before,.fw-sty-strip::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--fade)} .fw-sty-strip::before{top:0} .fw-sty-strip::after{bottom:0} .fw-sty-strip div{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:2px clamp(14px, 1.8vw, 26px)} .fw-sty-strip div:first-child{padding-left:0} .fw-sty-strip div + div::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--fade-v)} .fw-sty-strip dt{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)} .fw-sty-strip dd{margin:0;font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink)} .fw-sty-strip a{color:var(--bl-d)} .fw-sty-strip a:hover{color:var(--bl-dd)} /* the story beside its pull quote, both starting level */ .fw-sty-chapter__body{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 4fr);gap:clamp(24px, 4vw, 64px);align-items:start} .fw-sty-chapter__story{display:flex;flex-direction:column;gap:6px;min-width:0} .fw-sty-prose p{margin:0 0 16px;font-size:17px;line-height:1.8;color:var(--g7);text-wrap:pretty} .fw-sty-prose p:first-child{font-family:var(--ff);font-size:clamp(19px, 2.6vh, 21px);font-weight:500;line-height:1.6;color:var(--ink)} .fw-sty-prose p:last-child{margin-bottom:10px} .fw-sty-pull{position:relative;margin:0;padding:2px 0 2px clamp(20px, 2vw, 30px);border:0;font-family:var(--ff);font-size:clamp(19px, 2.6vh, 23px);font-weight:500;line-height:1.45;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty} .fw-sty-pull::before{content:"\201C";display:block;height:44px;margin-bottom:4px;font-family:Georgia, serif;font-size:84px;line-height:.9;color:var(--pk-l2)} .fw-sty-pull::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:999px;background:linear-gradient(180deg, var(--pk-d), var(--bl-l2))} /* the break between chapters: a fading line with a heart */ .fw-sty-orn{display:flex;align-items:center;gap:18px} .fw-sty-orn::before,.fw-sty-orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg, transparent, var(--line))} .fw-sty-orn::after{background:linear-gradient(90deg, var(--line), transparent)} .fw-sty-orn span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--pk-l);color:var(--pk-d)} .fw-sty-orn .fw-ico{width:17px;height:17px} /* ══════════════════════════════════════════════════════════════ 04 · WHERE THEY WERE TREATED — clinic postcards, the stories told there Postcards share the row (auto-fit), so two clinics and "every clinic" fill it as evenly as eight do. Most clinics have no cover photograph, so a postcard never depends on one: the photo sits in a ring when there is one, else the clay clinic icon. ══════════════════════════════════════════════════════════════ */ .fw-sty-where{background:linear-gradient(180deg, var(--bl-wash), var(--wh) 75%)} .fw-sty-where .fw-sty-head--row > .fw-sty-sub{flex:0 1 34%;min-width:260px;text-align:right} .fw-sty-clinics{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:0 clamp(24px, 3vw, 48px);margin:0;padding:0;list-style:none} /* a clinic postcard: its photo in a ring (else the clay clinic), the city, the full name, the stories told there; a fade rule above each */ .fw-sty-clinic{position:relative;display:grid;grid-template-columns:76px minmax(0, 1fr);gap:18px;align-items:start;padding:22px 0} .fw-sty-clinic::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-sty-clinic__ring{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--wh);box-shadow:0 0 0 4px var(--wh), inset 0 0 0 2px var(--bl-l2), 0 14px 26px -16px var(--bl);transition:transform .35s var(--ease-pop), box-shadow .25s var(--ease)} .fw-sty-clinic__ring img{width:72%;height:72%;object-fit:contain} .fw-sty-clinic__ring.has-photo img{width:100%;height:100%;object-fit:cover} .fw-sty-clinic:hover .fw-sty-clinic__ring{transform:translateY(-3px);box-shadow:0 0 0 4px var(--wh), inset 0 0 0 2px var(--pk-d), 0 16px 28px -14px var(--pk)} .fw-sty-clinic__text{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0} .fw-sty-clinic__city{margin:2px 0 0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bl-ink)} .fw-sty-clinic__name{margin:0;font-family:var(--ff);font-size:17.5px;font-weight:600;line-height:1.35;letter-spacing:-.01em;text-wrap:balance} .fw-sty-clinic__name a{color:var(--ink);transition:color .2s var(--ease)} .fw-sty-clinic__name a:hover{color:var(--pk-dd)} .fw-sty-clinic__told{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:6px 0 0} .fw-sty-clinic__told span{width:100%;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)} .fw-sty-clinic__told a{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--pk-l2);font-size:13px;font-weight:600;color:var(--pk-dd);transition:background .2s var(--ease), box-shadow .2s var(--ease)} .fw-sty-clinic__told a .bi{font-size:11px} .fw-sty-clinic__told a:hover{background:var(--pk-l);box-shadow:inset 0 0 0 1.5px var(--pk-d)} /* the last postcard: every clinic in the country */ .fw-sty-clinic--all{display:block} .fw-sty-clinic--all > a{display:grid;grid-template-columns:76px minmax(0, 1fr);gap:18px;align-items:start;color:inherit} .fw-sty-clinic--all b{font-family:var(--ff);font-size:17.5px;font-weight:600;line-height:1.35;color:var(--ink);transition:color .2s var(--ease)} .fw-sty-clinic--all small{font-size:14px;line-height:1.55;color:var(--g6)} .fw-sty-clinic--all .fw-sty-clinic__ring{background:linear-gradient(150deg, var(--wh), var(--bl-l))} .fw-sty-clinic--all a:hover b{color:var(--pk-dd)} .fw-sty-clinic--all a:hover .bi-arrow-right{transform:translateX(4px)} /* keep reading: the other countries on the journey line */ .fw-sty-elsewhere .fw-sty-head--row{align-items:center} /* ══════════════════════════════════════════════════════════════ 05 · THE INVITATION — the next page is yours ══════════════════════════════════════════════════════════════ */ .fw-sty-invite{background:linear-gradient(120deg, var(--pk-wash), var(--bl-wash))} .fw-sty-invite__grid{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:20px clamp(22px, 3vw, 48px)} .fw-sty-invite__art{width:clamp(76px, 11vh, 104px);aspect-ratio:1;object-fit:contain;animation:fw-sty-float 6s ease-in-out infinite} .fw-sty-invite__grid > div{display:flex;flex-direction:column;gap:8px;min-width:0} /* ══════════════════════════════════════════════════════════════ 06 · RESPONSIVE (the phone is designed as an app) ══════════════════════════════════════════════════════════════ */ @media (max-width:1200px){ .fw-sty-entry{grid-template-columns:minmax(150px, 2fr) minmax(0, 7fr);grid-template-areas:"when text" "when who"} .fw-sty-entry__when{grid-area:when}.fw-sty-entry__text{grid-area:text}.fw-sty-entry__who{grid-area:who} } @media (max-width:1024px){ .fw-sty-title,.fw-sty-spread__grid{grid-template-columns:minmax(0, 1fr)} .fw-sty-title__side{justify-items:start} .fw-sty-trust{justify-content:flex-start} .fw-sty-spread__page{margin-left:0;padding-left:0;padding-top:var(--sec)} .fw-sty-spread__page::before{top:0;bottom:auto;left:0;right:0;width:auto;height:1px;background:var(--fade)} .fw-sty-chapter__body{grid-template-columns:minmax(0, 1fr)} .fw-sty-strip{grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:12px} .fw-sty-strip div:nth-child(odd){padding-left:0} .fw-sty-strip div:nth-child(odd)::before{display:none} .fw-sty-cover__cap{width:calc(100% - var(--pad) * 2)} .fw-sty-cover::after{background:linear-gradient(0deg, color-mix(in srgb, var(--dk-d) 82%, transparent) 0%, color-mix(in srgb, var(--dk-d) 30%, transparent) 60%, transparent)} .fw-sty-stops{grid-template-columns:repeat(var(--n, 5), 112px);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding:6px var(--pad) 8px;scrollbar-width:none} .fw-sty-stops::-webkit-scrollbar{display:none} .fw-sty-stops::before{display:none} .fw-sty-stops li{scroll-snap-align:start} } @media (max-width:760px){ .fw-sty-entry{grid-template-columns:minmax(0, 1fr);grid-template-areas:"when" "text" "who"} .fw-sty-entry__when{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px} .fw-sty-invite__grid{grid-template-columns:auto minmax(0, 1fr)} .fw-sty-invite__grid .fw-sty-btn{grid-column:1 / -1} } @media (max-width:760px){ .fw-sty-where .fw-sty-head--row > .fw-sty-sub{flex-basis:100%;text-align:left} } @media (max-width:640px){ .fw-sty-page{--pad:14px} .fw-sty-clinics{grid-template-columns:minmax(0, 1fr)} .fw-sty-clinic,.fw-sty-clinic--all > a{grid-template-columns:60px minmax(0, 1fr);gap:14px} .fw-sty-clinic__ring{width:60px;height:60px} .fw-sty .fw-sty-h1{font-size:clamp(30px, 8.6vw, 40px)} .fw-sty-h2{font-size:clamp(24px, 6.6vw, 30px)} .fw-sty-title__art{display:none} .fw-sty-chips{flex-wrap:nowrap;width:100%;overflow-x:auto;scrollbar-width:none} .fw-sty-chips::-webkit-scrollbar{display:none} .fw-sty-chapter__head{align-items:start} .fw-sty-chapter__n{font-size:52px} .fw-sty-prose p{font-size:16px} .fw-sty-invite .fw-sty-btn{width:100%} .fw-sty-numbered p{grid-template-columns:30px minmax(0, 1fr)} }