/*
Theme Name:   Naga City Guide
Theme URI:    https://www.nagacityguide.com/
Description:  Naga City Guide — The Naga City Directory & Blog. Standalone theme built from the approved 2026 prototype.
Author:       Online Creative Solutions
Author URI:   https://www.nagacityguide.com/
Version:      1.0.0
Requires at least: 6.9
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  nagacityguide
Tags:         directory, local, warm, rounded
*/

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('assets/fonts/BricolageGrotesque.woff2') format('woff2-variations');
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/PlusJakartaSans.woff2') format('woff2-variations');
  font-weight: 400 800; font-style: normal; font-display: swap;
}

/* ============================================================
   1. Design tokens — see migration/01-design-tokens.md
   ============================================================ */
:root {
  /* ground & ink */
  --ncg-ground:        #FAF3E6;
  --ncg-surface:       #FFFDF8;
  --ncg-ink:           #2E2E38;
  --ncg-ink-muted:     #6B6672;
  --ncg-ink-label:     #4A4550;
  --ncg-ink-warm:      #6B6250;

  /* orange */
  --ncg-orange:        #F08F3C;
  --ncg-orange-ink:    #A64F0C;
  --ncg-orange-ink-hover: #8F430A;
  --ncg-orange-tint:   #FCE4CC;
  --ncg-orange-hover:  #FFA85A;
  --ncg-orange-active: #E8933A;

  /* teal */
  --ncg-teal:          #0C90B4;
  --ncg-teal-ink:      #086B86;
  --ncg-teal-tint:     #D2EDF4;
  --ncg-teal-on-dark:  #5FC8E4;

  /* green */
  --ncg-green:         #6CB448;
  --ncg-green-ink:     #3B6D22;
  --ncg-green-tint:    #E3F1D9;
  --ncg-green-on-dark: #8FD46A;

  /* yellow */
  --ncg-yellow:        #F0E448;
  --ncg-yellow-ink:    #6E6208;
  --ncg-yellow-tint:   #FAF6C8;

  /* lines */
  --ncg-line:          #E8DCC4;
  --ncg-line-soft:     #F3E7D3;
  /* form-control boundary: derived from ink-warm (≈#8F8676), 3.3:1 on ground / 3.6:1 on surface — WCAG 1.4.11 (audit I6) */
  --ncg-line-strong:   color-mix(in srgb, var(--ncg-ink-warm) 75%, var(--ncg-ground));

  /* on dark */
  --ncg-on-dark:       #FAF3E6;
  --ncg-on-dark-muted: #C9C4CE;
  --ncg-on-dark-faint: #B8B2C0;

  /* type */
  --ncg-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --ncg-font-body:    'Plus Jakarta Sans', system-ui, sans-serif;

  /* radius */
  --ncg-r-pill: 999px;
  --ncg-r-xs:   12px;
  --ncg-r-sm:   16px;
  --ncg-r-md:   22px;
  --ncg-r-lg:   26px;
  --ncg-r-xl:   32px;

  /* elevation */
  --ncg-shadow-card:    0 6px 24px rgba(46,46,56,.07);
  --ncg-shadow-card-lg: 0 8px 28px rgba(46,46,56,.10);
  --ncg-shadow-pop:     0 18px 48px rgba(46,46,56,.16);
  --ncg-shadow-drawer:  -20px 0 60px rgba(46,46,56,.25);
  --ncg-shadow-cta:     0 6px 18px rgba(240,143,60,.35);
  --ncg-shadow-nav:     0 10px 30px rgba(46,46,56,.10);
  --ncg-shadow-tabbar:  0 14px 40px rgba(46,46,56,.35);

  /* layout */
  --ncg-container: 1240px;
  --ncg-gutter:    20px;

  /* motion */
  --ncg-ease:     cubic-bezier(.22,.9,.26,1);
  --ncg-ease-out: cubic-bezier(.76,0,.24,1);
}

/* ============================================================
   2. Base
   ============================================================ */
/* scroll-padding keeps in-page anchors (#directories, skip link, focus scrolls) clear of the 78px fixed header (audit I2).
   Not paired with [id] { scroll-margin-top } — the two stack (measured 180px) and one 90px clearance is the intent. */
html { scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--ncg-ground);
  color: var(--ncg-ink);
  font-family: var(--ncg-font-body);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

a          { color: var(--ncg-orange-ink); text-decoration: none; }
a:hover    { color: var(--ncg-orange-ink-hover); }
::selection{ background: var(--ncg-orange-tint); }

h1, h2, h3 { font-family: var(--ncg-font-display); text-wrap: balance; }
p          { text-wrap: pretty; }
img        { max-width: 100%; height: auto; }

/* Focus ring: orange-ink (5.1:1 on ground) with a surface halo so it stays visible on orange fills (audit I5, WCAG 1.4.11) */
*:focus-visible {
  outline: 3px solid var(--ncg-orange-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ncg-surface);
  border-radius: 4px;
}

/* ============================================================
   3. Layout
   ============================================================ */
.ncg-container { max-width: var(--ncg-container); margin-inline: auto;
                 padding-inline: var(--ncg-gutter); }
.ncg-grid      { display: grid; gap: 24px;
                 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ============================================================
   4. Buttons — see 01-design-tokens.md §1.5
   ============================================================ */
.ncg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-sizing: border-box;
  padding: 14px 26px; border: none; border-radius: var(--ncg-r-pill);
  font: 700 15px/1 var(--ncg-font-body); cursor: pointer;
  transition: background .2s, transform .2s;
}
.ncg-btn--primary { background: var(--ncg-orange); color: var(--ncg-ink);
                    box-shadow: var(--ncg-shadow-cta); }
.ncg-btn--primary:hover  { background: var(--ncg-orange-hover); color: var(--ncg-ink); }
.ncg-btn--primary:active { background: var(--ncg-orange-active); }
/* keep the surface halo on buttons that carry their own shadow (audit I5) */
.ncg-btn:focus-visible { box-shadow: 0 0 0 2px var(--ncg-surface), var(--ncg-shadow-cta); }

.ncg-btn--green  { background: var(--ncg-green);    color: var(--ncg-ink); }
.ncg-btn--yellow { background: var(--ncg-yellow);   color: var(--ncg-ink); }
.ncg-btn--teal   { background: var(--ncg-teal-ink); color: var(--ncg-surface); }
.ncg-btn--dark   { background: var(--ncg-ink);      color: var(--ncg-ground); }
.ncg-btn--outline{ background: transparent; color: var(--ncg-orange-ink);
                   border: 2px solid var(--ncg-orange); }

/* ============================================================
   5. Filter chips
   ============================================================ */
.ncg-chip {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 10px 17px; border-radius: var(--ncg-r-pill);
  border: 2px solid var(--ncg-line); background: var(--ncg-surface);
  color: var(--ncg-ink); font: 700 14px/1 var(--ncg-font-body);
  transition: border-color .2s, background .2s, color .2s;
}
.ncg-chip:hover { border-color: var(--ncg-orange); color: var(--ncg-orange-ink); }
.ncg-chip.is-on { border-color: var(--ncg-orange); background: var(--ncg-orange);
                  color: var(--ncg-ink); }
/* teal archives invert — dark ink on #0C90B4 is only 3.49:1 */
.ncg-archive--teal .ncg-chip.is-on { border-color: var(--ncg-teal-ink);
                  background: var(--ncg-teal-ink); color: var(--ncg-surface); }

/* ============================================================
   6. Cards
   ============================================================ */
.ncg-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--ncg-r-lg); background: var(--ncg-surface);
  box-shadow: var(--ncg-shadow-card); transition: transform .3s var(--ncg-ease);
}
.ncg-card:hover      { transform: translateY(-6px); }
.ncg-card__media     { position: relative; height: 185px; overflow: hidden; }
.ncg-card__media img { width: 100%; height: 100%; object-fit: cover;
                       filter: saturate(.85) contrast(.95) brightness(1.04); }
.ncg-card__body      { display: flex; flex-direction: column; gap: 7px; flex: 1;
                       padding: 18px 20px 20px; }
.ncg-card__cta       { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px;
                       color: var(--ncg-orange-ink); font: 700 13px var(--ncg-font-body); }

/* photo tile scrim — a contrast control, do not soften */
.ncg-tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(46,46,56,0) 18%, rgba(46,46,56,.55) 55%, rgba(46,46,56,.94) 100%);
}

/* ============================================================
   7. Mobile tab bar — visibility and spacing share one breakpoint
   ============================================================ */
@media (min-width: 761px) { [data-ncg-tabbar] { display: none !important; } }
@media (max-width: 760px) { body { padding-bottom: 92px; } }

/* ============================================================
   8. Skip link
   ============================================================ */
.ncg-skip { position: fixed; top: -120px; left: 12px; z-index: 99997;
  padding: 13px 22px; border-radius: var(--ncg-r-pill);
  background: var(--ncg-ink); color: var(--ncg-ground);
  font: 700 14px var(--ncg-font-body); box-shadow: var(--ncg-shadow-nav);
  transition: top .2s; }
.ncg-skip:focus { top: 12px; color: var(--ncg-ground); }

/* ============================================================
   9. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ncg-card:hover { transform: none; }
  .ncg-tile:hover { transform: none; }
  .ncg-preloader img { animation: none; }
  .ncg-drawer { transition: none; }
}

/* ============================================================
   10. Sections & page header panel — 03 §2
   ============================================================ */
.ncg-section { padding: 28px 0 8px; }
.ncg-section--first { padding-top: 36px; }
.ncg-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.ncg-section__head h2 { margin: 0; font: 700 clamp(24px, 3vw, 34px)/1.15 var(--ncg-font-display); }
.ncg-page-header { position: relative; overflow: hidden; border-radius: var(--ncg-r-xl); padding: clamp(30px, 5vw, 54px); }
.ncg-page-header--orange { background: var(--ncg-orange-tint); --ph-ink: var(--ncg-orange-ink); --ph-fill: var(--ncg-orange); }
.ncg-page-header--teal   { background: var(--ncg-teal-tint);   --ph-ink: var(--ncg-teal-ink);   --ph-fill: var(--ncg-teal); }
.ncg-page-header--green  { background: var(--ncg-green-tint);  --ph-ink: var(--ncg-green-ink);  --ph-fill: var(--ncg-green); }
.ncg-page-header--yellow { background: var(--ncg-yellow-tint); --ph-ink: var(--ncg-yellow-ink); --ph-fill: var(--ncg-yellow); }
.ncg-page-header h1 { margin: 14px 0 12px; font: 800 clamp(32px, 4.6vw, 54px)/1.05 var(--ncg-font-display); color: var(--ncg-ink); }
.ncg-page-header .ncg-lead { position: relative; max-width: 620px; margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ncg-ink-muted); }
.ncg-eyebrow { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: var(--ncg-r-pill); background: var(--ncg-surface); color: var(--ph-ink, var(--ncg-orange-ink)); font: 700 11.5px/1 var(--ncg-font-body); letter-spacing: 1.5px; text-transform: uppercase; }
.ncg-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.ncg-blob--a { width: 220px; height: 220px; top: -70px; right: -50px; background: var(--ph-fill, var(--ncg-orange)); opacity: .22; }
.ncg-blob--b { width: 170px; height: 170px; bottom: -60px; left: 30%; background: var(--ncg-yellow); opacity: .3; }

/* ============================================================
   11. Badge, photo tile, strip card — 03 §3, §4
   ============================================================ */
.ncg-badge { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: var(--ncg-r-pill); background: rgba(255,253,248,.95); color: var(--ph-ink, var(--ncg-orange-ink)); font: 700 12px/1.3 var(--ncg-font-body); }
/* overflow-wrap: user-generated titles/blurbs carry URLs and hashtags; never let one token widen a row (audit C1) */
.ncg-card__title { margin: 0; font: 700 17px/1.3 var(--ncg-font-display); color: var(--ncg-ink); overflow-wrap: anywhere; }
.ncg-card__title a { color: inherit; }
.ncg-card__loc { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ncg-ink-muted); }
.ncg-card__stars { font-size: 13px; letter-spacing: 2px; color: var(--ncg-orange-ink); }
.ncg-card__blurb { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ncg-ink-muted); overflow-wrap: anywhere; }
.ncg-tile { position: relative; display: block; overflow: hidden; min-height: 280px; border-radius: var(--ncg-r-lg); box-shadow: var(--ncg-shadow-card-lg); color: var(--ncg-on-dark); transition: transform .3s var(--ncg-ease); }
.ncg-tile:hover { transform: scale(1.015); color: var(--ncg-on-dark); }
.ncg-tile:focus-visible { box-shadow: 0 0 0 2px var(--ncg-surface), var(--ncg-shadow-card-lg); }
.ncg-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(.95) brightness(1.04); }
.ncg-tile__tag { position: absolute; top: 16px; left: 16px; padding: 5px 12px; border-radius: var(--ncg-r-pill); background: rgba(255,253,248,.94); color: var(--ph-ink, var(--ncg-orange-ink)); font: 700 12px/1.3 var(--ncg-font-body); }
.ncg-tile__cap { position: absolute; left: 20px; right: 20px; bottom: 18px; }
.ncg-tile__cap h3, .ncg-tile__cap h1 { margin: 0 0 4px; font: 700 clamp(19px, 2vw, 24px)/1.2 var(--ncg-font-display); color: var(--ncg-on-dark); }
.ncg-tile__cap p { margin: 0; font-size: 13px; opacity: .85; }
.ncg-tile--hero { min-height: min(52vh, 440px); border-radius: var(--ncg-r-xl); }
.ncg-tile--hero .ncg-tile__cap { left: clamp(20px, 4vw, 44px); right: clamp(20px, 4vw, 44px); bottom: clamp(20px, 4vw, 38px); }
.ncg-tile--hero h1 { font: 800 clamp(32px, 4.4vw, 52px)/1.05 var(--ncg-font-display); }
.ncg-strip { display: flex; gap: 20px; overflow-x: auto; padding: 4px 20px 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ncg-strip__card { flex: 0 0 240px; scroll-snap-align: start; }
.ncg-strip__card .ncg-card__media { height: 150px; }
.ncg-fb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 150px; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--fb) 35%, transparent), color-mix(in srgb, var(--fb) 10%, transparent)); color: var(--ncg-ink); font: 800 34px/1 var(--ncg-font-display); }
.ncg-tile .ncg-fb { position: absolute; inset: 0; }

/* ============================================================
   12. CTA band — 03 §7
   ============================================================ */
.ncg-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin: 60px 0 0; padding: clamp(22px, 3.5vw, 34px) clamp(36px, 6vw, 64px); border-radius: var(--ncg-r-xl); }
.ncg-cta__text { position: relative; max-width: 560px; }
.ncg-cta h2 { margin: 0 0 6px; font: 700 clamp(20px, 2.6vw, 28px)/1.2 var(--ncg-font-display); }
.ncg-cta p { margin: 0; font-size: 14px; }
.ncg-cta--dark { background: var(--ncg-ink); color: var(--ncg-on-dark); }
.ncg-cta--dark p { color: var(--ncg-on-dark-muted); }
.ncg-cta--brand { background: var(--ncg-orange); color: var(--ncg-ink); }
.ncg-cta .ncg-btn { position: relative; }

/* ============================================================
   13. Header — 03 §10
   ============================================================ */
.ncg-header-spacer { height: 78px; }
.ncg-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: rgba(250,243,230,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: box-shadow .3s; }
.ncg-header__inner { max-width: var(--ncg-container); margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px var(--ncg-gutter); }
.ncg-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ncg-ink); }
.ncg-brand img { width: 52px; height: 52px; object-fit: contain; }
.ncg-brand__lockup { display: flex; flex-direction: column; font: 700 17px/1.05 var(--ncg-font-display); }
.ncg-brand__lockup span:last-child { color: var(--ncg-orange-ink); }
.ncg-header__spacer { flex: 1; }
.ncg-nav { display: none; align-items: center; gap: 2px; }
.ncg-nav ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ncg-nav__link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 9px 13px; border: 0; background: none; border-radius: var(--ncg-r-pill); font: 600 14px/1 var(--ncg-font-body); color: var(--ncg-ink); cursor: pointer; }
.ncg-nav__link:hover { background: var(--ncg-line-soft); color: var(--ncg-ink); }
.ncg-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ncg-orange); }
.ncg-nav__more { position: relative; }
.ncg-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 230px; padding: 8px; border-radius: 20px; background: var(--ncg-surface); box-shadow: var(--ncg-shadow-pop); display: none; flex-direction: column; }
.ncg-nav__more[data-open="1"] .ncg-dropdown { display: flex; }
.ncg-dropdown a { padding: 11px 14px; border-radius: 14px; font: 600 14px/1 var(--ncg-font-body); color: var(--ncg-ink); }
.ncg-dropdown a:hover { background: var(--ncg-line-soft); color: var(--ncg-ink); }
.ncg-nav--compact { display: flex; }
.ncg-burger { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--ncg-surface); color: var(--ncg-ink); box-shadow: var(--ncg-shadow-card); cursor: pointer; }
.ncg-nav .ncg-btn { padding: 11px 18px; font-size: 13.5px; margin-left: 8px; }
@media (min-width: 1101px) {
  .ncg-nav { display: flex; }
  .ncg-nav--compact { display: none; }
}

/* ============================================================
   14. Drawer — 03 §11
   ============================================================ */
.ncg-drawer__backdrop { position: fixed; inset: 0; z-index: 950; background: rgba(46,46,56,.45); backdrop-filter: blur(3px); display: none; }
.ncg-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 960; width: min(88vw, 360px); overflow: auto; overscroll-behavior: contain; padding: 18px 18px 110px; border-radius: 28px 0 0 28px; background: var(--ncg-ground); box-shadow: var(--ncg-shadow-drawer); transform: translateX(105%); transition: transform .35s var(--ncg-ease); visibility: hidden; }
body.ncg-drawer-open .ncg-drawer { transform: none; visibility: visible; }
body.ncg-drawer-open .ncg-drawer__backdrop { display: block; }
.ncg-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ncg-drawer__head strong { font: 700 20px/1 var(--ncg-font-display); }
.ncg-drawer__close { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--ncg-surface); color: var(--ncg-ink); box-shadow: var(--ncg-shadow-card); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ncg-drawer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ncg-drawer__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-radius: 16px; font: 700 16px/1.2 var(--ncg-font-body); color: var(--ncg-ink); }
.ncg-drawer__link:hover { background: var(--ncg-line-soft); color: var(--ncg-ink); }
.ncg-drawer__link[aria-current="page"] { background: var(--ncg-orange-tint); }
.ncg-drawer__link .ncg-i { color: var(--ncg-orange-ink); }
.ncg-drawer__group { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ncg-line-soft); }
.ncg-drawer__group .ncg-eyebrow { margin-bottom: 8px; }
.ncg-drawer__group a { display: block; padding: 10px 16px; border-radius: 12px; font: 600 13.5px/1.2 var(--ncg-font-body); color: var(--ncg-ink-muted); }
.ncg-drawer .ncg-btn { width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 18px; } /* border-box: the CTA never exceeds the drawer (audit I3) */

/* ============================================================
   15. Tab bar — 03 §12 (visibility + body padding live in section 7)
   ============================================================ */
.ncg-tabbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 940; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 10px; border-radius: var(--ncg-r-pill); background: rgba(46,46,56,.96); backdrop-filter: blur(12px); box-shadow: var(--ncg-shadow-tabbar); }
.ncg-tabbar__item { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 44px; padding: 7px 2px; border: 0; background: none; font: 600 10.5px/1 var(--ncg-font-body); color: var(--ncg-on-dark); cursor: pointer; }
.ncg-tabbar__item:hover { color: var(--ncg-on-dark); }
.ncg-tabbar__item[aria-current="page"] { color: var(--ncg-yellow); }
.ncg-tabbar__item .ncg-i { width: 19px; height: 19px; }

/* ============================================================
   16. Footer — 03 §13
   ============================================================ */
.ncg-footer { position: relative; overflow: hidden; margin: 80px 14px 14px; border-radius: var(--ncg-r-xl); background: var(--ncg-ink); color: var(--ncg-on-dark); }
.ncg-footer .ncg-blob--a { background: var(--ncg-orange); opacity: .13; }
.ncg-footer .ncg-blob--b { background: var(--ncg-teal); opacity: .12; }
.ncg-footer__inner { position: relative; max-width: var(--ncg-container); margin: 0 auto; padding: 56px 28px 24px; }
.ncg-footer__grid { display: grid; gap: 38px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ncg-footer .ncg-brand { color: var(--ncg-on-dark); }
.ncg-footer .ncg-brand__lockup span:last-child { color: var(--ncg-orange); }
.ncg-footer p { color: var(--ncg-on-dark-muted); font-size: 14px; line-height: 1.6; }
.ncg-footer__eyebrow { display: block; margin-bottom: 12px; font: 700 11.5px/1 var(--ncg-font-body); letter-spacing: 2px; text-transform: uppercase; }
.ncg-footer__eyebrow--orange { color: var(--ncg-orange); }
.ncg-footer__eyebrow--green { color: var(--ncg-green-on-dark); }
.ncg-footer__eyebrow--teal { color: var(--ncg-teal-on-dark); }
.ncg-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ncg-footer ul a { color: var(--ncg-on-dark-muted); font-size: 14px; }
.ncg-footer ul a:hover { color: var(--ncg-yellow); }
.ncg-footer__social { display: flex; gap: 8px; margin-top: 14px; }
.ncg-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(250,243,230,.08); color: var(--ncg-on-dark); }
.ncg-footer__social a:hover { background: var(--ncg-orange); color: var(--ncg-ink); }
.ncg-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(250,243,230,.12); font-size: 12.5px; color: var(--ncg-on-dark-faint); }
.ncg-footer__bottom a { color: var(--ncg-on-dark-faint); }

/* ============================================================
   17. Forms — 03 §14
   ============================================================ */
.ncg-form { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ncg-form .ncg-field--wide, .ncg-form .ncg-form__actions { grid-column: 1 / -1; }
.ncg-field { display: flex; flex-direction: column; gap: 6px; font: 700 12.5px/1.3 var(--ncg-font-body); color: var(--ncg-ink-label); }
/* surface bg + line-strong border give the field a 3:1 boundary on the ground; 16px stops iOS zoom-on-focus (audit I6) */
.ncg-field input, .ncg-field select, .ncg-field textarea { width: 100%; box-sizing: border-box; padding: 13px 16px; border: 2px solid var(--ncg-line-strong); border-radius: var(--ncg-r-sm); background: var(--ncg-surface); font: 500 16px/1.4 var(--ncg-font-body); color: var(--ncg-ink); }
.ncg-field textarea { min-height: 140px; resize: vertical; }
.ncg-field input:focus-visible, .ncg-field select:focus-visible, .ncg-field textarea:focus-visible { border-color: var(--ncg-orange-ink); outline: 3px solid var(--ncg-orange-ink); outline-offset: 2px; box-shadow: none; }
.ncg-field[data-invalid="1"] input, .ncg-field[data-invalid="1"] textarea, .ncg-field[data-invalid="1"] select { border-color: var(--ncg-orange-ink); }
.ncg-field__error { margin: 0; font: 600 12.5px/1.3 var(--ncg-font-body); color: var(--ncg-orange-ink); }
.ncg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ncg-notice { padding: 18px 22px; border-radius: var(--ncg-r-md); background: var(--ncg-green-tint); color: var(--ncg-green-ink); font-weight: 600; }
.ncg-notice--error { background: var(--ncg-orange-tint); color: var(--ncg-orange-ink); }
.ncg-contact-card { padding: 22px; border-radius: var(--ncg-r-md); background: var(--ncg-surface); box-shadow: var(--ncg-shadow-card); }
.ncg-contact-card h2 { margin: 0 0 6px; font: 700 15.5px/1.3 var(--ncg-font-display); }
.ncg-contact-card p { margin: 0; font-size: 14px; color: var(--ncg-ink-muted); }
.ncg-two-up { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ============================================================
   18. Prose (legacy content), breadcrumb, pagination, empty state, misc
   ============================================================ */
.ncg-prose { max-width: 760px; font-size: 15.5px; line-height: 1.7; }
.ncg-prose h2 { font: 700 clamp(22px, 2.6vw, 28px)/1.2 var(--ncg-font-display); margin: 1.6em 0 .5em; }
.ncg-prose h3 { font: 700 19px/1.3 var(--ncg-font-display); margin: 1.4em 0 .4em; }
.ncg-prose h4, .ncg-prose h5, .ncg-prose h6 { font: 700 16px/1.3 var(--ncg-font-display); }
.ncg-prose a { text-decoration: underline; text-underline-offset: 2px; }
.ncg-prose img { border-radius: var(--ncg-r-md); filter: saturate(.85) contrast(.95) brightness(1.04); }
.ncg-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ncg-prose td, .ncg-prose th { padding: 8px 10px; border-bottom: 1px solid var(--ncg-line-soft); text-align: left; }
/* legacy [gallery] thumbs: 2 square columns at 360 instead of one 320×150 letterbox upscale (audit I12) */
.ncg-prose .gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ncg-prose .gallery-item { margin: 0; }
.ncg-prose .gallery img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.ncg-prose blockquote { margin: 1.4em 0; padding: 14px 22px; border-left: 4px solid var(--ncg-orange); background: var(--ncg-surface); border-radius: 0 var(--ncg-r-sm) var(--ncg-r-sm) 0; }
.ncg-prose iframe, .ncg-prose video { max-width: 100%; }
.ncg-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; color: var(--ncg-ink-muted); }
.ncg-breadcrumb a { color: var(--ncg-ink-muted); }
.ncg-breadcrumb a:hover { color: var(--ncg-orange-ink); }
.ncg-breadcrumb [aria-current] { color: var(--ncg-orange-ink); font-weight: 700; }
.ncg-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 36px 0 0; }
.ncg-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--ncg-r-pill); border: 2px solid var(--ncg-line); background: var(--ncg-surface); color: var(--ncg-ink); font: 700 14px/1 var(--ncg-font-body); }
.ncg-pagination .page-numbers.current { border-color: var(--ncg-orange); background: var(--ncg-orange); }
.ncg-pagination .page-numbers.dots { border: 0; background: none; }
.ncg-empty { padding: 34px; border-radius: var(--ncg-r-lg); background: var(--ncg-surface); box-shadow: var(--ncg-shadow-card); }
.ncg-empty p { margin: 0; color: var(--ncg-ink-muted); }
.ncg-empty strong { display: block; margin-bottom: 6px; font: 700 19px/1.3 var(--ncg-font-display); color: var(--ncg-ink); }
.ncg-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ncg-ink-muted); }
.ncg-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
.ncg-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 0; }
.ncg-filter-label { font: 700 12px/1 var(--ncg-font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ncg-ink-muted); }
.ncg-filter-count { margin-left: auto; font-size: 13px; color: var(--ncg-ink-muted); }
.ncg-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--ncg-r-pill); background: var(--ncg-surface); box-shadow: var(--ncg-shadow-card); }
.ncg-tabs a { min-height: 44px; display: inline-flex; align-items: center; padding: 11px 22px; border-radius: var(--ncg-r-pill); font: 700 14px/1 var(--ncg-font-body); color: var(--ncg-ink-muted); }
.ncg-tabs a[aria-current="true"] { background: var(--ncg-orange); color: var(--ncg-ink); }
.ncg-archive--teal .ncg-tabs a[aria-current="true"] { background: var(--ncg-teal-ink); color: var(--ncg-surface); }
.ncg-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0; z-index: 99998; border-radius: 0 99px 99px 0; background: linear-gradient(90deg, var(--ncg-orange), var(--ncg-yellow), var(--ncg-green), var(--ncg-teal)); }
/* ground-tinted border keeps the control visible over the ink footer; hidden on mobile where the tab bar owns that corner (audit I11) */
.ncg-top { position: fixed; right: 20px; bottom: 24px; z-index: 930; width: 48px; height: 48px; border: 2px solid color-mix(in srgb, var(--ncg-ground) 35%, transparent); border-radius: 50%; background: var(--ncg-ink); color: var(--ncg-ground); box-shadow: var(--ncg-shadow-nav); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s, background .2s; display: inline-flex; align-items: center; justify-content: center; }
.ncg-top.is-on { opacity: 1; pointer-events: auto; }
.ncg-top:hover { background: var(--ncg-orange); color: var(--ncg-ink); }
@media (max-width: 760px) { .ncg-top { display: none; } }
.ncg-preloader { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--ncg-ground); transition: transform 1s var(--ncg-ease-out); }
.ncg-preloader img { width: 96px; height: 96px; animation: ncgBob 1.6s ease-in-out infinite; }
.ncg-preloader p { margin: 0; padding: 0 20px; text-align: center; font: 700 clamp(18px, 3vw, 26px)/1.2 var(--ncg-font-display); color: var(--ncg-ink); }
.ncg-preloader__caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--ncg-orange); animation: ncgBlink .7s steps(1) infinite; }
.ncg-preloader.is-lifted { transform: translateY(-102%); }
@keyframes ncgBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ncgBlink { 50% { opacity: 0; } }
html.ncg-loading { overflow: hidden; }
/* WooCommerce: functional, token-coloured, not designed */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button { border-radius: var(--ncg-r-pill); background: var(--ncg-orange); color: var(--ncg-ink); font-weight: 700; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--ncg-r-md); border-top-color: var(--ncg-orange); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { border: 2px solid var(--ncg-line); border-radius: var(--ncg-r-sm); padding: 12px 14px; }
/* ============================================================
   19. Directory archives — sr-only, tags, rows, prices, promo, facts
   ============================================================ */
.ncg-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ncg-tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ncg-tag { padding: 5px 12px; border-radius: var(--ncg-r-pill); background: rgba(255,253,248,.94); color: var(--ph-ink, var(--ncg-orange-ink)); font: 700 12px/1.3 var(--ncg-font-body); }
.ncg-badge--inline { position: static; display: inline-block; background: var(--ncg-line-soft); }
.ncg-badge--past { color: var(--ncg-ink-muted); }
/* minmax(0,1fr): a bare 1fr is minmax(auto,1fr) and one unbreakable hashtag pushed rows 67px past the viewport (audit C1) */
.ncg-grid--rows { grid-template-columns: minmax(0, 1fr); }
.ncg-note { margin-top: 22px; font-size: 14px; color: var(--ncg-ink-muted); }
.ncg-price { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 4px 0 0; font-size: 13px; }
.ncg-price dt { color: var(--ncg-ink-muted); }
.ncg-price dd { margin: 0; font-weight: 700; color: var(--ncg-ink); }
.ncg-event { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 18px; padding: 18px 20px; border-radius: var(--ncg-r-lg); background: var(--ncg-surface); box-shadow: var(--ncg-shadow-card); }
.ncg-event__date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 74px; border-radius: var(--ncg-r-sm); background: var(--ncg-teal-tint); color: var(--ncg-teal-ink); }
.ncg-event__date strong { font: 800 26px/1 var(--ncg-font-display); }
.ncg-event__date span { margin-top: 4px; font: 700 11px/1 var(--ncg-font-body); letter-spacing: 1.5px; text-transform: uppercase; }
.ncg-event--past .ncg-event__date { background: var(--ncg-line-soft); color: var(--ncg-ink-muted); } /* archive rows read as history, not as this year's calendar (audit I9) */
.ncg-event__body, .ncg-job__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ncg-job { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 18px 20px; border-radius: var(--ncg-r-lg); background: var(--ncg-surface); box-shadow: var(--ncg-shadow-card); }
.ncg-job__initial { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--ncg-r-sm); background: var(--ncg-green-tint); color: var(--ncg-green-ink); font: 800 22px/1 var(--ncg-font-display); }
.ncg-job__company { font: 600 14px/1.3 var(--ncg-font-body); color: var(--ncg-ink); }
.ncg-promo { padding: clamp(20px, 3vw, 28px); margin-bottom: 8px; border-radius: var(--ncg-r-lg); background: var(--ncg-yellow-tint); }
.ncg-promo h2 { margin: 0 0 6px; font: 800 clamp(20px, 2.6vw, 26px)/1.2 var(--ncg-font-display); }
.ncg-promo p { margin: 0 0 6px; font-size: 14.5px; }
.ncg-promo small { display: block; margin: 6px 0 12px; font-size: 12.5px; color: var(--ncg-ink-warm); }
.ncg-facts-wrap { margin: 8px 0 12px; }
.ncg-facts-wrap h2 { margin: 0 0 8px; font: 700 clamp(20px, 2.6vw, 28px)/1.2 var(--ncg-font-display); }
.ncg-facts { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 14px 0 18px; }
.ncg-facts dt { margin-bottom: 6px; font: 700 12px/1 var(--ncg-font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ncg-ink-muted); }
.ncg-facts dd { margin: 0; font-size: 14px; }
.ncg-food-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ncg-food-list li { padding: 12px 16px; border-radius: var(--ncg-r-sm); background: var(--ncg-surface); }
.ncg-food-list strong { display: block; font: 700 15.5px/1.3 var(--ncg-font-display); }
.ncg-food-list span { font-size: 13px; color: var(--ncg-ink-muted); }
/* ============================================================
   20. Detail pages — body + sticky aside, amenities
   ============================================================ */
.ncg-detail { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ncg-detail { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.ncg-detail__body h2, .ncg-aside h2 { margin: 0 0 12px; font: 700 clamp(20px, 2.6vw, 28px)/1.2 var(--ncg-font-display); }
.ncg-detail__section { margin-top: 30px; }
.ncg-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--ncg-r-md); background: var(--ncg-surface); box-shadow: var(--ncg-shadow-card); }
.ncg-aside h2 { font-size: 19px; }
.ncg-aside__row { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; color: var(--ncg-ink-muted); }
.ncg-aside__row .ncg-i { margin-top: 3px; color: var(--ncg-orange-ink); }
.ncg-aside .ncg-btn { justify-content: center; margin-top: 4px; }
.ncg-aside__foot { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ncg-line-soft); font-size: 13px; color: var(--ncg-ink-muted); }
.ncg-aside__foot p { margin: 0; }
.ncg-amenities { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; padding: 0; list-style: none; }
.ncg-amenities li { padding: 10px 14px; border-radius: var(--ncg-r-xs); background: var(--ncg-surface); font: 600 14px/1.3 var(--ncg-font-body); }
.ncg-amenities em { font-style: normal; color: var(--ncg-green-ink); }

/* ============================================================
   21. Filter select — native <select> as a pill (replaces chips; user decision 2026-09-12)
   ============================================================ */
.ncg-filter-bar { row-gap: 12px; }
.ncg-filter-label { cursor: pointer; }
.ncg-select { position: relative; display: inline-flex; align-items: center; flex: 1 1 220px; max-width: 360px; }
.ncg-select__input { width: 100%; min-height: 44px; padding: 10px 44px 10px 18px; border: 2px solid var(--ncg-line-strong); border-radius: var(--ncg-r-pill); background: var(--ncg-surface); color: var(--ncg-ink); font: 700 16px/1.2 var(--ncg-font-body); appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.ncg-select__input:hover { border-color: var(--ncg-orange); }
/* ink-tone ring (not the 1.1:1 tint halo) so the primary filter control has a visible focus state (audit I5) */
.ncg-select__input:focus-visible { border-color: var(--ncg-orange-ink); outline: 3px solid var(--ncg-orange-ink); outline-offset: 2px; box-shadow: none; }
.ncg-select.is-on .ncg-select__input { border-color: var(--ncg-orange); background: var(--ncg-orange-tint); }
.ncg-select .ncg-i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ncg-orange-ink); }
.ncg-archive--teal .ncg-select__input:hover, .ncg-archive--teal .ncg-select__input:focus-visible, .ncg-archive--teal .ncg-select.is-on .ncg-select__input { border-color: var(--ncg-teal-ink); }
.ncg-archive--teal .ncg-select.is-on .ncg-select__input { background: var(--ncg-teal-tint); }
.ncg-archive--teal .ncg-select__input:focus-visible { outline-color: var(--ncg-teal-ink); }
.ncg-archive--teal .ncg-select .ncg-i { color: var(--ncg-teal-ink); }
.ncg-filter-apply { min-height: 44px; padding: 10px 18px; font-size: 13.5px; }
html.js .ncg-filter-apply { display: none; }
@media (max-width: 560px) { .ncg-select { max-width: none; } .ncg-filter-count { flex-basis: 100%; margin-left: 0; } }

/* ============================================================
   22. Skeleton placeholders while a filter/tab fetch is in flight
   ============================================================ */
.ncg-skel { overflow: hidden; border-radius: var(--ncg-r-lg); background: var(--ncg-surface); box-shadow: var(--ncg-shadow-card); }
.ncg-skel__media, .ncg-skel span { display: block; background: linear-gradient(90deg, var(--ncg-line-soft) 25%, var(--ncg-surface) 40%, var(--ncg-line-soft) 55%); background-size: 400% 100%; animation: ncgShimmer 1.3s ease-in-out infinite; }
.ncg-skel__media { height: 185px; }
.ncg-skel__body { display: grid; gap: 10px; padding: 18px 20px 22px; }
.ncg-skel span { height: 14px; border-radius: var(--ncg-r-pill); width: 82%; }
.ncg-skel span:nth-child(1) { height: 18px; width: 68%; }
.ncg-skel span:nth-child(3) { width: 40%; }
.ncg-skel--row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 18px; padding: 18px 20px; }
.ncg-skel--row .ncg-skel__media { height: 74px; border-radius: var(--ncg-r-sm); }
.ncg-skel--row .ncg-skel__body { padding: 0; }
[data-ncg-grid][aria-busy="true"] .ncg-filter-count { opacity: .5; }
@keyframes ncgShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ncg-skel__media, .ncg-skel span { animation: none; } }

/* ============================================================
   23. Front page — hero, marquee, directories, bento
   ============================================================ */
.ncg-hero { display: grid; align-items: center; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); padding: 34px 0 10px; }
@media (max-width: 899px) { .ncg-hero { grid-template-columns: minmax(0, 1fr); } }
.ncg-hero__title { margin: 14px 0 12px; font: 800 clamp(38px, 5.6vw, 68px)/1.04 var(--ncg-font-display); letter-spacing: -0.5px; color: var(--ncg-ink); }
.ncg-hero__accent { color: var(--ncg-orange-ink); }
.ncg-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 18px; }
.ncg-hero__popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ncg-hero__popular > span:first-child { font: 700 13px/1 var(--ncg-font-body); color: var(--ncg-ink-muted); }
.ncg-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px; border: 2px solid var(--ncg-line); border-radius: var(--ncg-r-pill); background: var(--ncg-surface); color: var(--ncg-ink); font: 600 13px/1 var(--ncg-font-body); transition: border-color .2s; }
.ncg-pill:hover { border-color: var(--ncg-orange); color: var(--ncg-ink); }

.ncg-collage { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 14px; min-height: clamp(300px, 74vw, 430px); max-width: 560px; width: 100%; }
.ncg-collage .ncg-tile { position: relative; z-index: 1; min-height: 150px; }
.ncg-collage .ncg-blob { z-index: 0; }
.ncg-collage .ncg-tile:nth-of-type(1) { transform: rotate(-2deg); }
.ncg-collage .ncg-tile:nth-of-type(2) { transform: rotate(1.5deg); }
.ncg-collage .ncg-tile:nth-of-type(3) { transform: rotate(1deg); }
.ncg-collage .ncg-tile:nth-of-type(4) { transform: rotate(-1.5deg); }

.ncg-marquee-wrap { overflow: hidden; margin: 40px 0 0; }
.ncg-marquee { width: 106%; margin-left: -3%; background: var(--ncg-orange); transform: rotate(-1.2deg); padding: 13px 0; }
.ncg-marquee__track { display: flex; align-items: center; gap: 34px; width: max-content; white-space: nowrap; animation: ncgMarquee 26s linear infinite; font: 700 14px/1 var(--ncg-font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ncg-ink); }
@keyframes ncgMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ncg-marquee__track { animation: none; } }

.ncg-dir-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ncg-dir { display: flex; gap: 14px; padding: 18px; border-radius: var(--ncg-r-lg); background: var(--ncg-surface); box-shadow: var(--ncg-shadow-card); color: var(--ncg-ink); transition: transform .3s var(--ncg-ease); }
.ncg-dir:hover { transform: translateY(-4px); color: var(--ncg-ink); }
.ncg-dir__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--ncg-r-sm); background: color-mix(in srgb, var(--ph-fill) 20%, transparent); color: var(--ph-ink); }
.ncg-dir h3 { margin: 0 0 4px; font: 700 16px/1.2 var(--ncg-font-display); }
.ncg-dir p { margin: 0; font-size: 13.5px; color: var(--ncg-ink-muted); }

.ncg-bento { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.ncg-bento > :first-child { grid-column: span 2; grid-row: span 2; min-height: 100%; }
@media (max-width: 900px) { .ncg-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ncg-bento { grid-template-columns: 1fr; } .ncg-bento > :first-child { grid-column: span 1; grid-row: span 1; } }

/* ============================================================
   24. Food-trip strip — hidden scrollbar + infinite auto-scroll loop (user request 2026-09-13)
   ============================================================ */
.ncg-strip { scrollbar-width: none; -ms-overflow-style: none; }
.ncg-strip::-webkit-scrollbar { display: none; }
.ncg-strip--loop { overflow: hidden; scroll-snap-type: none; padding-left: 0; padding-right: 0; }
.ncg-strip__track { display: flex; width: max-content; animation: ncgStripLoop 48s linear infinite; }
.ncg-strip__set { display: flex; gap: 20px; padding: 0 10px; }
.ncg-strip__set .ncg-strip__card { flex: 0 0 240px; }
.ncg-strip--loop:hover .ncg-strip__track { animation-play-state: paused; }
/* Keyboard users: stop the loop and turn the strip back into a real scroller so focused cards scroll into view. */
.ncg-strip--loop:focus-within { overflow-x: auto; scrollbar-width: thin; }
.ncg-strip--loop:focus-within .ncg-strip__track { animation: none; transform: none; }
@keyframes ncgStripLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* WCAG 2.2.2 pause control (audit I10): the loop stays the default everywhere; "Pause" stops it and hands touch/keyboard
   users a native swipeable scroller (duplicate set hidden so nothing is read or reached twice). */
.ncg-strip__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ncg-strip__toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 10px 16px; border: 2px solid var(--ncg-line-strong); border-radius: var(--ncg-r-pill); background: var(--ncg-surface); color: var(--ncg-ink); font: 700 13.5px/1 var(--ncg-font-body); cursor: pointer; }
.ncg-strip__toggle:hover { border-color: var(--ncg-orange); }
html:not(.js) .ncg-strip__toggle { display: none; }
.ncg-strip--paused, .ncg-strip--loop.ncg-strip--paused { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ncg-strip--paused .ncg-strip__track { animation: none; transform: none; }
.ncg-strip--paused .ncg-strip__set[aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ncg-strip__track { animation: none; }
  .ncg-strip--loop { overflow-x: auto; scrollbar-width: thin; }
  .ncg-strip__set[aria-hidden="true"] { display: none; }
  .ncg-strip__toggle { display: none; }
}

/* ============================================================
   25. Tile captions on small tiles — never collide with the tag (bug report 2026-09-13)
   ============================================================ */
.ncg-collage .ncg-tile { min-height: 176px; }
.ncg-collage .ncg-tile__tag { top: 12px; left: 12px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; padding: 4px 10px; }
.ncg-collage .ncg-tile__cap { left: 14px; right: 14px; bottom: 12px; }
.ncg-collage .ncg-tile__cap h3 { font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ncg-collage .ncg-tile__cap p { display: none; }
@media (max-width: 560px) {
  .ncg-tile__cap h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ncg-tile__cap p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .ncg-bento .ncg-tile { min-height: 220px; }
}

/* Caption links inside photo tiles keep the on-dark caption colour (blog featured post; bug report 2026-09-13). */
.ncg-tile__cap a { color: inherit; text-decoration: none; }
.ncg-tile__cap a:hover, .ncg-tile__cap a:focus-visible { color: var(--ncg-yellow); }
.ncg-tile--hero .ncg-tile__cap h3 { font-size: clamp(22px, 3.2vw, 34px); line-height: 1.15; margin-bottom: 8px; }
.ncg-tile--hero .ncg-tile__cap p { font-size: 14px; opacity: .9; }

/* ============================================================
   26. Forms engine additions — file input, radio row, help text, single-column form page, coupon print (forms spec 2026-09-17)
   ============================================================ */
.ncg-form-page { max-width: 760px; }
.ncg-form-page__intro { margin-bottom: 28px; }
.ncg-form-page .ncg-section__head { margin-top: 8px; }
.ncg-field__help { font: 500 12.5px/1.4 var(--ncg-font-body); color: var(--ncg-ink-muted); }
.ncg-field--file input[type="file"] { padding: 10px 12px; cursor: pointer; font-size: 13.5px; }
.ncg-field--file input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: var(--ncg-r-pill); background: var(--ncg-ink); color: var(--ncg-ground); font: 700 12.5px/1 var(--ncg-font-body); cursor: pointer; }
.ncg-field--file input[type="file"]:focus-visible { outline: 3px solid var(--ncg-orange-ink); outline-offset: 2px; }
fieldset.ncg-field { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.ncg-field legend { padding: 0; margin-bottom: 8px; }
.ncg-radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ncg-radio { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 2px solid var(--ncg-line-strong); border-radius: var(--ncg-r-pill); background: var(--ncg-surface); font: 600 14px/1.2 var(--ncg-font-body); color: var(--ncg-ink); cursor: pointer; }
.ncg-radio input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--ncg-orange); }
.ncg-radio:has(input:checked) { border-color: var(--ncg-orange); background: var(--ncg-orange-tint); }
.ncg-radio:has(input:focus-visible) { outline: 3px solid var(--ncg-orange-ink); outline-offset: 2px; }
.ncg-field[data-invalid="1"] .ncg-radio { border-color: var(--ncg-orange-ink); }
.ncg-form__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ncg-coupon { max-width: 760px; display: grid; gap: 24px; }
.ncg-coupon__figure { margin: 0; border-radius: var(--ncg-r-md); overflow: hidden; background: var(--ncg-surface); }
.ncg-coupon__figure img { display: block; width: 100%; height: auto; }
.ncg-coupon__meta { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; padding: 18px 22px; border: 2px dashed var(--ncg-ink); border-radius: var(--ncg-r-md); background: var(--ncg-ground); }
.ncg-coupon__meta dt { font: 700 11.5px/1 var(--ncg-font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ncg-ink-muted); margin-bottom: 6px; }
.ncg-coupon__meta dd { margin: 0; font: 600 16px/1.3 var(--ncg-font-body); color: var(--ncg-ink); }
.ncg-coupon__code { font: 700 22px/1.2 var(--ncg-font-display); letter-spacing: 1px; }
.ncg-coupon__star { color: var(--ncg-orange-ink); font-weight: 700; }
.ncg-coupon__terms { font-size: 13.5px; color: var(--ncg-ink-muted); }
@media print {
  .ncg-skip, .ncg-header, .ncg-header-spacer, .ncg-footer, .ncg-drawer, .ncg-drawer__backdrop, [data-ncg-tabbar], .ncg-no-print, .ncg-form__actions, .ncg-blob { display: none !important; }
  html.ncg-loading::before { display: none !important; }
  body { padding: 0 !important; background: #fff !important; color: #000 !important; }
  main { padding: 0 !important; }
  .ncg-section { padding: 0 !important; }
  .ncg-coupon { max-width: none; gap: 16px; }
  .ncg-coupon__figure { border-radius: 0; break-inside: avoid; }
  .ncg-coupon__meta { border-color: #000; background: #fff; break-inside: avoid; }
  .ncg-coupon__spiel, .ncg-coupon__terms { color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}