/* Site-level overrides — ported from Site.dc.html of the Claude Design project. */
:root{
--color-bg:#eedcb4;--color-surface:#e4d0a2;--color-accent:#7e1f14;--color-accent-2:#7e1f14;
--color-accent-100:#f0e1d4;--color-accent-200:#e6c9b8;--color-accent-300:#d3a48e;--color-accent-400:#b06a55;
--color-accent-500:#7e1f14;--color-accent-600:#6c1a11;--color-accent-700:#58150d;--color-accent-800:#44100a;--color-accent-900:#320c07;
--font-heading:"Instrument Serif",Georgia,serif;--font-heading-weight:400
}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body)}
a{color:var(--color-accent-700)} a:hover{color:var(--color-accent)}
@keyframes skRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes skDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
html{-webkit-text-size-adjust:100%}
img,svg,video{max-width:100%}
/* nav: brand left, links right; collapses to a hamburger drawer below 880px.
The paper-glass backdrop is painted by ::before — putting backdrop-filter on
.sk-nav itself would make it the containing block for the fixed drawer. */
.sk-nav{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;isolation:isolate}
.sk-nav::before{content:'';position:absolute;inset:0;z-index:-1;
background:color-mix(in srgb, var(--color-bg) 72%, transparent);
backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.sk-navlinks{display:flex;flex-wrap:wrap;gap:4px 26px;align-items:center}
.sk-menu-btn{display:none;background:none;border:0;cursor:pointer;padding:10px;margin:-6px -8px -6px 0;border-radius:var(--radius-md)}
.sk-menu-ico{display:flex;flex-direction:column;justify-content:center;gap:5px;width:22px;height:18px}
.sk-menu-ico span{display:block;height:2px;background:var(--color-text);border-radius:1px;transition:transform .22s ease, opacity .18s ease}
.sk-menu-btn.open .sk-menu-ico span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sk-menu-btn.open .sk-menu-ico span:nth-child(2){opacity:0}
.sk-menu-btn.open .sk-menu-ico span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sk-drawer-head{display:none}
.sk-nav-backdrop{display:none}
@media(max-width:880px){
.sk-menu-btn{display:inline-flex}
/* dimmed backdrop behind the drawer */
.sk-nav-backdrop{display:block;position:fixed;inset:0;z-index:65;
background:color-mix(in srgb, var(--color-accent-900) 44%, transparent);
backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
opacity:0;pointer-events:none;transition:opacity .28s ease}
.sk-nav-backdrop.open{opacity:1;pointer-events:auto}
/* drawer slides in from the right */
.sk-navlinks{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(320px,84vw);
display:flex;flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;
background:var(--color-bg);border-left:1px solid var(--color-divider);
padding:16px 22px calc(24px + env(safe-area-inset-bottom));
box-shadow:-24px 0 48px color-mix(in srgb, var(--color-accent-900) 22%, transparent);
transform:translateX(102%);visibility:hidden;
transition:transform .3s cubic-bezier(.2,.7,.3,1), visibility 0s linear .3s}
.sk-navlinks.open{transform:none;visibility:visible;
transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.sk-drawer-head{display:flex;align-items:center;justify-content:space-between;
border-bottom:1px solid var(--color-text);padding-bottom:12px;margin-bottom:4px}
.sk-drawer-close{background:none;border:0;cursor:pointer;font-size:19px;line-height:1;
color:var(--color-neutral-800);padding:10px;margin:-8px -10px -8px 0;border-radius:var(--radius-md)}
.sk-drawer-close:hover{color:var(--color-accent)}
.sk-navlinks .sk-navlink{padding:15px 2px !important;font-size:15px !important;border-bottom:1px solid var(--color-divider) !important}
.sk-navlinks .sk-navlink[aria-current="page"]{color:var(--color-accent-700) !important;border-bottom-color:var(--color-accent) !important}
.sk-navlinks .sk-btn-accent{margin-top:18px;justify-content:center;min-height:48px}
/* the reading-progress line outranks the nav on purpose — mute it behind the drawer */
body.sk-nav-open .sk-topline{display:none}
}
/* media-query layout */
.sk-herogrid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:920px){.sk-herogrid{grid-template-columns:1fr 320px}}
/* hero, stacked (tablet portrait and below): centre the portrait column,
and let the plate scale by ratio instead of the fixed desktop height. */
@media(max-width:919px){
.sk-heroaside{display:flex;flex-direction:column;align-items:center;text-align:center}
.sk-heroplate{max-width:min(300px,68vw) !important;margin-inline:auto}
.sk-heroplate .image-slot{height:auto !important;aspect-ratio:4/5}
}
.sk-toc{display:none}
@media(min-width:1260px){.sk-toc{display:block}}
.sk-artgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;justify-content:center}
@media(min-width:1260px){.sk-artgrid{grid-template-columns:minmax(0,660px) 216px}}
.sk-twocol{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:960px){.sk-twocol{grid-template-columns:minmax(0,1fr) 300px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important}}
.sk-shell{overflow-x:clip}
@media(max-width:640px){
main p{text-align:left !important}
.nav{padding-top:12px !important;padding-bottom:12px !important}
.tag{padding:7px 12px}
.btn{min-height:44px}
.sk-thumb{flex:1 1 100% !important;order:5}
.sk-thumb .image-slot{height:180px !important}
/* hero: reclaim the desktop dead space, size the type to the viewport */
.sk-herogrid{gap:26px}
.sk-heroinner{padding:34px clamp(18px,5vw,48px) 44px !important}
.sk-herokicker{font-size:11.5px !important;letter-spacing:.13em !important;line-height:1.5}
.sk-heroh1{font-size:clamp(27px,7.4vw,38px) !important;line-height:1.12 !important;max-width:none !important;margin:12px 0 16px !important}
.sk-herocta{display:grid !important;grid-template-columns:1fr;gap:10px !important;margin-top:22px !important}
.sk-herocta .btn{width:100%;justify-content:center}
.sk-heroplate{max-width:min(258px,64vw) !important}
/* forms: 16px stops iOS auto-zoom; generous touch targets */
.input,select.input,textarea.input{font-size:16px !important;min-height:46px}
textarea.input{min-height:0}
/* hero stats: tidy 2-up grid instead of a squeezed flex row */
[aria-label="Career figures"]{display:grid !important;grid-template-columns:1fr 1fr;gap:0 14px}
.sk-stat{padding:14px 6px 8px 0}
.sk-stat > div:first-child{font-size:26px !important}
.sk-stat > div:last-child{font-size:11px !important;letter-spacing:.09em !important}
/* tables (article + project fact tables) scroll sideways instead of bursting the page */
main table{display:block;overflow-x:auto;max-width:100%}
/* toast spans the bottom, thumb-reachable */
.sk-toast{left:14px;right:14px;transform:none;text-align:center;bottom:calc(14px + env(safe-area-inset-bottom))}
/* — footer —
Four stacked full-width blocks make a very long tail on a phone, so the
brand sits alone, contact rows become proper tap targets, Navigate goes
two-up, and Services reads as one dot-separated line. */
footer > img{display:none} /* decorative engraving strip */
.sk-footinner{padding-top:28px !important}
.sk-footgrid{gap:22px !important;padding-bottom:22px !important}
.sk-foothead{font-size:9.5px !important;margin-bottom:9px !important}
.sk-footbrand > div:first-child{font-size:20px}
.sk-footbrand p{font-size:13.5px !important;max-width:none !important;margin-top:9px !important}
.sk-footlink{word-break:break-word} /* long emails must not overflow */
.sk-footcontact{gap:2px !important;font-size:13.5px !important}
.sk-footcontact > a,.sk-footcontact > span{min-height:42px;align-items:center !important;
padding:2px 0;border-bottom:1px solid var(--color-divider)}
.sk-footcontact > :last-child{border-bottom:0}
.sk-footnav{grid-template-columns:1fr 1fr;gap:2px 14px !important;font-size:13.5px !important}
.sk-footnav a{min-height:40px;display:flex;align-items:center}
/* services as flowing text — five stacked rows is a lot of height for a list */
.sk-footservices{display:flex !important;flex-wrap:wrap;gap:3px 6px !important;
font-size:13px !important;line-height:1.5}
.sk-footservices span:not(:last-child)::after{content:' ·';color:var(--color-accent)}
.sk-footbar{justify-content:center !important;text-align:center;gap:8px !important;
font-size:12.5px !important;padding:14px 0 calc(20px + env(safe-area-inset-bottom)) !important}
/* book reader: controls wrap into comfortable rows */
#reader-controls{gap:10px}
#reader-controls .btn{min-height:44px}
#reader-book{max-height:none !important}
/* Books index becomes a scannable list: small cover left, details right.
Full-width 3D covers cost ~600px of height per book on a phone. */
.sk-booklist{grid-template-columns:1fr !important;gap:0 !important;padding-bottom:36px !important}
.sk-bookcard{flex-direction:row !important;align-items:flex-start;gap:15px;
padding:17px 0;border-bottom:1px solid var(--color-divider)}
.sk-bookcard:first-child{padding-top:4px}
.sk-bookcard .book3d{flex:0 0 92px;perspective:420px;
filter:drop-shadow(5px 7px 9px color-mix(in srgb, var(--color-accent-900) 26%, transparent))}
.sk-bookcard .book3d-inner{width:100%;transform:rotateY(-14deg)}
.sk-bookcard .book3d-front{transform:translateZ(6px)}
.sk-bookcard .book3d-back{transform:translateZ(-6px)}
.sk-bookcard .book3d-pages{width:12px;transform:translateX(6px) rotateY(90deg)}
.sk-bookcard .book3d-top{height:12px;transform:translateY(-6px) rotateX(90deg)}
.sk-bookmeta{flex:1 1 auto;min-width:0;margin-top:0 !important}
.sk-booktitle{font-size:17.5px !important;line-height:1.25 !important}
/* keep rows even — the blurb gives a taste, the book page gives the rest */
.sk-bookdesc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
font-size:13px !important;line-height:1.55 !important;margin-top:6px !important}
.sk-bookmeta .btn{min-height:38px;font-size:13px !important;padding:6px 14px !important}
.sk-bookpager{margin-top:0 !important;padding-bottom:44px !important}
/* page headers: 56px of lead-in is a desktop luxury */
.sk-pagehead{padding-top:26px !important;padding-bottom:12px !important}
.sk-pagehead h1{font-size:clamp(25px,7vw,34px) !important;line-height:1.15;margin:9px 0 8px !important}
.sk-pagehead > div:first-child{font-size:11.5px !important;letter-spacing:.13em !important}
/* Gallery: two-up contact sheet instead of one tall column.
Category filters become a single swipeable strip rather than wrapping rows. */
.sk-galtabs{flex-wrap:nowrap !important;overflow-x:auto;gap:0 18px !important;margin-bottom:18px !important;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sk-galtabs::-webkit-scrollbar{display:none}
.sk-galtabs a{font-size:12px !important;letter-spacing:.1em !important;padding:7px 1px 10px !important}
.sk-galgrid{grid-template-columns:1fr 1fr !important;gap:20px 12px !important;padding-bottom:34px !important}
.sk-galfig .image-slot{height:auto !important;aspect-ratio:1/1}
.sk-galfig .plate{border-width:4px}
.sk-galcap{margin-top:7px !important}
.sk-galtext{font-size:12.5px !important;line-height:1.45 !important;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sk-galmeta{gap:7px !important;margin-top:5px !important;flex-wrap:wrap}
.sk-galmeta span{font-size:11px !important}
.sk-galmeta .tag{padding:3px 8px !important}
.sk-galpager{margin-top:0 !important;padding-bottom:44px !important}
}
/* very small phones: single column reads better than 140px tiles */
@media(max-width:359px){
.sk-galgrid{grid-template-columns:1fr !important}
.sk-galtext{-webkit-line-clamp:4}
}
/* extra-small phones */
@media(max-width:380px){
[aria-label="Career figures"]{grid-template-columns:1fr}
.sk-stat > div:first-child{font-size:24px !important}
}
/* stat tick marks (style-before in the design) */
.sk-stat{flex:1 1 170px;position:relative;padding:16px 18px 6px 0}
.sk-stat::before{content:'';position:absolute;left:0;top:-5px;width:1px;height:10px;background:var(--color-text);transform:rotate(45deg)}
.sk-scalestat{flex:1 1 150px;position:relative;padding:14px 18px 4px 0}
.sk-scalestat::before{content:'';position:absolute;left:0;top:-5px;width:1px;height:10px;background:var(--color-text);transform:rotate(45deg)}
/* hover states (style-hover in the design) */
.sk-navlink:hover{color:var(--color-text) !important}
.sk-rowlink:hover{background:color-mix(in srgb, var(--color-text) 3%, transparent)}
.sk-card:hover{border-color:var(--color-accent)}
.sk-btn-accent{background:var(--color-accent);border-color:var(--color-accent);color:#fff7ea !important}
.sk-btn-accent:hover{background:var(--color-accent-700);border-color:var(--color-accent-700);color:#fff !important}
.sk-footlink{text-decoration:none;color:var(--color-neutral-800)}
.sk-footlink:hover{color:var(--color-accent-700)}
.sk-serieslink:hover{color:var(--color-accent-700)}
.sk-toclink:hover{color:var(--color-accent-700) !important}
/* image slot placeholder */
.image-slot{display:flex;align-items:center;justify-content:center;overflow:hidden;
background:color-mix(in srgb, var(--color-neutral-100) 55%, transparent);
color:var(--color-neutral-700);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:8px}
.image-slot img{width:100%;height:100%;object-fit:cover;padding:0}
/* fixed sepia paper-texture backdrop */
.sk-paper{position:fixed;inset:0;z-index:-1;background:var(--color-bg);pointer-events:none}
.sk-paper::after{content:'';position:absolute;inset:0;opacity:.16;
background:url('../assets/paper-texture.jpg') center / cover no-repeat}
/* reading progress line */
.sk-topline{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.sk-topline > div{height:100%;width:0;background:var(--color-accent)}
/* 3D book covers (books index) */
.book3d{display:block;perspective:1100px;text-decoration:none;color:inherit;
filter:drop-shadow(14px 18px 22px color-mix(in srgb, var(--color-accent-900) 32%, transparent))}
.book3d-inner{position:relative;width:88%;margin:0 auto;aspect-ratio:10/14.2;transform-style:preserve-3d;
transform:rotateY(-24deg);transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.book3d:hover .book3d-inner{transform:rotateY(-9deg) translateY(-4px)}
.book3d-front{position:absolute;inset:0;transform:translateZ(14px);border-radius:2px 5px 5px 2px;overflow:hidden;
background:var(--color-accent)}
.book3d-front::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.12) 8px, rgba(255,255,255,.14) 11px, transparent 16px, transparent 94%, rgba(0,0,0,.12) 100%)}
.book3d-front img{width:100%;height:100%;object-fit:cover;display:block}
.book3d-pages{position:absolute;top:5px;bottom:7px;right:0;width:26px;transform:translateX(13px) rotateY(90deg);
background:repeating-linear-gradient(90deg,#f7f0de 0 2px,#e6dbc2 2px 4px);
border-radius:0 2px 2px 0;box-shadow:inset 0 0 6px rgba(0,0,0,.12)}
.book3d-top{position:absolute;left:3px;right:3px;top:0;height:26px;transform:translateY(-13px) rotateX(90deg);
background:repeating-linear-gradient(0deg,#f7f0de 0 2px,#e6dbc2 2px 4px)}
.book3d-back{position:absolute;inset:0;transform:translateZ(-14px);border-radius:2px 5px 5px 2px;
background:color-mix(in srgb, var(--color-accent-900) 82%, #000)}
/* toast */
.sk-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;background:var(--color-surface);
border:1px solid var(--color-divider);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:9px 18px;font-size:14px}