/* Ocean Stories: the list (/stories/) and each article (/stories/<slug>). Same palette and fonts as the homepage. */
:root{
  --primary:#2FA4C7;
  --primary-rgb:47,164,199;
  /* Deep navy, not black: the tone of the homepage's background photos. */
  --bg:#020b1c;
  --card:#0b1d33;
  --text:#ffffff;
  --muted:rgba(255,255,255,0.62);
  --faint:rgba(255,255,255,0.38);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg);overflow-x:clip;}
/* Bilingual blocks (see i18n.js). */
html[data-site-lang="en"] .zh-only,html[data-site-lang="zh"] .en-only{display:none!important;}
/* The homepage's two backgrounds: jellyfish at the top (its pricing section), the reef at the foot (its contact section). */
/* Between them the page fades from the jellyfish photo's bottom edge (#000007) to the reef photo's top edge (#001028),
   so neither photo shows a seam. The photos are 1720x914 and 1942x809 at the page's full width. */
body{color:var(--text);font-family:'Inter','PingFang TC','Noto Sans TC',sans-serif;min-height:100vh;
  /* Top to bottom of the stack: a fade over the jellyfish photo's foot, a fade over the reef photo's head, the two
     photos, then the page colour. */
  --jelly:53.1vw;--reef:41.7vw;--fade:16vw;
  background:
    linear-gradient(180deg,rgba(0,0,7,0),#000007) center calc(var(--jelly) - var(--fade)) / 100% var(--fade) no-repeat,
    linear-gradient(180deg,#001028,rgba(0,16,40,0)) left 0 bottom calc(var(--reef) - var(--fade)) / 100% var(--fade) no-repeat,
    url('/joinwaitlist-background.png') center bottom / 100% auto no-repeat,
    url('/plan-background.png') center top / 100% auto no-repeat,
    linear-gradient(180deg,#000007 0,#000007 var(--jelly),#001028 calc(100% - var(--reef)),#001028 100%);}
@media (max-width:640px){body{--jelly:116.8vw;--reef:91.7vw;--fade:30vw;
  background-size:100% var(--fade),100% var(--fade),220% auto,220% auto,auto;}}
a{color:inherit;}
::selection{background:rgba(var(--primary-rgb),0.35);}

/* Header: logo home and the two site links on the left; the store badges on the right (a single Download button
   on phones, which opens the homepage's store chooser). */
.st-stores{display:flex;align-items:center;gap:10px;}
.st-header .st-badge img{display:block;height:36px;width:auto;}
.st-badge:hover{opacity:.85;}
.st-download{display:none;height:34px;padding:0 16px;border-radius:17px;background:var(--primary);color:#fff;font-weight:700;font-size:13px;align-items:center;text-decoration:none;white-space:nowrap;}
@media (max-width:760px){.st-badge{display:none;}.st-download{display:inline-flex;}}
.st-header{position:sticky;top:0;z-index:10;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:rgba(0,0,7,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(var(--primary-rgb),0.12);}
.st-header img{display:block;height:16px;width:auto;}
.st-nav{display:flex;gap:18px;}
.st-nav a{font-weight:600;font-size:13px;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.4);text-underline-offset:3px;white-space:nowrap;}
.st-nav a:hover{text-decoration-color:rgba(255,255,255,0.9);}
.st-nav a[aria-current]{text-decoration-color:var(--primary);}

.st-main{max-width:720px;margin:0 auto;padding:56px 20px 80px;}
.st-eyebrow{font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);}
.st-title{font-family:'Manrope','PingFang TC','Noto Sans TC',sans-serif;font-weight:800;font-size:40px;line-height:1.2;margin-top:10px;}
.st-sub{color:var(--muted);font-size:16px;line-height:1.7;margin-top:12px;}

/* The list (2026-10-29 redesign): a masthead, the newest story as a large cover card, the rest in a grid below. */
.sl-head{position:relative;isolation:isolate;padding:84px 32px 40px;max-width:1120px;margin:0 auto;}
.sl-kicker{font-family:'Manrope',sans-serif;font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--primary);text-transform:uppercase;}
.sl-title{font-family:'Noto Serif TC','Songti TC',serif;font-weight:900;font-size:clamp(44px,7vw,84px);line-height:1.08;margin-top:14px;}
.sl-sub{color:var(--muted);font-size:clamp(16px,1.5vw,18px);line-height:1.7;margin-top:16px;max-width:30em;}
.sl-main{max-width:1120px;margin:0 auto;padding:0 32px 240px;}

.sl-feature{position:relative;display:block;height:clamp(380px,52vw,560px);border-radius:28px;overflow:hidden;text-decoration:none;isolation:isolate;border:1px solid rgba(var(--primary-rgb),.18);}
.sl-feature-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;transition:transform 1.2s ease;z-index:-2;}
.sl-feature:hover .sl-feature-bg{transform:scale(1.04);}
.sl-feature::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,8,16,.92) 0%,rgba(3,8,16,.6) 42%,rgba(3,8,16,0) 75%);}
.sl-feature-creature{position:absolute;right:30%;bottom:16%;width:min(26vw,300px);height:auto;filter:drop-shadow(0 20px 36px rgba(0,0,0,.45));transition:transform .8s ease;z-index:-1;}
.sl-feature:hover .sl-feature-creature{transform:translate(-8px,-6px) rotate(-2deg);}
.sl-feature-text{position:absolute;left:0;top:0;bottom:0;width:min(520px,56%);padding:44px;display:flex;flex-direction:column;justify-content:flex-end;}
.sl-badge{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.12em;color:#03131c;background:var(--primary);border-radius:999px;padding:5px 12px;}
.sl-meta{font-size:13px;color:rgba(255,255,255,.62);margin-top:16px;letter-spacing:.04em;}
.sl-feature-title{font-family:'Noto Serif TC','Songti TC',serif;font-weight:900;font-size:clamp(28px,3.6vw,44px);line-height:1.25;margin-top:10px;color:#fff;}
.sl-feature-dek{font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.78);margin-top:12px;}
.sl-more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:700;font-size:14px;color:#fff;}
.sl-more::after{content:'→';transition:transform .25s ease;}
.sl-feature:hover .sl-more::after,.sl-card:hover .sl-more::after{transform:translateX(4px);}

.sl-section{display:flex;align-items:center;gap:14px;margin:64px 0 22px;font-family:'Manrope',sans-serif;font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--faint);text-transform:uppercase;}
.sl-section::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1);}
.sl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.sl-card{display:block;text-decoration:none;border-radius:22px;overflow:hidden;background:var(--card);border:1px solid rgba(255,255,255,.07);transition:transform .3s ease,border-color .3s ease;}
.sl-card:hover{transform:translateY(-4px);border-color:rgba(var(--primary-rgb),.4);}
.sl-card .st-cover{aspect-ratio:4/3;}
.sl-card-body{padding:18px 20px 22px;}
.sl-card-title{font-family:'Noto Serif TC','Songti TC',serif;font-weight:900;font-size:20px;line-height:1.4;color:#fff;margin-top:6px;}
.sl-card .sl-meta{margin-top:0;}
.sl-soon{border-radius:22px;border:1px dashed rgba(255,255,255,.14);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:26px;min-height:240px;color:var(--faint);font-size:14px;line-height:1.7;}
.sl-soon b{font-family:'Noto Serif TC','Songti TC',serif;font-size:19px;color:rgba(255,255,255,.7);font-weight:900;margin-bottom:6px;}

@media (max-width:900px){.sl-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){
  .sl-head{padding:52px 18px 28px;}
  .sl-main{padding:0 16px 64px;}
  .sl-feature{height:auto;min-height:520px;border-radius:22px;}
  .sl-feature::after{background:linear-gradient(180deg,rgba(3,8,16,0) 20%,rgba(3,8,16,.7) 55%,rgba(3,8,16,.95) 100%);}
  .sl-feature-creature{right:auto!important;left:8%;top:12%;bottom:auto!important;width:50vw!important;}
  .sl-feature-creature+.sl-feature-creature{display:none;}
  .sl-feature-text{position:relative;width:auto;min-height:520px;padding:26px 22px;}
  .sl-grid{grid-template-columns:1fr;}
}

/* A cover: a background image with an optional creature on top. */
.st-cover{position:relative;background-size:cover;background-position:center;}
.st-cover img{position:absolute;left:8%;bottom:6%;width:46%;height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));}

/* An article (2026-10-29 redesign): a full-bleed cover with the title over its foot, then a narrow editorial column —
   serif headings, a larger lead, numbered sections, a fact card, side-by-side cards, a pull quote and a tip box. */
.ar-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--primary);z-index:20;}
.ar-hero{position:relative;height:min(78vh,720px);min-height:460px;overflow:hidden;background:#06101d;}
.ar-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;transform:scale(1.04);}
.ar-hero-creature{position:absolute;left:9%;bottom:36%;width:min(34vw,380px);height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));animation:ar-float 7s ease-in-out infinite;}
@keyframes ar-float{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-12px) rotate(1deg);}}
.ar-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,7,0) 35%,rgba(0,0,7,.55) 68%,#000007 100%);}
.ar-hero-text{position:absolute;left:0;right:0;bottom:0;z-index:1;max-width:1040px;margin:0 auto;padding:0 32px 44px;}
.ar-kicker{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.75);}
.ar-kicker b{color:var(--primary);font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.ar-kicker i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45);}
.ar-title{font-family:'Noto Serif TC','Songti TC',serif;font-weight:900;font-size:clamp(36px,6vw,68px);line-height:1.18;letter-spacing:.01em;margin-top:14px;max-width:16em;text-shadow:0 2px 30px rgba(0,0,0,.35);}
.ar-dek{font-size:clamp(16px,1.6vw,19px);line-height:1.75;color:rgba(255,255,255,.78);margin-top:16px;max-width:36em;}

.ar-wrap{max-width:680px;margin:0 auto;padding:12px 20px 220px;}
.ar-back{display:inline-block;color:var(--muted);font-size:14px;text-decoration:none;margin:10px 0 30px;}
.ar-back:hover{color:#fff;}
.ar-body{font-size:17.5px;line-height:1.95;color:rgba(255,255,255,.84);letter-spacing:.01em;}
.ar-body p{margin:18px 0;}
.ar-lead{font-size:21px;line-height:1.85;color:#fff;font-weight:400;}
.ar-lead::first-letter{font-family:'Noto Serif TC',serif;font-weight:900;font-size:3.1em;float:left;line-height:1;margin:.06em .12em 0 0;color:var(--primary);}
.ar-body strong{color:#fff;font-weight:700;}
.ar-body em{font-style:italic;color:#fff;}

.ar-section{margin-top:64px;}
.ar-num{font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;letter-spacing:.2em;color:var(--primary);display:flex;align-items:center;gap:12px;}
.ar-num::after{content:'';height:1px;width:48px;background:rgba(var(--primary-rgb),.5);}
.ar-section h2{font-family:'Noto Serif TC','Songti TC',serif;font-weight:900;font-size:clamp(26px,3.4vw,32px);line-height:1.35;color:#fff;margin:12px 0 6px;}

/* 小檔案: label / value pairs in a two-column card. */
.ar-facts{margin:40px 0 8px;border-radius:22px;padding:24px 26px;background:linear-gradient(160deg,#0f2236,#0a1626);border:1px solid rgba(var(--primary-rgb),.18);}
.ar-facts-title{font-family:'Manrope',sans-serif;font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--primary);}
.ar-facts dl{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin-top:16px;}
.ar-facts dt{font-size:12px;color:var(--faint);letter-spacing:.06em;}
.ar-facts dd{font-size:16px;font-weight:600;color:#fff;margin-top:4px;line-height:1.5;}
.ar-facts dd em{font-weight:500;}

/* Two cards side by side (共生: what each side gets). */
.ar-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0;}
.ar-pair div{border-radius:18px;padding:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:15.5px;line-height:1.75;color:var(--muted);}
.ar-pair b{display:block;font-family:'Noto Serif TC',serif;font-weight:900;font-size:19px;color:#fff;margin-bottom:8px;}
.ar-pair span{display:inline-block;font-size:22px;margin-bottom:6px;}

.ar-quote{margin:40px 0;padding:6px 0 6px 26px;border-left:3px solid var(--primary);font-family:'Noto Serif TC','Songti TC',serif;font-weight:700;font-size:clamp(22px,3vw,27px);line-height:1.6;color:#fff;}

.ar-tip{display:flex;gap:16px;margin:56px 0 0;padding:22px 24px;border-radius:20px;background:rgba(var(--primary-rgb),.1);border:1px solid rgba(var(--primary-rgb),.28);}
.ar-tip svg{flex:none;margin-top:3px;color:var(--primary);}
.ar-tip-title{font-weight:700;color:#fff;font-size:16px;}
.ar-tip p{margin:6px 0 0;font-size:15.5px;line-height:1.8;color:rgba(255,255,255,.82);}

/* Sections ease in as they scroll into view (not with reduced motion). */
.ar-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.ar-reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.ar-reveal{opacity:1;transform:none;transition:none;}.ar-hero-creature{animation:none;}}

/* The field guide's cover: a full-bleed photo, darkened on the left and faded into the page at the foot, with the
   title over its lower left. The subject sits centre-right, which object-position keeps in view on phones. */
.fg-cover{position:relative;height:min(84vh,780px);min-height:500px;overflow:hidden;}
.fg-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 42%;}
.fg-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,4,16,.78) 0%,rgba(0,4,16,.45) 38%,rgba(0,4,16,0) 62%),linear-gradient(180deg,rgba(0,0,7,0) 55%,rgba(0,0,7,.6) 80%,#000007 100%);}
.fg-cover-text{position:absolute;left:0;right:0;bottom:0;z-index:1;max-width:1180px;margin:0 auto;padding:0 32px 56px;}
.fg-cover-text>*{max-width:600px;}
.fg-cover .ar-title{font-size:clamp(34px,4.2vw,56px);text-shadow:0 2px 24px rgba(0,0,0,.45);}
.fg-cover .ar-dek{text-shadow:0 1px 12px rgba(0,0,0,.5);}
@media (max-width:760px){
  .fg-cover{height:min(86vh,720px);min-height:560px;}
  .fg-cover-img{object-position:50% 30%;}
  .fg-cover::after{background:linear-gradient(180deg,rgba(0,0,7,0) 30%,rgba(0,0,7,.72) 62%,#000007 100%);}
  .fg-cover-text{padding:0 18px 34px;}
}

/* A field guide (海洋常見生物 100): a collage hero, a stats strip, look-alike pairs, a group index, then species
   cards by group. The illustrations are transparent cut-outs, lit from behind by a soft glow on each card. */
.fg-hero{position:relative;max-width:1180px;margin:0 auto;padding:72px 32px 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;}
.fg-hero .ar-title{max-width:none;font-size:clamp(34px,4.2vw,54px);}
.fg-collage{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:end;}
.fg-collage::before{content:'';position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(var(--primary-rgb),.32),rgba(var(--primary-rgb),.06) 55%,transparent 70%);}
.fg-collage img{position:absolute;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));animation:ar-float 8s ease-in-out infinite;}
.fg-collage img:nth-child(1){width:78%;left:4%;top:22%;}
.fg-collage img:nth-child(2){width:38%;right:-2%;top:2%;animation-delay:-2.5s;}
.fg-collage img:nth-child(3){width:34%;left:0;bottom:4%;animation-delay:-5s;}
.fg-cta{display:inline-flex;align-items:center;gap:8px;margin-top:26px;background:var(--primary);color:#fff;font-weight:700;font-size:15px;padding:12px 22px;border-radius:999px;text-decoration:none;}
.fg-cta:hover{filter:brightness(1.08);}

.fg-stats{max-width:1180px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);}
.fg-stats div{padding:22px 18px;display:flex;align-items:baseline;gap:12px;}
.fg-stats div+div{border-left:1px solid rgba(255,255,255,.08);}
.fg-stats b{font-family:'Noto Serif TC',serif;font-weight:900;font-size:40px;color:#fff;line-height:1;}
.fg-stats span{font-size:13px;line-height:1.5;color:var(--muted);}

.fg-wide{max-width:1180px;margin:0 auto;padding:0 32px;}
.fg-heading{margin:96px 0 28px;}
.fg-heading h2{font-family:'Noto Serif TC','Songti TC',serif;font-weight:900;font-size:clamp(30px,4vw,44px);line-height:1.25;margin-top:12px;}
.fg-heading p{color:var(--muted);font-size:16px;line-height:1.7;margin-top:10px;max-width:36em;}

/* Look-alike pairs. */
.fg-pairs{display:grid;gap:22px;}
.fg-pair{border-radius:26px;padding:28px;background:linear-gradient(160deg,#0d2238,#081525);border:1px solid rgba(var(--primary-rgb),.16);}
.fg-pair h3{font-family:'Noto Serif TC',serif;font-weight:900;font-size:22px;line-height:1.4;display:flex;gap:14px;align-items:baseline;}
.fg-pair h3 span{font-family:'Manrope',sans-serif;font-size:13px;letter-spacing:.2em;color:var(--primary);}
.fg-pair-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px;}
.fg-pair-cols article{border-radius:20px;padding:18px 20px 20px;background:rgba(255,255,255,.035);}
.fg-pair-cols img{display:block;width:72%;max-width:260px;height:auto;margin:0 auto 6px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.4));}
.fg-pair-cols h4{font-family:'Noto Serif TC',serif;font-weight:900;font-size:19px;}
.fg-pair-cols ul{margin:10px 0 0 1.1em;color:rgba(255,255,255,.82);font-size:15px;line-height:1.75;}
.fg-latin{font-style:italic;color:var(--faint);font-size:13.5px;margin-top:2px;}
.fg-how{margin-top:18px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.85);}
.fg-how b{color:var(--primary);}
.fg-refs{margin-top:8px;font-size:12.5px;color:var(--faint);}
.fg-refs a{color:var(--muted);}

/* The group index. */
.fg-index{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.fg-index a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);text-decoration:none;font-weight:600;font-size:15px;transition:border-color .2s ease,background .2s ease;}
.fg-index a:hover{border-color:rgba(var(--primary-rgb),.45);background:rgba(var(--primary-rgb),.08);}
.fg-index span{font-family:'Manrope',sans-serif;font-size:12px;font-weight:800;color:var(--primary);letter-spacing:.1em;}
.fg-index small{margin-left:auto;color:var(--faint);font-weight:500;}

/* Search over all 100. */
.fg-search{position:sticky;top:76px;z-index:5;margin:40px 0 0;display:flex;align-items:center;gap:10px;height:50px;padding:0 18px;border-radius:25px;background:rgba(8,20,36,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(var(--primary-rgb),.25);}
.fg-search input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:16px;font-family:inherit;}
.fg-search input::placeholder{color:var(--faint);}
.fg-search output{font-size:13px;color:var(--faint);white-space:nowrap;}
.fg-results.is-searching{min-height:calc(100vh - 140px);}
.fg-empty{display:none;margin-top:28px;padding:28px;border-radius:20px;text-align:center;background:rgba(255,255,255,.035);border:1px dashed rgba(255,255,255,.16);}
.fg-empty b{font-family:'Noto Serif TC',serif;font-weight:900;font-size:20px;color:#fff;}
.fg-empty p{color:var(--muted);font-size:14.5px;line-height:1.7;margin-top:8px;}
.fg-empty button{margin-top:16px;padding:10px 20px;border-radius:999px;border:1px solid rgba(var(--primary-rgb),.6);background:transparent;color:#fff;font:700 14px 'Inter',sans-serif;cursor:pointer;}
.fg-empty button:hover{background:rgba(var(--primary-rgb),.15);}

/* A group and its species. */
.fg-group{padding-top:72px;scroll-margin-top:70px;}
.fg-group-head{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;margin-bottom:24px;}
.fg-group-num{font-family:'Noto Serif TC',serif;font-weight:900;font-size:56px;line-height:.9;color:rgba(var(--primary-rgb),.55);}
.fg-group-head .ar-num::after{display:none;}
.fg-group-head h2{font-family:'Noto Serif TC','Songti TC',serif;font-weight:900;font-size:clamp(26px,3vw,34px);line-height:1.3;margin-top:6px;}
.fg-group-head h2 small{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--faint);margin-left:10px;}
.fg-group-head p{color:var(--muted);font-size:15.5px;line-height:1.75;margin-top:8px;max-width:40em;}
.fg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.fg-card{border-radius:20px;overflow:hidden;background:var(--card);border:1px solid rgba(255,255,255,.07);transition:transform .3s ease,border-color .3s ease;scroll-margin-top:140px;}
.fg-card:hover{transform:translateY(-3px);border-color:rgba(var(--primary-rgb),.4);}
.fg-specimen{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 55%,rgba(var(--primary-rgb),.2),rgba(var(--primary-rgb),.03) 62%,transparent 75%),linear-gradient(180deg,#0f2640,#0a1a2e);}
.fg-specimen img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,0,0,.38));}
.fg-specimen span{position:absolute;left:12px;top:10px;font-family:'Manrope',sans-serif;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--faint);}
.fg-copy{padding:14px 16px 16px;}
.fg-copy h3{font-family:'Noto Serif TC','Songti TC',serif;font-weight:900;font-size:18px;line-height:1.35;}
.fg-habitat{font-size:13px;line-height:1.6;color:rgba(255,255,255,.78);margin-top:8px;}
.fg-habitat b{display:block;font-size:11px;font-weight:600;color:var(--faint);letter-spacing:.06em;}
/* Family, then how common: two rows, so neither wraps into the other on a narrow card. */
.fg-foot{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07);font-size:12px;line-height:1.5;color:var(--faint);}
.fg-stars{color:#f2c14e;letter-spacing:1px;font-size:12px;}
.fg-common{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.fg-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:18px;padding:12px 16px;border-radius:14px;background:rgba(242,193,78,.07);border:1px solid rgba(242,193,78,.2);font-size:14px;color:rgba(255,255,255,.85);}
.fg-legend>.fg-stars{font-size:14px;}
.fg-legend-scale{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--faint);font-size:13px;}
@media (max-width:760px){.fg-legend-scale{margin-left:0;}}
.fg-stars i{font-style:normal;color:rgba(255,255,255,.18);}

.fg-note{max-width:760px;margin:96px auto 0;padding:0 20px;}
.fg-note h2{font-family:'Noto Serif TC',serif;font-weight:900;font-size:24px;}
.fg-note p{color:rgba(255,255,255,.8);font-size:15.5px;line-height:1.85;margin-top:12px;}
.fg-note .fg-refs{font-size:13px;line-height:1.8;}
.fg-fine{margin-top:28px;font-size:12.5px;line-height:1.7;color:var(--faint);text-align:center;}
.fg-fine a{color:var(--muted);}
.fg-banner{max-width:1180px;margin:20px auto 0;padding:0 32px;}
.fg-banner div{border-radius:14px;padding:12px 16px;background:rgba(var(--primary-rgb),.1);border:1px solid rgba(var(--primary-rgb),.25);font-size:14px;color:rgba(255,255,255,.85);}

@media (max-width:1000px){.fg-grid{grid-template-columns:repeat(3,1fr);}.fg-index{grid-template-columns:1fr 1fr;}}
@media (max-width:760px){
  .fg-hero{grid-template-columns:1fr;padding:40px 18px 28px;}
  .fg-collage{justify-self:center;max-width:380px;order:-1;}
  .fg-stats{grid-template-columns:1fr 1fr;padding:0 18px;}
  .fg-stats div:nth-child(3){border-left:0;}
  .fg-stats div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08);}
  .fg-stats b{font-size:32px;}
  .fg-wide,.fg-banner{padding:0 16px;}
  .fg-pair{padding:20px;}
  .fg-pair-cols{grid-template-columns:1fr;}
  .fg-index{grid-template-columns:1fr;}
  .fg-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .fg-group-num{font-size:40px;}
  .fg-group-head{gap:14px;}
  .fg-search{top:70px;}
}

/* Ends every article: get the app. */
.st-cta{margin-top:64px;padding:28px;border-radius:24px;background:linear-gradient(135deg,rgba(var(--primary-rgb),0.24),rgba(var(--primary-rgb),0.05));border:1px solid rgba(var(--primary-rgb),0.3);display:flex;gap:18px;align-items:center;}
.st-cta img{width:64px;height:64px;border-radius:16px;flex:none;}
.st-cta-title{font-family:'Noto Serif TC','Songti TC',serif;font-weight:900;font-size:20px;}
.st-cta-sub{color:var(--muted);font-size:14px;line-height:1.6;margin-top:4px;}
.st-cta-button{display:inline-block;margin-top:12px;background:var(--primary);color:#fff;font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;text-decoration:none;}
.st-cta-button:hover{filter:brightness(1.08);}
/* On a phone one Download button goes to its own store; on computers (the store badges are already in the top bar)
   a QR code to /download, which sends a phone on to its own store. site-menu.js sets html.has-store on phones. */
.st-cta-phone{display:none;}
.has-store .st-cta-phone{display:inline-block;}
.st-cta-stores{color:var(--muted);font-size:14px;line-height:1.6;margin-top:6px;}
.st-cta .st-cta-qr{width:112px;height:112px;border-radius:12px;margin-left:auto;flex:none;}
.has-store .st-cta-stores,.has-store .st-cta-qr{display:none;}

@media (max-width:640px){
  .ar-hero{height:min(72vh,620px);min-height:420px;}
  .ar-hero-creature{width:56vw;left:6%;bottom:44%;}
  .ar-hero-text{padding:0 18px 30px;}
  .ar-wrap{padding:4px 18px 32px;}
  .ar-body{font-size:16.5px;}
  .ar-lead{font-size:18.5px;}
  .ar-facts{padding:20px;}
  .ar-pair{grid-template-columns:1fr;}
  .ar-section{margin-top:52px;}
}

/* Footer, as on the homepage. */
.st-footer{border-top:1px solid rgba(var(--primary-rgb),0.15);padding:28px 32px;background:rgba(2,11,28,.55);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:11px;color:rgba(255,255,255,0.5);}
.st-footer a{text-decoration:none;}
.st-footer a:hover{text-decoration:underline;}
.st-footer a.is-current{color:#fff;font-weight:600;pointer-events:none;}

@media (max-width:640px){
  .st-header{padding:0 16px;}
  .st-nav{gap:12px;}
  .st-nav a{font-size:12px;}
  .st-main{padding:36px 16px 64px;}
  .st-title{font-size:30px;}
  .st-card{grid-template-columns:1fr;}
  .st-card .st-cover{aspect-ratio:16/9;}
  .st-card-body{padding:0 18px 20px;}
  .st-cta{flex-direction:column;align-items:flex-start;}
  .st-footer{flex-direction:column;text-align:center;}
}