/*
 * Reef — Color System
 *
 * Deep-ocean blues + bioluminescent teal, on a clean, bright canvas.
 * Single theme — no theme switching, no data-theme attribute needed.
 */

:root {

  /* Blue scale */
  --blue-950: #010D1A; /* @kind color */
  --blue-900: #041729; /* @kind color */
  --blue-800: #0A2A4A; /* @kind color */
  --blue-700: #0D3B6E; /* @kind color */
  --blue-600: #1B5E8A; /* @kind color */
  --blue-500: #2874A6; /* @kind color */
  --blue-400: #3498DB; /* @kind color */
  --blue-300: #5DADE2; /* @kind color */
  --blue-200: #85C1E9; /* @kind color */
  --blue-100: #C5E9F8; /* @kind color */
  --blue-50:  #EEF8FD; /* @kind color */

  /* Teal/bioluminescent scale */
  --teal-700: #006272; /* @kind color */
  --teal-600: #007BA7; /* @kind color */
  --teal-500: #00B4D8; /* @kind color */
  --teal-400: #26C6DA; /* @kind color */
  --teal-300: #40E0D0; /* @kind color */
  --teal-200: #80DEEA; /* @kind color */
  --teal-100: #B2EBF2; /* @kind color */

  /* Semantic — light backgrounds + deep ocean ink */
  --color-bg:             #EEF8FD; /* @kind color */
  --color-surface:        #FFFFFF; /* @kind color */
  --color-surface-raised: #F5FBFE; /* @kind color */
  --color-border:         var(--blue-100); /* @kind color */
  --color-border-subtle:  color-mix(in srgb, var(--blue-200) 28%, transparent); /* @kind color */

  --color-primary:        var(--teal-600); /* @kind color */
  --color-primary-hover:  var(--teal-700); /* @kind color */
  --color-primary-text:   #FFFFFF; /* @kind color */

  --color-secondary:       var(--blue-600); /* @kind color */
  --color-secondary-hover: var(--blue-700); /* @kind color */

  --color-accent:          var(--teal-500); /* @kind color */

  --color-text:            var(--blue-800); /* @kind color */
  --color-text-muted:      var(--blue-600); /* @kind color */
  --color-text-subtle:     var(--blue-400); /* @kind color */

  --color-link:            var(--teal-600); /* @kind color */
  --color-link-hover:      var(--teal-700); /* @kind color */

  /* Wave texture — deep navy strokes on light canvas */
  --texture-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='50'%3E%3Cpath d='M0,25 C100,10 300,40 400,25' fill='none' stroke='%231B5E8A' stroke-width='2' opacity='0.16'/%3E%3Cpath d='M0,38 C100,23 300,53 400,38' fill='none' stroke='%2300B4D8' stroke-width='1.5' opacity='0.14'/%3E%3Cpath d='M0,12 C100,-3 300,27 400,12' fill='none' stroke='%231B5E8A' stroke-width='1' opacity='0.1'/%3E%3C/svg%3E"); /* @kind other */
}

/*
 * Reef — Typography
 *
 * Display: Source Serif 4 (Google Fonts) — warm editorial serif built by
 *   Frank Grießhammer with production-grade hinting; renders crisply on
 *   Windows ClearType and macOS alike. Character: authoritative, warm,
 *   legible at all sizes.
 *
 * Body: Public Sans (Google Fonts) — geometric sans built by USWDS for
 *   interface legibility across platforms; extensively tested for
 *   cross-OS rendering consistency. Not on any "overused" list.
 *
 * Mono: IBM Plex Mono — ids, codes, specs, measurements.
 *   Designed for screen readability; renders identically on all platforms.
 */


:root {
  /* Font families */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:    'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.8;

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.12em;

  /* Weights */
  --weight-light:    300;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
}

/*
 * Reef — Spacing & Layout
 *
 * Base unit: 4px (0.25rem)
 * Scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32
 */

:root {
  /* Spacing scale */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Border radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Container widths */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
}

/*
 * Reef — Effects: Shadows, Gradients, Motion
 */

:root {

  /* Shadows — navy-tinted, crisp/tight (chosen from Alt A) */
  --shadow-sm:   0 1px 2px rgba(10, 42, 74, 0.08);  /* @kind shadow */
  --shadow-md:   0 2px 6px rgba(10, 42, 74, 0.10);  /* @kind shadow */
  --shadow-lg:   0 4px 12px rgba(10, 42, 74, 0.12); /* @kind shadow */
  --shadow-xl:   0 8px 24px rgba(10, 42, 74, 0.16); /* @kind shadow */

  --shadow-glow-teal: 0 0 24px rgba(0, 180, 216, 0.38), 0 0 8px rgba(0, 180, 216, 0.18); /* @kind shadow */

  /* Hero gradient — light sky-to-water tones, no dark backgrounds */
  --gradient-ocean:   linear-gradient(160deg, #EAF6FC 0%, #CFEAF6 55%, #9FD3EA 100%);  /* @kind color */
  --gradient-depth:   linear-gradient(180deg, #F5FBFE 0%, #CFEAF6 100%);               /* @kind color */
  --gradient-surface: linear-gradient(145deg, #FFFFFF 0%, #EEF8FD 100%);               /* @kind color */
  --gradient-accent:  linear-gradient(135deg, #00B4D8 0%, #40E0D0 100%);               /* @kind color */
  --gradient-card:    linear-gradient(160deg, #E4F5FC 0%, #FFFFFF 100%);               /* @kind color */
  --gradient-hero-overlay: linear-gradient(
    to bottom,
    rgba(1, 13, 26, 0.15) 0%,
    rgba(1, 13, 26, 0.55) 70%,
    rgba(1, 13, 26, 0.88) 100%
  ); /* @kind color */

  /* Motion */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);    /* @kind other */
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);      /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);    /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  --duration-fast:   120ms; /* @kind other */
  --duration-base:   200ms; /* @kind other */
  --duration-slow:   350ms; /* @kind other */
  --duration-slower: 600ms; /* @kind other */

  /* Blur */
  --blur-sm: blur(4px);  /* @kind other */
  --blur-md: blur(8px);  /* @kind other */
  --blur-lg: blur(16px); /* @kind other */
  --blur-xl: blur(24px); /* @kind other */
}

/* ─── Wave texture utility ───────────────────────────────────── */
.wave-bg {
  background-image: var(--texture-wave);
  background-repeat: repeat-x;
  background-size: 400px 50px;
}
.wave-bg-bottom { background-position: bottom; }
.wave-bg-top    { background-position: top; }


*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);font-family:'Public Sans',sans-serif;color:var(--color-text);-webkit-text-size-adjust:100%}
img{max-width:100%}
a{color:var(--color-link)}a:hover{color:var(--color-primary-hover)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 14px;z-index:300}.skip:focus{left:8px;top:8px}
.wrap{max-width:1100px;margin:0 auto;padding:0 32px}
.wrap-xl{max-width:1240px;margin:0 auto;padding:0 32px}
.wrap-md{max-width:900px;margin:0 auto;padding:0 32px}
/* nav */
.nav{position:sticky;top:0;z-index:100;width:100%;background:transparent;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:color-mix(in srgb,var(--color-surface) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--color-border-subtle)}
.nav-in{display:flex;align-items:center;justify-content:space-between;max-width:var(--container-xl);margin:0 auto;padding:0 24px;height:68px;gap:32px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:26px;font-style:italic;font-weight:var(--weight-semibold);color:var(--color-text);text-decoration:none;letter-spacing:var(--tracking-tight);flex-shrink:0}
.brand img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;flex:1;justify-content:center}
.nav-links a{display:block;padding:6px 14px;font-size:var(--text-sm);letter-spacing:var(--tracking-wide);color:var(--color-text-muted);text-decoration:none;border-radius:var(--radius-md);transition:color .2s,background .2s}
.nav-links a:hover,.nav-links a.on{color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 10%,transparent)}
.nav-links a.on{font-weight:var(--weight-medium)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--color-text);padding:10px;min-width:44px;min-height:44px}
@media(max-width:820px){.nav-toggle{display:block}.nav-in{gap:12px}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;padding:12px 16px 16px;background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-lg)}.nav-links.open{display:flex}.nav-links a{padding:12px 14px;font-size:var(--text-base)}}
/* breadcrumb */
.crumb{font-size:var(--text-sm);color:var(--color-text-subtle);padding-top:12px}
/* buttons / badges */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;border-radius:var(--radius-md);border:1.5px solid transparent;text-decoration:none;transition:background .2s,box-shadow .2s,transform .15s;min-height:44px}
.btn:hover{transform:translateY(-1px)}
.btn-md{padding:10px 22px;font-size:var(--text-sm)}.btn-lg{padding:14px 30px;font-size:var(--text-base)}
.btn-primary{background:var(--color-primary);color:var(--color-primary-text);border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:var(--color-primary-text);box-shadow:var(--shadow-glow-teal)}
.btn-secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn-secondary:hover{box-shadow:var(--shadow-glow-teal);color:var(--color-primary)}
.badge{display:inline-flex;align-items:center;padding:2px 8px;font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);border-radius:var(--radius-full);border:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface-raised) 80%,transparent);color:var(--color-text-muted);white-space:nowrap}
.badge-primary{background:color-mix(in srgb,var(--color-primary) 18%,transparent);color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent)}
.badge-accent{background:color-mix(in srgb,var(--color-accent) 18%,transparent);color:var(--color-primary);border-color:color-mix(in srgb,var(--color-accent) 40%,transparent)}
/* hero */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--gradient-ocean);padding:72px 32px 72px}
.hero.compact{padding:36px 24px 64px}
.hero-wave{position:absolute;inset:0;background-image:var(--texture-wave);background-repeat:repeat-x;background-size:400px 50px;background-position:bottom 24px center;opacity:.7;pointer-events:none}
.hero-in{position:relative;z-index:1;text-align:center;max-width:780px;width:100%}
.hero .eyebrow{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-primary);margin:0 0 16px}
.hero h1{font-family:var(--font-display);font-size:clamp(var(--text-4xl),7vw,var(--text-7xl));font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0 0 24px;text-wrap:balance}
.hero.compact h1{font-size:clamp(var(--text-3xl),5vw,var(--text-5xl));margin-bottom:16px}
.hero .sub{font-size:var(--text-xl);color:var(--color-text-muted);line-height:var(--leading-relaxed);margin:0 0 40px;text-wrap:pretty}
.hero.compact .sub{font-size:var(--text-lg);margin-bottom:0}
.hero .ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-curve{position:absolute;bottom:-1px;left:0;width:100%;height:56px;display:block}
.hero-curve path{fill:var(--color-bg)}
.band{margin-top:56px;padding-top:1px;background:var(--gradient-ocean);line-height:0}.band svg{display:block;width:100%;height:56px}.band path{fill:var(--color-bg)}
/* section header */
.sh{text-align:center;padding:16px 0}
.sh .eyebrow{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-primary);margin:0 0 12px}
.sh h2{font-family:var(--font-display);font-size:clamp(var(--text-3xl),4vw,var(--text-4xl));font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0;text-wrap:pretty}
.sh .div{display:flex;gap:5px;align-items:center;justify-content:center;margin-top:16px}
.sh .div i{display:block;height:2px;border-radius:2px;background:var(--color-primary)}
.sh .div i.l{width:28px;background:var(--color-border)}.sh .div i.m{width:12px}.sh .div i.d{width:5px;height:5px;border-radius:50%}
.sh .sub{font-size:var(--text-lg);color:var(--color-text-muted);line-height:var(--leading-relaxed);max-width:640px;margin:20px auto 0}
/* fact grid */
.fg-t{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-text-subtle);margin:0 0 12px}
.fg{display:grid;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border);margin:0}
.fg-1{grid-template-columns:1fr}.fg-2{grid-template-columns:1fr 1fr}
.fg>div{padding:16px;background:var(--color-surface)}
.fg>div:nth-child(even){background:color-mix(in srgb,var(--color-surface-raised) 60%,var(--color-surface))}
.fg dt{font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-text-subtle);margin-bottom:4px}
.fg dd{margin:0;font-size:var(--text-sm);line-height:var(--leading-snug)}
.fg dd.mono{font-family:var(--font-mono)}
.fg-2>div{border-bottom:1px solid var(--color-border-subtle);border-right:1px solid var(--color-border-subtle)}
.fg-2>div:nth-child(even){border-right:0}
.fg-1>div{border-bottom:1px solid var(--color-border-subtle)}
.fg>div:last-child{border-bottom:0}.fg-2>div:nth-last-child(2):nth-child(odd){border-bottom:0}
@media(max-width:560px){.fg-2{grid-template-columns:1fr}.fg-2>div{border-right:0}.fg-2>div:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--color-border-subtle)}}
/* info box */
.ib{display:flex;gap:16px;padding:20px 24px;border-radius:var(--radius-lg);border:1px solid color-mix(in srgb,var(--ibc) 25%,transparent);border-left:4px solid var(--ibc);background:color-mix(in srgb,var(--ibc) 8%,var(--color-surface))}
.ib-info{--ibc:var(--color-secondary)}.ib-fact{--ibc:var(--color-primary);background:color-mix(in srgb,var(--ibc) 10%,var(--color-surface))}
.ib .ic{font-size:var(--text-2xl);line-height:1;flex-shrink:0;margin-top:2px}
.ib h4{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);margin:0 0 8px;line-height:var(--leading-snug)}
.ib .tx{color:var(--color-text-muted);line-height:var(--leading-relaxed)}
/* cards */
.card{border-radius:var(--radius-lg);overflow:hidden;padding:24px;background:var(--gradient-surface);border:1px solid var(--color-border-subtle);box-shadow:var(--shadow-lg)}
.card-ocean{background:var(--gradient-card);border-color:var(--color-border);box-shadow:var(--shadow-md);padding:32px}
.card h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);margin:0 0 8px}
.card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-relaxed);margin:0}
.ma-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.pc{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border-subtle);box-shadow:var(--shadow-md);text-decoration:none;color:inherit;transition:box-shadow .25s,transform .22s}
.pc:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);color:inherit}
.pc-h{height:160px;position:relative;overflow:hidden}
.pc-h:after{content:"";position:absolute;inset:0;background-image:var(--texture-wave);background-repeat:repeat-x;background-size:400px 50px;background-position:bottom;opacity:.5}
.pc-h .badge{position:absolute;top:12px;right:12px;z-index:1}
.pc-h img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.pc-h picture+.badge,.pc-h img+.badge{background:rgba(255,255,255,.92)}
.pc-b{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.pc-b h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);margin:0;line-height:var(--leading-snug)}
.pc-b p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-relaxed);margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-b .more{margin-top:auto;padding-top:12px;font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-link)}
/* species page */
.sp-top{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start;margin-top:48px}
.photo{border-radius:16px;overflow:hidden;background:var(--color-surface);position:relative}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.ph{display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);color:var(--color-text-subtle);border:1.5px dashed var(--color-border)}
.sp-hero-photo{height:320px}.sp-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}.sp-pair .photo{height:220px;border-radius:14px}
.section{margin-top:48px}
.section h2{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);margin:0 0 14px}
.section p{font-size:var(--text-base);color:var(--color-text-muted);line-height:var(--leading-relaxed);margin:0 0 14px}
.mt32{margin-top:32px}.mt48{margin-top:48px}
.sp-gifts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sp-gifts a{display:block;text-decoration:none;background:#fff;border:1px solid var(--color-border-subtle);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md);transition:transform .2s}
.sp-gifts a:hover{transform:translateY(-3px)}
.sp-gifts .ph{aspect-ratio:1/1;background:#fff;border-bottom:1px solid var(--color-border-subtle)}.sp-gifts .ph img{width:100%;height:100%;object-fit:contain;padding:6px;display:block}
.sp-gifts div.t{padding:10px 14px 14px}.sp-gifts p{margin:0 0 2px;font-size:var(--text-sm);color:var(--color-text);line-height:1.35}.sp-gifts p.pr{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-link)}
.center{text-align:center}
.h-center{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-bold);text-align:center;margin:0 0 24px}
.muted{color:var(--color-text-muted)}
@media(max-width:820px){.sp-top{grid-template-columns:1fr;gap:28px}.sp-hero-photo{height:240px}.sp-gifts{grid-template-columns:repeat(2,1fr);gap:14px}.wrap,.wrap-xl,.wrap-md{padding:0 20px}.section h2{font-size:var(--text-2xl)}}
@media(max-width:560px){.sp-pair{grid-template-columns:1fr}.sp-pair .photo{height:200px}}
/* footer */
.foot{padding:40px 32px;text-align:center;font-size:var(--text-xs);color:var(--color-text-subtle)}
.foot p{margin:0 0 8px}.foot p:last-child{margin:0}
/* lightbox */
.lb{position:fixed;inset:0;background:rgba(10,42,74,.85);display:flex;align-items:center;justify-content:center;z-index:200;padding:32px}
.lb img{max-width:90vw;max-height:80vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lb button{position:absolute;top:16px;right:24px;background:none;border:0;color:#fff;font-size:36px;cursor:pointer;line-height:1;min-width:44px;min-height:44px}
.photo-tile a{display:block;width:100%;height:100%}
/* page-specific (carried over from approved designs) */
.cat-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.cat-head>div:last-child{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.cat-icon{width:56px;height:56px;border-radius:var(--radius-full,9999px);background:var(--gradient-ocean);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-md)}
.cat-icon img{height:28px;width:auto}
.cat-head h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--color-text);margin:0}
.cat-head span{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text-subtle)}
.sound-list{display:flex;flex-direction:column}
.sound-row{display:grid;grid-template-columns:1fr 2fr;align-items:center;gap:20px;padding:14px 4px}
.sound-row:not(:last-child){border-bottom:1px solid var(--color-border-subtle)}
.sound-row p{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--color-text);margin:0}
.sound-row audio{width:100%;height:34px}
@media (max-width:600px){.sound-row{grid-template-columns:1fr}}
.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.color-card p{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);margin:8px 0 4px 0;text-align:center}
.color-card a{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-medium);text-align:center;display:block}
.group-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.group-head img{height:22px;width:auto}
.group-head h3{margin:0}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.photo-tile{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--color-surface);border:1px solid var(--color-border-subtle)}
.photo-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--duration-base) var(--ease-out)}
.photo-tile:hover img{transform:scale(1.05)}
.photo-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;font-family:var(--font-body);font-size:var(--text-xs);color:#fff;background:linear-gradient(to top, rgba(10,42,74,0.75), rgba(10,42,74,0));margin:0}
.lightbox-backdrop{position:fixed;inset:0;background:rgba(10,42,74,0.85);display:flex;align-items:center;justify-content:center;z-index:200;padding:32px}
.lightbox-img{max-width:90vw;max-height:80vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.4)}
.lightbox-close{position:absolute;top:24px;right:32px;background:none;border:none;color:#fff;font-size:32px;cursor:pointer;line-height:1}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9999px;border:1.5px solid var(--color-border);background:#fff;font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;text-decoration:none;color:var(--color-text);transition:all var(--duration-base) var(--ease-out)}
.chip:hover{border-color:var(--color-link);box-shadow:var(--shadow-glow-teal);color:var(--color-text)}
.chip.on{background:var(--color-link);border-color:var(--color-link);color:#fff}
#products{scroll-margin-top:84px}
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:36px 0 0}
.pager a,.pager>span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:9999px;border:1.5px solid var(--color-border);background:#fff;font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;text-decoration:none;color:var(--color-text);transition:all var(--duration-base) var(--ease-out)}
.pager a:hover{border-color:var(--color-link);box-shadow:var(--shadow-glow-teal);color:var(--color-text)}
.pager .on{background:var(--color-link);border-color:var(--color-link);color:#fff}
.pager .gap{border:0;background:none;min-width:0;padding:0 2px}
.pager-note{text-align:center;font-size:var(--text-xs);color:var(--color-text-subtle);margin:12px 0 0}
@media(max-width:600px){.pager{gap:6px}.pager a,.pager>span{min-width:38px;height:38px;padding:0 11px}.pager .pw{display:none}}
.prod{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}@media(max-width:1000px){.prod{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.prod{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}.prod .ph img{padding:6px;box-sizing:border-box}
.prod a{display:block;text-decoration:none;background:#fff;border:1px solid var(--color-border-subtle);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md);transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base)}
.prod a:hover{transform:translateY(-3px)}
.prod .ph{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--color-border-subtle);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-subtle)}
.pg{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pg a{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1.5px solid var(--color-border);text-decoration:none;font-family:var(--font-body);font-size:var(--text-sm);background:#fff}
.pg a.on{background:var(--color-link);color:#fff;border-color:var(--color-link)}
.gc{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 14px;background:#fff;border:1px solid var(--color-border-subtle);border-radius:12px;box-shadow:var(--shadow-md);text-decoration:none;text-align:center;transition:transform var(--duration-base) var(--ease-out)}.gc:hover{transform:translateY(-3px)}.gc .ic{width:44px;height:44px}.gc h3{font-family:var(--font-display);font-size:var(--text-lg);margin:0;color:var(--color-text)}.gc p{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:1.4}.gc span.go{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--color-link)}.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}.pg{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

.gc .ic img{width:100%;height:100%;object-fit:contain}
.group-head img,.cat-icon img{display:block}