@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap");

:root{--paper:#f5ead0;--ink:#3a2317;--olive:#5b6d2a;--line:#d2b87a}
*{box-sizing:border-box}body{margin:0;background:#e6d2a5;color:var(--ink);font-family:"Source Sans 3",sans-serif}
header{background:var(--paper);border-bottom:1px solid var(--line);padding:18px 5%;display:flex;justify-content:space-between;align-items:center;gap:24px}
h1,h2,h3,.brand{font-family:"Playfair Display",serif}.brand{font-size:34px;font-weight:700}.sub{font-size:14px}
nav{display:flex;gap:20px;flex-wrap:wrap}nav a{color:var(--ink);text-decoration:none;font-weight:600}


main{max-width:1536px;margin:auto;background:var(--paper);padding:30px 4% 60px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin-bottom:32px}
.stats div{text-align:center;padding:15px;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats b{font-family:"Playfair Display",serif;font-size:26px;display:block}
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 28px}.filters button{border:1px solid var(--line);background:#fff7e3;border-radius:999px;padding:10px 16px;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{background:#fff8e8;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 3px 10px #5a3f1818}
.card img{width:100%;height:210px;object-fit:contain;background:#eadab6;display:block}
.card .copy{padding:14px}.card h3{font-size:22px;margin:0 0 6px}.pill{display:inline-block;padding:4px 9px;background:var(--olive);color:white;border-radius:999px;font-size:12px;text-transform:capitalize}
footer{max-width:1536px;margin:auto;background:#ead7ad;padding:24px 5%;text-align:center;border-top:1px solid var(--line)}
@media(max-width:700px){header{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(2){border-right:0}.grid{grid-template-columns:1fr 1fr}.card img{height:150px}}

/* VERIFIED HERO — merged unchanged in structure */
.hero { position:relative; width:100%; aspect-ratio:3072/1257; max-height:627px; overflow:hidden; isolation:isolate; border-bottom:1px solid #bb8f45; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; z-index:0; user-select:none; -webkit-user-drag:none; }
.hero::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse at 40% 44%, rgba(255,246,216,.78) 0%, rgba(255,242,205,.45) 25%, rgba(255,240,200,.12) 46%, rgba(255,255,255,0) 65%); }
.hero-copy { position:absolute; z-index:2; left:17.5%; top:9%; width:52%; text-align:center; text-shadow:0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(255,244,205,.5); }
.hero h1 { margin:0; font-family:"Playfair Display", Georgia, serif; font-weight:600; color:#304f22; line-height:.94; letter-spacing:-.025em; font-size:clamp(44px,5vw,78px); }
.hero h1 .small { display:block; color:#4a321d; font-size:.58em; line-height:1.1; margin-bottom:2px; }
.hero p { margin:22px auto 0; max-width:690px; font:600 clamp(17px,1.5vw,24px)/1.4 Georgia, "Times New Roman", serif; color:#322315; text-shadow:0 1px 2px rgba(255,250,225,.9); }
.hero-actions { margin-top:24px; display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.hero-actions button { border:1px solid rgba(74,56,25,.35); border-radius:9px; padding:13px 24px; cursor:pointer; font:700 clamp(15px,1.25vw,20px)/1 "Playfair Display", Georgia, serif; box-shadow:0 2px 8px rgba(62,44,20,.18); }
.hero-actions .primary { color:#fffdf3; background:linear-gradient(#6f8537,#536b27); border-color:#546826; }
.hero-actions .secondary { color:#392516; background:linear-gradient(#fff7df,#f3dfb5); border-color:#cfad69; }

@media (max-width:950px) {
  .hero-copy { left:10%; width:64%; top:8%; }
  .hero p { margin-top:12px; }
  .hero-actions { margin-top:14px; }
}
@media (max-width:680px) {
  .hero { min-height:430px; aspect-ratio:auto; }
  .hero-copy { left:7%; right:7%; width:auto; top:7%; }
  .hero h1 { font-size:46px; }
  .hero p { font-size:16px; }
}


/* ENTRY DETAIL VIEW — built from existing data.js only */
.card{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 7px 18px #5a3f1828}
.card:focus{outline:3px solid #879852;outline-offset:3px}
#detailView{display:none;max-width:1536px;margin:auto;background:var(--paper);padding:28px 4% 52px}
body.detail-open main,body.detail-open footer{display:none}
body.detail-open #detailView{display:block}
.detail-shell{max-width:1180px;margin:0 auto;background:#fff8e8;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 28px rgba(58,35,23,.14);overflow:hidden}
.detail-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line);background:#f7ecd3}
.breadcrumb{font-size:14px;line-height:1.4}.breadcrumb a{color:var(--olive)}
.back-btn{border:1px solid #caa763;background:#fff3d2;color:var(--ink);border-radius:999px;padding:9px 15px;font-weight:600;cursor:pointer}
.detail-intro{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(285px,.75fr);gap:24px;padding:24px}
.detail-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.detail-title{margin:0;font-size:clamp(38px,4vw,58px);line-height:1}
.rarity-pill{display:inline-block;border-radius:999px;background:#735080;color:#fff;padding:6px 12px;font-size:13px;font-weight:700}
.detail-region{margin:7px 0 8px;font-family:"Playfair Display",serif;font-size:23px;font-style:italic;color:#59662c}
.detail-description{margin:0 0 18px;font-size:17px;line-height:1.55}
.detail-image-frame{background:#eadab6;border:1px solid var(--line);border-radius:13px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.detail-image-frame img{display:block;max-width:100%;width:auto;height:auto;max-height:610px;object-fit:contain}
.glance{align-self:start;background:#f9efd9;border:1px solid #d7ba78;border-radius:10px;padding:19px 20px;box-shadow:0 4px 12px rgba(58,35,23,.09)}
.glance h2{font-size:26px;margin:0 0 12px}.glance-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.glance-list li{display:grid;grid-template-columns:110px 1fr;gap:8px;font-size:15px}.glance-list b{font-weight:700}
.overview{margin:0 24px 24px;border:1px solid var(--line);border-radius:12px;background:#fffaf0;overflow:hidden}
.overview-tab{font-family:"Playfair Display",serif;font-weight:700;padding:12px 18px;border-bottom:1px solid var(--line);background:#f7ecd3}
.overview-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:22px;padding:20px}
.overview h3,.related h3{margin:0 0 11px;font-size:24px}.entry-facts{margin:0;padding-left:20px;line-height:1.6}.entry-facts.empty{list-style:none;padding:0}
.common-uses{background:#f7e9bd;border:1px solid #e2c98e;border-radius:10px;padding:15px}
.use-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}.use-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;background:#fff7df;border:1px solid #d8bb77;border-radius:999px;font-size:14px}
.related{padding:0 24px 28px}.related-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.related-card{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff7e5;cursor:pointer;text-align:left;padding:0;color:var(--ink)}
.related-card img{display:block;width:100%;height:125px;object-fit:contain;background:#eadab6}.related-card .related-copy{padding:9px}
.related-card strong{font-family:"Playfair Display",serif;font-size:16px;display:block}.related-card span{font-size:12px;color:#69503a}
@media(max-width:900px){.detail-intro{grid-template-columns:1fr}.overview-body{grid-template-columns:1fr}.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){#detailView{padding:12px}.detail-top{align-items:flex-start;flex-direction:column}.detail-intro{padding:17px}.overview{margin:0 17px 17px}.related{padding:0 17px 20px}.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.glance-list li{grid-template-columns:95px 1fr}}


/* FINAL ENTRY PAGE VISUAL PASS */
body{background-color:#d8bd83;background-image:radial-gradient(circle at 18% 12%,rgba(108,72,25,.08) 0 1px,transparent 1.5px),radial-gradient(circle at 72% 58%,rgba(108,72,25,.06) 0 1px,transparent 1.5px),linear-gradient(90deg,rgba(120,82,30,.035) 1px,transparent 1px),linear-gradient(rgba(120,82,30,.025) 1px,transparent 1px);background-size:17px 17px,23px 23px,7px 7px,9px 9px}
body.detail-open>header,body.detail-open>.hero{display:none}
#detailView{background-color:#f2e2bd;background-image:radial-gradient(circle at 14% 19%,rgba(96,61,21,.09) 0 1px,transparent 1.6px),radial-gradient(circle at 82% 63%,rgba(96,61,21,.07) 0 1px,transparent 1.5px),linear-gradient(105deg,rgba(122,83,31,.035),transparent 32%,rgba(122,83,31,.03) 66%,transparent);background-size:19px 19px,27px 27px,100% 100%;min-height:100vh;padding-top:18px}
.detail-shell{background-color:#fbf0d6;background-image:radial-gradient(circle at 12% 22%,rgba(109,72,24,.055) 0 1px,transparent 1.4px),radial-gradient(circle at 79% 47%,rgba(109,72,24,.045) 0 1px,transparent 1.5px);background-size:21px 21px,29px 29px;border-color:#b9914f;box-shadow:0 12px 32px rgba(70,42,13,.2),inset 0 0 45px rgba(148,103,42,.06)}
.detail-intro{grid-template-columns:minmax(0,1.7fr) minmax(285px,.72fr);padding-bottom:14px}
.detail-image-frame{min-height:500px;background:#e7d2a5}
.detail-image-frame img{max-height:690px;max-width:100%;width:auto;height:auto}
.thumb-strip{display:flex;gap:10px;margin-top:10px;overflow-x:auto;padding:2px 2px 7px;scrollbar-width:thin}
.thumb-card{flex:0 0 112px;height:74px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#eadab6;padding:0;cursor:pointer}
.thumb-card img{width:100%;height:100%;object-fit:cover;display:block}
.detail-tabs{margin:0 24px;border:1px solid var(--line);border-radius:11px 11px 0 0;display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;background:#f1dfb8}
.detail-tab{font-family:"Playfair Display",serif;font-weight:700;padding:12px 8px;border:0;border-right:1px solid var(--line);background:#f7ecd3;color:var(--ink);cursor:pointer}
.detail-tab:last-child{border-right:0}.detail-tab.active{background:#fffaf0;box-shadow:inset 0 3px 0 #657531}
.overview{border-radius:0 0 12px 12px;border-top:0}.overview-tab{display:none}.overview-body{display:block;min-height:180px}
.tab-panel{display:none}.tab-panel.active{display:block}.tab-panel h3{margin-top:0}
.nutrition-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.nutrition-item{padding:16px;border:1px solid #dfc486;border-radius:10px;background:#f9edce}.nutrition-item b{display:block;font-family:"Playfair Display",serif;font-size:18px;margin-bottom:5px}
#tabUses .common-uses{max-width:100%;min-height:130px}
#tabFacts .entry-facts{font-size:16px}
@media(max-width:900px){.detail-image-frame{min-height:0}.detail-tabs{grid-template-columns:repeat(2,1fr)}.nutrition-grid{grid-template-columns:1fr}.thumb-card{flex-basis:96px}}
@media(max-width:600px){.detail-tabs{margin:0 17px}.detail-tab{font-size:14px}.thumb-card{flex-basis:84px;height:60px}}


/* ENTRY VISUAL FIX: soft artwork edges + illuminated-manuscript glance icons */
.detail-image-frame{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  padding:0;
}
.detail-image-frame img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:690px;
  object-fit:contain;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.glance-list li{
  display:grid;
  grid-template-columns:24px 98px minmax(0,1fr);
  gap:8px;
  align-items:start;
  font-size:15px;
}
.glance-icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#71813a;
  margin-top:-1px;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.55));
}
.glance-icon svg{
  display:block;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.glance-list li:nth-child(3n+3) .glance-icon{color:#a2762b}
.glance-list li:nth-child(3n+2) .glance-icon{color:#687b38}
.glance-list b{padding-top:1px}
@media(max-width:600px){
  .glance-list li{grid-template-columns:22px 86px minmax(0,1fr);gap:7px}
  .glance-icon{width:18px;height:18px}
  .glance-icon svg{width:17px;height:17px}
}


/* ENTRY TOP-FLOW FIX: browser-safe parchment overlay instead of mask compositing */
.detail-main-column{min-width:0;position:relative}
.detail-description{position:relative;z-index:3;margin-bottom:0}
.detail-image-frame{
  position:relative;
  z-index:1;
  display:block !important;
  min-height:0 !important;
  margin-top:-10px;
  background:transparent !important;
  border:0 !important;
  border-top:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  padding:0 !important;
  isolation:isolate;
}
.detail-image-frame img{
  position:relative;
  z-index:0;
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:690px;
  object-fit:contain;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.detail-image-frame::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:2;
  pointer-events:none;
  /* TOP EDGE ONLY: preserve the verified parchment dissolve.
     Left, right, and bottom stay completely sharp with no fade/glow. */
  background:
    radial-gradient(circle at 12% 22%, rgba(109,72,24,.055) 0 1px, transparent 1.4px),
    radial-gradient(circle at 79% 47%, rgba(109,72,24,.045) 0 1px, transparent 1.5px),
    linear-gradient(to bottom,
      rgba(251,240,214,1) 0%,
      rgba(251,240,214,.97) 4%,
      rgba(251,240,214,.80) 8%,
      rgba(251,240,214,.58) 12%,
      rgba(251,240,214,.38) 16%,
      rgba(251,240,214,.22) 20%,
      rgba(251,240,214,.10) 23%,
      rgba(251,240,214,.035) 25%,
      rgba(251,240,214,0) 28%);
  background-size:21px 21px,29px 29px,100% 100%;
  background-repeat:repeat,repeat,no-repeat;
}
@media(max-width:600px){.detail-image-frame{margin-top:-5px}}



/* ENTRY COMPOSITION FIX: full-width artwork with At-a-Glance floating over it */
@media (min-width:901px){
  .detail-intro{
    position:relative;
    display:block !important;
    padding:24px !important;
  }
  .detail-main-column{
    width:100%;
    min-width:0;
  }
  .detail-main-column > .detail-title-row,
  .detail-main-column > .detail-region,
  .detail-main-column > .detail-description{
    max-width:calc(100% - 360px);
  }
  .detail-description{
    margin-bottom:0;
  }
  .detail-image-frame{
    width:100%;
    margin-top:-8px;
    position:relative;
    z-index:1;
  }
  .detail-image-frame img{
    width:100% !important;
    max-width:100% !important;
    aspect-ratio:16 / 9;
    height:auto !important;
    max-height:none !important;
    object-fit:cover !important;
  }
  .glance{
    position:absolute;
    z-index:7;
    top:24px;
    right:24px;
    width:320px;
    max-width:calc(100% - 48px);
    align-self:auto;
    background:rgba(249,239,217,.97);
    box-shadow:0 8px 22px rgba(58,35,23,.16),0 1px 0 rgba(255,255,255,.6) inset;
    backdrop-filter:blur(1.5px);
  }
  .thumb-strip{
    position:relative;
    z-index:3;
    width:100%;
  }
}
@media (max-width:900px){
  .detail-intro{display:grid !important;grid-template-columns:1fr !important;position:relative}
  .glance{position:static;width:auto;max-width:none}
  .detail-main-column > .detail-title-row,
  .detail-main-column > .detail-region,
  .detail-main-column > .detail-description{max-width:none}
  .detail-image-frame img{width:100% !important;max-width:100% !important;height:auto !important;aspect-ratio:auto;object-fit:contain !important}
}


/* SHARP ARTWORK EDGES: no softening on left/right/bottom */
.detail-image-frame,
.detail-image-frame img{
  box-shadow:none !important;
  filter:none !important;
}
.detail-image-frame img{
  border-radius:0 !important;
}


/* PUBLISH READINESS: accessibility + touch targets */
nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 4px}
.filters button,.hero-actions button,.back-btn,.detail-tab,.thumb-card,.related-card{min-height:44px}
button:focus-visible,a:focus-visible,.card:focus-visible{outline:3px solid #657531;outline-offset:3px}
.footer-links{margin-top:9px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:14px}
.footer-links a{color:var(--ink);text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
@media(max-width:700px){nav{gap:8px 14px}.filters button{padding:11px 16px}.back-btn{padding:11px 16px}.detail-tab{padding:13px 8px}}

/* SEO route integration: the approved visual design is preserved while each
   entry now lives at its own crawlable URL. */
html{scroll-behavior:smooth}
body{min-height:100vh}
a{color:inherit}
button,input{font:inherit}
.site-link{color:inherit;text-decoration:none}
.card-link{display:block;color:inherit;text-decoration:none}
.filters button.active{background:var(--olive);color:#fff;border-color:var(--olive)}
.empty-results{grid-column:1/-1;text-align:center;padding:42px 18px;border:1px dashed var(--line);border-radius:14px;background:#fff8e8}
.entry-page #detailView{display:block}
.entry-page .related-card{display:block;text-decoration:none}
.entry-page .thumb-card{display:block}
.entry-page .detail-top a{color:var(--olive);text-underline-offset:3px}
.detail-tab-panel{display:none}
.detail-tab-panel.active{display:block}
.detail-tab-panel h3{margin-top:0}
.glance-value{min-width:0;overflow-wrap:anywhere}
.page-shell{max-width:1050px;margin:32px auto;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:34px;box-shadow:0 10px 28px #3a231722}
.page-shell h1{font-size:clamp(38px,6vw,62px);margin:0 0 16px}
.page-shell h2{margin-top:30px}
.page-shell p,.page-shell li{line-height:1.7}
.page-shell .back-btn{display:inline-flex;align-items:center;text-decoration:none;margin-top:18px}
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:26px 0}
.about-card{background:#fff8e8;border:1px solid var(--line);border-radius:12px;padding:20px}
.about-card h2{margin-top:0}
.method-note{padding:18px;border-left:4px solid var(--olive);background:#fff8e8}
.site-footer-note{line-height:1.55}
@media(max-width:700px){.about-grid{grid-template-columns:1fr}.page-shell{margin:12px;padding:22px}}