/*
Theme Name: Utah Estate Photography
Theme URI: https://utahestate.photo
Author: Utah Estate Photography
Description: Editorial, hard-edged marketing theme for Utah Estate Photography — a Utah County real-estate & architectural photography studio. Ships a Property custom post type for single-listing showcases. "True color" positioning; flat, border-driven design.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: utah-estate
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --paper:#faf8f3;        /* page background */
  --panel:#f3efe6;        /* tinted panel */
  --panel-hover:#f6f2ea;  /* pricing row hover */
  --ink:#2a2622;          /* primary text */
  --body:#3a352f;         /* muted-dark body */
  --muted:#6b6359;        /* muted text */
  --label:#8c8377;        /* label text */
  --faint:#a89f92;        /* faint placeholder caption */
  --faint-2:#b3aa9d;      /* input placeholder */

  --accent:#6f7a5a;       /* sage (default). clay #9c6b4d · taupe #7a6f63 · deep green #3f4a44 */

  --hair:rgba(42,38,34,.1);
  --hair-12:rgba(42,38,34,.12);
  --hair-16:rgba(42,38,34,.16);
  --hair-25:rgba(42,38,34,.25);

  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,monospace;

  --pad-x:56px;           /* horizontal section padding */
  --col:1180px;           /* page column */

  --stripe-lg:repeating-linear-gradient(135deg,#e7e1d4 0 13px,#eee8dd 13px 26px);
  --stripe-sm:repeating-linear-gradient(135deg,#e9e3d6 0 12px,#f0eae0 12px 24px);
}

/* ============================================================
   Reset / base
   ============================================================ */
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* The centered page column */
.site-wrap{
  width:100%;
  max-width:var(--col);
  margin:0 auto;
  background:var(--paper);
}

/* Hairline helpers */
.bd-top{border-top:1px solid var(--hair)}
.bd-bottom{border-bottom:1px solid var(--hair)}

/* Generic typographic utilities mirrored from the references */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 22px;
}
.label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--label);
  margin:0 0 18px;
}
.lead{
  font-family:var(--font-display);
  font-weight:400;
  font-size:27px;
  line-height:1.5;
  color:var(--body);
  margin:0 0 26px;
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:34px var(--pad-x) 26px;
  border-bottom:1px solid var(--hair);
}
.wordmark{text-decoration:none;color:inherit;display:block}
.wordmark__name{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:34px;
  line-height:.95;
  letter-spacing:.3px;
}
.wordmark__sub{
  display:block;
  font-size:10.5px;
  letter-spacing:5px;
  text-transform:uppercase;
  color:var(--label);
  margin-top:7px;
}
.nav{
  display:flex;
  gap:30px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.nav a{color:var(--muted);text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--ink)}
.nav a.is-active{color:var(--accent)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:30px var(--pad-x);
  border-top:1px solid var(--hair);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.8px;
  color:var(--label);
}

/* ============================================================
   Generic section frame
   ============================================================ */
.section{padding:60px var(--pad-x)}

/* ============================================================
   Image placeholders (until real photography is attached)
   ============================================================ */
.ph{
  position:relative;
  overflow:hidden;
  background:var(--stripe-lg);
}
.ph--tile{background:var(--stripe-sm)}
/* Real photo fills and centre-crops the box; sits beneath captions/overlays. */
.ph__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.ph__cap{
  position:absolute;
  z-index:2;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
}

/* Over real photography, captions need contrast: a soft bottom scrim + light,
   shadowed text. Placeholders (no .has-img) keep the muted-on-beige look. */
.ph.has-img::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:45%;
  min-height:70px;
  background:linear-gradient(to top, rgba(18,16,14,.62), rgba(18,16,14,0));
  z-index:1;
  pointer-events:none;
}
.ph.has-img .ph__cap,
.ph.has-img .ph__cap--faint{
  color:#faf8f3;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.ph__cap--faint{color:var(--faint);font-size:10px}

/* ============================================================
   Home — masthead
   ============================================================ */
.masthead{
  padding:76px var(--pad-x) 60px;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:60px;
  align-items:end;
  border-bottom:1px solid var(--hair);
}
.masthead__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:68px;
  line-height:1.02;
  margin:0;
  letter-spacing:.4px;
  text-wrap:balance;
}
.masthead__blurb{
  font-size:14px;
  line-height:1.85;
  margin:0 0 20px;
  color:var(--muted);
}
.masthead__meta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1px;
  color:var(--label);
}

/* ============================================================
   Home — services
   ============================================================ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
}
.service{border-top:2px solid var(--ink);padding-top:20px}
.service__num{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--accent);
  margin-bottom:14px;
}
.service__title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:28px;
  line-height:1.05;
  margin:0 0 12px;
}
.service__desc{font-size:13.5px;line-height:1.8;margin:0;color:var(--muted)}

/* ============================================================
   Section heading row (Selected Work / Selected Frames)
   ============================================================ */
.head-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:30px;
}
.head-row__title{font-family:var(--font-display);font-weight:500;font-size:32px;margin:0}
.head-row__meta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--label);
}

/* ============================================================
   Home — featured work card
   ============================================================ */
.work-card{
  text-decoration:none;
  color:inherit;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  border:1px solid var(--hair);
}
.work-card__img{height:480px;overflow:hidden;transition:filter .3s}
.work-card__img .ph__cap{left:24px;bottom:20px}
.work-card:hover .work-card__img{filter:brightness(.94)}
.work-card__tag{
  position:absolute;
  left:24px;top:22px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--paper);
  padding:5px 10px;
}
.work-card__body{
  padding:52px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--panel);
}
.work-card__loc{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--label);
  margin-bottom:14px;
}
.work-card__name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:46px;
  line-height:1;
  margin:0 0 18px;
}
.work-card:hover .work-card__name{
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.work-card__desc{font-size:13.5px;line-height:1.75;margin:0 0 26px;color:var(--muted)}
.work-card__cta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1px;
  color:var(--accent);
}

/* ============================================================
   Two-column divided panels (studio+contact, includes/notes)
   ============================================================ */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--hair);
}
.split__cell{padding:56px}
.split__cell + .split__cell{border-left:1px solid var(--hair)}
.split__statement{
  font-family:var(--font-display);
  font-weight:400;
  font-size:24px;
  line-height:1.5;
  margin:0;
  color:var(--body);
}
.maillink{
  font-family:var(--font-display);
  font-size:30px;
  color:var(--ink);
  text-decoration:none;
}
.split__sub{font-size:13.5px;color:var(--muted);margin-top:10px}

/* ============================================================
   Single Property
   ============================================================ */
.hero{height:600px}
.hero__vignette{
  position:absolute;inset:0;
  z-index:1;
  box-shadow:inset 0 -130px 130px -95px rgba(42,38,34,.35);
  pointer-events:none;
}
.hero .ph__cap{left:30px;bottom:24px}

/* Home page hero — shown only when the Home page has a Featured Image. */
.home-hero{height:clamp(360px,52vh,600px)}

/* Hero slideshow — crossfade + Ken Burns across all gallery frames. */
.hero--show{position:relative}
.hero__slides{position:absolute;inset:0;overflow:hidden}
.hero__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.4s ease;
}
.hero__slide.is-active{opacity:1}
.hero__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  will-change:transform;
  animation:uep-kenburns 18s ease-in-out infinite alternate;
}
/* Alternate the pan direction frame-to-frame so it never feels mechanical. */
.hero__slide:nth-child(even) .hero__img{animation-name:uep-kenburns-alt}
@keyframes uep-kenburns{
  from{transform:scale(1.03) translate(0,0)}
  to{transform:scale(1.16) translate(-2.2%,-1.6%)}
}
@keyframes uep-kenburns-alt{
  from{transform:scale(1.16) translate(-1.8%,1.4%)}
  to{transform:scale(1.03) translate(1.8%,-1%)}
}
@media (prefers-reduced-motion: reduce){
  .hero__img{animation:none}
  .hero__slide{transition:none}
}
.hero__counter{
  position:absolute;right:30px;top:26px;
  z-index:2;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:1.5px;
  color:var(--muted);
}
/* Top scrim + light counter when the hero holds a real photo. */
.hero.has-img::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:120px;
  background:linear-gradient(to bottom, rgba(18,16,14,.45), rgba(18,16,14,0));
  z-index:1;
  pointer-events:none;
}
.hero.has-img .hero__counter{
  color:#faf8f3;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.prop-title{
  padding:52px var(--pad-x) 44px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:44px;
}
.prop-title h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:84px;
  line-height:.96;
  margin:0;
  letter-spacing:.5px;
}
.prop-title__addr{
  text-align:right;
  font-size:13.5px;
  line-height:1.7;
  color:var(--muted);
  white-space:nowrap;
}
.prop-body{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:60px;
  padding:46px var(--pad-x) 60px;
  border-top:1px solid var(--hair);
}
.prop-body__intro{
  font-family:var(--font-display);
  font-weight:400;
  font-size:27px;
  line-height:1.5;
  color:var(--body);
}
.prop-body__intro p{margin:0 0 26px}
.prop-body__intro p:last-child{margin-bottom:0}
.prop-body__para{font-size:14px;line-height:1.85;margin:0;color:var(--muted);max-width:48ch}
.info{border-top:2px solid var(--ink);padding-top:22px}
.info__row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:12px 0;
  border-bottom:1px solid var(--hair);
}
.info__key{font-size:13px;color:var(--label)}
.info__val{font-family:var(--font-display);font-size:18px;text-align:right}
.info__coords{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:20px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.5px;
  color:var(--muted);
}
.info__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}

.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.gallery__tile{height:250px;transition:filter .25s}
.gallery__tile:hover{filter:brightness(.95)}
.gallery__tile .ph__cap{left:15px;bottom:13px}
/* When a tile is a lightbox trigger it's a <button> — strip native chrome. */
button.gallery__tile{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
button.gallery__tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================
   Lightbox (Selected Frames)
   ============================================================ */
.uep-lb{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(42,38,34,.92);
  opacity:0;
  transition:opacity .25s ease;
}
.uep-lb.is-open{opacity:1}
.uep-lb[hidden]{display:none}
.uep-lb__stage{
  margin:0;
  max-width:90vw;
  max-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.uep-lb__img{
  max-width:90vw;
  max-height:82vh;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.uep-lb__cap{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#d9d2c6;
}
.uep-lb__close,
.uep-lb__nav{
  position:absolute;
  background:transparent;
  border:0;
  color:#faf8f3;
  cursor:pointer;
  line-height:1;
  opacity:.78;
  transition:opacity .2s;
  font-family:var(--font-display);
}
.uep-lb__close:hover,
.uep-lb__nav:hover{opacity:1}
.uep-lb__close{
  top:26px;
  right:34px;
  font-size:40px;
}
.uep-lb__nav{
  top:50%;
  transform:translateY(-50%);
  font-size:64px;
  padding:0 26px;
  user-select:none;
}
.uep-lb__prev{left:8px}
.uep-lb__next{right:8px}
.uep-lb__count{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  color:#b3aa9d;
}
@media (max-width:680px){
  .uep-lb__nav{font-size:44px;padding:0 12px}
  .uep-lb__close{top:16px;right:18px}
}

/* ============================================================
   Contact / About — form
   ============================================================ */
.about-masthead{padding:76px var(--pad-x) 60px;border-bottom:1px solid var(--hair)}
.about-masthead h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:64px;
  line-height:1.04;
  margin:0;
  max-width:16ch;
  letter-spacing:.4px;
  text-wrap:balance;
}
.portrait{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:60px;
  padding:60px var(--pad-x);
  border-bottom:1px solid var(--hair);
  align-items:start;
}
.portrait__img{height:480px}
.portrait__img .ph__cap{left:18px;bottom:14px}
.portrait__para{font-size:14px;line-height:1.9;margin:0 0 18px;color:var(--muted)}
.portrait__para:last-child{margin-bottom:0}

.approach{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--hair);
}
.approach__cell{padding:40px 44px}
.approach__cell + .approach__cell{border-left:1px solid var(--hair)}
.approach__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--accent);
  margin-bottom:12px;
}
.approach__desc{font-size:13.5px;line-height:1.8;margin:0;color:var(--muted)}

.contact{display:grid;grid-template-columns:1fr 1.2fr}
.contact__details{padding:64px var(--pad-x);border-right:1px solid var(--hair)}
.contact__details h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:40px;
  line-height:1;
  margin:0 0 32px;
}
.contact__intro{font-size:14px;line-height:1.85;margin:0 0 40px;color:var(--muted);max-width:34ch}
.detail{margin-bottom:26px}
.detail:last-child{margin-bottom:0}
.detail__label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--label);
  margin-bottom:8px;
}
.detail__val{font-family:var(--font-display);font-size:24px}
.detail__val a{color:var(--ink);text-decoration:none}
.detail__area{font-size:14px;line-height:1.7;color:var(--muted)}

.form{padding:64px var(--pad-x)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:30px}
.field{margin-bottom:30px}
.field--gap{margin-bottom:36px}
.field__label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--label);
  margin-bottom:6px;
}
.field input,.field textarea{
  width:100%;
  border:0;
  border-bottom:1px solid var(--hair-25);
  background:transparent;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--ink);
  padding:10px 0;
  outline:none;
  transition:border-color .2s;
  resize:none;
}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint-2)}
.form__note{font-size:13px;color:var(--muted);margin:0 0 30px}
.form__note--ok{color:var(--accent)}
.form__note--err{color:#9c4d4d}

/* Shared button (form submit + CTA) */
.btn{
  display:inline-block;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:16px 36px;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s,color .2s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--lg{padding:18px 40px}

/* ============================================================
   Pricing
   ============================================================ */
.matrix{border:1px solid var(--hair-16)}
.matrix__head,.prow{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr}
.matrix__head{background:var(--panel);border-bottom:1px solid var(--hair-16)}
.matrix__head-pkg{
  padding:22px 28px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--label);
}
.matrix__head-sf{
  padding:22px 24px;
  text-align:center;
  border-left:1px solid var(--hair-12);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
}
.prow{border-bottom:1px solid var(--hair-12);align-items:center;transition:background .2s}
.prow:last-child{border-bottom:0}
.prow:hover{background:var(--panel-hover)}
.prow__pkg{padding:30px 28px}
.prow__name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:27px;
  line-height:1;
  margin:0 0 8px;
}
.prow__sub{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.5px;
  color:var(--label);
}
.prow__price{
  padding:30px 24px;
  text-align:center;
  border-left:1px solid var(--hair);
  font-family:var(--font-display);
  font-size:34px;
}
.tag-complete{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--accent);
  padding:3px 7px;
}
.prow__name-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.prow__name-row .prow__name{margin:0}

.notes-list{display:flex;flex-direction:column;gap:14px}
.notes-list__item{display:flex;gap:14px;font-size:14px;color:var(--body)}
.notes-list__dash{font-family:var(--font-mono);color:var(--accent)}

.cta-band{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  padding:56px var(--pad-x);
  border-top:1px solid var(--hair);
}
.cta-band h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:38px;
  line-height:1;
  margin:0 0 10px;
}
.cta-band p{font-size:14px;line-height:1.7;margin:0;color:var(--muted)}
.cta-band .btn{flex:none}

/* ============================================================
   Generic page / posts fallback
   ============================================================ */
.prose{padding:60px var(--pad-x);max-width:760px}
.prose h1{font-family:var(--font-display);font-weight:500;font-size:48px;line-height:1.05;margin:0 0 24px}
.prose h2{font-family:var(--font-display);font-weight:500;font-size:32px;margin:40px 0 16px}
.prose p,.prose li{font-size:15px;line-height:1.85;color:var(--body)}
.prose a{color:var(--accent)}

/* ============================================================
   Responsive — collapse multi-column grids below the column width
   ============================================================ */
@media (max-width:900px){
  :root{--pad-x:32px}
  .masthead,
  .prop-body,
  .portrait,
  .contact{grid-template-columns:1fr;gap:32px}
  .split,
  .approach{grid-template-columns:1fr}
  .split__cell + .split__cell{border-left:0;border-top:1px solid var(--hair)}
  .approach__cell + .approach__cell{border-left:0;border-top:1px solid var(--hair)}
  .work-card{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr;gap:32px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .contact__details{border-right:0;border-bottom:1px solid var(--hair)}
  .masthead__title{font-size:52px}
  .prop-title{flex-direction:column;align-items:flex-start;gap:20px}
  .prop-title h1{font-size:60px}
  .prop-title__addr{text-align:left}
  .about-masthead h1{font-size:48px}
}

@media (max-width:680px){
  .site-header{flex-direction:column;align-items:flex-start;gap:18px}
  .nav{flex-wrap:wrap;gap:18px}
  .site-footer{flex-direction:column;gap:10px;align-items:flex-start}
  .form__row{grid-template-columns:1fr;gap:0}
  .gallery{grid-template-columns:1fr}
  .cta-band{flex-direction:column;align-items:flex-start;gap:24px}

  /* Stack the pricing matrix into per-package cards */
  .matrix__head{display:none}
  .prow{grid-template-columns:1fr;border-bottom:1px solid var(--hair-16)}
  .prow__price{
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:left;
    border-left:0;
    border-top:1px solid var(--hair-12);
    padding:16px 28px;
    font-size:28px;
  }
  .prow__price::before{
    content:attr(data-sf);
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--label);
  }
  .masthead__title{font-size:42px}
  .prop-title h1{font-size:46px}
}