/* =====================================================================
   Silverwood Station - design system
   Direction: heritage horse-float that travels to you. Deep eucalypt
   surfaces, warm bone reading sections, champagne-brass accent,
   pewter hairlines. Fraunces (display) + Hanken Grotesk (utility).
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* surfaces */
  --ink:        #14160F;   /* darkest - hero, footer */
  --pine:       #223024;   /* deep eucalypt green */
  --pine-soft:  #2C3D2E;
  --bone:       #EDE7D8;   /* warm paper - reading sections */
  --bone-deep:  #E3DAC7;
  /* neutrals */
  --pewter:     #A6A697;   /* silver-sage - rules, labels */
  --ink-muted:  #5C5848;   /* muted text on bone */
  --bone-muted: #B8B3A2;   /* muted text on dark */
  /* accent */
  --champ:      #C6A968;   /* champagne brass */
  --champ-deep: #A8854A;
  --champ-glow: rgba(198,169,104,.16);

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* modular type scale */
  --t-xs:  .78rem;
  --t-sm:  .9rem;
  --t-base: 1.0625rem;
  --t-md:  clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --t-lg:  clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --t-xl:  clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
  --t-2xl: clamp(2.9rem, 1.9rem + 4.6vw, 5.6rem);

  /* spacing scale (8px base) */
  --s-1: .5rem;  --s-2: .75rem; --s-3: 1rem;  --s-4: 1.5rem;
  --s-5: 2rem;   --s-6: 3rem;   --s-7: 4.5rem; --s-8: 6.5rem;
  --s-9: 9rem;

  --maxw: 1180px;
  --rule: 1px solid color-mix(in srgb, var(--pewter) 40%, transparent);
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; }
}
body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }

/* subtle film grain on dark surfaces */
.grain::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.section { padding-block: clamp(3.5rem, 7vw, var(--s-9)); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 4vw, var(--s-7)); }
.on-dark  { background: var(--ink); color: var(--bone); }
.on-pine  { background: var(--pine); color: var(--bone); }
.on-bone  { background: var(--bone); color: var(--ink); }
.on-dark .muted, .on-pine .muted { color: var(--bone-muted); }
.on-bone .muted { color: var(--ink-muted); }

/* ---------- Type ---------- */
h1,h2,h3,h4 { font-family: var(--display); font-weight: 400; line-height: 1.04; letter-spacing: -.01em;
  font-optical-sizing: auto; }
.display { font-size: var(--t-2xl); line-height: .98; letter-spacing: -.025em; }
.h-xl { font-size: var(--t-xl); }
.h-lg { font-size: var(--t-lg); }
.h-md { font-size: var(--t-md); font-family: var(--display); }
.lede { font-size: var(--t-md); line-height: 1.5; max-width: 46ch; }
.prose p { max-width: 64ch; margin-block: 0 1.1em; }
em, .italic { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-weight: 600;
  color: var(--champ-deep);
  display:inline-flex; align-items:center; gap:.6rem;
}
.on-dark .eyebrow, .on-pine .eyebrow { color: var(--champ); }
.eyebrow::before { content:""; width:1.6rem; height:1px; background: currentColor; opacity:.6; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.5rem;
  font-family:var(--sans); font-weight:600; font-size:var(--t-sm); letter-spacing:.02em;
  border-radius: var(--radius); border:1px solid transparent; transition: all .35s var(--ease); }
.btn--primary { background: var(--champ); color: var(--ink); }
.btn--primary:hover { background: var(--champ-deep); transform: translateY(-2px); }
.btn--ghost { border-color: color-mix(in srgb, currentColor 35%, transparent); background:transparent; color:inherit; }
.btn--ghost:hover { border-color: var(--champ); color: var(--champ); }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* link with animated underline */
.ulink { position:relative; color:inherit; font-weight:500; }
.ulink::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background: var(--champ); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease); }
.ulink:hover::after { transform: scaleX(1); }

/* ---------- Header / Nav ---------- */
.skip { position:absolute; left:-999px; top:0; background:var(--champ); color:var(--ink);
  padding:.6rem 1rem; z-index:200; }
.skip:focus { left:1rem; top:1rem; }

.site-head { position: sticky; top:0; z-index:100;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--pewter) 18%, transparent);
  color: var(--bone); }
.site-head .wrap { display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:1rem; }
.brand { display:flex; align-items:center; gap:.7rem; font-family:var(--display); font-size:1.3rem;
  letter-spacing:-.01em; color:var(--bone); }
.brand img { height:30px; width:auto; display:block; }
.cta-logo { height:96px; width:auto; display:block; margin:0 auto var(--s-6); }
.nav { display:flex; align-items:center; gap:1.9rem; }
.nav a { font-size:var(--t-sm); font-weight:500; color: color-mix(in srgb, var(--bone) 82%, transparent); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
.nav .navphone { display:inline-flex; align-items:center; gap:.5rem; color:var(--champ); font-weight:600; }
.navtoggle { display:none; background:none; border:0; color:var(--bone); padding:.4rem; }

@media (max-width: 860px) {
  .nav { position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:flex-start;
    gap:1.4rem; background:var(--ink); padding:2rem clamp(1.25rem,5vw,3rem) 2.5rem;
    border-bottom:1px solid color-mix(in srgb,var(--pewter) 18%,transparent);
    transform:translateY(-120%); transition:transform .45s var(--ease); }
  .nav[data-open="true"] { transform:translateY(0); }
  .nav a { font-size:1.4rem; font-family:var(--display); }
  .navtoggle { display:block; }
}

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; }
.hero .wrap { position:relative; z-index:2; padding-block: clamp(4rem,10vw,8.5rem) clamp(3rem,6vw,5rem); }
.hero-grid { display:grid; gap:clamp(2rem,5vw,4rem); }
.hero h1 { margin-block:.3em .5em; }
.hero .lede { color: var(--bone-muted); margin-bottom: var(--s-5); }
.hero-cta { display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.hero-meta { display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; margin-top:var(--s-6);
  padding-top:var(--s-4); border-top:1px solid color-mix(in srgb,var(--pewter) 22%,transparent); }
.hero-meta div { display:flex; flex-direction:column; gap:.15rem; }
.hero-meta dt { font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.18em; color:var(--champ); font-weight:600; }
.hero-meta dd { font-family:var(--display); font-size:1.25rem; }

/* radial glow behind hero */
.hero::after { content:""; position:absolute; z-index:1; width:60vw; height:60vw; right:-10vw; top:-15vw;
  background: radial-gradient(circle, var(--champ-glow), transparent 65%); pointer-events:none; }

/* ---------- Travelling index (signature) ---------- */
.indexband { border-block:1px solid color-mix(in srgb,var(--pewter) 22%,transparent);
  background:var(--pine); color:var(--bone); overflow:hidden; padding-block:1rem; }
.marquee { display:flex; gap:0; width:max-content; animation: slide 38s linear infinite; }
.marquee span { display:inline-flex; align-items:center; font-family:var(--display); font-size:1.35rem;
  padding-inline:1.6rem; color:color-mix(in srgb,var(--bone) 85%,transparent); white-space:nowrap; }
.marquee span::after { content:"·"; color:var(--champ); margin-left:3.2rem; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation:none; flex-wrap:wrap; width:auto; } }

/* ---------- Generic grids ---------- */
.grid { display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.split { display:grid; grid-template-columns: 1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.split--lead { grid-template-columns: .85fr 1.15fr; }
@media (max-width: 860px){ .grid-2,.grid-3,.grid-4,.split,.split--lead { grid-template-columns:1fr; } }

.lead-head { max-width: 54ch; }
.lead-head h2 { margin-block:.4em .35em; }

/* feature row */
.feature { padding-top:var(--s-4); border-top:var(--rule); }
.feature h3 { font-size:var(--t-md); margin-bottom:.4rem; }
.feature .num { font-family:var(--display); color:var(--champ-deep); font-size:.95rem; letter-spacing:.05em; }
.on-dark .feature .num, .on-pine .feature .num { color:var(--champ); }

/* ---------- Cards / packages ---------- */
.card { border:var(--rule); border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.2rem);
  background: color-mix(in srgb, var(--bone) 60%, white); display:flex; flex-direction:column; height:100%;
  transition: transform .4s var(--ease), border-color .4s var(--ease); }
.on-dark .card, .on-pine .card { background: color-mix(in srgb, var(--ink) 70%, var(--pine));
  border-color: color-mix(in srgb,var(--pewter) 20%,transparent); }
.card:hover { transform: translateY(-4px); border-color: var(--champ); }
.card .kicker { font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.2em; color:var(--champ-deep); font-weight:600; }
.on-dark .card .kicker,.on-pine .card .kicker { color:var(--champ); }
.card h3 { font-size:var(--t-lg); margin-block:.3rem .2rem; }
.card .price { font-family:var(--display); font-size:1.5rem; margin-block:.2rem .8rem; }
.card .price small { font-size:.85rem; font-family:var(--sans); color:inherit; opacity:.7; }
.card ul.spec { display:flex; flex-direction:column; gap:.55rem; margin:.5rem 0 1.4rem; font-size:var(--t-sm); }
.card ul.spec li { display:flex; gap:.6rem; }
.card ul.spec li::before { content:"·"; color:var(--champ-deep); }
.on-dark .card ul.spec li::before,.on-pine .card ul.spec li::before { color:var(--champ); }
.card .btn { margin-top:auto; }
.card[data-feature="true"] { background: var(--pine); color: var(--bone); border-color: var(--champ); }
.card[data-feature="true"] .kicker { color: var(--champ); }

/* hero two-up with image */
@media (min-width:861px){ .hero-grid--media { grid-template-columns: 1.05fr .92fr; align-items:center; } }
.hero .frame { box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
figure.frame { margin:0; }
.frame-cap { margin-top:.7rem; font-size:var(--t-xs); letter-spacing:.04em; color:var(--bone-muted); text-align:left; }
.on-bone .frame-cap { color: color-mix(in srgb, var(--ink) 60%, transparent); }

/* image frame (drop real photos here) */
.frame { position:relative; border:1px solid color-mix(in srgb,var(--pewter) 35%,transparent);
  border-radius:var(--radius); aspect-ratio:4/5; overflow:hidden; background:
  linear-gradient(140deg, var(--pine), var(--ink)); display:grid; place-items:center; text-align:center; }
.frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.frame--wide { aspect-ratio:16/10; }
.frame .ph { color:var(--bone-muted); font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase; padding:1.5rem; max-width:30ch; }
.frame .ph b { display:block; color:var(--champ); font-family:var(--display); font-size:1.1rem; letter-spacing:0; text-transform:none; margin-bottom:.3rem; }

/* ---------- Trust strip ---------- */
.trust { display:flex; flex-wrap:wrap; gap:1.2rem 2.6rem; align-items:center; }
.trust li { display:flex; align-items:center; gap:.6rem; font-size:var(--t-sm); }
.trust svg { width:18px; height:18px; color:var(--champ); flex:none; }

/* ---------- Reviews ---------- */
.review { padding:1.6rem 0; border-top:var(--rule); }
.review p { font-family:var(--display); font-size:var(--t-md); line-height:1.4; }
.review footer { margin-top:.9rem; font-size:var(--t-sm); color:var(--ink-muted); display:flex; align-items:center; gap:.6rem; }
.on-dark .review footer { color:var(--bone-muted); }
.stars { color:var(--champ); letter-spacing:.1em; font-size:.85rem; }

/* ---------- FAQ ---------- */
.faq details { border-top:var(--rule); padding:1.1rem 0; }
.faq details:last-child { border-bottom:var(--rule); }
.faq summary { display:flex; justify-content:space-between; gap:1rem; align-items:center;
  cursor:pointer; list-style:none; font-family:var(--display); font-size:var(--t-md); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .pm { flex:none; width:22px; height:22px; position:relative; }
.faq summary .pm::before,.faq summary .pm::after { content:""; position:absolute; background:var(--champ-deep);
  inset:50% 0 auto 0; height:1.5px; transition:transform .3s var(--ease); }
.on-dark .faq summary .pm::before,.on-dark .faq summary .pm::after { background:var(--champ); }
.faq summary .pm::after { transform:rotate(90deg); }
.faq details[open] summary .pm::after { transform:rotate(0); }
.faq details > div { padding-top:.8rem; }
.faq details p { max-width:68ch; }

/* ---------- CTA band ---------- */
.cta-band { text-align:center; }
.cta-band h2 { margin-bottom:.5em; }
.cta-band .hero-cta { justify-content:center; }

/* ---------- Footer ---------- */
.site-foot { background:var(--ink); color:var(--bone); position:relative; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-block:clamp(3rem,6vw,5rem); }
@media (max-width:860px){ .foot-grid { grid-template-columns:1fr; gap:2rem; } }
.foot-grid h4 { font-family:var(--sans); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.2em;
  color:var(--champ); font-weight:600; margin-bottom:1rem; }
.foot-grid a { color:var(--bone-muted); display:block; padding:.2rem 0; }
.foot-grid a:hover { color:var(--bone); }
.foot-brand { font-family:var(--display); font-size:1.5rem; }
.foot-brand p { color:var(--bone-muted); font-size:var(--t-sm); margin-top:.8rem; max-width:38ch; }
.foot-bottom { border-top:1px solid color-mix(in srgb,var(--pewter) 18%,transparent);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-block:1.5rem;
  font-size:var(--t-xs); color:var(--bone-muted); }

/* ---------- Contact ---------- */
.field { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.field label { font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:var(--ink-muted); }
.field input,.field select,.field textarea { font:inherit; padding:.8rem 1rem; border:1px solid color-mix(in srgb,var(--pewter) 55%,transparent);
  border-radius:var(--radius); background:white; color:var(--ink); }
.field input:focus,.field select:focus,.field textarea:focus { outline:2px solid var(--champ); outline-offset:1px; border-color:var(--champ); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:560px){ .field-row { grid-template-columns:1fr; } }

.form-status { margin-top:1rem; padding:.85rem 1.1rem; border-radius:var(--radius); border:1px solid transparent;
  font-size:var(--t-sm); line-height:1.45; }
.form-status--ok  { background:color-mix(in srgb,var(--pine) 10%,white); border-color:color-mix(in srgb,var(--pine) 35%,transparent); color:var(--pine); }
.form-status--err { background:color-mix(in srgb,#9B2C2C 8%,white); border-color:color-mix(in srgb,#9B2C2C 35%,transparent); color:#9B2C2C; }

.contact-card { border:var(--rule); border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.2rem); }
.contact-card dt { font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.18em; color:var(--champ-deep); font-weight:600; margin-top:1.2rem; }
.contact-card dt:first-child { margin-top:0; }
.contact-card dd { font-family:var(--display); font-size:var(--t-md); }

/* ---------- Blog ---------- */
.post-list { display:flex; flex-direction:column; }
.post-item { display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:baseline;
  padding:1.8rem 0; border-top:var(--rule); transition:padding-inline .3s var(--ease); }
.post-item:last-child { border-bottom:var(--rule); }
.post-item:hover { padding-inline:.6rem; }
.post-item .tag { font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.16em; color:var(--champ-deep); font-weight:600; }
.post-item h3 { font-size:var(--t-lg); }
.post-item .meta { font-size:var(--t-sm); color:var(--ink-muted); white-space:nowrap; }
@media (max-width:680px){ .post-item { grid-template-columns:1fr; gap:.5rem; } .post-item .meta{ white-space:normal; } }

.article { max-width:720px; margin-inline:auto; }
.article h2 { font-size:var(--t-lg); margin-block:1.6em .4em; }
.article h3 { font-size:var(--t-md); margin-block:1.2em .3em; }
.article p { margin-bottom:1.1em; }
.article ul.bul { margin:0 0 1.2em; display:flex; flex-direction:column; gap:.5rem; }
.article ul.bul li { padding-left:1.4rem; position:relative; }
.article ul.bul li::before { content:""; position:absolute; left:0; top:.7em; width:.5rem; height:1px; background:var(--champ-deep); }
.article .key { border-left:2px solid var(--champ); padding:1rem 0 1rem 1.4rem; margin:1.6em 0;
  font-family:var(--display); font-size:var(--t-md); line-height:1.4; }
.breadcrumb { font-size:var(--t-xs); letter-spacing:.06em; color:var(--ink-muted); margin-bottom:1.5rem; }
.breadcrumb a:hover { color:var(--champ-deep); }

/* ---------- Reveal animation (progressive enhancement only) ---------- */
/* Hidden state applies ONLY once JS confirms it is running (html.reveal-on).
   No-JS or failed-JS users always see content. */
html.reveal-on [data-reveal] { opacity:0; transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.reveal-on [data-reveal].in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.reveal-on [data-reveal]{ opacity:1; transform:none; } }

/* focus visibility */
:focus-visible { outline:2px solid var(--champ); outline-offset:2px; border-radius:2px; }