/* Crouse Craft — public home page, Art Deco.
   The period's real vocabulary rather than a gold gradient on a modern layout:
   strict bilateral symmetry, stepped ziggurat frames, a sunburst behind the
   monogram, doubled brass hairlines, and letterspaced Cinzel capitals. Pure
   CSS plus one inline SVG, so there are no images to load. */

:root {
  --night: #0b0f1a;
  --night-2: #111726;
  --brass: #c9a227;
  --brass-soft: #e3c766;
  --cream: #f4efe3;
  --cream-dim: #cfc7b4;
  --ink: #0b0f1a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font: 300 16px/1.65 "Josefin Sans", ui-sans-serif, system-ui, sans-serif;
}
a { color: var(--brass-soft); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--brass); color: var(--ink); padding: 10px 16px; z-index: 50;
}
.skip:focus { left: 8px; top: 8px; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 48px 20px 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #17203a 0%, var(--night) 62%);
}

/* The sunburst: alternating brass wedges, faint, fanning from the top centre.
   repeating-conic-gradient is exactly the right tool for a deco ray motif. */
.rays {
  position: absolute; inset: -40% -20% auto -20%; height: 150%;
  background: repeating-conic-gradient(from 195deg at 50% 0%,
    rgba(201, 162, 39, .085) 0deg 3.2deg,
    transparent 3.2deg 9deg);
  -webkit-mask-image: radial-gradient(70% 62% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(70% 62% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}

/* Stepped frame — three nested rectangles with the classic deco offset. */
.frame {
  position: relative;
  text-align: center;
  padding: 54px 42px 46px;
  max-width: 680px;
  border: 1px solid rgba(201, 162, 39, .55);
  box-shadow:
    0 0 0 5px var(--night),
    0 0 0 6px rgba(201, 162, 39, .32),
    0 0 0 13px var(--night),
    0 0 0 14px rgba(201, 162, 39, .16);
  background: linear-gradient(180deg, rgba(17, 23, 38, .72), rgba(11, 15, 26, .82));
  backdrop-filter: blur(2px);
}

.monogram { color: var(--brass); width: 96px; margin: 0 auto 22px; }
.monogram svg { display: block; width: 100%; height: auto; }
.mono-text {
  font-family: "Cinzel", Georgia, serif; font-size: 40px; font-weight: 700;
  fill: var(--brass); letter-spacing: .06em;
}

h1 {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 7vw, 62px);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
  color: var(--cream);
}

/* Doubled hairline with a lozenge at the centre — the standard deco divider. */
.rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px auto; max-width: 420px; }
.rule.tight { margin: 14px auto 26px; }
.rule span {
  flex: 1; height: 0;
  border-top: 1px solid rgba(201, 162, 39, .75);
  border-bottom: 1px solid rgba(201, 162, 39, .28);
  padding-bottom: 3px;
}
.rule i { width: 9px; height: 9px; background: var(--brass); transform: rotate(45deg); flex: 0 0 9px; }

.tagline {
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: .3em; text-transform: uppercase;
  font-size: clamp(11px, 2.2vw, 13px);
  color: var(--brass-soft);
  margin: 0 0 20px;
}
.blurb { color: var(--cream-dim); max-width: 52ch; margin: 0 auto 30px; }

.cta {
  display: inline-block;
  font-family: "Cinzel", Georgia, serif;
  text-transform: uppercase; letter-spacing: .22em; font-size: 14px; font-weight: 600;
  color: var(--ink); background: var(--brass);
  padding: 14px 40px; text-decoration: none;
  border: 1px solid var(--brass);
  box-shadow: 0 0 0 4px var(--night), 0 0 0 5px rgba(201, 162, 39, .45);
  transition: background .18s ease, color .18s ease;
}
.cta:hover, .cta:focus-visible { background: var(--brass-soft); }
.fineprint {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: #8d8571; margin: 18px 0 0;
}

/* Chevron band — a repeating zigzag in brass, the deco border par excellence. */
.chevrons {
  width: 100%; height: 16px; margin-top: 44px;
  background:
    linear-gradient(135deg, var(--brass) 25%, transparent 25%) -14px 0,
    linear-gradient(225deg, var(--brass) 25%, transparent 25%) -14px 0;
  background-size: 28px 28px;
  opacity: .5;
}
.chevrons.flip { transform: rotate(180deg); margin: 0 0 26px; }

/* ── portfolio ──────────────────────────────────────────────────────────── */
main { background: var(--night); }
.wrap { max-width: 1060px; margin: 0 auto; padding: 66px 20px; }
h2 {
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em;
  font-size: clamp(19px, 3.4vw, 26px);
  text-align: center; margin: 0; color: var(--cream);
}

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.deco-card {
  position: relative;
  background: linear-gradient(180deg, var(--night-2), #0d1322);
  border: 1px solid rgba(201, 162, 39, .28);
  padding: 26px 22px 22px;
  /* Cut corners — the deco chamfer, done with a clip path rather than a border. */
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.deco-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent, var(--brass));
}
.deco-card .code {
  font-family: "Cinzel", Georgia, serif; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; color: var(--ink);
  background: var(--accent, var(--brass));
  padding: 3px 9px; display: inline-block;
}
.deco-card h3 {
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  font-size: 16px; margin: 14px 0 8px; color: var(--cream);
}
.deco-card p { color: var(--cream-dim); font-size: 15px; margin: 0 0 14px; }
.deco-card a {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid rgba(227, 199, 102, .45); padding-bottom: 1px;
}
.deco-card a:hover { border-bottom-color: var(--brass-soft); }

.creed { padding-top: 0; }
.creed blockquote {
  margin: 0 auto; max-width: 60ch; text-align: center;
  font-family: "Cinzel", Georgia, serif; font-size: clamp(15px, 2.6vw, 19px);
  line-height: 1.75; letter-spacing: .04em; color: var(--brass-soft);
}

footer { text-align: center; padding: 0 20px 44px; color: #8d8571; }
footer p { margin: 6px 0; font-size: 13px; letter-spacing: .08em; }
footer .fineprint { margin-top: 12px; }
footer a { text-decoration: none; border-bottom: 1px solid rgba(227, 199, 102, .4); }

@media (max-width: 560px) {
  .frame { padding: 38px 20px 34px; box-shadow: 0 0 0 4px var(--night), 0 0 0 5px rgba(201,162,39,.3); }
  .wrap { padding: 46px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta { transition: none; }
}