/* ═══════════════════════════════════════════════════════════════════
   NEWS CAROUSEL — shared component (isaacfloyd.com · spatialapex.co · fgkidsproject.com)
   Same file on every site. Each site brands it by setting the --nc-* variables
   on .nc in its own stylesheet. Content lives in news/news.js.
   ═══════════════════════════════════════════════════════════════════ */
.nc{
  --nc-bg:transparent; --nc-ink:#241812; --nc-muted:rgba(36,24,18,.7); --nc-card:#fff;
  --nc-accent:#B85C38; --nc-accent-2:#1EB397; --nc-sticker:#F3D6A0;
  --nc-border:3px solid var(--nc-ink); --nc-radius:16px;
  --nc-shadow:8px 8px 0 var(--nc-accent), 8px 8px 0 3px var(--nc-ink);
  --nc-tilt:1deg; --nc-card-w:clamp(250px,24vw,300px);
  --nc-font-display:Georgia,serif; --nc-font-body:system-ui,sans-serif; --nc-font-mono:ui-monospace,monospace;
  position:relative; background:var(--nc-bg); color:var(--nc-ink); padding:clamp(56px,8vw,96px) 0;
}
.nc-head{max-width:1180px;margin:0 auto 26px;padding:0 clamp(16px,3vw,40px);display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.nc-kicker{font-family:var(--nc-font-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--nc-accent);display:block;margin-bottom:10px}
.nc-title{margin:0;font-family:var(--nc-font-display);font-size:clamp(34px,5vw,58px);line-height:1;letter-spacing:-.01em}
.nc-controls{display:flex;gap:10px}
.nc-btn{width:48px;height:48px;border-radius:50%;border:var(--nc-border);background:var(--nc-card);color:var(--nc-ink);display:grid;place-items:center;cursor:pointer;box-shadow:3px 3px 0 var(--nc-ink);transition:transform .15s,box-shadow .15s,opacity .2s}
@media (hover:hover) and (pointer:fine){.nc-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--nc-ink)}}
.nc-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nc-ink)}
.nc-btn[disabled]{opacity:.35;cursor:default;transform:none}
.nc-btn svg{width:20px;height:20px}

.nc-viewport{overflow:hidden}
.nc-track{list-style:none;margin:0;display:flex;gap:clamp(18px,2.4vw,30px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:18px max(clamp(16px,3vw,40px),calc((100vw - 1180px)/2 + 40px)) 30px;scrollbar-width:none;overscroll-behavior-x:contain}
.nc-track::-webkit-scrollbar{display:none}
.nc-card{flex:0 0 var(--nc-card-w);scroll-snap-align:start;scroll-margin-left:max(clamp(16px,3vw,40px),calc((100vw - 1180px)/2 + 40px));
  transform:rotate(calc(var(--nc-tilt) * var(--dir,1)));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nc-card:nth-child(even){--dir:-1}
@media (hover:hover) and (pointer:fine){.nc-card:hover,.nc-card:focus-within{transform:rotate(0) translateY(-6px)}}
.nc-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;background:var(--nc-card);border:var(--nc-border);border-radius:var(--nc-radius);box-shadow:var(--nc-shadow);overflow:hidden;cursor:pointer;font:inherit;text-align:left;padding:0;width:100%}
.nc-link:focus-visible{outline:3px solid var(--nc-accent-2);outline-offset:4px}
.nc-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--nc-media-bg,#eee);border-bottom:var(--nc-border)}
.nc-media img,.nc-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.nc-media.fit img{object-fit:contain;object-position:bottom;padding:8% 6% 0}
.nc-media.logo img{object-fit:contain;padding:18%}
@media (hover:hover) and (pointer:fine){.nc-card:hover .nc-media img{transform:scale(1.04)}}
.nc-tag{position:absolute;left:12px;top:12px;z-index:2;font-family:var(--nc-font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--nc-card);color:var(--nc-ink);border:2px solid var(--nc-ink);transform:rotate(-3deg)}
.nc-new{position:absolute;right:10px;top:10px;z-index:2;width:62px;height:62px;display:grid;place-items:center;transform:rotate(12deg)}
.nc-new svg{position:absolute;inset:0;width:100%;height:100%}
.nc-new span{position:relative;font-family:var(--nc-font-display);font-size:15px;color:var(--nc-ink)}
.nc-play{position:absolute;left:50%;top:50%;z-index:2;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--nc-accent);border:3px solid var(--nc-ink);display:grid;place-items:center;box-shadow:3px 3px 0 var(--nc-ink);transition:transform .2s}
.nc-play svg{width:24px;height:24px;margin-left:4px;fill:var(--nc-card)}
@media (hover:hover) and (pointer:fine){.nc-card:hover .nc-play{transform:scale(1.08)}}
.nc-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.nc-body h3{margin:0;font-family:var(--nc-font-display);font-size:21px;line-height:1.15}
.nc-body p{margin:0;font-family:var(--nc-font-body);font-size:14.5px;line-height:1.5;color:var(--nc-muted)}
.nc-cta{margin-top:auto;padding-top:8px;font-family:var(--nc-font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--nc-accent)}

.nc-dots{display:flex;justify-content:center;gap:8px;margin-top:4px}
.nc-dot{width:9px;height:9px;border-radius:999px;border:2px solid var(--nc-ink);background:transparent;padding:0;cursor:pointer;transition:width .3s,background .3s}
.nc-dot[aria-current="true"]{width:26px;background:var(--nc-accent)}

.nc-modal{border:0;padding:0;background:transparent;width:min(960px,92vw);max-width:none}
.nc-modal::backdrop{background:rgba(10,8,6,.82);backdrop-filter:blur(4px)}
.nc-modal .frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:var(--nc-border);box-shadow:var(--nc-shadow)}
.nc-modal iframe,.nc-modal video{position:absolute;inset:0;width:100%;height:100%;border:0}
.nc-close{position:absolute;right:-10px;top:-54px;width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:transparent;color:#fff;font-size:22px;cursor:pointer}

@media (prefers-reduced-motion:reduce){.nc-track{scroll-behavior:auto}.nc-card,.nc-card:hover{transform:none}.nc-media img{transition:none}}
@media (max-width:640px){.nc{--nc-card-w:76vw}.nc-controls{display:none}.nc-media{aspect-ratio:1/1}}

/* ── GLASS VARIANT (.nc--glass) — translucent floating tiles ──────── */
.nc--glass .nc-card{--dir:1}
.nc--glass .nc-card:nth-child(even){--dir:1}
.nc--glass .nc-link{
  background:var(--nc-glass-face,linear-gradient(158deg,rgba(255,255,255,.88),rgba(247,242,231,.74) 52%,rgba(127,196,184,.46)));
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  border:1px solid var(--nc-glass-edge,rgba(255,255,255,.55));
  box-shadow:0 20px 44px rgba(6,20,17,.38), inset 0 1px 1px rgba(255,255,255,.9), inset 0 -20px 34px rgba(61,145,136,.14);
  transform:none}
.nc--glass .nc-card{transform:translateY(var(--y,0));animation:ncFloat 5.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.35s)}
.nc--glass .nc-card:hover,.nc--glass .nc-card:focus-within{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){.nc--glass .nc-link:hover,.nc--glass .nc-link:focus-visible{transform:translateY(-6px);box-shadow:0 26px 54px rgba(8,26,22,.42), inset 0 1px 1px rgba(255,255,255,.6)}}
.nc--glass .nc-link{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.nc--glass .nc-media{aspect-ratio:4/3;box-shadow:0 6px 16px rgba(6,20,17,.18);border-bottom:1px solid rgba(255,255,255,.35);border-radius:calc(var(--nc-radius) - 5px) calc(var(--nc-radius) - 5px) 0 0;margin:7px 7px 0;overflow:hidden}
.nc--glass .nc-media.contain img{object-fit:contain;background:var(--nc-media-bg,#F7F2E7)}
.nc--glass .nc-body{padding:18px 20px 20px}
.nc--glass .nc-tag{background:rgba(255,255,255,.82);border:0;box-shadow:0 2px 8px rgba(8,26,22,.18);transform:none}
.nc--glass .nc-btn{background:rgba(255,255,255,.28);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.5);box-shadow:0 6px 18px rgba(8,26,22,.26);color:var(--nc-ink)}
.nc--glass .nc-card::after{content:'';position:absolute;left:12%;right:12%;bottom:-14px;height:16px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(6,20,17,.42),transparent 72%);filter:blur(2px);z-index:-1;
  animation:ncFloatShadow 5.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.35s)}
.nc--glass .nc-card{position:relative}
@keyframes ncFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ncFloatShadow{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(.8);opacity:.28}}
@media (prefers-reduced-motion:reduce){.nc--glass .nc-card,.nc--glass .nc-card::after{animation:none}}

/* ── STORY PANEL ──────────────────────────────────────────────────── */
.nc-modal--story{width:min(1040px,94vw)}
.nc-modal--story .nc-story{grid-template-rows:1fr auto}
.nc-thumbs{grid-row:2}
.nc-story{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border-radius:20px;overflow:hidden;background:var(--nc-story-bg,#F7F2E7);color:var(--nc-ink);max-height:86vh}
.nc-shots{grid-column:1;grid-row:1;position:relative;height:auto;min-height:min(62vh,560px);
  background:var(--nc-stage,radial-gradient(120% 90% at 50% 40%,#2c5a4c 0%,#16302A 70%));
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.nc-shot{margin:0;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 26px 52px}
.nc-shot[hidden]{display:none}
.nc-shot img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.14)}
.nc-shot figcaption{position:absolute;left:0;right:0;bottom:14px;padding:0 20px;text-align:center;
  font-family:var(--nc-font-body);font-size:13px;line-height:1.4;color:rgba(247,242,231,.9)}
.nc-thumbs{grid-column:1;display:flex;gap:8px;padding:10px 12px;background:#10241f;overflow-x:auto}
.nc-thumb{width:58px;height:44px;flex:0 0 auto;padding:0;border:2px solid transparent;border-radius:7px;overflow:hidden;background:none;cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s}
.nc-thumb img{width:100%;height:100%;object-fit:cover}
.nc-thumb.is-on,.nc-thumb:hover{opacity:1;border-color:var(--nc-accent-2,#7FC4B8)}
.nc-story-body{grid-column:2;grid-row:1 / span 2;padding:clamp(22px,3vw,34px);overflow-y:auto}
.nc-tag--static{position:static;display:inline-block;margin-bottom:12px}
.nc-story-body h3{margin:0 0 12px;font-family:var(--nc-font-display);font-size:clamp(23px,2.6vw,31px);line-height:1.12}
.nc-story-body p{margin:0 0 12px;font-family:var(--nc-font-body);font-size:15px;line-height:1.66;color:var(--nc-muted)}
.nc-stats{list-style:none;margin:18px 0 6px;padding:0;display:grid;gap:10px}
.nc-stats li{display:flex;gap:12px;align-items:baseline;border-top:1px solid rgba(28,38,32,.14);padding-top:10px}
.nc-stats b{font-family:var(--nc-font-display);font-size:19px;color:var(--nc-accent);flex:0 0 auto;min-width:42px}
.nc-stats span{font-family:var(--nc-font-body);font-size:13.5px;line-height:1.5;color:var(--nc-muted)}
.nc-note{font-size:12.5px !important;opacity:.75;font-style:italic}
.nc-story-cta{display:inline-block;margin-top:16px;font-family:var(--nc-font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--nc-accent);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:3px}
@media (max-width:760px){.nc-story{grid-template-columns:1fr;max-height:88vh;overflow-y:auto}.nc-shots,.nc-thumbs,.nc-story-body{grid-column:1}.nc-story-body{grid-row:auto}.nc-shots{height:46vh}}
.nc-modal--story .frame{aspect-ratio:auto;background:transparent;border:0;box-shadow:none;border-radius:20px}
.nc-modal--story .nc-close{right:10px;top:10px;z-index:5;background:rgba(6,20,17,.55);border-color:rgba(255,255,255,.8);backdrop-filter:blur(6px);line-height:1}
.nc-modal--story .nc-story-body{padding-bottom:clamp(28px,4vw,44px)}

/* touch: no double-tap zoom on the cards (iOS was treating tap-tap as zoom); pinch-zoom still works */
.nc,.nc-modal{touch-action:manipulation}