/* ============================================================
   VEYRA HOUSE — base tokens

   The WORK is in colour. The INTERFACE is not.
   Type, chrome, rules and surfaces stay on a neutral grayscale ramp so
   that the only hue on the page belongs to the photography — plus one
   accent, used sparingly, as a signal.
   ============================================================ */

:root{
  /* --- grayscale ramp --- */
  --black:        #000000;
  --near-black:   #08080a;
  --charcoal:     #131316;
  --graphite:     #26262b;
  --cool-gray:    #55555e;
  --warm-gray:    #86868e;
  --silver:       #b8b8bf;
  --off-white:    #eeeeec;
  --white:        #ffffff;

  /* --- accent ---
     Burnt amber. Chosen because it is the colour of tungsten, of a
     darkroom safelight, of a practical bulb on a set — it belongs to the
     subject matter rather than being decoration applied to it.

     It appears ONLY on: production slates, frame codes, section eyebrows,
     and the live playhead. Never on large surfaces. An accent that covers
     more than about 2% of the page stops being an accent.

     Replace this ONE value to recolour the entire site. */
  --ACCENT_PLACEHOLDER: #c8621f;
  --accent: var(--ACCENT_PLACEHOLDER);

  /* the accent has to survive on BOTH grounds. On the off-white sections
     the raw amber vibrates; this darker cut holds its weight. */
  --accent-on-light: #9c4a13;

  /* --- semantic --- */
  --bg-dark:      var(--black);
  --bg-charcoal:  var(--charcoal);
  --bg-light:     var(--off-white);
  --bg-lightgray: #e2e2df;

  --line-dark:    rgba(255,255,255,.14);
  --line-light:   rgba(0,0,0,.14);

  /* --- type --- */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ── FLUID TYPE SCALE ────────────────────────────────────────────
     Every size is clamped at BOTH ends. The ceiling is not a taste
     decision — it is derived from the container.

     The site's content column caps at --maxw (1560px) minus gutters,
     so ~1464px of usable width. The longest display line on the site
     ("Production worlds.", 18 characters at Archivo's ~0.55em average
     advance) needs roughly 18 x 0.55 = 9.9em. To fit 1464px it must
     therefore stay at or below 1464/9.9 = ~148px = 9.25rem.

     The old ceiling was 9.4rem (150px) — just over the line, which is
     exactly why the headline was being truncated. Type must never be
     allowed to outgrow the box it lives in. That is a layout invariant,
     not something to fix with clip-path afterwards. */
  --t-mega:  clamp(2.6rem, 8.6vw, 8.5rem);
  --t-xl:    clamp(2.1rem, 5.2vw, 4.6rem);
  --t-lg:    clamp(1.6rem, 3.2vw, 2.7rem);
  --t-md:    clamp(1.15rem, 1.8vw, 1.45rem);
  --t-body:  clamp(0.95rem, 1.05vw, 1.05rem);
  --t-label: 0.688rem;
  --t-micro: 0.625rem;

  /* ── LAYOUT ──────────────────────────────────────────────────── */
  --gutter:  clamp(1.25rem, 4vw, 4.5rem);
  --maxw:    1560px;
  --rule:    1px;

  /* ── BREAKPOINTS ─────────────────────────────────────────────────
     THREE. Named. That is the whole set.

     This file previously carried NINE ad-hoc breakpoints (1100, 1024,
     900, 860, 760, 700, 640, 560, 520), each added reactively when
     something broke. That is not a system, it is a scar record — and it
     is why the same class of bug kept reappearing in new places.

     CSS cannot use var() inside a media query, so these values are
     duplicated in the @media rules below. They are documented here as
     the single source of truth; if one changes, change it everywhere.

       --bp-desk    1024px   below: tablet layout
       --bp-tab      760px   below: mobile layout
       --bp-mob      480px   below: small-phone adjustments
     ──────────────────────────────────────────────────────────────── */
  --bp-desk: 1024px;
  --bp-tab:   760px;
  --bp-mob:   480px;

  /* --- motion --- */
  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-cut:  cubic-bezier(.7,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Guard horizontal overflow here, NOT on body.
     overflow-x on body turns body into a scroll container, which breaks
     IntersectionObserver's viewport root (reveals never fire). */
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--black);
  color:var(--off-white);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.62;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* keyboard focus — visible, monochrome, never removed */
:focus-visible{
  outline:2px solid var(--white);
  outline-offset:3px;
}

/* ============================================================
   Shared primitives
   ============================================================ */

.shell{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  width:100%;
}

.section{ position:relative; padding-block:clamp(4.5rem, 9vw, 9.5rem); }
.section--tight{ padding-block:clamp(3.5rem, 6vw, 6rem); }

.bg-black{ background:var(--black); color:var(--off-white); }
.bg-nearblack{ background:var(--near-black); color:var(--off-white); }
.bg-charcoal{ background:var(--charcoal); color:var(--off-white); }
.bg-light{ background:var(--bg-light); color:var(--black); }
.bg-lightgray{ background:var(--bg-lightgray); color:var(--black); }

/* --- the label system: monospace production slates.
   This is the site's structural signature. --- */
.slate{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1;
}
.slate--dim{ color:var(--warm-gray); }
.slate--accent{ color:var(--accent); }
.bg-light .slate--accent,
.bg-lightgray .slate--accent{ color:var(--accent-on-light); }

.slate-rule{
  display:flex; align-items:center; gap:.85rem;
  margin-bottom:clamp(1.5rem,2.6vw,2.4rem);
}
.slate-rule::after{
  content:""; flex:1; height:var(--rule);
  background:currentColor; opacity:.22;
}

/* --- display headings --- */
.h-mega,.h-xl,.h-lg{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.032em;
  line-height:.98;
  margin:0;
  text-wrap:balance;
}
/* ── TYPE SAFETY INVARIANTS ───────────────────────────────────────
   These exist so the "Productio…" class of bug cannot recur.

   1. Display type never overflows its box. If a line is too long for the
      container, it WRAPS. It never gets sliced. Truncating a headline is
      always a bug; wrapping one is normal typography.
   2. Long words break rather than push the layout wide.
   3. Reveal masks clip on the Y axis only (see .hero__ln), because a
      slide-up reveal is a vertical effect. `overflow:hidden` clips both
      axes and is therefore the wrong tool for it.
   ──────────────────────────────────────────────────────────────── */
h1,h2,h3,h4,.h-mega,.h-xl,.h-lg{
  overflow-wrap:break-word;   /* never push the page wide */
  text-wrap:balance;          /* nicer ragging where supported */
  max-width:100%;
}

.h-mega{ font-size:var(--t-mega); letter-spacing:-.042em; }
.h-xl  { font-size:var(--t-xl); }
.h-lg  { font-size:var(--t-lg); line-height:1.06; letter-spacing:-.024em; }

.lede{
  font-size:var(--t-md);
  color:var(--warm-gray);
  max-width:46ch;
  line-height:1.5;
  margin:1.1rem 0 0;
  font-weight:380;
}
.bg-light .lede,.bg-lightgray .lede{ color:var(--cool-gray); }

/* --- buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:.65rem;
  min-height:48px; padding:.85rem 1.6rem;
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  border:1px solid currentColor;
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn__arrow{ transition:transform .45s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }

.btn--fill{ background:var(--white); color:var(--black); border-color:var(--white); }
.btn--fill:hover{ background:var(--silver); border-color:var(--silver); }
.btn--ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.5); }
.btn--ghost:hover{ background:var(--white); color:var(--black); border-color:var(--white); }
.btn--dark{ background:var(--black); color:var(--white); border-color:var(--black); }
.btn--dark:hover{ background:var(--graphite); border-color:var(--graphite); }
.btn--outline-dark{ background:transparent; color:var(--black); border-color:rgba(0,0,0,.42); }
.btn--outline-dark:hover{ background:var(--black); color:var(--white); }

/* --- grain overlay: one shared texture --- */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  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='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:.32; z-index:3;
}
.bg-light.grain::after,.bg-lightgray.grain::after{ opacity:.16; mix-blend-mode:multiply; }

/* ============================================================
   THE CROP ENGINE
   The site has only 15 photographs. Every placement is a *view* of one:
   a window with its own zoom, pan, tone and treatment. This is what makes
   reuse read as art direction rather than repetition — the same discipline
   a real photo editor uses when one shoot fills a whole magazine spread.

   Usage:  <figure class="v" style="--z:1.6;--x:20%;--y:70%">
             <img src="assets/frames/m03-product.webp" alt="…">
           </figure>

   --z  zoom   (1 = full frame, >1 = crop in)
   --x  pan X  (object-position, 0–100%)
   --y  pan Y
   --b  brightness   --c  contrast   --blur
   ============================================================ */
.v{
  position:relative;
  overflow:hidden;
  margin:0;
  background:var(--charcoal);
  isolation:isolate;
}
.v > img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--x,50%) var(--y,50%);
  transform:scale(var(--z,1));
  transform-origin:var(--x,50%) var(--y,50%);
  /* The work is in COLOUR. The interface around it is not.
     A studio site should let the photography be the only thing with hue.
     Restraint here is what stops it looking like a stock template: a light
     desaturation and a contrast lift keeps everything in one graded family
     rather than fifteen unrelated colour casts. */
  filter:saturate(var(--sat,.86))
         contrast(var(--c,1.06))
         brightness(var(--b,1))
         blur(var(--blur,0px));
  will-change:transform;
  transition:transform 1.4s var(--ease), filter .7s var(--ease);
}
/* hover pushes further into the frame — a photographer leaning in */
.v--live:hover > img{ transform:scale(calc(var(--z,1) * 1.06)); }
/* and lets the colour come up, so hover feels like the print developing */
.v--live:hover > img{ filter:saturate(1) contrast(1.08) brightness(var(--b,1)); }

/* ── Tonal treatments ──────────────────────────────────────────────
   These are GRADES, not brightness tweaks. On a colour photograph,
   dimming alone reads as "underexposed"; pulling saturation with it
   reads as "graded". That difference is the whole game. */

/* deep: crushed, near-mono. For dark grounds and small fragments. */
.v--deep  > img{ filter:saturate(.35) contrast(1.3) brightness(.66); }

/* pale: washed, high-key. For light grounds — service strips, process. */
.v--pale  > img{ filter:saturate(.55) contrast(.92) brightness(1.16); }

/* soft: focus-pulled. Background layers. */
.v--soft  > img{ filter:saturate(.7) contrast(.98) brightness(.94) blur(1.5px); }

/* ghost: barely there. Deep-background texture only. */
.v--ghost > img{ filter:saturate(.2) contrast(1.1) brightness(.5) blur(9px); }

/* mono: a true black-and-white print. Kept deliberately, for the frames
   that should read as archival — the contact sheet, the footer strip.
   The contrast between a mono archive and colour work IS the idea. */
.v--mono  > img{ filter:grayscale(1) contrast(1.18) brightness(.92); }

/* a printed frame edge, for gallery-wall placements */
.v--edge{ border:1px solid var(--line-dark); }
.bg-light .v--edge,.bg-lightgray .v--edge{ border-color:var(--line-light); }

/* Ken Burns — a still that will not sit still */
@keyframes kb{
  from{ transform:scale(var(--z,1)) translate(0,0); }
  to  { transform:scale(calc(var(--z,1) * 1.12)) translate(var(--kbx,-1.5%), var(--kby,1.5%)); }
}
.v--drift > img{ animation:kb 22s var(--ease) infinite alternate; }

@media (prefers-reduced-motion:reduce){
  .v--drift > img{ animation:none; }
  .v > img{ transition:none; }
}

/* the slate that names a crop — every view is a frame with a code */
.v__code{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:.45rem .7rem;
  background:rgba(0,0,0,.72);
  color:var(--accent);
  backdrop-filter:blur(3px);
  max-width:calc(100% - .8rem);
  transition:opacity .4s var(--ease);
}
.v__alt{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:.45rem .7rem;
  background:rgba(0,0,0,.84);
  color:var(--white);
  font-family:var(--body); font-size:.72rem;
  letter-spacing:0; text-transform:none;
  opacity:0; transition:opacity .4s var(--ease);
  max-width:calc(100% - .8rem);
}
.v--live:hover .v__code{ opacity:0; }
.v--live:hover .v__alt{ opacity:1; }

/* ============================================================
   Reveal system — entry-only motion, CSS-first
   ============================================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* clip reveal — black curtain lifting off a frame */
[data-clip]{
  clip-path:inset(0 0 100% 0);
  /* an unrevealed frame is invisible, so it must not swallow clicks */
  pointer-events:none;
  transition:clip-path 1.15s var(--ease-cut);
  transition-delay:var(--d,0ms);
}
[data-clip].is-in{ clip-path:inset(0 0 0 0); pointer-events:auto; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],[data-clip]{ opacity:1; transform:none; clip-path:none; }
}

/* ============================================================
   Navbar
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:1.05rem var(--gutter);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
.nav.is-stuck{
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(14px) saturate(0);
  border-bottom-color:var(--line-dark);
}
.nav--onlight:not(.is-stuck){ color:var(--black); }
.nav--onlight.is-stuck{ color:var(--off-white); }

.nav__brand{
  font-family:var(--display);
  min-height:44px;
  font-weight:600; font-size:1.02rem;
  letter-spacing:-.012em;
  display:flex; align-items:center; gap:.6rem;
  white-space:nowrap;
  min-width:0;
}
.nav__brand span{
  overflow:hidden; text-overflow:ellipsis;
}
.nav__mark{
  width:9px; height:9px; flex:none;
  background:currentColor;
  transform:rotate(45deg);
}
.nav__links{
  display:flex; align-items:center; gap:2.1rem;
  list-style:none; margin:0; padding:0;
}
.nav__link{
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  position:relative; padding-block:.3rem;
  opacity:.72; transition:opacity .35s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{ opacity:1; }
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }

.nav__cta{ min-height:40px; padding:.6rem 1.15rem; }
.nav--onlight:not(.is-stuck) .nav__cta{ border-color:rgba(0,0,0,.42); }
.nav--onlight:not(.is-stuck) .nav__cta:hover{ background:var(--black); color:var(--off-white); }

.nav__burger{
  display:none; width:44px; height:44px;
  align-items:center; justify-content:center; flex:none;
}
.nav__burger i{
  display:block; width:20px; height:1px; background:currentColor;
  position:relative; transition:background .3s var(--ease);
}
.nav__burger i::before,.nav__burger i::after{
  content:""; position:absolute; left:0; width:20px; height:1px;
  background:currentColor; transition:transform .45s var(--ease);
}
.nav__burger i::before{ top:-6px; }
.nav__burger i::after{ top:6px; }
.nav.is-open .nav__burger i{ background:transparent; }
.nav.is-open .nav__burger i::before{ transform:translateY(6px) rotate(45deg); }
.nav.is-open .nav__burger i::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1024px){
  .nav__burger{ display:flex; }
  .nav__cta{ display:none; }
  .nav__links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:.25rem;
    padding:6rem var(--gutter) 3rem;
    background:var(--black); color:var(--off-white);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .7s var(--ease-cut);
  }
  .nav.is-open{ background:var(--black); color:var(--off-white); border-bottom-color:transparent; }
  .nav.is-open .nav__links{ clip-path:inset(0 0 0 0); }
  .nav__links li{ width:100%; border-bottom:1px solid var(--line-dark); }
  .nav__link{
    display:flex; align-items:center;
    min-height:60px; font-size:1.1rem; letter-spacing:.06em; opacity:1;
  }
  .nav__link::after{ display:none; }
  .nav__links .nav__mcta{ border-bottom:0; margin-top:2rem; }
  .nav__links .nav__mcta .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   Footer — Start a Brief (site-wide)
   ============================================================ */
.footer{ background:var(--black); color:var(--off-white); position:relative; }

/* rolling strip of tiny frames */
.fstrip{
  overflow:hidden; border-block:1px solid var(--line-dark);
  padding-block:.85rem; position:relative;
}
.fstrip__track{
  display:flex; gap:.5rem; width:max-content;
  animation:roll 52s linear infinite;
}
.fstrip:hover .fstrip__track,
.fstrip:focus-within .fstrip__track{ animation-play-state:paused; }
.fstrip__cell{
  width:118px; aspect-ratio:3/2; flex:none;
  opacity:.45;
  transition:opacity .4s var(--ease);
  overflow:hidden;
}
.fstrip__cell:hover{ opacity:1; }
.fstrip__cell .v{ width:100%; height:100%; }
@keyframes roll{ to{ transform:translateX(-50%); } }

.footer__grid{
  display:grid;
  grid-template-columns:1.35fr 1.15fr .9fr;
  gap:clamp(2.5rem,4vw,5rem);
  padding-block:clamp(4rem,6vw,6.5rem);
  align-items:start;
}
.footer__cta .h-xl{ max-width:14ch; }
.footer__cta .lede{ max-width:34ch; }

.fintake{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.4rem; }
.fchip{
  display:inline-flex; align-items:center;
  min-height:44px; padding:.6rem 1rem;
  background:var(--charcoal);
  border:1px solid var(--cool-gray);
  color:var(--silver);
  font-family:var(--mono); font-size:var(--t-label);
  letter-spacing:.1em; text-transform:uppercase;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.fchip:hover,.fchip.is-picked{
  background:var(--off-white); color:var(--black); border-color:var(--off-white);
}

.fcontact{ display:flex; flex-direction:column; gap:.55rem; margin-top:.4rem; }
.fcontact a{
  display:flex; align-items:baseline; gap:.75rem;
  min-height:44px; color:var(--silver);
  transition:color .3s var(--ease);
}
.fcontact a:hover{ color:var(--white); }
.fcontact b{
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cool-gray); font-weight:500;
  width:72px; flex:none;
}

.fsocial{ display:flex; flex-direction:column; gap:.1rem; margin-top:1.9rem; }
.fsocial a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  min-height:44px; padding-block:.55rem;
  border-top:1px solid var(--line-dark);
  color:var(--silver); transition:color .3s var(--ease);
}
.fsocial a:hover{ color:var(--white); }
.fsocial span{
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--graphite);
  opacity:0; transform:translateX(-6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), color .3s var(--ease);
  text-align:right;
}
.fsocial a:hover span{ opacity:1; transform:none; color:var(--cool-gray); }

.footer__base{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem;
  padding-block:1.6rem;
  border-top:1px solid var(--line-dark);
}
.footer__pages{ display:flex; flex-wrap:wrap; gap:1.6rem; list-style:none; margin:0; padding:0; }
.footer__pages a{
  color:var(--warm-gray); transition:color .3s var(--ease);
  display:inline-flex; align-items:center; min-height:44px;
}
.footer__pages a:hover{ color:var(--white); }

@media (max-width:1024px){
  .footer__grid{ grid-template-columns:1fr; gap:3rem; }
}

/* ============================================================
   Brief panel (dialog)
   ============================================================ */
.brief{
  border:0; padding:0; max-width:none; max-height:none;
  width:100%; height:100%;
  background:transparent; color:var(--off-white);
  overflow:hidden;
}
.brief::backdrop{ background:rgba(0,0,0,.9); backdrop-filter:blur(9px) saturate(0); }
.brief__panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(520px,100%);
  background:var(--near-black);
  border-left:1px solid var(--line-dark);
  padding:clamp(1.75rem,4vw,3rem);
  overflow-y:auto;
  transform:translateX(100%);
  animation:slideIn .65s var(--ease) forwards;
}
@keyframes slideIn{ to{ transform:none; } }
.brief__close{
  position:absolute; top:1.1rem; right:1.1rem;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--cool-gray);
  color:var(--silver);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.brief__close:hover{ background:var(--white); color:var(--black); }
.brief__field{ display:block; margin-top:1.35rem; }
.brief__field span{
  display:block; margin-bottom:.5rem;
  font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.16em; text-transform:uppercase; color:var(--warm-gray);
}
.brief__field input,.brief__field select,.brief__field textarea{
  width:100%; min-height:48px; padding:.8rem .95rem;
  background:var(--charcoal);
  border:1px solid var(--cool-gray);
  color:var(--off-white);
  font-family:var(--body); font-size:.95rem;
  transition:border-color .3s var(--ease);
}
.brief__field textarea{ min-height:96px; resize:vertical; }
.brief__field :is(input,select,textarea):focus{
  outline:none; border-color:var(--white);
}
.brief__submit{ width:100%; justify-content:center; margin-top:1.8rem; }
.brief__note{
  margin-top:1.1rem; font-size:.78rem; color:var(--cool-gray); line-height:1.55;
}