/* =====================================================================
   BERNARDO URBINA DESIGN — BRAND SYSTEM  ·  warm editorial
   ---------------------------------------------------------------------
   Implementation of BRAND-BOOK.md, which is the single source of truth.
   If this file and the brand book ever disagree, the brand book wins.
   Direction: warm cream + Cormorant serif headlines + Sora interface +
   a single amber accent. A gallery, not a store.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Sora:wght@300;400;500&display=swap');

:root {
  /* Color — warm, achromatic-with-soul, single amber accent */
  --paper: #F4EFE7;        /* primary page background */
  --paper-soft: #FAF7F1;   /* lighter sections */
  --sand: #EDE6DA;         /* secondary surface / quiet CTA bands */
  --espresso: #28221C;     /* primary text; dark sections */
  --near-black: #1C1A17;   /* deepest backgrounds */
  --walnut: #5C5147;       /* body / secondary text */
  --muted: #7A6F62;        /* captions, metadata, labels */
  --amber: #C4943A;        /* the accent — thin rules, marks (matches the logo) */
  --amber-deep: #A87D2E;   /* amber text on light (contrast-safe) */
  --border: #E3DACB;       /* hairline dividers */
  --white: #FFFFFF;

  /* Typography */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Sora", system-ui, -apple-system, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --ls-eyebrow: 0.20em;
  --ls-label: 0.14em;
  --ls-body: 0.01em;
  --lh-heading: 1.06;
  --lh-body: 1.7;

  /* Spacing — small gaps FIXED (component-internal), large rhythm FLUID (macro).
     Fluid values use rem + vw so they also respond to browser zoom (a11y). */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: clamp(2rem, 1.4rem + 2vw, 3rem);      /* ~32 → 48px  */
  --space-xl: clamp(3rem, 2rem + 4vw, 5rem);        /* ~48 → 80px  */
  --space-2xl: clamp(4rem, 2.5rem + 6vw, 7.5rem);   /* ~64 → 120px */

  /* Layout */
  --max-width: 2000px;
  --gutter: clamp(1.5rem, 4vw, 3rem);               /* 24px → 48px, constant past 1200px */
  --radius: 2px;          /* cards + inputs — sharp, editorial */
  --radius-btn: 5px;      /* buttons — softly rounded */
  --radius-img: 5px;      /* photos — slight soft corners */

  /* Motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 0.4s;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--walnut);
  background: var(--paper);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Container */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }

/* Headings — Cormorant, light. Thinness is discipline, not weakness. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  color: var(--espresso);
}
h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
h4 { font-size: 1.25rem; }

/* Eyebrow + labels — Sora uppercase, small. Sentence-case everywhere else. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem; font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--amber-deep);
}
.label {
  font-family: var(--font-sans);
  font-size: 0.7rem; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--muted);
}

/* The single amber accent — enters as a whisper (a thin rule) */
.rule-amber { width: 48px; height: 1px; background: var(--amber); border: 0; }

/* Buttons — square, editorial. One primary action per screen. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: var(--fw-regular);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 13px 30px; border-radius: var(--radius-btn);
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--duration) var(--ease);
}
.btn--primary { background: var(--espresso); color: var(--paper); border-color: var(--espresso); }
.btn--primary:hover { background: var(--near-black); }
.btn--paper { background: var(--paper); color: var(--espresso); border-color: var(--paper); box-shadow: 0 8px 24px rgba(20,15,10,.32); }
.btn--paper:hover { background: var(--white); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20,15,10,.40); }
.btn--outline { background: transparent; color: var(--espresso); border-color: var(--espresso); }
.btn--outline:hover { background: var(--espresso); color: var(--paper); }
.btn--ghost-paper { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn--ghost-paper:hover { background: var(--paper); color: var(--espresso); }
.btn--large { padding: 16px 40px; font-size: 0.78rem; }

/* Sections */
.section { padding: var(--space-xl) 0; }
.section--dark { background: var(--near-black); color: var(--paper); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--sand { background: var(--sand); }
.section--soft { background: var(--paper-soft); }

/* Editorial layout — force asymmetry, never a generic store grid */
.gallery-grid-asymmetric {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (max-width: 768px) {
  .gallery-grid-asymmetric { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* Photography — architectural ratios, object-fit cover, never skewed or squared */
.photo { display: block; width: 100%; object-fit: cover; border-radius: var(--radius-img); }
.photo--portrait { aspect-ratio: 3 / 4; }   /* vertical detail crops */
.photo--landscape { aspect-ratio: 16 / 9; }  /* workshop / landscape shots */
.photo--tall { aspect-ratio: 2 / 3; }        /* full-height slab portraits */

/* soft drop shadow on hover — lifts photos/renders off the paper, like the home cards */
.photo, .hero-band img, .pgal img, .phero__img img {
  transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}
.proj:hover .photo,
.hero-band img:hover,
.pgal img:hover,
.phero__img:hover img {
  box-shadow: 0 26px 55px -30px rgba(40, 34, 28, .50), 0 8px 20px -14px rgba(40, 34, 28, .26);
  transform: translateY(-4px);
}

/* ── Motion — THE standard. Needs reveal.js (adds .js) + respects reduced motion.
   Add `reveal` to content blocks (fade-rise); `reveal-mask` to display headlines
   (light wipe — hero + section openers ONLY). Stagger with `.d1`–`.d5`.
   `.grain` is a static texture overlay.
   See BRAND-BOOK.md §12. ── */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s var(--ease), transform .55s var(--ease); will-change: opacity, transform; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .reveal-mask { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal-mask.is-visible { opacity: 1; transform: none; }
  .js .d1 { transition-delay: .08s; } .js .d2 { transition-delay: .16s; }
  .js .d3 { transition-delay: .24s; } .js .d4 { transition-delay: .32s; }
  .js .d5 { transition-delay: .40s; }
}

/* Forms */
input, textarea, select {
  font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: 1rem;
  padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); color: var(--espresso); width: 100%; outline: none;
  transition: border-color var(--duration) var(--ease);
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--espresso); }
input::placeholder, textarea::placeholder { color: var(--muted); }

/* Utilities */
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-amber { color: var(--amber-deep); }
.mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); }

/* Fade-in */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.8s var(--ease) both; }

/* Responsive */
@media (max-width: 768px) {
  .section { padding: var(--space-lg) 0; }
  .btn--large { padding: 14px 32px; font-size: 0.72rem; }
}


/* FAQ — shared two-column accordion component (matches home page) */
.faq-wrap { display:grid; grid-template-columns:1fr 1.5fr; gap:var(--space-xl); align-items:start; }
.faq-aside h2 { color:var(--espresso); }
.faq-aside p { font-size:.95rem; color:var(--muted); margin-top:14px; max-width:30ch; line-height:1.7; }
.faq-list { border-bottom:1px solid var(--border); }
.faq-item { border-top:1px solid var(--border); }
.faq-item > summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 0; font-family:var(--font-display); font-weight:300; font-size:1.45rem; color:var(--espresso); transition:color .3s var(--ease); }
.faq-item > summary::-webkit-details-marker { display:none; }
.faq-item > summary:hover { color:var(--amber-deep); }
.faq-item[open] > summary { color:var(--amber-deep); }
.faq-mark { flex-shrink:0; position:relative; width:18px; height:18px; }
.faq-mark::before, .faq-mark::after { content:""; position:absolute; background:var(--amber); transition:transform .3s var(--ease); }
.faq-mark::before { top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
.faq-mark::after { left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
.faq-item[open] .faq-mark::after { transform:translateX(-50%) scaleY(0); }
.faq-answer { font-size:.95rem; color:var(--walnut); line-height:1.7; padding:0 0 24px; max-width:62ch; }
@media (max-width:768px){ .faq-wrap { grid-template-columns:1fr; gap:var(--space-lg); } }

/* ── Mobile chrome — nav + footer (≤768px), shared by every page.
   Pages style .nav/.footer inline; these selectors carry one extra class
   so they win the cascade. The hamburger <button> is injected by reveal.js;
   its rules are gated on .js, so without JS the links stay visible. ── */
.nav__toggle { display: none; }

/* Newsletter confirmation — swapped in for the footer form after signup */
.footer__joined { margin: 0; font-size: .85rem; color: #B9A98E; }

@media (max-width: 768px) {
  /* Safety net: nothing may widen the page (clip doesn't break sticky) */
  html, body { overflow-x: clip; }

  /* The logo can never be crushed out by the links again */
  .nav .nav__logo, .nav > a { flex-shrink: 0; }

  /* Hamburger — 44px tap target */
  .js .nav .nav__toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .nav__toggle span {
    display: block; width: 22px; height: 1px; background: var(--espresso);
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .nav--open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav--open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Links collapse into a solid panel under the bar */
  .js .nav .nav__links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--paper);
    box-shadow: 0 24px 40px -24px rgba(40, 34, 28, .35);
  }
  .js .nav.nav--open .nav__links { display: flex; }
  .nav .nav__links a { display: block; padding: 16px 0; font-size: .8rem; border-top: 1px solid var(--border); }
  .nav .nav__links a::after { display: none; }

  /* Footer — newsletter stacks, email input fills the row, © line wraps */
  .footer .footer__news { width: 100%; flex-direction: column; align-items: stretch; gap: 14px; }
  .footer .footer__news p { max-width: none; }
  .footer .footer__form input { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; }
  .footer .footer__meta { white-space: normal; }

  /* Footer links — comfortable tap rows */
  .footer .footer__nav { gap: 4px 20px; }
  .footer .footer__nav a { display: inline-block; padding: 8px 0; }

  /* Piece galleries — one photo per row, full width; the work is the point.
     (body prefix outranks the pages' inline 2-column rule) */
  body .pgal { grid-template-columns: 1fr; }
  body .pgal .g-band { grid-column: span 1; }
}