/*
  Subsidiary-page styles from the "Editorial Field Guide" design - loaded by Views/Shared/_Layout.cshtml
  and _SpeciesLayout.cshtml (not the home page). .gp-* = general-page title band, .pb-* = species photo hero.
  Theme tokens (--green-*, --line, --ink-soft) are in tokens.css; nav/footer styles are in chrome.css.
*/
/* General pages (used by _Layout.cshtml) */
.gp-band{background:var(--green-700);color:#fff}
.gp-band-in{padding:clamp(24px,3.5vw,42px) 0 clamp(22px,3vw,36px)}
.gp-crumb{font-size:large;font-weight:bold;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:14px}
.gp-crumb a{color:inherit}
.gp-crumb a:hover{color:#fff}
.gp-kicker{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--green-300)}
.gp-title{font-family:'Newsreader',serif;font-size:clamp(32px,4.5vw,52px);line-height:1.02;margin:8px 0 0}
.gp-title em{font-style:italic}
.gp-sub{margin-top:12px;font-size:clamp(15px,2vw,17px);color:rgba(255,255,255,.85);max-width:560px}
.gp-strip{background:var(--green-900);color:#fff;font-size:13px}
.gp-strip .in{display:flex;flex-wrap:wrap;gap:8px 26px;padding:11px 0}
.gp-strip a{color:rgba(255,255,255,.8);letter-spacing:.06em}
.gp-strip a:hover,.gp-strip a.on{color:#fff;border-bottom:1.5px solid var(--green-300)}
.gp-body{font-size:16.5px;line-height:1.7;color:#33362c}
.gp-body p:first-child:first-letter{float:left;font-family:'Newsreader',serif;font-size:56px;line-height:.8;padding:6px 10px 0 0}
.gp-h{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--green-700);font-weight:600;margin:34px 0 12px}
.gp-h:first-child{margin-top:0}
.gp-side{background:#fff;border:1px solid var(--line);border-radius:5px;padding:22px 24px}
.gp-side .h{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px;font-weight:600}
.gp-side a{display:block;font-size:15px;padding:7px 0;border-bottom:1px solid var(--line)}
.gp-side a:last-child{border-bottom:0}
.gp-side a:hover{color:var(--green-700)}
/* Species detail pages (used by _LayoutSpecies.cshtml) */
.pb-hero{position:relative}
.pb-hero img{height:clamp(320px,42vw,480px)}
/* Scrims only behind the text, so the middle of the photo keeps its full colour: one fading down from the top under
   the breadcrumb, one fading up from the bottom under the title block. They are the backgrounds of those two boxes, so
   each band grows with its text (a title that wraps gets a taller band). --pb-scrim is the darkest opacity of each. */
.pb-hero{--pb-scrim-top:.55;--pb-scrim-bottom:.78}
.pb-hero:not(.pb-hero--nophoto) .pb-crumb{padding-bottom:30px;background:linear-gradient(180deg,rgba(18,24,18,var(--pb-scrim-top)),rgba(18,24,18,calc(var(--pb-scrim-top)*.55)) 55%,rgba(18,24,18,0))}
.pb-hero:not(.pb-hero--nophoto) .pb-hero-cap{padding-top:64px;background:linear-gradient(180deg,rgba(18,24,18,0),rgba(18,24,18,calc(var(--pb-scrim-bottom)*.6)) 45%,rgba(18,24,18,var(--pb-scrim-bottom)))}
/* Magnifier button over the hero (ViewData HeroZoomIndex): lower-right, above the gradient and caption. */
.pb-hero-zoom{position:absolute;right:clamp(16px,4vw,56px);bottom:clamp(22px,3vw,40px);z-index:2;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(18,24,18,.45);color:#fff;backdrop-filter:blur(4px);cursor:pointer;transition:background .15s,border-color .15s}
.pb-hero-zoom:hover,.pb-hero-zoom:focus-visible{background:rgba(18,24,18,.75);border-color:#fff}
.pb-hero-zoom svg{width:18px;height:18px}
.pb-hero:has(.pb-hero-zoom) .pb-hero-cap{padding-right:calc(clamp(16px,4vw,56px) + 56px)}
.pb-hero-cap{position:absolute;left:0;right:0;bottom:0;color:#fff;padding:0 clamp(16px,4vw,56px) clamp(22px,3vw,40px)}
.pb-kicker{font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;opacity:.9;text-shadow:2px 2px 4px rgba(0,0,0,.5)}
.pb-title{font-family:'Newsreader',serif;font-style:italic;font-size:clamp(38px,5.5vw,50px);line-height:1;margin:10px 0 0;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.pb-common{font-family:'Newsreader',serif;font-size:clamp(19px,2.5vw,25px);color:rgba(255,255,255,.85);margin-top:6px}
.pb-crumb{position:absolute;top:0;left:0;right:0;color:rgba(255,255,255,.85);font-size:large;font-weight:bold;letter-spacing:.14em;text-transform:uppercase;padding:16px clamp(16px,4vw,56px);text-shadow:1px 1px 3px rgba(0,0,0,.5)}
.pb-crumb a{color:inherit}
.pb-crumb a:hover{color:#fff}
.pb-strip{background:var(--green-700);color:#fff}
.pb-strip .col{padding:18px 8px;text-align:center}
.pb-strip .col+.col{border-left:1px solid rgba(255,255,255,.18)}
.pb-strip .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.pb-strip .v{font-family:'Newsreader',serif;font-size:19px;margin-top:3px}
.pb-body{font-size:16.5px;line-height:1.7;color:#33362c}
.pb-body p:first-child:first-letter{float:left;font-family:'Newsreader',serif;font-size:56px;line-height:.8;padding:6px 10px 0 0}
.pb-h{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--green-700);font-weight:600;margin:34px 0 12px}
.pb-h:first-child{margin-top:0}
.pb-side{background:#fff;border:1px solid var(--line);border-radius:5px;padding:22px 24px}
.pb-side .row{border-bottom:1px solid var(--line);margin:0}
.pb-side .row:last-child{border-bottom:0}
.pb-side .row>div{padding:9px 0}
.pb-side .k{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.pb-side .v{font-family:'Newsreader',serif;font-size:16.5px}
/* Species detail body (Views/Species/Detail.cshtml): name block, fact list, description, notes. */
.pb-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 16px}
.pb-name-sci{font-family:'Newsreader',serif;font-weight:400;font-size:clamp(26px,3vw,34px);line-height:1.1;margin:0;color:var(--ink)}
.pb-name-sep{align-self:center;width:1px;height:28px;background:var(--green-300)}
.pb-name-common{font-family:'Newsreader',serif;font-size:clamp(20px,2.2vw,25px);line-height:1.1;color:var(--ink-soft);margin:0}
.pb-facts{display:flex;flex-wrap:wrap;gap:8px 44px;margin:0 0 30px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pb-facts>div{display:flex;align-items:baseline;gap:14px}
.pb-facts dt{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.pb-facts dd{margin:0;font-family:'Newsreader',serif;font-size:18.5px}
/* Description spans three of the four photo-grid columns below it (row-cols-xl-4, g-4 gutters: 75% of the row less a quarter gutter); full width on phones. */
.pb-desc{max-width:calc(75% - .375rem);margin:0 0 36px}
@media (max-width:575.98px){.pb-desc{max-width:none}}
.pb-desc::first-letter{float:left;font-family:'Newsreader',serif;font-size:60px;line-height:.82;padding:6px 10px 0 0;color:var(--green-700)}
.pb-desc strong{font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-700)}
/* Spacer that Services/DescriptionHtml inserts before each <strong> label so it starts a new line; --pb-desc-gap is the space above the label. */
.pb-desc{--pb-desc-gap:14px}
.pb-desc-break{display:block;height:var(--pb-desc-gap)}
.pb-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),max-content));gap:26px 48px;align-items:start;margin:0 0 36px}
.pb-note-body{max-width:60ch}
.pb-comments{margin-bottom:36px}
@media (max-width:575.98px){.pb-name-sep{display:none}}
.pb-gallery img{height:150px;border-radius:4px;border:1px solid var(--line)}
.pb-gallery figcaption{font-size:12.5px;color:var(--ink-soft);margin-top:7px}