/* Blog: "Notes from the Studio". Matches the Couture site. */
:root{--night:#060E2E;--deep:#0A1647;--navy:#122A73;--cobalt:#000AA8;--peri:#B7CEFD;--ink:#0A1440;--paper:#F7F9FE;--line:#DDE3F3;--text:#3f4a72;--dim:#7c86ab;
  --serif:'Bodoni Moda',Didot,Georgia,serif;--sans:'Manrope',system-ui,sans-serif}
body{font-family:var(--sans);font-size:17px;line-height:1.8;color:var(--text);background:var(--paper)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px}
@media (max-width:600px){.wrap{padding:0 18px}body{font-size:16.5px}}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--cobalt)}
.kicker{font:600 11.5px/1.3 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--cobalt);margin-bottom:16px}

/* header */
.bh{background:var(--night);border-bottom:1px solid rgba(183,206,253,.18)}
.bh-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:96px}
.bh-links{display:flex;gap:26px}
.bh-links a{font:500 12.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#fff;text-decoration:none;opacity:.88}
.bh-links a:hover{opacity:1;color:var(--peri)}
.bh-book{justify-self:end;display:inline-flex;align-items:center;height:44px;padding:0 20px;background:#fff;color:var(--deep);font:600 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.bh-book:hover{background:var(--peri)}
@media (max-width:700px){.bh-in{grid-template-columns:auto 1fr;min-height:74px}.bh .logo{--k:.75;grid-row:1;grid-column:1}.bh-links{grid-row:1;grid-column:2;justify-self:end;gap:16px}.bh-links a:nth-child(3){display:none}.bh-book{display:none}}
.note{background:#fff6d6;border:1px dashed #c9a227;color:#5a4300;padding:12px 16px;font-size:14.5px;margin:18px 0}
mark.check{background:#ffe9a8;color:#5a4300;padding:0 4px}
.draft-banner{background:#ffe9a8;color:#5a4300;text-align:center;font:600 12.5px/1 var(--sans);letter-spacing:.14em;padding:10px 16px}

/* index */
.bi{background:var(--night);color:#c3ceee;padding:clamp(56px,8vw,100px) 0 clamp(48px,6vw,80px);text-align:center}
.bi .kicker{color:var(--peri)}
.bi h1{color:#fff;font-size:clamp(2.8rem,6vw,4.8rem);line-height:1;margin-bottom:18px}
.bi h1 em{font-family:'Pinyon Script',cursive;font-style:normal;color:var(--peri);font-size:1.15em}
.lede{max-width:38em;margin:0 auto;font-weight:300;font-size:1.08rem}
.list{padding:clamp(48px,7vw,90px) 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;transition:box-shadow .3s,transform .3s}
.card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(10,20,64,.45)}
.card-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--line)}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-k{font:600 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--cobalt);margin:20px 22px 10px}
.card-t{font:400 1.45rem/1.2 var(--serif);color:var(--ink);margin:0 22px 10px}
.card-d{font-size:14.5px;line-height:1.6;margin:0 22px 24px;color:var(--dim)}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* article */
.post{padding-top:clamp(40px,6vw,72px)}
.crumbs{font-size:13px;color:var(--dim);margin-bottom:24px}
.crumbs a{color:var(--dim)}
.post h1{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.08;margin-bottom:16px}
.meta{font-size:14px;color:var(--dim);margin-bottom:34px}
.hero-img{margin-bottom:clamp(36px,5vw,56px)}
.hero-img img{width:100%;aspect-ratio:16/8;object-fit:cover}
@media (max-width:600px){.hero-img{padding:0}.hero-img img{aspect-ratio:4/3}}
.body h2{font-size:clamp(1.7rem,3vw,2.2rem);line-height:1.15;margin:48px 0 14px}
.body h3{font:600 1.08rem/1.4 var(--sans);color:var(--ink);margin:30px 0 8px}
.body p{margin:0 0 18px}
.body ul,.body ol{margin:0 0 20px;padding-left:22px}
.body li{margin-bottom:8px}
.body a{color:var(--cobalt);text-underline-offset:3px}
.body strong{color:var(--ink)}
.tip{background:#fff;border-left:3px solid var(--cobalt);padding:18px 22px;margin:26px 0;font-size:16px}
.tip strong{display:block;font:600 11px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--cobalt);margin-bottom:6px}
.timeline{list-style:none;padding:0!important;margin:24px 0 28px;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);margin:0}
.timeline b{font:400 1.15rem/1.3 var(--serif);color:var(--cobalt)}
@media (max-width:560px){.timeline li{grid-template-columns:1fr;gap:4px}}
.body figure{margin:32px 0}
.body figure img{width:100%;max-height:640px;object-fit:cover}
.body figcaption{font-size:13.5px;color:var(--dim);margin-top:8px}
.faq{margin-top:52px;border-top:1px solid var(--line)}
.faq h2{margin-top:36px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font:400 1.2rem/1.35 var(--serif);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cobalt);font:300 1.5rem/1 var(--sans)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px}
.cta{background:var(--deep);color:#c3ceee;padding:clamp(28px,5vw,48px);margin:56px 0 clamp(56px,8vw,96px);text-align:center}
.cta-k{font:600 11px/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--peri);margin-bottom:12px!important}
.cta h2{color:#fff;margin:0 0 12px!important}
.cta h2 em{color:var(--peri)}
.cta p{margin-bottom:24px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn-light,.btn-line{display:inline-flex;align-items:center;height:50px;padding:0 24px;font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.btn-light{background:#fff;color:var(--deep)!important}
.btn-line{border:1px solid rgba(255,255,255,.45);color:#fff!important}
.related{background:#fff;border-top:1px solid var(--line);padding:clamp(48px,7vw,80px) 0}
.related h2{font-size:2rem;margin-bottom:28px}

/* footer */
.bf{background:var(--night);color:#8c9ac7;text-align:center;padding:48px 0 36px;font-size:14px}
.bf .logo{--k:1.1;margin-bottom:20px}
.bf a{color:#8c9ac7}
.bf p{margin:4px 0}
.bf-small{margin-top:16px!important;font-size:12.5px}
.mbar{background:rgba(6,14,46,.97)}
.mbar a{border:1px solid rgba(183,206,253,.25);color:#fff;font-family:var(--sans)}
.mbar a.primary{background:#fff;color:var(--deep)}