/* The blog's one stylesheet — the hub at /blog/ and every post under it.
   
   It started as the inline <style> block of the single guide page at
   /subtitle-your-own-video/. With nine posts that block would have been copied
   nine times and drifted nine ways, so it lives here instead: one file, cached
   once, and a change to the article measure lands on every post at the same
   time. The tokens are the landing page's, so the blog is recognisably the
   same site.
   
   Note for anyone adding a post: nothing here is post-specific. If a post
   needs a one-off treatment, an inline <style> in that post is the right
   place for it — not another selector here that only ever matches once. */

@font-face{
  font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/instrument-serif-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#fafafa; --panel:#ffffff; --ink:#1d1d1f; --mut:#5d6367; --faint:#86898d;
  --line:rgba(0,0,0,.09);
  --teal:#0d8577; --teal-bright:#3ddbc0; --teal-deep:#0a6a5f;
  --radius:20px; --wrap:52rem; --gut:24px;
  --code-bg:#10171a; --code-ink:#e8f2f0;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:var(--teal)}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------- nav ---------- */
nav{border-bottom:1px solid var(--line);background:rgba(250,250,250,.86);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}
.nav-inner{max-width:74rem;margin:0 auto;padding:12px var(--gut);display:flex;align-items:center;gap:18px}
.nav-brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-weight:650}
.nav-brand img{border-radius:7px}
.nav-links{margin-left:auto;display:flex;gap:20px;align-items:center;font-size:.92rem}
.nav-links a{color:var(--mut);text-decoration:none}
.nav-links a:hover{color:var(--teal)}
.nav-cta{
  background:linear-gradient(180deg,var(--teal) 0%,var(--teal-deep) 100%);color:#fff !important;
  padding:8px 15px;border-radius:999px;font-weight:650;font-size:.88rem;text-decoration:none;
}
/* The language control. Same id the landing page uses, because /lang-nav.js
   binds to it by id and turns a pick into a navigation. */
.nav-lang{
  font:inherit;font-size:.86rem;color:var(--mut);cursor:pointer;
  padding:7px 26px 7px 11px;border:1px solid var(--line);border-radius:999px;
  background-color:transparent;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235d6367' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:9px;
}
[dir="rtl"] .nav-lang{padding:7px 11px 7px 26px;background-position:left 10px center}
.nav-lang:hover{color:var(--ink);border-color:rgba(13,133,119,.35)}

@media(max-width:820px){
  .nav-inner{flex-wrap:wrap;gap:10px 14px}
  .nav-links{width:100%;margin-left:0;order:3;gap:14px;font-size:.88rem;flex-wrap:wrap}
}

/* ---------- article ---------- */
article{padding:56px 0 96px}
.crumb{font-size:.85rem;color:var(--faint);margin:0 0 18px}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--teal)}
h1{
  margin:0;font-size:clamp(2.1rem,4.4vw,3.1rem);font-weight:700;
  letter-spacing:-.032em;line-height:1.08;text-wrap:pretty;
}
h1 em{
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:400;color:var(--teal);letter-spacing:-.01em;
}
.lede{font-size:1.16rem;color:var(--mut);margin:1.1rem 0 0}
h2{
  margin:3.2rem 0 .2rem;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;
  letter-spacing:-.022em;line-height:1.15;scroll-margin-top:72px;
}
h3{margin:2rem 0 .1rem;font-size:1.1rem;font-weight:650;letter-spacing:-.012em;scroll-margin-top:72px}
p{margin:.85rem 0}
ul,ol{margin:.85rem 0;padding-left:1.25rem}
[dir="rtl"] ul,[dir="rtl"] ol{padding-left:0;padding-right:1.25rem}
li{margin:.35rem 0}
.note{
  margin:1.6rem 0;padding:16px 18px;border-radius:14px;
  background:#f0f6f5;border:1px solid rgba(13,133,119,.18);
  font-size:.96rem;color:#33474a;
}
.note strong{color:var(--teal-deep)}

/* ---------- the answer box ----------
   Every post opens with one. It is the first thing a reader sees and the
   thing an answer engine lifts when it quotes the page, so it is written to
   stand alone: short, factual sentences that make sense with no article
   around them. */
.answer{
  margin:2rem 0 0;padding:20px 22px;border-radius:16px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(10,20,25,.05);
}
.answer h2{
  margin:0 0 .5rem;font-size:.8rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal-deep);
}
.answer p{margin:.4rem 0;font-size:1.03rem}
.answer ul{margin:.5rem 0 0;padding-left:1.15rem}
[dir="rtl"] .answer ul{padding-left:0;padding-right:1.15rem}
.answer li{margin:.4rem 0}
.answer li::marker{color:var(--teal)}

/* ---------- figures ----------
   Screenshots break out of the 52rem measure — an interface shrunk into a
   text column cannot be read. Sized against the viewport rather than the
   column, because a percentage here would resolve against the column and
   collapse the bleed to nothing. */
figure{
  width:min(64rem, 100vw - var(--gut) * 2);
  margin:2.2rem 0 2.2rem calc(50% - min(32rem, 50vw - var(--gut)));
}
figure img{
  width:100%;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.10);display:block;background:#0f1b1e;
}
figcaption{margin-top:.7rem;font-size:.88rem;color:var(--faint);text-align:center}

/* ---------- numbered steps ---------- */
.steps{counter-reset:step;list-style:none;padding:0;margin:1.5rem 0 0}
[dir="rtl"] .steps{padding:0}
.steps > li{counter-increment:step;position:relative;padding-inline-start:3rem;margin:2.4rem 0}
.steps > li::before{
  content:counter(step);position:absolute;inset-inline-start:0;top:-2px;
  width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
  background:var(--teal);color:#fff;font-weight:700;font-size:.95rem;
}
.steps h3{margin-top:0}

/* ---------- code ---------- */
pre{
  margin:1.1rem 0;padding:16px 18px;border-radius:14px;overflow-x:auto;
  background:var(--code-bg);color:var(--code-ink);
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.85rem;line-height:1.6;direction:ltr;text-align:left;
}
code{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:.9em}
p code,li code,td code{background:rgba(13,133,119,.09);padding:.12em .38em;border-radius:5px;color:var(--teal-deep)}
.cols{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media (max-width:720px){.cols{grid-template-columns:1fr}}
.cols h3{margin-top:0}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;margin:1.2rem 0}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:30rem}
th,td{text-align:start;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:650;color:var(--ink);background:#f2f3f3}
tbody tr:last-child td{border-bottom:none}

/* ---------- FAQ ---------- */
.faq{margin-top:.6rem}
.faq details{border-bottom:1px solid var(--line);padding:.2rem 0}
.faq summary{cursor:pointer;padding:.85rem 0;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:inline-end;color:var(--teal);font-weight:400;font-size:1.3rem;line-height:1.1}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 1rem}

/* ---------- call to action ---------- */
.cta{
  margin:3.5rem 0 0;padding:32px;border-radius:var(--radius);text-align:center;
  background:linear-gradient(150deg,#0d2b2f 0%,#123c3c 60%,#0b2326 100%);color:#eef6f5;
}
.cta h2{margin:0;color:#fff;font-size:1.6rem}
.cta p{color:#a9c2c0;margin:.6rem 0 1.3rem}
.cta a{
  display:inline-block;background:linear-gradient(180deg,#4ecbb8 0%,#2fa894 100%);
  color:#06221e;font-weight:700;padding:13px 26px;border-radius:999px;text-decoration:none;
}

/* ---------- keep reading ----------
   Every post ends pointing at three others. Nine posts that only link up to
   the hub are nine dead ends; the cluster is the point. */
.more{margin:3.5rem 0 0;padding-top:1.6rem;border-top:1px solid var(--line)}
.more h2{margin:0 0 .4rem;font-size:1.15rem}
.more ul{list-style:none;padding:0;margin:.8rem 0 0}
.more li{margin:0;border-bottom:1px solid var(--line)}
.more li:last-child{border-bottom:none}
.more a{display:block;padding:13px 0;text-decoration:none;color:var(--ink);font-weight:600}
.more a:hover{color:var(--teal);text-decoration:none}
.more a::after{content:" →";color:var(--teal);font-weight:400}
[dir="rtl"] .more a::after{content:" ←"}

/* ---------- byline ---------- */
.byline{
  margin:1.4rem 0 0;font-size:.87rem;color:var(--faint);
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
}
.byline time{color:var(--faint)}
.tag{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:.76rem;font-weight:650;
  letter-spacing:.02em;background:rgba(13,133,119,.1);color:var(--teal-deep);
}

/* ---------- the hub ---------- */
.hub-head{padding:64px 0 8px}
.hub-head h1{font-size:clamp(2.3rem,5vw,3.4rem)}
.hub-head .lede{max-width:40rem}
.posts{list-style:none;padding:0;margin:2.6rem 0 0;display:grid;gap:18px}
.posts > li{margin:0}
.card{
  display:block;padding:24px 26px;border-radius:18px;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card:hover{
  text-decoration:none;transform:translateY(-2px);border-color:rgba(13,133,119,.3);
  box-shadow:0 16px 36px rgba(10,20,25,.09);
}
.card h2{margin:.5rem 0 0;font-size:1.28rem;letter-spacing:-.018em;line-height:1.25}
.card p{margin:.5rem 0 0;color:var(--mut);font-size:.98rem}
.card .readon{display:inline-block;margin-top:.8rem;font-size:.9rem;font-weight:650;color:var(--teal)}
.card.feature{
  background:linear-gradient(150deg,#0d2b2f 0%,#123c3c 62%,#0b2326 100%);
  border-color:transparent;color:#eef6f5;
}
.card.feature h2{color:#fff;font-size:1.5rem}
.card.feature p{color:#a9c2c0}
.card.feature .tag{background:rgba(93,224,199,.16);color:#7fe4cf}
.card.feature .readon{color:var(--teal-bright)}
.card.feature time{color:#8aa5a3}
@media(min-width:860px){
  .posts{grid-template-columns:1fr 1fr}
  .posts > li.wide{grid-column:1 / -1}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:26px 0;font-size:.88rem;color:var(--faint)}
.foot-inner{max-width:74rem;margin:0 auto;padding:0 var(--gut);display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.foot-links{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:18px}
.foot-links a{color:var(--faint);text-decoration:none}
.foot-links a:hover{color:var(--teal)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card{transition:none}
  .card:hover{transform:none}
}