/* =====================================
   VISH Wireframe Layout
   ===================================== */

/* Variables */
:root {
  --ink: #141414;
  --bg: #ffffff;
  --line: #e6e6e6;
  --accent: #c80000;

  --wrap: 1200px;
  --header-h: 64px;

  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 22px;
  --fs-xl: 36px;

  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 48px;
}

/* Reset / Base */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  font: 400 var(--fs-base)/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }

/* Typography */
h1, h2, h3 { text-transform: uppercase; margin: 0 0 var(--s-2); }
h1 { font-size: var(--fs-xl); line-height: 1.1; }
h2 { font-size: var(--fs-lg); line-height: 1.2; }
p, li { margin-bottom: var(--s-2); }

body {
  font-kerning: auto;
  letter-spacing: 0;
}
h1, h2, h3 {
  letter-spacing: .02em; /* small tight tracking for titles */
  line-height: 1.1;
}
p {
  letter-spacing: 0; /* keep normal for body */
  line-height: 1.6;
  max-width: 60ch;
}

/* Header */
header {
  position: fixed;
  top: 0; left: 0; width: 100%; height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  z-index: 10;
}
nav {
  display: flex; justify-content: center; align-items: center;
  height: 100%;
  gap: var(--s-2);
}
nav a {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  padding: 0.5em 0.75em;
  border-radius: 2px;
}
nav a:hover { background: var(--line); }

/* Main Layout */
main {
  padding-top: var(--header-h);
}
section {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  padding-block: 6rem;
}
section:last-child { border-bottom: none; }
ul { padding-left: 1.2em; }

/* Footer */
footer {
  text-align: left;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: #555;
}

/* ===== Footer alignment fix ===== */
footer {
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: #555;
}

footer .footer-inner {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--s-3);
}

/* Make sure text aligns flush with page grid */
footer p {
  margin: 0;
}


/* Forms */
form { margin-top: var(--s-3); max-width: 500px; }
label { display: block; font-size: var(--fs-sm); margin-bottom: 4px; }
input, textarea {
  width: 100%; padding: 8px;
  border: 1px solid var(--line);
  font: inherit; margin-bottom: var(--s-2);
}
button {
  padding: 10px 16px;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  background: var(--accent);
  border: none;
  color: #fff;
  cursor: pointer;
}
.cta {
  background: #FFF;
  color: var(--accent);
  border: none;
}

button:hover { background: #a00000; }

/* ================================
   LAYOUT PRIMITIVES (stage 2)
   ================================ */

/* Container */
.container { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }

/* Stacks (vertical rhythm) */
.stack { display: grid; gap: var(--s-3); }
.stack--tight { gap: var(--s-2); }
.stack--loose { gap: var(--s-4); }

/* Rows (horizontal groups) */
.row { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.row--spread { justify-content: space-between; }
.row--center { justify-content: center; }

/* Grid */
.grid { display: grid; gap: var(--s-3); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }

.grid-3 {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.grid-3 p {
  margin-top: 0;
}
.grid-3 h2 {
  margin-bottom: 0rem;
}
article.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (max-width: 768px) {
  .grid-3 {
    flex-direction: column;
    gap: var(--s-4);
  }

  .grid-3 article {
    width: 100%;
  }
}

@media (min-width: 800px){
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Sidebar layout */
.split { display: grid; gap: var(--s-3); }
@media (min-width: 900px){
  .split { grid-template-columns: 2fr 1fr; } /* content / aside */
}

/* Section patterns */
.section { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.section:last-child { border-bottom: 0; }
.section__hd { margin-bottom: var(--s-3); }
.section__eyebrow { font-size: var(--fs-sm); text-transform: uppercase; color: var(--accent); }

/* Cards / boxes */
.card { border: 1px solid var(--line); background:#fafafa; padding: var(--s-3); }
.card--light { background:#fff; }

/* Media helpers */
.media { display: grid; gap: var(--s-2); }
@media (min-width: 760px){
  .media { grid-template-columns: 160px 1fr; align-items: start; }
}
.aspect-16x9 { position: relative; }
.aspect-16x9::before { content:""; display:block; padding-bottom:56.25%; }
.aspect-16x9 > * { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Simple page header */
.pagehead { padding: var(--s-4) 0 var(--s-3); border-bottom:1px solid var(--line); }
.pagehead h1 { margin: 0; }

/* Utilities */
.max-60 { max-width: 60ch; }
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mt-3 { margin-top: var(--s-3) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mb-2 { margin-bottom: var(--s-2) !important; }
.mb-3 { margin-bottom: var(--s-3) !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }

/* ===== Nav fix (scoped) ===== */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}
.site-header__inner{
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center; /* center the whole nav */
}
.site-nav{
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.site-nav a{
  font-size: var(--fs-sm);
  text-transform: uppercase;
  padding: 0.5em 0.75em;
  border-radius: 2px;
  line-height: 1;
}
.site-nav a:hover{ background: var(--line); }

/* Header layout */
.site-header {
  border-bottom: 1px solid #e0e0e0;
  background: #fff;
  top: 0;
  z-index: 100;
}

.nav-wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.main-nav {
  display: flex;
  gap: 2rem;
  margin-left: auto;
}

.main-nav a {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--charcoal);
  font-weight: 500;
}

.main-nav a:hover {
  color: var(--vish-red);
}


/* ensure content isn't hidden under fixed header */
main{ padding-top: var(--header-h); }

/* --- fix content offset under fixed header --- */
:root { --header-h: 64px; }                /* adjust if your bar is taller */
main { padding-top: calc(var(--header-h) + var(--s-2)); }

/* --- page header block --- */
.pagehead { 
  padding: var(--s-4) 0 var(--s-3);
  border-bottom: 1px solid var(--line);
}
.pagehead .lead {
  font-size: var(--fs-lg);
  color: #444;
  margin-bottom: var(--s-2);
  text-wrap: balance;
}

/* optional: make first content section breathe a bit more */
.section:first-of-type { padding-top: var(--s-4); }

/* --- page header (centered hero style) --- */
.pagehead {
  height: calc(100vh - var(--header-h)); /* fills viewport minus nav */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* centers horizontally */
  text-align: center;  /* centers all inline text */
  padding: 0 var(--s-2);
  gap: var(--s-2);     /* even spacing between text blocks */
}

.pagehead p {
  max-width: 75ch;
  line-height: 1.6;
}

.pagehead h1,
.pagehead p,
.pagehead .row {
  margin: 0 auto;      /* ensures everything is aligned dead center */
}

.pagehead .row {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
}

.section-block {
  padding-block: 6rem;
}

.two-col, .three-col {
  display: grid;
  gap: 2rem;
}

.two-col {
  grid-template-columns: 1fr 1fr;
}

.three-col {
  grid-template-columns: repeat(3, 1fr);
}

.placeholder {
  background: #e0e0e0;
  border-radius: 4px;
  height: 300px;
}

.centered {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .two-col, .three-col {
    grid-template-columns: 1fr;
  }
}

/* Layout Variants */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.reverse {
  direction: rtl;
}

.reverse > * {
  direction: ltr;
}

/* Placeholder styling */
.placeholder {
  background: #e0e0e0;
  border-radius: 4px;
}

/* Mobile */
@media (max-width: 768px) {
  .two-col {
    grid-template-columns: 1fr;
  }

  .reverse {
    direction: ltr;
  }
}


.img-placeholder {
  width: 100%;
  height: 300px;
  background: #ebebeb;
  border-radius: 4px;
}


/* ===== About (clean & minimal) ===== */
.about .section { 
  padding: 3rem 0; 
  border-top: 1px solid #eaeaea;
}
.about .section:first-child { border-top: 0; }

.section--hero { padding: 6rem 0 4rem; max-width: 70ch; margin-inline: auto; }
.txt-center { text-align: center; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; } /* keep text normal */

.split__text > h2 { margin: 0 0 .5rem; }
.split__text > p { margin: 0; }

/* Values in two columns on desktop */
.values {
  columns: 1;
  column-gap: 2rem;
  margin: .5rem 0 0;
  padding-left: 1rem;
}
.values li { break-inside: avoid; margin-bottom: .5rem; }

/* Placeholders */
.placeholder {
  background: #d9d9d9;
  width: 100%;
  height: clamp(220px, 30vw, 360px);
  border-radius: 6px;
}

/* Type scale hooks (uses your existing fonts/tokens) */
.about h1 { text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(2rem, 3.6vw, 3.2rem); margin: 0 0 .6rem; }
.about h2 { text-transform: uppercase; font-size: clamp(1.25rem, 1.4vw, 1.5rem); }
.about h3 { text-transform: uppercase; font-size: clamp(1rem, 1vw, 1.125rem); letter-spacing: .06em; }
.about p  { max-width: 70ch; }

/* Responsive */
@media (max-width: 900px){
  .split { grid-template-columns: 1fr; }
  .values { columns: 1; }
  .section--hero { padding: 4rem 0 2.5rem; }
}

p { word-wrap: balance; }

html, body, p {
  hyphens: none;
  -webkit-hyphens: none;
  -moz-hyphens: none;
}

p {
  max-width: 70ch;
  margin: 0 0 1em;
  text-wrap: pretty;
  overflow-wrap: break-word; /* prevents long words from breaking layout */
  hyphens: none;
  -webkit-hyphens: none;
  -moz-hyphens: none;
}


.hero_home { 

  background-image: url('/_assets/img/hero_home.webp');
  background-repeat: no-repeat;
  background-size: cover;

}






/* ===============================
   VISH Typography Refinement
   =============================== */

/* Core optical polish */
html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

/* Body text — breathable and balanced */
body {
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-wrap: pretty;
  hyphens: auto;
  hanging-punctuation: first last;
}

/* Headlines — precise and sculpted */
h1, h2, h3 {
  font-family: "URW DIN", sans-serif;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;
  font-kerning: normal;
  text-rendering: geometricPrecision;
  letter-spacing: -0.015em;
  line-height: 1.05;
  text-wrap: balance;
}

/* Hero text styling */
.hero_home h1 {
  letter-spacing: -0.025em;
  word-spacing: 0.02em;
  font-size: 500%;
  text-wrap: nowrap;
}
.hero_home p {
  text-wrap: balance;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
}

/* Rag control */
p, li {
  max-width: 65ch;
  text-align: left;
  orphans: 3;
  widows: 3;
}

/* Hyphenation for long words */
p {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Optional “optical alignment” helper */
[data-hang]::first-letter {
  margin-left: -0.02em;
}




img,
.section img,
.hero_home {
  filter:
    contrast(1.05)
    brightness(0.98)
    saturate(1.1)
    sepia(0.08)
    hue-rotate(-5deg); /* tiny warm shift */
  transition: filter 1s ease;
}

img:hover {
  filter:
    contrast(1.1)
    brightness(1)
    saturate(1.2)
    sepia(0.1)
    hue-rotate(-3deg);
}




/* ===== VISH compact navbar (drop-in) ===== */

/* 1) tighten the global header height token (you already use --header-h) */
:root { --header-h: 56px; }                 /* was 64px :contentReference[oaicite:0]{index=0}*/
@media (max-width: 880px){ :root { --header-h: 52px; } }
@media (max-width: 640px){ :root { --header-h: 48px; } }

/* 2) compact header styling + subtle glass when scrolled */
.site-header{
  position: fixed; inset: 0 0 auto 0;
  height: var(--header-h);                   /* you already reference this :contentReference[oaicite:1]{index=1}*/
  background: #fff;
  border-bottom: 1px solid rgba(20,20,20,.08); /* lighter line than --line */
  transition: height .2s ease, background .2s ease, border-color .2s ease;
  z-index: 100;
}
.site-header.is-scrolled{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom-color: rgba(20,20,20,.06);
}

/* 3) compress the inner wrapper and links */
.nav-wrap{
  width: min(100% - 2rem, var(--wrap));      /* already used in your file :contentReference[oaicite:2]{index=2}*/
  margin-inline: auto;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding-inline: .25rem;
}
.logo{ font-weight: 800; letter-spacing: .02em; }

.main-nav{
  display: flex; align-items: center; gap: 1rem; /* was 2rem :contentReference[oaicite:3]{index=3}*/
  margin-left: auto;
}
.main-nav a{
  font-size: 0.85rem;                        /* was ~0.9rem :contentReference[oaicite:4]{index=4}*/
  text-transform: uppercase;
  font-weight: 500;
  padding: .35rem .4rem;                     /* tighter click target */
  line-height: 1;
  border-radius: .35rem;
}
.main-nav a:hover{ background: inherit; }

/* 4) mobile: tighter gap + smaller type so the row fits */
@media (max-width: 880px){
  .main-nav{ gap: .75rem; }
  .main-nav a{ font-size: .8rem; padding: .3rem .35rem; }
}
@media (max-width: 640px){
  .main-nav{ gap: .5rem; }
  .main-nav a{ font-size: .78rem; padding: .28rem .32rem; }
}

.main-nav a.active {
  color: var(--accent);
}