/* ============================================================
   timewise — Article page shared styles
   Used by every /blog/<slug>.html and /blog/index.html
   ============================================================ */
:root{
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}
*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(60vw 60vw at 12% 18%, rgba(155,153,140,.18), transparent 60%),
    radial-gradient(50vw 50vw at 88% 10%, rgba(214,212,211,.35), transparent 60%),
    #F4F4EC;
  color:#2A2B2D;
  font-family:'Satoshi','Inter',ui-sans-serif,system-ui,sans-serif;
  font-feature-settings: "ss01","cv11";
}
a{ color:inherit; }

/* NAV — white glass, dark links */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(214,212,211,.45);
}
.nav.scrolled{ background:#FFFFFF; box-shadow:0 8px 24px -20px rgba(0,0,0,.16); }
.nav-inner{
  max-width:1280px; margin:0 auto; padding:0 2rem;
  height:72px; display:flex; align-items:center; justify-content:space-between;
}
.nav a.link{ color:#2A2B2D; font-size:.95rem; font-weight:500; opacity:.78; text-decoration:none; }
.nav a.link:hover{ color:#0B1024; opacity:1; }
.nav-links{ display:none; gap:2.25rem; }
@media (min-width:768px){ .nav-links{ display:flex; } }
.login-pill{
  background:#0B1024; color:#F4F4EC;
  border-radius:9999px; padding:.55rem 1.4rem; font-weight:500;
  text-decoration:none;
  box-shadow: 0 8px 18px -10px rgba(11,16,36,.4);
  transition: background .35s var(--ease-soft);
}
.login-pill:hover{ background:#13183A; }
.nav-right{ display:flex; align-items:center; gap:1rem; }
.lang-switch{ display:none; gap:.25rem; }
@media (min-width:640px){ .lang-switch{ display:flex; } }
.lang-btn{
  font-size:.78rem; padding:.3rem .65rem;
  border-radius:9999px;
  color:#9B998C; text-decoration:none;
  transition: color .25s, background .25s;
}
.lang-btn:hover{ color:#2A2B2D; }
.lang-btn.lang-active{ background:#2A2B2D; color:#F4F4EC; }

/* ARTICLE container */
.article-wrap{ max-width: 760px; margin:0 auto; padding: 5rem 1.5rem 6rem; }
@media (min-width:768px){ .article-wrap{ padding: 6rem 2rem 7rem; } }

/* Article hero image */
.article-hero{
  margin: -1rem -1rem 2.5rem;
  border-radius: 1.5rem; overflow:hidden;
  aspect-ratio: 16/8;
  background:#0B1024;
  box-shadow: 0 30px 60px -32px rgba(42,43,45,.25);
}
.article-hero picture, .article-hero img{
  width:100%; height:100%; object-fit:cover; display:block;
}
@media (min-width:768px){
  .article-hero{ margin: -1.5rem 0 2.75rem; }
}

/* Eyebrow / meta */
.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:#9B998C; font-weight:500;
}
.article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem;
  color:#9B998C; font-size:.85rem; margin-bottom:1.25rem;
}
.article-meta a{ color:inherit; text-decoration:none; }
.article-meta a:hover{ color:#2A2B2D; }
.article-meta .dot-sep{ width:3px; height:3px; border-radius:9999px; background:rgba(155,153,140,.45); }

/* Display headlines */
.display{
  font-family:'Inter Display','Inter',ui-sans-serif,system-ui,sans-serif;
  font-weight:500; letter-spacing:-0.028em; line-height:1.06; color:#0B1024;
}

/* H1 — article title */
.article-wrap h1{
  font-family:'Inter Display','Inter',sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height:1.08; letter-spacing:-0.025em;
  color:#0B1024; font-weight:600;
  margin: 0 0 1rem;
}
/* Deck / lede */
.article-wrap .lede{
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height:1.55; letter-spacing:-0.01em;
  color: rgba(42,43,45,.85);
  margin: 0 0 2.5rem;
}
.article-wrap h2{
  font-family:'Inter Display','Inter',sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  line-height:1.18; letter-spacing:-0.018em;
  color:#0B1024; font-weight:600;
  margin: 3rem 0 1rem;
}
.article-wrap h3{
  font-family:'Inter Display','Inter',sans-serif;
  font-size: 1.2rem; font-weight:600;
  color:#0B1024; letter-spacing:-0.012em;
  margin: 2rem 0 .65rem;
}
.article-wrap p{
  font-size: 1.05rem; line-height: 1.72;
  color: rgba(42,43,45,.86);
  margin: 0 0 1.15rem;
}
.article-wrap ul, .article-wrap ol{
  font-size: 1.05rem; line-height:1.72;
  color: rgba(42,43,45,.86);
  padding-left: 1.5rem; margin: 0 0 1.5rem;
}
.article-wrap li{ margin-bottom:.45rem; }
.article-wrap strong{ color:#0B1024; font-weight:600; }
.article-wrap a{ color:#0B1024; text-decoration: underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color: rgba(11,16,36,.35); transition: text-decoration-color .25s; }
.article-wrap a:hover{ text-decoration-color:#0B1024; }
.article-wrap blockquote{
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid #0B1024;
  background: rgba(255,255,255,.55);
  border-radius: 0 .85rem .85rem 0;
  font-style: italic;
  color: rgba(42,43,45,.9);
}
.article-wrap hr{
  border:none; border-top:1px solid rgba(214,212,211,.6);
  margin: 3rem 0;
}

/* Call-out card */
.callout{
  background:#FFFFFF;
  border:1px solid rgba(214,212,211,.6);
  border-radius:1.25rem;
  padding:1.5rem 1.75rem;
  margin: 2rem 0;
  box-shadow: 0 30px 60px -32px rgba(42,43,45,.15);
}
.callout h3{ margin-top:0; }
.callout p:last-child{ margin-bottom:0; }

/* End-of-article CTA */
.article-cta{
  background: linear-gradient(180deg,#FAF9F2 0%,#EFEEE4 100%);
  border:1px solid rgba(214,212,211,.6);
  border-radius:1.5rem;
  padding: 2rem 2rem 2.25rem;
  margin-top: 3.5rem;
  text-align:center;
}
.article-cta h3{
  font-size: 1.35rem; margin: 0 0 .5rem;
}
.article-cta p{ margin: 0 0 1.25rem; color: rgba(42,43,45,.72); }
.btn{
  display:inline-flex; align-items:center; gap:.65rem;
  background:linear-gradient(180deg,#13183A 0%,#0B1024 60%,#070A1B 100%);
  color:#F4F4EC; border-radius:9999px; padding:.6rem .8rem .6rem 1.5rem;
  font-weight:500; font-size:.95rem; text-decoration:none;
  box-shadow:0 14px 28px -16px rgba(11,16,36,.55), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-soft);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 22px 34px -18px rgba(11,16,36,.65); }
.btn .chip{
  width:34px; height:34px; border-radius:9999px;
  background:#F4F4EC; color:#0B1024;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Related articles */
.related{
  margin-top: 4rem;
}
.related h3{
  font-family:'Inter Display','Inter',sans-serif;
  font-size: 1.05rem; font-weight:600; color:#0B1024;
  margin: 0 0 1.25rem;
}
.related ul{ list-style:none; padding:0; margin:0; }
.related li{ margin-bottom:.75rem; }
.related a{
  color:#0B1024; text-decoration:none;
  font-weight:500; font-size:.98rem;
  border-bottom:1px solid rgba(214,212,211,.7);
  padding-bottom:.5rem; display:block;
  transition: border-color .25s, color .25s;
}
.related a:hover{ border-color:#0B1024; color:#13183A; }
.related .meta{ color:#9B998C; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; }

/* FOOTER — dark */
.foot{
  background: linear-gradient(180deg,#1F2024 0%, #2A2B2D 50%, #1F2024 100%);
  color:#F4F4EC; padding: 4rem 0 2.5rem; margin-top: 6rem;
}
.foot-inner{ max-width:1180px; margin:0 auto; padding: 0 2rem; }
.foot-row{ display:flex; flex-direction:column; gap:2.5rem; margin-bottom:3.5rem; }
@media (min-width:768px){ .foot-row{ flex-direction:row; align-items:flex-start; justify-content:space-between; } }
.foot p{ margin: 0; color: rgba(244,244,236,.8); line-height: 1.6; }
.foot-icons{ display:flex; gap:.75rem; }
.foot-icon{
  width:42px; height:42px; border-radius:.6rem;
  background:rgba(244,244,236,.06); border:1px solid rgba(244,244,236,.14);
  color:#9B998C;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition: background .25s, color .25s;
}
.foot-icon:hover{ background:rgba(244,244,236,.1); color:#F4F4EC; }
.foot-bottom{
  display:flex; flex-direction:column; gap:.65rem;
  align-items:flex-start;
  font-size:.85rem; color: rgba(244,244,236,.55);
}
@media (min-width:768px){
  .foot-bottom{ flex-direction:row; align-items:center; justify-content:space-between; }
}
.foot-bottom a{ color: rgba(244,244,236,.7); text-decoration:none; }
.foot-bottom a:hover{ color:#F4F4EC; }

/* BLOG INDEX layout */
.blog-index{ max-width:1180px; margin:0 auto; padding: 5rem 2rem 6rem; }
.blog-index header{ margin-bottom:3rem; }
.blog-index h1{
  font-family:'Inter Display','Inter',sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight:600; letter-spacing:-0.025em; line-height:1.05;
  color:#0B1024; margin: .8rem 0 .85rem;
}
.blog-index .lede{ color:rgba(42,43,45,.72); max-width:640px; font-size:1.05rem; line-height:1.55; margin:0; }
.blog-grid{
  display:grid; grid-template-columns: 1fr; gap: 1.75rem;
}
@media (min-width:768px){ .blog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1024px){ .blog-grid{ grid-template-columns: repeat(3, 1fr); } }
.blog-card{
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(214,212,211,.6);
  border-radius:1.5rem; overflow:hidden;
  box-shadow: 0 30px 60px -32px rgba(42,43,45,.15);
  text-decoration:none; color:inherit;
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-soft);
}
.blog-card:hover{ transform:translateY(-3px); box-shadow: 0 40px 80px -32px rgba(42,43,45,.22); }
.blog-thumb{
  aspect-ratio: 16/10; position:relative; overflow:hidden;
  background:#0B1024;
}
.blog-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .8s var(--ease-out);
}
.blog-card:hover .blog-thumb img{ transform: scale(1.03); }
.blog-content{ padding:1.5rem 1.5rem 1.75rem; display:flex; flex-direction:column; flex:1; }
.blog-meta{
  display:flex; align-items:center; gap:.75rem;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:#9B998C; margin-bottom:.85rem;
}
.blog-meta .dot-sep{ width:3px; height:3px; border-radius:9999px; background:rgba(155,153,140,.45); }
.blog-title{
  font-family:'Inter Display','Inter',sans-serif;
  font-weight:600; letter-spacing:-0.018em; line-height:1.18;
  color:#2A2B2D; font-size:1.18rem; margin:0 0 .65rem;
}
.blog-excerpt{ color:rgba(42,43,45,.62); font-size:.92rem; line-height:1.55; margin:0 0 1.1rem; flex:1; }
.blog-link{
  display:inline-flex; align-items:center; gap:.4rem;
  color:#0B1024; font-weight:500; font-size:.9rem;
}

/* Back to blog link */
.back-to-blog{
  display:inline-flex; align-items:center; gap:.4rem;
  color:#9B998C; text-decoration:none; font-size:.88rem;
  margin-bottom:1.25rem;
  transition: color .25s;
}
.back-to-blog:hover{ color:#0B1024; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
  html{ scroll-behavior:auto; }
}