/* ============================================================
   RILEY MOYANO · FORT WORTH REAL ESTATE
   Editorial, photo-led, warm. Brand tokens locked in
   Admin/brand-direction.md. No build step, no framework.
   ============================================================ */

:root {
  /* Locked palette. Amend brand-direction.md before changing. */
  --blue:      #58778C;
  --bluegray:  #B4BDC2;
  --white:     #FFFFFF;
  --ink:       #293338;
  --copper:    #C3653C;

  --surface-alt:   #F7F9FA;
  --hairline:      #E3E8EB;
  --muted:         #6E797F;   /* 4.5:1 on white, safe for small text */
  --muted-on-dark: #B4BDC2;

  --serif: "Cormorant Garamond", Cormorant, Georgia, serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 34rem;
  --rule: 1px solid var(--hairline);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: clamp(1rem, 0.35vw + 0.94rem, 1.0625rem);
  line-height: 1.72;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; color: var(--blue); }
h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.15rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }

p + p { margin-top: 1.05em; }

.label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--copper);
}
.lede { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.62; color: var(--ink); }
.muted { color: var(--muted); }

/* copper hairline, the one recurring brand device */
.rule { width: 3.25rem; height: 2px; background: var(--copper); border: 0; margin: 1.4rem 0; }

/* ---------- layout ---------- */
.wrap { max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--measure); }
section { padding-block: clamp(4rem, 9vw, 8.5rem); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: var(--sans);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 1.05rem 2.1rem; text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
/* Every button resolves to copper on hover and press. Copper is the one
   interactive colour on the site. Note this is a transient state on bold,
   tracked, uppercase text: copper on white and white on copper both sit at
   4.0:1, which the brand doc reserves for display use. Acceptable here
   because it is a hover state on a large weighted label, not body copy. */
.btn-solid { background: var(--blue); color: #fff; border: 1px solid var(--blue); }
.btn-solid:hover, .btn-solid:active { background: var(--copper); border-color: var(--copper); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--bluegray); }
.btn-ghost:hover, .btn-ghost:active { border-color: var(--copper); color: #fff; background: var(--copper); }
.btn-light { background: #fff; color: var(--ink); border: 1px solid #fff; }
.btn-light:hover, .btn-light:active { background: var(--copper); color: #fff; border-color: var(--copper); }
.post-row:active h3 { color: var(--copper); }
.nav-links a:active { border-bottom-color: var(--copper); color: var(--copper); }

/* ---------- nav ---------- */
/* Transparent over the hero, then solid white once you scroll past it.
   script at the bottom of the page toggles .is-solid */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.05rem var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, padding .35s ease;
}
/* solid state is charcoal, so the white logo and white links carry straight
   through from the transparent state with no swap and no colour change */
.nav.is-solid {
  background: rgba(41,51,56,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255,255,255,.12);
}
.nav-logo { position: relative; }
.nav .logo-dark { display: none; }
.nav .nav-links a { color: #fff; text-shadow: 0 1px 12px rgba(41,51,56,.5); }
.nav.is-solid .nav-links a { text-shadow: none; }
.nav .nav-links a:hover { border-bottom-color: var(--copper); color: var(--copper); }
.nav .nav-links .is-cta { color: #fff; }
.nav.is-solid .nav-links .is-cta { color: #fff; opacity: .95; }
.nav.is-solid .nav-links .is-cta:hover { color: var(--copper); opacity: 1; }
.nav-logo { display: block; line-height: 0; }
.nav-logo img { width: clamp(11.5rem, 19vw, 15.5rem); height: auto; display: block; }

/* The footer has room the nav does not, so the logo runs noticeably larger
   there. This is the one place the wordmark is meant to be read rather than
   glanced at. */
.foot-logo { display: block; line-height: 0; }
.foot-logo img { width: 100%; max-width: 23rem; height: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; list-style: none; }
.nav-links a {
  font-size: .72rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--copper); }
.nav-links .is-cta { color: var(--blue); font-weight: 600; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(84vh, 780px); display: flex; align-items: flex-end;
  padding-block: clamp(3rem, 8vw, 6rem); overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Two scrims. The horizontal one keeps the text column readable no matter
   how bright the photo is behind it, so hero photos can be swapped freely
   without checking contrast every time. The vertical one seats the image. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(41,51,56,.74) 0%, rgba(41,51,56,.55) 34%, rgba(41,51,56,.10) 62%, rgba(41,51,56,0) 100%),
    linear-gradient(180deg, rgba(41,51,56,.34) 0%, rgba(41,51,56,.10) 40%, rgba(41,51,56,.55) 100%);
}
/* narrow screens put the headline over the busiest part of the photo,
   so the scrim gets heavier there */
@media (max-width: 47.99rem) {
  .hero::after {
    background: linear-gradient(180deg, rgba(41,51,56,.46) 0%, rgba(41,51,56,.44) 42%, rgba(41,51,56,.80) 100%);
  }
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero h1 { color: #fff; max-width: 15ch; }
/* story-led headline: two lines, so it runs a little smaller and wider */
.hero .hero-h1 { max-width: 22ch; font-size: clamp(2.15rem, 4.4vw, 3.9rem); line-height: 1.12; }
@media (max-width: 47.99rem) { .hero .hero-h1 br { display: none; } }
.hero .label { color: #fff; opacity: .92; max-width: none; margin: 0 0 1rem; font-size: .7rem; }
.hero p:not(.label) { color: #fff; max-width: 40ch; margin-top: 1.4rem; font-size: clamp(1.02rem,1.2vw,1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.1rem; }

/* ---------- editorial split ---------- */
.split { display: grid; gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.is-narrow-text { grid-template-columns: 1.05fr .95fr; }
  .split.is-reverse > :first-child { order: 2; }
}
/* is-equal: the photo matches the height of the text column beside it
   instead of running to its own natural aspect ratio */
.split.is-equal { align-items: stretch; }
.split.is-equal figure { display: flex; flex-direction: column; }
.split.is-equal figure img { flex: 1 1 auto; width: 100%; height: 100%; object-fit: cover; min-height: 18rem; }

.split figure { position: relative; }
.split figcaption {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-top: .7rem;
}

/* ---------- full-bleed band ---------- */
.band { position: relative; }
.band img { width: 100%; height: clamp(20rem, 46vw, 34rem); object-fit: cover; }

/* ---------- neighborhoods ---------- */
.hoods { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .hoods { grid-template-columns: repeat(3, 1fr); } }
.hood img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.hood h3 { margin-top: 1rem; font-size: 1.45rem; }
.hood p { margin-top: .4rem; font-size: .93rem; color: var(--muted); line-height: 1.62; }

/* ---------- interior page heads ---------- */
.nav-static { position: sticky; }
.page-head { padding-top: clamp(7rem, 12vw, 10rem); padding-bottom: clamp(2rem, 4vw, 3.4rem); }
.page-head h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); max-width: 18ch; }
.page-head .lede { margin-top: 1.2rem; }
.post-meta { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .9rem; }

/* featured image at the top of a post */
.post-hero { margin: 0 0 .6rem; }
.post-hero img { width: 100%; height: auto; }
/* A portrait hero at full column width comes out over a thousand pixels tall
   and pushes the article off the screen. Cap the height and centre it, so a
   vertical phone photo sits in the column instead of swallowing it. */
.post-hero.is-portrait img { width: auto; max-width: 100%; max-height: 38rem;
  margin-inline: auto; display: block; }
.post-hero figcaption { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-top: .7rem; }
.post figure { margin: 1.8rem 0; }
.post figure img { width: 100%; height: auto; }
.post figcaption { font-size: .8rem; color: var(--muted); margin-top: .6rem; font-style: italic; }

/* ---------- long-form article body ---------- */
.post h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 2.4rem 0 .8rem; }
.post h3 { font-size: 1.3rem; margin: 1.8rem 0 .6rem; }
.post p { margin-bottom: 1.05em; }
.post ul, .post ol { margin: 0 0 1.2em 1.2em; display: grid; gap: .4rem; }
.post a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.post a:hover { color: var(--copper); }
.post strong { color: var(--ink); }
.post blockquote { border-left: 2px solid var(--copper); padding-left: 1.2rem; margin: 1.6rem 0;
  font-family: var(--serif); font-size: 1.25rem; color: var(--blue); }

/* the twenty without photos yet: a clean even text grid, no holes */
.hoods-list { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 40rem) { .hoods-list { grid-template-columns: repeat(2, 1fr); column-gap: 2.6rem; } }
@media (min-width: 62rem) { .hoods-list { grid-template-columns: repeat(3, 1fr); column-gap: 2.6rem; } }
.hood-noimg { border-top: 1px solid var(--hairline); padding: 1.25rem 0 1.35rem; }
.hood-noimg h3 { margin: 0 0 .35rem; font-size: 1.32rem; }
.hood-noimg p { font-size: .9rem; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---------- reviews ---------- */
.reviews { background: var(--surface-alt); }
.review-grid { display: grid; gap: 1.6rem; margin-top: 2.6rem; }
@media (min-width: 52rem) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
/* single review: a featured pull-quote, not a lonely card */
.review-lead { border-left: 3px solid var(--copper); padding: .4rem 0 .4rem 1.7rem; margin-top: 1.6rem; }
.review-lead p { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.3; color: var(--blue); }
.review-lead cite { display: block; margin-top: 1.2rem; font-style: normal;
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }

.review { background: #fff; border-top: 2px solid var(--copper); padding: 1.9rem 1.6rem 1.5rem; }
.review p { font-family: var(--serif); font-size: 1.24rem; line-height: 1.45; color: var(--ink); }
.review cite { display: block; margin-top: 1.1rem; font-style: normal;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- writing list ---------- */
.posts { border-top: var(--rule); }
.post-row {
  display: grid; gap: .35rem 2rem; padding-block: 1.6rem;
  border-bottom: var(--rule); text-decoration: none;
}
@media (min-width: 48rem) { .post-row { grid-template-columns: 8rem 1fr; align-items: baseline; } }
.post-row:hover h3 { color: var(--copper); }
.post-row time { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.post-row h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); transition: color .2s ease; }
.post-row p { font-size: .95rem; color: var(--muted); margin-top: .3rem; }

/* ---------- contact panel ---------- */
.contact { background: var(--ink); color: #fff; }
.contact h2 { color: #fff; }
.contact .label { color: var(--copper); }
.contact p { color: var(--muted-on-dark); }

/* Modern Texas Blue variant. Copper measures 1.18:1 on this blue and blue gray
   measures 2.48:1, so both are unusable here. Everything is white and the
   hierarchy comes from size and weight instead. This is the brand doc's own
   rule playing out, not a workaround. */
.contact.is-blue { background: var(--blue); position: relative; }
/* on the contact page the panel is the whole page, so it needs to clear the
   fixed nav and carry a little more air */
.contact.is-page { padding-top: clamp(8rem, 14vw, 12rem); min-height: 82vh; }

/* Copper on this blue is 1.18:1, so it can never be type or a hairline here.
   As large solid shapes it reads fine, because the hue difference carries it
   even though the luminance difference does not. Blocks and hovers only. */
.contact-edge { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--copper); }
.contact.is-blue .label { color: #fff; opacity: .85; }
.contact.is-blue .rule { background: var(--copper); height: 4px; width: 4.2rem; opacity: 1; }
.contact.is-blue .contact-aside { border-left: 3px solid var(--copper); }
.contact.is-blue .form input:focus,
.contact.is-blue .form select:focus,
.contact.is-blue .form textarea:focus { border-color: var(--copper); }
/* the send button goes copper on hover, same as every other button on the site */
.contact.is-blue .btn-light:hover,
.contact.is-blue .btn-light:active { background: var(--copper); color: #fff; border-color: var(--copper); }
.contact.is-blue p { color: #fff; opacity: .92; }
.contact.is-blue .form label { color: #fff; opacity: .8; }
.contact.is-blue .form input,
.contact.is-blue .form select,
.contact.is-blue .form textarea {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.34);
}
.contact.is-blue .form input:focus,
.contact.is-blue .form select:focus,
.contact.is-blue .form textarea:focus { border-color: #fff; }
.contact.is-blue .btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.form { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 40rem) { .form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }
.form label { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-on-dark); margin-bottom: .45rem; }
.form input, .form select, .form textarea {
  width: 100%; font-family: var(--sans); font-size: .97rem; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22);
  padding: .85rem .95rem; border-radius: 0;
}
.form textarea { min-height: 8rem; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--copper); }
.form option { color: var(--ink); }
.contact-aside { border-left: 2px solid var(--copper); padding-left: 1.4rem; }
.contact-aside a { color: #fff; }

/* ---------- footer ---------- */
.foot { background: var(--surface-alt); border-top: var(--rule); padding-block: 3.2rem 2.2rem; font-size: .87rem; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h4 { font-family: var(--sans); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper); margin-bottom: .8rem; font-weight: 600; }
.foot ul { list-style: none; display: grid; gap: .45rem; }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { color: var(--copper); }
.foot-legal { margin-top: 2.6rem; padding-top: 1.4rem; border-top: var(--rule);
  font-size: .75rem; color: var(--muted); line-height: 1.7; }

/* ---------- social icons ---------- */
/* .foot ul is a grid, so this has to reset to flex or the icons stack. */
.foot ul.social { display: flex; flex-wrap: wrap; gap: 1.05rem; margin-top: 1.25rem; }
.social a { display: block; line-height: 0; color: var(--muted); }
.social svg { width: 1.35rem; height: 1.35rem; fill: currentColor; display: block; }
.social a:hover, .social a:focus-visible { color: var(--copper); }
.social a:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; border-radius: 2px; }

/* ---------- scroll reveals ---------- */
/* Gated behind .js so that if the script never runs, every section is simply
   visible. Content that depends on JavaScript to appear is content that can
   disappear, and this page is somebody's first impression of Riley. */
.js .reveal { opacity: 0; transform: translateY(18px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Staggered children, for grids of cards. Capped at 6 so a long list never
   leaves the last card waiting a noticeable beat behind the first. */
.js .reveal-group > * { opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.js .reveal-group.is-in > * { opacity: 1; transform: none; }
.js .reveal-group.is-in > *:nth-child(2) { transition-delay: .07s; }
.js .reveal-group.is-in > *:nth-child(3) { transition-delay: .14s; }
.js .reveal-group.is-in > *:nth-child(4) { transition-delay: .21s; }
.js .reveal-group.is-in > *:nth-child(5) { transition-delay: .28s; }
.js .reveal-group.is-in > *:nth-child(n+6) { transition-delay: .35s; }

@media (max-width: 47.99rem) { .nav-links .hide-sm { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Someone who has asked their machine for less motion gets none of this. */
  .js .reveal, .js .reveal-group > * { opacity: 1; transform: none; transition: none; }
}