/* katjanowicz.com — hand-built rebuild (faithful to the WordPress/Avada original) System captured from the live site: all Raleway; headings #045D7D weight 300; teal accent #169395 / band teal #009999; body #707070 on white. */ /* ---------- fonts (self-hosted) ---------- */ @font-face{font-family:Raleway;src:url(../fonts/Raleway-Light.ttf) format("truetype");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:Raleway;src:url(../fonts/Raleway-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Raleway;src:url(../fonts/Raleway-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:Raleway;src:url(../fonts/Raleway-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:Raleway;src:url(../fonts/Raleway-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap} /* ---------- tokens ---------- */ :root{ --ink:#5a6164; /* body text — was #707070 (4.7:1, thin); now ~5.9:1 */ --head:#045d7d; /* section headings (dark teal-blue) */ --teal:#169395; /* accent teal */ --teal-band:#009999; /* solid teal bands + overlays */ --gray-bg:#f7f7f7; --line:#e5e0d3; /* warm border (paper aesthetic) */ --dark:#363839; /* footer widget — matches the live site */ --dark-bar:#282a2b; /* footer copyright bar */ --orange:#d9772a; /* Fibonacci "tree" — warm brand accent */ --orange-2:#eaa24e; --rust:#b5561e; --sand:#f2ead9; /* the history book's warm world */ --sand-ink:#5c4a30; --aqua:#d7ebe5; /* readers — clearly visible teal tint */ --navy:#0e3a4b; --nav:#333; --white:#fff; --maxw:1160px; --pad:clamp(22px, 2.6vw, 44px); --serif: Raleway, Arial, Helvetica, sans-serif; } *{box-sizing:border-box} /* fluid root: every rem-based size scales smoothly with the viewport (15px @375 → 16px @768 → 18px @1440) instead of stepping at breakpoints */ html{scroll-behavior:smooth;font-size:clamp(15px, 13.94px + 0.28vw, 18px)} body{margin:0;font-family:var(--serif);font-weight:400;font-size:1rem;line-height:1.75; color:var(--ink);background:#fbfaf6;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{color:var(--teal);text-decoration:none} a:hover{color:var(--head)} :focus-visible{outline:2px solid var(--teal);outline-offset:3px} .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} .eyebrow{font-weight:600;font-size:max(11.5px,.78rem);letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin:0 0 .5rem} h1,h2,h3{font-weight:300;color:var(--head);margin:0;line-height:1.15;text-wrap:balance} h2{font-size:clamp(2rem,5vw,3rem)} /* measures in px, not ch — ch shrinks with the fluid font and locks text narrow */ section p{max-width:min(100%,760px)} /* `section p` above is a READING-MEASURE rule. It must never apply to labels, attributions, captions or single-link CTAs — those are positioned by their own section, and capping them at 760px silently knocks them off center on wide screens (it bound at >760px columns only, which is why it kept slipping through). */ section p.eyebrow, section p.pub, section p.readers__more, section p.topics__cta, section p.topics__note, section p.czreaders__cta, section p.bio__cta, section p.talks__cta, section p.buy__signing, section p.mcard__kicker, section p.hero__quote, section p.kit__note, .nextbook p:has(> .maplink){max-width:none} /* ---------- header ---------- */ .site-header{position:sticky;top:0;z-index:50;background:#fbfaf6;border-bottom:1px solid var(--line)} .site-header .container{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1240px} .brand img{height:26px;width:auto} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;width:44px;height:44px} .nav-toggle span{display:block;width:24px;height:2px;background:var(--nav);margin:5px 0;transition:.25s} .main-nav ul{list-style:none;display:flex;gap:34px;margin:0;padding:0} .main-nav a{color:var(--head);font-weight:500;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase} .main-nav a:hover{color:var(--teal);text-decoration:none} .main-nav li{position:relative} .main-nav .submenu{position:absolute;top:100%;left:-14px;background:#fff;border:1px solid var(--line); min-width:210px;padding:8px 0;box-shadow:0 12px 30px rgba(0,0,0,.08);opacity:0;visibility:hidden; transform:translateY(6px);transition:.2s} .main-nav li:hover .submenu,.main-nav li:focus-within .submenu{opacity:1;visibility:visible;transform:none} .main-nav .submenu a{display:block;padding:8px 20px;letter-spacing:.08em} /* ---------- hero ---------- */ .hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center; color:#f8f8f8;background:linear-gradient(rgba(10,19,35,.15),rgba(10,19,35,.15)), url(../img/longbeach-slider-2560x1195-1.jpg) center/cover no-repeat} .hero__inner{max-width:1180px;padding:40px var(--pad) 120px} /* max-width:none — the generic `section p` measure was squeezing this to 760px and wrapping the three sentences onto five lines */ .hero__quote{font-weight:400;font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.14;min-height:1.2em; max-width:none;text-shadow:0 2px 24px rgba(0,0,0,.25)} .hero__quote .caret{font-weight:200;opacity:.8;animation:blink 1s step-end infinite} @keyframes blink{50%{opacity:0}} .hero__cite{margin-top:1.4rem;font-size:clamp(1.1rem,2.5vw,1.5rem);font-weight:300;opacity:0;transition:opacity .8s} .hero__cite.show{opacity:.95} .hero__wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;display:block;color:#fbfaf6} /* ---------- meet kat ---------- */ .meet{padding-block:64px 70px;text-align:center} .meet__photo{width:180px;height:180px;border-radius:50%;object-fit:cover;margin:0 auto 28px; box-shadow:0 10px 30px rgba(4,93,125,.15)} .meet h2{margin-bottom:22px} .meet p{margin:0 auto;max-width:min(94%,720px);font-size:1.06rem} .meet em{font-style:italic} /* ---------- quote band (Mead) ---------- */ /* matches the live site exactly: teal background-COLOR blended into the photo with multiply — keeps the port readable. A flat alpha overlay washes the photo out. */ .quoteband{position:relative;padding:82px 0 64px;text-align:center;color:#fff; background-color:rgba(0,153,153,.88); background-image:url(../img/port-long-3.jpg); background-blend-mode:multiply; background-position:center;background-size:cover; background-repeat:no-repeat;background-attachment:scroll} .quoteband h2{color:#fff;font-weight:300;font-size:clamp(1.6rem,4.2vw,3.2rem); max-width:min(94%,1040px);margin:0 auto;line-height:1.3} .quoteband cite{display:block;margin-top:1.2rem;font-style:normal;font-weight:500;letter-spacing:.06em;font-size:1.05rem} /* ---------- chasing zero ---------- */ .book{background:#e9f2f0;padding:88px 0} .book__grid{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:56px;align-items:center} .book__cover{filter:drop-shadow(0 24px 40px rgba(0,0,0,.22));height:auto} .book__body .eyebrow{color:var(--teal)} .book__body h2{margin-bottom:1rem} .book__body p{margin:0 0 1.1rem} /* ---------- CTA band ---------- */ .cta{background:var(--teal-band);text-align:center;padding:80px 0} .cta a{display:inline-block;color:#fff;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:300; border:2px solid rgba(255,255,255,.6);border-radius:6px;padding:.5em 1.1em;transition:.25s} .cta a:hover{background:#fff;color:var(--teal-band);text-decoration:none} /* ---------- three themes ---------- */ .themes{padding:90px 0 40px} .themes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px} .theme h2{font-size:1.7rem;margin:.1rem 0 .8rem} .theme p{font-size:.98rem} .theme .eyebrow{color:var(--teal)} /* ---------- footer ---------- */ .site-footer{background:var(--dark);color:#cfe3e6;padding:64px 0 0;font-size:.92rem} /* footer: identity on the left, links flowing to the right of it. Measured against the stacked version: 367px -> 235px at 1160px wide. */ .footer__inner{display:flex;flex-direction:row;align-items:flex-start;gap:20px 40px;flex-wrap:wrap} .footer__id{display:flex;flex-direction:column;gap:16px;flex:0 0 auto} .fnav{display:flex;flex-wrap:wrap;align-items:center;gap:0;flex:1 1 460px; margin-left:-.95rem} .fnav a{padding:.3rem .95rem;white-space:nowrap;position:relative} .fnav a+a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:1px;height:.95em;background:rgba(207,227,230,.28)} @media (max-width:640px){ .footer__inner{flex-direction:column;align-items:center;text-align:center} .fnav{justify-content:center;margin-left:0;flex-basis:auto} .fnav a+a::before{display:none} .fnav a{padding:.3rem .7rem} } .footer__grid{display:grid;grid-template-columns:1.9fr .95fr .8fr .8fr .75fr;gap:24px 16px;align-items:start} .site-footer img.flogo{height:42px;width:auto;margin:0} .site-footer h4{color:#fff;font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px} .site-footer ul{list-style:none;margin:0;padding:0} .site-footer li{margin:.4rem 0} .site-footer a{color:#cfe3e6} .site-footer a:hover{color:var(--teal)} .site-footer .footer__grid ul ul{list-style:none;margin:.3rem 0 .3rem;padding-left:14px} .site-footer .footer__grid ul ul a{font-size:.88rem;opacity:.85} .social{display:flex;gap:14px;margin-top:8px} .social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.3);border-radius:50%; display:flex;align-items:center;justify-content:center;color:#fff} .social a:hover{background:var(--teal-band);border-color:var(--teal-band);text-decoration:none} .social svg{width:17px;height:17px;fill:currentColor} .footer__bar{margin-top:52px;border-top:1px solid rgba(255,255,255,.15);text-align:center; padding:20px 0;font-size:.82rem;color:#9fc0c4} /* ---------- responsive ---------- */ @media (max-width:1024px){ .themes__grid{gap:32px} } @media (max-width:820px){ .nav-toggle{display:block} .main-nav{position:fixed;inset:72px 0 auto 0;background:#fff;border-bottom:1px solid var(--line); transform:translateY(-120%);transition:.3s;max-height:calc(100vh - 72px);overflow:auto} .main-nav.open{transform:none} .main-nav ul{flex-direction:column;gap:0;padding:8px 0} .main-nav>ul>li>a{display:block;padding:14px 24px} .main-nav .submenu{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none; padding:0 0 8px 16px;min-width:0} .book__grid{grid-template-columns:1fr;gap:32px;text-align:center} .book__cover{max-width:240px;margin:0 auto} .book p{margin-left:auto;margin-right:auto} .themes__grid{grid-template-columns:1fr;gap:40px;text-align:center} .theme p{margin-left:auto;margin-right:auto} .social{justify-content:center} .quoteband{background-attachment:scroll} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hero__quote .caret{animation:none;display:none} .hero__cite{opacity:.95;transition:none} *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ======= refocus: author-forward additions (same design system) ======= */ /* meet kat — landscape portrait variant */ .meet__portrait{width:min(468px,88%);height:auto;border-radius:16px;object-fit:cover; margin:0 auto 30px;box-shadow:0 18px 44px rgba(4,93,125,.18)} /* beyond the book — venture blurbs */ .ventures{padding:90px 0;background:#e7f1ef} .ventures__head{text-align:center;margin-bottom:2.6rem} .ventures__head .lead{max-width:56ch;margin:.6rem auto 0;font-size:1.06rem} .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .venture{border:1px solid var(--line);border-radius:14px;padding:30px 26px;background:#fbfaf6; display:flex;flex-direction:column} .venture .pill{align-self:flex-start;font-size:.72rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--teal);border:1px solid var(--teal);border-radius:100px; padding:4px 12px;margin-bottom:14px} .venture h3{font-size:1.5rem;font-weight:300;color:var(--head);margin:0 0 .6rem} .venture p{font-size:.95rem;margin:0 0 1.1rem;max-width:none} .venture .go{margin-top:auto;font-weight:600;letter-spacing:.02em} .venture .tm{font-size:.7rem;color:#9aa0a1;margin:.9rem 0 0;line-height:1.5;max-width:none} /* readers — with the book */ .readers{background:var(--gray-bg);padding:84px 0;text-align:center} .readers .lead{max-width:56ch;margin:.6rem auto 2.6rem;font-size:1.06rem} .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:2.4rem} .reader{background:#fbfaf6;border:1px solid var(--line);border-radius:14px;padding:20px;text-align:left} /* square frame; each photo carries its own crop via --w/--x/--y (offset crop, done in CSS) */ .reader .ph{aspect-ratio:1/1;border-radius:10px;background:#ece4d2;overflow:hidden; position:relative;margin-bottom:14px} .reader .ph img{position:absolute;display:block;width:var(--w,100%);height:auto; left:var(--x,0);top:var(--y,0);max-width:none} /* this phone photo's pixels are stored sideways (sips can't bake the rotation), so it's rotated here and framed to the subject in the same transform */ .reader .ph img.rot90{left:0;top:0;transform-origin:0 0; transform:translate(var(--tx),var(--ty)) rotate(90deg)} .reader .pending{color:#9aa39f;font-style:italic} .reader p{font-size:.94rem;margin:0;max-width:none} .reader .who{margin-top:.9rem;font-weight:600;color:var(--head);font-size:.96rem} .reader .who span{display:block;font-weight:400;color:#7c8486;font-size:.89rem;margin-top:.2rem} .readers .invite{display:inline-block;border:2px solid var(--teal);border-radius:6px; padding:.7em 1.4em;font-weight:600;color:var(--teal)} .readers .invite:hover{background:var(--teal);color:#fff;text-decoration:none} /* Marginalia — white, like Going Green. These are Kat's own sections; the warm sand/cream range belongs to the next book and to Maptopus (whose cream card sits directly above this band). */ .notes{padding-block:84px;background:#fff} .notes__head{text-align:center;margin-bottom:2.4rem} .notes__head .lead{max-width:52ch;margin:.6rem auto 0;font-size:1.06rem} .nlist{display:grid;grid-template-columns:repeat(3,1fr);gap:30px} .note{border-top:3px solid var(--teal);padding-top:16px} .note h3{font-size:1.18rem;font-weight:400;color:var(--head);margin:.2rem 0 .5rem} .note h3 a{color:var(--head)} .note h3 a:hover{color:var(--teal)} .note p{font-size:.9rem;margin:0;max-width:none} .notes .all{text-align:center;margin-top:2.4rem} @media (max-width:820px){ .vgrid,.rgrid,.nlist{grid-template-columns:1fr} .reader{text-align:center} } /* ===== curated color — neutral base; color only where it means something ===== */ .eyebrow--warm{color:#d3a43b} /* Amber Wit — next-book section only */ /* Chasing Zero — publisher credit + Get-the-book button */ .book__body .pub{font-size:.92rem;margin:.4rem 0 1.3rem} .book__body .pub a{font-weight:600} .buybtn{display:inline-block;background:var(--teal-band);color:#fff;font-weight:600;letter-spacing:.02em; font-family:inherit;font-size:1rem;line-height:inherit;border:0;cursor:pointer; padding:.72em 1.6em;border-radius:6px;transition:.2s} .buybtn:hover{background:var(--head);color:#fff;text-decoration:none} /* Going Green Timeline — white. Chasing Zero content, so it stays out of the warm sand/paper range, which belongs to the next book's world. */ .going{padding-block:84px 88px;text-align:center;background:#fff} .going h2{margin-bottom:1.1rem} .going p{margin:0 auto;max-width:min(94%,720px);font-size:1.06rem} /* THE NEXT BOOK — the book's own palette: Deep Pine ground, Archive Paper, Amber Wit */ .nextbook{background:#16483f;color:#aab9b3;padding:92px 0} .nextbook__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} .nextbook__body::before{content:"";display:block;width:64px;height:4px;background:#d3a43b;margin:0 0 22px} .nextbook h2{color:#e9ddc5} .nextbook .logline{font-weight:300;font-style:italic;font-size:clamp(1.3rem,2.5vw,1.85rem); line-height:1.42;color:#e9ddc5;margin:.7rem 0 1.2rem;max-width:min(100%,640px)} .nextbook .people{font-size:.98rem;color:#aab9b3;max-width:min(100%,600px);margin:0 0 1.1rem} .nextbook .people b{color:#d3a43b;font-weight:600} .nextbook .maplink{font-weight:600;color:#4fbfbe} .nextbook .maplink:hover{color:#e9ddc5} /* family collage — prints laid on a table: two in front, the rest fanned behind */ /* the vertical photo column — ten prints, each in its own band so they overlap only at the edges. Michał and Wela are front and largest, Bolek next. --op tops-anchors an image whose frame is shorter than the file, which is how the blank card edges are clipped: sips cannot cut a bottom (a negative crop offset pads black), so those crops are done here instead of in the files. */ .vcol{position:relative;width:100%;max-width:420px;aspect-ratio:3/5;margin:0 auto} .deckle-defs{position:absolute;width:0;height:0} .vcol figure{position:absolute;margin:0;background:#f4ecd8;padding:3%;transform-origin:center; width:var(--w);left:var(--l);top:var(--t);z-index:var(--z);transform:rotate(var(--r)); filter:url(#deckleA) drop-shadow(0 8px 14px rgba(0,0,0,.45))} .vcol .p2,.vcol .p5,.vcol .p8{filter:url(#deckleB) drop-shadow(0 8px 14px rgba(0,0,0,.45))} .vcol .p3,.vcol .p6,.vcol .p9{filter:url(#deckleC) drop-shadow(0 8px 14px rgba(0,0,0,.45))} .vcol .frame{display:block;position:relative;overflow:hidden;aspect-ratio:var(--ar,3/4);background:#ded2ba} .vcol .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:var(--op,50% 50%);display:block; filter:sepia(.22) saturate(.9) contrast(.96) brightness(1.02)} .vcol .frame::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 100% at 50% 45%, rgba(120,96,58,0) 52%, rgba(86,68,40,.30) 100%), linear-gradient(158deg, rgba(255,246,222,.14) 0%, rgba(255,246,222,0) 46%)} /* the two near misses — same shape twice, so they are set as a pair */ .misses{max-width:min(100%,600px);margin:0 0 1.2rem;display:grid;gap:14px} .misses p{margin:0;padding-left:16px;border-left:2px solid rgba(211,164,59,.55); font-size:.96rem;line-height:1.62} @media (max-width:520px){.vcol{max-width:330px}} /* venture cards — neutral (no added color), logos + subtle lift */ .venture{transition:transform .2s, box-shadow .2s;box-shadow:0 6px 18px rgba(0,0,0,.05)} .venture:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.09)} /* shared-height logo slot: the three marks are different heights (38/58/56), which pushed each card's pill, heading and body out of line. The slot equalizes that and sits them on a common baseline — logos keep their own sizes. */ .venture .markbox{display:flex;align-items:flex-end;height:58px;margin:0 0 18px} .venture .mark{height:auto;max-height:44px;width:auto;margin:0;align-self:flex-end} .venture--map .mark{max-height:56px;border-radius:12px} .venture .pill{background:#d7ebe8;color:#147f82;border:1px solid transparent;font-weight:600} /* PIERIODIC card — Harbor Deep, the brand's primary */ .venture--pier{background:#0b2633;border-color:#0b2633} .venture--pier h3{color:#fff} .venture--pier p{color:#cfe0e4} .venture--pier .pill{background:rgba(120,201,196,.16);color:#78c9c4} /* reversed (light-on-dark) mark — sits directly on the dark ground, no backing needed */ .venture--pier .mark{max-height:58px} .venture--pier .go{color:#78c9c4} .venture--pier .go:hover{color:#fff} /* element tiles — exact category colors from the Pieriodic app */ .els{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 20px;padding:0} .el{border-radius:7px;padding:9px 8px 8px;text-align:left;line-height:1.15} .el b{display:block;font-size:1.02rem;font-weight:700;letter-spacing:.01em} .el span{display:block;font-size:max(11.5px,.66rem);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-top:3px;opacity:.92} .el--ships{background:#147f82;color:#fff} .el--harbor{background:#78c9c4;color:#0b2633} .el--che{background:#0b2633;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)} .el--trucks{background:#4f9d3a;color:#fff} .el--rail{background:#19647e;color:#fff} .el--energy{background:#f1a33a;color:#0b2633} /* Maptopus card wears its own atlas palette (cream / navy / orange) */ .venture--map{background:#f6efe1;border-color:#e6d8bd} .venture--map h3{color:#13324a} .venture--map .pill{background:#f1e1c6;color:#bf6f20;border:1px solid transparent} /* 3COTECH card — the brand's power-icon watermark background */ .venture--firm{background:#2d5862 url(../img/3cotech-bg-dark.png) left bottom/cover no-repeat;border-color:#24474f} .venture--firm h3{color:#fff} .venture--firm p{color:#e8f3f1} .venture--firm .pill{background:rgba(255,255,255,.15);color:#dbf1ed;border:1px solid transparent} .venture--firm .go{color:#a9e0d8} .venture--firm .go:hover{color:#fff} .venture--firm .mark{max-height:38px} /* sector photo — cinematic strip, cropped to the crew (keeps the parked cars out) */ .venture .shot{width:100%;aspect-ratio:20/9;object-fit:cover;object-position:center 55%; border-radius:10px;margin:0 0 20px;filter:saturate(.96) contrast(1.04) brightness(.97)} /* the map wants more room than a strip — show the octopus, toolbar, and Wilno */ .venture .shot--map{aspect-ratio:16/9;object-position:center top;filter:none; border:1px solid #e0d2b4} /* all links teal — lifted on the dark Deep Pine ground so it stays legible */ .nextbook .maplink{color:#4fbfbe} /* 1.3rem matches the gap above "Get the Book", so both buttons sit the same distance from their text and scale together. Needs `p.` — plain .meet__cta loses to `.meet p{margin:0 auto}` on specificity. */ .meet p.meet__cta{margin-top:1.3rem} /* readers — soft aqua tint (kept) + "more" link before the CTA */ .readers{background:var(--aqua)} .readers .more{margin:0 0 1.4rem} /* marginalia — neutral rule (no color) */ .note{border-top-color:#dbe0e1} /* footer — darker copyright bar */ .footer__bar{background:var(--dark-bar)} /* below ~1024 the two-column blocks squeeze text into skinny columns — stack them */ @media (max-width:1024px){ /* NOT centred: this section now carries four paragraphs and a ruled pair, and centring them put the Maptopus link in the middle of every narrow window. */ .nextbook__grid{grid-template-columns:1fr;gap:34px} .nextbook__photo{max-width:330px;margin:0 auto} .book__grid{grid-template-columns:1fr;gap:32px;text-align:center} .book__cover{max-width:240px;margin:0 auto} .book__body p{margin-left:auto;margin-right:auto} } /* ===================== CHASING ZERO page ===================== */ .cz-hero{padding:70px 0 84px} .cz-hero__grid{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:56px;align-items:start} .cz-hero__cover{filter:drop-shadow(0 24px 40px rgba(0,0,0,.22));height:auto} .cz-hero h1{font-size:clamp(2.4rem,5.5vw,3.6rem);font-weight:300;color:var(--head); line-height:1.12;margin:0 0 1.2rem;text-wrap:balance} .cz-hero__body p{margin:0 0 1.1rem} /* buy row — soft teal band so it separates from the paper above and the praise below */ .buy{background:#e9f2f0;padding:78px 0;text-align:center} .buy h2{margin-bottom:1.5rem} .buy__list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:0;margin:0 0 2.2rem} .buy__list a{display:inline-block;background:var(--teal-band);color:#fff;font-weight:600; letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;padding:.9em 1.7em;border-radius:6px;transition:.2s} .buy__list a:hover{background:var(--head);color:#fff} .buy__note{margin:0 auto;max-width:min(94%,760px);font-size:.98rem} /* praise — quotes with a teal rule, attribution stacked beneath */ .praise{padding:86px 0 70px} .praise h2{text-align:center;margin-bottom:2.6rem} .praise__item{margin:0 auto 46px;max-width:min(100%,820px);border-left:3px solid var(--teal);padding-left:26px} .praise__item:last-child{margin-bottom:0} .praise__item blockquote{margin:0} .praise__item blockquote p{margin:0 0 .9rem;font-size:1.02rem;max-width:none} .praise__item figcaption b{display:block;color:var(--head);font-weight:600;font-size:1rem;margin-top:.9rem} .praise__item figcaption span{display:block;color:#8a9294;font-size:.88rem;line-height:1.5} .praise__item figcaption cite{display:block;font-style:normal;color:#9aa3a4;font-size:.78rem; margin-top:.7rem;line-height:1.55} @media (max-width:1024px){ .cz-hero__grid{grid-template-columns:1fr;gap:34px;text-align:center} .cz-hero__cover{max-width:250px;margin:0 auto} .cz-hero__body p{margin-left:auto;margin-right:auto} .praise__item{border-left:0;border-top:3px solid var(--teal);padding:22px 0 0;text-align:left} } /* ===================== error pages ===================== */ .errpage{padding-block:110px 130px;text-align:center;max-width:760px} .errpage h1{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:300;color:var(--head);margin:0 0 1.1rem} .errpage p{margin:0 auto;max-width:min(94%,600px);font-size:1.06rem} .errpage__cta{margin-top:1.6rem} /* 404 signposts — a lost visitor needs somewhere to go, not just a heading. Tiles deliberately reuse the Affiliations look (warm border + teal left rule) rather than introducing a second card style. */ .errpage--find{padding-block:96px 26px} .errfind{padding-bottom:104px;text-align:center} .errfind__lead{font-weight:600;color:var(--head);margin:0 0 1.15rem;font-size:1.02rem} .errfind__grid{display:grid;gap:13px;grid-template-columns:repeat(2,1fr); max-width:770px;margin:0 auto;text-align:left} .errfind__grid a{display:block;background:#fff;border:1px solid var(--line); border-left:3px solid var(--teal);border-radius:10px;padding:15px 17px;text-decoration:none; transition:border-left-color .18s ease,border-color .18s ease} .errfind__grid a:hover,.errfind__grid a:focus-visible{border-left-color:var(--head);border-color:#d8d0bd} .errfind__grid b{display:block;font-weight:600;color:var(--head);margin-bottom:3px;font-size:1rem} .errfind__grid span{display:block;color:var(--ink);font-size:.88rem;line-height:1.5} .errfind__note{margin:1.7rem auto 0;max-width:560px;font-size:.95rem;color:var(--ink)} @media(max-width:660px){.errfind__grid{grid-template-columns:1fr;max-width:420px}} /* ===================== MEET KAT page ===================== */ .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .bio{padding:70px 0 86px} .bio__grid{display:grid;grid-template-columns:minmax(240px,330px) 1fr;gap:56px;align-items:start} .bio__portrait{width:100%;border-radius:14px;box-shadow:0 16px 40px rgba(4,93,125,.18)} .bio h1{font-size:clamp(2.3rem,5vw,3.4rem);font-weight:300;color:var(--head);margin:0 0 1.2rem;line-height:1.12} .bio__body p{margin:0 0 1.1rem} @media (max-width:1024px){ .bio__grid{gap:34px} .nextstep{text-align:center} } @media (max-width:640px){ .bio__grid{grid-template-columns:1fr} .bio__portrait{max-width:100%;margin:0} } /* ===================== SPEAKING page ===================== */ .talks{padding:70px 0 84px} .talks__grid{display:grid;grid-template-columns:1fr minmax(240px,380px);gap:56px;align-items:start} .talks h1{font-size:clamp(2.3rem,5vw,3.4rem);font-weight:300;color:var(--head);margin:0 0 .5rem;line-height:1.12} .talks__lead{font-weight:300;font-style:italic;font-size:clamp(1.15rem,2.2vw,1.5rem); color:var(--teal);margin:0 0 1.4rem} .talks__body p{margin:0 0 1.1rem} .talks__photo{width:100%;border-radius:14px;box-shadow:0 16px 40px rgba(4,93,125,.18); /* square, not the photo's native 1.17:1 — the open hands are the reason for this shot and a square keeps the gesture without shrinking her in a 380px column */ aspect-ratio:1/1;object-fit:cover;object-position:58% 26%} .talks p.talks__cta{margin-top:1.3rem} /* where she's spoken */ .hosts{background:#e9f2f0;padding:76px 0} .hosts h2{margin-bottom:.9rem} .hosts__intro{margin:0 0 1.4rem} /* multi-column, not grid: an alphabetical list must read DOWN each column. A 2-col grid puts A,B on row 1 and C,D on row 2, so neither column is a contiguous A-Z run and finding a name means zig-zagging. Multicol also stops a two-line entry from forcing a gap beside its one-line neighbour. */ .hosts__list{list-style:none;padding:0;margin:0;columns:2;column-gap:40px;max-width:960px} .hosts__list li{break-inside:avoid;margin:0 0 15px;padding-left:18px;position:relative; font-size:1rem;line-height:1.55;text-wrap:pretty} .hosts__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px; border-radius:50%;background:var(--teal)} .hosts__list span{color:#6d7679} /* sub-line: only where the event is better known than the body that runs it */ .hosts__list em{display:block;font-style:normal;color:#6d7679;font-size:.86rem; line-height:1.42;margin-top:1px} @media (max-width:1024px){ .talks__grid{gap:34px} .hosts__list{columns:1} } @media (max-width:640px){ .talks__grid{grid-template-columns:1fr} .talks__photo{max-width:100%;margin:0;order:-1} } /* ===================== legal pages ===================== */ .legal{padding-block:70px 96px;max-width:860px} .legal h1{font-size:clamp(2.1rem,4.4vw,3rem);font-weight:300;color:var(--head);margin:0 0 .3rem} .legal h2{font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:600;color:var(--head); margin:2.2rem 0 .6rem;letter-spacing:0} .legal p{margin:0 0 1rem;max-width:none} .legal__updated{color:#9aa3a4;font-size:.9rem;margin-bottom:2rem !important} .legal__rule{border:0;border-top:1px solid var(--line);margin:3.4rem 0 2.6rem} .legal b,.legal strong{color:var(--head);font-weight:600} /* ===================== CONTACT page ===================== */ .contact{padding-block:70px 92px;max-width:760px} .contact h1{font-size:clamp(2.3rem,5vw,3.4rem);font-weight:300;color:var(--head);margin:0 0 .8rem} .contact__lead{font-size:1.06rem;margin:0 0 2.2rem} .formnote{padding:14px 18px;border-radius:8px;margin:0 0 1.6rem;font-size:.98rem} .formnote--ok{background:#d7ebe5;color:#0f5d61} .formnote--err{background:#f6e2dc;color:#8a3b2a} .cform__row{margin:0 0 1.3rem;max-width:none} .cform label{display:block;font-weight:600;color:var(--head);font-size:.9rem;margin-bottom:.4rem} .cform label span{color:var(--teal)} .cform input,.cform textarea{width:100%;font:inherit;color:var(--ink);background:#fff; border:1px solid var(--line);border-radius:8px;padding:.75em .9em;transition:.15s} .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--teal); box-shadow:0 0 0 3px rgba(22,147,149,.15)} .cform textarea{resize:vertical;min-height:150px} .cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .cform__submit{margin:1.8rem 0 0} .cform__fine{font-size:.86rem;color:#8a9294;margin:1.4rem 0 0} /* ===================== RESOURCES page ===================== */ .res-hero{padding-block:70px 20px;text-align:center} .res-hero h1{font-size:clamp(2.3rem,5vw,3.4rem);font-weight:300;color:var(--head);margin:0 0 .8rem} .res-hero__lead{margin:0 auto;max-width:min(94%,660px);font-size:1.06rem} .vids{padding:56px 0 70px} .vids h2,.books h2,.ted h2,.more h2{text-align:center;margin-bottom:1.8rem} .vids__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px} .vid{margin:0} .vid__frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0b2633; box-shadow:0 12px 30px rgba(0,0,0,.16)} .vid__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .vid figcaption{margin-top:.8rem} .vid figcaption b{display:block;color:var(--head);font-weight:600;font-size:1rem;line-height:1.4} .vid figcaption span{display:block;color:#8a9294;font-size:.86rem;margin-top:.2rem} .books{background:#e9f2f0;padding-block:76px} .books__list{list-style:none;padding:0;margin:0 auto;max-width:860px;display:grid;gap:16px} .books__list li{padding-left:20px;position:relative} .books__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px; border-radius:50%;background:var(--teal)} .books__list b{color:var(--head);font-weight:600;font-size:1rem;line-height:1.45} .books__list span{display:block;color:#8a9294;font-size:.9rem} .ted{padding:76px 0} .ted__list{list-style:none;padding:0;margin:0 auto;max-width:860px;display:grid;gap:18px} .ted__list li{border-top:1px solid var(--line);padding-top:14px} .ted__list a{font-weight:600;font-size:1.02rem} .ted__list span{display:block;color:#8a9294;font-size:.88rem;margin-top:.15rem} .more{padding-block:20px 86px} .more__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px} .more__group h3{font-size:1.12rem;font-weight:600;color:var(--head);margin:0 0 .9rem; padding-bottom:.6rem;border-bottom:2px solid var(--teal)} .more__group ul{list-style:none;padding:0;margin:0} .more__group li{margin:.55rem 0;font-size:.97rem} @media (max-width:1024px){ .vids__grid{grid-template-columns:1fr} .more__grid{grid-template-columns:1fr;gap:30px} } /* form controls don't inherit type by default — a