/* ==========================================================
   studio -- the dark theme for powersadvertising.com

   Scoped entirely to [data-theme="studio"] so main.css keeps
   the layout and the older themes keep working. Nothing here
   uses !important; where main.css is more specific this file
   matches its selector shape instead.

   The rule for colour: the page is near-black and white. One
   gradient -- magenta to violet to cyan -- and it appears in
   four places only: one line of the hero headline, the stat
   numbers, the primary button, and hairline rules. Everything
   else earns attention through type size and space.
   ========================================================== */

[data-theme="studio"] {
  --bg:            #0A0C12;
  --bg-2:          #0E1119;
  --surface:       #141824;
  --surface-2:     #1A1F2E;

  --ink:           #F4F6FA;
  --ink-2:         #C3CAD8;
  --muted:         #8A94A8;
  --faint:         #5A6376;

  --line:          rgba(255,255,255,.09);
  --line-2:        rgba(255,255,255,.16);

  --hot:           #FF2D78;
  --violet:        #7B3FF2;
  --cyan:          #22D3EE;

  --grad: linear-gradient(100deg, var(--hot) 0%, var(--violet) 48%, var(--cyan) 100%);

  --radius:        14px;
  --radius-lg:     20px;

  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="studio"] body{
  background:var(--bg);
  color:var(--ink-2);
  font-family:'Inter', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

[data-theme="studio"] h1,
[data-theme="studio"] h2,
[data-theme="studio"] h3,
[data-theme="studio"] h4{
  font-family:var(--font-display);
  color:var(--ink);
  letter-spacing:-.02em;
}

[data-theme="studio"] main,
[data-theme="studio"] header,
[data-theme="studio"] footer{ position:relative; z-index:1; }

/* ---- masthead --------------------------------------------- */

[data-theme="studio"] .site-header,
[data-theme="studio"] header.site-header{
  background:rgba(10,12,18,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

[data-theme="studio"] .site-nav a{
  color:var(--ink-2);
  font-weight:500;
  text-decoration:none;
}

[data-theme="studio"] .site-nav a:hover,
[data-theme="studio"] .site-nav a.active{ color:var(--ink); }

/* ---- hero -------------------------------------------------- */
/* The glow is two soft pools behind the type, not a colour wash
   over the whole page. On a dark ground a little light goes a
   long way, and the type has to stay the brightest thing. */

[data-theme="studio"] .exec-hero{
  position:relative;
  padding:clamp(4.5rem,11vw,9rem) 0 clamp(3.5rem,8vw,6rem);
  overflow:hidden;
}

[data-theme="studio"] .exec-hero::before{
  content:"";
  position:absolute; inset:-30% -10% auto -20%;
  height:120%;
  pointer-events:none;
  background:
    radial-gradient(44rem 30rem at 14% 18%, rgba(255,45,120,.20), transparent 62%),
    radial-gradient(40rem 28rem at 78% 8%,  rgba(34,211,238,.14), transparent 62%),
    radial-gradient(34rem 26rem at 52% 84%, rgba(123,63,242,.16), transparent 64%);
  filter:blur(6px);
}

[data-theme="studio"] .eyebrow{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  padding:.5rem 1rem;
  border:1px solid var(--line-2);
  border-radius:999px;
  background:rgba(255,255,255,.04);
}

[data-theme="studio"] #hero-heading,
[data-theme="studio"] .exec-hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.75rem,7.2vw,6.25rem);
  line-height:.97;
  letter-spacing:-.035em;
  color:var(--ink);
  margin:1.5rem 0 0;
  max-width:16ch;
}

[data-theme="studio"] .exec-hero h1 .h1-sub{
  display:block;
  font-family:var(--font-display);
  font-size:1em;
  font-weight:800;
  letter-spacing:-.035em;
  text-transform:none;
  margin-top:.04em;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

[data-theme="studio"] .lead{
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--muted);
  max-width:58ch;
  margin-top:1.75rem;
}

/* ---- buttons ----------------------------------------------- */
/* The primary button is the only filled gradient on the page.
   The gradient sits on a pseudo-element so the hover can lift
   its brightness without re-painting the whole background. */

[data-theme="studio"] .hero-actions{
  display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.25rem;
}

[data-theme="studio"] .btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.975rem;
  line-height:1;
  padding:1rem 1.75rem;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .2s var(--ease),
             background-color .2s var(--ease),
             transform .2s var(--ease);
}

[data-theme="studio"] .btn:hover{
  border-color:rgba(255,255,255,.30);
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}

[data-theme="studio"] .btn-primary,
[data-theme="studio"] .btn-on-dark{
  border-color:transparent;
  background:var(--grad);
  color:#fff;
  font-weight:700;
}

[data-theme="studio"] .btn-primary::after,
[data-theme="studio"] .btn-on-dark::after{
  content:"";
  position:absolute; inset:0;
  background:#fff;
  opacity:0;
  transition:opacity .2s var(--ease);
}

[data-theme="studio"] .btn-primary:hover::after,
[data-theme="studio"] .btn-on-dark:hover::after{ opacity:.12; }

[data-theme="studio"] .btn-primary:hover,
[data-theme="studio"] .btn-on-dark:hover{
  background:var(--grad);
  border-color:transparent;
}

[data-theme="studio"] .btn > *{ position:relative; z-index:1; }

[data-theme="studio"] .btn-secondary,
[data-theme="studio"] .btn-ghost-on-dark{
  background:transparent;
  border-color:var(--line-2);
  color:var(--ink);
}

/* ---- hero furniture ---------------------------------------- */

[data-theme="studio"] .hero-principal{
  display:block;
  margin-top:1.75rem;
  padding:.9rem 1.1rem .9rem 1.25rem;
  max-width:56ch;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--ink-2);
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-left:2px solid transparent;
  border-image:var(--grad) 1;
  border-radius:0 var(--radius) var(--radius) 0;
}

[data-theme="studio"] .hero-contact{
  margin-top:2rem;
  color:var(--faint);
  font-size:.9375rem;
}

[data-theme="studio"] .hero-contact a{ color:var(--ink-2); text-decoration:none; }
[data-theme="studio"] .hero-contact a:hover{ color:var(--ink); }
[data-theme="studio"] .dot{ color:var(--faint); }

/* ---- sections ---------------------------------------------- */

[data-theme="studio"] .exec-section{
  position:relative;
  padding:clamp(4rem,9vw,7.5rem) 0;
  border-top:1px solid var(--line);
}

[data-theme="studio"] .bg-elev{ background:var(--bg-2); }
[data-theme="studio"] .bg-dark{ background:var(--bg); }

[data-theme="studio"] .section-head{ max-width:56ch; margin:0 0 3rem; }
[data-theme="studio"] .section-head.text-center{ margin-left:auto; margin-right:auto; text-align:center; }

[data-theme="studio"] .section-head h2{
  font-size:clamp(2rem,4.4vw,3.5rem);
  line-height:1.04;
  font-weight:800;
  margin:1.1rem 0 1rem;
}

[data-theme="studio"] .section-head p{
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--muted);
  margin:0;
}

[data-theme="studio"] .tag{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  padding:.35rem .75rem;
  border:1px solid var(--line);
  border-radius:999px;
}

/* ---- cards ------------------------------------------------- */
/* One surface colour, one hairline, no shadow. Depth comes from
   the border lifting on hover, which on a dark ground reads more
   like a screen than a sheet of paper. */

[data-theme="studio"] .svc-grid,
[data-theme="studio"] .cap-grid,
[data-theme="studio"] .grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}

[data-theme="studio"] .card,
[data-theme="studio"] .svc-card,
[data-theme="studio"] .cap-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  transition:border-color .22s var(--ease),
             background-color .22s var(--ease),
             transform .22s var(--ease);
}

[data-theme="studio"] .card:hover,
[data-theme="studio"] .svc-card:hover,
[data-theme="studio"] .cap-item:hover{
  border-color:var(--line-2);
  background:var(--surface-2);
  transform:translateY(-2px);
}

[data-theme="studio"] .svc-card{ padding-top:1.5rem; }

[data-theme="studio"] .svc-card .tag{
  background:rgba(255,255,255,.04);
  color:var(--ink);
  margin-bottom:1rem;
}

[data-theme="studio"] .svc-card h3,
[data-theme="studio"] .card h3{
  font-size:1.1875rem;
  font-weight:700;
  line-height:1.25;
  margin:0 0 .6rem;
}

[data-theme="studio"] .svc-card p,
[data-theme="studio"] .card p{
  margin:0;
  font-size:.9375rem;
  line-height:1.65;
  color:var(--muted);
}

/* main.css lays .cap-item out as a row; stacked reads better in
   a three-across grid and keeps the headings off one word each. */
[data-theme="studio"] .cap-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.4rem;
  font-size:.9375rem;
  font-weight:400;
  color:var(--muted);
}

[data-theme="studio"] .cap-item h3{
  font-size:1.0625rem;
  font-weight:700;
  color:var(--ink);
  margin:0 0 .35rem;
}

[data-theme="studio"] .cap-item p{ margin:0; color:var(--muted); line-height:1.6; }

[data-theme="studio"] .cap-item .check{
  width:1.75rem; height:1.75rem;
  flex:0 0 1.75rem;
  border-radius:50%;
  background:rgba(34,211,238,.12);
  border:1px solid rgba(34,211,238,.35);
  color:var(--cyan);
  margin-bottom:.75rem;
}

/* ---- the numbers ------------------------------------------- */

[data-theme="studio"] .stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

[data-theme="studio"] .stat{
  padding:2.25rem 1.5rem;
  border-right:1px solid var(--line);
}

[data-theme="studio"] .stat:last-child{ border-right:0; }

[data-theme="studio"] .stat b{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.25rem,4.6vw,3.5rem);
  line-height:1;
  letter-spacing:-.03em;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

[data-theme="studio"] .stat span{
  display:block;
  margin-top:.65rem;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  line-height:1.5;
}

/* ---- work --------------------------------------------------- */
/* Cinematic means the picture carries the panel and the type sits
   on top of it. The scrim is what keeps white text legible over
   an image nobody art-directed for that purpose. */

[data-theme="studio"] .work-strip{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
}

[data-theme="studio"] .work-shot{
  position:relative;
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}

[data-theme="studio"] .work-shot:hover{
  border-color:var(--line-2);
  transform:translateY(-3px);
}

[data-theme="studio"] .work-shot img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  filter:saturate(.78) brightness(.82);
  transition:filter .35s var(--ease), transform .5s var(--ease);
}

[data-theme="studio"] .work-shot:hover img{
  filter:saturate(1) brightness(1);
  transform:scale(1.03);
}

[data-theme="studio"] .work-shot figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:2.75rem 1.1rem 1.1rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.9375rem;
  line-height:1.3;
  color:#fff;
  background:linear-gradient(to top, rgba(6,8,12,.94) 12%, rgba(6,8,12,.7) 48%, transparent 100%);
}

[data-theme="studio"] .work-shot figcaption span{
  display:block;
  margin-top:.2rem;
  font-weight:500;
  font-size:.8125rem;
  color:var(--ink-2);
}

/* ---- links, footer ------------------------------------------ */

[data-theme="studio"] main p a:not(.btn),
[data-theme="studio"] main li a:not(.btn){
  color:var(--cyan);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

[data-theme="studio"] main p a:not(.btn):hover{ color:var(--hot); }

[data-theme="studio"] .site-footer{
  background:var(--bg-2);
  border-top:1px solid var(--line);
  color:var(--muted);
  padding:clamp(3rem,6vw,4.5rem) 0 2rem;
}

[data-theme="studio"] .site-footer a{ color:var(--ink-2); text-decoration:none; }
[data-theme="studio"] .site-footer a:hover{ color:var(--ink); }
[data-theme="studio"] .site-footer h4,
[data-theme="studio"] .site-footer .brand-block,
[data-theme="studio"] .site-footer .brand-lockup{ color:var(--ink); }

[data-theme="studio"] .copyright{
  border-top:1px solid var(--line);
  padding-top:1.5rem;
  margin-top:2.5rem;
  color:var(--faint);
  font-size:.875rem;
}

[data-theme="studio"] .footer-wordmark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.5rem,11vw,7rem);
  line-height:.9;
  letter-spacing:-.045em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.14);
  margin:0 0 2rem;
  user-select:none;
}

/* ---- narrow screens, motion --------------------------------- */

@media (max-width:640px){
  [data-theme="studio"] .hero-actions{ flex-direction:column; }
  [data-theme="studio"] .btn{ width:100%; }
  [data-theme="studio"] .stat{ border-right:0; border-bottom:1px solid var(--line); }
  [data-theme="studio"] .stat:last-child{ border-bottom:0; }
}

@media (hover:none){
  [data-theme="studio"] .work-shot:hover,
  [data-theme="studio"] .card:hover,
  [data-theme="studio"] .svc-card:hover,
  [data-theme="studio"] .cap-item:hover{ transform:none; }
  [data-theme="studio"] .work-shot img{ filter:saturate(.92) brightness(.9); }
}

@media (prefers-reduced-motion:reduce){
  [data-theme="studio"] *,
  [data-theme="studio"] *::before,
  [data-theme="studio"] *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* ---- corrections ------------------------------------------- */

/* The three pools stacked into a flat navy field across the whole
   hero. Two pools, weaker, and no cyan up top: the page should
   read near-black with colour only where the type is. */
[data-theme="studio"] .exec-hero::before{
  background:
    radial-gradient(38rem 26rem at 10% 14%, rgba(255,45,120,.15), transparent 60%),
    radial-gradient(32rem 24rem at 62% 78%, rgba(123,63,242,.13), transparent 62%);
}

/* border-image paints every edge, so the single left rule came
   out as a box outline. A plain left border does what was meant. */
[data-theme="studio"] .hero-principal{
  border:1px solid var(--line);
  border-left:3px solid var(--hot);
  border-image:none;
}

/* .tag inherits stretch from the card's flex column, so a pill
   holding one digit stretched the full width and read as an
   empty form field. */
[data-theme="studio"] .svc-card .tag,
[data-theme="studio"] .card .tag{
  align-self:flex-start;
  width:-moz-fit-content;
  width:fit-content;
  min-width:2.25rem;
  text-align:center;
}

[data-theme="studio"] .svc-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* main.css gives .exec-hero its own blue radial wash. The themed
   ::before was layering on top of that, which is why the hero
   came out corporate navy instead of near-black. */
[data-theme="studio"] .exec-hero{
  background:var(--bg);
  border-bottom:1px solid var(--line);
}

@media (min-width:900px){
  [data-theme="studio"] .work-strip{ grid-template-columns:repeat(3,1fr); }
}

/* ---- pill ends -------------------------------------------- */
/* Two things were chewing the ends of the gradient buttons: a
   1px transparent border, which lets the dark page show through
   at the corners where the radius antialiases, and overflow
   hidden clipping the hover overlay to a square-cornered box.
   The border goes (padding absorbs the pixel) and the overlay
   takes the pill radius itself, so nothing needs clipping. */

[data-theme="studio"] .btn{ overflow:visible; }

[data-theme="studio"] .btn-primary,
[data-theme="studio"] .btn-on-dark{
  border:0;
  padding:calc(1rem + 1px) calc(1.75rem + 1px);
}

[data-theme="studio"] .btn-primary::after,
[data-theme="studio"] .btn-on-dark::after{
  border-radius:inherit;
}

/* ---- background fields ------------------------------------- */
/* Jason's own work, blurred past legibility and pulled down into
   the page's black. It is there for depth, not for subject; if
   you can tell what the photograph was, it has been mixed too
   high. A scrim over the top keeps the type at full contrast,
   because a headline that fights its own background is a
   headline nobody finishes reading. */

[data-theme="studio"] .exec-hero{
  background-color:var(--bg);
  background-image:url("/images/bg/icebears.jpg");
  background-size:cover;
  background-position:50% 40%;
  background-repeat:no-repeat;
}

[data-theme="studio"] .exec-hero::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg,
    rgba(10,12,18,.62) 0%,
    rgba(10,12,18,.80) 55%,
    var(--bg) 100%);
}

[data-theme="studio"] .exec-hero > *{ position:relative; z-index:1; }

[data-theme="studio"] .exec-section.bg-dark{
  background-color:var(--bg);
  background-image:url("/images/bg/waterresort.jpg");
  background-size:cover;
  background-position:50% 50%;
}

[data-theme="studio"] .exec-section.bg-dark::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg,
    var(--bg) 0%,
    rgba(10,12,18,.76) 45%,
    var(--bg) 100%);
}

[data-theme="studio"] .exec-section.bg-dark > *{ position:relative; z-index:1; }

/* First pass buried the field almost entirely. Letting more of
   it through: the type still clears WCAG AA against the darkest
   part of the image, which is the only constraint that matters
   here. */
[data-theme="studio"] .exec-hero::after{
  background:linear-gradient(180deg,
    rgba(10,12,18,.42) 0%,
    rgba(10,12,18,.66) 58%,
    var(--bg) 100%);
}

[data-theme="studio"] .exec-section.bg-dark::after{
  background:linear-gradient(180deg,
    var(--bg) 0%,
    rgba(10,12,18,.62) 45%,
    var(--bg) 100%);
}

/* ---- section variety --------------------------------------- */
/* An unbroken black page reads as one long section however many
   headings you put in it. Alternating three photographic fields
   with two flat colour screens gives the eye a reason to keep
   moving, and the scrims keep every band at the same text
   contrast so nothing gets harder to read on the way down. */

[data-theme="studio"] .sec-gets,
[data-theme="studio"] .sec-rank,
[data-theme="studio"] .sec-cta{
  background-color:var(--bg);
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}

[data-theme="studio"] .sec-gets{ background-image:url("/images/bg/pa-work.jpg"); }
[data-theme="studio"] .sec-rank{ background-image:url("/images/bg/pa-care.jpg"); }
[data-theme="studio"] .sec-cta { background-image:url("/images/bg/pa-cta.jpg"); }

[data-theme="studio"] .exec-hero{
  background-image:url("/images/bg/pa-hero.jpg");
  background-position:50% 35%;
}

[data-theme="studio"] .sec-gets::after,
[data-theme="studio"] .sec-rank::after,
[data-theme="studio"] .sec-cta::after,
[data-theme="studio"] .sec-steps::after,
[data-theme="studio"] .sec-care::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
}

[data-theme="studio"] .sec-gets > *,
[data-theme="studio"] .sec-rank > *,
[data-theme="studio"] .sec-cta > *,
[data-theme="studio"] .sec-steps > *,
[data-theme="studio"] .sec-care > *{ position:relative; z-index:1; }

[data-theme="studio"] .sec-gets::after{
  background:linear-gradient(180deg, var(--bg) 0%, rgba(10,12,18,.70) 40%, rgba(10,12,18,.88) 100%);
}

[data-theme="studio"] .sec-rank::after{
  background:linear-gradient(180deg, rgba(10,12,18,.88) 0%, rgba(10,12,18,.66) 50%, var(--bg) 100%);
}

[data-theme="studio"] .sec-cta::after{
  background:linear-gradient(180deg, var(--bg) 0%, rgba(10,12,18,.58) 50%, rgba(10,12,18,.92) 100%);
}

/* The two colour screens carry no photograph at all -- just the
   brand hues at very low strength over the base black. */
[data-theme="studio"] .sec-steps::after{
  background:
    radial-gradient(60rem 34rem at 18% 8%,  rgba(123,63,242,.20), transparent 62%),
    radial-gradient(46rem 30rem at 92% 92%, rgba(255,45,120,.13), transparent 62%);
}

[data-theme="studio"] .sec-care::after{
  background:
    radial-gradient(58rem 32rem at 84% 10%, rgba(34,211,238,.16), transparent 62%),
    radial-gradient(48rem 30rem at 8% 88%,  rgba(123,63,242,.15), transparent 64%);
}

/* ---- the blog ---------------------------------------------- */

[data-theme="studio"] .post-grid{
  display:grid;
  gap:1.5rem;
  /* auto-FILL, not auto-fit: auto-fit collapses the empty tracks,
     so a single post stretched to the full width of the page and
     its thumbnail became a mural. */
  grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));
}

[data-theme="studio"] .post-card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color .22s var(--ease), transform .22s var(--ease);
}

[data-theme="studio"] .post-card:hover{
  border-color:var(--line-2);
  transform:translateY(-2px);
}

[data-theme="studio"] .post-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

[data-theme="studio"] .post-card img,
[data-theme="studio"] .post-card-blank{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}

[data-theme="studio"] .post-meta{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.6875rem;
  letter-spacing:.14em;
  color:var(--faint);
  padding:1.25rem 1.25rem 0;
}

[data-theme="studio"] .post-card h2{
  font-size:1.1875rem;
  font-weight:700;
  line-height:1.25;
  margin:.6rem 0 .5rem;
  padding:0 1.25rem;
  color:var(--ink);
}

[data-theme="studio"] .post-card p{
  margin:0;
  padding:0 1.25rem;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--muted);
}

[data-theme="studio"] .post-src{
  margin-top:auto;
  padding:1rem 1.25rem 1.25rem !important;
  font-size:.8125rem;
  color:var(--faint) !important;
}

[data-theme="studio"] .post-src a{ color:var(--muted); }

/* ---- a single piece ---------------------------------------- */
/* One column, measured at about 68 characters. Long-form on a
   dark ground needs more line-height and a slightly softer white
   than the interface does, or it glares. */

[data-theme="studio"] .post-body .container{ max-width:46rem; }

[data-theme="studio"] .crumb{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 2rem;
}

[data-theme="studio"] .crumb a{ color:var(--muted); text-decoration:none; }
[data-theme="studio"] .crumb a:hover{ color:var(--ink); }

[data-theme="studio"] .post-body .post-meta{ padding:0; }

[data-theme="studio"] .post-title{
  font-size:clamp(2rem,4.6vw,3.25rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.025em;
  margin:.75rem 0 1rem;
}

[data-theme="studio"] .post-hero{
  margin:2.5rem 0;
}

[data-theme="studio"] .post-hero img{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}

[data-theme="studio"] .post-hero figcaption{
  margin-top:.65rem;
  font-size:.8125rem;
  color:var(--faint);
}

[data-theme="studio"] .post-hero figcaption a{ color:var(--muted); }

[data-theme="studio"] .post-prose{
  font-size:1.0625rem;
  line-height:1.8;
  color:#D6DCE8;
}

[data-theme="studio"] .post-prose p{ margin:0 0 1.4rem; }

[data-theme="studio"] .post-prose h2{
  font-size:1.5rem;
  font-weight:700;
  line-height:1.25;
  margin:2.6rem 0 1rem;
  color:var(--ink);
}

[data-theme="studio"] .post-prose ul{ margin:0 0 1.4rem; padding-left:1.2rem; }
[data-theme="studio"] .post-prose li{ margin:0 0 .6rem; }
[data-theme="studio"] .post-prose strong{ color:var(--ink); font-weight:600; }

[data-theme="studio"] .post-faq-head{
  font-size:1.375rem;
  margin:3rem 0 1.25rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}

[data-theme="studio"] .faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:1.25rem 1.35rem;
  margin:0 0 .85rem;
}

[data-theme="studio"] .faq-item h3{
  font-size:1.0625rem;
  font-weight:700;
  margin:0 0 .5rem;
}

[data-theme="studio"] .faq-item p{
  margin:0;
  font-size:.9688rem;
  line-height:1.65;
  color:var(--muted);
}

[data-theme="studio"] .post-source{
  margin:2.5rem 0 0;
  padding:1.1rem 1.25rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-left:3px solid var(--cyan);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.9375rem;
  line-height:1.65;
  color:var(--muted);
}

[data-theme="studio"] .post-back{ margin:2.5rem 0 0; }