/* featherScroll presentation layer — loaded after refinements on every page. */
html { scroll-behavior: auto; }

/* 1. Bookmark shelf (replaces "More to explore" cards) */
.shelf{margin-top:1.5rem;padding-top:1.75rem;border-top:1px solid rgba(245,240,232,.1)}
.shelf-head{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.5rem;font-weight:700;color:#f5f0e8;margin:0 0 .25rem}
.shelf-note{margin:0 0 1.5rem;font-size:.9rem;color:#c3cfc2}
.shelf-rail{display:grid;grid-template-columns:1fr;gap:.9rem;list-style:none;margin:0;padding:0}
.ribbon{--c:#e0707f;position:relative;display:flex;align-items:center;gap:1rem;padding:1.15rem 2.6rem 1.15rem 1.1rem;
  color:#f5f0e8;text-decoration:none;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 38%,#10241b),color-mix(in srgb,var(--c) 14%,#0f2018));
  clip-path:polygon(0 0,100% 0,calc(100% - 24px) 50%,100% 100%,0 100%);transition:transform .25s ease,filter .25s ease}
.ribbon::before{content:"";position:absolute;inset:0 0 0 0;border-left:4px solid var(--c);pointer-events:none}
.ribbon::after{content:"";position:absolute;inset:7px 30px 7px 12px;border:1px dashed color-mix(in srgb,var(--c) 55%,transparent);border-radius:4px;pointer-events:none}
.ribbon:nth-child(2){margin-right:1.2rem}.ribbon:nth-child(3){margin-right:2.4rem}
.ribbon-wild{--c:#e0707f}.ribbon-know{--c:#7aa2ff}.ribbon-day{--c:#3fd3ae}
.ribbon svg{flex:none;width:30px;height:30px;stroke:var(--c);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ribbon b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.45rem;line-height:1.1;color:var(--c)}
.ribbon span{display:block;margin-top:.2rem;font-size:.88rem;color:#d3dccf}
.ribbon:hover,.ribbon:focus-visible{transform:translateY(6px);filter:brightness(1.12);outline:none}
.ribbon:focus-visible b{text-decoration:underline}
@media (min-width:760px){
  .shelf-rail{grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start}
  .ribbon{flex-direction:column;align-items:flex-start;gap:.8rem;padding:1.3rem 1.2rem 3.6rem;
    clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 30px),0 100%)}
  .ribbon::before{border-left:0;border-top:4px solid var(--c)}
  .ribbon::after{inset:12px 10px 40px 10px}
  .ribbon:nth-child(n){margin-right:0}
  .ribbon:nth-child(1){min-height:215px}.ribbon:nth-child(2){min-height:250px}.ribbon:nth-child(3){min-height:195px}
  .ribbon:hover,.ribbon:focus-visible{transform:translateY(10px)}
}

/* 2. Paper grain: tactile, quiet */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 3. Reading progress uses a dedicated, transform-only element (see shell.js). */

/* 4. One orchestrated entrance: home hero, once */
@media (prefers-reduced-motion:no-preference){
  .home-hero-label,.home-hero-title,.home-hero-sub{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .home-hero-title{animation-delay:.12s}.home-hero-sub{animation-delay:.3s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}}
}
@media (prefers-reduced-motion:reduce){.ribbon{transition:none}}

/* 5. Contact/legal: the summary becomes an airmail envelope */
.publication-summary{position:relative;overflow:hidden;padding-top:1.9rem!important}
.publication-summary::before{content:"";position:absolute;top:0;left:0;right:0;height:9px;
  background:repeating-linear-gradient(-45deg,#d9606b 0 14px,#f5f0e8 14px 22px,#5b86d6 22px 36px,#f5f0e8 36px 44px)}
.publication-summary a{overflow-wrap:anywhere}

/* ===== 6. Section skins: each series gets its own form ===== */
/* Wild Tales: case-file folders */
.cat-wild .ed-grid-card{position:relative;margin-top:14px;border-radius:0 14px 14px 14px;border:1px solid #e0707f40;border-top:3px solid #e0707f;background:linear-gradient(180deg,#2a1519 0%,#1a1013 100%)}
.cat-wild .ed-grid-card::before{content:"";position:absolute;top:-17px;left:-1px;width:84px;height:14px;background:#e0707f;border-radius:8px 8px 0 0;clip-path:polygon(0 0,82% 0,100% 100%,0 100%)}
.cat-wild .ed-grid-card-img{filter:sepia(.55) contrast(1.05) brightness(.9);transition:filter .35s}
.cat-wild .ed-grid-card:hover .ed-grid-card-img,.cat-wild .ed-grid-card:focus-visible .ed-grid-card-img{filter:none}
.cat-wild .ed-grid-card-date{color:#f0a0aa}
/* On This Day: tear-off calendar leaves */
.cat-onthisday .ed-grid-card{border-radius:6px;border:0;background:#f3ecdc;color:#17302a;box-shadow:0 2px 0 #cfc5ac,0 5px 0 #0f2018,0 6px 0 #cfc5ac}
.cat-onthisday .ed-grid-card-body{padding-top:.4rem}
.cat-onthisday .ed-grid-card-title{color:#17302a}
.cat-onthisday .ed-grid-card-read{color:#0e7a63}
.cat-onthisday .ed-grid-card-date{display:flex;align-items:baseline;gap:.45rem;margin:0 0 .3rem;padding:.55rem .8rem;color:#f5f0e8;background:#0e7a63;border-radius:0;font-weight:500;
  -webkit-mask:radial-gradient(circle 4px at 8px 0,#0000 98%,#000) 0 0/16px 100% repeat-x;mask:radial-gradient(circle 4px at 8px 0,#0000 98%,#000) 0 0/16px 100% repeat-x}
.cat-onthisday .ed-grid-card-date .d{font-family:"Cormorant Garamond",Georgia,serif;font-size:2.3rem;font-weight:700;line-height:.9}
.cat-onthisday .ed-grid-card-date .m{font-size:.8rem}
.cat-onthisday .ed-grid-card-img{order:2;margin:.4rem .6rem 0;width:calc(100% - 1.2rem);border-radius:3px}
.cat-onthisday .ed-grid-card-body{order:3}
.cat-onthisday .ed-grid-card .ed-grid-card-date{order:0}
/* Did You Know?: native article links, with a subtle blue accent. */
.cat-knowledge .ed-grid-card{position:relative;border-color:#7aa2ff50}
/* ===== 7. Mobile shell ===== */
.tabbar{display:none;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.tabbar.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
@media (max-width:759px){
  body{padding-bottom:env(safe-area-inset-bottom,0px)}
  /* tighter page endings on phones */
  .ed-footer,.fs-footer,.ds-footer,.legal-footer,.publication-footer{margin-top:1.5rem!important;padding:1.25rem 1rem!important}
  .ed-footer-inner,.fs-footer-inner,.ds-footer-inner{gap:.6rem}
  .home-footer{padding:1rem!important}
  .fs-main,.ds-main{padding-bottom:12px!important}
  .tabbar{position:fixed;z-index:9000;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(4,1fr);
    padding:6px;border-radius:18px;background:#10231bf2;border:1px solid #d2c79430;box-shadow:0 10px 30px #0008;backdrop-filter:none}
  .tabbar a{--c:#e8c97a;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 6px;border-radius:12px;color:#aebcaa;text-decoration:none;font-size:.66rem;font-weight:500;-webkit-tap-highlight-color:transparent}
  .tabbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a[aria-current]{color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
  .tabbar a[aria-current]::after{content:"";position:absolute;top:-6px;width:18px;height:6px;background:var(--c);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:0 0 2px 2px}
  .tabbar a:nth-child(2){--c:#e0707f}.tabbar a:nth-child(3){--c:#7aa2ff}.tabbar a:nth-child(4){--c:#3fd3ae}
  /* shorter hero so a story shows on first screen */
  .home-hero{padding-top:18px!important;padding-bottom:6px!important}
}

/* ===== 8. Article reading experience ===== */
.fs-article-body>p:first-of-type::first-letter,.ds-body>p:first-of-type::first-letter,.fs-article-body .fs-section:first-child>p:first-of-type::first-letter{
  float:left;font-family:"Cormorant Garamond",Georgia,serif;font-size:4.2em;line-height:.8;font-weight:700;padding:.06em .1em 0 0;color:#e8c97a}
.read-time{display:inline-flex;align-items:center;gap:.4rem;color:#c3cfc2;font-size:.85rem}
.read-time::before{content:"";width:14px;height:14px;border:1.5px solid currentColor;border-radius:50%;background:linear-gradient(currentColor,currentColor) 50% 25%/1.5px 5px no-repeat,linear-gradient(currentColor,currentColor) 50% 55%/5px 1.5px no-repeat}
.next-story{display:block;margin:2.5rem 0 1rem;padding:1.3rem 1.4rem 1.6rem;text-decoration:none;color:#f5f0e8;background:linear-gradient(160deg,#2a4a38,#14281f);border-top:4px solid #e8c97a;
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 16px),0 100%);transition:transform .25s}
.next-story small{display:block;color:#e8c97a;font-size:.8rem;margin-bottom:.4rem}
.next-story strong{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.5rem;line-height:1.2}
.next-story:hover,.next-story:focus-visible{transform:translateY(5px);outline:none}


/* Reserve the welcome slot before sign-in resolves, without touching authentication. */
#home-welcome { display:grid; align-items:center; justify-items:center; min-height:110px; transition:none; }
#home-welcome > * { grid-area:1 / 1; }
#home-welcome .pi-welcome { margin-top:0; }
.fs-article-meta, .ds-meta { min-height:26px; }
/* Mobile scrolling stays native; decoration doesn't run during touch scrolling. */
@media(max-width:759px) {
  body::before, body::after { content:none; display:none; animation:none; }
  .fs-header, .ds-header, .ed-header { backdrop-filter:none; background:#10231b; }
  .home-hero-label, .home-hero-title, .home-hero-sub { animation:none; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none!important; transition:none!important; }
}

/* A failed or delayed image keeps its reserved space while the reader scrolls. */
.fs-article-image, .ds-image { aspect-ratio:3 / 2; }
.ds-image-unavailable .ds-image { visibility:hidden; }

/* A single gold thread updates without changing the page's layout or scroll position. */
.fs-reading-progress { position:fixed; z-index:9999; left:0; top:0; width:100%; height:3px;
  pointer-events:none; background:linear-gradient(90deg,#c9a84c,#f1d893); transform:scaleX(0); transform-origin:left center; }
/* Homepage intro: a little book opens into light. No content is hidden underneath. */
.fs-intro { display:none; position:fixed; inset:0; z-index:10000; background:#10231b; color:#f5f0e8;
  align-items:center; justify-content:center; text-align:center; padding:24px; }
.fs-booting .fs-intro { display:flex; }
.fs-intro-inner { width:100%; max-width:360px; }
.fs-intro-mark { margin:0 auto 20px; color:#e8c97a; }
.intro-page { fill:#284735; stroke:#d7bd73; stroke-width:1.5; transform-box:fill-box; transform-origin:center; }
.intro-page-left { animation:intro-unfold-left 1.5s ease-in-out infinite; }
.intro-page-right { animation:intro-unfold-right 1.5s ease-in-out infinite; }
.intro-spine { stroke:#e8c97a; stroke-width:1.4; stroke-linecap:round; opacity:.75; }
.intro-spark { fill:#efd38f; animation:intro-glow 1.5s ease-in-out infinite; }
.fs-intro-brand { display:block; font:600 2rem "Cormorant Garamond",Georgia,serif; letter-spacing:.02em; }
.fs-intro-brand span { color:#e8c97a; }
.fs-intro p { margin:12px 0 24px; color:#c2d2c3; font-size:.9rem; }
.fs-intro-trail { display:block; width:72px; height:2px; margin:0 auto 28px; background:#d7bd7344; overflow:hidden; }
.fs-intro-trail::after { content:""; display:block; width:32px; height:2px; background:#e8c97a; animation:intro-trail 1.2s ease-in-out infinite; }
@keyframes intro-unfold-left { 0%,100% { transform:scaleX(.85) rotate(3deg); } 50% { transform:scaleX(1) rotate(-2deg); } }
@keyframes intro-unfold-right { 0%,100% { transform:scaleX(.85) rotate(-3deg); } 50% { transform:scaleX(1) rotate(2deg); } }
@keyframes intro-glow { 0%,100% { opacity:.35; } 50% { opacity:1; } }
@keyframes intro-trail { from { transform:translateX(-32px); } to { transform:translateX(72px); } }
@media(prefers-reduced-motion:reduce) { .fs-intro *, .fs-intro *::after { animation:none!important; } }

/* Subtle article image credits. */
.fs-article-image-credit, .ds-image-credit { color:#8ea395; font-size:.7rem; line-height:1.5; padding:6px 12px; }
.fs-article-image-credit a, .ds-image-credit a { color:inherit; text-decoration-color:#8ea39566; }
.fs-article-image-credit a:hover, .ds-image-credit a:hover,
.fs-article-image-credit a:focus-visible, .ds-image-credit a:focus-visible { color:#c2d2c3; }