/* ==========================================================================
   Dr. Arjumand Zaidi — shared stylesheet
   Palette: indigo dye, marigold, chalk, warm sand.
   Type: Montserrat throughout, one serif italic kept as an accent.
   ========================================================================== */

:root{
  --ink:#0B1030;
  --indigo:#24307A;
  --indigo-2:#182258;
  --marigold:#F2A71B;
  --marigold-soft:#FDF0D6;
  --leaf:#2C6B5B;
  --chalk:#E9ECF4;
  --sand:#F7F3EA;
  --paper:#FBFCFE;
  --line:rgba(11,16,48,.13);
  --line-lt:rgba(255,255,255,.18);

  --sans:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Newsreader', Georgia, serif;

  --shell:1240px; 
  --gut:clamp(18px, 5vw, 64px);
  --r:16px;
  --r-sm:10px;
  --r-xs:6px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 30px 60px -40px rgba(11,16,48,.55);

  --fs-micro:clamp(.60rem,.52rem + .22vw,.70rem);
  --fs-small:clamp(.83rem,.79rem + .22vw,.93rem);
  --fs-body:clamp(.95rem,.90rem + .28vw,1.06rem);
  --fs-lede:clamp(1.05rem,.98rem + .60vw,1.28rem);
  --fs-h3:clamp(1.14rem,1.04rem + .60vw,1.45rem);
  --fs-h2:clamp(1.70rem,1.28rem + 2.40vw,3.20rem);
  --fs-h1:clamp(2.00rem,1.40rem + 4.20vw,4.20rem);
}

*,*::before,*::after{box-sizing:border-box; min-width:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; scroll-padding-top:100px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); font-weight:400; line-height:1.75;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--marigold); outline-offset:3px; border-radius:4px}
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

h1,h2,h3,h4{font-family:var(--sans); font-weight:800; letter-spacing:-.03em; line-height:1.1; margin:0}
.h-sec{font-size:var(--fs-h2); margin:.45rem 0 0}
p{margin:0 0 1.15em}

/* ---------- icons ---------- */
.ico{width:1.25em; height:1.25em; flex:none; vertical-align:-.24em}
.ico-lg{width:26px; height:26px}
.icon-badge{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--marigold-soft); color:var(--indigo); margin-bottom:18px;
}
.icon-badge .ico{width:24px; height:24px; display:block}
.on-dark .icon-badge{background:rgba(242,167,27,.16); color:var(--marigold)}

.eyebrow{
  font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase;
  font-weight:700; color:var(--indigo); display:flex; align-items:center; gap:.7em; margin:0;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--marigold); flex:none}
.on-dark .eyebrow{color:rgba(255,255,255,.76)}

/* ---------- top bar ---------- */
.topbar{background:var(--ink); color:#fff; font-size:var(--fs-micro); letter-spacing:.1em; font-weight:500}
.topbar .shell{display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:42px; flex-wrap:wrap}
.topbar a{text-decoration:none; opacity:.85; transition:opacity .2s,color .2s; display:inline-flex; align-items:center; gap:7px}
.topbar a:hover{opacity:1; color:var(--marigold)}
.social{display:flex; gap:clamp(12px,2vw,18px); flex-wrap:wrap; align-items:center}
.social .ico{width:16px; height:16px}
.topbar .tel{color:var(--marigold); opacity:1; font-weight:600; white-space:nowrap}

/* ---------- header ---------- */
.head{
  position:sticky; top:0; z-index:60; background:rgba(251,252,254,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); transition:box-shadow .3s;
}
.head.stuck{box-shadow:0 10px 34px -24px rgba(11,16,48,.6)}
.head .shell{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:74px; position:relative}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; position:relative; z-index:2}
.brand .mark{
  width:clamp(36px,7vw,42px); aspect-ratio:1; flex:none; border-radius:50%;
  background:var(--indigo); color:#fff; display:grid; place-items:center; font-weight:800;
  font-size:.88rem; letter-spacing:-.02em; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.brand b{font-weight:800; font-size:clamp(.92rem,2.4vw,1.02rem); letter-spacing:-.03em; display:block; line-height:1.15}
.brand .tag{font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--indigo); opacity:.72; font-weight:600}

.nav{display:flex; align-items:center; gap:2px; margin:0; padding:0}
.nav > li{list-style:none; position:relative}
.nav ul{list-style:none; margin:0; padding:0}
.nav-link{
  display:flex; align-items:center; gap:6px; padding:10px 11px; text-decoration:none;
  font-weight:600; font-size:clamp(.79rem,1.05vw,.87rem); border-radius:var(--r-xs);
  position:relative; white-space:nowrap;
}
.nav-link::after{
  content:""; position:absolute; left:11px; right:11px; bottom:3px; height:2px; background:var(--marigold);
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.nav-link:hover::after,.nav > li.open > .nav-link::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active{color:var(--indigo)}
.caret{width:14px; height:14px; opacity:.5; transition:transform .25s; flex:none}
.nav > li.open .caret{transform:rotate(180deg)}
.menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:228px; padding:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:0 26px 50px -26px rgba(11,16,48,.5);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s, transform .22s var(--ease), visibility .22s;
}
/* Invisible hover bridge: without this, moving the pointer from the
   "Gallery" link down into the menu below crosses the 8px gap above,
   which sits outside both elements' boxes and triggers mouseleave —
   closing the menu before it can be clicked. This pseudo-element is
   part of the link itself, so hovering through the gap keeps the
   parent <li> registered as hovered the whole way down. Scoped to
   real hover devices at desktop widths so it never overlaps mobile
   tap targets, where the submenu is static (no gap to bridge). */
@media (hover:hover) and (pointer:fine) and (min-width:981px){
  [data-drop]{position:relative}
  [data-drop]::after{content:""; position:absolute; left:0; right:0; top:100%; height:14px; background:transparent}
}
.nav > li:nth-last-child(-n+3) .menu{left:auto; right:0}
.nav > li.open .menu{opacity:1; visibility:visible; transform:none}
.menu a{display:flex; align-items:center; gap:10px; padding:9px 12px; text-decoration:none;
  border-radius:var(--r-xs); font-size:var(--fs-small); font-weight:500}
.menu a .ico{width:16px; height:16px; opacity:.55}
.menu a:hover{background:var(--sand); color:var(--indigo)}
.menu a:hover .ico{opacity:1; color:var(--marigold)}
.menu .sub-label{padding:10px 12px 4px; font-size:var(--fs-micro); letter-spacing:.2em;
  text-transform:uppercase; opacity:.5; font-weight:700}

/* On wide screens, sit the nav links right after the logo instead of
   letting justify-content:space-between stretch a big gap between
   them; only "Get in touch" gets pushed out to the far right. */
@media (min-width:981px){
  html,body{overflow-x:clip}
  .head{position:-webkit-sticky; position:sticky; top:0}
  .head .shell{justify-content:flex-start}
  .head .shell > nav{flex:1 1 auto; min-width:0}
  /* Center the primary links in the space between the logo and the
     CTA button instead of letting them hug the logo. The CTA is
     pulled out of the centered group and pinned to the far right
     (padding-right on the row reserves its lane), so the four links
     read as a properly centered navbar rather than a left-packed one. */
  .nav{justify-content:center; position:relative; padding-right:clamp(150px,15vw,190px)}
  .nav > li.cta{position:absolute; right:0; top:50%; transform:translateY(-50%); margin-left:0}
}

.burger{display:none; width:46px; height:46px; place-items:center; border:1px solid var(--line); border-radius:var(--r-sm); flex:none; position:relative; z-index:2}
.burger i{display:block; width:19px; height:2px; background:var(--ink); position:relative; transition:.25s; border-radius:2px}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:19px; height:2px; background:var(--ink); border-radius:2px; transition:.25s}
.burger i::before{top:-6px} .burger i::after{top:6px}
.burger.on i{background:transparent}
.burger.on i::before{top:0; transform:rotate(45deg)}
.burger.on i::after{top:0; transform:rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px;
  padding:12px 24px; font-weight:700; font-size:clamp(.80rem,1vw,.88rem); letter-spacing:.02em;
  text-decoration:none; border-radius:100px; transition:.25s var(--ease); text-align:center;
}
.btn-solid{background:var(--indigo); color:#fff}
.btn-solid:hover{background:var(--ink); transform:translateY(-2px)}
.btn-gold{background:var(--marigold); color:var(--ink)}
.btn-gold:hover{background:#fff; transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line-lt); color:#fff}
.btn-ghost:hover{border-color:var(--marigold); color:var(--marigold)}
.btn-line{border:1px solid var(--line); color:var(--ink)}
.btn-line:hover{border-color:var(--indigo); color:var(--indigo); transform:translateY(-2px)}
.hero .profile-text > p > .btn-line{background:var(--marigold); border-color:var(--marigold)}
.hero .profile-text > p > .btn-line:hover{background:var(--marigold); border-color:var(--marigold); color:#fff}
.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- page hero ---------- */
.phero{position:relative; background:var(--ink); color:#fff; overflow:hidden}
.phero::before{content:""; position:absolute; inset:0;
  background:radial-gradient(900px 480px at 78% 12%, rgba(36,48,122,.95), transparent 68%),
             radial-gradient(700px 480px at 4% 96%, rgba(44,107,91,.32), transparent 70%)}
.phero::after{content:""; position:absolute; inset:0; opacity:.26; mix-blend-mode:soft-light;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:clamp(32px,6vw,52px) clamp(32px,6vw,52px);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 82%);
          mask-image:radial-gradient(circle at 50% 40%,#000,transparent 82%)}
.phero .shell{position:relative; z-index:2; padding-block:clamp(32px,5vw,60px)}
.phero h1{font-size:var(--fs-h1); margin:.5rem 0 0; max-width:20ch}
.phero .sub{margin-top:18px; max-width:56ch; color:rgba(255,255,255,.76); font-size:var(--fs-body)}
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:24px;
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.55)}
.crumb a{text-decoration:none} .crumb a:hover{color:var(--marigold)}
.crumb .ico{width:12px; height:12px; opacity:.5}

/* ---------- sections ---------- */
.sec{padding-block:clamp(36px,6vw,80px)}
.sec-sm{padding-block:clamp(40px,6vw,76px)}
.sec-chalk{background:var(--chalk)}
.sec-sand{background:var(--sand)}
.sec-dark{background:var(--ink); color:#fff}
.sec-indigo{background:var(--indigo-2); color:#fff}
.sec-head{max-width:64ch; margin-bottom:clamp(20px,3vw,36px)}
.sec-head p{margin-top:14px; opacity:.78}
.on-dark .sec-head p{opacity:.76; color:rgba(255,255,255,.78)}

/* ---------- generic grids & cards ---------- */
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:clamp(14px,2vw,22px)}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(20px,3vw,40px)}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,32px); display:flex; flex-direction:column; position:relative;
  transition:.3s var(--ease); overflow:hidden; text-decoration:none;
}
.card::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--marigold);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card h3{font-size:var(--fs-h3); margin-bottom:10px}
.card p{font-size:var(--fs-small); opacity:.78}
.card .go{margin-top:auto; padding-top:12px; font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:var(--indigo); display:inline-flex; align-items:center; gap:8px; text-decoration:none}
.card .go .ico{width:15px; height:15px}
.sec-chalk .card,.sec-sand .card{background:#fff}

/* ---------- ventures ---------- */
.vent-logo{height:64px; display:flex; align-items:center; margin-bottom:20px}
.vent-logo img{max-height:64px; width:auto; object-fit:contain}

/* ---------- ventures page: alternating text + logo rows ---------- */
.venture-row{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,64px); align-items:start;
  padding-block:clamp(28px,4.5vw,56px);
}
.venture-row + .venture-row{border-top:1px solid var(--line)}
.venture-row.reverse .venture-text{order:2}
.venture-text h2{font-size:clamp(1.4rem,1.1rem + 1.4vw,2.1rem); margin-bottom:18px}
.venture-text p{text-align:justify; font-size:var(--fs-small); line-height:1.85}
.venture-text p:last-of-type{margin-bottom:22px}
.venture-media{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3vw,36px); min-height:clamp(220px,24vw,290px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center; text-decoration:none; transition:.3s var(--ease);
}
.venture-media:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
.venture-media img{max-height:170px; width:auto; max-width:100%; object-fit:contain}
.venture-media span{font-weight:600; font-size:var(--fs-h3); letter-spacing:-.02em; color:var(--ink); opacity:.8}
@media (max-width:820px){
  .venture-row{grid-template-columns:minmax(0,1fr)}
  .venture-row .venture-media{order:-1}
  .venture-row.reverse .venture-text{order:0}
  .venture-text p{text-align:left}
}

@media (max-width:640px){
  .card:has(.vent-logo){text-align:center}
  .card:has(.vent-logo) .vent-logo{justify-content:center}
  .card:has(.vent-logo) .go{justify-content:center}
}
/* ---------- the 30 rights ---------- */
.rights-head{display:flex; flex-wrap:wrap; gap:18px 40px; align-items:flex-end; justify-content:space-between; margin-bottom:26px}
.rights-head h2{font-size:clamp(1.5rem,3.4vw,2.5rem); margin-top:10px}
.rights-head p{max-width:46ch; color:rgba(255,255,255,.72); font-size:var(--fs-small); margin:0}
.rights-grid{display:grid; grid-template-columns:repeat(15,minmax(0,1fr)); gap:clamp(4px,.7vw,7px)}
.right-cell{
  position:relative; aspect-ratio:1; border:1px solid rgba(255,255,255,.18); border-radius:var(--r-xs);
  display:grid; place-items:center; font-size:clamp(.62rem,1.5vw,.74rem); font-weight:600;
  font-variant-numeric:tabular-nums; color:rgba(255,255,255,.64);
  transition:background .2s,color .2s,transform .2s var(--ease),border-color .2s;
}
.right-cell:hover,.right-cell:focus-visible{background:var(--marigold); color:var(--ink); border-color:var(--marigold); transform:translateY(-3px)}
.right-cell.active{background:#fff; color:var(--ink); border-color:#fff}
.right-cell.written::after{content:""; position:absolute; top:4px; right:4px; width:4px; height:4px; border-radius:50%; background:var(--marigold)}
.right-cell.active.written::after,.right-cell:hover.written::after{background:var(--ink)}
.right-read{margin-top:22px; border-top:1px solid rgba(255,255,255,.18); padding-top:22px;
  display:flex; align-items:baseline; gap:clamp(12px,2vw,18px); min-height:76px}
.right-read .num{font-size:var(--fs-micro); letter-spacing:.16em; font-weight:700; color:var(--marigold); flex:none; padding-top:8px}
.right-read .txt{font-weight:800; font-size:clamp(1.1rem,3.4vw,1.95rem); letter-spacing:-.03em; line-height:1.15; display:block}
.right-read .note{font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.52); margin-top:9px; display:block; line-height:1.6}

/* ---------- media / listing ---------- */
.media-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; transition:.3s var(--ease); text-decoration:none;
}
.media-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.media-thumb{position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,var(--indigo),var(--ink)); overflow:hidden}
.media-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.media-card:hover .media-thumb img{transform:scale(1.05)}
.media-thumb .play{
  position:absolute; inset:0; display:grid; place-items:center; color:#fff;
  background:linear-gradient(transparent 40%, rgba(11,16,48,.6));
}
.media-thumb .play span{
  width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(4px);
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.4); transition:.3s var(--ease);
}
.media-card:hover .play span{background:var(--marigold); color:var(--ink); border-color:var(--marigold); transform:scale(1.08)}
.media-thumb .play .ico{width:26px; height:26px}
.media-body{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; font-weight:700; opacity:.6; margin-bottom:12px}
.meta span{display:inline-flex; align-items:center; gap:6px}
.meta .ico{width:14px; height:14px}
.media-body h3{font-size:var(--fs-h3); margin-bottom:10px}
.media-body p{font-size:var(--fs-small); opacity:.76}
.media-body .go{margin-top:auto; padding-top:14px; font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:var(--indigo); display:inline-flex; align-items:center; gap:8px}
.media-body .go .ico{width:15px; height:15px}
.clip .media-thumb{aspect-ratio:3/4; background:var(--chalk)}
.clip .media-thumb img{object-fit:cover}

/* ---------- blog listing: hero row (3 latest posts + filter panel) ---------- */
.blog-hero-row{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(220px,280px); gap:clamp(14px,2vw,20px); align-items:stretch}

.media-card.blog-hero,.media-card.blog-hero-mini{
  position:relative; background:var(--ink); border:0; overflow:hidden;
  display:flex; align-items:flex-end; text-decoration:none; color:#fff;
}
.media-card.blog-hero{min-height:clamp(300px,32vw,400px)}
.blog-hero-mini-col{display:flex; flex-direction:column; gap:clamp(14px,2vw,20px)}
.blog-hero-mini-col .media-card{flex:1; min-height:130px}

.blog-hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0}
.blog-hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,16,48,0) 32%,rgba(11,16,48,.9) 100%)}
.blog-hero-bg.blog-hero-noimg{
  background-image:radial-gradient(560px 320px at 82% 0%, rgba(36,48,122,.9), transparent 65%),
                    radial-gradient(460px 280px at 0% 100%, rgba(44,107,91,.3), transparent 65%);
  background-color:var(--ink);
}
.blog-hero-content{position:relative; z-index:1; padding:clamp(16px,2.2vw,26px); width:100%; height:100%; display:flex; flex-direction:column}
.blog-hero .blog-hero-content h3{
  font-family:var(--serif); font-style:italic; font-weight:400; color:#fff;
  font-size:clamp(1.2rem,2.4vw,1.7rem); line-height:1.22; margin-bottom:auto;
}
.blog-hero-mini .blog-hero-content h3{
  font-family:var(--serif); font-style:italic; font-weight:400; color:#fff;
  font-size:clamp(.92rem,1.4vw,1.02rem); line-height:1.3; margin-bottom:auto;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-hero-mini .blog-hero-content h3{
  font-family:var(--serif); font-style:italic; font-weight:400; color:#fff;
  font-size:clamp(.92rem,1.4vw,1.02rem); line-height:1.3; margin-bottom:auto;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-hero-content .blog-hero-excerpt{
  font-family:var(--sans); font-weight:400; margin:0 0 12px;
  font-size:var(--fs-small); line-height:1.5; color:rgba(255,255,255,.78);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-hero-mini .blog-hero-excerpt{
  font-size:var(--fs-micro); line-height:1.45; margin-bottom:8px;
  -webkit-line-clamp:2;
}
.blog-hero-content .meta{margin:0; opacity:1}
.blog-hero-content .meta span{color:rgba(255,255,255,.75); font-size:var(--fs-micro); letter-spacing:.04em; text-transform:none; font-weight:600}
.blog-hero-content .meta .ico{width:13px; height:13px; opacity:.85; color:var(--marigold)}

.blog-filter-panel{
  background:var(--sand); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(18px,2.2vw,24px); display:flex; flex-direction:column;
}
.blog-filter-panel h3{
  display:flex; align-items:center; gap:9px; font-size:var(--fs-small); letter-spacing:.06em;
  text-transform:uppercase; font-weight:700; color:var(--indigo); margin-bottom:16px;
}
.blog-filter-panel h3 .ico{width:16px; height:16px; color:var(--marigold)}
.chips-vertical{display:flex; flex-direction:column; flex-wrap:nowrap; gap:8px; margin-bottom:0}
.chips-vertical .chip{width:100%; justify-content:flex-start; background:#fff}
.chips-vertical .chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}


/* ---------------- gallery categories ---------------- */
.gallery-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.gallery-category-card{display:block;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:0 18px 40px -30px rgba(11,16,48,.5);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s ease;}
.gallery-category-card:hover{transform:translateY(-7px);box-shadow:0 28px 55px -30px rgba(11,16,48,.55);border-color:rgba(11,16,48,.18);}
.gallery-category-media{position:relative;display:block;aspect-ratio:16/10;background:linear-gradient(135deg,#eef1f7,#e2e7f1);overflow:hidden;}
.gallery-category-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease);}
.gallery-category-card:hover .gallery-category-media img{transform:scale(1.045);}
.gallery-category-placeholder{height:100%;display:grid;place-items:center;color:var(--indigo);}
.gallery-category-placeholder .ico{width:42px;height:42px;opacity:.45;}
.gallery-category-overlay{position:absolute;inset:auto 14px 14px auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--indigo);box-shadow:0 10px 24px rgba(0,0,0,.18);transform:translateY(8px);opacity:0;transition:.28s var(--ease);}
.gallery-category-card:hover .gallery-category-overlay{transform:none;opacity:1;}
.gallery-category-overlay .ico{width:18px;height:18px;}
.gallery-category-name{display:block;padding:17px 18px 19px;font-size:1rem;font-weight:700;color:var(--indigo);}
@media(max-width:980px){.gallery-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}}
@media(max-width:560px){.gallery-category-grid{grid-template-columns:1fr;}}

@media (max-width:980px){
  .blog-hero-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .blog-hero{grid-column:1/-1}
  .blog-filter-panel{grid-column:1/-1}
  .chips-vertical{flex-direction:row; flex-wrap:wrap}
  .chips-vertical .chip{width:auto}
}
@media (max-width:640px){
  .blog-hero-row{grid-template-columns:minmax(0,1fr)}
  .blog-hero-mini-col{flex-direction:row}

  /* Mobile only: move the filter panel above the "Latest / Fresh from
     the field" heading, so it's the very first thing in the section.
     The heading lives outside .blog-hero-row (it's a sibling), so a
     plain `order` on .blog-filter-panel can't reach past it — that
     only reorders within .blog-hero-row itself. Instead, #blogListShell
     (this page's specific section wrapper) becomes a column flexbox
     ONLY at this breakpoint, and .blog-hero-row is given
     display:contents so its three children (hero card, mini column,
     filter panel) become direct flex items of #blogListShell alongside
     the heading and the rest of the section — letting `order` place
     the filter panel first. Desktop and tablet layouts are completely
     unaffected: #blogListShell only becomes flex, and .blog-hero-row
     only becomes display:contents, inside this max-width:640px query. */
  #blogListShell{display:flex; flex-direction:column}
  #blogListShell > .blog-hero-row{display:contents}

  .blog-filter-panel{order:-2}
  #blogLatestHead{order:-1}
  .blog-hero{order:0}
  .blog-hero-mini-col{order:1}
  #blogListShell > .sec-head:not(#blogLatestHead){order:2}
  #blogListShell > .grid-4{order:3}
  #blogListShell > .blog-pagination{order:4}

  /* Mobile only: turn the topic chips into a single horizontally
     scrollable row instead of wrapping onto multiple lines. Desktop
     (min-width:981px, vertical stack) and tablet (max-width:980px,
     wrapped row) are untouched — this only overrides behaviour below
     640px. */
  .chips-vertical{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-bottom:6px;
    margin-bottom:-6px; /* keep panel's visual height unchanged */
  }
  .chips-vertical .chip{
    flex:0 0 auto;
    width:auto;
    white-space:nowrap;
    scroll-snap-align:start;
  }
  .chips-vertical::-webkit-scrollbar{height:5px}
  .chips-vertical::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px}


}
@media (max-width:640px){
  .blog-hero .blog-hero-content{
    justify-content:flex-start;
  }
  .blog-hero .blog-hero-content h3{
    margin-bottom:0;
  }
  .blog-hero .blog-hero-excerpt{
    margin-top:auto;
  }
}

.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,22px)}

/* ---------------- gallery categories ---------------- */
.gallery-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.gallery-category-card{display:block;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:0 18px 40px -30px rgba(11,16,48,.5);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s ease;}
.gallery-category-card:hover{transform:translateY(-7px);box-shadow:0 28px 55px -30px rgba(11,16,48,.55);border-color:rgba(11,16,48,.18);}
.gallery-category-media{position:relative;display:block;aspect-ratio:16/10;background:linear-gradient(135deg,#eef1f7,#e2e7f1);overflow:hidden;}
.gallery-category-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease);}
.gallery-category-card:hover .gallery-category-media img{transform:scale(1.045);}
.gallery-category-placeholder{height:100%;display:grid;place-items:center;color:var(--indigo);}
.gallery-category-placeholder .ico{width:42px;height:42px;opacity:.45;}
.gallery-category-overlay{position:absolute;inset:auto 14px 14px auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--indigo);box-shadow:0 10px 24px rgba(0,0,0,.18);transform:translateY(8px);opacity:0;transition:.28s var(--ease);}
.gallery-category-card:hover .gallery-category-overlay{transform:none;opacity:1;}
.gallery-category-overlay .ico{width:18px;height:18px;}
.gallery-category-name{display:block;padding:17px 18px 19px;font-size:1rem;font-weight:700;color:var(--indigo);}
@media(max-width:980px){.gallery-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}}
@media(max-width:560px){.gallery-category-grid{grid-template-columns:1fr;}}

@media (max-width:980px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .grid-4{grid-template-columns:minmax(0,1fr)} }

.blog-pagination{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-top:clamp(28px,4vw,40px)}
.pg-btn{
  min-width:42px; height:42px; padding:0 8px; border-radius:100px; border:1px solid var(--line);
  background:#fff; font-weight:700; font-size:var(--fs-small); color:var(--ink); transition:.2s;
  display:inline-flex; align-items:center; justify-content:center;
}
.pg-btn:hover:not(:disabled){border-color:var(--indigo); color:var(--indigo)}
.pg-btn.on{background:var(--indigo); border-color:var(--indigo); color:#fff}
.pg-btn:disabled{opacity:.35; cursor:not-allowed}
.pg-prev .ico{transform:rotate(180deg)}
.pg-prev .ico,.pg-next .ico{width:15px; height:15px}
.pg-ellipsis{padding:0 4px; opacity:.5; font-weight:700}

/* ---------- chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px}
.chip{font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding:10px 18px; min-height:42px; border:1px solid var(--line); border-radius:100px;
  transition:.25s; display:inline-flex; align-items:center; gap:8px; background:#fff}
.chip .ico{width:15px; height:15px}
.chip:hover{border-color:var(--indigo); color:var(--indigo)}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}
[hidden]{display:none !important}

/* ---------- timeline (events) ---------- */
.tl{position:relative; margin:0; padding:0; list-style:none}
.tl::before{content:""; position:absolute; left:23px; top:8px; bottom:8px; width:2px; background:var(--line)}
.tl-item{position:relative; padding:0 0 clamp(24px,3vw,36px) 68px}
.tl-dot{position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%;
  background:var(--marigold-soft); color:var(--indigo); display:grid; place-items:center; border:4px solid var(--paper)}
.sec-chalk .tl-dot,.sec-sand .tl-dot{border-color:var(--chalk)}
.tl-dot .ico{width:20px; height:20px}
.tl-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,3vw,28px); transition:.3s var(--ease)}
.tl-card:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
.tl-card h3{font-size:var(--fs-h3); margin-bottom:8px}
.tl-card p{font-size:var(--fs-small); opacity:.78; margin-bottom:0}
.tl-card p + p{margin-top:10px}

/* ---------- gallery ---------- */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:clamp(10px,1.6vw,16px)}
.gal figure{margin:0; position:relative; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:4/3;
  background:var(--indigo-2); cursor:zoom-in}
.gal.tall figure:nth-child(4n+1){aspect-ratio:3/4}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute; inset:auto 0 0 0; padding:16px; color:#fff;
  background:linear-gradient(transparent,rgba(11,16,48,.9)); font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  opacity:0; transform:translateY(8px); transition:.3s var(--ease)}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1; transform:none}
.gal figure .play{position:absolute; inset:0; display:grid; place-items:center; color:#fff;
  background:linear-gradient(transparent 40%, rgba(11,16,48,.6)); pointer-events:none}
.gal figure .play span{width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.16);
  backdrop-filter:blur(4px); display:grid; place-items:center; border:1px solid rgba(255,255,255,.4); transition:.3s var(--ease)}
.gal figure:hover .play span{background:var(--marigold); color:var(--ink); border-color:var(--marigold); transform:scale(1.08)}
.gal figure .play .ico{width:24px; height:24px}
.gal-empty,.gal-error{grid-column:1/-1; padding:clamp(28px,5vw,48px); text-align:center; opacity:.65; font-size:var(--fs-small)}
.gal-loadmore{margin-top:26px; text-align:center}

/* ---------- gallery preview blocks (home page: photos / videos) ---------- */
.gal-block{margin-top:clamp(30px,4.4vw,46px)}
.gal-block:first-of-type{margin-top:0}
.gal-block-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 22px; margin-bottom:16px}
.gal-block-head h3{display:flex; align-items:center; gap:10px; font-size:var(--fs-h3); margin:0}
.gal-block-head h3 .ico{width:22px; height:22px; color:var(--marigold); flex:none}
.gal-block-head .go{font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--indigo); display:inline-flex; align-items:center; gap:8px; text-decoration:none; white-space:nowrap; transition:color .25s}
.gal-block-head .go .ico{width:15px; height:15px; transition:transform .25s var(--ease)}
.gal-block-head .go:hover{color:var(--marigold)}
.gal-block-head .go:hover .ico{transform:translateX(4px)}
@media (max-width:560px){
  .gal-block-head{flex-direction:column; align-items:flex-start}
}

.lightbox .lb-video{display:none; width:min(86vw,960px)}
.lightbox .lb-video iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:var(--r-sm); box-shadow:0 40px 80px -40px #000; display:block}

.lightbox{position:fixed; inset:0; z-index:200; background:rgba(11,16,48,.94); display:none;
  place-items:center; padding:clamp(16px,4vw,48px)}
.lightbox.on{display:grid}
.lightbox img{max-width:100%; max-height:82vh; border-radius:var(--r-sm); box-shadow:0 40px 80px -40px #000}
.lightbox .cap{color:rgba(255,255,255,.8); text-align:center; margin-top:16px; font-size:var(--fs-small)}
.lightbox .x{position:absolute; top:18px; right:18px; width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center}
.lightbox .x:hover{background:var(--marigold); color:var(--ink)}
.lightbox .nav-btn{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px;
  border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center}
.lightbox .nav-btn:hover{background:var(--marigold); color:var(--ink)}
.lightbox .prev{left:14px} .lightbox .next{right:14px}

/* ---------- awards ---------- */
.award{display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(20px,3vw,28px); transition:.3s var(--ease)}
.award:hover{box-shadow:var(--shadow); transform:translateY(-4px)}
.award .icon-badge{margin-bottom:0; width:48px; height:48px}
.award h3{font-size:var(--fs-h3); margin-bottom:6px}
.award p{font-size:var(--fs-small); opacity:.76; margin:0}

/* ---------- stats / values ---------- */
.values{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:clamp(18px,2.5vw,30px)}
.value h3{font-size:var(--fs-h3); margin-bottom:8px}
.value p{font-size:var(--fs-small); opacity:.76; margin:0}
.on-dark .value p{color:rgba(255,255,255,.76)}

/* ---------- profile ---------- */
.profile-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,5vw,72px); align-items:start}
.profile-media .btn{width:100%; margin-top:16px}
.btn-download{background:var(--indigo); color:#fff; min-height:54px; padding:14px 22px; border-radius:var(--r-sm);
  font-size:clamp(.92rem,1.15vw,1.02rem); letter-spacing:.03em; box-shadow:0 16px 30px -16px rgba(36,48,122,.55)}
.btn-download:hover{background:var(--marigold); color:var(--ink); transform:translateY(-2px);
  box-shadow:0 16px 30px -16px rgba(242,167,27,.6)}
.download-status{margin-top:12px; font-size:var(--fs-micro); opacity:.75}
.download-status.is-error{color:#c0392b; opacity:1}
.profile-media{position:relative}
.profile-figure{position:relative}
@media (min-width:981px){
  /* The photo + button column is much shorter than the biography
     column beside it. Left alone, it simply ends early and leaves a
     large dead gap for the rest of the scroll. Pinning it in place
     keeps it in view instead. */
  .profile-media{position:sticky; top:110px; align-self:start}
}
.profile-media img{border-radius:var(--r); aspect-ratio:4/5; object-fit:cover; width:100%; box-shadow:var(--shadow)}
.profile-media .stamp{position:absolute; right:-14px; bottom:94px; background:var(--marigold); color:var(--ink);
  padding:16px 20px; border-radius:var(--r-sm); max-width:min(240px,74%); font-size:var(--fs-micro);
  letter-spacing:.1em; text-transform:uppercase; line-height:1.7; font-weight:600; box-shadow:var(--shadow)}
.lede{font-size:var(--fs-lede); line-height:1.6; color:var(--indigo); font-weight:500}
.facts{list-style:none; margin:28px 0 0; padding:0; border-top:1px solid var(--line)}
.facts li{display:grid; grid-template-columns:minmax(120px,160px) minmax(0,1fr); gap:6px 18px;
  padding:15px 0; border-bottom:1px solid var(--line)}
.facts .k{font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; opacity:.6;
  font-weight:700; display:flex; align-items:center; gap:8px; padding-top:4px}
.facts .k .ico{width:15px; height:15px; color:var(--marigold)}
.facts .v{font-weight:600; font-size:var(--fs-small); letter-spacing:-.01em}

/* ---------- vision section (home page, #mission) ---------- */
/* Icon + "The Vision" heading sit on one row above the two columns,
   so both paragraphs start on the same top line, side by side. */
.vision-title{display:flex; align-items:center; gap:16px; margin-bottom:clamp(18px,3vw,28px)}
.vision-title .icon-badge{margin-bottom:0}
.vision-title h3{font-size:var(--fs-h3); color:var(--marigold); margin:0}
.vision-cols{align-items:start}
.vision-cols p{color:rgba(255,255,255,.78); margin:0}

.pullquote{margin:clamp(36px,5vw,64px) 0 0; padding:clamp(26px,4vw,44px) 0 0; border-top:1px solid var(--line-lt);
  font-weight:800; letter-spacing:-.035em; font-size:clamp(1.5rem,5vw,3rem); line-height:1.1; max-width:22ch}
.pullquote b{color:var(--marigold)}
.quote-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,3.5vw,36px)}
.quote-card .ico{width:30px; height:30px; color:var(--marigold); margin-bottom:14px}
.quote-card blockquote{margin:0; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.15rem,2.6vw,1.6rem); line-height:1.5; letter-spacing:-.01em}
.quote-card cite{display:block; margin-top:16px; font-family:var(--sans); font-style:normal;
  font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; font-weight:700; opacity:.6}

/* ---------- quotes page: numbered quote tiles ---------- */
.quote-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:clamp(18px,2.5vw,28px)}
.quote-tile{
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(30px,3.4vw,38px) clamp(24px,3vw,30px) clamp(24px,3vw,28px);
  display:flex; flex-direction:column; transition:.3s var(--ease); overflow:hidden;
}
.quote-tile:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.qt-num{
  position:absolute; top:18px; left:18px; width:34px; height:34px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:var(--fs-micro); font-weight:800;
  display:grid; place-items:center; letter-spacing:.02em;
}
.qt-icon{width:24px; height:24px; color:var(--marigold); margin:6px 0 20px 46px; flex:none}
.quote-tile h3{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.05rem,2vw,1.24rem); line-height:1.5; color:var(--indigo); margin-bottom:12px;
}
.quote-tile p{font-size:var(--fs-small); opacity:.72; margin-bottom:22px}
.qt-bar{margin-top:auto; display:block; height:3px; background:var(--line); position:relative; overflow:hidden; border-radius:3px}
.qt-bar::after{content:""; position:absolute; left:0; top:0; bottom:0; width:42%; background:var(--marigold); transition:width .35s var(--ease)}
.quote-tile:hover .qt-bar::after{width:100%}
.quote-tile:hover .qt-icon{color:var(--indigo)}

/* ---------- profile: stat strip ---------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2.6vw,28px); margin-top:clamp(30px,4vw,46px); padding-top:clamp(26px,3.5vw,36px);
  border-top:1px solid var(--line-lt);
}
.stat{
  text-align:center; padding:clamp(14px,1.8vw,20px) 8px; border-right:1px solid var(--line-lt);
}
.stat:last-child{border-right:0}
.sec:not(.on-dark) .stat{border-right-color:var(--line)}

.on-dark .stat-strip{border-top-color:var(--line-lt)}
.sec:not(.on-dark) .stat-strip{border-top-color:var(--line)}
.stat b{display:block; font-family:var(--sans); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.5rem,2.6vw,2.5rem); color:var(--marigold); line-height:1}
.stat span{display:block; margin-top:8px; font-size:var(--fs-micro); letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; opacity:.7}
.sec:not(.on-dark) .stat b{color:var(--indigo)}
@media (max-width:640px){
  .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:22px}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){padding-bottom:20px; border-bottom:1px solid var(--line-lt)}
  .sec:not(.on-dark) .stat:nth-child(1),.sec:not(.on-dark) .stat:nth-child(2){border-bottom-color:var(--line)}
}

/* ---------- profile: recognition strip ---------- */
.rec-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:clamp(14px,2vw,20px)}
.rec-card{display:flex; gap:16px; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px; text-decoration:none; transition:.3s var(--ease)}
.rec-card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent}
.rec-card .icon-badge{margin-bottom:0; width:46px; height:46px; flex:none}
.rec-card h3{font-size:var(--fs-body); font-weight:700; margin-bottom:3px; color:var(--ink)}
.rec-card p{font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase; opacity:.6; margin:0; font-weight:600}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(30px,5vw,68px); align-items:start}
.contact-list{list-style:none; padding:0; margin:26px 0 0}
.contact-list li{padding:16px 0; border-bottom:1px solid var(--line); display:flex; gap:16px; align-items:flex-start}
.contact-list .icon-badge{margin-bottom:0; width:44px; height:44px}
.contact-list .icon-badge .ico{width:19px; height:19px}
.contact-list .k{font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase; opacity:.55;
  display:block; margin-bottom:3px; font-weight:700}
.contact-list a,.contact-list .v{font-weight:600; font-size:clamp(.9rem,2.4vw,1.05rem);
  text-decoration:none; letter-spacing:-.015em; overflow-wrap:anywhere}
.contact-list a:hover{color:var(--indigo)}

.form{background:var(--ink); color:#fff; padding:clamp(24px,4vw,40px); border-radius:var(--r)}
.form h3{font-size:var(--fs-h3); margin-bottom:8px}
.form > p{color:rgba(255,255,255,.68); font-size:var(--fs-small); margin-bottom:22px}
.field{margin-bottom:15px}
.field label{display:block; font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:rgba(255,255,255,.62); margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%; padding:13px 15px; background:rgba(255,255,255,.06); border:1px solid var(--line-lt);
  border-radius:var(--r-sm); color:#fff; font-family:var(--sans); font-size:16px; transition:border-color .2s,background .2s;
}
.field textarea{resize:vertical; min-height:120px}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),
  linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.field select option{background:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--marigold); background:rgba(255,255,255,.1)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.36)}
.form-note{font-size:var(--fs-micro); letter-spacing:.08em; font-weight:600; margin-top:14px; min-height:1.2em}
.form-note.ok{color:var(--marigold)} .form-note.err{color:#FF9B8A}
.map{border:0; width:100%; aspect-ratio:16/9; border-radius:var(--r); filter:grayscale(.2) contrast(1.05)}

/* ---------- portfolio download popup ---------- */
.pf-modal{position:fixed; inset:0; z-index:200; background:rgba(11,16,48,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:24px}
.pf-modal.on{display:flex}
.pf-card{position:relative; width:100%; max-width:420px; background:var(--ink); color:#fff;
  padding:clamp(26px,4vw,36px); border-radius:var(--r); box-shadow:0 40px 90px -30px rgba(0,0,0,.65)}
.pf-card h3{font-size:var(--fs-h3); margin-bottom:8px}
.pf-card > p{color:rgba(255,255,255,.68); font-size:var(--fs-small); margin-bottom:22px}
.pf-close{position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.08); color:#fff; border:0; transition:background .2s,color .2s}
.pf-close:hover{background:var(--marigold); color:var(--ink)}
.pf-card .btn{width:100%}

/* ---------- join band ---------- */
.band{background:var(--marigold); color:var(--ink)}
.band .shell{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,40px); padding-block:clamp(36px,5vw,58px)}
.band h2{font-size:clamp(1.4rem,3.4vw,2.3rem); max-width:20ch}
.band p{margin:10px 0 0; max-width:46ch; font-size:var(--fs-small); opacity:.82}
.band .ico-hero{width:46px; height:46px; margin-bottom:14px}
.band .btn-solid{background:var(--ink)}
.band .btn-solid:hover{background:#fff; color:var(--ink)}

/* ---------- footer ---------- */
.foot{background:var(--indigo-2); color:#fff; padding-block:clamp(44px,6vw,74px) 0}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:clamp(26px,4vw,48px)}
.foot h4{font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--marigold); margin-bottom:16px}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:10px}
.foot a{text-decoration:none; color:rgba(255,255,255,.78); font-size:var(--fs-small);
  transition:color .2s; display:inline-flex; align-items:center; gap:9px}
.foot a .ico{width:15px; height:15px; opacity:.6}
.foot a:hover{color:var(--marigold)} .foot a:hover .ico{opacity:1}
.foot-about p{color:rgba(255,255,255,.68); font-size:var(--fs-small); max-width:36ch}
.sub{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.sub input{flex:1 1 150px; min-width:0; padding:12px 14px; background:rgba(255,255,255,.07);
  border:1px solid var(--line-lt); border-radius:var(--r-sm); color:#fff; font-family:var(--sans); font-size:16px}
.sub input:focus{outline:none; border-color:var(--marigold)}
.sub button{padding:12px 20px; min-height:46px; background:var(--marigold); color:var(--ink);
  border-radius:var(--r-sm); font-weight:700; font-size:var(--fs-small); transition:.25s}
.sub button:hover{background:#fff}
.sub-note{font-size:var(--fs-micro); letter-spacing:.08em; font-weight:600; color:var(--marigold); margin-top:10px; min-height:1em}
.foot-social{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.foot-social a{width:42px; height:42px; border:1px solid var(--line-lt); border-radius:50%;
  display:grid; place-items:center; transition:.25s}
.foot-social a .ico{width:17px; height:17px; opacity:.85}
.foot-social a:hover{background:var(--marigold); color:var(--ink); border-color:var(--marigold)}
.foot-base{margin-top:clamp(32px,5vw,58px); border-top:1px solid var(--line-lt); padding-block:22px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:var(--fs-micro);
  letter-spacing:.1em; font-weight:500; color:rgba(255,255,255,.52)}

/* ---------- profile page: circular social badges (post-download) ---------- */
.social-badges{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:50px}
.social-badges a{
  width:70px; height:70px; border-radius:50%; border:1px solid rgb(248, 182, 182);
  background:var(--marigold); color:var(--ink);
  display:grid; place-items:center; transition:.25s var(--ease);
}
.social-badges a .ico{width:35px; height:35px; opacity:1}
.social-badges a:hover{background:var(--indigo); color:#fff; transform:translateY(-3px); box-shadow:0 14px 26px -14px rgba(36,48,122,.5)}

@media (max-width:640px){
  .social-badges{
    flex-wrap:nowrap;
    justify-content:center;
    gap:6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:0;
    scrollbar-width:none;      /* Firefox: hide scrollbar */
    -ms-overflow-style:none;   /* old Edge/IE: hide scrollbar */
  }
  .social-badges::-webkit-scrollbar{display:none} /* Chrome/Safari: hide scrollbar */
  .social-badges a{
    width:42px;
    height:42px;
    flex:0 0 auto;
  }
  .social-badges a .ico{width:18px; height:18px}
}


.totop{position:fixed; right:clamp(14px,3vw,22px); bottom:clamp(14px,3vw,22px); z-index:70;
  width:48px; height:48px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center;
  box-shadow:0 16px 30px -16px rgba(11,16,48,.9); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:.3s var(--ease)}
.totop.show{opacity:1; visibility:visible; transform:none}
.totop:hover{background:var(--marigold); color:var(--ink)}

/* ---------- motion ---------- */
.rise{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rise.in{opacity:1; transform:none}
.rise.d1{transition-delay:.08s} .rise.d2{transition-delay:.16s} .rise.d3{transition-delay:.24s}
@keyframes hero-in{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.hero-anim > *{animation:hero-in .9s var(--ease) both}
.hero-anim > *:nth-child(1){animation-delay:.05s}
.hero-anim > *:nth-child(2){animation-delay:.14s}
.hero-anim > *:nth-child(3){animation-delay:.23s}
.hero-anim > *:nth-child(4){animation-delay:.32s}
.hero-anim > *:nth-child(5){animation-delay:.41s}

/* ---------- home hero ---------- */
.hero{position:relative; background:var(--ink); color:#fff; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0;
  background:radial-gradient(900px 520px at 82% 18%, rgba(36,48,122,.95), transparent 68%),
             radial-gradient(700px 500px at 6% 96%, rgba(44,107,91,.34), transparent 70%)}
.hero::after{content:""; position:absolute; inset:0; opacity:.28; mix-blend-mode:soft-light;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:clamp(32px,6vw,52px) clamp(32px,6vw,52px);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 82%);
          mask-image:radial-gradient(circle at 50% 40%,#000,transparent 82%)}
.hero .shell{position:relative; z-index:2; display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(30px,4vw,64px);
  align-items:center; padding-block:clamp(46px,8vw,100px)}
.hero-quote{font-size:var(--fs-h1); line-height:1.05; letter-spacing:-.035em; margin:.5rem 0 1.3rem; font-weight:800}
.hero-quote em{font-family:var(--serif); font-style:italic; font-weight:300; letter-spacing:-.01em; color:var(--marigold)}
.hero-sig{font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.62); margin-bottom:26px}
.hero-name{font-weight:800; letter-spacing:-.03em; font-size:clamp(1rem,2.4vw,1.28rem); margin-bottom:8px}
.roles{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0; list-style:none}
.roles li{font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:8px 14px; border:1px solid var(--line-lt); border-radius:100px; color:rgba(255,255,255,.84);
  display:inline-flex; align-items:center; gap:7px}
.roles .ico{width:14px; height:14px; color:var(--marigold)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.portrait{position:relative; width:100%; animation:hero-in 1.1s var(--ease) .3s both}
.portrait-frame{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5;
  background:var(--indigo-2); box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.portrait-frame img{width:100%; height:100%; object-fit:cover; object-position:center 18%; filter:saturate(.88) contrast(1.05)}
.portrait-frame::after{content:""; position:absolute; inset:0;
  background:linear-gradient(190deg,rgba(11,16,48,0) 42%,rgba(11,16,48,.88))}
.portrait-tag{position:absolute; z-index:3; left:0; right:0; bottom:0; padding:clamp(16px,3vw,22px);
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.86); line-height:1.7}
.portrait-tag b{display:block; font-size:clamp(.95rem,2.4vw,1.05rem); letter-spacing:-.02em;
  color:var(--marigold); text-transform:none; margin-bottom:4px; font-weight:800}

.gold-rule{position:absolute; left:-14px; top:34px; bottom:34px; width:4px; background:var(--marigold); border-radius:4px}

/* ---------- blog detail ---------- */
.post-loading{display:flex; align-items:center; gap:14px; padding:clamp(40px,8vw,70px) 0; color:var(--indigo); font-weight:600}
.post-spin{width:22px; height:22px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--marigold); flex:none; animation:post-spin .8s linear infinite}
@keyframes post-spin{to{transform:rotate(360deg)}}
.post-error{padding:clamp(40px,8vw,70px) 0; max-width:52ch}
.post-error h2{font-size:var(--fs-h3); margin-bottom:10px}
.post-error p{opacity:.75}

.post-layout{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,48px)}
.post-cover{border-radius:var(--r); overflow:hidden; margin-bottom:clamp(22px,3vw,32px); aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--indigo),var(--ink))}
.post-cover img{width:100%; height:100%; object-fit:cover}
.post-body{font-size:var(--fs-body); line-height:1.9}
.post-body img{max-width:100%; height:auto; display:block; border-radius:var(--r); margin:1.5em auto; box-shadow:var(--shadow)}
.post-body p{margin:0 0 1.3em}
.post-body h3{font-size:var(--fs-h3); margin:1.5em 0 .6em}
.post-body blockquote{margin:1.7em 0; padding:18px 24px; border-left:3px solid var(--marigold);
  background:var(--sand); border-radius:0 var(--r-sm) var(--r-sm) 0; font-family:var(--serif);
  font-style:italic; font-size:var(--fs-lede); color:var(--indigo)}

.post-aside{display:flex; flex-direction:column; gap:20px}
.post-card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.6vw,26px)}
.post-card h4{font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; font-weight:700; opacity:.55; margin-bottom:14px}
.post-author{display:flex; align-items:center; gap:12px}
.post-author .icon-badge{margin:0; display:flex; align-items:center; justify-content:center}
.post-author b{display:block; font-size:var(--fs-small)}
.post-author span{display:block; font-size:var(--fs-micro); opacity:.6; margin-top:2px}
.post-share{display:flex; gap:10px; flex-wrap:wrap}
.post-share a{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  text-decoration:none; color:var(--ink); transition:.25s var(--ease)}
.post-share a:hover{background:var(--marigold); border-color:var(--marigold); color:var(--ink); transform:translateY(-2px)}
.post-share .ico{width:16px; height:16px}

.post-back{display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:var(--indigo); text-decoration:none; margin-bottom:22px}
.post-back .ico{width:14px; height:14px; transform:rotate(180deg); transition:transform .25s var(--ease)}
.post-back:hover .ico{transform:rotate(180deg) translateX(3px)}

@media (min-width:981px){
  .post-layout{grid-template-columns:minmax(0,1fr) 300px}
  .post-aside{position:sticky; top:100px; align-self:start}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav-link{padding:10px 8px}
  .rights-grid{grid-template-columns:repeat(10,minmax(0,1fr))}
}
@media (max-width:1024px){ .nav-link{font-size:.79rem; padding:10px 7px} }

/* ---------------- gallery categories ---------------- */
.gallery-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.gallery-category-card{display:block;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:0 18px 40px -30px rgba(11,16,48,.5);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s ease;}
.gallery-category-card:hover{transform:translateY(-7px);box-shadow:0 28px 55px -30px rgba(11,16,48,.55);border-color:rgba(11,16,48,.18);}
.gallery-category-media{position:relative;display:block;aspect-ratio:16/10;background:linear-gradient(135deg,#eef1f7,#e2e7f1);overflow:hidden;}
.gallery-category-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease);}
.gallery-category-card:hover .gallery-category-media img{transform:scale(1.045);}
.gallery-category-placeholder{height:100%;display:grid;place-items:center;color:var(--indigo);}
.gallery-category-placeholder .ico{width:42px;height:42px;opacity:.45;}
.gallery-category-overlay{position:absolute;inset:auto 14px 14px auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--indigo);box-shadow:0 10px 24px rgba(0,0,0,.18);transform:translateY(8px);opacity:0;transition:.28s var(--ease);}
.gallery-category-card:hover .gallery-category-overlay{transform:none;opacity:1;}
.gallery-category-overlay .ico{width:18px;height:18px;}
.gallery-category-name{display:block;padding:17px 18px 19px;font-size:1rem;font-weight:700;color:var(--indigo);}
@media(max-width:980px){.gallery-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}}
@media(max-width:560px){.gallery-category-grid{grid-template-columns:1fr;}}

@media (max-width:980px){
  .burger{display:grid}
  .nav{position:fixed; left:0; right:0; top:0; height:100vh; height:100dvh;
    padding:86px var(--gut) 48px; flex-direction:column;
    align-items:stretch; gap:0; background:var(--paper); overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); transition:transform .38s var(--ease); z-index:55}
  .nav.open{transform:none}
  /* FIX: .nav is a DOM child of .head, so .head's z-index:60 does
     nothing to order .nav against .brand/.burger — they're all in
     the SAME local stacking context that .head creates. .nav
     (position:fixed, z-index:55, a positive z-index) was painting
     above .brand/.burger (no z-index of their own => auto/0),
     hiding the logo and the close (X) icon behind the open menu
     panel. Giving the logo and burger their own stacking context
     with a higher z-index keeps them visible and tappable on top of
     the open menu, exactly like the collapsed header should look. */
  .brand,.burger{z-index:56}
  .nav-link{padding:15px 0; font-size:1.05rem; justify-content:space-between; border-bottom:1px solid var(--line); min-height:52px}
  .nav-link::after{display:none}
  /* Dropdown trigger (e.g. "Gallery") should read as expandable at a
     glance: coloured + bold at rest, a solid marigold caret instead
     of the default faint grey one, and a soft fill once it's open. */
  .nav-link[data-drop]{color:var(--indigo); font-weight:700}
  .nav-link[data-drop] .caret{opacity:1; color:var(--marigold)}
  .nav > li.open > .nav-link[data-drop]{background:var(--marigold-soft); border-radius:var(--r-xs); padding-inline:10px}
  .nav > li.cta{margin-top:22px}
  .nav > li.cta .btn{width:100%}
  .menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0;
    background:transparent; padding:4px 0 10px 12px; display:none; min-width:0}
  .nav > li.open .menu{display:block}
  .menu a{padding:12px 0; font-size:.95rem; min-height:46px}
  .hero .shell{grid-template-columns:minmax(0,1fr)}
  .portrait{order:-1; max-width:min(420px,84%); margin-inline:auto}
  .gold-rule{display:none}
  .profile-grid{grid-template-columns:minmax(0,1fr)}
  .profile-media{max-width:min(440px,90%); margin-inline:auto; text-align:center}
}
@media (max-width:640px){
  .rights-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .topbar .shell{justify-content:center; padding-block:9px}
  .topbar .social{order:2; justify-content:center; width:100%}
  .right-read{flex-direction:column; gap:6px; align-items:flex-start}
  .right-read .num{padding-top:0}
  .facts li{grid-template-columns:minmax(0,1fr)}
  .hero-cta{width:100%} .hero-cta .btn{flex:1 1 100%}
  .profile-media .stamp{position:static; margin-top:14px; max-width:none; text-align:center}
  .tl::before{left:17px}
  .tl-item{padding-left:54px}
  .tl-dot{width:38px; height:38px}
  .tl-dot .ico{width:17px; height:17px}
  .foot-base{justify-content:flex-start}
  .band .shell{flex-direction:column; align-items:flex-start}
  .band .btn{width:100%}
  .gal figcaption{opacity:1; transform:none}
}
@media (max-width:420px){
  .rights-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .brand .tag{display:none}
  .lightbox .nav-btn{width:44px; height:44px}
}
@media (min-width:1600px){ :root{--shell:1360px} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .rise{opacity:1; transform:none}
  html{scroll-behavior:auto}
}
@media print{
  .head,.topbar,.totop,.form,.sub,.band,.lightbox{display:none !important}
  body{background:#fff; color:#000}
}
/* ============================================================
   ADDITIONS — brand tagline, home profile, social links,
   News & Media albums, album upload form
   ============================================================ */
.brand .tag{letter-spacing:.06em}
.profile-text p{margin:0 0 14px; line-height:1.7; opacity:.9}
.hero .hero-name-lg{font-size:var(--fs-h1); line-height:1.05; letter-spacing:-.035em; margin:.5rem 0 .6rem; font-weight:800}
.hero .hero-tagline{font-size:clamp(1rem,2vw,1.3rem); font-family:var(--serif); font-style:italic; color:var(--marigold); margin:0 0 22px}

/* social links section (home) */
.social-links{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:26px}
.social-links a{display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:999px;
  border:1px solid rgba(11,16,48,.14); background:#fff; color:var(--ink,#0B1030); text-decoration:none; font-weight:600;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease}
.social-links a .ico{width:20px; height:20px}
.social-links a:hover{transform:translateY(-3px); background:var(--ink,#0B1030); color:#fff; box-shadow:0 14px 28px -16px rgba(11,16,48,.6)}

/* album grid */
.album-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
@media(max-width:980px){.album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.album-grid{grid-template-columns:1fr}}
.album-grid .gal-empty,.album-grid .gal-error{grid-column:1/-1; text-align:center; padding:46px 0; color:var(--muted,#5b6478)}
.album-card{position:relative; display:block; border-radius:18px; overflow:hidden; background:#fff; text-decoration:none; color:inherit;
  border:1px solid rgba(11,16,48,.10); box-shadow:0 10px 26px -20px rgba(11,16,48,.5); transition:transform .3s ease, box-shadow .3s ease}
.album-card:hover,.album-card:focus-visible{transform:translateY(-6px); box-shadow:0 28px 52px -28px rgba(11,16,48,.6)}
.album-media{display:block; aspect-ratio:4/3; background:linear-gradient(135deg,#eef1f7,#e2e7f1); overflow:hidden}
.album-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease}
.album-card:hover .album-media img{transform:scale(1.06)}
.album-info{display:block; padding:16px 18px 18px}
.album-info b{display:block; font-size:1.05rem; margin-bottom:4px}
.album-info small{opacity:.65; font-size:.82rem}
.album-hover{position:absolute; inset:0 0 auto 0; aspect-ratio:4/3; display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  padding:18px; color:#fff; background:linear-gradient(180deg,rgba(6,10,30,.15),rgba(6,10,30,.88)); opacity:0; transition:opacity .3s ease}
.album-card:hover .album-hover,.album-card:focus-visible .album-hover{opacity:1}
.album-hover span{font-size:.92rem; line-height:1.5}
.album-hover em{font-style:normal; font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--marigold,#f5b73a)}
@media(hover:none){.album-hover{display:none}.album-info .album-desc{display:block}}
.album-info .album-desc{display:none; margin-top:8px; font-size:.88rem; opacity:.8}
.album-head-desc{max-width:760px; margin:0 0 8px; line-height:1.7}
.gal.contain figure{aspect-ratio:4/3; background:#eef1f7}
.gal.contain img{object-fit:contain}

/* album upload form */
.album-form{background:#fff; border:1px solid rgba(11,16,48,.10); border-radius:18px; padding:clamp(18px,3vw,32px); box-shadow:0 10px 26px -20px rgba(11,16,48,.5)}
.album-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.album-form .row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px}
@media(max-width:700px){.album-form .row2,.album-form .row3{grid-template-columns:1fr}}
.album-form label{display:block; font-weight:600; font-size:.85rem; margin:0 0 6px}
.album-form input,.album-form select,.album-form textarea{width:100%; padding:11px 13px; border:1px solid rgba(11,16,48,.2); border-radius:10px; font:inherit; background:#fff}
.album-form textarea{min-height:84px; resize:vertical}
.album-form .field{margin-bottom:16px}
.photo-row{position:relative; border:1px dashed rgba(11,16,48,.25); border-radius:14px; padding:16px; margin-bottom:14px; background:#f8f9fc}
.photo-row .row-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-weight:700; font-size:.85rem}
.photo-row .rm{border:0; background:transparent; color:#b3261e; font-weight:700; cursor:pointer; font-size:.85rem}
.photo-row .prev{display:block; max-width:120px; max-height:90px; margin-top:8px; border-radius:8px}
.album-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:8px}
.album-note{margin-top:14px; font-size:.9rem}
.album-note.ok{color:#1a7f37}.album-note.err{color:#b3261e}
.saved-albums{margin-top:34px}
.saved-albums li{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(11,16,48,.1)}
.saved-albums ul{list-style:none; padding:0; margin:0}
.saved-albums button{border:1px solid #b3261e; color:#b3261e; background:#fff; border-radius:8px; padding:6px 12px; cursor:pointer; font-weight:600}
.brand .tag{font-size:.6rem; letter-spacing:.03em}
@media(min-width:981px){.nav{gap:2px}.nav .nav-link{padding-left:10px; padding-right:10px}}
.menu a.vmenu img{width:30px; height:30px; object-fit:contain; border-radius:6px; background:#fff; flex:none}
.menu a.vmenu{white-space:nowrap; background:transparent !important; color:var(--ink)}
.menu a.vmenu:hover{background:var(--sand) !important; color:var(--indigo)}