/* ============================================================
   PUBLIC AUTHOR WEBSITE
   Self-contained: the admin CMS does not load this file, so the
   palette here is free to differ from the CMS design system.
   ============================================================ */

:root{

    --cream:#f7f2e7;
    --cream-soft:#fbf8f1;
    --band:#e7ebdf;

    --green:#123d2c;
    --green-deep:#0d2f21;
    --green-soft:#1c5138;

    --gold:#c0983c;
    --gold-soft:#e3c887;

    --ink:#1a2721;
    --muted:#68796f;
    --line:#e2dac7;

    --shadow:0 18px 44px rgba(18,61,44,.10);
    --shadow-lg:0 26px 60px rgba(18,61,44,.16);

    --shell:1200px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--cream);
    color:var(--ink);
    font-family:'DM Sans',sans-serif;
    font-size:15px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
svg{display:block}

.shell{
    max-width:var(--shell);
    margin:auto;
    padding:0 30px;
}

h1,h2,h3,h4,blockquote{
    font-family:'Playfair Display',serif;
    font-weight:600;
    letter-spacing:-.4px;
    line-height:1.12;
}

.eyebrow{
    display:block;
    font-family:'DM Mono',monospace;
    font-size:11px;
    letter-spacing:2.2px;
    text-transform:uppercase;
    color:var(--muted);
}

.eyebrow.gold{color:var(--gold)}

.lede{
    color:var(--muted);
    font-size:15.5px;
    line-height:1.75;
    max-width:46ch;
}

.more{
    font-size:13px;
    font-weight:600;
    color:var(--gold);
    white-space:nowrap;
}

.more:hover{color:var(--green)}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 26px;
    border:1px solid transparent;
    border-radius:3px;
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.btn-gold{
    background:var(--gold);
    color:#fff;
}

.btn-gold:hover{background:#a8842f}

.btn-line{
    background:transparent;
    border-color:#cfc6ad;
    color:var(--ink);
}

.btn-line:hover{
    border-color:var(--green);
    background:#fff;
}


/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead{
    background:var(--cream-soft);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:30;
}

.masthead-in{
    max-width:var(--shell);
    margin:auto;
    padding:0 30px;
    height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
}

.wordmark{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.wordmark .quill{
    width:26px;
    height:26px;
    color:var(--green);
    flex:0 0 26px;
}

.wordmark img{max-height:46px}

.wordmark-text b{
    display:block;
    font-family:'Playfair Display',serif;
    font-size:19px;
    font-weight:600;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--green);
    line-height:1.15;
}

.wordmark-text i{
    display:block;
    font-size:12px;
    font-style:italic;
    color:var(--muted);
}

.site-nav{
    display:flex;
    align-items:center;
    gap:4px;
}

.site-nav a{
    padding:9px 13px;
    font-size:14px;
    color:var(--ink);
    border-radius:3px;
    transition:.18s;
}

.site-nav a:hover{color:var(--gold)}

.site-nav a.active{
    color:var(--gold);
    font-weight:600;
    box-shadow:inset 0 -2px 0 var(--gold);
    border-radius:0;
}

.nav-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-left:12px;
    padding:11px 18px !important;
    background:var(--green);
    color:#fff !important;
    border-radius:4px;
    font-size:13.5px;
    font-weight:600;
    box-shadow:none !important;
}

.nav-cta:hover{background:var(--green-deep)}
.nav-cta svg{width:16px;height:16px}

.nav-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    padding:8px;
    background:none;
    border:0;
    cursor:pointer;
}

.nav-toggle span{
    width:22px;
    height:2px;
    background:var(--green);
}


/* ============================================================
   AUTHOR UPDATES TRAY
   ============================================================ */

.updates{
    background:var(--cream-soft);
    border-bottom:1px solid var(--line);
    padding:26px 0;
}

.updates-in{
    display:flex;
    align-items:center;
    gap:30px;
    position:relative;
}

.updates-head{
    flex:0 0 150px;
    border-right:1px solid var(--line);
    padding-right:24px;
}

.updates-head h2{
    font-size:25px;
    margin:6px 0 8px;
}

.tray{
    display:flex;
    gap:22px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding:4px 0;
    scrollbar-width:none;
}

.tray::-webkit-scrollbar{display:none}

.tray-item{
    flex:0 0 92px;
    text-align:center;
}

.tray-ring{
    display:block;
    width:88px;
    height:88px;
    padding:3px;
    margin:0 auto 9px;
    border-radius:50%;
    background:linear-gradient(140deg,var(--gold),var(--gold-soft),var(--green));
}

.tray-ring span{
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
    border:3px solid var(--cream-soft);
    background:var(--green) center/cover no-repeat;
}

.tray-item figcaption,
.tray-item .tray-cap{
    display:block;
    font-size:11.5px;
    line-height:1.35;
    color:var(--muted);
}

.rail-next{
    position:absolute;
    right:-14px;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:50%;
    box-shadow:var(--shadow);
    cursor:pointer;
    color:var(--green);
    z-index:2;
}

.rail-next svg{width:17px;height:17px}
.rail-next:hover{background:var(--green);color:#fff;border-color:var(--green)}


/* ============================================================
   HERO
   ============================================================ */

.hero{
    padding:70px 0 84px;
    background:
        radial-gradient(circle at 92% 76%,rgba(192,152,60,.10) 0 1.5px,transparent 2px) 0 0/17px 17px,
        var(--cream);
}

.hero-in{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
}

.hero-copy .rule{
    display:block;
    width:96px;
    height:26px;
    margin-bottom:20px;
    background:repeating-linear-gradient(90deg,var(--gold) 0 3px,transparent 3px 8px);
    opacity:.85;
}

.hero h1{
    font-size:60px;
    line-height:1.06;
    margin:14px 0 22px;
    color:var(--green);
    max-width:12ch;
}

.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:32px;
}

.hero-art{position:relative}

/* The gold block that sits behind and to the side of the card */
.hero-art::after{
    content:"";
    position:absolute;
    right:-16px;
    top:34px;
    bottom:-16px;
    width:62%;
    background:var(--gold);
    z-index:0;
}

/* The card slides between the featured book and the featured post.
   The frame carries the shadow, because the sliding track has to clip
   its overflow and would cut the shadow off the card itself. */
.hero-slider{
    position:relative;
    z-index:1;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}

.hero-track{
    display:flex;
    transition:transform .5s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}

.hero-card{
    position:relative;
    z-index:1;
    background:var(--green);
    padding:26px 26px 32px;
    box-shadow:var(--shadow-lg);
}

.hero-slider .hero-card{
    display:block;
    flex:0 0 100%;
    min-width:0;
    box-shadow:none;
}

/* The whole card leads to whatever it is showing. */
.hero-slider a.hero-card{
    cursor:pointer;
    -webkit-user-drag:none;
}

.hero-slider a.hero-card .hero-arch{
    transition:transform .35s ease;
}

.hero-slider a.hero-card:hover .hero-arch{
    transform:scale(1.02);
}

.hero-slider a.hero-card:hover .hero-title{
    color:var(--gold-soft);
}

.hero-slider a.hero-card:focus-visible{
    outline:2px solid var(--gold-soft);
    outline-offset:-4px;
}

.hero-slider .hero-title{
    transition:color .2s;
}

/* Two lines at most, so a long post title cannot stretch the card.
   The two slides match each other anyway -- a flex row makes both as
   tall as the taller one -- so nothing jumps when it turns. */
.hero-slider .hero-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Sits on the pen-name line inside the card, so nothing moves. */
.hero-dots{
    position:absolute;
    top:30px;
    right:26px;
    z-index:2;
    display:flex;
    gap:7px;
}

.hero-dots button{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.34);
    cursor:pointer;
    transition:.2s;
}

.hero-dots button:hover{background:rgba(255,255,255,.6)}

.hero-dots button.on{
    width:20px;
    border-radius:4px;
    background:var(--gold-soft);
}

/* Only the line naming the card that is showing. The buttons below
   stay put -- they are about the featured work, not the slide. */
.hero-eyebrow span[data-hero-for]{
    display:none;
}

.hero[data-hero-slide="0"] .hero-eyebrow [data-hero-for="0"],
.hero[data-hero-slide="1"] .hero-eyebrow [data-hero-for="1"]{
    display:inline;
}

@media (prefers-reduced-motion:reduce){
    .hero-track{transition:none}
}

.hero-author{
    display:block;
    font-family:'DM Mono',monospace;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gold-soft);
    margin-bottom:18px;
}

.hero-arch{
    height:330px;
    border-radius:190px 190px 6px 6px;
    background:linear-gradient(160deg,#1d5b3f,#2f7f57 45%,var(--gold)) center/cover no-repeat;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

.hero-title{
    margin-top:26px;
    font-size:37px;
    line-height:1.08;
    color:#fff;
}


/* ============================================================
   BANDS & SECTION HEADS
   ============================================================ */

.band{
    background:var(--band);
    padding:66px 0;
}

.band-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:26px;
    flex-wrap:wrap;
    margin-bottom:32px;
}

.band-head h2{
    font-size:31px;
    margin-top:8px;
    color:var(--green);
}

.tabs{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
}

.tabs button{
    padding:9px 17px;
    border:0;
    border-radius:3px;
    background:transparent;
    font-family:'DM Sans',sans-serif;
    font-size:13px;
    color:var(--muted);
    cursor:pointer;
    transition:.18s;
}

.tabs button:hover{color:var(--green)}

.tabs button.on{
    background:var(--green);
    color:#fff;
    font-weight:600;
}


/* ============================================================
   WORKS RAIL
   ============================================================ */

.rail-wrap{position:relative}

.work-rail{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding-bottom:6px;
    scrollbar-width:none;
}

.work-rail::-webkit-scrollbar{display:none}

.work{
    flex:0 0 200px;
    background:var(--cream-soft);
    border:1px solid rgba(0,0,0,.05);
    display:flex;
    flex-direction:column;
    transition:.22s;
}

.work:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow);
}

.work-cover{
    aspect-ratio:3/4;
    background:linear-gradient(165deg,#20402f,#3d2f21 55%,#6b4b2a) center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    text-align:center;
}

.work-cover span{
    font-family:'Playfair Display',serif;
    font-size:19px;
    font-weight:600;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.5px;
    text-shadow:0 2px 12px rgba(0,0,0,.55);
}

/* A real cover image replaces the lettering */
.work-cover[style*="background-image"] span{display:none}

.work-meta{padding:14px 15px 17px}

.work-meta h3{
    font-family:'DM Sans',sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--ink);
}

.work-meta p{
    margin-top:5px;
    font-size:12.5px;
    color:var(--muted);
    line-height:1.5;
}

.work-meta small{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:11px;
    font-size:11.5px;
    color:var(--muted);
}

.work-meta small em{
    font-style:normal;
    color:var(--gold);
    font-weight:600;
}


/* ============================================================
   HOME ABOUT
   ============================================================ */

.home-about{
    padding:72px 0;
    background:var(--cream-soft);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.home-about-in{
    display:grid;
    grid-template-columns:310px minmax(0,1fr);
    gap:62px;
    align-items:center;
    max-width:960px;
}

.home-about-photo{
    aspect-ratio:4/5;
    display:grid;
    place-items:center;
    background:linear-gradient(150deg,#1c5138,#2e684b 55%,#b18b3b) center/cover no-repeat;
    color:#fff;
    box-shadow:18px 18px 0 var(--gold-soft);
}

.home-about-photo span{
    font-family:'Playfair Display',serif;
    font-size:88px;
    font-weight:600;
}

.home-about-copy h2{
    margin:10px 0 5px;
    color:var(--green);
    font-size:39px;
}

.home-about-byline{margin-bottom:15px;color:var(--muted);font-style:italic}

.home-about-copy blockquote{
    margin:18px 0;
    color:var(--green);
    font-family:'Playfair Display',serif;
    font-size:21px;
    font-style:italic;
    line-height:1.5;
}

.home-about-copy > p:not(.home-about-byline){
    max-width:56ch;
    color:var(--muted);
    line-height:1.8;
    margin-bottom:25px;
}


/* ============================================================
   AWARDS / BLOG / NEWSLETTER
   ============================================================ */

.trio{padding:64px 0}

.trio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    align-items:start;
}

/* Until the author has awards and posts, the row narrows rather
   than leaving the newsletter stranded in a third of the page. */
.trio-grid.cols-2{grid-template-columns:repeat(2,1fr)}

.trio-grid.cols-1{
    grid-template-columns:1fr;
    max-width:620px;
    margin-inline:auto;
}

.panel{
    background:var(--cream-soft);
    border:1px solid var(--line);
    padding:24px;
}

.panel-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-bottom:16px;
    margin-bottom:6px;
    border-bottom:1px solid var(--line);
}

.award{
    display:flex;
    align-items:center;
    gap:13px;
    padding:13px 0;
}

.award + .award{border-top:1px solid rgba(0,0,0,.05)}

.award .medal{
    width:27px;
    height:27px;
    flex:0 0 27px;
    color:var(--gold);
}

.award b{
    display:block;
    font-size:13px;
    font-weight:600;
    line-height:1.35;
}

.award small{
    font-size:11.5px;
    color:var(--muted);
}

.mini{
    display:flex;
    align-items:center;
    gap:13px;
    padding:11px 0;
}

.mini + .mini{border-top:1px solid rgba(0,0,0,.05)}

.mini-art{
    width:52px;
    height:46px;
    flex:0 0 52px;
    background:linear-gradient(150deg,#20402f,#6b4b2a) center/cover no-repeat;
}

.mini b{
    display:block;
    font-size:13px;
    font-weight:600;
    line-height:1.35;
}

.mini small{font-size:11.5px;color:var(--muted)}
.mini:hover b{color:var(--gold)}

.signup{
    background:var(--green);
    border-color:var(--green);
    color:#fff;
    padding:30px 26px;
}

.signup h3{font-size:23px}

.signup p{
    margin:9px 0 20px;
    font-size:13.5px;
    color:#c6d8cd;
    line-height:1.6;
}

.signup input{
    width:100%;
    padding:13px 14px;
    border:0;
    border-radius:3px;
    background:#fff;
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    color:var(--ink);
    outline:none;
    margin-bottom:11px;
}

.signup .btn{width:100%}


/* ============================================================
   QUOTE BAND
   ============================================================ */

.quote-band{
    background:var(--cream-soft);
    border-top:1px solid var(--line);
    padding:52px 0;
}

.quote-band .shell{
    display:flex;
    align-items:center;
    gap:40px;
}

.quote-quill{
    width:64px;
    height:64px;
    flex:0 0 64px;
    color:var(--green);
    opacity:.85;
}

.quote-mark{
    font-family:'Playfair Display',serif;
    font-size:44px;
    line-height:0;
    color:var(--gold);
}

.quote-band blockquote{
    font-size:22px;
    line-height:1.5;
    color:var(--green);
    margin:10px 0 8px;
    max-width:56ch;
}

.quote-band cite{
    font-family:'DM Mono',monospace;
    font-size:11px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    font-style:normal;
    color:var(--gold);
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-foot{
    background:var(--cream-soft);
    border-top:1px solid var(--line);
    padding-top:52px;
}

.foot-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:34px;
    padding-bottom:40px;
}

.foot-brand b{
    font-family:'Playfair Display',serif;
    font-size:19px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--green);
}

.foot-brand p{
    margin-top:9px;
    font-size:13.5px;
    color:var(--muted);
    max-width:34ch;
    line-height:1.7;
}

.site-foot h4{
    font-family:'DM Mono',monospace;
    font-size:11px;
    letter-spacing:1.8px;
    text-transform:uppercase;
    color:var(--green);
    margin-bottom:13px;
}

.site-foot .foot-grid a{
    display:block;
    padding:4px 0;
    font-size:13.5px;
    color:var(--muted);
}

.site-foot .foot-grid a:hover{color:var(--gold)}

.foot-social{
    display:flex;
    gap:10px;
    margin-bottom:14px;
}

.foot-social a{
    width:34px;
    height:34px;
    display:grid !important;
    place-items:center;
    padding:0 !important;
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--green);
}

.foot-social svg{width:16px;height:16px}

.foot-social a:hover{
    background:var(--green);
    border-color:var(--green);
    color:#fff;
}

.foot-mail{font-size:13px !important}

.foot-base{
    border-top:1px solid var(--line);
    padding:18px 0;
}

.foot-base .shell{
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    font-size:12.5px;
    color:var(--muted);
}

.foot-legal a{
    color:var(--muted);
    margin-left:18px;
}

.foot-legal a:hover{color:var(--gold)}

.to-top{
    position:fixed;
    right:22px;
    bottom:22px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    background:var(--cream-soft);
    border:1px solid var(--line);
    border-radius:50%;
    box-shadow:var(--shadow);
    color:var(--green);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:25;
}

.to-top svg{width:17px;height:17px}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{background:var(--green);color:#fff;border-color:var(--green)}


/* ============================================================
   PAGE HEAD -- the band under the masthead on inner pages
   ============================================================ */

.page-head{
    padding:60px 0 34px;
}

.page-head h1{
    font-size:47px;
    color:var(--green);
    margin:12px 0 14px;
    max-width:16ch;
}

.page-head .lede{max-width:56ch}


/* ============================================================
   CONTINUE READING
   ============================================================ */

.resume{
    display:flex;
    align-items:center;
    gap:18px;
    padding:16px 20px;
    margin-bottom:28px;
    background:var(--green);
    color:#fff;
    border-radius:4px;
    box-shadow:var(--shadow);
    transition:.2s;
}

.resume:hover{background:var(--green-deep)}

.resume-cover{
    width:48px;
    height:64px;
    flex:0 0 48px;
    border-radius:2px;
    background:linear-gradient(160deg,#1d5b3f,var(--gold)) center/cover no-repeat;
}

.resume-text{flex:1;min-width:0}

.resume-text em{
    display:block;
    font-family:'DM Mono',monospace;
    font-style:normal;
    font-size:10.5px;
    letter-spacing:1.8px;
    text-transform:uppercase;
    color:var(--gold-soft);
}

.resume-text b{
    display:block;
    font-family:'Playfair Display',serif;
    font-size:20px;
    font-weight:600;
    margin-top:3px;
}

.resume-text small{font-size:12px;color:#b9cec3}

.resume-go{
    font-size:13px;
    font-weight:600;
    color:var(--gold-soft);
    white-space:nowrap;
}


/* ============================================================
   TOOLBAR -- search, sort, category chips
   ============================================================ */

.toolbar-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    padding-bottom:18px;
    border-bottom:1px solid var(--line);
}

.finder{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
    min-width:280px;
    max-width:520px;
    padding:4px 4px 4px 15px;
    background:var(--cream-soft);
    border:1px solid var(--line);
    border-radius:4px;
}

.finder:focus-within{border-color:var(--gold)}

.finder svg{
    width:17px;
    height:17px;
    flex:0 0 17px;
    color:var(--muted);
}

.finder input{
    flex:1;
    min-width:0;
    padding:11px 0;
    border:0;
    background:none;
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    color:var(--ink);
    outline:none;
}

.finder button{
    padding:10px 18px;
    border:0;
    border-radius:3px;
    background:var(--green);
    color:#fff;
    font-family:'DM Sans',sans-serif;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

.finder button:hover{background:var(--green-deep)}

.sorter{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    color:var(--muted);
}

.sorter select{
    padding:11px 13px;
    border:1px solid var(--line);
    border-radius:4px;
    background:var(--cream-soft);
    font-family:'DM Sans',sans-serif;
    font-size:13.5px;
    color:var(--ink);
    cursor:pointer;
    outline:none;
}

.sorter select:focus{border-color:var(--gold)}

.chips{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    padding:20px 0 0;
}

.chips a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 15px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--cream-soft);
    font-size:13px;
    color:var(--ink);
    transition:.18s;
}

.chips a:hover{border-color:var(--gold);color:var(--green)}

.chips a em{
    font-style:normal;
    font-size:11px;
    color:var(--muted);
}

.chips a.on{
    background:var(--green);
    border-color:var(--green);
    color:#fff;
    font-weight:600;
}

.chips a.on em{color:var(--gold-soft)}

.result-line{
    margin-top:18px;
    font-size:13.5px;
    color:var(--muted);
}

.result-line .more{margin-left:12px}


/* ============================================================
   FEATURED WORK
   ============================================================ */

.spotlight{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:0;
    margin:30px 0 8px;
    background:var(--cream-soft);
    border:1px solid var(--line);
    overflow:hidden;
}

.spot-cover{
    background:linear-gradient(165deg,#20402f,#3d2f21 55%,#6b4b2a) center/cover no-repeat;
    min-height:380px;
    display:flex;
    align-items:flex-end;
    padding:26px;
}

.spot-cover span{
    font-family:'Playfair Display',serif;
    font-size:25px;
    font-weight:600;
    color:#fff;
    line-height:1.1;
    text-shadow:0 2px 14px rgba(0,0,0,.55);
}

.spot-cover[style*="background-image"] span{display:none}

.spot-body{padding:38px 40px}

.spot-body h2{
    font-size:35px;
    color:var(--green);
    margin:12px 0 14px;
}

.spot-body p{
    color:var(--muted);
    line-height:1.75;
    max-width:52ch;
}

.facts{
    list-style:none;
    display:flex;
    gap:34px;
    flex-wrap:wrap;
    margin:24px 0 28px;
    padding:18px 0 0;
    border-top:1px solid var(--line);
}

.facts li{
    font-size:13.5px;
    color:var(--ink);
}

.facts em{
    display:block;
    font-family:'DM Mono',monospace;
    font-style:normal;
    font-size:10px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:4px;
}


/* ============================================================
   BOOK GRID
   ============================================================ */

.library{padding:34px 0 76px}

.book-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
    gap:26px;
}

.book{
    display:flex;
    flex-direction:column;
    background:var(--cream-soft);
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
    transition:.22s;
}

.book:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-lg);
    border-color:#d6cbaf;
}

.book-cover{
    position:relative;
    aspect-ratio:3/4;
    background:linear-gradient(165deg,#20402f,#3d2f21 55%,#6b4b2a) center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    text-align:center;
}

.cover-title{
    font-family:'Playfair Display',serif;
    font-size:20px;
    font-weight:600;
    color:#fff;
    line-height:1.15;
    text-shadow:0 2px 12px rgba(0,0,0,.6);
}

.book-cover[style*="background-image"] .cover-title{display:none}

.flag{
    position:absolute;
    top:12px;
    right:12px;
    padding:4px 9px;
    background:rgba(255,255,255,.92);
    border-radius:2px;
    font-family:'DM Mono',monospace;
    font-size:9.5px;
    letter-spacing:1.2px;
    color:var(--green);
}

/* Slides up over the cover on hover */
.book-open{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:12px;
    background:linear-gradient(transparent,rgba(9,38,26,.9));
    color:#fff;
    font-size:12.5px;
    font-weight:600;
    text-align:center;
    opacity:0;
    transform:translateY(100%);
    transition:.25s;
}

.book:hover .book-open{opacity:1;transform:none}

.book-body{
    padding:16px 17px 18px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.kind{
    font-family:'DM Mono',monospace;
    font-size:9.5px;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--gold);
}

.book-body h3{
    font-size:18px;
    line-height:1.25;
    margin:7px 0 6px;
    color:var(--green);
}

.book-body p{
    font-size:13px;
    line-height:1.6;
    color:var(--muted);
    flex:1;
}

.book-foot{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:14px;
    padding-top:11px;
    border-top:1px solid var(--line);
    font-size:11.5px;
    color:var(--muted);
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.nothing{
    text-align:center;
    padding:70px 24px;
    background:var(--cream-soft);
    border:1px dashed #d8cfb6;
}

.nothing svg{
    width:46px;
    height:46px;
    margin:0 auto 18px;
    color:var(--gold);
    opacity:.75;
}

.nothing h3{
    font-size:24px;
    color:var(--green);
    margin-bottom:9px;
}

.nothing p{
    color:var(--muted);
    max-width:40ch;
    margin:0 auto 22px;
}


/* ============================================================
   JOURNAL -- blog listing, built to sit beside the library page
   ============================================================ */

.journal-head{padding-bottom:38px}

.journal-tags{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding-top:18px;
}

.journal-tags > span{
    margin-right:4px;
    font-family:'DM Mono',monospace;
    font-size:10px;
    letter-spacing:1.3px;
    text-transform:uppercase;
    color:var(--muted);
}

.journal-tags a{
    padding:5px 10px;
    border-bottom:1px solid transparent;
    font-size:12.5px;
    color:var(--muted);
    transition:.18s;
}

.journal-tags a:hover,
.journal-tags a.on{color:var(--green);border-color:var(--gold)}
.journal-tags a.on{font-weight:600}

.journal-spotlight{
    display:grid;
    grid-template-columns:minmax(320px,.9fr) 1.1fr;
    margin:30px 0 8px;
    background:var(--cream-soft);
    border:1px solid var(--line);
    overflow:hidden;
}

.journal-spotlight-art{
    min-height:390px;
    padding:28px;
    display:flex;
    align-items:flex-end;
    background:linear-gradient(155deg,#1d5139,#284735 53%,#8d6631) center/cover no-repeat;
    position:relative;
}

.journal-spotlight-art::after,
.journal-card-art::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 35%,rgba(9,38,26,.66));
}

.journal-spotlight-art span{
    position:relative;
    z-index:1;
    font-family:'Playfair Display',serif;
    font-size:29px;
    font-weight:600;
    line-height:1.12;
    color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,.45);
}

.journal-spotlight-art[style*="background-image"] span{display:none}

.journal-spotlight-body{padding:38px 40px}

.journal-spotlight-body h2{
    margin:12px 0 14px;
    color:var(--green);
    font-size:35px;
}

.journal-spotlight-body > p{
    max-width:52ch;
    color:var(--muted);
    line-height:1.75;
}

.journal-library{padding:34px 0 76px}

.journal-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:26px;
}

.journal-card{
    display:flex;
    flex-direction:column;
    background:var(--cream-soft);
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
    transition:.22s;
}

.journal-card:hover{
    transform:translateY(-5px);
    border-color:#d6cbaf;
    box-shadow:var(--shadow-lg);
}

.journal-card-art{
    position:relative;
    aspect-ratio:16/10;
    padding:20px;
    display:flex;
    align-items:flex-end;
    background:linear-gradient(155deg,#1d5139,#284735 53%,#8d6631) center/cover no-repeat;
}

.journal-card-art > span,
.journal-card-art > b{position:relative;z-index:1}

.journal-card-art > span{
    font-family:'Playfair Display',serif;
    font-size:21px;
    font-weight:600;
    line-height:1.15;
    color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.55);
}

.journal-card-art[style*="background-image"] > span{display:none}

.journal-card-art > b{
    position:absolute;
    right:17px;
    bottom:14px;
    padding:5px 0;
    color:#fff;
    font-size:12px;
    opacity:0;
    transform:translateY(8px);
    transition:.22s;
}

.journal-card:hover .journal-card-art > b{opacity:1;transform:none}

.journal-card-body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:18px 19px;
}

.journal-card-body h3{
    margin:7px 0 8px;
    color:var(--green);
    font-size:20px;
    line-height:1.24;
}

.journal-card-body p{
    flex:1;
    color:var(--muted);
    font-size:13px;
    line-height:1.65;
}

.journal-card-foot{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:15px;
    padding-top:11px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:11.5px;
}

.journal-pager{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:38px;
    color:var(--muted);
    font-size:13px;
}

.journal-pager > a{
    color:var(--green);
    font-weight:600;
}

.journal-pager > a:hover{color:var(--gold)}

.journal-pager > div{display:flex;align-items:center;gap:5px}

.journal-pager div a,
.journal-pager div span{
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    border:1px solid var(--line);
    border-radius:3px;
}

.journal-pager div a:hover{border-color:var(--gold);color:var(--green)}
.journal-pager div span.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.journal-pager div span:not(.on){width:auto;border-color:transparent}


/* ============================================================
   AWARDS -- public recognitions listing
   ============================================================ */

.awards-head{padding-bottom:38px}
.awards-library{padding:10px 0 76px}

.awards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:26px;
}

.award-card{
    display:flex;
    flex-direction:column;
    background:var(--cream-soft);
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
    transition:.22s;
}

.award-card:hover{
    transform:translateY(-5px);
    border-color:#d6cbaf;
    box-shadow:var(--shadow-lg);
}

.award-art{
    position:relative;
    min-height:205px;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 48%,rgba(227,200,135,.5),transparent 1px) 0 0/13px 13px,
        linear-gradient(145deg,#123d2c,#235b41 55%,#b18b3b) center/cover no-repeat;
    color:var(--gold-soft);
}

/* With a real photograph the decorative dot pattern gets out of the
   way. Without this the inline background-image inherits the pattern's
   13px tile size and repeats, printing the picture hundreds of times. */
.award-art.has-photo{
    background-color:var(--green);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

.award-art::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 48%,rgba(9,38,26,.58));
}

.award-art svg{width:72px;height:72px;position:relative;z-index:1}

.award-art span{
    position:absolute;
    right:16px;
    bottom:13px;
    z-index:1;
    color:#fff;
    font-family:'DM Mono',monospace;
    font-size:11px;
    letter-spacing:1.8px;
}

.award-card-body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:19px 20px 21px;
}

.award-card-body h2{
    margin:7px 0 9px;
    color:var(--green);
    font-size:22px;
    line-height:1.22;
}

.award-card-body p{
    color:var(--muted);
    font-size:13px;
    line-height:1.65;
}

.award-pager{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:38px;
    color:var(--muted);
    font-size:13px;
}

.award-pager > a{color:var(--green);font-weight:600}
.award-pager > a:hover{color:var(--gold)}
.award-pager > div{display:flex;align-items:center;gap:5px}

.award-pager div a,
.award-pager div span{
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    border:1px solid var(--line);
    border-radius:3px;
}

.award-pager div a:hover{border-color:var(--gold);color:var(--green)}
.award-pager div span.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.award-pager div span:not(.on){width:auto;border-color:transparent}


/* ============================================================
   GALLERY -- image grid and infinite-scroll sentinel
   ============================================================ */

.gallery-head{padding-bottom:30px}

.gallery-filters{margin-bottom:10px}
.gallery-filters .chips{padding-top:0}

.gallery-library{padding:22px 0 76px}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.gallery-item{
    position:relative;
    min-height:190px;
    margin:0;
    overflow:hidden;
    background:linear-gradient(145deg,#d7ddcf,#b3c4b4);
}

.gallery-item:nth-child(4n + 2){min-height:245px}
.gallery-item:nth-child(4n + 3){min-height:215px}

.gallery-item img{
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    object-fit:cover;
    transition:transform .4s ease;
}

.gallery-item::after{
    content:"";
    position:absolute;
    inset:35% 0 0;
    background:linear-gradient(transparent,rgba(9,38,26,.72));
    opacity:0;
    transition:.25s;
}

.gallery-item figcaption{
    position:absolute;
    left:16px;
    right:16px;
    bottom:14px;
    z-index:1;
    color:#fff;
    opacity:0;
    transform:translateY(8px);
    transition:.25s;
}

.gallery-item figcaption b{
    display:block;
    font-family:'Playfair Display',serif;
    font-size:17px;
    font-weight:600;
    line-height:1.2;
}

.gallery-item figcaption span{
    display:block;
    margin-top:4px;
    font-size:11.5px;
    line-height:1.45;
}

.gallery-item:hover img{transform:scale(1.05)}
.gallery-item:hover::after,.gallery-item:hover figcaption{opacity:1}
.gallery-item:hover figcaption{transform:none}

.gallery-loader{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:82px;
    margin-top:20px;
    color:var(--muted);
    font-family:'DM Mono',monospace;
    font-size:10px;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.gallery-loader::before{
    content:"";
    width:17px;
    height:17px;
    margin-right:10px;
    border:2px solid var(--line);
    border-top-color:var(--gold);
    border-radius:50%;
    animation:gallery-spin .8s linear infinite;
}

.gallery-loader:not(.is-loading)::before{animation-play-state:paused}

@keyframes gallery-spin{to{transform:rotate(360deg)}}


/* ============================================================
   ABOUT -- author profile
   ============================================================ */

.about-head{padding-bottom:38px}

.about-layout{
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    gap:72px;
    align-items:start;
    padding-bottom:76px;
}

.about-aside{position:sticky;top:108px}

.about-portrait{
    aspect-ratio:4/5;
    display:grid;
    place-items:center;
    background:linear-gradient(150deg,#1c5138,#2e684b 55%,#b18b3b) center/cover no-repeat;
    color:#fff;
}

.about-portrait span{
    font-family:'Playfair Display',serif;
    font-size:92px;
    font-weight:600;
    text-shadow:0 2px 14px rgba(0,0,0,.2);
}

.about-links,.about-direct{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-top:20px;
    padding:19px 0 0;
    border-top:1px solid var(--line);
}

.about-links .eyebrow,.about-direct .eyebrow{margin-bottom:5px}

.about-links a,.about-direct a,.about-direct > span:not(.eyebrow){
    font-size:13px;
    color:var(--muted);
}

.about-links a:hover,.about-direct a:hover{color:var(--gold)}

.about-copy{max-width:690px;padding-top:4px}

.about-copy h2{
    margin:11px 0 20px;
    color:var(--green);
    font-size:43px;
}

.about-copy blockquote{
    margin:0 0 28px;
    padding:20px 24px;
    border-left:3px solid var(--gold);
    background:var(--cream-soft);
    color:var(--green);
    font-size:22px;
    font-style:italic;
    line-height:1.5;
}

.about-bio{font-size:16px;line-height:1.85;color:#43544b}
.about-bio p + p{margin-top:18px}

.about-works{margin-top:48px;padding-top:26px;border-top:1px solid var(--line)}

.about-section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:17px;
}

.about-section-head h3{margin-top:5px;color:var(--green);font-size:26px}

.about-work-list{display:grid;gap:9px}

.about-work-list > a{
    display:flex;
    align-items:center;
    gap:14px;
    padding:10px;
    border:1px solid transparent;
    transition:.18s;
}

.about-work-list > a:hover{border-color:var(--line);background:var(--cream-soft)}

.about-work-cover{
    width:41px;
    height:55px;
    flex:0 0 41px;
    display:grid;
    place-items:center;
    padding:4px;
    overflow:hidden;
    background:linear-gradient(150deg,#1b5038,#b18b3b) center/cover no-repeat;
    color:#fff;
    font-family:'Playfair Display',serif;
    font-size:8px;
    font-weight:600;
    line-height:1.1;
    text-align:center;
}

.about-work-list b{display:block;color:var(--green);font-size:14px;line-height:1.3}
.about-work-list small{display:block;margin-top:3px;color:var(--muted);font-size:11.5px}


/* ============================================================
   CONTACT -- message form and direct details
   ============================================================ */

.contact-head{padding-bottom:38px}

/* One column, held to the width of the form and centred: the form is
   the whole point of this page. */
.contact-layout{
    max-width:660px;
    margin:0 auto;
    padding-bottom:76px;
}

/* Where else to find the author, under the form rather than beside it. */
.contact-elsewhere{
    margin-top:30px;
    text-align:center;
}

.contact-elsewhere > div{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:9px 22px;
    margin-top:11px;
}

.contact-elsewhere a{
    color:var(--green);
    font-size:13.5px;
    font-weight:600;
}

.contact-elsewhere a:hover{
    color:var(--gold);
    text-decoration:underline;
}

.contact-form-card{
    padding:34px 38px 38px;
    background:var(--cream-soft);
    border:1px solid var(--line);
}

.contact-form-card h2{color:var(--green);font-size:30px}

.contact-form-card > p{
    margin:7px 0 26px;
    color:var(--muted);
    font-size:14px;
}

.contact-form-card form > label,.contact-row label{display:block;margin-bottom:17px}

.contact-form-card label > span{
    display:block;
    margin-bottom:6px;
    color:var(--green);
    font-family:'DM Mono',monospace;
    font-size:10px;
    letter-spacing:1.3px;
    text-transform:uppercase;
}

.contact-form-card label > span i{font-style:normal;color:var(--muted);letter-spacing:.6px}

.contact-form-card input,.contact-form-card textarea{
    width:100%;
    border:1px solid var(--line);
    border-radius:3px;
    background:#fff;
    padding:12px 13px;
    color:var(--ink);
    font-family:'DM Sans',sans-serif;
    font-size:14px;
    line-height:1.5;
    outline:none;
    transition:border-color .18s;
}

.contact-form-card textarea{resize:vertical;min-height:150px}
.contact-form-card input:focus,.contact-form-card textarea:focus{border-color:var(--gold)}

.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.contact-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.contact-notice{
    margin:0 0 20px;
    padding:11px 13px;
    background:#f7e4de;
    color:#8d3b28;
    border-left:3px solid #b65b43;
    font-size:13px;
}



/* ============================================================
   SHARED BITS used by the other public pages
   ============================================================ */

.progress{
    position:fixed;
    top:0;
    left:0;
    height:3px;
    width:0;
    background:var(--gold);
    z-index:40;
}

.toast{
    position:fixed;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    background:var(--green);
    color:#fff;
    padding:13px 18px;
    font-size:13.5px;
    border-radius:3px;
    box-shadow:var(--shadow-lg);
    z-index:50;
}

.toast.bad{background:#8d3b28}
.hidden{display:none !important}

.section{padding:60px 0}
.card{background:var(--cream-soft);border:1px solid var(--line);padding:28px}


/* ============================================================
   ARTICLE -- one blog post, and the legal pages

   The body here is written in the editor, so every tag the
   author is allowed to type needs a look: the list is the one
   in safe_html() in configs/functions.php. Anything missing
   from here is something a writer can set and no reader can
   see.
   ============================================================ */

/* Sits under the masthead, which is sticky and 86px tall. */
.reader-bar{
    position:sticky;
    top:86px;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    padding:10px max(30px, calc((100% - var(--shell)) / 2));
    background:var(--cream-soft);
    border-bottom:1px solid var(--line);
    font-size:12.5px;
    color:var(--muted);
}

.reader-bar .group{
    display:flex;
    align-items:center;
    gap:8px;
}

.reader-bar .link{color:var(--green);white-space:nowrap}
.reader-bar .link:hover{color:var(--gold)}

.reader-bar button{
    min-width:30px;
    height:28px;
    padding:0 9px;
    border:1px solid var(--line);
    border-radius:999px;
    background:transparent;
    color:var(--ink);
    font:inherit;
    font-size:12.5px;
    line-height:1;
    cursor:pointer;
}

.reader-bar button:hover{border-color:var(--gold);color:var(--green)}

.article{
    max-width:812px;
    margin:auto;
    padding:46px 30px 6px;
}

.article-cover{
    height:clamp(210px,34vw,400px);
    margin-bottom:32px;
    background:var(--band) center/cover no-repeat;
    border:1px solid var(--line);
}

.article h1{
    font-size:clamp(31px,4.6vw,45px);
    color:var(--green);
    margin:11px 0 15px;
    max-width:22ch;
}

.article-meta{
    font-size:13px;
    line-height:2;
    color:var(--muted);
    padding-bottom:19px;
    border-bottom:1px solid var(--line);
}

.article-meta .badge{
    display:inline-block;
    padding:3px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:11.5px;
    color:var(--muted);
}

.article-meta .badge:hover{border-color:var(--gold);color:var(--green)}


/* ---- the body itself ----
   --reading-size is set on <html> by the A-/A+ buttons in
   app.js, which only does anything if something reads it. */

.prose-body{
    padding:32px 0 4px;
    font-size:var(--reading-size, 18px);
    line-height:1.8;
    color:var(--ink);
}

.prose-body > *:first-child{margin-top:0}
.prose-body > *:last-child{margin-bottom:0}

.prose-body p{margin:0 0 1.15em}

.prose-body h2,
.prose-body h3,
.prose-body h4{
    color:var(--green);
    line-height:1.24;
    margin:1.9em 0 .55em;
}

.prose-body h2{font-size:1.52em}
.prose-body h3{font-size:1.26em}
.prose-body h4{font-size:1.08em}

.prose-body blockquote{
    margin:1.7em 0;
    padding:1px 0 1px 21px;
    border-left:2px solid var(--gold);
    color:var(--green);
    font-size:1.13em;
    font-style:italic;
    line-height:1.5;
    letter-spacing:normal;
}

.prose-body blockquote p{margin:0 0 .5em}
.prose-body blockquote p:last-child{margin:0}

.prose-body ul,
.prose-body ol{margin:0 0 1.15em;padding-left:1.4em}
.prose-body li{margin:.35em 0}

.prose-body a{
    color:var(--green);
    text-decoration:underline;
    text-decoration-color:var(--gold);
    text-underline-offset:3px;
}

.prose-body a:hover{color:var(--gold)}

.prose-body strong,.prose-body b{font-weight:600}
.prose-body em,.prose-body i{font-style:italic}
.prose-body sup,.prose-body sub{font-size:.7em;line-height:0}

/* A scene break, drawn the way the book reader draws it. */
.prose-body hr{
    border:0;
    width:34%;
    margin:2.5em auto;
    border-top:1px solid var(--line);
}

.prose-body img{margin:1.6em auto;border:1px solid var(--line)}
.prose-body figure{margin:1.7em 0}

.prose-body figcaption{
    margin-top:9px;
    font-size:.76em;
    line-height:1.5;
    color:var(--muted);
    text-align:center;
}

.prose-body .sub{color:var(--muted)}


/* ---- share row, scoped so the book reader keeps its own ---- */

.article .share{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:38px;
    padding-top:24px;
    border-top:1px solid var(--line);
    font-size:13px;
    color:var(--muted);
}

.article .share > span{
    margin-right:4px;
    font-family:'DM Mono',monospace;
    font-size:10px;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.article .share a,
.article .share button{
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid var(--line);
    border-radius:50%;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    transition:color .15s, border-color .15s, background .15s;
}

.article .share svg{width:18px;height:18px;fill:currentColor}

.article .share a:hover,
.article .share button:hover{
    color:var(--green);
    border-color:var(--gold);
    background:var(--cream);
}

.article .share button.is-copied{color:var(--green);border-color:var(--green)}


/* ---- "Keep reading" under an article or a book ----
   Shared by post.php and read.php, which both close with a
   .section > .site > .section-head + a grid of cards. ---- */

.site{
    max-width:var(--shell);
    margin:auto;
    padding:0 30px;
}

.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:26px;
}

.section-head h2{
    font-size:31px;
    color:var(--green);
    margin-top:9px;
}

.post-list,
.books-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:24px;
}

.post-card,
.book-card{
    display:flex;
    flex-direction:column;
    background:var(--cream-soft);
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
    transition:.22s;
}

.post-card:hover,
.book-card:hover{
    transform:translateY(-5px);
    border-color:#d6cbaf;
    box-shadow:var(--shadow-lg);
}

.post-card .art,
.book-card .book-art{
    background:linear-gradient(155deg,#1d5139,#284735 53%,#8d6631) center/cover no-repeat;
}

.post-card .art{aspect-ratio:16/10}

/* A cover is portrait; without one the title stands in for it. */
.book-card .book-art{
    aspect-ratio:2/3;
    display:flex;
    align-items:flex-end;
    padding:16px;
    font-family:'Playfair Display',serif;
    font-size:19px;
    font-weight:600;
    line-height:1.2;
    color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.55);
}

.post-card .body,
.book-card .book-meta{padding:17px 18px 19px}

.post-card .body h3,
.book-card .book-meta h3{
    margin:7px 0 0;
    color:var(--green);
    font-size:19px;
    line-height:1.25;
}

.post-card .body .sub{color:var(--muted);font-size:11.5px}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1040px){

    .hero-in{grid-template-columns:1fr;gap:44px}
    .hero h1{font-size:46px;max-width:none}
    .hero-art::after{display:none}
    .trio-grid{grid-template-columns:1fr 1fr}
    .signup{grid-column:1/-1}
    .foot-grid{grid-template-columns:1fr 1fr}

}

@media(max-width:900px){

    .spotlight{grid-template-columns:1fr}
    .spot-cover{min-height:250px}
    .spot-body{padding:28px 26px}
    .spot-body h2{font-size:28px}

    .journal-spotlight{grid-template-columns:1fr}
    .journal-spotlight-art{min-height:260px}
    .journal-spotlight-body{padding:28px 26px}
    .journal-spotlight-body h2{font-size:28px}

    .about-layout{grid-template-columns:1fr;gap:34px}
    .about-aside{position:static;display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start}
    .about-portrait{grid-row:span 2}

}

@media(max-width:820px){

    .page-head{padding:40px 0 26px}
    .page-head h1{font-size:34px;max-width:none}

    .toolbar-bar{flex-direction:column;align-items:stretch}
    .finder{max-width:none}
    .sorter{justify-content:space-between}
    .sorter select{flex:1}

    .resume{flex-wrap:wrap;gap:14px}
    .resume-go{width:100%}

    .home-about{padding:50px 0}
    .home-about-in{grid-template-columns:180px minmax(0,1fr);gap:32px}
    .home-about-photo{box-shadow:10px 10px 0 var(--gold-soft)}
    .home-about-copy h2{font-size:31px}

    .book-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
    .book-body h3{font-size:15.5px}
    .book-body p{display:none}
    .library{padding:26px 0 54px}

    .journal-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
    .journal-library{padding:26px 0 54px}

    .awards-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
    .awards-library{padding-bottom:54px}

    .gallery-grid{grid-template-columns:repeat(3,1fr);gap:12px}
    .gallery-library{padding-bottom:54px}
    .gallery-item,.gallery-item:nth-child(4n + 2),.gallery-item:nth-child(4n + 3){min-height:170px}

    .about-layout,.contact-layout{padding-bottom:54px}

    .facts{gap:22px}

    .nav-toggle{display:flex}

    .site-nav{
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:100%;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:10px 22px 20px;
        background:var(--cream-soft);
        border-bottom:1px solid var(--line);
        box-shadow:var(--shadow);
    }

    .site-nav.open{display:flex}
    .site-nav a{padding:12px 2px}
    .site-nav a.active{box-shadow:none}
    .nav-cta{margin:10px 0 0;justify-content:center}

    .masthead-in{height:70px;position:relative}
    .reader-bar{top:70px}

    .article{padding:34px 22px 6px}
    .prose-body{padding-top:26px}

    .updates-in{flex-direction:column;align-items:stretch;gap:18px}

    .updates-head{
        flex:none;
        border-right:0;
        border-bottom:1px solid var(--line);
        padding:0 0 14px;
    }

    .updates-head h2{font-size:21px}
    .updates-head h2 br{display:none}

    .rail-next{display:none}

    .hero{padding:46px 0 56px}
    .hero h1{font-size:38px}
    .hero-arch{height:250px;border-radius:150px 150px 6px 6px}
    .hero-title{font-size:29px}

    .band{padding:46px 0}
    .band-head h2{font-size:26px}

    .quote-band .shell{flex-direction:column;gap:20px;text-align:center}
    .quote-band blockquote{font-size:19px}

    .trio-grid,
    .foot-grid{grid-template-columns:1fr}

    .shell{padding:0 22px}

}

@media(max-width:520px){
    .work{flex:0 0 165px}
    .hero h1{font-size:32px}
    .btn{padding:12px 20px;font-size:13.5px}
    .home-about-in{grid-template-columns:1fr;gap:28px}
    .home-about-photo{max-width:235px}
    .home-about-copy h2{font-size:30px}
    .home-about-copy blockquote{font-size:19px}
    .journal-pager{gap:10px;font-size:12px}
    .journal-pager div a,.journal-pager div span{width:30px;height:30px}
    .award-pager{gap:10px;font-size:12px}
    .award-pager div a,.award-pager div span{width:30px;height:30px}
    .gallery-grid{grid-template-columns:repeat(2,1fr);gap:9px}
    .gallery-item,.gallery-item:nth-child(4n + 2),.gallery-item:nth-child(4n + 3){min-height:145px}
    .gallery-item figcaption{left:12px;right:12px;bottom:10px}
    .gallery-item figcaption span{display:none}
    .about-aside{grid-template-columns:1fr}
    .about-portrait{max-width:260px;grid-row:auto}
    .about-copy h2{font-size:34px}
    .about-copy blockquote{padding:17px 19px;font-size:19px}
    .contact-form-card{padding:26px 20px 28px}
    .contact-row{grid-template-columns:1fr;gap:0}
}