/* Hai — Foundations
   white gallery, black ink. Use sparingly; respect negative space. */

@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lora-400.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/lora-400-italic.woff2') format('woff2'); }

:root {
  /* ---------- Colors ---------- */
  --color-midnight-ink: #000000;   /* Text, borders, inverted UI */
  --color-canvas-white: #FFFFFF;   /* Page bg, surfaces */
  --color-ferry-red:    #CF2442;   /* Reserved accent — alerts, never CTA fill */

  /* Semantic role tokens */
  --fg:             var(--color-midnight-ink);
  --fg-muted:       rgba(0, 0, 0, 0.55);
  --fg-subtle:      rgba(0, 0, 0, 0.35);
  --bg:             var(--color-canvas-white);
  --bg-elevated:    var(--color-canvas-white);
  --border:         var(--color-midnight-ink);
  --border-hairline: rgba(0, 0, 0, 0.12);
  --accent:         var(--color-ferry-red);

  /* ---------- Typography — Families ---------- */
  /* Forma Nuovo is proprietary; substituted with Montserrat. Replace when licensed. */
  --font-forma-nuovo: 'Forma Nuovo', 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Times Now is proprietary; substituted with Lora. Replace when licensed. */
  --font-times-now:   'Times Now',   'Lora', ui-serif, Georgia, "Times New Roman", serif;

  --font-sans:    var(--font-forma-nuovo);
  --font-serif:   var(--font-times-now);

  --font-weight-regular:  400;
  --font-weight-semibold: 600;

  /* ---------- Type Scale — Sans (Forma Nuovo) ---------- */
  --sans-16: 16px;  --sans-16-lh: 1;     --sans-16-tr: -0.062em;
  --sans-22: 22px;  --sans-22-lh: 1;     --sans-22-tr: -0.075em;
  --sans-24: 24px;  --sans-24-lh: 1;     --sans-24-tr: -0.086em;
  --sans-28: 28px;  --sans-28-lh: 1.15;  --sans-28-tr: -0.10em;
  --sans-32: 32px;  --sans-32-lh: 0.98;  --sans-32-tr: -0.15em;

  /* ---------- Type Scale — Serif (Times Now) ---------- */
  --serif-16: 16px; --serif-16-lh: 1;    --serif-16-tr: 0.05em;
  --serif-18: 18px; --serif-18-lh: 1.25; --serif-18-tr: -0.027em;
  --serif-24: 24px; --serif-24-lh: 1.15; --serif-24-tr: -0.037em;
  --serif-26: 26px; --serif-26-lh: 1.15; --serif-26-tr: -0.05em;
  --serif-31: 31px; --serif-31-lh: 0.80; --serif-31-tr: -0.062em;
  --serif-32: 32px; --serif-32-lh: 0.80; --serif-32-tr: -0.062em;

  /* ---------- Semantic Type Tokens ---------- */
  --text-caption:        16px;
  --leading-caption:     1;
  --tracking-caption:    0.8px;

  --text-body:           18px;
  --leading-body:        1.25;
  --tracking-body:       -0.8px;

  --text-subheading:     22px;
  --leading-subheading:  1;
  --tracking-subheading: -1.65px;

  --text-heading:        24px;
  --leading-heading:     1;
  --tracking-heading:    -2.06px;

  --text-heading-lg:     31px;
  --leading-heading-lg:  0.8;
  --tracking-heading-lg: -1.92px;

  /* ---------- Spacing (8pt base, comfortable) ---------- */
  --spacing-unit: 8px;
  --spacing-4:  4px;
  --spacing-5:  5px;
  --spacing-8:  8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-32: 32px;
  --spacing-64: 64px;

  /* ---------- Layout ---------- */
  --section-gap:   32px;   /* Vertical rhythm between sections */
  --card-padding:  32px;
  --element-gap:   16px;
  --container-max: 1440px;

  /* ---------- Border Radius ---------- */
  --radius-lg:       10px;
  --radius-cards:    50%;   /* Circular / oval feature cards */
  --radius-links:    10px;
  --radius-buttons:  10px;

  /* ---------- Borders ---------- */
  --border-width:  1px;
  --border-style:  solid;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;

  /* ---------- Shadows ---------- */
  /* Hai avoids drop shadow. Reserve for absolute necessity. */
  --shadow-none: none;

  /* ---------- Display sizes (ThemeForest scale) ---------- */
  --display-xl:  clamp(72px, 11vw, 180px);
  --display-lg:  clamp(56px, 8vw, 128px);
  --display-md:  clamp(40px, 6vw, 88px);

  /* ---------- Tweak hooks (overridable at runtime) ---------- */
  --t-accent:    var(--color-ferry-red);
  --t-density:   1;        /* 0.85 compact / 1 default / 1.15 airy */
  --t-radius:    10px;
}

/* ---------- Display Type Classes ---------- */
.t-display-xl {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--display-xl);
  line-height: 0.88;
  letter-spacing: -0.05em;
}
.t-display-lg {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--display-lg);
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.t-display-md {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--display-md);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.t-display-serif {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--display-lg);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-style: italic;
}

/* ---------- Ghost Button ---------- */
.btn-ghost {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
  border-radius: var(--t-radius);
  padding: 16px 28px;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-standard);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.btn-ghost:hover { background: var(--fg); color: var(--bg); opacity: 1; }

.btn-solid {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  border-radius: var(--t-radius);
  padding: 16px 28px;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-standard);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.btn-solid:hover { opacity: 0.85; }

.btn-primary {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  border-radius: var(--t-radius);
  padding: 16px 28px;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-standard);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.btn-primary:hover { opacity: 0.85; }
[data-theme="dark"] .btn-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- Marquee ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-standard), transform 800ms var(--ease-standard); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Image hover lift ---------- */
.img-hover { overflow: hidden; }
.img-hover img { transition: transform 800ms var(--ease-standard), opacity var(--duration-base) var(--ease-standard); }
.img-hover:hover img { transform: scale(1.04); }

/* ---------- Underline link ---------- */
.link-u {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; background: var(--bg); }

/* ---------- Base ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic Type Classes ---------- */
.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

.t-body {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.t-subheading {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}

.t-heading {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.t-heading-lg {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}

.t-display {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--sans-32);
  line-height: var(--sans-32-lh);
  letter-spacing: var(--sans-32-tr);
}

.t-serif-display {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--serif-31);
  line-height: var(--serif-31-lh);
  letter-spacing: var(--serif-31-tr);
}

.t-product-link {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-regular);
  font-size: var(--serif-18);
  line-height: var(--serif-18-lh);
  letter-spacing: var(--serif-18-tr);
}

.t-nav {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--sans-16);
  line-height: var(--sans-16-lh);
  letter-spacing: var(--sans-16-tr);
}

/* ---------- Headings (semantic mapping) ---------- */
h1, .h1 { font: var(--font-weight-regular) var(--text-heading-lg)/var(--leading-heading-lg) var(--font-sans); letter-spacing: var(--tracking-heading-lg); }
h2, .h2 { font: var(--font-weight-regular) var(--text-heading)/var(--leading-heading) var(--font-sans); letter-spacing: var(--tracking-heading); }
h3, .h3 { font: var(--font-weight-regular) var(--text-subheading)/var(--leading-subheading) var(--font-sans); letter-spacing: var(--tracking-subheading); }
p       { font-family: var(--font-serif); font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }

/* ---------- Dark Mode ---------- */
[data-theme="dark"] {
  --fg:             #f0ede8;
  --fg-muted:       rgba(240, 237, 232, 0.55);
  --fg-subtle:      rgba(240, 237, 232, 0.35);
  --bg:             #0e0d0b;
  --bg-elevated:    #161410;
  --border:         #f0ede8;
  --border-hairline: rgba(240, 237, 232, 0.12);
  --color-midnight-ink: #f0ede8;
  --color-canvas-white: #0e0d0b;
}
[data-theme="dark"] body,
[data-theme="dark"] { background: var(--bg); color: var(--fg); }
[data-theme="dark"] header { background: var(--bg) !important; border-bottom-color: rgba(240,237,232,0.1) !important; }
[data-theme="dark"] footer { border-top-color: rgba(240,237,232,0.1) !important; }
[data-theme="dark"] .btn-solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
[data-theme="dark"] .btn-ghost { color: var(--fg); border-color: var(--fg); }
[data-theme="dark"] .btn-ghost:hover { background: var(--fg); color: var(--bg); }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
  background: transparent;
  color: var(--fg);
  border-color: rgba(240,237,232,0.3);
}
[data-theme="dark"] ::selection { background: var(--fg); color: var(--bg); }

/* ---------- Mobile Responsive ---------- */
@media (max-width: 768px) {
  /* Nav */
  .me-nav-inner {
    padding: 16px 20px !important;
    grid-template-columns: 1fr auto 1fr !important;
  }
  .me-nav-links { display: none !important; }
  .me-nav-right { gap: 12px !important; }
  .me-mobile-menu-open .me-nav-links {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 100;
    padding: 80px 32px 48px;
    gap: 8px;
    overflow-y: auto;
  }

  /* Sections */
  .me-section-pad { padding: 48px 20px !important; }
  .me-section-pad-sm { padding: 32px 20px !important; }

  /* Grids → single column */
  .me-grid-2,
  .me-grid-3,
  .me-grid-4,
  .me-grid-5 {
    grid-template-columns: 1fr !important;
  }
  .me-grid-2-1 {
    grid-template-columns: 1fr !important;
  }

  /* Hero split → stack */
  .me-hero-split {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .me-hero-split > *:first-child {
    min-height: 60vw;
  }

  /* Display type scale */
  .t-display-xl { font-size: clamp(64px, 18vw, 120px) !important; }
  .t-display-lg { font-size: clamp(48px, 14vw, 88px) !important; }
  .t-display-md { font-size: clamp(36px, 11vw, 64px) !important; }

  /* Buttons */
  .btn-solid, .btn-ghost { padding: 14px 20px !important; font-size: 12px !important; }

  /* Footer */
  .me-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .me-footer-grid > *:first-child {
    grid-column: 1 / -1;
  }
  .me-footer-bottom {
    flex-direction: column !important;
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  .me-nav-inner { padding: 14px 16px !important; }
  .me-section-pad { padding: 40px 16px !important; }
  .me-footer-grid { grid-template-columns: 1fr !important; }
}
a {
  color: var(--fg);
  text-decoration: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}
a:hover { opacity: 0.6; }

/* Selection */
::selection { background: var(--fg); color: var(--bg); }

/* ---------- Dark mode — Nav, Footer, common patterns ---------- */
[data-theme="dark"] header a,
[data-theme="dark"] header button { color: var(--fg) !important; }
[data-theme="dark"] header svg { stroke: currentColor; }
[data-theme="dark"] footer { background: var(--bg) !important; }
[data-theme="dark"] footer a { color: var(--fg) !important; opacity: 0.85; }
[data-theme="dark"] footer a:hover { opacity: 1; }
[data-theme="dark"] .btn-ghost { background: transparent; }

/* Dark mode body copy — global tone shift for inline rgba(0,0,0,*) text */
[data-theme="dark"] body p,
[data-theme="dark"] body h1,
[data-theme="dark"] body h2,
[data-theme="dark"] body h3,
[data-theme="dark"] body h4,
[data-theme="dark"] body h5,
[data-theme="dark"] body h6,
[data-theme="dark"] body span,
[data-theme="dark"] body div,
[data-theme="dark"] body li,
[data-theme="dark"] body label { color: var(--fg); }
/* Allow softer rgba shades to remain (footer copy, captions) by inverting */
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.65)"],
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.6)"],
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.7)"],
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.75)"] { color: rgba(240, 237, 232, 0.7) !important; }
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.5)"],
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.55)"],
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.45)"] { color: rgba(240, 237, 232, 0.55) !important; }
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.3)"],
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.35)"],
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.25)"] { color: rgba(240, 237, 232, 0.4) !important; }
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.12)"],
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.15)"],
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.08)"],
[data-theme="dark"] body [style*="rgba(0, 0, 0, 0.1)"] { border-color: rgba(240, 237, 232, 0.15) !important; }
[data-theme="dark"] body [style*="background: rgb(255, 255, 255)"],
[data-theme="dark"] body [style*="background-color: rgb(255, 255, 255)"] { background: var(--bg-elevated) !important; }
[data-theme="dark"] body [style*="background: rgb(246, 244, 240)"] { background: rgba(240, 237, 232, 0.06) !important; }

/* Skip-link visible on focus */
.me-skip-link:focus { outline: 2px solid var(--fg); outline-offset: 2px; }

/* Universal focus state for keyboard users — accessibility */
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 1px;
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}