@import url('https://fonts.googleapis.com/css2?family=Revalia&family=Fraunces:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap'); :root{ --ip-crimson:#830E0E;--ip-crimson-deep:#5A0909; --ip-ink:#141414;--ip-graphite:#2B2B2B;--ip-slate:#6B6B6B; --ip-mist:#E6E3DF;--ip-paper:#F7F5F1;--ip-bone:#FFFFFF; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Inter',system-ui,sans-serif;color:var(--ip-graphite); background:var(--ip-paper);font-size:18px;line-height:1.65; font-feature-settings:'kern' 1,'liga' 1;-webkit-font-smoothing:antialiased} a{color:var(--ip-ink);text-decoration:none;position:relative;transition:color .2s} a:hover{color:var(--ip-crimson)} .site-header{display:flex;justify-content:space-between;align-items:center; padding:24px 60px;border-bottom:1px solid var(--ip-mist); position:sticky;top:0;background:rgba(247,245,241,.94); backdrop-filter:blur(8px);z-index:50} .monogram{font-family:'Revalia',serif;color:var(--ip-crimson);font-size:28px} .nav{display:flex;gap:24px;flex-wrap:wrap} .nav a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ip-ink);font-weight:500} .nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0; background:var(--ip-crimson);transition:width .2s} .nav a:hover::after,.nav a.active::after{width:100%} .hero{display:grid;grid-template-columns:1.4fr 1fr;gap:60px; padding:100px 80px 120px;align-items:center;max-width:1400px;margin:0 auto} .eyebrow{font-family:'Fraunces',serif;font-style:italic;color:var(--ip-slate); font-size:18px;margin-bottom:20px} .wordmark{font-family:'Revalia',serif;color:var(--ip-crimson); font-size:clamp(48px,7vw,104px);line-height:.95;margin-bottom:28px} .hero h2{font-family:'Fraunces',serif;font-weight:400;color:var(--ip-ink); font-size:26px;line-height:1.35;margin-bottom:40px;max-width:30ch} .btn{display:inline-block;padding:14px 28px;border:1.5px solid var(--ip-crimson); color:var(--ip-crimson);font-size:12px;letter-spacing:.2em;text-transform:uppercase; font-weight:600;transition:all .2s;cursor:pointer;background:transparent} .btn:hover{background:var(--ip-crimson);color:var(--ip-bone)} .book-cover{background:linear-gradient(135deg,#efece6,#e4dfd4);aspect-ratio:2/3; border-radius:2px;transform:rotate(4deg); box-shadow:0 30px 60px -20px rgba(20,20,20,.3); display:flex;flex-direction:column;justify-content:space-between; padding:36px 28px;max-width:320px;justify-self:center;border:1px solid rgba(0,0,0,.05)} .book-cover .title{font-family:'Revalia',serif;color:var(--ip-crimson);font-size:30px;line-height:1} .book-cover .meta{font-family:'Fraunces',serif;font-style:italic;color:var(--ip-ink);font-size:14px} .section{max-width:1400px;margin:0 auto;padding:80px 80px} .section-title{font-family:'Fraunces',serif;color:var(--ip-ink);font-size:40px;font-weight:600;margin-bottom:12px} .section-lede{color:var(--ip-slate);font-size:18px;max-width:65ch;margin-bottom:50px} .hairline{height:1px;background:var(--ip-crimson);opacity:.6;max-width:1400px;margin:0 auto} /* Volumes index cards (home page) */ .volumes{display:grid;grid-template-columns:repeat(2,1fr);gap:28px} .vol-card{background:var(--ip-bone);border:1px solid var(--ip-mist);padding:32px; border-top:3px solid var(--ip-crimson);display:flex;flex-direction:column;gap:12px; transition:all .2s;cursor:pointer;text-decoration:none;color:inherit} .vol-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px -18px rgba(20,20,20,.3)} .vol-card .label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ip-crimson);font-weight:600} .vol-card h3{font-family:'Revalia',serif;color:var(--ip-ink);font-size:24px;line-height:1.05} .vol-card .sub{font-family:'Fraunces',serif;font-style:italic;color:var(--ip-slate);font-size:15px} .vol-card p{font-size:15px;color:var(--ip-graphite)} .vol-card .pubdate{margin-top:auto;font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--ip-slate);padding-top:14px;border-top:1px solid var(--ip-mist)} /* Accordion for Volumes page */ .accordion{border-top:1px solid var(--ip-mist)} .acc-item{border-bottom:1px solid var(--ip-mist)} .acc-head{display:grid;grid-template-columns:auto 1fr auto auto;gap:24px;align-items:baseline; padding:28px 8px;cursor:pointer;background:transparent;border:0;width:100%;text-align:left; font-family:inherit;transition:background .2s} .acc-head:hover{background:rgba(131,14,14,.03)} .acc-head .accnum{font-family:'Revalia',serif;color:var(--ip-crimson);font-size:22px} .acc-head .acctitle{font-family:'Fraunces',serif;color:var(--ip-ink);font-size:24px;font-weight:600} .acc-head .accdate{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ip-slate)} .acc-head .chev{color:var(--ip-crimson);font-size:22px;transition:transform .2s} .acc-item[open] .chev{transform:rotate(45deg)} .acc-body{padding:20px 8px 40px} .acc-body h4{font-family:'Fraunces',serif;color:var(--ip-ink);font-size:20px;margin:18px 0 10px;font-weight:600} .acc-body p{max-width:70ch;margin-bottom:14px} .acc-body .tagline{font-family:'Fraunces',serif;font-style:italic;color:var(--ip-crimson); font-size:20px;border-left:2px solid var(--ip-crimson);padding-left:18px;margin:20px 0} .acc-body ul{margin:10px 0 18px 22px} /* Methodology pillars */ .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:20px} .pillar{background:var(--ip-bone);border:1px solid var(--ip-mist);padding:28px} .pillar .num{font-family:'Revalia',serif;color:var(--ip-crimson);font-size:28px;line-height:1} .pillar h4{font-family:'Fraunces',serif;color:var(--ip-ink);font-size:19px;margin:8px 0 10px;font-weight:600} .pillar p{font-size:15px;color:var(--ip-graphite)} .editorial{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start} .pullquote{font-family:'Fraunces',serif;font-style:italic;font-size:30px; line-height:1.3;color:var(--ip-ink);border-left:2px solid var(--ip-crimson);padding-left:24px} .prose p{margin-bottom:18px;max-width:65ch} .prose h3{font-family:'Fraunces',serif;color:var(--ip-ink);font-size:22px;margin:26px 0 10px;font-weight:600} /* Learning resources hub */ .resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .resource-card{background:var(--ip-bone);border:1px solid var(--ip-mist);padding:32px; display:flex;flex-direction:column;gap:14px;transition:all .2s;text-decoration:none;color:inherit} .resource-card:hover{transform:translateY(-2px);border-top:2px solid var(--ip-crimson)} .resource-card .kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--ip-crimson);font-weight:600} .resource-card h3{font-family:'Fraunces',serif;color:var(--ip-ink);font-size:22px;font-weight:600;line-height:1.25} .resource-card p{color:var(--ip-graphite);font-size:15px} .resource-card .more{margin-top:auto;color:var(--ip-crimson);font-size:12px; letter-spacing:.2em;text-transform:uppercase;font-weight:600} /* Persona deck (QR grid) — FIXED TYPOGRAPHY: body font for id/name/tag */ .deck-info{background:var(--ip-bone);border:1px solid var(--ip-mist);padding:28px 32px; margin-bottom:40px;display:flex;gap:28px;align-items:center} .deck-info .kbd{font-family:'Revalia',serif;color:var(--ip-crimson);font-size:44px;line-height:1} .city-block{margin-bottom:48px} .city-block h3{font-family:'Fraunces',serif;color:var(--ip-ink); font-size:22px;margin-bottom:4px;font-weight:600} .city-block .city-meta{color:var(--ip-slate);font-size:14px;margin-bottom:20px} .qr-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px} .persona{background:var(--ip-bone);border:1px solid var(--ip-mist);padding:14px; text-align:center;transition:all .2s;text-decoration:none;color:inherit;display:block} .persona:hover{border-top:2px solid var(--ip-crimson);transform:translateY(-2px)} .persona img{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--ip-mist)} .persona .pid{font-family:'Inter',sans-serif;color:var(--ip-crimson); font-size:14px;font-weight:700;letter-spacing:.1em;margin-top:10px} .persona .pname{font-family:'Inter',sans-serif;font-size:15px;color:var(--ip-ink); margin-top:2px;font-weight:600} .persona .ptag{font-family:'Inter',sans-serif;font-size:12px;color:var(--ip-slate);margin-top:2px} /* Persona detail page */ .persona-page{max-width:900px;margin:0 auto;padding:80px 40px} .persona-page .pcity{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ip-crimson);font-weight:600} .persona-page h1{font-family:'Fraunces',serif;color:var(--ip-ink);font-size:48px;margin:8px 0 24px;font-weight:600} .persona-page .pmeta{font-family:'Fraunces',serif;font-style:italic;color:var(--ip-slate);font-size:18px;margin-bottom:40px} .card-block{background:var(--ip-bone);border:1px solid var(--ip-mist); padding:36px;margin-bottom:30px} .card-block h2{font-family:'Fraunces',serif;color:var(--ip-ink);font-size:20px;font-weight:600; margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--ip-mist)} .card-block dl{display:grid;grid-template-columns:180px 1fr;gap:10px 18px} .card-block dt{color:var(--ip-slate);font-size:14px;text-transform:uppercase;letter-spacing:.1em} .card-block dd{color:var(--ip-graphite);font-size:16px} .prompt-block{background:var(--ip-crimson-deep);color:var(--ip-bone);padding:36px;margin-bottom:30px} .prompt-block h2{font-family:'Revalia',serif;color:var(--ip-bone);font-size:22px;margin-bottom:16px} .prompt-block p{color:rgba(255,255,255,.92);font-family:'Fraunces',serif;font-style:italic;font-size:17px;line-height:1.6} .back-link{color:var(--ip-crimson);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600} /* Footer */ .footer{background:var(--ip-crimson-deep);color:var(--ip-bone);padding:80px 80px 40px;margin-top:100px} .footer-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:60px} .footer h3{font-family:'Revalia',serif;color:var(--ip-bone);font-size:44px;line-height:1;margin-bottom:16px} .footer p{color:rgba(255,255,255,.75);max-width:40ch;margin-bottom:24px} .newsletter{display:flex;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:8px;max-width:420px} .newsletter input{flex:1;background:transparent;border:0;outline:0;color:var(--ip-bone); font-family:inherit;font-size:16px;padding:6px 0} .newsletter input::placeholder{color:rgba(255,255,255,.5)} .newsletter button{background:transparent;border:0;color:var(--ip-bone);cursor:pointer; font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600} .footer-meta{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15); margin-top:50px;padding-top:24px;font-size:13px;color:rgba(255,255,255,.55); display:flex;justify-content:space-between} /* Authors */ .authors{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;max-width:900px;margin:0 auto} .author{text-align:center} .author .portrait{width:200px;height:200px;border-radius:50%;margin:0 auto 20px; background:linear-gradient(135deg,#cfcac2,#8c8680);filter:grayscale(100%); transition:filter .3s;border:1px solid var(--ip-mist)} .author:hover .portrait{filter:grayscale(0%)} .author .name{font-family:'Fraunces',serif;font-size:22px;color:var(--ip-ink);font-weight:600} .author .role{color:var(--ip-slate);font-size:14px;margin-top:4px} .author .bio{color:var(--ip-graphite);font-size:15px;margin-top:14px;max-width:38ch;margin-inline:auto} @media (max-width:900px){ .hero,.editorial,.footer-inner,.authors,.volumes,.pillars,.resource-grid{grid-template-columns:1fr} .site-header,.section,.footer{padding-left:24px;padding-right:24px} .qr-grid{grid-template-columns:repeat(3,1fr)} .card-block dl{grid-template-columns:1fr} .card-block dt{margin-top:10px} } .creds{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px} .creds span{font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--ip-crimson);border:1px solid var(--ip-crimson); padding:4px 10px;border-radius:999px;font-weight:600} /* --- Icons --- */ .icon{display:inline-block;width:22px;height:22px;vertical-align:middle; stroke:var(--ip-crimson);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .icon-lg{width:36px;height:36px;stroke-width:1.4} .icon-inline{margin-right:10px} /* Hero adjustments for the new framing */ .hero-kicker{display:inline-block;font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--ip-crimson);font-weight:700;border:1px solid var(--ip-crimson);padding:6px 12px;margin-bottom:20px} .hero-sub{color:var(--ip-slate);font-family:'Fraunces',serif;font-style:italic;font-size:17px;margin-bottom:16px} /* Accordion — ensure body content is spaced well */ .acc-body .benefit-list{list-style:none;margin:8px 0 20px 0;padding:0} .acc-body .benefit-list li{position:relative;padding:8px 0 8px 34px;border-bottom:1px dashed var(--ip-mist);max-width:70ch} .acc-body .benefit-list li:last-child{border-bottom:0} .acc-body .benefit-list li svg{position:absolute;left:0;top:10px} .meta-row{display:grid;grid-template-columns:170px 1fr;gap:10px 18px; margin-top:20px;padding-top:20px;border-top:1px solid var(--ip-mist);font-size:15px} .meta-row dt{color:var(--ip-crimson);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600} .meta-row dd{color:var(--ip-graphite)} /* Filter chips for Learning Resources */ .filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 40px;padding:18px 0; border-top:1px solid var(--ip-mist);border-bottom:1px solid var(--ip-mist)} .chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--ip-mist); background:var(--ip-bone);color:var(--ip-ink);cursor:pointer;font-size:12px; letter-spacing:.15em;text-transform:uppercase;font-weight:600;transition:all .15s; font-family:inherit} .chip svg{stroke:var(--ip-ink)} .chip:hover{border-color:var(--ip-crimson);color:var(--ip-crimson)} .chip:hover svg{stroke:var(--ip-crimson)} .chip.active{background:var(--ip-crimson);color:var(--ip-bone);border-color:var(--ip-crimson)} .chip.active svg{stroke:var(--ip-bone)} .resource-card .icon-wrap{width:52px;height:52px;border-radius:50%;background:rgba(131,14,14,.08); display:flex;align-items:center;justify-content:center;margin-bottom:6px} /* Resource / tool individual page */ .tool-page{max-width:1100px;margin:0 auto;padding:80px 40px} .tool-page .crumbs{font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--ip-slate);margin-bottom:20px} .tool-page .crumbs a{color:var(--ip-crimson)} .tool-page h1{font-family:'Fraunces',serif;color:var(--ip-ink);font-size:48px; font-weight:600;margin:8px 0 16px;display:flex;align-items:center;gap:18px} .tool-page .lede{font-family:'Fraunces',serif;font-style:italic;color:var(--ip-slate); font-size:20px;max-width:65ch;margin-bottom:40px} /* Make persona grid slightly more breathable */ .qr-grid{grid-template-columns:repeat(6,1fr)} @media (max-width:1200px){.qr-grid{grid-template-columns:repeat(4,1fr)}} /* How-to steps */ .steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:30px 0} .step{background:var(--ip-bone);border:1px solid var(--ip-mist);padding:24px;position:relative} .step::before{counter-increment:s;content:counter(s,decimal-leading-zero); font-family:'Revalia',serif;color:var(--ip-crimson);font-size:28px;line-height:1} .step h4{font-family:'Fraunces',serif;color:var(--ip-ink);font-size:18px;margin:8px 0 6px;font-weight:600} .step p{font-size:14px;color:var(--ip-graphite)} @media (max-width:900px){.steps{grid-template-columns:1fr}} /* --- Real author portraits --- */ .author .portrait{background:#d8d4cc;background-size:cover;background-position:center top;overflow:hidden} .author .portrait.michael{background-image:url('assets/michael.jpg')} .author .portrait.petteri{background-image:url('assets/petteri.jpg')} /* --- Header brand: match IP. monogram size/font for the wordmark --- */ .brand{display:flex;align-items:baseline;gap:12px} .brand .wordmark-sm{ font-family:'Revalia',serif;color:var(--ip-crimson);font-size:28px; letter-spacing:0;font-weight:400;white-space:nowrap;line-height:1; } @media (max-width:900px){.brand .wordmark-sm{font-size:20px}} @media (max-width:700px){.brand .wordmark-sm{display:none}} /* --- Series shelf: right side, pinned, roomier --- */ .series-shelf{ position:fixed;right:28px;left:auto;top:110px;transform:none; z-index:40;background:rgba(247,245,241,.95);backdrop-filter:blur(10px); border:1px solid var(--ip-mist);border-top:3px solid var(--ip-crimson); padding:22px 24px 20px;width:280px; opacity:1;pointer-events:auto;transition:opacity .2s ease; box-shadow:0 20px 40px -24px rgba(20,20,20,.25); } .series-shelf .shelf-label{ font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:var(--ip-crimson);font-weight:700;margin-bottom:14px } .series-shelf ol{list-style:none;margin:0;padding:0;counter-reset:shelf} .series-shelf li{border-top:1px solid var(--ip-mist)} .series-shelf li:not(.illustrated){counter-increment:shelf} .series-shelf li:first-child{border-top:0} .series-shelf a{ display:grid;grid-template-columns:28px 1fr;gap:12px;padding:11px 0; color:var(--ip-ink);font-size:14px;line-height:1.35;align-items:baseline; } .series-shelf a::before{ content:counter(shelf,upper-roman); font-family:'Revalia',serif;color:var(--ip-crimson);font-size:15px;line-height:1.2 } .series-shelf li.illustrated a::before{content:"★";color:var(--ip-crimson)} .series-shelf a:hover{color:var(--ip-crimson)} @media (max-width:1280px){.series-shelf{display:none}} /* Replace bullet points with tick icons for any .prose