/* ============================================================================
   Emilee Tattoos — brand system
   Rebuilt 2026-08-24 directly from her own brand guide
   (Dropbox: 00_emileetattoos/Brand/brand guide/brandguide-emtatts.pdf).

   Her guide, verbatim:
     "the main colors to be used in emilee tattoo's brand is light pink, barbie
      pink, mauve and neutrals. the other colors are to be used as a pop of
      color, such as website buttons etc."

   That sentence is the whole system. Pinks and mauve carry the page as FLAT
   FIELDS; the two neutrals are the rest; wine, sky and electric green are pops
   and appear on buttons and small accents only.

   What this deliberately corrects: the 2026-08-20 makeover made wine the only
   dark and pushed the pinks nearly out of the palette. That reads well for
   Inkwell-the-platform, which is brand-neutral on purpose, but it is the
   reverse of her guide and is not her personal brand.

   What it keeps from that work: flat colour instead of gradient washes, light
   display weights, real whitespace, and no clip-art decoration. The look she
   disliked on the old site was the execution, not the pink.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. tokens */
:root {
  /* --- her palette, exact values from the guide ------------------------- */
  --drama:   #5e1429;   /* wine — a POP. Buttons and small accents only */
  --mauve:   #c7a2a2;   /* main */
  --pink:    #f2ddea;   /* light pink — main */
  --barbie:  #eebbd3;   /* barbie pink — main */
  --green:   #dedb57;   /* electric green — one appearance per page */
  --sky:     #bfd6db;   /* sky blue — a pop */
  --neutral: #f7f1e9;   /* cream */
  --sand:    #f1e8d8;   /* sand */
  --peach:   #f7dacb;   /* from her own button artwork */

  /* --- ink, taken from her own SVG artwork (#231f20) -------------------- */
  --ink:    #241f20;
  --ink-2:  #4b4142;
  --muted:  #6d5f60;   /* darkened from #7d6f70: that failed 4.5:1 on the cream field */
  --on-dark: #fdf6f0;

  /* --- surfaces --------------------------------------------------------- */
  --page:   var(--neutral);
  --card:   #fffdfa;
  --line:   #e8dcd6;
  --line-2: #d8c6c3;

  /* --- type ------------------------------------------------------------- */
  /* Her guide names Avenir Next Medium. It isn't licensable as a webfont, so
     Mac visitors get the real face and everyone else gets Mulish, which is a
     close geometric-humanist match — rather than the makeover's silent swap to
     Montserrat, which is a visibly different width and colour on the page. */
  --sans:    "Avenir Next", Avenir, "Mulish", system-ui, -apple-system, sans-serif;
  --script:  "ElisabethDarlingtonUpright", "Snell Roundhand", cursive;
  /* Tested four blackletters against her lookbook cover in the browser: Pirata One and
     Grenze Gotisch both silently fell back to a sans (Grenze even reported as "loaded"),
     so UnifrakturMaguntia is the only one that actually renders gothic — and it is the
     closest to the cover besides. Reserved strictly for the WORDMARK; blackletter set
     across section headings becomes unreadable fast. */
  --gothic:  "UnifrakturMaguntia", "Grenze Gotisch", serif;

  --wrap: 1180px;
  --r:    14px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* No drop shadows anywhere. Depth comes from flat colour fields meeting. */
}

/* Her paid script, self-hosted in both repos. Never a Google Fonts link. */
@font-face {
  font-family: "ElisabethDarlingtonUpright";
  src: url("assets/fonts/elisabethdarlingtonupright.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

/* ------------------------------------------------------------- 2. baseline */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* height:auto is load-bearing. The width/height ATTRIBUTES on an <img> (which are there to
   reserve layout space and avoid content shift) act as a used height, and CSS aspect-ratio is
   ignored unless height is auto — the hero rendered 1653px tall without this. Any element that
   genuinely wants a fixed height sets it inline, which still wins. */
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--drama); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.5rem); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------- 3. type */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 400; }

/* The wordmark, from her lookbook cover: lowercase blackletter, tight. */
.gothic {
  font-family: var(--gothic);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .01em;
  text-transform: lowercase;
}
/* Section headings are NOT blackletter — they're the body sans at a light weight and a
   large size, which is what keeps the page readable while the wordmark stays the only
   gothic moment. Her guide calls the script the "decorative heading font", so the script
   does the decorating, one line at a time, above or below these. */
.h-sec {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.08;
}
.h-xl { font-size: clamp(2.6rem, 8vw, 5.6rem); }
.h-lg { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.h-md { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }

/* Script is an accent and is never used where it must be read to be understood. */
.script { font-family: var(--script); font-weight: 400; line-height: 1.1; }
.script-lg { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }

.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.lead { font-size: clamp(1.02rem, 1.4vw, 1.16rem); color: var(--ink-2); max-width: 56ch; }
.muted { color: var(--muted); }

/* -------------------------------------------------------------- 4. buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  padding: .85rem 1.7rem; font-size: .95rem; font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Wine is a POP, per the guide — so it lives here, on the primary button. */
.btn-primary { background: var(--drama); color: var(--on-dark); }
.btn-primary:hover { background: #4a0f20; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--drama); color: var(--drama); }
.btn-cream { background: var(--card); color: var(--ink); }
.btn-cream:hover { background: #fff; }
.btn-lg { padding: 1rem 2rem; font-size: 1.02rem; }

/* ---------------------------------------------------------- 5. flat fields */
/* The core device: full-bleed bands of her main colours, meeting flatly. */
.field { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.field-cream  { background: var(--neutral); }
.field-sand   { background: var(--sand); }
.field-pink   { background: var(--pink); }
.field-barbie { background: var(--barbie); }
.field-mauve  { background: var(--mauve); }
.field-sky    { background: var(--sky); }
/* Wine is the only dark band, used at most once per page. */
.field-drama  { background: var(--drama); color: var(--on-dark); }
.field-drama .eyebrow,
.field-drama .muted { color: color-mix(in srgb, var(--on-dark) 72%, transparent); }
.field-drama .lead  { color: color-mix(in srgb, var(--on-dark) 86%, transparent); }

.sec-head { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.sec-head .lead { margin-top: .7rem; }

/* -------------------------------------------------------------- 6. her mark */
/* Note: these SVGs are loaded via <img>, which isolates them — external CSS cannot reach
   inside, so no `fill: currentColor` trick works here. They render in their own artwork
   colours (#231f20 line art), which reads correctly on every field in this palette.
   Inline the SVG only if a recolour is ever actually needed. */
.monogram { width: 38px; height: 49px; flex: none; }

/* --------------------------------------------------- 7. her round buttons */
/* BUTTONS-09/10/11.svg — her own designed nav circles (CUSTOM TATTOOS /
   FLASH COLLECTION / SEE WORK). They were on the live site floating over her
   portrait, which is what made them read as stickers; given their own row on a
   flat field they read as the brand furniture they actually are. */
.circles {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.2rem, 4vw, 3rem);
}
.circle { display: block; width: clamp(132px, 19vw, 186px); transition: transform .18s ease; }
.circle img { width: 100%; height: auto; }
.circle:hover { transform: translateY(-4px); }

/* ------------------------------------------------------------ 8. flashbook */
.grid-flash {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
}

/* The homepage teaser: three picks, not the whole book. Fixed at 3 columns rather than
   auto-fill, because a teaser that reflows to 2 leaves an orphan on the second row. */
.grid-flash-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .grid-flash-3 { gap: .6rem; } }
.grid-flash a { display: block; color: inherit; text-decoration: none; }
.flash { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.flash img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sand); }
.flash-b { padding: .85rem 1rem 1rem; }
.flash-t { font-weight: 600; font-size: .95rem; }
.flash-m { font-size: .8rem; color: var(--muted); margin-top: .15rem; }

/* --------------------------------------------------------- 9. illustration */
/* Her own line art, used as ornament. Dark strokes on any of her light fields. */
.ill { width: 100%; height: auto; }
.ill-sm { max-width: 120px; }
.ill-md { max-width: 230px; }

/* ------------------------------------------------------------- 10. nav/foot */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--neutral) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 74px; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); }
.brand .name { font-family: var(--gothic); font-size: 1.4rem; line-height: 1; text-transform: lowercase; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a { font-size: .92rem; font-weight: 500; color: var(--ink-2); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--drama); }
/* `.nav-links a` scores (0,1,1) and `.btn-primary` only (0,1,0), so without this the nav's
   booking button renders dark ink on the wine fill and is barely legible. This is the exact
   bug found on the live site on 2026-08-20 — and I reproduced it here, so it's pinned. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: var(--on-dark); }
.nav-burger { display: none; background: none; border: 0; padding: .4rem; font-size: 1.4rem; line-height: 1; }

/* Mauve is a mid-tone, so the secondary inks that pass on cream do NOT pass on it.
   Re-scoping the two variables here fixes every descendant at once rather than
   patching each rule. */
footer {
  --ink-2: #3a3132;
  --muted: #3a3132;
  background: var(--mauve); color: var(--ink);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
}
footer a:hover { color: var(--drama); }
.foot-grid { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; }
.foot-col h4 { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .8rem; color: var(--ink-2); }
.foot-col a { display: block; font-size: .92rem; padding: .18rem 0; }
.foot-bot {
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
  font-size: .82rem; color: var(--ink-2);
}

/* ------------------------------------------------------------ 11. responsive */
@media (max-width: 820px) {
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 74px;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--neutral); border-bottom: 1px solid var(--line);
    padding: .5rem clamp(1.15rem, 4vw, 2.5rem) 1.2rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .7rem 0; width: 100%; font-size: 1rem; }
  .nav-burger { display: block; }
}

/* ============================================================================
   EDITORIAL LAYER — added 2026-08-24 after she sent two reference sites
   (BrandVibe; RE/TOUCH). What those two actually do, and what's borrowed:

     · one saturated pink carries the page, against neutral or photography
     · violent scale contrast: enormous display beside tiny tracked labels,
       almost nothing in between
     · two type voices inside one sentence (bold sans colliding with italic)
     · type and image collide — headlines over faces, images bleeding off edge
     · editorial asymmetry; nothing centred
     · a list with rules and arrows
     · a highlighter swipe on the phrase that matters

   Kept on-brand: her BARBIE pink (#eebbd3) becomes the dominant field rather
   than the lighter #f2ddea — same documented palette, the saturation the
   references get their confidence from. The "italic voice" is HER script, not
   an imported serif, so the page still runs on the two faces her guide names.
   ============================================================================ */

/* ---- violent scale contrast ---------------------------------------------- */
.display-xl {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.6rem, 7.4vw, 6.2rem);
  line-height: .94;
  letter-spacing: -.035em;
}
.display-lg {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  line-height: .98;
  letter-spacing: -.03em;
}
/* The second voice inside a headline. Her script, set optically larger because
   it runs much smaller than the sans at the same font-size. */
/* The script runs far smaller and far deeper than the sans at the same font-size, so it
   needs its own optical size AND its own box — inline it drags the whole line-box down and
   collides with the line beneath. inline-block + line-height:1 contains the descenders. */
.voice {
  font-family: var(--script);
  font-weight: 400;
  font-size: 1.3em;
  letter-spacing: 0;
  line-height: 1;
  display: inline-block;
  vertical-align: baseline;
  transform: translateY(.06em);
}
/* Any headline mixing the two voices needs air, or the script's loops touch the next line. */
.display-xl:has(.voice), .display-lg:has(.voice) { line-height: 1.18; }
/* Tiny, wide, uppercase. The other end of the scale jump. */
.micro {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ---- the highlighter swipe ----------------------------------------------- */
/* Sits behind the text baseline rather than boxing it, which is what keeps it
   reading as a marker stroke instead of a background colour. */
.swipe {
  background-image: linear-gradient(var(--barbie), var(--barbie));
  background-repeat: no-repeat;
  background-size: 100% .58em;
  background-position: 0 .62em;
  padding: 0 .1em;
}
.field-barbie .swipe { background-image: linear-gradient(var(--neutral), var(--neutral)); }

/* ---- the list with rules and arrows -------------------------------------- */
.rows { border-top: 1px solid var(--ink); }
.rows a {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: clamp(1.1rem, 2.6vw, 1.9rem) 0;
  border-bottom: 1px solid var(--ink);
  transition: padding-left .22s ease, background .22s ease;
}
.rows a:hover { padding-left: 1.1rem; background: color-mix(in srgb, var(--barbie) 42%, transparent); }
.rows .n { font-size: .68rem; font-weight: 700; letter-spacing: .16em; color: var(--muted); width: 2.4rem; flex: none; }
.rows .arrow { margin-left: auto; font-size: 1.4rem; line-height: 1; transition: transform .22s ease; }
.rows a:hover .arrow { transform: translateX(.45rem); }

/* ---- type over image ------------------------------------------------------ */
.stage { position: relative; }
/* Grayscale is now OPT-IN. It was a blanket default while the only photo available was one
   portrait; with the real brand shoot in hand, the colour frames (pink satin on a pink field)
   are the whole point, so desaturating them by default threw away the best thing on the page. */
.stage-img { width: 100%; display: block; object-fit: cover; }
.bw { filter: grayscale(1) contrast(1.04); }

/* A quiet four-up strip. Portrait crops, so it reads as a contact sheet rather than a slider. */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.5rem, 1.4vw, 1rem); }
.strip img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--r); }
@media (max-width: 700px) { .strip { grid-template-columns: repeat(2, 1fr); } }
/* The headline straddles the image edge — the RE/TOUCH move. That reference sets its type
   SOLID over the photo rather than blended: hard-light against a light-toned frame washed the
   pink out until the top line was barely readable. So solid pink, and the one frame that has
   type across it is darkened enough to hold it. */
.over {
  position: relative; z-index: 2;
  margin-top: -.42em;
  color: var(--barbie);
  pointer-events: none;
}
/* Scoped to the direct child so only the collision frame darkens, not every photo. */
.stage > .stage-img { filter: grayscale(1) brightness(.66) contrast(1.06); }

/* ---- editorial blocks ----------------------------------------------------- */
/* Both variants must carry the grid itself. `.split-rev` used to override only the columns,
   which meant an element with just that class stayed a block and its image filled the whole
   wrap instead of one column. */
.split, .split-rev {
  display: grid;
  gap: clamp(1.6rem, 5vw, 4.5rem);
  align-items: start;
}
.split     { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.split-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.rule-band { height: clamp(34px, 5vw, 58px); background: var(--barbie); }

/* Her line art as the repeating motif, the way the references use a sticker. */
.motif { width: clamp(46px, 6vw, 78px); height: auto; opacity: .9; }

@media (max-width: 820px) {
  .split, .split-rev { grid-template-columns: 1fr; }
  .rows .n { width: 100%; }
}

/* ============================================================================
   FAQ — added 2026-08-25.
   Built on <details>/<summary> so every answer is open-able without JavaScript,
   is keyboard-navigable for free, and is findable by the browser's own Ctrl+F.
   The filter and the deep-link opener are enhancements on top, never required.
   ============================================================================ */

.faq-group { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.faq-group > h2 {
  font-family: var(--sans); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1;
  padding-bottom: .9rem; margin-bottom: 0;
  border-bottom: 1px solid var(--ink);
}

.qa { border-bottom: 1px solid var(--line-2); }
.qa > summary {
  display: flex; align-items: baseline; gap: 1rem;
  padding: clamp(1rem, 2.2vw, 1.35rem) 0;
  cursor: pointer; list-style: none;
  font-size: clamp(1rem, 1.5vw, 1.14rem); font-weight: 600; line-height: 1.35;
  transition: padding-left .2s ease, color .2s ease;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { padding-left: .5rem; color: var(--drama); }
/* The +/− is generated, so the question text stays clean for copy-paste into a DM. */
.qa > summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--drama);
  transition: transform .22s ease;
}
.qa[open] > summary::after { content: "\2212"; transform: rotate(180deg); }
.qa[open] > summary { color: var(--drama); }

.qa-body { padding: 0 0 1.5rem; max-width: 64ch; }
.qa-body p { margin: 0 0 1rem; color: var(--ink-2); line-height: 1.7; }
.qa-body p:last-child { margin-bottom: 0; }
.qa-a { font-size: 1.02rem; }

/* Answers must land somewhere — this is the "no dead ends" rule made visible. */
.qa-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .95rem; color: var(--drama);
  border-bottom: 1px solid color-mix(in srgb, var(--drama) 35%, transparent);
  padding-bottom: .1rem;
}
.qa-link:hover { border-bottom-color: var(--drama); }

/* A visible flag on answers that are my draft of a policy only she can set. */
.qa-draft {
  display: inline-block; margin-bottom: .8rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--drama); background: var(--barbie);
  padding: .25rem .6rem; border-radius: 999px;
}

/* ---- filter ---- */
.faq-filter { position: relative; max-width: 30rem; }
.faq-filter input {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .95rem 1.1rem .95rem 2.6rem;
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink);
}
.faq-filter input::placeholder { color: var(--muted); }
.faq-filter svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; opacity: .5; }
.faq-empty { padding: 2rem 0; color: var(--muted); }
[hidden] { display: none !important; }

/* ---- care page ----------------------------------------------------------- */
/* Her aftercare guide was a single 1600x2760 JPEG on Showit — invisible to Google,
   unreadable by a screen reader, and impossible to link to a single answer. Rebuilt
   as real text; these are the only styles it needed. */
.care-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.2rem); }
.care-ul { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .85rem; }
.care-ul li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .7rem; font-size: .96rem; line-height: 1.55; color: var(--ink-2); }
.care-ul li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mauve); margin-top: .62em; }
.care-ul.no li::before { background: var(--drama); }
.care-ul b { color: var(--ink); font-weight: 700; }
.care-step { border-top: 1px solid var(--line); padding-top: 1.4rem; margin-top: 1.4rem; }
.care-step:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.care-step h3 { font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--drama); margin-bottom: .6rem; }

/* ---- booking form ---
   NOTE: form rows are `.fld`, NOT `.field` — `.field` is already the full-bleed
   section class above (padding: clamp(3.5rem,8vw,6.5rem) 0). Reusing it here put
   6.5rem of padding inside every form row. Do not rename this back. -------------------------------------------------------- */
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.4rem); }
.fld { margin-bottom: 1.25rem; }
.fld > label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--drama); margin-bottom: .5rem; }
.fld .hint { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .84rem; color: var(--muted); margin-top: .25rem; }
.input, .textarea, .select {
  width: 100%; font: inherit; color: var(--ink); background: var(--neutral);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: .85rem .95rem;
}
.textarea { min-height: 130px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--drama);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mauve) 40%, transparent);
}
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .two-up { grid-template-columns: 1fr; } }
/* Radio pills — the piece-type choice reads as a choice, not a dropdown */
.pills { display: flex; gap: .6rem; flex-wrap: wrap; }
.pills input { position: absolute; opacity: 0; width: 0; height: 0; }
.pills label {
  cursor: pointer; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: .6rem 1.2rem; font-size: .92rem; font-weight: 600; background: var(--neutral);
}
.pills input:checked + label { background: var(--drama); border-color: var(--drama); color: var(--on-dark); }
.pills input:focus-visible + label { outline: 2px solid var(--drama); outline-offset: 2px; }
/* The honeypot must be reachable by nothing a human uses, but not display:none — some bots
   skip hidden inputs. Off-screen and out of the tab order instead. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin-top: 1rem; font-size: .95rem; }
.form-msg.err { color: var(--drama); font-weight: 600; }
.form-done { text-align: center; padding: clamp(1.5rem, 4vw, 2.5rem) 0; }

/* ---- studio dashboard ---------------------------------------------------- */
.studio-bar { background: var(--drama); color: var(--on-dark); padding: .9rem 0; }
.studio-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr);
         gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: start; }
.col { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: .9rem; min-height: 120px; }
.col > h3 { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
            color: var(--muted); display: flex; justify-content: space-between; margin-bottom: .8rem; }
.card { background: var(--neutral); border: 1px solid var(--line); border-left: 3px solid var(--mauve);
        border-radius: var(--r); padding: .8rem .9rem; margin-bottom: .7rem; }
.card .who { font-weight: 700; font-size: .95rem; }
.card .meta { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.card .idea { font-size: .85rem; color: var(--ink-2); margin-top: .5rem; line-height: 1.45; }
.card .acts { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .7rem; }
.card .acts a, .card .acts button {
  font: inherit; font-size: .76rem; font-weight: 600; padding: .3rem .6rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); cursor: pointer; }
.card .acts .go { background: var(--drama); border-color: var(--drama); color: var(--on-dark); }
.studio-empty { color: var(--muted); font-size: .84rem; }
.login-card { max-width: 380px; margin: 0 auto; }