/*
Theme Name: By Kara — In the Margins Refined
Version: 2.0.0
Requires PHP: 8.0
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,500;1,600&display=swap');
:root{--paper:#fbf8ef;--ink:#1d1230;--lilac:#cda4f6;--green:#b4f079;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 var(--serif)}a{color:inherit}a:focus-visible{outline:3px solid #7233aa;outline-offset:3px}header,footer{padding:22px 4%;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}header .logo{font:600 36px var(--serif);letter-spacing:-.08em;text-decoration:none}nav{display:flex;gap:28px;flex-wrap:wrap;font:500 13px var(--sans)}nav a{text-decoration:none}.hero{display:grid;grid-template-columns:1.95fr 1fr;min-height:700px}.hero-left{position:relative;overflow:hidden;padding:36px 4.5%;min-height:700px}.hero h1{font:500 clamp(85px,10vw,170px)/.92 var(--serif);letter-spacing:-.09em;margin:18px 0;position:relative;z-index:2}.hero h1 em{display:block}.hero h1 sup{font-size:.28em;color:#ac6fe2;letter-spacing:0}.hero-left p{font-size:clamp(22px,2.3vw,33px);position:relative;z-index:2}.book{position:absolute;bottom:0;right:-3%;width:89%;height:300px;object-fit:cover;filter:grayscale(1);mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 90%,transparent);z-index:1}.hero-left:after{content:'Same questions. Different lives. ↗';position:absolute;bottom:11%;left:4%;max-width:120px;color:#6232a6;transform:rotate(-11deg);font:italic 18px var(--serif);z-index:3}.hero-right{background:var(--lilac);padding:36px 9%;display:flex;flex-direction:column;justify-content:space-between;gap:28px}.number{font:500 130px/1 var(--serif);letter-spacing:-.08em}.number:after{content:'';display:block;width:85px;height:3px;background:var(--green);transform:rotate(-8deg);margin:0 0 15px 10px}.hero-right h2{font:500 clamp(35px,3.5vw,55px)/1.12 var(--serif);letter-spacing:-.035em}.hero-right p{font-size:18px}.action{display:inline-block;align-self:flex-start;background:var(--green);padding:13px 18px;text-decoration:none;font:600 14px var(--sans)}.section{padding:65px 4%}.section h2{font:500 clamp(36px,4.8vw,68px)/1.1 var(--serif);letter-spacing:-.05em}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.card{border-top:1px solid #564463;padding-top:18px}.card h3{font:500 30px/1.22 var(--serif)}.card a{text-decoration:none}.card a:hover{text-decoration:underline}.reading{max-width:810px;margin:auto;padding:60px 25px}.reading h1{font:500 clamp(50px,7vw,90px)/1.1 var(--serif)}.reading .body{font:21px/1.85 var(--serif)}.reading img{max-width:100%;height:auto}.note{background:#ead5f9;padding:25px;margin:35px 0}.note summary{cursor:pointer;font-size:26px}.rabbit{background:#241532;color:white;padding:30px;margin:45px 0}.rabbit a{display:block;padding:14px;background:#4c3460;margin:10px 0;color:white}footer{border-top:1px solid #cfc0d0;font:13px var(--sans)}@media(max-width:850px){.hero{display:block}.hero-left{min-height:600px}.hero h1{font-size:clamp(70px,14vw,125px)}.hero-right{min-height:370px}.cards{grid-template-columns:1fr}.book{width:105%;height:280px}}@media(max-width:500px){header{align-items:flex-start}nav{gap:15px}.hero-left{min-height:530px}.hero h1{font-size:clamp(63px,14vw,90px)}.hero-left p{font-size:21px}.book{height:240px}.number{font-size:85px}}

/* V3: deliberately composed book-cover layout */
body{background:#faf7ef}
header{min-height:84px;border-bottom:1px solid #3e3045;padding:17px 3.6%}
header .logo{font-size:43px;letter-spacing:-.075em}
header nav{gap:31px}
.hero{grid-template-columns:minmax(0,2.1fr) minmax(355px,1fr);min-height:770px}
.hero-left{min-height:770px;padding:40px 5.2%;isolation:isolate}
.hero-left>.small{font:600 12px 'DM Mono',monospace;letter-spacing:.09em;text-transform:uppercase}
.hero h1{font-size:clamp(90px,10.4vw,174px);line-height:.92;letter-spacing:-.08em;margin:37px 0 18px;max-width:100%;white-space:nowrap}
.hero h1 em{font-style:italic;letter-spacing:-.095em}
.hero h1 sup{font-size:.26em;vertical-align:top;margin-left:6px}
.hero-left p{font-size:clamp(24px,2.2vw,32px);margin:32px 0}
.book{right:-2%;bottom:0;width:88%;height:340px;object-fit:cover;object-position:center 53%;mix-blend-mode:multiply;opacity:.9;mask-image:linear-gradient(to bottom,transparent 0%,black 15%,black 88%,transparent 100%)}
.hero-left:after{bottom:15%;left:5%;font-size:20px;line-height:1.1}
.hero-right{padding:43px 8%;min-height:770px;position:relative;overflow:hidden}
.hero-right:before{content:'';position:absolute;left:-1px;top:0;width:38px;height:85px;background:#faf7ef;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.hero-right .number{font-size:125px}
.hero-right h2{font-size:clamp(40px,3.5vw,59px);line-height:1.12}
.hero-right .action{margin-bottom:20px}
.hero-right .small{font:600 12px 'DM Mono',monospace;letter-spacing:.11em;text-transform:uppercase}
.section{padding:60px 4.5%}
.section h2{font-size:clamp(38px,4.5vw,66px)}
.cards{gap:35px}
.card h3{font-size:clamp(25px,2.5vw,37px)}
.card{padding:24px 4px}
.card .small{font:600 11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.07em}
.reading{padding-top:85px}
.reading h1{letter-spacing:-.045em}
.rabbit{background:#25173b;border-radius:12px}
.rabbit a{border-radius:5px;text-decoration:none}
.rabbit a:hover{background:#73508b}
@media(max-width:1100px){.hero{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr)}.hero h1{font-size:clamp(76px,9.5vw,125px)}}
@media(max-width:850px){.hero{display:block}.hero-left{min-height:670px}.hero-right{min-height:410px;padding:30px 6%}.hero h1{font-size:clamp(75px,14vw,125px)}.book{width:95%;height:310px}.hero-right .number{font-size:90px}}
@media(max-width:500px){header{padding:16px 5%}header .logo{font-size:35px}.hero-left{min-height:555px;padding:35px 5%}.hero h1{font-size:clamp(62px,13.7vw,85px);white-space:normal}.hero-left p{font-size:21px}.book{width:112%;height:230px;right:-9%}.hero-right{min-height:430px}.hero-right h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}