/* ═══════════════════════════════════════════════════════════════════
   Engraveology — site stylesheet

   Palette is taken from the materials themselves rather than picked to
   look premium: graphite/slate ground, the cool white of frosted glass
   for the engraved mark, warm brass for the brand line (the shared note
   with Limology's gold, without reusing the crest), and umber for the
   wood and leather substrates.

   Type: Cinzel for display — it descends from carved Roman inscriptional
   capitals, which is the same act the laser performs. Archivo for body.
   Space Mono for machine specs, echoing the G-code side of the work.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ink:        #14171A;   /* graphite ground — slate, anodized metal   */
  --ink-raised: #1C2126;   /* card + panel surfaces                      */
  --ink-line:   #2A3138;   /* hairline rules                             */
  --frost:      #EDEFF0;   /* the engraved mark — cool, like glass frost */
  --frost-dim:  #A8B2B9;   /* secondary text                             */
  --steel:      #5A6570;   /* labels, captions, disabled                 */
  --brass:      #C8A96B;   /* brand accent                               */
  --brass-deep: #9C7F45;   /* brass on hover / pressed                   */
  --umber:      #6B4A2F;   /* wood + leather substrate note              */

  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --measure: 66ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --rule: 1px solid var(--ink-line);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--frost);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

img, svg { max-width: 100%; }

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

/* Utility label — used for eyebrows and spec readouts.
   Named for what it is (a machine-readout style), not where it sits. */
.readout {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}

/* ─────────────────────────── Header ─────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 23, 26, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 72px;
}

.masthead__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--frost);
  margin-right: auto;
  white-space: nowrap;
}

.masthead__nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.masthead__link {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--frost-dim);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.masthead__link:hover { color: var(--frost); border-bottom-color: var(--brass); }

@media (max-width: 760px) {
  .masthead__nav { display: none; }
}

/* ─────────────────────────── Buttons ─────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--brass);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--solid { background: var(--brass); color: var(--ink); }
.btn--solid:hover { background: var(--brass-deep); border-color: var(--brass-deep); }

.btn--line { background: transparent; color: var(--brass); }
.btn--line:hover { background: var(--brass); color: var(--ink); }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ──────────────────────────── Hero ───────────────────────────── */

.hero {
  padding-block: clamp(3.5rem, 11vh, 7rem) clamp(2.5rem, 7vh, 4.5rem);
  border-bottom: var(--rule);
}

.hero__eyebrow { margin: 0 0 clamp(2rem, 5vh, 3rem); }

/* The signature element: the wordmark is drawn the way the machine
   draws it — vector outline first, then the fill settles in behind it,
   the way frosted glass appears as the beam passes. */
.hero__trace { display: block; width: 100%; height: auto; overflow: visible; }

.hero__trace-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 96px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero__trace-outline {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.1;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: trace 3.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.hero__trace-fill {
  fill: var(--frost);
  opacity: 0;
  animation: settle 1.5s ease-out 2.2s forwards;
}

/* The beam's travelling head. Rides the same clock as the outline. */
.hero__trace-head {
  fill: var(--brass);
  animation: head 3.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes trace  { to { stroke-dashoffset: 0; } }
@keyframes settle { to { opacity: 1; } }
@keyframes head   {
  0%        { opacity: 0;   transform: translateX(0); }
  6%        { opacity: 1; }
  92%       { opacity: 1; }
  100%      { opacity: 0;   transform: translateX(940px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__trace-outline { stroke-dashoffset: 0; }
  .hero__trace-fill    { opacity: 1; }
  .hero__trace-head    { opacity: 0; }
}

.hero__lede {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.4;
  font-weight: 300;
  max-width: 34ch;
  margin: clamp(1.75rem, 4vh, 2.75rem) 0 0;
  color: var(--frost);
}

.hero__sub {
  max-width: 52ch;
  margin: 1.25rem 0 0;
  color: var(--frost-dim);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 5vh, 3rem);
}

/* Spec strip — real numbers off the machine, not marketing adjectives. */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin-top: clamp(3rem, 8vh, 5rem);
  background: var(--ink-line);
  border: var(--rule);
}

.specs__cell { background: var(--ink); padding: 1.25rem 1.4rem; }

.specs__value {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  color: var(--frost);
  display: block;
  margin-bottom: 0.35rem;
}

.specs__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}

/* ────────────────────────── Sections ─────────────────────────── */

.band { padding-block: clamp(4rem, 12vh, 7.5rem); border-bottom: var(--rule); }

.band__head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }

.band__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0.75rem 0 0;
}

.band__intro {
  max-width: var(--measure);
  margin: 1.25rem 0 0;
  color: var(--frost-dim);
}

/* ───────────────────────── Materials ─────────────────────────── */

.materials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--ink-line);
  border: var(--rule);
}

/* There are five materials. On wide screens auto-fit lands on four and
   leaves the fifth stranded on its own row, which reads as a mistake —
   so past this width the count is set explicitly. */
@media (min-width: 1080px) {
  .materials { grid-template-columns: repeat(5, 1fr); }
}

.material {
  background: var(--ink-raised);
  padding: 1.75rem 1.35rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* A 3px edge in the material's own colour — the swatch is the label. */
.material { border-top: 3px solid var(--steel); }
.material[data-stock="glass"]   { border-top-color: #9FB6C4; }
.material[data-stock="wood"]    { border-top-color: var(--umber); }
.material[data-stock="slate"]   { border-top-color: #4A5158; }
.material[data-stock="leather"] { border-top-color: #8A5A3B; }
.material[data-stock="metal"]   { border-top-color: var(--brass); }

.material__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.material__note { margin: 0; color: var(--frost-dim); font-size: 0.9375rem; }

.material__result {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: auto;
  padding-top: 0.75rem;
}

/* ────────────────────────── Process ──────────────────────────── */
/* Numbered because this genuinely is a sequence — each step gates the
   next, and the customer needs to know what they owe us and when. */

.process { display: grid; gap: 1px; background: var(--ink-line); border: var(--rule); }

@media (min-width: 860px) {
  .process { grid-template-columns: repeat(4, 1fr); }
}

.step {
  background: var(--ink);
  padding: 1.75rem 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.step__index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--brass);
}

.step__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.step__note { margin: 0; color: var(--frost-dim); font-size: 0.9375rem; }

.step__owner {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: auto;
  padding-top: 0.9rem;
}

/* ──────────────────────── Quote form ─────────────────────────── */

.quote { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }

@media (min-width: 900px) {
  .quote { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}

.quote__aside p { color: var(--frost-dim); max-width: 42ch; }

.quote__direct {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--frost);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
}

.form { display: grid; gap: 1.35rem; }

.form__row { display: grid; gap: 1.35rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.5rem; }

.field__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}

.field__optional { color: var(--ink-line); }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--frost);
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: 0;
  padding: 0.85rem 0.95rem;
  width: 100%;
  transition: border-color 0.18s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brass);
  outline: none;
}

.field textarea { resize: vertical; min-height: 132px; line-height: 1.6; }

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%),
                    linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field input[type="file"] { padding: 0.7rem; font-family: var(--font-mono); font-size: 0.8125rem; }
.field input[type="file"]::file-selector-button {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--brass);
  border: 1px solid var(--brass);
  padding: 0.5rem 0.9rem;
  margin-right: 0.9rem;
  cursor: pointer;
}

.field__hint { font-size: 0.8125rem; color: var(--steel); margin: 0; }

/* Feedback. Errors say what happened and what to do — no apology, no
   vagueness. Empty by default and hidden via [hidden].
   The explicit [hidden] rule is deliberate: giving .form__status its own
   display would otherwise tie specificity with the browser's built-in
   [hidden] { display: none } and silently win, leaving it always visible. */
.form__status {
  display: block;
  font-size: 0.9375rem;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--steel);
  background: var(--ink-raised);
}
.form__status[hidden] { display: none; }
.form__status--ok   { border-left-color: var(--brass); color: var(--frost); }
.form__status--bad  { border-left-color: #C46A5A; color: #E8B4AA; }

/* ────────────────────────── Footer ───────────────────────────── */

.footer { padding-block: 3.5rem; }

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

.footer__mark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.footer__note { color: var(--steel); font-size: 0.875rem; margin: 0; max-width: 40ch; }

.footer__links { display: flex; flex-direction: column; gap: 0.6rem; }

.footer__link {
  font-size: 0.875rem;
  color: var(--frost-dim);
  text-decoration: none;
  transition: color 0.18s ease;
}
.footer__link:hover { color: var(--brass); }

.footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: var(--rule);
  color: var(--steel);
  font-size: 0.8125rem;
}