:root{
  --bg:#EFEFED;
  --card:#FFFFFF;
  --ink:#131313;
  --ink-70:rgba(19,19,19,.66);
  --ink-45:rgba(19,19,19,.45);
  --line:rgba(19,19,19,.09);
  --pill-bg:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 12px 32px -12px rgba(0,0,0,.14);
  --chip-top:#FFFFFF;
  --chip-bot:#EDEDEA;
  --chip-hi:rgba(255,255,255,.95);
  --chip-ring:rgba(19,19,19,.13);
  --r-lg:22px;
  --r-md:18px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121212;
    --card:#1C1C1C;
    --ink:#F2F2EF;
    --ink-70:rgba(242,242,239,.64);
    --ink-45:rgba(242,242,239,.42);
    --line:rgba(242,242,239,.10);
    --pill-bg:#2A2A2A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
    --chip-top:#3C3C3C;
    --chip-bot:#222222;
    --chip-hi:rgba(255,255,255,.12);
    --chip-ring:rgba(242,242,239,.16);
  }
}
:root[data-theme="dark"]{
  --bg:#121212;
  --card:#1C1C1C;
  --ink:#F2F2EF;
  --ink-70:rgba(242,242,239,.64);
  --ink-45:rgba(242,242,239,.42);
  --line:rgba(242,242,239,.10);
  --pill-bg:#2A2A2A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  --chip-top:#3C3C3C;
  --chip-bot:#222222;
  --chip-hi:rgba(255,255,255,.12);
  --chip-ring:rgba(242,242,239,.16);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---------- header ---------- */
.nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  max-width:1120px;margin:0 auto;padding:1.5rem 1.5rem .5rem;
}
.logo sup,.lp-logo sup{font-size:.42em;vertical-align:super;opacity:.55;letter-spacing:.02em}
.logo{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;font-weight:400;letter-spacing:-.01em;
  white-space:nowrap;
}
.nav-links{
  display:flex;gap:2.5rem;justify-self:center;
  font-size:.95rem;letter-spacing:-.005em;
}
.nav-links a{color:var(--ink-70);padding:.25rem 0;transition:color .15s}
.nav-links a:hover,.nav-links a.is-current{color:var(--ink)}
.theme-btn{
  display:grid;place-items:center;flex:none;justify-self:end;
  width:40px;height:40px;border-radius:999px;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--shadow);
  cursor:pointer;transition:transform .15s;
}
.theme-btn:hover{transform:translateY(-1px)}

/* ---------- layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem 4rem}

.hero{text-align:center;padding:2.5rem 0 2.6rem}
.hero h1{
  font-size:clamp(2.1rem,5.4vw,3.45rem);
  line-height:1.08;letter-spacing:-.035em;font-weight:700;
  margin:1.1rem 0 0;text-wrap:balance;
}
.hero h1 em{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:400;letter-spacing:-.038em;
}

/* ---------- pills ---------- */
.pill{
  display:inline-block;background:var(--pill-bg);color:var(--ink-70);
  border:1px solid var(--line);border-radius:999px;
  padding:.36rem .85rem;font-size:.78rem;letter-spacing:-.003em;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.pill-lg{
  padding:.5rem 1.2rem;font-size:.85rem;
  color:var(--ink);
  background:linear-gradient(180deg,var(--chip-top) 0%,var(--chip-bot) 100%);
  border-color:var(--chip-ring);
  box-shadow:
    inset 0 1px 0 var(--chip-hi),
    0 1px 2px rgba(0,0,0,.07),
    0 8px 18px -8px rgba(0,0,0,.22);
}
.pill-float{position:absolute;top:.9rem;right:.9rem;z-index:2}

/* ---------- featured ---------- */
.feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;margin:0 0 1.35rem;
}
.feature-media{display:block;position:relative;min-height:26rem}
.feature-body{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:2.4rem 2.6rem 2rem;
}
.feature-foot{width:100%}
.feature-body h2{
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;
  letter-spacing:-.028em;font-weight:700;margin:1.2rem 0 .9rem;
  text-wrap:balance;
}
.feature-body p{
  margin:0;color:var(--ink-70);font-size:1rem;line-height:1.55;
  max-width:34rem;
}
.feature-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:auto;padding-top:2.4rem;
}
.meta{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.82rem;color:var(--ink-70);
}
.dot{width:5px;height:5px;border-radius:50%;background:var(--ink);display:inline-block}
.by{font-size:.95rem;color:var(--ink)}
.by em{font-family:Georgia,"Times New Roman",serif;font-style:italic}

/* ---------- grid ---------- */
.grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem;
}
.card{
  background:var(--card);border-radius:var(--r-md);
  box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .18s ease;
}
.card:hover{transform:translateY(-3px)}
.card-media{
  display:block;position:relative;aspect-ratio:16/11;
  margin:.65rem .65rem 0;border-radius:14px;overflow:hidden;
}
.card-body{padding:1.3rem 1.4rem 1.6rem}
.card-body h3{
  font-size:1.08rem;line-height:1.3;letter-spacing:-.018em;
  font-weight:700;margin:0 0 .6rem;text-wrap:balance;
}
.card-body p{margin:0;color:var(--ink-70);font-size:.93rem;line-height:1.5}

/* ---------- placeholder artwork ---------- */
.art{position:absolute;inset:0;display:block}
.art-1{background:
  radial-gradient(120% 90% at 30% 20%, #FFFFFF 0%, #D9D9D6 42%, #9E9E9B 100%),
  linear-gradient(120deg,#EDEDEA,#BFBFBB);}
.art-2{background:
  radial-gradient(90% 80% at 50% 55%, #F3C9BD 0%, #C9D3E4 45%, #E7EBF2 100%);}
.art-3{background:
  linear-gradient(150deg,#1A1A1A 0%, #4A4A4A 48%, #D6D6D2 100%);}
.art-4{background:
  radial-gradient(85% 75% at 40% 65%, #F6D9C4 0%, #C9D9E8 55%, #EEF3F7 100%);}
:root[data-theme="dark"] .art-1,
:root[data-theme="dark"] .art-2,
:root[data-theme="dark"] .art-4{filter:brightness(.82) saturate(.9)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .art-1,
  :root:not([data-theme="light"]) .art-2,
  :root:not([data-theme="light"]) .art-4{filter:brightness(.82) saturate(.9)}
}

/* ---------- footer ---------- */
.foot{
  max-width:1120px;margin:0 auto;padding:0 1.5rem 3rem;
  display:flex;gap:1.5rem;align-items:center;
  font-size:.85rem;color:var(--ink-45);
}
.foot nav{display:flex;gap:1.25rem;margin-left:auto}
.foot a:hover{color:var(--ink-70)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature{grid-template-columns:1fr}
  .feature-media{min-height:15rem;aspect-ratio:16/10}
  .feature-body{padding:1.8rem 1.6rem}
  .feature-foot{padding-top:1.8rem}
}
@media (max-width:640px){
  .nav{
    grid-template-columns:1fr auto;
    grid-template-areas:"logo toggle" "links links";
    gap:.9rem;padding-top:1.1rem;
  }
  .logo{grid-area:logo}
  .theme-btn{grid-area:toggle}
  .nav-links{grid-area:links;justify-self:start;gap:1.75rem}
  .grid{grid-template-columns:1fr}
  .hero{padding:1.6rem 0 2rem}
}

/* ---------- prose pages (terms, privacy, articles) ---------- */
.prose{
  max-width:38rem;margin:0 auto;padding:2.5rem 0 1rem;
}
.prose h1{
  font-size:clamp(1.8rem,3.6vw,2.4rem);line-height:1.12;
  letter-spacing:-.03em;font-weight:700;margin:0 0 .5rem;
}
.prose .updated{
  margin:0 0 2.6rem;font-size:.86rem;color:var(--ink-45);
}
.prose h2{
  font-size:1.12rem;font-weight:700;letter-spacing:-.018em;
  margin:2.6rem 0 .7rem;
}
.prose p{margin:0 0 1.1rem;color:var(--ink-70);line-height:1.65}
.prose ul{margin:0 0 1.1rem;padding-left:1.2rem;color:var(--ink-70);line-height:1.65}
.prose li{margin:0 0 .4rem}
.prose a{
  color:var(--ink);border-bottom:1px solid var(--line);
}
.prose a:hover{border-bottom-color:var(--ink)}
.prose .back{
  display:inline-block;margin-top:2.5rem;font-size:.9rem;
  color:var(--ink-70);border-bottom:0;
}
.prose .back:hover{color:var(--ink)}

/* ---------- article page ---------- */
.art-head{max-width:38rem;margin:0 auto;padding:2.5rem 0 1.8rem;text-align:center}
.art-head .pill{margin:0 0 1.2rem}
.art-head h1{
  font-size:clamp(1.9rem,4.2vw,2.75rem);line-height:1.1;
  letter-spacing:-.033em;font-weight:700;margin:0 0 .9rem;text-wrap:balance;
}
.standfirst{margin:0 0 1.6rem;font-size:1.06rem;line-height:1.55;color:var(--ink-70)}
.art-meta{display:flex;align-items:center;justify-content:center;gap:1.5rem}
.art-hero{
  position:relative;max-width:1120px;margin:0 auto 2.6rem;
  aspect-ratio:21/9;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
}
.prose .back{border-bottom:0}

/* Placeholder copy. Delete the ph class as each block is written. */
.ph{color:var(--ink-45)!important}
.ph::before{content:""}
h2.ph{font-style:normal;opacity:.75}

/* ---------- homepage sections ---------- */
.section{margin:4.5rem 0 0}
.section-head{text-align:center;margin:0 0 1.9rem}
.section-head h2{
  font-size:clamp(1.6rem,3.6vw,2.35rem);line-height:1.12;
  letter-spacing:-.032em;font-weight:700;margin:1rem 0 0;text-wrap:balance;
}
.section-head h2 em{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:400;letter-spacing:-.038em;
}
.section-head-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;text-align:left;
}
.section-head-row h2{margin-top:.9rem}
.carousel-nav{display:flex;gap:.6rem;flex:none}

/* ---------- tool cards ---------- */
.card.tool .card-body{padding:1.6rem 1.5rem 1.5rem;display:flex;flex-direction:column;height:100%}
.tool-kind{
  display:inline-block;align-self:flex-start;
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-45);margin:0 0 .8rem;
}
.tool-cta{
  display:inline-block;margin-top:1.4rem;
  font-size:.9rem;color:var(--ink);
}
.card.tool:hover .tool-cta{opacity:.7}

/* ---------- case study carousel ---------- */
.carousel{
  display:flex;gap:1.35rem;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-left:0;
  padding:.35rem .35rem 1.4rem;margin:0 -.35rem;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none}
.carousel:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--r-md)}
.card.cs{
  flex:0 0 calc((100% - 2.7rem) / 3);
  scroll-snap-align:start;
}
@media (max-width:900px){
  .card.cs{flex-basis:calc((100% - 1.35rem) / 2)}
  .section-head-row{flex-direction:column;align-items:flex-start;gap:1rem}
  .carousel-nav{align-self:flex-end}
}
@media (max-width:640px){
  .card.cs{flex-basis:82%}
  .section{margin-top:3.2rem}
}

/* ---------- recent list ---------- */
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line)}
.row a{
  display:grid;grid-template-columns:7.5rem 1fr auto;align-items:baseline;gap:1.5rem;
  padding:1.15rem .4rem;transition:opacity .15s;
}
.row a:hover{opacity:.62}
.row-kind{font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-45)}
.row-title{font-size:1.02rem;letter-spacing:-.016em;font-weight:600;line-height:1.35}
.row-meta{font-size:.82rem;color:var(--ink-45);white-space:nowrap}
.row.ph .row-title,.row.ph .row-kind{color:var(--ink-45);font-weight:500}
@media (max-width:640px){
  .row a{grid-template-columns:1fr auto;gap:.3rem 1rem;padding:1rem .2rem}
  .row-kind{grid-column:1/-1}
}

/* ---------- opt-in ---------- */
.optin-card{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:3rem 2.4rem;text-align:center;
}
.optin-card h2{
  font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.14;letter-spacing:-.03em;
  font-weight:700;margin:1rem auto .8rem;max-width:30rem;text-wrap:balance;
}
.optin-card h2 em{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:400;letter-spacing:-.038em;
}
.optin-card > p{margin:0 auto 1.9rem;color:var(--ink-70);max-width:28rem}
.ck{max-width:30rem;margin:0 auto}
.ck-row{display:flex;gap:.6rem}
.ck-input{
  flex:1 1 auto;min-width:0;box-sizing:border-box;
  font:inherit;font-size:1rem;padding:.85rem 1rem;
  color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;
}
.ck-input::placeholder{color:var(--ink-45)}
.ck-input:focus{outline:2px solid var(--ink);outline-offset:1px}
.ck-submit{
  flex:none;font:inherit;font-size:1rem;font-weight:600;padding:.85rem 1.4rem;
  color:var(--bg);background:var(--ink);
  border:0;border-radius:10px;cursor:pointer;
}
.ck-submit:hover:not(:disabled){opacity:.85}
.ck-submit:disabled{opacity:.55;cursor:default}
.ck-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ck-msg{margin:.9rem 0 0;font-size:.9rem;color:var(--ink-70)}
.ck-msg:empty{display:none}
.ck-msg.ok{color:var(--ink)}
@media (max-width:560px){
  .optin-card{padding:2.2rem 1.4rem}
  .ck-row{flex-direction:column}
}

/* ---------- footer ---------- */
.foot{flex-direction:column;align-items:stretch;gap:1.1rem;padding-top:3.5rem}
.foot-note{
  margin:0;max-width:40rem;
  font-size:.74rem;line-height:1.5;color:var(--ink-45);opacity:.8;
}
.foot-bar{display:flex;gap:1.5rem;align-items:center}
.foot-bar nav{display:flex;gap:1.25rem;margin-left:auto}

  .hero-sub{
    margin:1.1rem auto 0;max-width:34rem;
    font-size:1.05rem;line-height:1.55;color:var(--ink-70);
    text-wrap:pretty;
  }
  @media (max-width:560px){ .hero-sub{font-size:1rem;margin-top:.9rem} }

  /* ---------- list with thumbnails ---------- */
  .section-tight{margin-top:2.2rem}
  .list-thumbs .row a{grid-template-columns:auto 1fr auto;gap:1.25rem;padding:1.05rem .4rem;align-items:center}
  .row-thumb{
    position:relative;display:block;flex:none;
    width:5.5rem;aspect-ratio:16/11;
    border-radius:10px;overflow:hidden;
  }
  .row-text{display:flex;flex-direction:column;gap:.25rem;min-width:0}
  .list-thumbs .row-kind{font-size:.72rem}
  .list-thumbs .row-title{font-size:1rem}
  @media (max-width:640px){
    .list-thumbs .row a{grid-template-columns:auto 1fr;gap:.9rem}
    .list-thumbs .row-meta{display:none}
    .row-thumb{width:4.2rem}
  }

/* ---------- swipe file ---------- */
.callout{
  max-width:40rem;margin:0 auto 2.6rem;padding:1rem 1.2rem;
  border:1px solid var(--line);border-radius:12px;
  font-size:.92rem;line-height:1.55;color:var(--ink-70);text-align:center;
}
.hooks{list-style:none;margin:0 auto;padding:0;max-width:44rem;counter-reset:none}
.hook{
  display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;
  padding:1.5rem 0;border-bottom:1px solid var(--line);
}
.hook:first-child{border-top:1px solid var(--line)}
.hook-n{
  font-size:.82rem;letter-spacing:.06em;color:var(--ink-45);
  padding-top:.3rem;font-variant-numeric:tabular-nums;
}
.hook-template{
  margin:0 0 .5rem;font-size:1.22rem;line-height:1.3;
  letter-spacing:-.022em;font-weight:700;
}
.hook-example{
  margin:0;font-size:.98rem;line-height:1.5;color:var(--ink-70);
}
.hook-niche{
  display:inline-block;margin-right:.6rem;padding:.16rem .55rem;
  border:1px solid var(--line);border-radius:999px;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-45);vertical-align:.12em;
}
@media (max-width:560px){
  .hook{grid-template-columns:2rem 1fr;gap:.75rem;padding:1.25rem 0}
  .hook-template{font-size:1.08rem}
  .hook-niche{display:block;margin:0 0 .4rem;width:max-content}
}
  .more{
    max-width:44rem;margin:1.6rem auto 0;text-align:center;
    font-size:.86rem;letter-spacing:.06em;color:var(--ink-45);
  }

/* ---------- landing page (/optin) ---------- */
.lp-wrap{max-width:42rem;padding-top:5vh;padding-bottom:0}
.lp-logo{
  text-align:center;margin:0 0 3rem;
  font-family:Georgia,"Times New Roman",serif;font-size:1.15rem;color:var(--ink-45);
}
.lp .hero{padding:0 0 2rem}
.lp .hero h1{font-size:clamp(2rem,5vw,3rem)}
.lp-form{max-width:32rem;margin:0 auto 3.5rem}

.lp-foot{padding-top:2rem}
.lp-foot .foot-note{margin:0 auto;text-align:center;max-width:34rem}
.lp-foot a{color:inherit;border-bottom:1px solid var(--line)}
@media (max-width:560px){
  .lp-wrap{padding-top:3vh}
  .lp-logo{margin-bottom:2.2rem}
}
  .ck-note{
    margin:.9rem 0 0;text-align:center;
    font-size:.78rem;color:var(--ink-45);
  }
  .ck-note a{color:inherit;border-bottom:1px solid var(--line)}
  .ck-note a:hover{color:var(--ink-70)}
  .lp-theme{position:fixed;top:1.2rem;right:1.2rem;z-index:10}

/* Blurred taster of the real library. Two masks intersected so it fades
   down the page and in from both sides rather than ending on a hard crop. */
.peek{
  position:relative;margin-top:.5rem;
  max-height:44rem;overflow:hidden;
  -webkit-mask-image:
    linear-gradient(180deg,#000 0%,#000 8%,transparent 82%),
    linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(180deg,#000 0%,#000 8%,transparent 82%),
    linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
  mask-composite:intersect;
}
.peek .hooks{max-width:none;margin:0}
.peek .hook{pointer-events:none;user-select:none}
.peek .hook:nth-child(1){filter:blur(2.4px);opacity:.82}
.peek .hook:nth-child(2){filter:blur(3.2px);opacity:.74}
.peek .hook:nth-child(3){filter:blur(4.2px);opacity:.64}
.peek .hook:nth-child(4){filter:blur(5.2px);opacity:.54}
.peek .hook:nth-child(5){filter:blur(6.2px);opacity:.44}
.peek .hook:nth-child(6){filter:blur(7.2px);opacity:.34}
.peek .hook:nth-child(7){filter:blur(8.2px);opacity:.27}
.peek .hook:nth-child(8){filter:blur(9.2px);opacity:.21}
.peek .hook:nth-child(9){filter:blur(10px);opacity:.16}
@media (max-width:560px){ .peek{max-height:32rem} }