/* =========================================================
   scottsuperfine.com
   Complete custom CSS. This is the only block you need.
   Paste into Appearance > Additional CSS, replacing
   anything already there.
   ========================================================= */

/* ---- tokens ---- */
:root{
  --ink:#181D24;
  --ink-deep:#111419;
  --plaster:#F2ECE4;
  --stone:#E3DAD0;
  --hairline:#D6CDC2;
  --walnut:#A27D61;
  --walnut-lift:#C09A7C;
  --text:#4A4E55;
  --muted:#8C877F;
}

/* ---- eyebrow label, used above every section heading ---- */
.sf-eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--walnut);
  margin-bottom:18px;
}
.sf-hero .sf-eyebrow,
.sf-fw .sf-eyebrow,
.sf-sunday .sf-eyebrow{color:var(--walnut-lift)}

/* ---- hero ---- */
.sf-hero h1{font-size:clamp(34px,8.4vw,52px);line-height:1.12;color:#fff}
.sf-hero .sf-proof{
  margin-top:38px;
  padding-top:20px;
  border-top:1px solid rgba(162,125,97,.5);
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---- the three doors ---- */
.sf-doors .sf-door{
  border-bottom:1px solid var(--hairline);
  position:relative;
  transition:.2s ease;
}
.sf-doors .sf-door:first-of-type{border-top:1px solid var(--hairline)}
.sf-doors .sf-door::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  height:2px;
  width:0;
  background:var(--walnut);
  transition:width .3s ease;
}
.sf-doors .sf-door:hover::before{width:100%}
.sf-doors .sf-when{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.sf-doors .sf-said{
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(24px,6vw,30px);
  line-height:1.15;
  color:var(--ink);
}
.sf-doors .sf-go{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  border-bottom:2px solid var(--walnut);
  padding-bottom:2px;
}

/* ---- framework ---- */
.sf-fw .sf-item{border-top:1px solid rgba(192,154,124,.5);padding-top:18px}
.sf-fw .sf-item h3{color:var(--walnut-lift);font-size:24px;margin-bottom:8px}
.sf-fw .sf-def{
  border-left:2px solid var(--walnut);
  padding:4px 0 4px 20px;
  color:rgba(255,255,255,.9);
  max-width:64ch;
}

/* ---- journal spec list ---- */
.sf-journal .sf-specs{list-style:none;margin:22px 0 26px;border-top:1px solid #CBBFB1;padding:0}
.sf-journal .sf-specs li{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:11px 0;
  border-bottom:1px solid #CBBFB1;
  font-size:14.5px;
  color:var(--text);
}
.sf-journal .sf-price{font-family:"Playfair Display",Georgia,serif;font-size:30px;margin-bottom:20px}

/* ---- accessibility floor ---- */
a:focus-visible,button:focus-visible{outline:2px solid var(--walnut);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* =========================================================
   Home v2 block adjustments
   ========================================================= */

/* Sections need less padding on a phone than on a desktop.
   The block markup sets 72px; this pulls it back on mobile. */
@media (max-width:781px){
  .sf-hero, .sf-doors, .sf-fw, .sf-journal, .sf-about, .sf-sunday{
    padding-top:48px !important;
    padding-bottom:48px !important;
  }
}

/* Doors: the markup uses column blocks, so the hairline
   lives on the group rather than a table row. */
.sf-doors .sf-door{
  border-bottom:1px solid var(--hairline);
}
.sf-doors .sf-door:first-of-type{
  border-top:1px solid var(--hairline);
}
.sf-doors .sf-door .wp-block-columns{
  margin-bottom:0;
}
.sf-doors .sf-door p{
  margin-top:0;
  margin-bottom:8px;
}
.sf-doors .sf-door p:last-child{
  margin-bottom:0;
}
.sf-doors .sf-go a{
  text-decoration:none;
}

/* Framework columns: the top rule sits on the column,
   not a separate wrapper. */
.sf-fw .sf-item{
  border-top:1px solid rgba(192,154,124,.5);
  padding-top:18px;
}
.sf-fw .sf-item h3{
  margin-top:0;
}

/* Journal spec list, rendered from a custom HTML block. */
.sf-journal .sf-specs{
  list-style:none;
  margin:22px 0 26px;
  padding:0;
  border-top:1px solid #CBBFB1;
}
.sf-journal .sf-specs li{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:11px 0;
  border-bottom:1px solid #CBBFB1;
  font-size:14.5px;
  color:var(--text);
}
.sf-journal .sf-specs li span:last-child{
  color:var(--ink);
  font-weight:500;
  text-align:right;
}

/* Hero photo: crop rather than letterbox. */
.sf-hero .wp-block-image img{
  width:100%;
  max-height:520px;
  object-fit:cover;
  object-position:center 18%;
}

/* About photo: small square. */
.sf-about .wp-block-image img{
  width:150px;
  height:150px;
  object-fit:cover;
  object-position:center 20%;
  border-radius:2px;
}

/* Kadence adds a max width to content inside constrained
   groups. Let the bands run edge to edge. */
.sf-hero, .sf-doors, .sf-fw, .sf-journal, .sf-about, .sf-sunday{
  max-width:100% !important;
}