/* Blog pages. Tokens and header copied from ../index.html so both look the same. */
:root{
  --cream:#FAF6EE; --cream-2:#F3ECDF; --paper:#FFFDF8;
  --ink:#1F1B16; --ink-deep:#14110D; --ink-2:#4A4238; --muted:#7C6A47;
  --gold:#C79A34; --gold-dark:#8E6B1F; --gold-soft:#E9D8AE;
  --line:rgba(31,27,22,.14); --line-strong:rgba(31,27,22,.28);
  --serif:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1200px; --measure:680px; --gutter:16px;
}
@media(min-width:768px){:root{--gutter:40px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.ph{background:rgba(199,154,52,.16);border-bottom:1px dashed var(--gold-dark);padding:0 3px;font-style:normal}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dark);margin:0 0 18px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0;letter-spacing:-.005em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font:600 15px/1 var(--sans);letter-spacing:.04em;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:var(--cream);transition:background .2s,border-color .2s}
.btn:hover{background:var(--gold-dark);border-color:var(--gold-dark)}

/* header (same as the home page) */
.top{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.top.scrolled{box-shadow:0 8px 20px -14px rgba(20,17,13,.45)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand .word{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:.3em;white-space:nowrap}
.brand svg{width:17px;height:27px;flex:none}
.top-end{display:flex;align-items:center;gap:12px}
.nav{display:none;gap:32px;font-size:14px;letter-spacing:.06em}
.nav a{text-decoration:none;color:var(--ink-2)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px}
.nav .nav-cta{display:none}
.nav .nav-tel,.nav .nav-mail{display:none}
footer .foot-mail{color:var(--cream);text-decoration:none;letter-spacing:.02em}
footer .foot-mail:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
footer .foot-tel{color:var(--cream);text-decoration:none;letter-spacing:.04em}
footer .foot-tel:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.top .btn{min-height:42px;padding:0 20px;font-size:13px}
.menu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;padding:0}
.menu-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.menu-btn svg{width:18px;height:18px}
.menu-btn .x,.top.open .menu-btn .bars{display:none}
.top.open .menu-btn .x{display:block}
.dd{position:relative;display:flex;align-items:center;gap:4px}
.dd-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;background:transparent;color:var(--ink-2);cursor:pointer}
.dd-btn svg{width:10px;height:6px;transition:transform .2s}
.dd-menu{display:none;position:absolute;top:calc(100% + 16px);left:-18px;min-width:250px;padding:8px 0;background:var(--paper);border:1px solid var(--line-strong);border-radius:4px;box-shadow:0 18px 30px -20px rgba(20,17,13,.45);z-index:30}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav .dd-menu a{display:block;padding:11px 18px;white-space:nowrap}
.nav .dd-menu a:hover{background:var(--cream-2);color:var(--ink)}
@media(min-width:960px){.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.open .dd-menu{display:block}.dd:hover .dd-btn svg,.dd.open .dd-btn svg{transform:rotate(180deg)}}
@media(max-width:959px){
  .dd{display:block}.dd-btn,.dd-menu::before{display:none}
  .top.open .dd>a{display:block}
  .top.open .dd-menu{display:block;position:static;min-width:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  .top.open .nav .dd-menu a{padding:12px 0 12px 18px;font-size:15px;white-space:normal}
  .top.open .nav .dd-menu a:hover{background:none}
}
@media(min-width:960px){.nav{display:flex}.menu-btn{display:none}}
@media(max-width:959px){
  .top.open .nav{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line-strong);box-shadow:0 18px 30px -20px rgba(20,17,13,.4);padding:8px var(--gutter) 24px;max-height:calc(100vh - 76px);overflow-y:auto;font-size:17px}
  .top.open .nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .top.open .nav a[aria-current]{text-decoration:none;color:var(--gold-dark)}
}
@media(max-width:559px){
  .top-end>.btn{display:none}
  .top.open .nav .nav-cta{display:inline-flex;margin-top:20px;align-self:flex-start;min-height:48px;padding:0 24px;border-bottom:1px solid var(--ink);color:var(--cream)}
  .top.open .nav .nav-tel{display:block;padding:18px 0 4px;border-bottom:0;color:var(--gold-dark);font-weight:500}
  .top.open .nav .nav-mail{display:block;padding:8px 0 4px;border-bottom:0;color:var(--gold-dark);font-weight:500}
}
@media(max-width:420px){.brand .word{font-size:17px;letter-spacing:.22em}.top .btn{padding:0 14px}}

/* blog index */
.intro{padding:72px 0 40px}
@media(min-width:1024px){.intro{padding:104px 0 56px}}
.intro h1{font-size:clamp(44px,6.4vw,80px)}
.intro .lede{font-size:clamp(18px,1.6vw,20px);color:var(--ink-2);max-width:620px;margin:20px 0 0}
.posts{list-style:none;margin:0 0 104px;padding:0;border-top:1px solid var(--line-strong)}
.post{border-bottom:1px solid var(--line)}
.post a{display:grid;gap:10px;padding:32px 0;text-decoration:none}
@media(min-width:900px){.post a{grid-template-columns:200px 1fr;gap:40px;padding:40px 0}}
.post .meta{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.post h2{font-size:clamp(28px,3.4vw,38px)}
.post a:hover h2{color:var(--gold-dark)}
.post p{margin:10px 0 0;color:var(--ink-2)}

/* article */
.article{padding:64px 0 96px}
@media(min-width:1024px){.article{padding:96px 0 128px}}
.article .col{max-width:var(--measure);margin:0 auto}
.back{display:inline-block;font-size:14px;letter-spacing:.06em;color:var(--ink-2);text-decoration:none;margin-bottom:40px}
.back:hover{color:var(--ink)}
.article h1{font-size:clamp(38px,5.6vw,64px)}
.dek{font-family:var(--serif);font-size:clamp(22px,2.4vw,27px);line-height:1.35;font-style:italic;color:var(--ink-2);margin:22px 0 0}
.byline{margin:28px 0 0;padding-bottom:28px;border-bottom:1px solid var(--line-strong);font-size:14px;color:var(--muted)}
.byline b{color:var(--ink);font-weight:600}
.body h2{font-size:clamp(28px,3.2vw,34px);margin:56px 0 0}
.body p,.body li{color:var(--ink-2)}
.body p{margin:20px 0 0}
.body ul,.body ol{margin:20px 0 0;padding-left:22px}
.body li{margin:10px 0 0}
.body li::marker{color:var(--gold-dark)}
.body a{color:var(--ink);text-decoration-color:var(--gold);text-underline-offset:3px}
.body a:hover{color:var(--gold-dark)}
.body strong{color:var(--ink);font-weight:600}
.body blockquote{margin:36px 0 0;padding:4px 0 4px 24px;border-left:2px solid var(--gold);font-family:var(--serif);font-size:clamp(24px,2.6vw,29px);line-height:1.3;color:var(--ink)}
.body .note{margin:28px 0 0;padding:18px 22px;background:var(--paper);border:1px solid var(--line);border-radius:12px;font-size:16px}
.table{margin:32px 0 0;overflow-x:auto}
.body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.body th,.body td{text-align:left;vertical-align:top;padding:14px 12px 14px 0;border-bottom:1px solid var(--line)}
.body thead th{font:600 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--line-strong)}
.body tbody th{font-weight:600;color:var(--ink);width:28%}
.body td{color:var(--ink-2)}
.cta{margin:64px 0 0;padding:36px 32px;background:var(--ink-deep);color:var(--cream);border-radius:14px}
.cta h2{font-size:clamp(26px,3vw,32px);margin:0;color:var(--cream)}
.cta p{color:#CFC4AE;margin:12px 0 24px}
.cta .btn{background:var(--gold);border-color:var(--gold);color:var(--ink-deep)}
.cta .btn:hover{background:var(--cream);border-color:var(--cream)}
.next{margin-top:48px;padding-top:28px;border-top:1px solid var(--line-strong);font-size:15px;color:var(--muted)}
.next a{display:block;margin-top:6px;font-family:var(--serif);font-size:24px;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.25}
.next a:hover{color:var(--gold-dark)}

footer{background:var(--ink-deep);color:#B8A57C;padding:40px 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;font-size:13px}
footer .brand{color:var(--cream)}
footer .brand .word{font-size:17px}
footer .brand svg{width:13px;height:21px}
footer .tag{font-family:var(--serif);font-style:italic;letter-spacing:.14em;font-size:14px}