/* ===========================================================================
   Golds Jewelry and Loan — coming-soon page
   FE-01: brand foundation and page shell.

   Everything here derives from Docs/BRAND.md. Read §2–§7 before changing a
   value. Three rules that are easy to break and expensive to get wrong:

     - Gold #B08D57 is NEVER a text colour on bone #F4F1EA (2.7:1, fails AA).
       Use bronze #7A5C2E. BRAND.md §3 calls this the rule people break most.
     - No shadows, no gradients, no metallic fills. Flat surfaces only (§7).
     - Serif headings stay at weight 400–500. Never bolder (§5).
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. Tokens — verbatim from BRAND.md §4. Do not edit without editing BRAND.md.
   ------------------------------------------------------------------------ */

:root{
  /* foundation */
  --obsidian:#16130F;
  --graphite:#2E2A25;
  --bone:#F4F1EA;
  --ink:#3A3733;

  /* metals */
  --gold:#B08D57;
  --bronze:#7A5C2E;
  --champagne:#E3D2B4;
  --platinum:#B9BCBE;

  /* semantic */
  --error:#8C2F2F;
  --success:#3F6B4A;

  /* type */
  --serif:'Spectral',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* layout */
  --wrap:1140px;
  --gut:clamp(20px,5vw,56px);
  --radius:2px;
}

/* Derived — not in BRAND.md's block, but stated in §7 prose. Named here so a
   border is never hand-typed at a slightly different opacity. */
:root{
  --rule-light:1px solid rgba(58,55,51,.16);
  --rule-dark:1px solid rgba(176,141,87,.28);
  --band-y:clamp(56px,8vw,104px);
}


/* ---------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------ */

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

html{
  -webkit-text-size-adjust:100%;
  /* Nothing on this page should ever scroll sideways (NFR-3). */
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{max-width:100%;height:auto;display:block;}

h1,h2,h3,p,figure,address{margin:0;}

address{font-style:normal;}

a{color:var(--bronze);text-decoration-thickness:1px;text-underline-offset:.18em;}
a:hover{color:var(--obsidian);}


/* ---------------------------------------------------------------------------
   3. Type scale — BRAND.md §5
   ------------------------------------------------------------------------ */

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  color:var(--obsidian);
  letter-spacing:-.005em;
}

h1{font-size:clamp(38px,5.6vw,64px);line-height:1.15;}
h2{font-size:clamp(29px,3.7vw,42px);line-height:1.15;}
h3{font-size:21px;line-height:1.3;}

.lede{font-size:18px;line-height:1.6;}
.small{font-size:14.5px;line-height:1.55;}

/* The mono face marks a measured fact — prices, weights, karat stamps, hours,
   addresses, timestamps. It is not decoration and never carries prose (§5). */
.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.4;
}

.data{
  font-family:var(--mono);
  font-size:13.5px;
  font-weight:400;
  letter-spacing:.04em;
}


/* ---------------------------------------------------------------------------
   4. Layout — bands and the wrapper
   ------------------------------------------------------------------------ */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* Alternate bone and obsidian. Lead with light; never more than two dark
   sections consecutively. An all-dark page feels like a nightclub (§7). */
.band{padding-block:var(--band-y);}

.band--light{background:var(--bone);color:var(--ink);}

.band--dark{background:var(--obsidian);color:var(--champagne);}
.band--dark h1,
.band--dark h2,
.band--dark h3{color:var(--champagne);}
.band--dark a{color:var(--gold);}
.band--dark a:hover{color:var(--champagne);}
.band--dark .muted{color:var(--platinum);}


/* ---------------------------------------------------------------------------
   5. Header
   ------------------------------------------------------------------------ */

.site-header{
  padding-block:clamp(18px,2.4vw,26px);
  border-bottom:var(--rule-dark);
}

.site-header__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px clamp(16px,3vw,32px);
}

.wordmark{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.42em;
  text-decoration:none;
  color:var(--champagne);
}
.wordmark:hover{color:var(--champagne);}

.wordmark__mark{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(23px,3vw,29px);
  line-height:1.1;
  color:var(--gold);
}

.wordmark__rest{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(15px,1.7vw,19px);
  line-height:1.2;
  color:var(--champagne);
}

.site-header__meta{color:var(--platinum);}


/* ---------------------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------------------ */

.site-footer{
  padding-block:clamp(40px,5vw,64px);
  border-top:var(--rule-dark);
}

.site-footer__inner{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.site-footer__name{
  font-family:var(--serif);
  font-weight:400;
  font-size:21px;
  line-height:1.3;
  color:var(--champagne);
}

.site-footer__address{color:var(--platinum);line-height:1.7;}


/* ---------------------------------------------------------------------------
   7. Focus and skip link

   BRAND.md §7 calls the focus state non-negotiable, and it means it: a
   meaningful share of this audience is over 60 and some navigate by keyboard.
   2px gold outline, 3px offset, always visible, never removed.

   FE-07 — the gold ring alone is 2.74:1 against bone, which fails WCAG SC
   1.4.11's 3:1 for the visual boundary of a control. Against obsidian it is
   5.99:1, so only light bands are affected. Owner decision 2026-09-02: keep
   the gold exactly as §7 mandates and add a contrasting outer keyline, rather
   than recolour the ring. Bronze would have passed at 5.48:1 but contradicts
   the rule above, and darkening --gold would repaint the wordmark and every
   dark-band accent in order to fix a focus state.

   The keyline is 1px obsidian immediately outside the gold — 16.41:1 against
   bone — so the indicator as a whole clears 3:1 on every surface we ship.

   On §7's "No shadows": that rule bans depth and fake-metal effects, i.e.
   drop shadows, glows and gradient fills. These rings have zero blur, zero
   offset and no colour ramp, so they paint as flat solid lines that are
   indistinguishable from a border, and they exist only while :focus-visible
   matches — never in the resting visual language. box-shadow is simply the
   one mechanism that draws a ring outside an element without disturbing
   layout: ::after is unavailable because <input> is a replaced element, and
   a real border would shift the page every time something took focus.

   --focus-gap must match the surface behind the element so the 3px offset
   still reads as an offset instead of a coloured band. It is deliberately
   substituted in the box-shadow itself rather than pre-composed into a
   --focus-ring variable: a var() nested inside a custom property resolves at
   the element that DECLARES it, so a composed ring would bake in :root's bone
   and inherit that into the dark bands.
   ------------------------------------------------------------------------ */

:root{--focus-gap:var(--bone);}
.band--dark{--focus-gap:var(--obsidian);}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  /* First shadow paints on top, so the 6px obsidian shows only as the 1px
     annulus outside the 5px gap fill. The gold outline paints above both. */
  box-shadow:0 0 0 5px var(--focus-gap),0 0 0 6px var(--obsidian);
}

.skip-link{
  /* Lives directly on <body>, but when focused it renders over the dark
     header, so its gap has to be obsidian rather than the :root default. */
  --focus-gap:var(--obsidian);
  position:absolute;
  left:-9999px;
  top:0;
  z-index:10;
  background:var(--gold);
  color:var(--obsidian);
  font-weight:600;
  padding:12px 18px;
  border-radius:var(--radius);
  text-decoration:none;
}
.skip-link:focus{left:8px;top:8px;color:var(--obsidian);}


/* ---------------------------------------------------------------------------
   8. Motion — minimal, and optional. BRAND.md §7.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------------------------------------------------------------------------
   9. Content sections (FE-02)
   ------------------------------------------------------------------------ */

/* The hero is deliberately shallow. FR-2 requires the name, the opening-soon
   line, "Gilbert" and a one-line description to be visible at 375px without
   scrolling, and every extra pixel here pushes something below the fold. */
.hero{padding-block:clamp(36px,6vw,72px) clamp(28px,4vw,48px);}
.hero__eyebrow{color:var(--bronze);margin-bottom:16px;}
.hero__title{max-width:18ch;margin-bottom:20px;}
.hero__lede{max-width:52ch;}

.section{padding-block:clamp(44px,6.5vw,88px);}
.section--tight{padding-block:clamp(34px,4.5vw,56px);}
.section h2{margin-bottom:26px;}
.section h3{margin-bottom:10px;}

.prose{max-width:62ch;}
.prose p + p{margin-top:18px;}

.cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(24px,3.5vw,48px);
  max-width:900px;
}

.section__note{
  max-width:62ch;
  margin-top:clamp(26px,3vw,38px);
  padding-top:clamp(22px,2.5vw,30px);
  border-top:var(--rule-light);
}

/* --- Hallmark rail — BRAND.md §6. Monospaced chips, bronze on bone. ------ */

.hallmarks{margin-top:clamp(30px,4vw,48px);}
.hallmarks .eyebrow{color:var(--bronze);margin-bottom:14px;}

.hallmarks__rail{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
  padding:0;
  list-style:none;
}

.chip{
  font-family:var(--mono);
  font-size:13.5px;
  letter-spacing:.04em;
  /* Bronze, never gold: gold on bone is 2.7:1 and fails AA (BR-8). */
  color:var(--bronze);
  border:var(--rule-light);
  border-radius:var(--radius);
  padding:7px 12px;
  white-space:nowrap;
}

/* `Unmarked` is the one chip doing persuasive work, so it is allowed to look
   slightly different — but through weight and border, not a second colour. */
.chip--last{
  border-color:rgba(122,92,46,.45);
  font-weight:500;
}

.hallmarks__note{max-width:56ch;}

/* --- Location ------------------------------------------------------------ */

.find{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(26px,4vw,56px);
  max-width:900px;
}

.find__address{font-size:15px;line-height:1.8;margin-bottom:18px;}
.find__actions{margin-bottom:14px;}
.find__phone .data{font-size:15px;}
.find__label{color:var(--bronze);margin-bottom:10px;}
.find__hours{font-size:15px;line-height:1.8;margin-bottom:18px;}
.find__opening{max-width:46ch;}

/* --- Buttons — BRAND.md §7 ----------------------------------------------- */

.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  padding:13px 22px;
  border-radius:var(--radius);
  text-decoration:none;
  /* No shadow, no gradient. Flat surfaces only. */
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}

/* Primary on light: solid obsidian with champagne text. */
.btn--primary{
  background:var(--obsidian);
  color:var(--champagne);
  border:1px solid var(--obsidian);
}
.btn--primary:hover{background:var(--graphite);border-color:var(--graphite);color:var(--champagne);}

/* Secondary: bronze outline. */
.btn--outline{
  background:transparent;
  color:var(--bronze);
  /* FE-07: .5 alpha over bone was 2.09:1 and this border is the only boundary
     the control has, so SC 1.4.11 wants 3:1. .8 measures 3.63:1. Note .7 is
     2.98:1 — it misses, so do not soften this back a notch. */
  border:1px solid rgba(122,92,46,.8);
}
.btn--outline:hover{background:var(--bronze);border-color:var(--bronze);color:var(--bone);}

/* ---------------------------------------------------------------------------
   10. Interest form (FE-03)

   Two constraints shape all of this. Inputs on this page are used by people
   over 60 on phones, so the touch targets are large, the borders are visible
   without being loud, and nothing depends on colour alone. And BRAND.md §7
   allows no shadows and no gradients, so depth comes from a 1px rule and a
   flat panel tint only.
   ------------------------------------------------------------------------ */

.interest__panel{
  max-width:640px;
  border:var(--rule-light);
  border-radius:var(--radius);
  /* A whisper darker than bone. Enough to read as a distinct surface without
     becoming a second background colour. */
  background:rgba(58,55,51,.025);
  padding:clamp(24px,4vw,44px);
}

.interest__lede{max-width:52ch;margin-top:14px;}

.form{margin-top:clamp(26px,3.5vw,36px);}

/* --- Fields -------------------------------------------------------------- */

.field{margin-bottom:22px;}

.field__label{
  display:block;
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  color:var(--obsidian);
  margin-bottom:7px;
}

/* Muted by weight and colour, never by opacity — opacity blends any link
   inside down with the text and quietly breaks its contrast ratio. */
.field__optional{font-weight:400;color:var(--ink);}

.field__input{
  display:block;
  width:100%;
  font-family:var(--sans);
  font-size:16.5px;  /* 16px+ or iOS Safari zooms the page on focus. */
  line-height:1.5;
  color:var(--ink);
  background:var(--bone);
  /* .6 alpha over bone is 3.42:1 — WCAG 1.4.11 wants 3:1 for the boundary of
     a control, and .34 (1.88:1) was well under. Do not lighten this. */
  border:1px solid rgba(58,55,51,.6);
  border-radius:var(--radius);
  padding:12px 14px;
  transition:border-color .15s ease;
}
.field__input:hover{border-color:rgba(58,55,51,.78);}
.field__input:focus{border-color:var(--bronze);}

.field__textarea{resize:vertical;min-height:112px;}

/* Never colour alone: an invalid field gets a heavier border AND a written
   message beneath it (NFR-4, WCAG 1.4.1). */
.field__input[aria-invalid="true"]{
  border-color:var(--error);
  border-width:2px;
  padding:11px 13px;  /* hold the box the same size as the 1px state */
}

.field__error{
  color:var(--error);
  font-size:14.5px;
  line-height:1.5;
  margin-top:7px;
}

/* --- Reason radio group -------------------------------------------------- */

.fieldset{border:0;margin-inline:0;padding:0;min-width:0;}
.fieldset .field__error{margin-top:0;margin-bottom:10px;}

.choices{list-style:none;margin:0;padding:0;display:grid;gap:2px;}

.choice{display:flex;align-items:flex-start;gap:11px;}

/* The whole row is the target, not just the 20px dot. */
.choice label{
  flex:1;
  font-size:16.5px;
  line-height:1.45;
  padding:9px 0;
  cursor:pointer;
  color:var(--ink);
}

.choice input[type="radio"]{
  flex:none;
  width:21px;
  height:21px;
  margin:0;
  margin-top:10px;
  accent-color:var(--bronze);
  cursor:pointer;
}

#reason-group[aria-invalid="true"] .choices{
  border-left:2px solid var(--error);
  padding-left:12px;
  margin-left:-14px;
}

/* --- Honeypot (CON-01) ---------------------------------------------------
   Off-canvas rather than display:none. Some bots skip fields that are
   display:none or visibility:hidden on the theory that a person cannot fill
   them; this stays "rendered" while being unreachable by eye, pointer,
   keyboard (tabindex="-1") and screen reader (aria-hidden).
   ------------------------------------------------------------------------ */

.hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* --- Failure, consent, submit -------------------------------------------- */

.form__error{
  color:var(--error);
  font-size:16px;
  line-height:1.55;
  border:1px solid rgba(140,47,47,.4);
  border-left:3px solid var(--error);
  border-radius:var(--radius);
  background:rgba(140,47,47,.05);
  padding:13px 15px;
  margin-bottom:20px;
}
.form__error a{color:var(--error);}

.form__consent{
  color:var(--ink);
  max-width:58ch;
  margin-bottom:20px;
}

.form__actions{display:flex;}
.form__actions .btn{width:100%;text-align:center;padding-block:15px;}

.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn--primary:disabled:hover{background:var(--obsidian);border-color:var(--obsidian);}

@media (min-width:520px){
  .form__actions .btn{width:auto;min-width:220px;}
}

.form__fallback{
  margin-top:16px;
  color:var(--ink);
}

/* --- Confirmation (FR-14) ------------------------------------------------ */

.confirm{
  margin-top:clamp(26px,3.5vw,36px);
  border-left:3px solid var(--success);
  padding:4px 0 4px 18px;
  max-width:56ch;
}
/* Focused programmatically after a successful submit, which must not draw a
   ring; a real keyboard focus still must. Written as :not(:focus-visible) so
   the shared rule above supplies the ring — duplicating the box-shadow here
   would be a second place to forget when the gap colour changes. */
.confirm:focus:not(:focus-visible){outline:none;}

.confirm__title{
  font-family:var(--serif);
  font-size:23px;
  line-height:1.3;
  color:var(--obsidian);
  margin-bottom:10px;
}

/* ---------------------------------------------------------------------------
   11. Privacy policy (FE-05)

   A long read on a small screen. Measure is capped near 68ch and the heading
   rhythm is looser than the root page's, because this is prose to be read
   rather than scanned.
   ------------------------------------------------------------------------ */

.policy{max-width:68ch;}

.policy h1{margin:14px 0 0;}

.policy__effective{
  color:var(--bronze);
  margin:16px 0 26px;
}

.policy .lede{margin-bottom:8px;}

.policy h2{
  font-size:clamp(23px,2.6vw,29px);
  margin:clamp(34px,4vw,48px) 0 12px;
  padding-top:clamp(20px,2.4vw,28px);
  border-top:var(--rule-light);
}

.policy p{margin-bottom:16px;}

.policy strong{font-weight:600;color:var(--obsidian);}

.policy__list{
  margin:0 0 16px;
  padding-left:22px;
}
.policy__list li{margin-bottom:12px;}

.policy__contact{line-height:1.8;}

.policy__back{
  margin-top:clamp(34px,4vw,48px);
  padding-top:clamp(20px,2.4vw,28px);
  border-top:var(--rule-light);
}

/* Footer link row — used by both the root page and the policy page. */
.site-footer__links{margin-top:4px;}

/* ---------------------------------------------------------------------------
   12. 404 (INF-05)
   ------------------------------------------------------------------------ */

.notfound{max-width:60ch;}
.notfound .eyebrow{color:var(--bronze);margin-bottom:14px;}
.notfound h1{margin-bottom:18px;}
.notfound .lede{margin-bottom:22px;}