/* ============================================================
   Incanto Prototypes — Shared Base
   DRY tokens, reset, nav, card, footer components
   All three directions (@import this file, then define
   --c-bg, --c-surface, --c-text, --c-muted, --c-accent,
   --c-accent-text, --c-border, --c-hero-overlay in their
   own <style> block to theme each direction.)
   ============================================================ */

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }

/* --- Global Tokens (fallback — each direction overrides) --- */
:root {
  --c-bg:           #fafaf8;
  --c-surface:      #f0ede8;
  --c-text:         #1a1a1a;
  --c-muted:        #6b6b6b;
  --c-accent:       #c8a96e;
  --c-accent-text:  #1a1a1a;
  --c-border:       rgba(0,0,0,0.10);
  --c-hero-overlay: rgba(0,0,0,0.45);

  --font-sans:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "Georgia", "Times New Roman", serif;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.14);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.18);

  --max-w: 1200px;
  --nav-h: 64px;
  --transition: 0.22s ease;
}

/* --- Typography Scale -------------------------------------- */
.t-display { font-size: clamp(2.8rem, 7vw, 5.5rem); letter-spacing: -0.02em; line-height: 1.05; }
.t-heading  { font-size: clamp(1.8rem, 3.5vw, 3rem);   letter-spacing: -0.01em; }
.t-title    { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.t-body     { font-size: 1rem; }
.t-small    { font-size: 0.875rem; }
.t-label    { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.t-muted    { color: var(--c-muted); }

/* --- Layout utilities ------------------------------------- */
.container   { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-6); }
.section     { padding-block: var(--space-16); }
.section--lg { padding-block: var(--space-24); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  :root { --nav-h: 56px; }
}

/* --- Navigation -------------------------------------------- */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  transition: background var(--transition), box-shadow var(--transition);
}
.nav.scrolled { box-shadow: var(--shadow-sm); }
.nav__inner {
  width: 100%; max-width: var(--max-w);
  margin-inline: auto; padding-inline: var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
}
.nav__logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.nav__logo-text {
  font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--c-text);
}
.nav__links {
  display: flex; align-items: center; gap: var(--space-8);
}
.nav__link {
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.03em;
  text-decoration: none; color: var(--c-text); opacity: 0.75;
  transition: opacity var(--transition);
}
.nav__link:hover, .nav__link:focus-visible { opacity: 1; }
.nav__cta {
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--space-2) var(--space-6); border-radius: var(--radius-sm);
  background: var(--c-accent); color: var(--c-accent-text);
  text-decoration: none; transition: opacity var(--transition);
}
.nav__cta:hover { opacity: 0.88; }
.nav__menu-btn {
  display: none; flex-direction: column; gap: 5px;
  padding: var(--space-2); border-radius: var(--radius-sm);
}
.nav__menu-btn span { display: block; width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; }
@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__menu-btn { display: flex; }
  .nav__links.open {
    display: flex; flex-direction: column; gap: var(--space-4);
    position: absolute; top: var(--nav-h); inset-inline: 0;
    background: var(--c-bg); padding: var(--space-6);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-md);
  }
  /* Mobile open menu: links always match the dropdown's --c-bg colour,
     overriding per-direction white/transparent nav link colours. */
  .nav__links.open .nav__link { color: var(--c-text); }
}

/* --- Category chip ----------------------------------------- */
.chip {
  display: inline-block; padding: var(--space-1) var(--space-3);
  border: 1px solid var(--c-border); border-radius: 999px;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--c-muted); background: transparent; white-space: nowrap;
}

/* --- Card -------------------------------------------------- */
.card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 16/9; }
.card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card__img-wrap img { transform: scale(1.04); }
.card__body { padding: var(--space-4) var(--space-6) var(--space-6); }
.card__year { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--c-muted); margin-bottom: var(--space-2); }
.card__title { font-size: 1.05rem; font-weight: 700; color: var(--c-text); margin-bottom: var(--space-2); }
.card__category { font-size: 0.75rem; color: var(--c-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* --- Section header --------------------------------------- */
.section-header { margin-bottom: var(--space-12); }
.section-header .t-label { color: var(--c-accent); margin-bottom: var(--space-3); }
.section-header .t-heading { color: var(--c-text); margin-bottom: var(--space-4); }
.section-header p { color: var(--c-muted); max-width: 54ch; }

/* --- Services grid ---------------------------------------- */
.service-item {
  padding: var(--space-8);
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
}
.service-item__icon {
  width: 44px; height: 44px; margin-bottom: var(--space-4);
  color: var(--c-accent);
}
.service-item__title { font-size: 1rem; font-weight: 700; margin-bottom: var(--space-2); color: var(--c-text); }
.service-item__desc  { font-size: 0.875rem; color: var(--c-muted); line-height: 1.65; }

/* --- Footer ----------------------------------------------- */
.footer {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding-block: var(--space-12);
}
.footer__inner {
  max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-6);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
}
.footer__brand { display: flex; align-items: center; gap: var(--space-3); }
.footer__brand-text {
  font-weight: 800; font-size: 1rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-text);
}
.footer__copy  { font-size: 0.8rem; color: var(--c-muted); }
.footer__links { display: flex; gap: var(--space-6); }
.footer__links a { font-size: 0.8rem; color: var(--c-muted); text-decoration: none; }
.footer__links a:hover { color: var(--c-text); }

/* --- Accessibility ---------------------------------------- */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* --- Skip link -------------------------------------------- */
.skip-link {
  position: absolute; top: -100%; left: var(--space-4);
  background: var(--c-accent); color: var(--c-accent-text);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  font-weight: 600; text-decoration: none; z-index: 9999;
}
.skip-link:focus { top: var(--space-4); }

/* --- Hero base -------------------------------------------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: var(--c-hero-overlay);
}
.hero__content {
  position: relative; z-index: 2;
  padding: var(--space-24) var(--space-6);
  max-width: var(--max-w); margin-inline: auto; width: 100%;
}

/* --- Divider ---------------------------------------------- */
.divider { border: none; border-top: 1px solid var(--c-border); margin-block: var(--space-8); }

/* --- Works index: page hero, filters, grid, load-more ------ */
/* Shared across all three directions and the "/works.html" index page.
   Designed to keep working unchanged as the client adds project #38, #39... —
   the filter tabs, grid, and load-more batches don't need redesigning per addition. */
.works-hero {
  padding: calc(var(--nav-h) + var(--space-16)) 0 var(--space-12);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.works-hero p { color: var(--c-muted); max-width: 60ch; margin-top: var(--space-4); }
.works-hero__count {
  display: inline-block; margin-top: var(--space-6);
  font-size: 0.8rem; color: var(--c-muted);
  border: 1px solid var(--c-border); border-radius: 999px;
  padding: var(--space-1) var(--space-4);
}

.works-filters {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-block: var(--space-10);
}
.works-filter {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--c-border); border-radius: 999px;
  color: var(--c-muted); background: transparent;
  transition: all var(--transition);
}
.works-filter:hover { color: var(--c-text); border-color: var(--c-muted); }
.works-filter.is-active {
  color: var(--c-accent-text); background: var(--c-accent); border-color: var(--c-accent);
}

.works-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
}
@media (max-width: 900px) { .works-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .works-grid { grid-template-columns: 1fr; } }

.works-card {
  display: block; text-align: left; width: 100%; padding: 0;
  background: var(--c-surface); border-radius: var(--radius-lg);
  overflow: hidden; cursor: zoom-in;
  transition: transform var(--transition), box-shadow var(--transition);
}
.works-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.works-card[hidden] { display: none; }
.works-card__img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--c-bg); }
.works-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.works-card:hover .works-card__img-wrap img { transform: scale(1.05); }
.works-card__count {
  position: absolute; top: var(--space-3); right: var(--space-3);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(0,0,0,0.6); color: #fff;
  padding: 2px var(--space-2); border-radius: 999px;
}
.works-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.works-card__cat { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); }
.works-card__name { font-size: 0.95rem; font-weight: 700; color: var(--c-text); margin-top: var(--space-2); line-height: 1.35; }

.works-loadmore-row { display: flex; justify-content: center; margin-top: var(--space-12); }
.works-loadmore {
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-8); border-radius: var(--radius-sm);
  border: 1px solid var(--c-border); color: var(--c-text); background: var(--c-bg);
  transition: all var(--transition);
}
.works-loadmore:hover { border-color: var(--c-accent); color: var(--c-accent); }
.works-loadmore[hidden] { display: none; }

.works-viewall {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-8); border-radius: var(--radius-sm);
  border: 1px solid var(--c-text); color: var(--c-text); text-decoration: none;
  transition: all var(--transition);
}
.works-viewall::after { content: '↗'; font-size: 1rem; line-height: 1; }
.works-viewall:hover { border-color: var(--c-accent); color: var(--c-accent); }
.works-preview-cta {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2); margin-top: var(--space-10);
}
.works-preview-cta__note {
  max-width: 48ch; margin: 0; color: var(--c-muted); font-size: 0.85rem; line-height: 1.6;
}

/* --- Lightbox ------------------------------------------------ */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(6,6,8,0.92); }
.lightbox__stage {
  position: relative; z-index: 1;
  width: min(92vw, 1100px); max-height: 88vh;
  display: flex; flex-direction: column; align-items: center;
}
.lightbox__img {
  max-width: 100%; max-height: 74vh; width: auto; height: auto;
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  background: #111;
}
.lightbox__close {
  position: absolute; top: -48px; right: 0;
  font-size: 2rem; line-height: 1; color: #fff; opacity: 0.85;
}
.lightbox__close:hover { opacity: 1; }
.lightbox__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.lightbox__nav--prev { left: -8px; }
.lightbox__nav--next { right: -8px; }
@media (max-width: 768px) {
  .lightbox__nav--prev { left: 4px; }
  .lightbox__nav--next { right: 4px; }
  .lightbox__close { top: 4px; right: 4px; }
}
.lightbox__meta {
  margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-4);
  color: rgba(255,255,255,0.85); font-size: 0.85rem; text-align: center;
}
.lightbox__counter { color: rgba(255,255,255,0.55); }

/* --- Inline nav toggle JS stub --- */