/* Herby B. – Papier, Aquarell und Kofferblau. Keine externen Schriftarten. */
:root { --background: #fbf8f1; --foreground: #22384a; }
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; }
svg { display: block; flex-shrink: 0; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #477796; outline-offset: 4px; }
html{
scroll-behavior:smooth;
scroll-padding-top:110px}
body{
background:var(--background);
color:var(--foreground);
margin:0;
font:1rem/1.7 Arial,Helvetica,sans-serif}
a{
color:inherit;
text-decoration:none}
button{
font:inherit;
cursor:pointer}
button:disabled{
opacity:.4;
cursor:not-allowed}
:is(a:focus-visible,button:focus-visible,textarea:focus-visible,article:focus-visible){
outline-offset:5px;
outline:3px solid #477796}
::selection{
background:#cfdfeb}
h1,h2,h3,p,figure{
margin:0}
h1,h2,h3{
font-family:Georgia,Times New Roman,serif;
font-weight:400}
h2{
letter-spacing:-.035em;
font-size:clamp(2.2rem,4vw,3.25rem);
line-height:1.15}
h2 em,h1 em{
color:#30648a;
font-style:italic}
h3{
font-size:1.4rem;
line-height:1.35}
.wrap{
width:min(1180px,100% - 104px);
margin-inline:auto}
.section-space{
padding-block:100px}
.site-header{
z-index:30;
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
background:#fbf8f1f5;
border-bottom:1px solid #d8d6cc;
position:sticky;
top:0}
.header-inner{
justify-content:space-between;
align-items:center;
gap:22px;
width:min(1300px,100% - 64px);
min-height:91px;
margin:auto;
display:flex}
.brand{
flex-shrink:0;
align-items:center;
gap:12px;
display:flex}
.brand-mark{
letter-spacing:-.1em;
border:1px solid #bcb79f;
place-content:center;
width:45px;
height:49px;
font:1.6rem Georgia,serif;
display:grid;
position:relative}
.brand-mark span{
color:#af8646;
position:absolute;
bottom:4px;
right:4px}
.brand-name{
font:1.15rem Georgia,serif}
.brand-name small{
text-transform:uppercase;
letter-spacing:.2em;
color:#68767c;
margin-top:7px;
font:.68rem Arial,sans-serif;
display:block}
.desktop-nav{
align-items:center;
gap:26px;
display:flex}
.desktop-nav a{
color:#5a6870;
padding:30px 0;
font-size:.9rem;
position:relative}
.desktop-nav a:hover,.desktop-nav a.active{
color:#183f5d}
.desktop-nav a.active:after{
content:"";
background:#a98750;
height:2px;
position:absolute;
bottom:20px;
left:0;
right:0}
.private-label{
color:#65727a;
align-items:center;
gap:7px;
font-size:.75rem;
display:flex}
.mobile-menu{
display:none!important}
.skip-link{
z-index:99;
background:#fff;
padding:10px 20px;
position:fixed;
top:-100px;
left:15px}
.skip-link:focus{
top:15px}
.hero{
grid-template-columns:1.05fr 1fr;
align-items:center;
gap:90px;
min-height:760px;
padding-block:64px 70px;
display:grid}
.eyebrow{
letter-spacing:.14em;
text-transform:uppercase;
color:#5d7180;
align-items:center;
gap:12px;
margin-bottom:25px;
font-size:.8rem;
display:flex}
.eyebrow>span{
background:#ad894d;
width:29px;
height:1px}
.hero h1{
letter-spacing:-.045em;
font-size:clamp(3.2rem,5.8vw,5.5rem);
line-height:1.025}
.subtitle{
color:#4a5b67;
margin-top:26px;
font:1.5rem/1.45 Georgia,serif}
.hero-intro{
color:#586970;
margin-top:27px;
line-height:1.75}
.hero-actions{
flex-wrap:wrap;
align-items:center;
gap:23px;
margin-top:30px;
display:flex}
.button{
border:1px solid #0000;
border-radius:4px;
justify-content:center;
align-items:center;
gap:10px;
min-height:47px;
padding:11px 20px;
font:500 .88rem/1.4 Arial,sans-serif;
transition:background .2s,transform .2s;
display:inline-flex}
.button:hover:not(:disabled){
transform:translateY(-1px)}
.primary{
color:#fff;
background:#183f5d;
border-color:#183f5d}
.primary:hover:not(:disabled){
background:#285e80}
.outline{
color:#183f5d;
background:0 0;
border-color:#aab9c1}
.outline:hover:not(:disabled){
background:#e7edf0}
.text-link{
text-underline-offset:5px;
align-items:center;
gap:9px;
font-size:.88rem;
-webkit-text-decoration:underline #aab8bf;
text-decoration:underline #aab8bf;
display:inline-flex}
.byline{
margin-top:38px;
font-size:.9rem}
.byline strong{
font-weight:500}
.byline>span{
color:#6c7577;
margin-left:15px;
font-size:.76rem}
.cover-figure{
padding:10px 20px}
.cover-holder{
border-left:5px solid #d9cbb2;
border-radius:2px;
width:min(390px,100%);
margin-inline:auto;
overflow:hidden;
transform:rotate(2deg);
box-shadow:4px 6px #ddd6c8,9px 10px #eae2d3,22px 27px 45px #31465726}
.cover-holder img{
width:100%;
height:auto;
display:block}
.cover-figure figcaption{
text-align:center;
color:#68747a;
margin-top:32px;
font:italic .83rem/1.4 Georgia,serif}
.book-band{
background:#f1ede3;
border-block:1px solid #d8d6cc}
.book-band>div{
justify-content:center;
align-items:center;
gap:48px;
padding-block:24px;
display:flex}
.book-band span{
letter-spacing:.06em;
font:1.03rem Georgia,serif}
.book-band i{
background:#b49565;
width:5px;
height:5px;
transform:rotate(45deg)}
.section-label{
letter-spacing:.14em;
text-transform:uppercase;
color:#627681;
align-items:center;
gap:16px;
margin-bottom:35px;
font-size:.75rem;
display:flex}
.section-label>span:first-child{
color:#a58752;
border-right:1px solid #cbbda4;
padding-right:17px;
font:italic 1.1rem Georgia,serif}
.section-grid,.blurb-layout{
grid-template-columns:1fr 1fr;
gap:90px;
display:grid}
.prose{
max-width:650px}
.prose p+p{
margin-top:20px}
.prose p{
color:#56646b;
line-height:1.85}
.author-section{
background:#e8eff1;
border-block:1px solid #d7e0e2}
.author-grid{
grid-template-columns:330px 1fr;
align-items:center;
gap:100px;
display:grid}
.author-card{
aspect-ratio:1/1.13;
background:#d7e3e8;
border:1px solid #bbcdd5;
flex-direction:column;
justify-content:center;
align-items:center;
padding:30px;
display:flex;
position:relative}
.author-card:before{
content:"";
border:1px solid #bccfd7;
position:absolute;
inset:14px}
.author-initial{
color:#255779;
letter-spacing:-.09em;
font:8rem/.9 Georgia,serif}
.author-initial>span{
color:#627f8e}
.author-card>span:last-child{
text-align:center;
color:#4a6879;
margin-top:30px;
font:italic .87rem/1.5 Georgia,serif}
.author-copy>.eyebrow{
margin-bottom:18px;
font-size:.75rem}
.author-copy .prose{
margin-top:28px}
.author-note{
border-top:1px solid #c6d3d7;
padding-top:20px;
font-size:.9rem}
.blurb-text{
color:#445760;
font:1.18rem/1.85 Georgia,serif}
.blurb-text p+p{
margin-top:23px}
.blurb-text .blurb-lead{
color:#22384a;
font-size:1.35rem}
.blurb-text .button{
margin-top:33px}
.small-rule{
background:#b28b53;
width:70px;
height:2px;
margin-top:35px}
.reader-section{
background:#f0ede5;
border-block:1px solid #d8d6cc}
.section-top{
justify-content:space-between;
align-items:center;
gap:35px;
display:flex}
.section-top .section-label{
margin-bottom:24px}
.sample-description{
color:#5b696d;
max-width:710px;
margin-top:22px;
font-size:.96rem}
.reader-shell{
background:#fffdf8;
border:1px solid #cdcfc8;
border-radius:5px;
margin-top:36px;
overflow:hidden;
box-shadow:0 8px 30px #22384a05}
.reader-toolbar{
background:#f7f5ee;
border-bottom:1px solid #d8d6cc;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
gap:24px;
padding:20px 30px;
display:flex}
.page-picker{
align-items:center;
gap:12px;
display:flex}
.page-picker label,.font-controls{
color:#4b5e69;
font-size:.85rem}
.page-select{
background:#fffdf8;
min-width:185px;
height:43px!important}
.font-controls{
align-items:center;
gap:12px;
display:flex}
.icon-button{
color:#183f5d;
background:0 0;
border:1px solid #c5cdd0;
border-radius:4px;
justify-content:center;
align-items:center;
width:38px;
height:38px;
padding:0;
display:inline-flex}
.icon-button:hover:not(:disabled){
background:#e2ecf1}
.reading-page{
color:#35464f;
max-width:740px;
min-height:700px;
margin:auto;
padding:50px 40px 45px;
scroll-margin-top:110px;
font-family:Georgia,Times New Roman,serif;
line-height:1.75}
.reading-page p{
margin-bottom:.9em}
.reading-heading{
border-bottom:1px solid #dce0dc;
margin-bottom:30px;
padding-bottom:30px}
.reading-heading>span{
text-transform:uppercase;
letter-spacing:.13em;
color:#7c888b;
font:.71rem Arial,sans-serif}
.reading-heading h3{
color:#1e415a;
margin-top:15px;
font-size:1.8rem;
line-height:1.3}
.reader-bottom{
background:#f7f5ee;
border-top:1px solid #d8d6cc;
justify-content:space-between;
align-items:center;
gap:35px;
padding:22px 30px;
display:flex}
.reader-progress{
flex-shrink:0;
width:215px}
.reader-progress>span{
color:#52626b;
margin-bottom:9px;
font-size:.8rem;
display:block}
.reader-progress [data-slot=progress]{
border-radius:0;
height:3px}
.reader-pagination{
justify-content:flex-end!important;
width:auto!important;
margin:0!important}
.sample-end{
text-align:center;
color:#61737d;
border-top:1px solid #d8d6cc;
margin-top:35px;
padding-top:30px;
font:italic 1rem Georgia,serif}
.reading-note{
color:#687578;
margin-top:16px;
font-size:.8rem}
.publisher-intro{
color:#5b6b73;
max-width:600px;
margin-top:24px;
font-size:.96rem}
.manuscript-label{
color:#506776;
white-space:nowrap;
border:1px solid #b8c6c9;
border-radius:3px;
padding:8px 12px;
font-size:.77rem}
.publisher-grid{
grid-template-columns:.85fr 1.15fr;
gap:70px;
margin-top:50px;
display:grid}
.publisher-facts h3{
margin-bottom:24px}
.publisher-facts dl{
margin:0 0 25px}
.publisher-facts dl>div{
border-top:1px solid #d8d6cc;
grid-template-columns:100px 1fr;
gap:20px;
padding-block:15px;
font-size:.88rem;
display:grid}
.publisher-facts dt{
color:#6b787c}
.publisher-facts dd{
color:#334e60;
margin:0}
.publisher-facts dd small{
font-size:.78rem}
.letter-panel{
background:#fffdf8;
border:1px solid #d3d5cc;
border-radius:5px;
align-self:start;
padding:28px}
.letter-heading{
justify-content:space-between;
align-items:center;
gap:16px;
margin-bottom:20px;
display:flex}
.letter-heading>span{
color:#655b44;
background:#ede8db;
border-radius:3px;
padding:3px 9px;
font-size:.72rem}
.letter-panel textarea{
resize:vertical;
color:#54636c;
background:0 0;
border:0;
width:100%;
min-height:410px;
padding:0;
font:1rem/1.7 Georgia,serif;
display:block}
.letter-footer{
flex-wrap:wrap;
align-items:center;
gap:16px;
margin-top:24px;
display:flex}
.letter-footer p{
color:#65757d;
font-size:.77rem}
.letter-note{
color:#6b7576;
border-top:1px solid #d8d6cc;
margin-top:20px;
padding-top:17px;
font-size:.8rem;
line-height:1.6}
footer{
color:#f6f1e6;
background:#173d56;
padding-block:38px}
.footer-inner{
justify-content:space-between;
align-items:center;
gap:25px;
display:flex}
.footer-brand{
font:1.6rem Georgia,serif}
.footer-inner p{
color:#c6d2d8;
margin-top:8px;
font-size:.8rem}
.footer-right{
text-align:right}
.footer-right>span{
color:#d1dbe0;
justify-content:flex-end;
align-items:center;
gap:8px;
font-size:.75rem;
display:flex}
.footer-right small{
color:#b1c3ce;
margin-top:12px;
font-size:.75rem;
display:block}
.navigation-sheet{
padding:35px;
width:min(360px,90vw)!important}
.navigation-sheet h2{
font:2rem Georgia,serif}
.navigation-sheet nav{
flex-direction:column;
margin-top:30px;
display:flex}
.navigation-sheet nav a{
border-top:1px solid #d8d6cc;
padding:17px 0;
font:1.2rem Georgia,serif}
.navigation-sheet nav a>span{
color:#a58752;
margin-right:20px;
font:.75rem Arial,sans-serif}
.sheet-close{
position:absolute;
top:20px;
right:20px}
.navigation-sheet>p:last-child{
color:#61717a;
align-items:center;
gap:8px;
margin-top:auto;
font-size:.8rem;
display:flex}
@media (max-width:1100px){
.wrap{
width:calc(100% - 64px)}
.desktop-nav{
gap:17px}
.desktop-nav a{
font-size:.82rem}
.private-label span{
display:none}
.hero{
gap:40px;
min-height:690px}
.hero h1{
font-size:4.4rem}
.hero-actions{
gap:18px}
.section-grid,.blurb-layout{
gap:50px}
.author-grid{
grid-template-columns:280px 1fr;
gap:55px}
.publisher-grid{
gap:35px}
.cover-figure{
padding:10px}
.section-space{
padding-block:80px}
}
@media (max-width:800px){
html{
scroll-padding-top:91px}
.header-inner{
width:calc(100% - 40px);
min-height:74px}
.desktop-nav{
display:none}
.mobile-menu{
display:inline-flex!important}
.private-label{
margin-left:auto}
.private-label span{
display:block}
.wrap{
width:calc(100% - 44px)}
.hero{
grid-template-columns:1fr 1fr;
gap:25px;
min-height:0;
padding-block:50px}
.hero h1{
font-size:3.3rem}
.subtitle{
font-size:1.2rem}
.hero-intro{
font-size:.91rem}
.byline>span{
margin:4px 0 0;
display:block}
.cover-figure{
padding:5px}
.section-grid,.blurb-layout{
gap:35px}
.author-grid{
grid-template-columns:220px 1fr;
gap:35px}
.author-initial{
font-size:6rem}
.author-card{
padding:20px}
.author-copy h2{
font-size:2rem}
.publisher-grid{
grid-template-columns:1fr}
.publisher-facts dl{
grid-template-columns:1fr 1fr;
gap:0 30px;
display:grid}
.publisher-facts dl>div{
grid-template-columns:82px 1fr;
gap:14px}
.manuscript-label{
white-space:normal;
max-width:145px}
.reading-page{
scroll-margin-top:95px}
.section-space{
padding-block:65px}
}
@media (max-width:600px){
.hero{
grid-template-columns:1fr;
gap:40px;
padding-block:40px 45px}
.hero h1{
font-size:clamp(3.1rem,12vw,4.1rem);
line-height:1.06}
.desktop-break{
display:none}
.hero-copy{
max-width:450px}
.hero .eyebrow{
margin-bottom:20px;
font-size:.72rem}
.subtitle{
max-width:340px;
margin-top:22px;
font-size:1.35rem}
.hero-intro{
margin-top:22px;
font-size:.96rem}
.hero-actions{
gap:18px;
margin-top:25px}
.byline{
margin-top:26px}
.byline>span{
margin-left:12px;
font-size:.7rem;
display:inline}
.cover-figure{
width:83%;
max-width:335px;
margin:auto;
padding:8px}
.cover-holder{
width:100%}
.cover-figure figcaption{
margin-top:25px;
font-size:.8rem}
.book-band>div{
gap:20px;
padding-block:21px}
.book-band span{
letter-spacing:0;
font-size:.85rem}
.book-band i{
width:4px;
height:4px}
.section-space{
padding-block:55px}
.section-label{
margin-bottom:25px}
.section-grid,.blurb-layout,.author-grid{
grid-template-columns:1fr;
gap:30px}
h2{
font-size:2.5rem;
line-height:1.2}
.author-card{
aspect-ratio:1.2;
width:100%;
max-width:240px}
.author-initial{
font-size:5.6rem}
.author-card>span:last-child{
margin-top:20px;
font-size:.77rem}
.author-copy>.eyebrow{
letter-spacing:.1em;
font-size:.69rem;
line-height:1.6}
.author-copy h2{
font-size:2.35rem}
.blurb-text{
font-size:1.13rem}
.blurb-text .blurb-lead{
font-size:1.23rem}
.small-rule{
margin-top:24px}
.section-top{
flex-direction:column;
align-items:flex-start;
gap:25px}
.download-link{
min-height:44px}
.sample-description{
margin-top:23px;
font-size:.92rem}
.reader-shell{
margin-top:26px}
.reader-toolbar{
gap:17px;
padding:17px 16px}
.page-picker{
justify-content:space-between;
width:100%}
.page-select{
min-width:195px}
.font-controls{
justify-content:flex-end;
gap:10px;
width:100%;
font-size:.85rem}
.font-controls>span:first-child{
margin-right:auto}
.reading-page{
min-height:0;
padding:28px 21px;
scroll-margin-top:90px}
.reading-heading>span{
letter-spacing:.09em;
font-size:.65rem}
.reading-heading h3{
font-size:1.55rem}
.reading-heading{
margin-bottom:24px;
padding-bottom:22px}
.reader-bottom{
flex-direction:column;
gap:21px;
padding:20px 16px}
.reader-progress{
width:100%}
.reader-pagination{
justify-content:center!important;
width:100%!important}
.reader-pagination ul{
gap:10px;
width:100%}
.reader-pagination li{
flex:1}
.reader-pagination button{
width:100%;
padding-inline:12px}
.reading-note{
font-size:.77rem;
line-height:1.6}
.manuscript-label{
max-width:none}
.publisher-intro{
font-size:.94rem}
.publisher-grid{
gap:35px;
margin-top:35px}
.publisher-facts dl{
grid-template-columns:1fr}
.publisher-facts dl>div{
grid-template-columns:85px 1fr;
font-size:.9rem}
.letter-panel{
padding:21px 17px}
.letter-panel textarea{
min-height:460px;
font-size:1rem}
.letter-footer{
gap:12px}
.footer-inner{
flex-direction:column;
align-items:flex-start;
gap:25px}
.footer-right{
text-align:left}
.footer-right>span{
justify-content:flex-start}
.private-label{
gap:6px;
font-size:.68rem}
.brand-name{
font-size:1.05rem}
.brand-mark{
width:38px;
height:43px;
font-size:1.3rem}
.brand-name small{
font-size:.6rem}
.header-inner{
gap:12px}
.icon-button.mobile-menu{
width:35px;
height:35px}
}
@media (prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,:before,:after{
transition:none!important;
animation:none!important}
}
[data-slot=select-content]{
animation:none!important}
.page-picker label,.font-controls{
font-size:.875rem}
@media (max-width:360px){
.private-label span{
display:none}
.page-picker{
flex-wrap:wrap;
gap:8px}
.page-select{
width:100%;
min-width:0}
.byline>span{
margin-left:0;
display:block}
.hero h1{
font-size:2.9rem}
}
/* Plain HTML controls for the FTP edition */
.page-select{appearance:auto;border:1px solid #b9c3c8;border-radius:4px;font:inherit;font-size:.875rem;color:#22384a;padding:0 12px;max-width:100%;outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.navigation-sheet{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:none;max-width:none;border:0;border-left:1px solid #d8d6cc;background:#fbf8f1;color:#22384a;overflow-y:auto;z-index:50;box-shadow:-12px 0 40px #183f5d25}
.navigation-sheet:not([open]){display:none}.navigation-sheet[open]{display:flex;flex-direction:column;gap:16px}
.navigation-sheet::backdrop{background:#0007}.sheet-close{font-size:1.5rem;line-height:1}
#menu-description{font-size:.875rem;color:#626a6d;padding-right:16px}
.reading-page:focus:not(:focus-visible){outline:none}noscript{display:block;margin-top:12px;font-size:.875rem}
.reader-pagination ul{list-style:none;padding:0;margin:0;display:flex;gap:8px}
[data-slot="progress"]{position:relative;background:#183f5d25;overflow:hidden}
[data-slot="progress-indicator"]{height:100%;width:100%;background:#183f5d;transition:transform .2s}