/* ==========================================================================
   Wizo design system — base
   One world: a pavilion of concrete and weathered timber standing in still water,
   in mist, lit from within. Everything on screen comes from that place:

   - pale mineral grounds (mist outside, plaster inside), ink for words;
   - one warm accent, the lamp behind the door — used sparingly, for what is chosen;
   - one type family (Instrument Sans), no serif, no monospace;
   - square corners and hairlines, like a drawing;
   - the "slot": a thin vertical bar — the door seen from far away — marks what can be
     chosen, and widens when it is.

   Page styles live next to this file: world.css (opening + public pages),
   flow.css (creating a website), app.css (account and projects), studio.css (staff).
   ========================================================================== */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100svh; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  p, h1, h2, h3, h4, h5 { overflow-wrap: break-word; }
  button { cursor: pointer; background: none; border: 0; padding: 0; border-radius: 0; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  fieldset { border: 0; padding: 0; min-width: 0; }
  legend { padding: 0; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    /* The place, as colours */
    --mist: #eceae6;          /* the air outside: opening ground, white-outs */
    --plaster: #f0ece4;       /* the wall inside: the ground of the product */
    --paper: #f8f5ef;         /* a sheet laid on the wall: raised surfaces */
    --ink: #1b1c1b;           /* words */
    --concrete: #6e6a66;      /* second voice, captions */
    --stone: #9a958f;         /* placeholders, disabled */
    --slate: #232a2e;         /* the lake at depth: menu, dark grounds */
    --slate-2: #2f393e;
    --timber: #7d7378;        /* weathered boards */
    --oak: #a1755b;           /* the hall */
    --lamp: #c8741c;          /* the light behind the door — the only accent */
    --lamp-soft: #e9a650;
    --lamp-deep: #96530f;     /* the accent when it has to be read as text */
    --success: #3d6b52;
    --danger: #a2402c;
    --warning: #96641a;

    --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Kept as names so older templates keep working; all three are the same family now. */
    --font-sans: var(--font);
    --font-display: var(--font);
    --font-mono: var(--font);

    /* Fluid type scale */
    --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
    --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem);
    --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 2.05rem);
    --step-3: clamp(1.9rem, 1.45rem + 2vw, 3.2rem);
    --step-4: clamp(2.4rem, 1.5rem + 4vw, 5rem);
    --step-5: clamp(2.9rem, 1.3rem + 7vw, 8rem);

    --gutter: clamp(1.25rem, 4.2vw, 4rem);
    --bar: 4.25rem;           /* height of the top bar */
    /* Kept as names; the design has square corners everywhere. */
    --radius-s: 0px; --radius-m: 0px; --radius-l: 0px; --radius-pill: 0px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Light ground (default): inside the building */
    --bg: var(--plaster);
    --fg: var(--ink);
    --muted: var(--concrete);
    --line: rgb(27 28 27 / 0.14);
    --line-strong: rgb(27 28 27 / 0.34);
    --surface: var(--paper);
    --surface-2: #e7e2d9;
    --accent: var(--lamp);
    --accent-text: var(--lamp-deep);
    --shadow: 0 1px 0 rgb(27 28 27 / 0.04), 0 24px 60px -30px rgb(27 28 27 / 0.28);
    color-scheme: light;
  }

  [data-theme="light"] {
    --bg: var(--plaster); --fg: var(--ink); --muted: var(--concrete);
    --line: rgb(27 28 27 / 0.14); --line-strong: rgb(27 28 27 / 0.34);
    --surface: var(--paper); --surface-2: #e7e2d9; --accent-text: var(--lamp-deep);
    color-scheme: light;
  }

  /* Dark ground: the lake at depth. Used for the menu and a few sections, never a whole site. */
  [data-theme="dark"] {
    --bg: var(--slate); --fg: #f1eee8; --muted: #a9aeb0;
    --line: rgb(241 238 232 / 0.16); --line-strong: rgb(241 238 232 / 0.36);
    --surface: var(--slate-2); --surface-2: #38444a; --accent-text: var(--lamp-soft);
    --shadow: 0 30px 80px -30px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

@layer base {
  html { background: var(--plaster); scroll-padding-top: 6rem; }
  body { font-family: var(--font); font-size: var(--step-0); background: var(--bg); color: var(--fg); font-feature-settings: "ss01", "cv05"; }
  [data-theme] { background-color: var(--bg); color: var(--fg); }
  ::selection { background: var(--lamp); color: #fff; }
  :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
  h1, h2, h3, h4 { font-weight: 500; line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; }
  p, li, dd { text-wrap: pretty; }
  hr { border: 0; border-top: 1px solid var(--line); }
  input, textarea { caret-color: var(--lamp); }
  .skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 300; background: var(--ink); color: var(--plaster); padding: 0.7rem 1rem; }
  .skip-link:focus { top: 1rem; }
}

/* Moving between pages is a soft cross-fade where the browser supports it (kept at the top level:
   this rule is not allowed inside a cascade layer). */
@view-transition { navigation: auto; }

@layer components {
  .container { width: min(100% - 2 * var(--gutter), 1520px); margin-inline: auto; }
  .container--narrow { width: min(100% - 2 * var(--gutter), 780px); margin-inline: auto; }

  /* Typography ---------------------------------------------------------- */
  .display { font-weight: 500; letter-spacing: -0.04em; line-height: 0.98; }
  .display em { font-style: normal; color: var(--muted); }
  .h1 { font-size: var(--step-5); }
  .h2 { font-size: var(--step-4); }
  .h3 { font-size: var(--step-3); }
  .h4 { font-size: var(--step-2); line-height: 1.08; }
  /* The caption: the small condensed capitals of a drawing's title block. */
  .caption, .eyebrow, .field__label {
    font-stretch: 84%; font-weight: 600; font-size: 0.72rem; line-height: 1.3;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
  }
  .eyebrow { display: inline-flex; align-items: center; gap: 0.8em; }
  /* The slot as a small mark (replaces the old round dot). */
  .eyebrow .dot, .dot { width: 3px; height: 0.95em; background: var(--lamp); flex: none; border-radius: 0; box-shadow: none; }
  /* Small factual text: references, sizes, dates. Condensed, with figures that line up. */
  .mono { font-stretch: 86%; font-size: 0.82rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
  .muted { color: var(--muted); }
  .lead { font-size: var(--step-1); line-height: 1.42; color: var(--muted); max-width: 42ch; letter-spacing: -0.01em; }
  .prose { max-width: 62ch; }
  .prose > * + * { margin-top: 0.9em; }

  /* Brand --------------------------------------------------------------- */
  .wordmark { font-weight: 600; font-size: 1.32rem; line-height: 1; letter-spacing: -0.045em; }
  .wordmark--small { font-size: 1.1rem; }
  .brand { display: inline-flex; align-items: baseline; gap: 0.12em; font-weight: 600; font-size: 1.32rem; line-height: 1; letter-spacing: -0.045em; }
  .brand__dot { width: 3px; height: 0.72em; background: var(--lamp); display: inline-block; }

  /* Buttons -------------------------------------------------------------
     A plain ink block. The slot appears at its left edge when it is about to be pressed. */
  .btn {
    --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-line: var(--btn-bg);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.9em;
    min-height: 3.25rem; padding: 0.85rem 1.5rem; overflow: hidden;
    background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-line);
    font-weight: 550; font-size: 0.97rem; line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, padding 0.45s var(--ease-out);
  }
  .btn::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--lamp); transition: width 0.45s var(--ease-out); }
  .btn:hover::before, .btn:focus-visible::before { width: 6px; }
  .btn__arrow { display: inline-block; transition: transform 0.5s var(--ease-out); }
  .btn:hover .btn__arrow { transform: translateX(5px); }
  .btn--ember::before { width: 4px; }            /* the main action of a page keeps its slot lit */
  .btn--ember:hover::before { width: 9px; }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--line-strong); }
  .btn--ghost:hover { --btn-line: var(--fg); }
  .btn--quiet { --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: transparent; padding-inline: 0.4rem; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.3em; }
  .btn--quiet::before { display: none; }
  .btn--quiet:hover { text-decoration-color: currentColor; }
  .btn--danger { --btn-bg: transparent; --btn-fg: var(--danger); --btn-line: rgb(162 64 44 / 0.45); }
  .btn--whatsapp { --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--line-strong); }
  .btn--sm { min-height: 2.4rem; padding: 0.5rem 0.95rem; font-size: 0.86rem; }
  .btn--lg { min-height: 3.75rem; padding: 1rem 1.9rem; font-size: 1.04rem; }
  .btn--block { width: 100%; }
  .btn[disabled] { opacity: 0.38; pointer-events: none; }

  .link { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.24em; text-decoration-thickness: 1px; transition: text-decoration-color 0.3s; }
  .link:hover { text-decoration-color: currentColor; }

  /* Tags ------------------------------------------------------------------ */
  .pill {
    display: inline-flex; align-items: center; gap: 0.5em; padding: 0.3rem 0.6rem;
    border: 1px solid var(--line-strong);
    font-stretch: 84%; font-weight: 600; font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
  }
  .pill--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .pill--ember { color: var(--accent-text); border-color: currentColor; }
  .pill--success { color: var(--success); border-color: currentColor; }
  .pill--warning { color: var(--warning); border-color: currentColor; }
  .pill--danger { color: var(--danger); border-color: currentColor; }

  /* Surfaces ------------------------------------------------------------- */
  .card { background: var(--surface); border: 1px solid var(--line); padding: clamp(1.25rem, 2.4vw, 2rem); }
  .divider { height: 1px; background: var(--line); border: 0; }
  .callout { border-left: 3px solid var(--line-strong); padding: 0.9rem 1.1rem; background: var(--surface); font-size: 0.95rem; }
  .callout--ember { border-left-color: var(--lamp); }
  .callout__title { font-weight: 600; margin-bottom: 0.3rem; }
  .callout ul { padding-left: 1.1rem; }

  /* A photograph: full bleed, square, with the caption of a plate in a book. */
  .plate { position: relative; margin: 0; overflow: hidden; background: var(--surface-2); }
  .plate img, .plate video { width: 100%; height: 100%; object-fit: cover; }
  .plate figcaption { position: absolute; left: 1rem; bottom: 0.9rem; color: #fff; text-shadow: 0 1px 12px rgb(0 0 0 / 0.5); }

  /* Top bar -------------------------------------------------------------
     Menu on the left, the name in the middle, one quiet action on the right. */
  .topbar {
    position: fixed; inset: 0 0 auto; z-index: 60; height: var(--bar);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding-inline: var(--gutter); color: var(--ink);
    transition: color 0.6s var(--ease-out);
  }
  .topbar[data-tone="light"] { color: #f4f1eb; }
  .topbar[data-open="true"] { color: #f1eee8; }
  .topbar > :last-child { justify-self: end; }
  .topbar .wordmark { justify-self: center; }
  .burger { display: inline-grid; gap: 5px; width: 44px; height: 44px; margin-left: -10px; padding: 10px; align-content: center; }
  .burger span { display: block; height: 1.5px; width: 24px; background: currentColor; transition: transform 0.5s var(--ease-out), opacity 0.3s, width 0.5s var(--ease-out); }
  .burger span:nth-child(2) { width: 16px; }
  .burger:hover span:nth-child(2) { width: 24px; }
  .topbar[data-open="true"] .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .topbar[data-open="true"] .burger span:nth-child(2) { opacity: 0; }
  .topbar[data-open="true"] .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .topbar__action { font-stretch: 84%; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; opacity: 0.86; transition: opacity 0.3s; }
  .topbar__action:hover { opacity: 1; }

  /* Menu: a panel of the lake's colour sliding in from the left, four words. */
  .menu { position: fixed; inset: 0; z-index: 55; visibility: hidden; pointer-events: none; }
  .menu::before { content: ""; position: absolute; inset: 0; background: rgb(27 28 27 / 0.42); opacity: 0; transition: opacity 0.6s var(--ease-out); }
  .menu__inner {
    position: absolute; inset: 0 auto 0 0; width: min(100%, 36rem);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--bar) + 2.5rem) var(--gutter) 2rem; background: var(--slate); color: #f1eee8;
    transform: translateX(-101%); transition: transform 0.75s var(--ease-out);
  }
  .menu.is-open { visibility: visible; pointer-events: auto; }
  .menu.is-open::before { opacity: 1; }
  .menu.is-open .menu__inner { transform: none; }
  .menu:not(.is-open) { transition: visibility 0s 0.75s; }
  .menu__list { display: grid; gap: 0.1rem; }
  .menu__list a {
    position: relative; display: flex; align-items: baseline; gap: 1.1rem; padding: 0.35rem 0 0.35rem 0;
    font-size: clamp(2.5rem, 7.5vw, 4.4rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1.04;
    transition: padding 0.5s var(--ease-out), color 0.3s;
  }
  .menu__list a::before { content: ""; position: absolute; left: 0; top: 0.22em; bottom: 0.22em; width: 0; background: var(--lamp-soft); transition: width 0.5s var(--ease-out); }
  .menu__list a:hover, .menu__list a:focus-visible { padding-left: 1.4rem; }
  .menu__list a:hover::before, .menu__list a:focus-visible::before { width: 5px; }
  .menu__num { font-stretch: 84%; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.15em; color: #a9aeb0; transform: translateY(-1.6em); }
  .menu__foot { display: grid; gap: 0.75rem; justify-items: start; font-size: 0.95rem; color: #c9cccb; }
  .menu__foot .btn { --btn-bg: transparent; --btn-fg: #f1eee8; --btn-line: rgb(241 238 232 / 0.36); margin-bottom: 0.5rem; }
  .menu__foot a:not(.btn):hover { color: #fff; }

  /* Footer ---------------------------------------------------------------- */
  .site-footer { border-top: 1px solid var(--line); padding: 1.6rem var(--gutter); font-size: 0.9rem; }
  .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
  .site-footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; color: var(--muted); }
  .site-footer nav a:hover { color: var(--fg); }

  /* Messages ---------------------------------------------------------------- */
  .toasts { position: fixed; z-index: 120; top: calc(var(--bar) + 0.4rem); left: 50%; transform: translateX(-50%); display: grid; gap: 0.5rem; width: min(100% - 2rem, 540px); }
  .toast { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.9rem 1.1rem; background: var(--ink); color: var(--plaster); font-size: 0.95rem; animation: toast-in 0.7s var(--ease-out) both; }
  .toast.is-leaving { animation: toast-out 0.4s var(--ease-in-out) both; }
  .toast__mark { width: 3px; align-self: stretch; background: var(--stone); flex: none; }
  .toast--success .toast__mark { background: #8fc9a8; }
  .toast--error .toast__mark, .toast--warning .toast__mark { background: var(--lamp-soft); }
  .toast button { margin-left: auto; opacity: 0.6; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

  /* Form controls ---------------------------------------------------------
     Words are written straight onto the wall: no boxes, one hairline under the line. */
  .field { display: grid; gap: 0.5rem; }
  .field + .field { margin-top: 1.9rem; }
  .field__help { font-size: 0.88rem; color: var(--muted); }
  .errorlist { list-style: none; padding: 0; color: var(--danger); font-size: 0.9rem; display: grid; gap: 0.2rem; }
  .input,
  .field input:is([type="text"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="password"]),
  .field textarea, .field select {
    width: 100%; padding: 0.7rem 0 0.75rem; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
    background: transparent; color: var(--fg); font-size: 1.12rem; letter-spacing: -0.01em;
    transition: border-color 0.25s, box-shadow 0.25s;
  }
  .field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.5; }
  .input:focus, .field :is(input, textarea, select):focus { outline: none; border-bottom-color: var(--fg); box-shadow: 0 1px 0 0 var(--fg); }
  ::placeholder { color: var(--stone); opacity: 1; }

  /* Words that arrive: each line rises out of a mask. Add .reveal to a block of lines. */
  .reveal > * { display: block; overflow: hidden; }
  .reveal > * > * { display: block; transform: translateY(105%); animation: line-in 1.1s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + var(--delay, 0ms)); }
  @keyframes line-in { to { transform: none; } }
}

@layer utilities {
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stack > * + * { margin-top: var(--stack, 1rem); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, 0.75rem); }
  .text-center { text-align: center; }
  .mt-s { margin-top: 0.6rem; }
  .mt-m { margin-top: 1rem; }
  .mt-l { margin-top: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}