/* Layout: a review document in Ayofemi's own system that frames one mock site, Linen on bone paper, drawn from the Harper cover. */
/* concept blocks */
@media (prefers-reduced-motion:reduce){.frame{transition:none}}
/* ============ The page · Linen on bone ============ */
.ca{container-type:inline-size;--p:#FAF8F4;--ink:#17181C;--mute:#636167;--rule:#E3E0DA;--red:#8C2C30;--navy:#23334B;background:var(--p);color:var(--ink);font-family:"Newsreader",Georgia,serif;font-size:18px;line-height:1.5;min-height:100%}
.ca *{box-sizing:border-box}
.ca .in{max-width:1080px;margin:0 auto;padding-inline:clamp(20px,5cqw,56px)}
.ca nav{display:flex;justify-content:space-between;align-items:baseline;padding-block:26px;font-family:"Libre Franklin",sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.ca nav .name{font-family:"Bodoni Moda",serif;font-size:18px;letter-spacing:.02em;text-transform:none}
.ca nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.ca nav li:not([data-page]){display:none}
@container (min-width:640px){.ca nav li{display:block!important}}
.ca .hero{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,6cqw,72px);align-items:center;padding-block:40px 64px;border-bottom:0}
.ca .hero img{width:100%;max-width:420px;display:block;box-shadow:0 1px 0 rgba(0,0,0,.06),0 24px 50px -24px rgba(18,18,20,.45);justify-self:center}
.ca .hero h1{font-family:"Bodoni Moda",serif;font-weight:400;font-size:clamp(42px,6.4cqw,72px);line-height:1;letter-spacing:-.005em;text-wrap:balance}
.ca .sub{font-family:"Newsreader",serif;font-style:italic;font-size:22px;margin:16px 0 4px}
.ca .by{font-family:"Libre Franklin",sans-serif;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:28px}
.ca .lede{font-size:20px;line-height:1.45;max-width:30em;margin:0 0 26px}
.ca .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ca .btn{font-family:"Libre Franklin",sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:15px 24px;text-decoration:none;display:inline-block;border:1px solid var(--ink)}
.ca .btn.solid{background:var(--ink);color:var(--p)}
.ca .btn.ghost{color:var(--ink)}
.ca .pub{font-family:"Libre Franklin",sans-serif;font-size:12.5px;color:var(--mute);margin-top:22px}
@container (max-width:640px){.ca .hero{grid-template-columns:1fr;padding-block:16px 48px}.ca .hero img{max-width:260px}}
.ca h2{font-family:"Bodoni Moda",serif;font-weight:400;font-size:34px;line-height:1.1;margin:0 0 24px}
.ca .sec{padding-block:56px;border-top:1px solid var(--rule)}
.ca .formats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.ca .formats>div{background:var(--p);padding:26px 24px;min-width:0}
@container (max-width:640px){.ca .formats{grid-template-columns:1fr}}
.ca .formats h3{font-family:"Bodoni Moda",serif;font-weight:400;font-size:26px;margin:0 0 4px}
.ca .formats .d{font-family:"Libre Franklin",sans-serif;font-size:12.5px;color:var(--mute);margin-bottom:18px}
.ca .formats ul{list-style:none;padding:0;margin:0;font-family:"Libre Franklin",sans-serif;font-size:14px}
.ca .formats li{padding:9px 0;border-top:1px solid var(--rule);display:flex;justify-content:space-between}
.ca .formats li a{text-decoration:none;color:var(--ink)}
.ca .formats li span{color:var(--mute)}
.ca .about{display:grid;grid-template-columns:1fr 2fr;gap:48px}
.ca .about>*{min-width:0}
.ca .about p{font-size:19px;max-width:40em}
@container (max-width:640px){.ca .about{grid-template-columns:1fr;gap:8px}}
.ca .praise{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.ca .praise>*{min-width:0}
@container (max-width:640px){.ca .praise{grid-template-columns:1fr}}
.ca blockquote{margin:0;font-size:22px;line-height:1.35;font-style:italic;color:var(--mute)}
.ca blockquote cite{display:block;font-style:normal;font-family:"Libre Franklin",sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:14px}
.ca .author{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start}
.ca .author>*{min-width:0}
.ca .author img{width:100%;display:block;filter:grayscale(.15)}
@container (max-width:640px){.ca .author{grid-template-columns:1fr}.ca .author img{max-width:220px}}
.ca footer{padding-block:44px 48px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:"Libre Franklin",sans-serif;font-size:12.5px;color:var(--mute)}
.ca .list{display:flex;gap:0;max-width:420px;width:100%}
.ca .list input{flex:1;min-width:0;font:inherit;font-size:14px;padding:12px 14px;border:1px solid var(--ink);background:transparent;color:var(--ink)}
.ca .list button{font:inherit;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--p);border:1px solid var(--ink);padding:0 18px;cursor:pointer}
.ca .tag{display:inline-block;font-family:"Libre Franklin",sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);border:1px solid currentColor;padding:3px 7px;margin-bottom:12px}
.ca .subs{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.ca .subs>*{min-width:0}
.ca .subs p{font-size:19px;max-width:30em;margin:0 0 6px}
.ca .subs .small{font-family:"Libre Franklin",sans-serif;font-size:12px;color:var(--mute);margin-top:10px}
@container (max-width:640px){.ca .subs{grid-template-columns:1fr;gap:18px}}
.ca footer{justify-content:space-between}
/* Two pages inside the mock: the book, and the full bio */
.ca [id]{scroll-margin-top:12px}
.ca .page{display:none}
.ca[data-page="book"] .page-book,.ca[data-page="bio"] .page-bio{display:block}
.ca nav li,.ca nav .name{cursor:pointer}
.ca nav li[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.ca .more{font-family:"Libre Franklin",sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);display:inline-block;padding-bottom:2px}
.ca .hero .btn{padding:15px 20px}
.ca .hero .cta{gap:10px}
/* Where to Purchase: five retailer tiles; a logo file replaces the name when one is supplied */
.ca .buy{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.ca .buy a{display:flex;align-items:center;justify-content:center;min-height:118px;padding:22px 14px;background:var(--p);color:var(--ink);text-decoration:none;text-align:center;transition:background .25s ease}
.ca .buy a:hover,.ca .buy a:focus-visible{background:#F2EFE9;outline:none}
.ca .buy .name{font-family:"Bodoni Moda",serif;font-size:22px;line-height:1.15;letter-spacing:-.005em}
.ca .buy img{height:28px;width:auto;max-width:150px;display:block}
.ca .buy-note{font-family:"Libre Franklin",sans-serif;font-size:12.5px;color:var(--mute);margin:16px 0 0;text-align:center}
@container (max-width:820px){.ca .buy{grid-template-columns:repeat(3,1fr)}}
@container (max-width:640px){.ca .buy{grid-template-columns:1fr 1fr}.ca .buy a{min-height:96px}.ca .buy a:last-child{grid-column:1/-1}.ca .buy .name{font-size:19px}}
/* Formats: centred cells, links visibly underlined */
.ca .formats>div{text-align:center}
.ca .formats li{justify-content:center;gap:10px}
.ca .formats li a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--mute)}
.ca .formats li a:hover,.ca .formats li a:focus-visible{text-decoration-color:var(--ink);text-decoration-thickness:1.5px;outline:none}
.ca .formats li span:empty{display:none}
/* About the Book: jacket at left, copy at right, in the register of the author section */
.ca .about{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start;text-align:left}
.ca .about>*{min-width:0}
.ca .about h2{margin-bottom:22px}
.ca .about .mini{width:100%;max-width:200px;display:block;margin:6px 0 0;box-shadow:0 1px 0 rgba(0,0,0,.06),0 18px 34px -18px rgba(18,18,20,.5)}
.ca .about .copy p{font-size:19px;max-width:38em;margin:0 0 1em}
.ca .about .excerpt{margin-top:18px}
@container (max-width:640px){.ca .about{grid-template-columns:1fr;gap:26px}.ca .about .mini{width:120px}}
/* Trade reviews: set like the endorsements above (quote, then the source), three across; the full review opens beneath the row */
.ca .subhead{font-family:"Bodoni Moda",serif;font-weight:400;font-size:26px;line-height:1.15;margin:48px 0 22px}
.ca .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:start}
.ca .reviews>*{min-width:0}
.ca .review .pull{font-size:22px;line-height:1.35;font-style:italic;color:var(--mute);margin:0 0 14px;max-width:none}
.ca .review .cite{font-family:"Libre Franklin",sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.ca .review .toggle{font-family:"Libre Franklin",sans-serif;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink);padding:0 0 2px;cursor:pointer;display:inline-block}
.ca .review .toggle:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.ca .review-full .full{border-top:1px solid var(--rule);margin-top:40px;padding-top:24px;column-count:2;column-gap:48px}
.ca .review-full .full[hidden]{display:none}
.ca .review-full .label{column-span:all;font-family:"Libre Franklin",sans-serif;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:16px}
.ca .review-full .full p{font-size:17.5px;line-height:1.55;margin:0 0 1em;max-width:none}
.ca .review-full .full .src{column-span:all;font-family:"Libre Franklin",sans-serif;font-size:12.5px;color:var(--mute);margin-top:4px}
.ca .review-full .full .src a{color:inherit}
.ca .review-full .verdict{font-family:"Libre Franklin",sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-right:8px}
@container (max-width:820px){.ca .reviews{grid-template-columns:1fr 1fr}}
@container (max-width:640px){.ca .reviews{grid-template-columns:1fr;gap:32px}.ca .review-full .full{column-count:1;margin-top:28px}}
/* Contact: addresses at left, the speaking form at right */
.ca .contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ca .contact>*{min-width:0}
.ca .contact p{font-size:19px;max-width:30em;margin:0 0 20px}
.ca .contact h3{font-family:"Bodoni Moda",serif;font-weight:400;font-size:26px;line-height:1.15;margin:8px 0 16px}
.ca .emails{list-style:none;padding:0;margin:0;font-family:"Libre Franklin",sans-serif;font-size:14px;max-width:30em}
.ca .emails li{padding:10px 0;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ca .emails li:last-child{border-bottom:1px solid var(--rule)}
.ca .emails span{color:var(--mute)}
.ca .emails a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--mute)}
.ca .emails .soon{color:var(--mute);font-style:italic;opacity:.8}
.ca .inquiry{display:grid;gap:14px;max-width:520px}
.ca .inquiry .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ca .inquiry label{display:block;font-family:"Libre Franklin",sans-serif;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ca .inquiry input:not([type=hidden]):not(.hp),.ca .inquiry textarea{display:block;width:100%;margin-top:6px;font-family:"Newsreader",Georgia,serif;font-size:16px;padding:11px 12px;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:0;box-sizing:border-box}
.ca .inquiry textarea{resize:vertical;min-height:120px}
.ca .inquiry textarea::placeholder{font-style:italic;color:var(--mute);opacity:1}
.ca .inquiry .hp{position:absolute;left:-9999px}
.ca .inquiry button{justify-self:start;cursor:pointer}
.ca .inquiry .status{font-family:"Libre Franklin",sans-serif;font-size:13px;color:var(--mute);margin:0;min-height:1em;max-width:none}
@container (max-width:640px){.ca .contact{grid-template-columns:1fr;gap:36px}.ca .inquiry .row{grid-template-columns:1fr}}
.ca .reveal{opacity:0;transform:perspective(900px) rotateY(-18deg) translateY(14px)}
.ca .reveal.shown{opacity:1;transform:none;animation:settle 1.1s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes settle{from{opacity:0;transform:perspective(900px) rotateY(-18deg) translateY(14px)}to{opacity:1;transform:none}}
.ca .mini.shown{transition:transform .35s ease,box-shadow .35s ease}
.ca .mini.shown:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(0,0,0,.06),0 28px 44px -20px rgba(18,18,20,.55)}
@media (prefers-reduced-motion:reduce){.ca .reveal{opacity:1;transform:none}.ca .reveal.shown{animation:none}}
.ca .back{font-family:"Libre Franklin",sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-decoration:none;display:inline-block;margin-bottom:22px}
.ca .bio{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(28px,6cqw,64px);padding-block:16px 56px;align-items:start}
.ca .bio>*{min-width:0}
.ca .bio img{width:100%;display:block;position:sticky;top:0}
.ca .bio h1{font-family:"Bodoni Moda",serif;font-weight:400;font-size:clamp(36px,5cqw,56px);line-height:1.02;letter-spacing:-.005em;margin:0 0 10px}
.ca .bio .role{font-family:"Libre Franklin",sans-serif;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:26px}
.ca .bio p{font-size:18.5px;line-height:1.5;max-width:38em;margin:0 0 1em}
.ca .bio h3{font-family:"Bodoni Moda",serif;font-weight:400;font-size:24px;margin:36px 0 12px}
.ca .bio ul{list-style:none;padding:0;margin:0;font-family:"Libre Franklin",sans-serif;font-size:14px;max-width:38em}
.ca .bio li{padding:9px 0;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px}
.ca .bio li span{color:var(--mute);white-space:nowrap}
.ca .bio li a{color:var(--ink);text-decoration:none}
@container (max-width:640px){.ca .bio{grid-template-columns:1fr}.ca .bio img{max-width:300px;position:static}.ca .bio li{flex-direction:column;gap:2px}}
/* site shell */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#FAF8F4;color:#17181C}
a{color:inherit}
.ca nav a{color:inherit;text-decoration:none;display:inline-block;padding:4px 0}
.ca nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.ca nav .name a{text-decoration:none}
.ca .sec,.ca [id]{scroll-margin-top:16px}
.ca .skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--p);padding:8px 12px;font-family:"Libre Franklin",sans-serif;font-size:13px}
.ca .skip:focus{left:16px;top:16px;z-index:10}
.ca img{max-width:100%;height:auto}
.ca .page{display:block}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}