:root{
    --bone:#FAF7F2; --greige:#EDE7DE; --espresso:#2B2520; --forest:#1F3A31;
    --brass:#A98A5C; --brass-text:#7E633D; --sand:#C9A874; --muted:#554E46; --line:#DCD4C8; --white:#fff;
    --serif:'Cormorant Garamond',Georgia,serif;
    --sans:'Jost','Futura','Century Gothic','Avenir Next',Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:var(--sans);color:var(--espresso);background:var(--bone);line-height:1.7;font-weight:400}
  .wrap{max-width:1100px;margin:0 auto;padding:0 32px}
  .narrow{max-width:720px;margin:0 auto}
  a{color:inherit}
  h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:.01em;line-height:1.15}
  .label{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-text);font-weight:500}

  /* NAV */
  .nav{position:absolute;top:0;left:0;right:0;z-index:5;padding:26px 0}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between}
  .nav .mark{display:flex;align-items:center;gap:11px;text-decoration:none}
  .nav .mark .kh{flex:none}
  .nav .mark .e,.nav .mark .n{display:block}
  .nav .mark .e{font-size:7.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--sand);line-height:1}
  .nav .mark .n{font-family:var(--serif);font-size:23px;color:#F3ECE0;line-height:1.1;letter-spacing:.01em}
  .nav .links{display:flex;gap:26px;align-items:center}
  .nav .links a{color:rgba(255,255,255,.90);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
  .nav .links a:hover{color:#fff}
  .nav .lang a{border:1px solid rgba(255,255,255,.6);padding:4px 9px;font-size:10px;letter-spacing:.14em}
  .nav .lang a.on{background:#fff;color:var(--espresso);border-color:#fff}
  @media(max-width:820px){.nav .links{gap:14px}.nav .links a{font-size:10px;letter-spacing:.12em}}

  /* HERO full bleed */
  .hero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;
        background:var(--forest) url('/lifestyle-1.jpg') center 55%/cover no-repeat}
  .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,30,26,.62),rgba(22,30,26,.50) 45%,rgba(22,30,26,.78))}
  .hero .inner{position:relative;z-index:2;color:#fff;padding:120px 32px 90px;max-width:900px}
  .hero .label{color:rgba(255,255,255,.86);margin-bottom:26px;display:block}
  .hero h1{font-size:clamp(38px,6vw,72px);font-weight:400;margin-bottom:24px}
  .hero h1 em{font-style:italic;color:#E9DFCB}
  .hero p{font-size:17px;color:rgba(255,255,255,.93);max-width:600px;margin:0 auto 38px}
  .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .btn{display:inline-block;padding:16px 34px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:.2s}
  .btn-solid{background:#8A6E45;color:#fff;border:1px solid #8A6E45}
  .btn-solid:hover{background:#73593A;border-color:#73593A}
  .btn-line{border:1px solid rgba(255,255,255,.78);color:#fff}
  .btn-line:hover{background:rgba(255,255,255,.12)}

  /* SECTIONS */
  .sec{padding:110px 0}
  .sec-tight{padding:80px 0}
  .center{text-align:center}
  .rule{width:54px;height:1px;background:var(--brass);margin:22px auto 0}
  h2.big{font-size:clamp(30px,4vw,46px);font-weight:400}
  .lede{font-size:18px;color:var(--muted);max-width:640px;margin:22px auto 0;font-weight:400}

  /* STATEMENT */
  .statement{background:var(--greige)}
  .statement blockquote{font-family:var(--serif);font-size:clamp(24px,3.2vw,38px);line-height:1.4;font-weight:400;text-align:center;max-width:860px;margin:0 auto;font-style:italic}
  .statement .attrib{margin-top:26px;text-align:center}

  /* PILLARS */
  .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:56px;border-top:1px solid var(--line)}
  .pillar{padding:34px 34px 34px 0;border-bottom:1px solid var(--line)}
  .pillar:nth-child(odd){border-right:1px solid var(--line);padding-right:44px}
  .pillar:nth-child(even){padding-left:44px}
  .pillar .n{font-family:var(--serif);font-size:15px;color:var(--brass-text);letter-spacing:.2em}
  .pillar h3{font-size:24px;margin:8px 0 10px}
  .pillar p{font-size:15.5px;color:var(--muted)}
  @media(max-width:760px){.pillars{grid-template-columns:1fr}.pillar,.pillar:nth-child(odd),.pillar:nth-child(even){padding:28px 0;border-right:none}}

  /* LISTINGS full bleed split */
  .listing{display:grid;grid-template-columns:1fr 1fr;min-height:520px}
  .listing .img{background:var(--greige) center/cover no-repeat}
  .listing .copy{display:flex;flex-direction:column;justify-content:center;padding:70px 64px;background:var(--bone)}
  .listing.flip .img{order:2}
  .listing .status{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-text);margin-bottom:16px}
  .listing h3{font-size:clamp(28px,3.4vw,40px);font-weight:400;margin-bottom:8px}
  .listing .meta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
  .listing p{font-size:15px;color:var(--muted);margin-bottom:26px}
  .listing a.more{font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--espresso);border-bottom:1px solid var(--brass);padding-bottom:5px;align-self:flex-start}
  @media(max-width:860px){.listing{grid-template-columns:1fr}.listing .img{min-height:320px;order:1 !important}.listing .copy{padding:48px 32px}}

  /* HEIGHTS band */
  .band{background:var(--forest);color:#fff;text-align:center;padding:90px 0}
  .band .label{color:rgba(233,223,203,.92)}
  .band h2{font-size:clamp(28px,3.6vw,42px);font-weight:400;margin:18px 0 16px;color:#fff}
  .band p{color:rgba(255,255,255,.90);max-width:620px;margin:0 auto 32px;font-size:16px}

  /* ABOUT split */
  .about{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;align-items:stretch}
  .about .portrait{background:var(--greige) url('/headshot.jpg') center 20%/cover no-repeat;min-height:600px}
  .about .copy{padding:90px 64px;background:var(--bone)}
  .about h2{font-size:clamp(28px,3.4vw,42px);font-weight:400;margin-bottom:8px}
  .about p{font-size:15.5px;color:var(--muted);margin-top:18px}
  .about .sig-line{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--espresso);margin-top:26px}
  @media(max-width:860px){.about{grid-template-columns:1fr}.about .portrait{min-height:380px}.about .copy{padding:56px 32px}}

  /* ORIGIN */
  .origin{background:var(--greige);text-align:center}
  .origin .kh{margin:0 auto 26px;display:block}
  .origin h2{font-size:clamp(26px,3.2vw,38px);font-weight:400}
  .origin p{font-size:16.5px;color:var(--muted);margin-top:20px}
  .origin p.close{font-family:var(--serif);font-size:clamp(19px,2.2vw,24px);font-style:italic;color:var(--espresso);margin-top:28px;line-height:1.45}

  /* EXPLORE */
  .explore{background:var(--greige)}
  .rows{margin-top:44px;border-top:1px solid var(--line)}
  .row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:.2s}
  .row:hover{padding-left:8px}
  .row h3{font-size:22px;font-weight:400;margin-bottom:4px}
  .row p{font-size:14px;color:var(--muted)}
  .row .arw{font-family:var(--serif);font-size:22px;color:var(--brass);flex:none}

  /* CONTACT */
  .contact{background:var(--espresso);color:#fff;padding:110px 0}
  .contact h2{color:#fff;font-size:clamp(28px,3.6vw,42px);font-weight:400}
  .contact .lede{color:rgba(255,255,255,.86)}
  form{display:grid;gap:16px;max-width:520px;margin:44px auto 0}
  label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78);display:block;margin-bottom:7px}
  input,textarea{width:100%;padding:14px 16px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#fff;font-family:var(--sans);font-size:15px;font-weight:400}
  input::placeholder,textarea::placeholder{color:rgba(255,255,255,.58)}
  input:focus,textarea:focus{outline:none;border-color:var(--brass)}
  textarea{min-height:96px;resize:vertical}
  .submit{background:#8A6E45;color:#fff;border:none;padding:17px;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:.2s}
  .submit:hover{background:#73593A}
  .fine{font-size:12px;color:rgba(255,255,255,.68);text-align:center;margin-top:4px}

  /* FOOTER */
  footer{background:var(--bone);padding:56px 0 40px;border-top:1px solid var(--line)}
  .fname{font-family:var(--serif);font-size:26px;text-align:center}
  .frole{text-align:center;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:8px 0 4px}
  .flic{text-align:center;font-size:11px;color:var(--muted);margin-bottom:26px}
  .fcontact{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;font-size:14px;margin-bottom:8px}
  .fcontact a{text-decoration:none;border-bottom:1px solid var(--line)}
  .fes{text-align:center;font-family:var(--serif);font-style:italic;color:var(--muted);font-size:14px;margin-top:10px}
  .fsoc{display:flex;justify-content:center;gap:14px;margin:26px 0 0}
  .fsoc a{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
  .fsoc a:hover{background:var(--forest);color:#fff;border-color:var(--forest)}
  .legal{border-top:1px solid var(--line);margin-top:34px;padding-top:28px;display:flex;gap:22px;align-items:flex-start;justify-content:center;flex-wrap:wrap;max-width:820px;margin-left:auto;margin-right:auto}
  .eho span{display:block;text-align:center;font-size:8px;letter-spacing:.04em;margin-top:3px;text-transform:uppercase;max-width:74px;color:var(--muted)}
  .realtor-mark{height:54px;width:auto;display:block;mix-blend-mode:multiply}
  .disclaimer{font-size:10.5px;color:var(--muted);line-height:1.65;max-width:560px}


  /* HOME FAQ */
  .homefaq{background:var(--bone)}
  .homefaq .qas{margin-top:40px;border-top:1px solid var(--line)}
  .homefaq .qa{padding:26px 0;border-bottom:1px solid var(--line)}
  .homefaq .qa h3{font-family:var(--serif);font-size:23px;font-weight:400;margin-bottom:8px}
  .homefaq .qa p{font-size:15.5px;color:var(--muted);font-weight:400}

/* ============================================================
   INTERIOR PAGES: re-skin of the legacy class vocabulary
   ============================================================ */
.interior .topbar{position:relative;background:var(--forest);padding:0}
.interior .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;padding-bottom:20px;flex-direction:row}
.interior .topbar .top-headshot{display:none}
.interior .brandlock{display:flex;align-items:center;gap:11px;text-decoration:none}
.interior .brandlock .kh{flex:none}
.interior .brandlock .e, .interior .brandlock .n{display:block}
.interior .brandlock .e{font-size:7.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--sand);line-height:1}
.interior .brandlock .n{font-family:var(--serif);font-size:23px;color:#F3ECE0;line-height:1.1;letter-spacing:.01em}
.interior .topnav{position:static;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.interior .topnav a{color:rgba(243,236,224,.92);font-size:10.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding-bottom:0;border-bottom:1px solid transparent}
.interior .topnav a:hover{color:#fff}
.interior .topnav a.active{color:#fff;border-bottom-color:var(--sand)}
.interior .langtoggle{position:static;display:flex;gap:5px}
.interior .langtoggle a{background:none;border:1px solid rgba(255,255,255,.6);color:rgba(243,236,224,.92);padding:4px 9px;font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.14em;text-decoration:none;display:inline-block}
.interior .langtoggle a.active{background:#fff;color:var(--espresso);border-color:#fff}
@media(max-width:760px){.topbar .wrap{flex-wrap:wrap;justify-content:center;text-align:center}.topnav{gap:14px;justify-content:center}.topnav a{font-size:9.5px;letter-spacing:.12em}}

.interior .hero{background:var(--forest);color:#fff;padding:88px 0 92px;text-align:center;border-top:1px solid rgba(255,255,255,.08)}
.interior .hero .eyebrow{letter-spacing:.32em;text-transform:uppercase;font-size:10.5px;color:var(--sand);font-weight:400;margin-bottom:24px}
.interior .hero h1{font-family:var(--serif);font-size:clamp(32px,5vw,56px);line-height:1.14;font-weight:400;margin-bottom:20px;letter-spacing:.01em}
.interior .hero .facts{font-size:10.5px;color:rgba(243,236,224,.90);letter-spacing:.2em;text-transform:uppercase;margin-bottom:22px}
.interior .hero p{font-size:17px;color:rgba(255,255,255,.93);max-width:600px;margin:0 auto 34px;font-weight:400}
.interior .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.interior .btn{display:inline-block;padding:16px 34px;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:.2s;border:1px solid #8A6E45}
.interior .btn-primary{background:#8A6E45;color:#fff}
.interior .btn-primary:hover{background:#73593A;border-color:#73593A}
.interior .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.72)}
.interior .btn-ghost:hover{background:rgba(255,255,255,.12)}
.interior .btn-dark{display:inline-block;background:#8A6E45;color:#fff;padding:16px 32px;font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1px solid var(--brass)}
.interior .btn-dark:hover{background:#73593A}

.interior .section{padding:88px 0}
.interior .section h2{font-family:var(--serif);font-size:clamp(27px,3.4vw,40px);color:var(--espresso);margin-bottom:16px;text-align:center;font-weight:400;letter-spacing:.01em}
.interior .lead{font-size:17px;color:var(--muted);text-align:center;max-width:600px;margin:0 auto;font-weight:400}
.interior .points{display:grid;gap:0;margin-top:40px;border-top:1px solid var(--line)}
.interior .point{display:flex;gap:22px;align-items:flex-start;padding:26px 0;border-bottom:1px solid var(--line)}
.interior .num{flex:none;font-family:var(--serif);font-size:22px;font-weight:500;color:var(--brass-text);width:38px;letter-spacing:.14em}
.interior .point h3{font-family:var(--serif);font-size:22px;margin-bottom:6px;font-weight:400}
.interior .point p{font-size:15.5px;color:var(--muted);font-weight:400}

.interior .heights, .interior .concierge, .interior .proof{background:var(--greige);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.interior .heights .box, .interior .concierge .box, .interior .proof .box{text-align:center;padding:8px 0}
.interior .tag{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-text);font-weight:500;margin-bottom:16px}
.interior .heights h2{font-size:clamp(24px,3vw,34px);margin-bottom:14px}
.interior .heights p{font-size:16px;color:var(--muted);max-width:580px;margin:0 auto 24px;font-weight:400}

.interior .quote{background:var(--forest);color:#fff;padding:80px 0;text-align:center}
.interior .quote p, .interior .quote blockquote{font-family:var(--serif);font-size:clamp(22px,3vw,34px);font-style:italic;font-weight:400;line-height:1.4;max-width:820px;margin:0 auto;color:#F3ECE0}
.interior .quote .cite{margin-top:22px;font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);font-style:normal}

.interior .listings{background:var(--greige);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.interior .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
.interior .card{background:var(--bone);border:1px solid var(--line);padding:28px;text-decoration:none;color:inherit;display:block;transition:.2s}
.interior .card:hover{border-color:var(--brass)}
.interior .card h3{font-family:var(--serif);font-size:22px;font-weight:400;margin-bottom:6px}
@media(max-width:700px){.grid{grid-template-columns:1fr}}

.interior .form-section{background:var(--espresso);color:#fff}
.interior .form-section h2{color:#fff}
.interior .form-section .lead{color:rgba(255,255,255,.86)}
.interior .form-section form{display:grid;gap:16px;margin-top:40px;max-width:520px;margin-left:auto;margin-right:auto}
.interior .form-section label{font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78);display:block;margin-bottom:7px}
.interior .form-section input, .interior .form-section textarea{width:100%;padding:14px 16px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#fff;font-family:var(--sans);font-size:15px;font-weight:400}
.interior .form-section input::placeholder, .interior .form-section textarea::placeholder{color:rgba(255,255,255,.58)}
.interior .form-section input:focus, .interior .form-section textarea:focus{outline:none;border-color:var(--brass)}
.interior .form-section textarea{min-height:96px;resize:vertical}
.interior .submit{background:#8A6E45;color:#fff;border:none;padding:17px;font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:.2s}
.interior .submit:hover{background:#73593A}
.interior .fineprint{font-size:12px;color:rgba(255,255,255,.68);text-align:center;margin-top:4px;font-weight:400}

.interior .faq .qa{border-bottom:1px solid var(--line);padding:24px 0}
.interior .faq .qa h3{font-family:var(--serif);font-size:21px;font-weight:400;margin-bottom:8px}
.interior .faq .qa p{font-size:15px;color:var(--muted);font-weight:400}

.interior .crosslink{text-align:center;font-size:14px;color:var(--muted);padding:8px 0 0}
.interior .crosslink a{color:var(--espresso);font-weight:400;text-decoration:none;border-bottom:1px solid var(--brass)}

.interior footer{background:var(--bone);border-top:1px solid var(--line);padding:56px 0 40px}
.interior .sig{text-align:center;margin-bottom:26px}
.interior .sig .name{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--espresso);letter-spacing:.01em}
.interior .sig .role{font-size:10px;color:var(--muted);margin:8px 0 4px;text-transform:uppercase;letter-spacing:.22em}
.interior .sig .licensed{font-size:11px;color:var(--muted);margin-bottom:22px}
.interior .sig-rows{display:inline-flex;flex-direction:column;gap:10px;text-align:left;margin:0 auto}
.interior .sig-row{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--espresso)}
.interior .sig-row svg{flex:none;color:var(--brass)}
.interior .sig-row a{text-decoration:none;color:var(--espresso);border-bottom:1px solid var(--line)}
.interior .sig-row a:hover{border-bottom-color:var(--brass)}
.interior .sig-row .phone-sep{margin:0 4px;color:var(--line)}
.interior .sig-row.es{color:var(--muted);font-family:var(--serif);font-style:italic;font-size:14px}
.interior .socials{display:flex;justify-content:center;gap:14px;margin-top:22px}
.interior .socials a{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;color:var(--espresso);transition:.2s}
.interior .socials a:hover{background:var(--forest);color:#fff;border-color:var(--forest)}

/* ============================================================
   WARREN HUB: neighborhood explorer + spoke directory
   ============================================================ */
.interior .hub{background:var(--greige);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.interior .explorer{display:grid;grid-template-columns:280px 1fr;gap:0;margin-top:38px;border:1px solid var(--line);background:var(--bone)}
.interior .exp-list{border-right:1px solid var(--line);display:flex;flex-direction:column}
.interior .exp-btn{appearance:none;background:none;border:none;border-bottom:1px solid var(--line);text-align:left;padding:20px 22px;cursor:pointer;font-family:var(--sans);transition:.18s}
.interior .exp-btn:last-child{border-bottom:none}
.interior .exp-btn .en{display:block;font-family:var(--serif);font-size:20px;font-weight:500;color:var(--espresso);line-height:1.2}
.interior .exp-btn .es{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-text);margin-top:5px;font-weight:500}
.interior .exp-btn:hover{background:var(--greige)}
.interior .exp-btn[aria-selected="true"]{background:var(--forest)}
.interior .exp-btn[aria-selected="true"] .en{color:#F3ECE0}
.interior .exp-btn[aria-selected="true"] .es{color:var(--sand)}
.interior .exp-panel{padding:34px 34px 36px}
.interior .exp-panel h3{font-family:var(--serif);font-size:27px;font-weight:500;margin-bottom:6px}
.interior .exp-panel .sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-text);font-weight:500;margin-bottom:18px}
.interior .exp-panel p{font-size:15.5px;color:var(--muted);margin-bottom:18px}
.interior .exp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:1px solid var(--line)}
.interior .exp-fact{padding:16px 0;border-bottom:1px solid var(--line)}
.interior .exp-fact dt{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-text);font-weight:500;margin-bottom:5px}
.interior .exp-fact dd{margin:0;font-size:14.5px;color:var(--espresso)}
.interior .exp-panel .more{display:inline-block;margin-top:20px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--espresso);border-bottom:1px solid var(--brass);padding-bottom:5px}
@media(max-width:760px){.interior .explorer{grid-template-columns:1fr}.interior .exp-list{border-right:none;border-bottom:1px solid var(--line);flex-direction:row;overflow-x:auto}.interior .exp-btn{border-bottom:none;border-right:1px solid var(--line);white-space:nowrap;padding:14px 18px}.interior .exp-btn .en{font-size:17px}.interior .exp-panel{padding:26px 22px 28px}}

.interior .hosted{background:var(--forest);color:#fff;text-align:center;padding:88px 0}
.interior .hosted .tag{color:var(--sand)}
.interior .hosted h2{color:#fff;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,42px);margin-bottom:16px}
.interior .hosted p{color:rgba(255,255,255,.9);max-width:620px;margin:0 auto 30px;font-size:16.5px}

.interior .spokes{margin-top:38px;border-top:1px solid var(--line)}
.interior .spoke{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:.2s}
.interior .spoke:hover{padding-left:8px}
.interior .spoke h3{font-family:var(--serif);font-size:23px;font-weight:500;margin-bottom:4px}
.interior .spoke p{font-size:14.5px;color:var(--muted)}
.interior .spoke .arw{font-family:var(--serif);font-size:22px;color:var(--brass-text);flex:none}
/* ==========================================================================
   Hosted by Joannie: brand token update, August 2026
   Repaints the entire site to the navy, cream, and antique gold palette
   used in the TikTok campaign.

   HOW TO USE
   Open brand.css in the website folder. Paste this whole block at the very
   BOTTOM of the file, after everything else. Save. Deploy.

   Nothing else changes. Every page already reads these variable names, so
   changing the values here repaints all 14 pages at once. No page HTML is
   touched, so nothing can break.

   The variable NAMES stay the same on purpose (--forest still exists, it
   just holds navy now). Renaming them would mean editing every page.
   ========================================================================== */

:root{
  /* Backgrounds */
  --bone:#FBF8F2;        /* ivory, page background */
  --greige:#F0E8DA;      /* warm cream, alternating sections and note blocks */

  /* Text */
  --espresso:#1A2233;    /* deep navy black, body copy */
  --muted:#5A5B66;       /* secondary text */

  /* Primary accent, was forest green, now deep midnight navy */
  --forest:#1B2A4A;      /* headlines, dark sections, buttons */

  /* Metallics, was brass, now muted antique gold */
  --brass:#B08D57;       /* rules, ornaments, hover states */
  --brass-text:#8A6C3E;  /* gold used as text, darkened for contrast */
  --sand:#C9A96A;        /* light gold on navy backgrounds */

  /* Structure */
  --line:#DED5C6;        /* hairlines and borders */

  /* New token, oxblood. Use sparingly: the diamond ornament, one accent
     mark per page at most. Never for body text or large areas. */
  --oxblood:#6B2233;
}

/* Optional. Adds the campaign display serif for page headlines only.
   Delete this block if you would rather keep Cormorant Garamond everywhere.
   Requires this line in the <head> of each page, before brand.css:

   <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
*/
h1, .hero h1, .display{
  font-family:'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-weight:400;
  letter-spacing:-0.005em;
}

/* The diamond ornament from the TikTok images, usable as a divider.
   Add <hr class="ornament"> anywhere you want it. */
hr.ornament{
  border:none;
  height:1px;
  background:var(--line);
  margin:2.6rem auto;
  max-width:22rem;
  position:relative;
  overflow:visible;
}
hr.ornament::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:9px;
  background:var(--brass);
  transform:translate(-50%,-50%) rotate(45deg);
}
hr.ornament.oxblood::after{ background:var(--oxblood); }
/* Compass attribution, official horizontal mark.
   Both bands are navy, so the white mark is used in both places.
   max-width guards against the image ever spanning the viewport. */
.logoband,
.interior .logo-band{
  background:var(--forest);
  text-align:center;
  padding:44px 20px;
}
.logoband img,
.interior .logo-band .brand-logo img,
.interior .brand-logo img{
  display:block !important;
  height:30px !important;
  width:auto !important;
  max-width:86% !important;
  margin:0 auto !important;
}
.logoband .compass-sub,
.interior .brand-logo .compass-sub{
  display:block;
  margin-top:14px;
  font-family:'Jost','Futura',Helvetica,Arial,sans-serif;
  font-size:11px;
  font-weight:300;
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  color:var(--sand);
}
@media (max-width:640px){
  .logoband,
  .interior .logo-band{padding:34px 18px}
  .logoband img,
  .interior .logo-band .brand-logo img,
  .interior .brand-logo img{height:22px !important}
  .logoband .compass-sub,
  .interior .brand-logo .compass-sub{font-size:10px;margin-top:11px}
}

/* Recent work intro and closing note that bracket the listing tiles. */
.sec.worklead{padding:82px 0 44px;text-align:center}
.sec.worklead p{max-width:60ch;margin:0 auto;color:var(--muted)}
.sec.worknote{padding:34px 0 76px;text-align:center}
.sec.worknote p{font-size:13px;color:var(--muted);margin:0}
.sec.worknote a{color:var(--brass-text);text-underline-offset:3px}
@media (max-width:640px){
  .sec.worklead{padding:54px 0 30px}
  .sec.worknote{padding:26px 0 48px}
}

/* Placeholder panel for representations with no photograph on file.
   The keyhole mark on navy, held small and centered. Never stretched. */
.listing .img.placeholder{
  background-color:var(--forest);
  background-image:url('/logo-keyhole-light-1024.png');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:132px auto;
}
@media (max-width:860px){
  .listing .img.placeholder{background-size:104px auto}
}