/* dsteamps.com — light luxury design system
   White / warm off-white, black type, gold strictly as accent.

   Two rules drive most of what follows:
   1. The audience skews older. Body copy is 19px, normal weight, near-black
      on white. No pale-grey-on-white, no 300-weight body text, no 14px.
   2. Gold is an accent, never a text colour at body size. --gold-ink is the
      only gold allowed on text, and it is dark enough to clear WCAG AA on
      white; --gold itself is for rules, borders and fills only. */

:root {
  --paper:        #ffffff;
  --paper-warm:   #faf7f2;   /* warm off-white for alternating bands */
  --ink:          #141414;   /* body text — 15.9:1 on white */
  --ink-soft:     #4a4a4a;   /* secondary text — 8.9:1 on white, still AA at any size */
  --rule:         #e4ded3;
  /* Accent is the Stuart Team brand magenta, taken from the logo (#eb0f6f).
     The logo colour itself measures 4.35:1 on white -- under AA -- so it is
     used as artwork and on fills only. Text and rules use the darkened
     --brand-ink at 5.79:1, which passes AA and still reads as the brand. */
  --gold:         #eb0f6f;   /* decoration ONLY: rules, borders, fills */
  --gold-ink:     #c70a5c;   /* the only accent permitted on text — 5.79:1 */
  --gold-ink-warm:#b50953;   /* on --paper-warm */
  --focus:        #1a4fd6;

  --measure: 68ch;
  --step: clamp(1rem, 0.6rem + 1.4vw, 1.6rem);
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 19px;              /* brief: 18-20px, readable */
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); }
p, li { max-width: var(--measure); }
p { margin: 0 0 1.15em; }

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

/* Visible focus everywhere. Never remove this: keyboard users and anyone
   using switch control rely on it, and it is a WCAG AA failure to drop it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem;
}
.skip-link:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, 1180px); margin-inline: auto; }
.section { padding: clamp(3.5rem, 2rem + 6vw, 7.5rem) 0; }
.section--warm { background: var(--paper-warm); }
.lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--ink-soft); }

/* Gold rule: the one recurring ornament. Animated by motion.js on entry,
   but it must already be visible with JS off, hence scaleX(1) default. */
.rule-gold {
  height: 2px; width: 120px; background: var(--gold); border: 0;
  margin: 1.6rem 0; transform-origin: left center;
}

.eyebrow {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 600; margin: 0 0 .9rem;
}
.section--warm .eyebrow { color: var(--gold-ink-warm); }

/* Buttons — 48px min target, gold fills on hover rather than gold text */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.6rem;
  font: 600 1rem/1 var(--body); text-decoration: none;
  border: 2px solid var(--ink); background: var(--ink); color: #fff;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* Site header */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-head__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.brand { font-family: var(--display); font-size: 1.3rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.site-nav { margin-left: auto; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: .97rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold-ink); text-decoration: underline; }

/* Hero */
.hero { position: relative; padding: clamp(4rem, 2rem + 9vw, 9rem) 0 clamp(3rem, 2rem + 5vw, 6rem); }
.hero__title { max-width: 16ch; }
.hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* An honest placeholder where approved original photography will go.
   Deliberately looks unfinished: a pretty stock-ish gradient here would
   read as a real property and that is exactly what the brief forbids. */
.asset-blocker {
  border: 2px dashed var(--rule); background: var(--paper-warm);
  padding: clamp(2rem, 1rem + 4vw, 4rem); text-align: center; color: var(--ink-soft);
}
.asset-blocker strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: .4rem; }

figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; }
figcaption { font-size: .9rem; color: var(--ink-soft); padding-top: .7rem; }

.grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
@media (min-width: 820px) { .grid--2 { grid-template-columns: 1fr 1fr; align-items: center; } }

/* FAQ — <details> so every answer is in the DOM and crawlable with JS off */
.faq details { border-top: 1px solid var(--rule); padding: 1.25rem 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; font-family: var(--display); font-size: 1.22rem;
  font-weight: 600; list-style: none; display: flex; gap: 1rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--gold-ink); font-family: var(--body); }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding-top: .8rem; }

/* Placeholders awaiting Dan — visible on purpose so nothing ships unnoticed */
.needs-dan {
  background: #fff8e1; border-left: 4px solid var(--gold);
  padding: 1rem 1.2rem; color: #4a3c10; font-size: .95rem;
}

.identity { font-size: .95rem; color: var(--ink-soft); }
.identity strong { color: var(--ink); }

.site-foot { border-top: 1px solid var(--rule); padding: 3rem 0; background: var(--paper-warm); }

.marquee { overflow: hidden; border-block: 1px solid var(--rule); padding: 1.1rem 0; }
.marquee__track { display: flex; gap: 3rem; width: max-content; font-family: var(--display); font-size: 1.5rem; color: var(--gold-ink-warm); }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 48s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Motion: opt-in classes. Content is visible by default so that nothing
   depends on JS; motion.js adds .motion-ready and only then hides/reveals. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .reveal { opacity: 0; transform: translateY(18px); }
  .motion-ready .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
  .motion-ready .rule-gold { transform: scaleX(0); }
  .motion-ready .rule-gold.is-in { transform: scaleX(1); transition: transform .8s cubic-bezier(.2,.7,.3,1); }
}

/* ---- Full-bleed hero -------------------------------------------------- */
.hero--full { position: relative; min-height: min(82vh, 760px); display: grid; align-items: end;
  padding: 0; overflow: clip; background: var(--paper-warm); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 42%, rgba(255,255,255,.95) 100%); }
.hero__inner { position: relative; z-index: 2; padding: clamp(3rem,2rem+6vw,7rem) 0 clamp(2.5rem,1.5rem+4vw,5rem); }
.hero--full h1 { max-width: 15ch; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready [data-stagger] > * { opacity: 0; transform: translateY(22px); }
  .motion-ready [data-stagger] > *.is-in { opacity: 1; transform: none;
    transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
}
/* Image frames: scale 1.06 -> 1 on entry, slow zoom on hover */
.frame { overflow: clip; background: var(--paper-warm); }
.frame img { display: block; width: 100%; height: auto; transition: transform 1.1s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .frame img { transform: scale(1.06); }
  .motion-ready .frame.is-in img { transform: scale(1); }
  .frame:hover img { transform: scale(1.04); }
}
.pair { display: grid; gap: clamp(1.25rem,1rem+1.5vw,2.25rem); }
@media (min-width: 820px) { .pair { grid-template-columns: 1fr 1fr; } }


/* ---- Brand mark + about ------------------------------------------------ */
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand img { height: 38px; width: auto; display: block; }
.brand span { font-family: var(--display); font-size: 1.22rem; font-weight: 600; }
@media (max-width: 620px) { .brand span { display: none; } }

.about { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 860px) { .about { grid-template-columns: minmax(260px, 360px) 1fr; } }
.about__photo { overflow: clip; }
.about__photo img { display: block; width: 100%; height: auto; }
.credential {
  display: flex; gap: .85rem; align-items: flex-start;
  border-left: 3px solid var(--gold); padding: .9rem 0 .9rem 1.1rem; margin: 1.5rem 0;
}
.credential strong { display: block; color: var(--ink); }
.credential span { color: var(--ink-soft); font-size: .95rem; }