/* Components copied from the prototype (website/css/components.css), trimmed to what the theme uses.
   Parts that belong to the reader plugin (library, bookmarks, ratings, notes, share cards) come later. */
.ic{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Buttons and chips */
.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 var(--fs-1)/1 var(--font-ui);padding:.85rem 1.25rem;border-radius:var(--r-pill);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s var(--ease),background .2s,border-color .2s;min-height:44px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn-primary:hover{filter:brightness(1.08);text-decoration:none}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--text);text-decoration:none}
.btn-sm{padding:.55rem .9rem;font-size:var(--fs-0);min-height:36px}
.chip{display:inline-flex;align-items:center;padding:.5rem .95rem;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);
  color:var(--text);font:500 var(--fs-0)/1 var(--font-ui);text-decoration:none;white-space:nowrap;transition:border-color .2s,background .2s;cursor:pointer}
.chip:hover,.chip[aria-current="true"],.chip[aria-pressed="true"]{border-color:var(--accent-text);color:var(--accent-text);text-decoration:none}
.chip[aria-current="true"],.chip[aria-pressed="true"]{background:var(--surface-2)}
.chip .count{margin-left:.45rem;font-size:.75rem;color:var(--muted)}
.chip-row{display:flex;gap:var(--s-2);overflow-x:auto;padding-block:var(--s-1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chip-row::-webkit-scrollbar{display:none}
.filters{display:grid;gap:var(--s-2);margin-bottom:var(--s-6)}
.filter-meta{font-size:var(--fs-0);color:var(--muted)}
.hint{margin:var(--s-2) 0 0;font-size:var(--fs-0);color:var(--muted)}

/* Top navigation */
.topbar{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:var(--s-5);height:var(--nav-h)}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:50px;width:auto}
.for-dark{display:none}
:root[data-theme="dark"] .for-light{display:none}
:root[data-theme="dark"] .for-dark{display:block}

.nav{display:flex;gap:var(--s-1);margin-left:var(--s-3)}
.nav a{color:var(--text);text-decoration:none;font-weight:500;padding:.5rem .8rem;border-radius:var(--r-pill);font-size:var(--fs-1)}
.nav a:hover{background:var(--surface-2)}
.nav a[aria-current="page"]{color:var(--accent-text);background:var(--surface-2)}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;font:inherit}
.icon-btn:hover{border-color:var(--text)}
.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:none}

@media (max-width:860px){.nav,.topbar .btn-primary{display:none}.brand img{height:46px}}

/* Mobile tab bar */
.tabbar{display:none}
@media (max-width:860px){
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  .tabbar{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));position:fixed;inset:auto 0 0 0;z-index:60;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);padding-inline:max(.5rem,env(safe-area-inset-left)) max(.5rem,env(safe-area-inset-right));background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);text-decoration:none;font-size:.65rem;font-weight:500;letter-spacing:0;white-space:nowrap;min-width:0}
  .tabbar a[aria-current="page"]{color:var(--accent-text)}
  .tabbar a .ic{width:1.45rem;height:1.45rem}
}

/* Story covers (pure CSS, typographic) */
.cover{--c1:var(--cv-forest);--c2:var(--cv-sand);position:relative;aspect-ratio:2/3;border-radius:var(--r-sm) var(--r-md) var(--r-md) var(--r-sm);overflow:hidden;
  background:var(--c1);color:var(--c2);display:flex;flex-direction:column;justify-content:space-between;padding:1.1rem 1rem;isolation:isolate;
  box-shadow:inset 6px 0 0 rgba(0,0,0,.18),var(--shadow)}
.cover::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55}
.cover .c-title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,.9rem + .9vw,1.6rem);line-height:1.05;letter-spacing:-.01em;margin:0;text-wrap:balance;min-width:0;max-width:100%}
.cover .c-meta{font:600 .6875rem/1.3 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
/* The writer's name on every cover (Entry 226). A designed cover keeps its kind label on top and gets the title and the writer's name at the bottom (.c-foot). A photo cover
   carries the same two lines as a strip laid over the picture (.c-strip), as markup and never baked into the picture file, so a place that shows no title
   (the Wall) still says what the piece is. Both lines are hidden by default and shown only where a cover is big enough, the same way the small covers hide their title. */
/* A soft wash of the cover's own colour behind the title and the writer's name, so the pattern never fights the words. */
.cover:not(.has-img)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top,var(--c1) 0,transparent 46%);opacity:.7}
.cover .c-foot{min-width:0}
.cover .c-by{display:none;margin:.5em 0 0;font:500 .72rem/1.25 var(--font-ui);letter-spacing:.01em;opacity:.9;overflow:hidden;min-width:0}
.cover .c-strip{display:none;position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1.8rem .8rem .65rem 1.05rem;color:#fff;
  background:linear-gradient(to top,rgba(8,12,10,.86),rgba(8,12,10,.6) 58%,transparent)}
.cover .c-strip .c-title{font-size:clamp(.82rem,.74rem + .5vw,1.05rem);color:#fff}
.cover .c-strip .c-by{margin-top:.3em;color:#fff;opacity:.92}
.card .cover .c-by,.cover.lg .c-by{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.card .cover .c-strip,.cover.lg .c-strip{display:block}
.cover.lg .c-by{font-size:.9rem}.cover.lg .c-strip{padding:2.4rem 1.1rem .9rem 1.4rem}.cover.lg .c-strip .c-title{font-size:clamp(1.15rem,1rem + 1vw,1.6rem)}
.cover.has-img .c-strip .c-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.cover.m-rings::before{background:repeating-radial-gradient(circle at 85% 12%,transparent 0 14px,color-mix(in srgb,var(--c2) 22%,transparent) 14px 15.5px)}
.cover.m-stripes::before{background:repeating-linear-gradient(115deg,transparent 0 16px,color-mix(in srgb,var(--c2) 18%,transparent) 16px 18px)}
.cover.m-sun::before{background:radial-gradient(circle at 70% 28%,color-mix(in srgb,var(--c2) 60%,transparent) 0 18%,transparent 19%),linear-gradient(transparent 60%,rgba(0,0,0,.25))}
.cover.m-grid::before{background:linear-gradient(color-mix(in srgb,var(--c2) 16%,transparent) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,color-mix(in srgb,var(--c2) 16%,transparent) 1px,transparent 1px) 0 0/22px 22px}
.cover.m-waves::before{background:radial-gradient(120% 60% at 50% 110%,color-mix(in srgb,var(--c2) 35%,transparent) 0 40%,transparent 41%),radial-gradient(120% 50% at 20% 120%,color-mix(in srgb,var(--c2) 25%,transparent) 0 45%,transparent 46%)}
/* Cover patterns (Entry 226). The designer's 15 single-colour tiles in ../patterns/ are used as masks, so the pattern takes the cover's title colour (--c2)
   at a quiet strength, in light and dark, and works with every colour. Each pattern has its own tile size (--ps) and strength (--po) so the title stays
   readable. A cover also carries one of four looks (pv-0 to pv-3) that nudge the position and scale, so two covers with the same colour and pattern still differ. */
.cover.p-awka-leaves::before,.cover.p-wall-circles::before,.cover.p-stepped-bands::before,.cover.p-headrest-rings::before,.cover.p-stone-chevrons::before,.cover.p-round-windows::before,.cover.p-interlaced-bands::before,.cover.p-woven-diamonds::before,.cover.p-round-dots::before,.cover.p-slow-waves::before,.cover.p-zigzag-diamonds::before,.cover.p-cross-grid::before,.cover.p-hex-tiles::before,.cover.p-soft-arches::before,.cover.p-triangle-field::before{background:var(--c2);-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:calc(var(--ps,72px)*var(--pm,1)*var(--pz,1));mask-size:calc(var(--ps,72px)*var(--pm,1)*var(--pz,1));-webkit-mask-position:var(--pp,0 0);mask-position:var(--pp,0 0);opacity:var(--po,.28)}
.cover.p-awka-leaves::before{-webkit-mask-image:url(../patterns/awka-leaves.svg);mask-image:url(../patterns/awka-leaves.svg);--ps:72px;--po:.26}
.cover.p-wall-circles::before{-webkit-mask-image:url(../patterns/wall-circles.svg);mask-image:url(../patterns/wall-circles.svg);--ps:72px;--po:.30}
.cover.p-stepped-bands::before{-webkit-mask-image:url(../patterns/stepped-bands.svg);mask-image:url(../patterns/stepped-bands.svg);--ps:96px;--po:.26}
.cover.p-headrest-rings::before{-webkit-mask-image:url(../patterns/headrest-rings.svg);mask-image:url(../patterns/headrest-rings.svg);--ps:84px;--po:.28}
.cover.p-stone-chevrons::before{-webkit-mask-image:url(../patterns/stone-chevrons.svg);mask-image:url(../patterns/stone-chevrons.svg);--ps:90px;--po:.30}
.cover.p-round-windows::before{-webkit-mask-image:url(../patterns/round-windows.svg);mask-image:url(../patterns/round-windows.svg);--ps:84px;--po:.28}
.cover.p-interlaced-bands::before{-webkit-mask-image:url(../patterns/interlaced-bands.svg);mask-image:url(../patterns/interlaced-bands.svg);--ps:72px;--po:.24}
.cover.p-woven-diamonds::before{-webkit-mask-image:url(../patterns/woven-diamonds.svg);mask-image:url(../patterns/woven-diamonds.svg);--ps:72px;--po:.26}
.cover.p-round-dots::before{-webkit-mask-image:url(../patterns/round-dots.svg);mask-image:url(../patterns/round-dots.svg);--ps:60px;--po:.30}
.cover.p-slow-waves::before{-webkit-mask-image:url(../patterns/slow-waves.svg);mask-image:url(../patterns/slow-waves.svg);--ps:84px;--po:.30}
.cover.p-zigzag-diamonds::before{-webkit-mask-image:url(../patterns/zigzag-diamonds.svg);mask-image:url(../patterns/zigzag-diamonds.svg);--ps:84px;--po:.28}
.cover.p-cross-grid::before{-webkit-mask-image:url(../patterns/cross-grid.svg);mask-image:url(../patterns/cross-grid.svg);--ps:66px;--po:.26}
.cover.p-hex-tiles::before{-webkit-mask-image:url(../patterns/hex-tiles.svg);mask-image:url(../patterns/hex-tiles.svg);--ps:72px;--po:.26}
.cover.p-soft-arches::before{-webkit-mask-image:url(../patterns/soft-arches.svg);mask-image:url(../patterns/soft-arches.svg);--ps:72px;--po:.30}
.cover.p-triangle-field::before{-webkit-mask-image:url(../patterns/triangle-field.svg);mask-image:url(../patterns/triangle-field.svg);--ps:72px;--po:.28}
.rd-next .cover,.sr-item .cover{--pz:.55} /* a small cover gets a finer pattern, so the tile stays in proportion */
.cover.pv-0{--pm:1;--pp:0 0}.cover.pv-1{--pm:1.2;--pp:30px 14px}.cover.pv-2{--pm:.9;--pp:12px 36px}.cover.pv-3{--pm:1.35;--pp:44px 6px}
/* Nine cover colours (Entries 220 and 226). Terracotta's title is a touch lighter than first drawn (#FBEBDD gave 4.3 to 1, #FFF8F2 gives 4.7 to 1). */
.cv-forest{--c1:var(--cv-forest);--c2:#E8F3EA}.cv-terra{--c1:var(--cv-terracotta);--c2:#FFF8F2}
.cv-indigo{--c1:var(--cv-indigo);--c2:#E5E9F7}.cv-plum{--c1:var(--cv-plum);--c2:#F6E3EE}
.cv-teal{--c1:var(--cv-teal);--c2:#DDF3F0}.cv-sand{--c1:var(--cv-sand);--c2:var(--ink)}
.cv-ochre{--c1:var(--cv-ochre);--c2:var(--ink)}.cv-slate{--c1:var(--cv-slate);--c2:#EEF2F6}.cv-rose{--c1:var(--cv-rose);--c2:#FBE9EE}
.cover.lg{padding:1.6rem 1.4rem}.cover.lg .c-title{font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem)}
.cover.has-img{padding:0;background:var(--c1)}
.cover.has-img::before{display:none}
.cover.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cover.wide{aspect-ratio:3/4}

/* Story card */
.card{display:flex;flex-direction:column;gap:var(--s-3);text-decoration:none;color:inherit;position:relative;height:100%}
.card:hover{text-decoration:none}
.card>a{text-decoration:none;display:block}
.card .cover{transition:transform .35s var(--ease)}
.card:hover .cover{transform:translateY(-4px) rotate(-.6deg)}
.card h3{font-size:var(--fs-3);margin:0}
.card h3 a{color:inherit;text-decoration:none}
.card .by{color:var(--muted);font-size:var(--fs-0);margin:0}
.card .kicker{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:var(--s-6) var(--s-4)}
@media (min-width:720px){.card-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s-6) var(--s-5)}}
.empty{padding:var(--s-7) var(--s-5);text-align:center;border:1.5px dashed var(--line);border-radius:var(--r-lg);color:var(--muted)}
.empty-h{margin:0 0 .5rem;font-family:var(--font-display);font-size:var(--fs-3);color:var(--text)}

/* Masthead line */
.dateline{display:flex;justify-content:space-between;gap:var(--s-4);padding-block:var(--s-3);border-bottom:3px double var(--line);font-size:var(--fs-0);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.dateline strong{color:var(--text)}
.dateline .dl-wr{display:none}
.dateline a{color:var(--accent-text);font-weight:600;text-decoration:none}.dateline a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.dateline span:nth-child(2){display:none}.dateline .dl-sub{display:none}.dateline .dl-wr{display:inline}}

/* Hero */
.hero{display:grid;gap:var(--s-7);padding-block:var(--s-7) var(--s-8)}
@media (min-width:980px){.hero{grid-template-columns:1.25fr 1fr;align-items:center;gap:var(--s-8)}}
.hero-feature{display:grid;gap:var(--s-5);grid-template-columns:minmax(180px,.8fr) 1.2fr;align-items:start}
@media (max-width:560px){.hero-feature{grid-template-columns:1fr 1.25fr;gap:var(--s-4)}}
.hero h1{font-size:var(--fs-6);margin-bottom:var(--s-4)}
.hero .standfirst{font-family:var(--font-read);font-size:var(--fs-3);line-height:1.45;color:var(--text);margin-bottom:var(--s-4);max-width:34ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;color:var(--muted);font-size:var(--fs-0);margin-bottom:var(--s-5)}
.byline b{color:var(--text);font-weight:600}
.byline a{color:inherit;text-decoration:none}.byline a:hover{text-decoration:underline;text-underline-offset:3px}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero-cover{max-width:320px}
@media (max-width:979px){.hero{padding-block:var(--s-5) var(--s-7)}}
@media (max-width:560px){.hero-feature{grid-template-columns:1fr}.hero-cover{max-width:200px}}
.hero-cover a{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:transform .2s ease}
.hero-cover a:hover{transform:translateY(-3px)}
.hero-cover a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-lg)}
.hero-link{color:inherit;text-decoration:none}
.hero-link:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}

/* Table of contents */
.toc{border-top:3px solid var(--text);padding-top:var(--s-3)}
.toc h2{font-size:var(--fs-0);font-family:var(--font-ui);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:var(--s-2)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{counter-increment:t;border-bottom:1px solid var(--line)}
.toc a{display:grid;grid-template-columns:2.4rem 1fr;gap:var(--s-3);padding:var(--s-4) 0;text-decoration:none;color:var(--text);align-items:baseline}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--font-display);font-size:var(--fs-3);color:var(--accent);font-weight:500}
.toc a:hover strong{text-decoration:underline;text-underline-offset:4px}
.toc strong{font-family:var(--font-display);font-size:var(--fs-3);font-weight:600;display:block;line-height:1.2}
.toc span{display:block;font-size:var(--fs-0);color:var(--muted);margin-top:2px}
.toc .iss-blurb{font-family:var(--font-read);font-size:var(--fs-1);margin-top:var(--s-2)}
.toc a>.pill{display:inline-block;margin-top:0;color:var(--accent-text)}

/* Inverse band */
.band{background:var(--band-bg);color:var(--band-fg)}
.band a{color:var(--band-accent)}
.band .eyebrow{color:var(--band-accent)}
.band .btn-primary{background:var(--band-accent);color:var(--night)}
.band .btn-ghost{color:var(--band-fg);border-color:rgba(243,241,234,.3)}
.band .muted{color:color-mix(in srgb,var(--band-fg) 68%,transparent)}

/* Writers */
.writers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:var(--s-5)}
.writer{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:inherit}
.writer:hover{text-decoration:none;border-color:var(--accent-text)}
.avatar{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:600 1.25rem/1 var(--font-display);background:var(--c1,var(--cv-forest));color:var(--c2,#fff)}
.avatar.sm{width:36px;height:36px;font-size:.85rem}
.avatar.has-img{padding:0;overflow:hidden;background:var(--surface-2,var(--line))}
.avatar.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.writer h3{font-size:var(--fs-2);margin:0 0 2px}.writer p{margin:0;font-size:var(--fs-0);color:var(--muted)}
.writer .where{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--accent-text);margin-bottom:4px;display:block}

/* Submit and community panels */
.panel{display:grid;gap:var(--s-5);padding:var(--s-7) var(--s-6);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);align-items:center}
@media (min-width:860px){.panel{grid-template-columns:1.4fr 1fr;padding:var(--s-8)}}
.panel h2{font-size:var(--fs-5)}
.panel ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-3)}
.panel li{display:flex;gap:var(--s-3);align-items:flex-start}
.panel li .ic{color:var(--accent);margin-top:.15rem}
.wa-cta{display:grid;gap:var(--s-5);align-items:center}
@media (min-width:860px){.wa-cta{grid-template-columns:1.6fr 1fr}}
.wa-cta h2{font-size:var(--fs-5);margin:0 0 var(--s-3)}

/* Footer */
.footer{border-top:1px solid var(--line);padding-block:var(--s-8) var(--s-7);margin-top:0}
.footer-grid{display:grid;gap:var(--s-7);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.footer-grid>div:first-child{grid-column:1/-1;max-width:32ch}
@media (min-width:860px){.footer-grid>div:first-child{grid-column:auto}.footer-grid{grid-template-columns:1.6fr repeat(3,1fr)}}
.footer h4{font:700 var(--fs-0)/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s-4);color:var(--muted)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.footer a{color:var(--text);text-decoration:none}.footer a:hover{color:var(--accent-text);text-decoration:underline}
.footer .tagline{font-family:var(--font-display);font-size:var(--fs-3);margin-top:var(--s-4);line-height:1.25}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line);font-size:var(--fs-0);color:var(--muted)}
[hidden]{display:none!important}
.js-only{display:none}.js .js-only{display:flex}

/* Pills, kind tags, results */
.pill{align-self:flex-start;font:600 .75rem/1 var(--font-ui);padding:.4rem .7rem;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--muted);background:var(--surface)}
.kind-tag{display:inline-block;font:600 .68rem/1 var(--font-ui);letter-spacing:.09em;text-transform:uppercase;padding:.32rem .6rem;border-radius:var(--r-pill);border:1px solid currentColor;vertical-align:middle}
.kind-tag[data-kind="Issue"]{color:var(--accent-text)}
.kind-tag[data-kind="Anthology"]{color:#7a3b1e}.kind-tag[data-kind="Penned"]{color:#7a4a00}.kind-tag[data-kind="Open Page"]{color:var(--accent-text)}
:root[data-theme=dark] .kind-tag[data-kind="Anthology"]{color:#E9A07A}:root[data-theme=dark] .kind-tag[data-kind="Penned"]{color:#F4B63A}

.res-tag{display:inline-block;margin-left:.6rem;font:600 .68rem/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;padding:.3rem .55rem;border-radius:var(--r-pill);vertical-align:middle;border:1px solid var(--line);color:var(--accent-text)}
.res-tag[data-res="Winner"]{color:#7a4a00;background:#fdf0d2;border-color:transparent}
:root[data-theme=dark] .res-tag[data-res="Winner"]{color:#F4B63A;background:rgba(244,182,58,.14)}


/* Collections */
.coll-intro{max-width:56ch;margin:calc(var(--s-3) * -1) 0 var(--s-6)}
.coll-grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr))}
.coll-card{display:grid;grid-template-columns:104px 1fr;gap:var(--s-4);align-items:start;padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s var(--ease),transform .15s var(--ease)}
.coll-card:hover{border-color:var(--accent-text);text-decoration:none;color:var(--text)}
.coll-card .cover{width:100%}.coll-card .cover .c-title{font-size:.95rem}.coll-card .cover .c-meta{font-size:.55rem}
.coll-card h3{font-size:var(--fs-3);margin:var(--s-2) 0 var(--s-1);color:var(--text)}
.coll-card:hover h3{color:var(--accent-text)}
.coll-theme{margin:0 0 var(--s-2);font-family:var(--font-read);font-size:var(--fs-1);color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.coll-win{margin:0 0 var(--s-2);font-size:var(--fs-0);color:var(--text)}.coll-win b{color:#7a4a00;margin-right:.3rem}
:root[data-theme=dark] .coll-win b{color:#F4B63A}
.coll-meta{margin:0;font-size:var(--fs-0);color:var(--muted)}
.coll-prompt{margin:0 0 var(--s-5);padding:var(--s-4) var(--s-5);border-left:3px solid #C98A12;background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0;font-family:var(--font-read);font-size:var(--fs-3);max-width:40ch}
.coll-prompt b{display:block;font:600 .7rem/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-2)}
.coll-sponsors{margin:calc(var(--s-3) * -1) 0 var(--s-5);font-size:var(--fs-1)}
.coll-sponsors b{font:600 .7rem/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:.5rem}
.coll-sponsors a{font-weight:600}
@media (max-width:560px){.coll-card{grid-template-columns:84px 1fr}}

/* Collection page */
.iss{padding-block:var(--s-6)}
.iss-head{display:grid;gap:var(--s-7);align-items:center;margin:var(--s-5) 0 var(--s-8)}
@media (min-width:860px){.iss-head{grid-template-columns:300px 1fr;gap:var(--s-8)}}
.iss-cover{max-width:280px}
.iss-head h1{font-size:var(--fs-6);margin:var(--s-2) 0 var(--s-3)}
.iss-theme{font-family:var(--font-read);font-size:var(--fs-3);max-width:40ch;margin:0 0 var(--s-5)}
.iss-head .zp-nums{margin:0 0 var(--s-5)} /* 0.1.49: the rating and New line keeps a clear gap above Start Part 1 */
.iss-head .zp-nums+.hero-actions{margin-top:var(--s-5)}
.iss-cols{display:grid;gap:var(--s-7)}
@media (min-width:900px){.iss-cols{grid-template-columns:1.5fr 1fr;gap:var(--s-8);align-items:start}}
#iss-toc a,#iss-toc a:visited{grid-template-columns:2.4rem 1fr;align-items:start;color:var(--text)}
.iss-side{display:grid;gap:var(--s-5)}
.iss-note{padding:var(--s-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.iss-note p:not(.eyebrow){font-family:var(--font-read);font-size:var(--fs-2)}
.iss-note h2{font-size:var(--fs-4);margin:var(--s-2) 0 var(--s-3)}
.iss-by{font:600 var(--fs-0) var(--font-ui)!important;color:var(--muted)}
.wp-stats{display:flex;flex-wrap:wrap;gap:var(--s-5);margin:0 0 var(--s-5);color:var(--muted);font-size:var(--fs-0)}
.wp-stats b{color:var(--text);font-family:var(--font-display);font-size:var(--fs-3)}
@media (max-width:560px){.iss-head h1{font-size:var(--fs-6)}.iss-note{padding:var(--s-5)}}
.page-back{margin-bottom:var(--s-5)}

/* Writer profile */
.wp{padding-block:var(--s-6)}
.wp-head{display:flex;gap:var(--s-6);align-items:flex-start;padding:var(--s-6);margin-bottom:var(--s-7);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.wp-head .avatar{width:96px;height:96px;font-size:2.2rem}
.wp-head h1{font-size:var(--fs-6);margin:var(--s-1) 0 var(--s-2)}
.wp-head .role{color:var(--accent-text);font-weight:600;margin:0 0 var(--s-4)}
.wp-head .bio{font-family:var(--font-read);font-size:var(--fs-2);max-width:60ch;margin:0 0 var(--s-4)}
.wp-head .bio p{margin:0 0 .8em}
@media (max-width:560px){.wp-head{flex-direction:column;padding:var(--s-5)}.wp-head h1{font-size:var(--fs-5)}}
.lib-more{margin-top:var(--s-8)}

/* Writer links */
.wl{margin:var(--s-4) 0 var(--s-5)}
.wl-h{margin:0 0 var(--s-2);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wl ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.wl-a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem .95rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font:600 var(--fs-0)/1 var(--font-ui);text-decoration:none}
.wl-a:hover{border-color:var(--accent-text);color:var(--accent-text);text-decoration:none}
.wl-a .ic{width:18px;height:18px;flex:none}
.wl-sm{margin:var(--s-3) 0}
.wl-sm .wl-a{min-height:40px;padding:.4rem .75rem}

/* All writers */
.lib{padding-block:var(--s-7) var(--s-8)}
.lib-head h1{font-size:var(--fs-6);margin:var(--s-2) 0 var(--s-3)}
.lib-head p.muted{max-width:56ch;font-family:var(--font-read);font-size:var(--fs-2)}
@media (max-width:640px){.lib-head h1{font-size:var(--fs-5)}}
.wr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:var(--s-5)}
.wr-card{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);color:inherit;text-decoration:none;min-width:0}
.wr-card:hover{text-decoration:none;border-color:var(--accent-text)}
.wr-top{display:flex;gap:var(--s-4);align-items:center}
.wr-top>div{min-width:0}
.wr-card h3{font-size:var(--fs-2);margin:0 0 2px}
.wr-card .role{margin:0;font-size:var(--fs-0);color:var(--muted)}
.wr-bio{margin:0;font-family:var(--font-read);font-size:var(--fs-1);color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wr-kinds{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0}
.wr-kinds span{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);border:1px solid var(--line);border-radius:var(--r-pill);padding:.25rem .6rem}
.wr-nums{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:0;font-size:var(--fs-0);color:var(--muted)}
.wr-nums b{color:var(--text)}
.wr-go{margin-top:auto;font-size:var(--fs-0);font-weight:600;color:var(--accent-text)}
.wr-card:hover .wr-go{text-decoration:underline}
.wr-cta{display:grid;gap:var(--s-4);margin-top:var(--s-8);padding:var(--s-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.wr-cta h2{margin:0 0 var(--s-2)}
.wr-cta .muted{max-width:52ch;margin:0}
@media (min-width:720px){.wr-cta{grid-template-columns:1fr auto;align-items:center}}

/* Reading typography and the reader */
.prose{font-family:var(--font-read);font-size:calc(var(--fs-2) * var(--rs,1));line-height:1.75;max-width:62ch}
.prose blockquote{margin:var(--s-6) 0;padding-left:var(--s-5);border-left:3px solid var(--accent);font-style:italic;font-size:var(--fs-3)}
.reader{padding-bottom:var(--s-8)}
.rd-bar{position:sticky;top:var(--nav-h);z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.rd-bar-in{display:flex;align-items:center;gap:var(--s-3);height:56px}
.rd-bar .icon-btn{width:40px;height:40px;font:600 .9rem var(--font-ui)}
.rd-mini{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-display);font-weight:600;color:var(--muted)}
.rd-tools{display:flex;gap:var(--s-2)}
.rd-progress{height:3px;background:transparent}
.rd-progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s linear}
.rd-wrap{width:min(100% - 2rem,720px);margin-inline:auto;padding-top:var(--s-7)}
#rd-head h1{font-size:var(--fs-6);margin-block:var(--s-3) var(--s-5);text-wrap:balance}
.rd-by{display:flex;align-items:center;gap:var(--s-3);color:var(--muted);font-size:var(--fs-0);margin-bottom:var(--s-7)}
.rd-by b{color:var(--text)}
.rd-by a{color:inherit;text-decoration:none}.rd-by a:hover{text-decoration:underline;text-underline-offset:3px}
.rd-av{display:inline-flex}.rd-av .avatar+.avatar{margin-left:-10px;box-shadow:0 0 0 2px var(--bg)}
.rd-from{margin:0 0 var(--s-3);font:500 var(--fs-0) var(--font-ui);color:var(--muted)}.rd-from a{color:var(--accent-text)}.rd-from .res-tag{margin-left:.5rem}
.rd-teaser{font-family:var(--font-read);font-size:var(--fs-3);line-height:1.5;margin-bottom:var(--s-6)}
.reader .prose{max-width:none}
.reader .prose p{margin:0 0 1.15em}
.reader .prose hr{border:0;height:1.6rem;margin:1.6rem 0;text-align:center;position:relative}
.reader .prose hr::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent);box-shadow:-18px 0 0 var(--accent),18px 0 0 var(--accent)}
.reader .prose h2,.reader .prose h3{font-family:var(--font-ui);font-size:var(--fs-0);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:2.2rem 0 1rem}
.reader .prose p.dc::first-letter{font-family:var(--font-display);font-weight:600;font-size:3.6em;float:left;line-height:.85;padding:.08em .1em 0 0;color:var(--accent)}
.reader .prose p.dc{display:flow-root;min-height:3.5em}
.f-poem .prose{font-size:calc(var(--fs-3) * var(--rs,1));line-height:1.7;max-width:34ch;margin-inline:auto;text-align:left}
.f-poem .prose p{margin-bottom:1.6em}
.f-poem #rd-head,.f-poem .rd-fin{text-align:center}
.f-poem .rd-by,.f-poem .rd-from{justify-content:center;flex-wrap:wrap;text-align:center}
@media (max-width:480px){.f-poem .prose{font-size:calc(var(--fs-2) * var(--rs,1))}}
.note{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6);margin-block:var(--s-5)}
.note b{font:700 var(--fs-0)/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.note p{margin:var(--s-3) 0 var(--s-4);font-family:var(--font-read);font-size:var(--fs-2)}
.rd-fin{margin-top:var(--s-8);padding-top:var(--s-7);border-top:3px double var(--line);display:grid;gap:var(--s-4);justify-items:start}
.f-poem .rd-fin{justify-items:center}
.rd-done{font-family:var(--font-display);font-size:var(--fs-4);margin:0}
.rd-author{display:flex;gap:var(--s-5);align-items:flex-start;margin-top:var(--s-5);padding:var(--s-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.rd-author h2{font-size:var(--fs-3);margin-bottom:var(--s-2)}
.rd-author p{font-size:var(--fs-1)}
.rd-author .wp-link{font-weight:600}
.rd-next{display:grid;grid-template-columns:96px 1fr;gap:var(--s-5);align-items:center;margin-top:var(--s-5);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:inherit;background:var(--surface)}
.rd-next:hover{border-color:var(--accent-text);text-decoration:none}
.rd-next h3{font-size:var(--fs-3)}
.rd-next .cover{padding:.6rem}.rd-next .cover .c-title{font-size:.8rem}.rd-next .cover .c-meta{display:none}
@media (max-width:560px){.rd-author{flex-direction:column}.rd-next{grid-template-columns:80px 1fr}}
#rd-gloss{margin:var(--s-8) 0 var(--s-6);padding:var(--s-5) var(--s-6);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-lg);background:var(--surface)}
#rd-gloss .gl-h{margin:0 0 var(--s-1);font-size:var(--fs-2)}
#rd-gloss .gl-sub{margin:0 0 var(--s-4);color:var(--muted);font-size:var(--fs-0)}
.gl-list{margin:0;display:grid;gap:var(--s-3)}
.gl-list>div{display:grid;grid-template-columns:minmax(7rem,11rem) 1fr;gap:var(--s-4);align-items:baseline}
.gl-list dt{font-family:var(--font-read);font-weight:600;font-style:italic}
.gl-list dd{margin:0;color:var(--muted);font-size:var(--fs-0)}
@media (max-width:560px){.gl-list>div{grid-template-columns:1fr;gap:.1rem}}

/* Search panel (0.1.10). The panel is a div, so these rules say "div.search". WordPress puts the word "search" on the whole page
   (the body) on the results page, and the earlier plain ".search" rule turned the entire page into a floating panel. */
div.search{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,var(--ink,#111A15) 55%,transparent);display:flex;justify-content:center;align-items:flex-start;padding:var(--s-6) var(--s-4)}
div.search[hidden]{display:none}
.search-panel{width:min(680px,100%);max-height:calc(100dvh - 2*var(--s-6));display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.search-bar{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border-bottom:1px solid var(--line)}
.search-bar .ic{flex:none;color:var(--muted)}
.search-bar input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:var(--fs-2);color:var(--text);outline:none}
.js .search-bar .search-go{display:none}
.search-out{overflow:auto;padding:var(--s-3) var(--s-4) var(--s-5)}
.search-out:empty{display:none}
.search-out h3{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:var(--s-4) 0 var(--s-2)}
.sr-item{display:flex;gap:var(--s-4);align-items:center;padding:var(--s-3);border-radius:var(--r-md);text-decoration:none;color:inherit}
.sr-item:hover,.sr-item:focus-visible{background:var(--surface);text-decoration:none}
.sr-item b{display:block;font-family:var(--font-display);font-size:var(--fs-2)}
.sr-item small{color:var(--muted)}
.sr-item .cover{flex:none;width:44px;aspect-ratio:2/3;padding:4px;font-size:.45rem}
.sr-item .cover .c-title,.sr-item .cover .c-meta{display:none}
.sr-item mark{background:transparent;color:var(--accent-text);font-weight:600}
.search-empty{padding:var(--s-6) var(--s-3);color:var(--muted);text-align:center}
.search-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:var(--s-3) 0}
.search-chips button.pill{cursor:pointer}
.search-more{margin:var(--s-4) 0 0;padding:var(--s-3);text-align:center;border-top:1px solid var(--line);font-size:var(--fs-0);font-weight:600}
.search-form{display:flex;gap:var(--s-3);flex-wrap:wrap;margin:var(--s-5) 0}
.search-form input[type=search]{flex:1 1 240px;min-width:0;font:500 var(--fs-1) var(--font-ui);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:.85rem 1.2rem}
@media (max-width:560px){div.search{padding:var(--s-3)}}
/* The full results page: spacing between the groups */
.sr-sec{margin-top:var(--s-7)}

/* Content pages (About, Privacy, Terms, Guidelines and so on, written in the WordPress editor) */
.sf{padding-block:var(--s-6);max-width:760px}
.sf-head{margin-top:var(--s-5)}
.sf-head h1{font-size:var(--fs-6);margin:var(--s-2) 0 var(--s-3)}
.sf-head p.muted{font-family:var(--font-read);font-size:var(--fs-2);max-width:56ch}
@media (max-width:560px){.sf-head h1{font-size:var(--fs-5)}}
.entry{max-width:66ch;margin-top:var(--s-6)}
.entry>h2,.entry section h2{font-size:var(--fs-4);margin:var(--s-7) 0 var(--s-3)}
.entry>h3,.entry section h3{font-size:var(--fs-2);margin:var(--s-5) 0 var(--s-2)}
.entry p,.entry li{font-family:var(--font-read);font-size:var(--fs-2);line-height:1.6}
.entry ul,.entry ol{padding-left:1.2em;display:grid;gap:var(--s-2);margin:0 0 var(--s-4)}
.entry a{color:var(--zen-green-deep);text-decoration:underline;text-underline-offset:2px}
:root[data-theme=dark] .entry a{color:var(--zen-green-bright)}

.entry a.btn{text-decoration:none}.entry a.btn-primary{color:var(--btn-fg)}
.pv-short{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6)}
.pv-ph{display:inline;font:600 var(--fs-0)/1.3 var(--font-ui);color:#7a4a00;background:#fdf0d2;border-radius:var(--r-sm);padding:.1rem .45rem}
:root[data-theme=dark] .pv-ph{color:#F4B63A;background:rgba(244,182,58,.14)}


/* Page not found */
.nf{min-height:60vh;display:grid;align-content:center;justify-items:center;text-align:center;padding-block:var(--s-8)}
.nf-code{margin:0;font:800 clamp(5rem,22vw,10rem)/1 var(--font-display);color:var(--accent-text);letter-spacing:-.02em;opacity:.9}
.nf h1{font-size:var(--fs-6);margin:var(--s-2) 0 var(--s-3)}
.nf-sub{font-family:var(--font-read);font-size:var(--fs-3);max-width:44ch;margin:0 auto}
.nf-actions{justify-content:center;margin-top:var(--s-6)}
.nf-note{margin-top:var(--s-6);color:var(--muted)}
.nf-note a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}

/* Pagination */
.pager{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center;margin:var(--s-7) 0 0}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .9rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--text);text-decoration:none;font:600 var(--fs-0) var(--font-ui)}
.pager .page-numbers:hover{border-color:var(--accent-text);color:var(--accent-text)}
.pager .page-numbers.current{background:var(--surface-2);border-color:var(--accent-text);color:var(--accent-text)}
.pager .dots{border:0;background:none}

/* WordPress bits */
.admin-bar .topbar{top:32px}.admin-bar .rd-bar{top:calc(var(--nav-h) + 32px)}
@media (max-width:782px){.admin-bar .topbar{top:46px}.admin-bar .rd-bar{top:calc(var(--nav-h) + 46px)}}
@media (max-width:600px){.admin-bar .topbar{top:0}.admin-bar .rd-bar{top:var(--nav-h)}}
.entry img,.prose img{height:auto;border-radius:var(--r-md)}
.alignleft{float:left;margin:0 1rem 1rem 0}.alignright{float:right;margin:0 0 1rem 1rem}.aligncenter{margin-inline:auto}
.wp-caption-text,figcaption{font-size:var(--fs-0);color:var(--muted)}

/* Content note gate (JS only) */
.reader.gated #rd-body,.reader.gated #rd-gloss,.reader.gated #rd-end{display:none}

/* Contents rows with separate links (title, writer, kind) */
.toc li.tl{display:grid;grid-template-columns:2.4rem 1fr;gap:var(--s-3);padding:var(--s-4) 0;align-items:baseline}
.toc li.tl::before{content:counter(t,decimal-leading-zero);font-family:var(--font-display);font-size:var(--fs-3);color:var(--accent);font-weight:500}
.toc li.tl a{display:inline;padding:0;color:inherit;text-decoration:none}
.toc li.tl a::before{content:none}
.toc li.tl a.tt{display:block}
.toc li.tl a.tt:hover strong{text-decoration:underline;text-underline-offset:4px}
.toc li.tl .tm a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.toc li.tl .tm a:hover{color:var(--accent-text);text-decoration-color:currentColor}
.coll-prompt p{margin:0 0 .8em}.coll-prompt p:last-child{margin-bottom:0}
.reader .prose hr.zp-break{margin:1.6rem 0}

/* Share */
.avatar.has-img img{object-position:50% 25%}
.js-only[hidden]{display:none!important}

/* Share panel and cards (from the prototype) */
.toast{width:max-content;position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--text);color:var(--bg);padding:.8rem 1.2rem;border-radius:var(--r-pill);font-weight:500;font-size:var(--fs-0);z-index:95;transition:opacity .25s,transform .25s var(--ease);box-shadow:var(--shadow);max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:861px){.toast{bottom:1.5rem}}
.rd-share{margin:var(--s-3) 0 0}
.sheet{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,#000 55%,transparent);display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-panel{width:min(560px,100%);max-height:88dvh;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--s-5) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.sheet{align-items:center}.sheet-panel{border-radius:var(--r-lg)}}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);margin-bottom:var(--s-2)}
.sheet-head h2{font-size:var(--fs-4);margin:0}
.sh-sec{margin-top:var(--s-5)}.sh-l{display:block;font:600 var(--fs-0) var(--font-ui);margin:0 0 var(--s-2)}
.sh-copy{display:flex;gap:var(--s-3)}
.sh-copy input{flex:1;min-width:0;font:500 var(--fs-0) var(--font-ui);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem .9rem}
.sh-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);margin-top:var(--s-5)}
.sh-grid .btn{justify-content:center}
.cd-prev{display:flex;justify-content:center}
.cd-prev img{display:block;max-height:52vh;max-width:100%;width:auto;border-radius:var(--r-md);box-shadow:0 8px 28px rgba(0,0,0,.22)}

/* Series (0.1.24, Entry 178) */
.card-series .cover{box-shadow:5px 5px 0 -1px var(--bg),5px 5px 0 0 var(--line)}
.rd-part b{color:var(--text);font-weight:700}
.ser-nav{margin-top:var(--s-6);border-top:3px solid var(--text);padding-top:var(--s-3)}
.ser-nav .eyebrow{margin:0 0 var(--s-2)}
.ser-parts{list-style:none;margin:0;padding:0}
.ser-parts li{border-bottom:1px solid var(--line)}
.ser-parts a,.ser-parts span{display:block;min-height:44px;padding:var(--s-3) 0;text-decoration:none;color:var(--text)}
.ser-parts a:hover{text-decoration:underline;text-underline-offset:4px}
.ser-parts b{font:700 var(--fs-0) var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-right:.5rem}
.ser-parts .is-current span{font-weight:600}
.rd-nextpart{border-color:var(--accent-text)}
.ser-end{margin-top:var(--s-5);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.ser-end h3{font-size:var(--fs-3);margin:0 0 var(--s-3)}
.ser-toc .tl .tm{display:block}

/* 0.1.33 (Entry 214): a gap between Start with and Share on a writer's page, and a tighter bottom bar (below). */
.wp-head .hero-actions+.hero-actions{margin-top:var(--s-3)}

/* 0.1.34 (Entries 206 to 209): the two Noir kinds. Teal for a National book and sand for a State book, the two cover colours no other kind uses. */
.kind-tag[data-kind="National Noir"]{color:var(--cv-teal)}.kind-tag[data-kind="State Noir"]{color:#6B5A2E}
:root[data-theme=dark] .kind-tag[data-kind="National Noir"]{color:#7FD6CC}:root[data-theme=dark] .kind-tag[data-kind="State Noir"]{color:var(--cv-sand)}
/* Chapters of a State book. The piece numbers carry on through the whole book, so the counter is reset once on the box, not on each list. */
.toc.chapters{counter-reset:t}.toc.chapters ol{counter-reset:none}
.chap-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;margin:var(--s-6) 0 0;padding-bottom:var(--s-2);border-bottom:2px solid var(--line);font-size:var(--fs-4);scroll-margin-top:5rem}
.chap-h:first-of-type{margin-top:var(--s-3)}
.chap-n{font:700 var(--fs-0) var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.coll-edited{margin:calc(var(--s-3) * -1) 0 var(--s-4);font:500 var(--fs-1) var(--font-ui);color:var(--muted)}
.coll-same ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.coll-same li a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-family:var(--font-display);font-weight:600;color:var(--text);text-decoration:none}
.coll-same li a:hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:4px}
/* The line under a Noir story's title: "Set in Awka, ZenPens State Noir: Anambra". Same size and colour as the From line. */
.rd-noir{margin:0 0 var(--s-3);font:500 var(--fs-0) var(--font-ui);color:var(--muted)}.rd-noir a{color:var(--accent-text)}
.f-poem .rd-noir{text-align:center}
/* A little less side padding on the small cover in a card, so a long place name such as Anambra stays inside it. */
.coll-card .cover{padding-inline:.7rem}
/* 0.1.35 (Entry 213): poems sent together. A quiet line on the card, and an "Also in this set" strip at the end of the poem's page. */
.card .zp-set{margin-top:.125rem;font-weight:500;color:var(--accent-text)}
.set-nav{margin-top:var(--s-6);border-top:1px solid var(--line);padding-top:var(--s-3)}
.set-nav .eyebrow{margin:0 0 var(--s-2)}
.set-list{list-style:none;margin:0;padding:0}
.set-list li{border-bottom:1px solid var(--line)}
.set-list a{display:block;min-height:44px;padding:var(--s-3) 0;text-decoration:none;color:var(--text)}
.set-list a:hover{text-decoration:underline;text-underline-offset:4px}
.set-list b{font:700 var(--fs-0) var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-right:.5rem}

/* The installable app and Focus mode (0.1.44, Entry 241) */
.app-band{position:fixed;left:var(--s-3);right:var(--s-3);bottom:calc(var(--tabbar-h) + var(--s-3) + env(safe-area-inset-bottom,0px));z-index:65;max-width:420px;margin-inline:auto;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:var(--s-4)}
.app-band-t{margin:0 0 var(--s-1);font:600 var(--fs-1)/1.25 var(--font-display)}
.app-band-p{margin:0 0 var(--s-3);font-size:var(--fs-0);line-height:1.45;color:var(--muted)}
.app-band-a{display:flex;align-items:center;gap:var(--s-2)}
@media (min-width:861px){.app-band{display:none !important}}
.fx{position:fixed;right:max(var(--s-3),env(safe-area-inset-right,0px));bottom:max(var(--s-3),env(safe-area-inset-bottom,0px));z-index:70}
.fx-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;opacity:.6;box-shadow:var(--shadow);transition:opacity .2s}
.fx-btn:hover,.fx-btn:focus-visible,.fx-btn[aria-expanded="true"]{opacity:1}
.fx-panel{position:absolute;right:0;bottom:calc(100% + var(--s-2));width:max-content;max-width:calc(100vw - 2rem);display:grid;gap:var(--s-2);padding:var(--s-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}
.fx-row{display:flex;gap:var(--s-2)}
.fx-row .icon-btn{width:44px;height:44px;font:600 .9rem var(--font-ui)}
html.zp-focus .topbar,html.zp-focus .tabbar,html.zp-focus .zpr-dock,html.zp-focus .app-band{display:none !important}
html.zp-focus body{padding-bottom:0}
html.zp-focus .rd-bar{position:fixed;top:0;left:0;right:0;border:0;background:transparent;z-index:40}
html.zp-focus .rd-bar-in{display:none}