/* Desktop Ideas (/ideas/): Cozy brand black, white, pink. Reading layout after Medium. */
:root{
  --ink:#1D1916; --muted:#6B625C; --rule:#EFE7E3; --bg:#FFFFFF;
  --pink:#F1B7C6; --pink-light:#F8DCE8; --pink-dark:#D4809E;
  --head:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --measure:680px; --wide:1000px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:20px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:10}

/* header */
.ih{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
.ih-in{max-width:var(--wide);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px}
.ih-logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--head);font-weight:800;font-size:20px}
.ih-logo img{width:30px;height:30px;border-radius:8px}
.ih-nav{margin-left:auto;display:flex;align-items:center;gap:18px;font-family:var(--ui);font-size:15px;font-weight:600}
.ih-nav a{text-decoration:none;white-space:nowrap}
.ih-nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--pink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff !important;text-decoration:none;font-family:var(--ui);font-weight:700;font-size:15px;line-height:1;padding:12px 20px;border-radius:999px;transition:transform .15s ease,background .15s ease}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn-lg{font-size:17px;padding:16px 28px}

/* article */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 20px}
.crumbs{font-family:var(--ui);font-size:14px;color:var(--muted);margin:32px 0 20px}
.crumbs ol{list-style:none;margin:0;padding:0 !important;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li{margin:0 !important}
.crumbs li+li:before{content:"/";margin-right:6px;color:#C9BEB8}
.crumbs a{text-decoration:none !important}.crumbs a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--head);color:var(--ink);letter-spacing:-.01em;line-height:1.15}
h1{font-size:44px;font-weight:800;margin:0 0 12px}
.dek{font-size:23px;line-height:1.45;color:var(--muted);margin:0 0 20px}
.byline{font-family:var(--ui);font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:28px}
.byline b{color:var(--ink);font-weight:700}
h2{font-size:28px;font-weight:800;margin:48px 0 12px}
h3{font-size:21px;font-weight:700;margin:28px 0 6px}
p{margin:0 0 1.2em}
.wrap ul,.wrap ol{padding-left:1.2em;margin:0 0 1.2em}.wrap li{margin:.3em 0}
.wrap a{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:3px;text-underline-offset:3px}
.wrap a:hover{text-decoration-color:var(--pink-dark)}
.wrap a.btn{text-decoration:none}
blockquote,.tagline{margin:28px 0;padding:20px 24px;background:var(--pink-light);border-radius:16px;font-size:21px;line-height:1.5}
.shot{max-width:var(--wide);margin:8px auto 12px;padding:0 20px}
.shot img{width:100%;border-radius:14px;box-shadow:0 1px 2px rgba(29,25,22,.08),0 12px 40px rgba(29,25,22,.14)}
.shot figcaption{font-family:var(--ui);font-size:14px;color:var(--muted);text-align:center;margin-top:12px}
.getit{font-family:var(--ui);font-size:16px;font-weight:600;text-align:center;margin:0 0 8px}
table{width:100%;border-collapse:collapse;font-family:var(--ui);font-size:16px;margin:0 0 1.4em}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-weight:700;background:#FBF6F4}
.faq h3{font-size:19px}
.cta{background:var(--pink);border-radius:24px;padding:40px 28px;text-align:center;margin:56px 0}
.cta h2{margin:0 0 8px !important;font-size:30px}
.cta p{font-family:var(--ui);font-size:16px;margin:0 0 20px}
.related{max-width:var(--wide);margin:0 auto 64px;padding:0 20px}
.related h2{margin-top:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.card{text-decoration:none;display:block}
.card img{border-radius:12px;aspect-ratio:2560/1664;object-fit:cover;width:100%;box-shadow:0 6px 20px rgba(29,25,22,.10);transition:transform .2s ease}
.card:hover img{transform:translateY(-3px)}
.card h3{margin:12px 0 4px;font-size:19px}
.card p{font-size:16px;line-height:1.45;color:var(--muted);margin:0}
.card .tag{display:inline-block;font-family:var(--ui);font-size:12px;font-weight:700;background:var(--pink-light);border-radius:999px;padding:3px 10px;margin-top:8px}

/* hub */
.hero{background:var(--pink);padding:56px 20px 48px}
.hero-in{max-width:calc(var(--wide) - 40px);margin:0 auto}
.hero-in p{max-width:var(--measure)}
.hero h1{font-size:52px;margin-bottom:12px}
.hero p{font-size:21px;margin:0}
.hub{max-width:var(--wide);margin:0 auto;padding:8px 20px 64px}
.hub h2{margin-top:48px}
.hub .intro{max-width:var(--measure)}
.guides{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.guides a{display:block;text-decoration:none;border:1px solid var(--rule);border-radius:16px;padding:18px 20px}
.guides a:hover{border-color:var(--pink-dark)}
.guides b{font-family:var(--head);font-size:20px;display:block}
.guides span{font-family:var(--ui);font-size:15px;color:var(--muted)}

/* footer */
.if{border-top:1px solid var(--rule);font-family:var(--ui);font-size:15px}
.if-in{max-width:var(--wide);margin:0 auto;padding:40px 20px;display:flex;flex-wrap:wrap;gap:32px 56px}
.if h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.if a{display:block;text-decoration:none;margin:6px 0}.if a:hover{text-decoration:underline}
.if-copy{width:100%;color:var(--muted);font-size:13px;margin:0}

@media (max-width:640px){
  body{font-size:18px}
  h1{font-size:34px}.hero h1{font-size:38px}
  .dek{font-size:20px}
  h2{font-size:24px}
  .ih-nav{gap:12px;font-size:14px}.ih-nav .hide-sm{display:none}
  .ih-logo{font-size:18px}.ih-nav .btn{padding:10px 14px}
  .cta{padding:32px 20px}
}