@layer presentation {
  :root {
    --safe-edge:clamp(12px,2vw,36px);
    --workspace-gap:clamp(10px,1.3vw,20px);
    --section-size:clamp(1.35rem,2.4vw,1.95rem);
  }
  .safe-edge {padding-inline:var(--safe-edge)}
  .site-header .header-row {width:100%;padding-inline:var(--safe-edge)}
  .page-presentation {width:100%;min-width:0}
  .page-workspace {padding-block:var(--workspace-gap) clamp(30px,4vw,70px)}
  .page-columns {
    display:grid;
    grid-template-areas:"main";
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:var(--workspace-gap)
  }
  .page-main {grid-area:main;min-width:0}
  .page-rail {min-width:0;overflow-wrap:anywhere}
  .page-left {grid-area:left}
  .page-right {grid-area:right}
  .page-workspace h2,.page-rail h2 {font-size:var(--section-size)}
  .page-rail h2 {font-size:1.22rem}
  .page-main > .reference-section:first-child {margin-top:0}
  .rail-links {list-style:none;margin:0;padding:0;font-size:.88rem}
  .rail-links a {display:block;padding-block:6px;text-underline-offset:3px}
  .rail-links li+li {border-top:1px solid var(--line)}
  .page-presentation .workbench-heading {margin:0;padding-block:18px 7px}
  .page-presentation .workbench-heading h1 {font-size:clamp(2rem,4vw,3.6rem)}
  .page-presentation .learning-banner {margin:0;border-radius:0}
  .page-presentation:has(.learning-banner) > .safe-edge {padding-inline:0}
  .species-stage {padding-block:var(--workspace-gap)}
  .species-stage h1 {font-size:clamp(2.55rem,5vw,4.8rem)}
  .profile-masthead {grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(220px,.64fr);align-items:start}
  .authority-help {font-size:.83rem;color:var(--muted);margin:4px 0 9px}
  .authority-help p {margin-block:4px;max-width:44ch}
  .hero.discovery-hero {border-radius:0;box-shadow:none;min-height:clamp(355px,36vw,540px);background:var(--canopy)}
  .discovery-hero .hero-photo {width:100%;object-position:center 42%;opacity:1}
  .discovery-hero::after {background:linear-gradient(90deg,#071912f5 2%,#071912e8 25%,#0719128c 52%,#07191222 76%),linear-gradient(0deg,#071912a0,transparent 31%)}
  .discovery-hero .hero-copy {padding:clamp(35px,6vw,96px) max(var(--safe-edge),4vw) 82px}
  .hero-credit {right:var(--safe-edge);max-width:calc(100% - 2 * var(--safe-edge));line-height:1.45;text-align:right;overflow-wrap:anywhere}
  .hero-credit div:first-child {font-weight:650}
  .hero-index {right:var(--safe-edge)}
  [data-gallery-stage] {touch-action:pan-y}
  dialog.gallery-dialog-full,dialog:fullscreen {width:100%;height:100%;max-width:none;max-height:none;border-radius:0}
  dialog.gallery-dialog-full img,dialog:fullscreen img {max-height:calc(100dvh - 128px)}
  .comparison-stage {
    position:relative;
    display:grid;
    isolation:isolate;
    grid-template-columns:repeat(2,minmax(0,1fr));
    min-height:260px;
    background:#142420;
    color:white
  }
  .comparison-stage h1 {
    position:absolute;z-index:3;inset:10px auto auto 50%;transform:translateX(-50%);
    white-space:nowrap;background:#131313e8;color:white;
    margin:0;padding:6px 12px;border-radius:30px;font:650 .9rem/1.2 var(--ui)
  }
  .comparison-image {position:relative;isolation:isolate;display:grid;align-items:end;height:clamp(260px,36vw,560px);overflow:hidden}
  .comparison-image + .comparison-image {border-inline-start:1px solid #ffffff65}
  .comparison-image > a {position:absolute;inset:0}
  .comparison-image img {width:100%;height:100%;object-fit:cover;object-position:center 42%}
  .comparison-image .gallery-expand {top:13px;right:14px;background:#171717e6}
  .comparison-left .gallery-expand {left:14px;right:auto}
  .comparison-image figcaption {
    pointer-events:none;position:relative;z-index:2;
    padding:32px max(var(--safe-edge),2.5vw) 13px;
    background:linear-gradient(0deg,#101010 0%,#101010ec 57%,#10101000 100%);color:#fff
  }
  .comparison-image figcaption h2 {text-wrap:wrap;font-size:clamp(1.35rem,4.8vw,4rem);margin:0}
  .comparison-image figcaption a {pointer-events:auto;text-decoration:none}
  .comparison-image figcaption a:hover {text-decoration:underline}
  .comparison-image figcaption p {font-size:clamp(.82rem,1.5vw,1.3rem);margin-top:3px}
  .comparison-right figcaption {text-align:right}
  .comparison-stage .comparison-vs {z-index:3;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:clamp(43px,5.5vw,78px);height:clamp(43px,5.5vw,78px);border:2px solid white;background:#242424;color:white;font-size:clamp(.9rem,1.8vw,1.45rem);pointer-events:none}
  .compare-no-image {position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;color:var(--canopy-muted);background:radial-gradient(ellipse,#25463b,#102821);font-size:.85rem}
  .comparison-control-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--workspace-gap)}
  .comparison-controls {min-width:0;display:grid;grid-template-rows:1fr auto;gap:7px}
  .comparison-controls .gallery-filmstrip {margin:0}
  .comparison-controls .gallery-filmstrip button {flex-basis:min(26%,112px)}
  .comparison-selection {display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .comparison-selection label {display:grid;gap:4px;min-width:0;font-size:.84rem}
  .comparison-selection input,.comparison-selection select {width:100%;min-width:0;min-height:42px}
  .comparison-details {display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.37fr);gap:var(--workspace-gap);margin-top:var(--workspace-gap);align-items:start}
  .comparison-details .ancestry-panel {position:static}
  .comparison-sources {grid-column:1/-1}
  .comparison-facts table {table-layout:fixed}
  .comparison-facts th,.comparison-facts td {overflow-wrap:anywhere}
  .discovery-search {padding-block:20px 8px}
  .discovery-search .input-row {flex-wrap:nowrap}
  .discovery-search input {max-width:52rem}
  .discovery-results .search-cards {grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--workspace-gap)}
  .search-cards .card-visual {aspect-ratio:1.17}
  .search-cards .card-copy {overflow-wrap:break-word}
  .search-cards .card-copy h3 {font-size:clamp(1.18rem,1.7vw,1.62rem);text-wrap:wrap}
  .search-cards .card-copy .eyebrow {letter-spacing:.07em}
  .site-header .search-menu .popover {
    position:fixed;top:61px;right:var(--safe-edge);width:min(440px,calc(100vw - 2 * var(--safe-edge)));
    z-index:12;max-height:calc(100dvh - 72px);overflow:auto
  }
  .site-header .suggestions {max-height:min(50dvh,290px);overflow:auto}
  @media(min-width:1100px) {
    .page-columns:has(> .page-left):has(> .page-right) {
      grid-template-areas:"left main right";
      grid-template-columns:minmax(155px,15fr) minmax(0,70fr) minmax(155px,15fr)
    }
    .page-columns:has(> .page-left):not(:has(> .page-right)) {grid-template-areas:"left main";grid-template-columns:minmax(160px,15fr) minmax(0,85fr)}
    .page-columns:has(> .page-right):not(:has(> .page-left)) {grid-template-areas:"main right";grid-template-columns:minmax(0,85fr) minmax(160px,15fr)}
    .page-left:has(.editor-nav) {position:sticky;top:76px}
  }
  @media(min-width:1650px) {
    .discovery-results .search-cards {grid-template-columns:repeat(4,minmax(0,1fr))}
  }
  @media(max-width:1120px) {
    .profile-masthead {grid-template-columns:repeat(2,minmax(0,1fr))}
    .profile-masthead .lineage-panel {grid-column:1/-1}
    .page-workspace .editor-rail {position:static}
  }
  @media(max-width:1099px) {
    .page-columns:has(> .page-left):has(> .page-right) {grid-template-areas:"main main" "left right";grid-template-columns:repeat(2,minmax(0,1fr))}
    .page-columns:has(> .page-left):not(:has(> .page-right)) {grid-template-areas:"main" "left"}
    .page-columns:has(> .page-right):not(:has(> .page-left)) {grid-template-areas:"main" "right"}
    .page-columns:has(.discovery-results):has(> .page-left):has(> .page-right) {grid-template-areas:"left right" "main main"}
  }
  @media(max-width:800px) {
    .comparison-details {grid-template-columns:1fr}
    .discovery-results .search-cards {grid-template-columns:repeat(2,minmax(0,1fr))}
    .comparison-selection {grid-template-columns:1fr}
  }
  @media(max-width:670px) {
    .page-columns:has(> .page-left):has(> .page-right) {grid-template-areas:"main" "left" "right";grid-template-columns:minmax(0,1fr)}
    .page-columns:has(.discovery-results):has(> .page-left):has(> .page-right) {grid-template-areas:"left" "main" "right"}
    .profile-masthead {grid-template-columns:minmax(0,1fr)}
    .profile-intro {grid-row:1}
    .hero.discovery-hero {min-height:420px}
    .discovery-hero .hero-copy {padding:30px var(--safe-edge) 122px}
    .discovery-hero .hero-photo {object-position:60% 38%}
    .discovery-hero::after {background:linear-gradient(90deg,#071912e8,#07191291 70%,#07191264),linear-gradient(0deg,#071912ab,transparent 40%)}
    .hero-index {left:var(--safe-edge);right:auto;bottom:62px}
    .hero-credit {bottom:9px;right:var(--safe-edge)}
    .comparison-image figcaption {padding-inline:9px;padding-bottom:8px}
    .comparison-image .gallery-expand {right:6px;top:39px;width:29px;height:29px}
    .comparison-left .gallery-expand {left:6px;right:auto}
    .comparison-image img {object-position:center}
    .comparison-selection select,.comparison-selection input {padding-inline:5px;font-size:.8rem}
  }
  @media(max-width:360px) {
    .discovery-results .search-cards {grid-template-columns:1fr}
  }
  @media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {scroll-behavior:auto!important}
  }
}
