/* "Fresh Take" experiment variant — the homepage layout, plus the chrome and
   content styling for the blog index and the post page.

   The rules are scoped to .ft, the class on every block of fresh-take
   markup, so they cannot restyle the control layout sitting beside them.
   The homepage variant is one .ft block holding a whole document; the blog
   index and a post page have two — the header and the footer — because what
   sits between them is a single copy shared by both designs. That shared
   content is styled off html[data-home-design="fresh_take"] instead; see the
   blog and post sections lower down.

   The palette is --ft- prefixed and lives on :root because both of those
   need it. Unprefixed names would collide with site.css's own --ink, --sans,
   --maxw and --script, which the control layout is still using on the same
   page. */

:root{
  --ft-green:#014235;
  --ft-green-mid:#4a9183;
  --ft-green-soft:#e4ede9;
  --ft-cream:#faf7f2;
  --ft-sand:#efe7da;
  --ft-ink:#16211d;
  --ft-muted:#4c5b56;
  --ft-sans:"Mulish","Avenir Next",system-ui,sans-serif;
  --ft-serif:"Fraunces",Georgia,serif;
  --ft-script:"Mr De Haviland",cursive;
  --ft-maxw:1140px;
  --ft-r:3px;
}

html[data-home-design="fresh_take"] body{
  background:#faf7f2;
  color:#16211d;
  font-weight:350;
}

.ft{
  background:var(--ft-cream);
  color:var(--ft-ink);
  font-family:var(--ft-sans);
  font-weight:350;
  line-height:1.65;
}
.ft img{max-width:100%;height:auto;display:block}
.ft h1,.ft h2,.ft h3{
  font-family:var(--ft-serif);font-weight:400;line-height:1.1;margin:0;letter-spacing:-.01em
}
.ft .wrap{max-width:var(--ft-maxw);margin:0 auto;padding:0 24px}
.ft .eyebrow{
  font-family:var(--ft-sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ft-green-mid)
}
.ft .lede{font-size:17px;color:var(--ft-muted);max-width:52ch}

.ft .btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--ft-green);color:#fff;
  text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.01em;padding:14px 26px;
  border:0;border-radius:var(--ft-r);cursor:pointer;transition:background .15s
}
.ft .btn:hover{background:#012d24}
.ft .btn-text{
  display:inline-flex;align-items:center;gap:8px;color:var(--ft-green);text-decoration:none;
  font-size:14px;font-weight:600;border-bottom:1px solid rgba(1,66,53,.3);padding-bottom:2px
}
.ft .btn-text:hover{border-color:var(--ft-green)}

.ft header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:rgba(250,247,242,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(1,66,53,.09)
}
.ft .hdr{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
/* The wordmark is the same script lockup as the rest of the site, not a
   variant-specific treatment — the brand shouldn't change between A and B. */
.ft .mark{text-decoration:none;line-height:1;display:block}
.ft .mark .name{
  display:block;font-family:var(--ft-script);font-size:34px;color:var(--ft-green);
  margin-bottom:-2px
}
.ft .mark .sub{
  display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ft-green)
}
/* Scoped to .hdr, not every nav in a .ft block. The footer's link column is
   a <nav> too, and the mobile rule below hides these links — unscoped, it
   emptied the footer's Explore column at narrow widths. */
.ft .hdr nav{display:flex;gap:8px;align-items:center}
/* Every link carries the highlight's padding and radius whether it is lit or
   not. The highlight moves as you scroll, and without this the box appearing
   on one link would nudge the others sideways on every section boundary. */
.ft .hdr nav a{
  color:var(--ft-green);text-decoration:none;font-size:14px;font-weight:500;
  padding:9px 14px;border-radius:var(--ft-r)
}
.ft .hdr nav a:hover{text-decoration:underline;text-underline-offset:4px}
/* "You are here." The link for the page you are on — or, on the homepage, for
   the section you are reading — wears the green box. build.py stamps
   aria-current="page" on POV Blog for the blog index and post pages, and the
   section spy sets aria-current="location" while scrolling; one rule covers
   both. Only colour changes, never metrics: no weight change either, because
   heavier text is wider text and that would shift the row too. */
.ft .hdr nav a[aria-current]{background:var(--ft-green);color:#fff}
.ft .hdr nav a[aria-current]:hover{background:#012d24;text-decoration:none}

.ft .hero{padding-block:70px 84px}
.ft .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.ft .hero h1{font-size:clamp(38px,4.6vw,60px);margin:18px 0 22px}
.ft .hero h1 em{font-style:italic;color:var(--ft-green)}
.ft .hero .cta{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:32px}
.ft .pt{position:relative}
/* The portrait is a circle on transparent corners, baked into the image, so
   this box has to stay square: the 4/4.6 crop this rule used to carry sliced
   the sides off the circle. No border-radius or object-fit either — the shape
   is the artwork's, not the box's. height:auto still matters, so that the
   width/height attributes reserve the right space without pinning the
   rendered height to 1080px. */
.ft .pt img{position:relative;width:100%;height:auto;aspect-ratio:1}

.ft .band{background:var(--ft-green);color:#fff;padding:74px 0}
.ft .band .q{
  font-family:var(--ft-serif);font-style:italic;font-size:clamp(25px,3vw,38px);
  line-height:1.35;text-align:center;max-width:22ch;margin:0 auto
}
.ft .band .sig{
  font-family:var(--ft-script);font-size:46px;text-align:center;color:#a9cdc3;margin-top:18px;line-height:1
}

.ft section.pad{padding-block:84px}
.ft .sec-head{max-width:640px;margin-bottom:44px}
.ft .sec-head h2{font-size:clamp(28px,3.2vw,40px);margin:12px 0 14px}

.ft .about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:58px;align-items:center}
.ft .about-grid img{border-radius:var(--ft-r);aspect-ratio:4/3.2;object-fit:cover}
.ft .about-body h2{font-size:clamp(26px,3vw,34px);margin:12px 0 20px}
.ft .about-body p{font-size:16.5px;color:var(--ft-muted);margin:0 0 16px}
.ft .about-body p strong{color:var(--ft-ink);font-weight:600}

.ft .svc{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ft .card{
  background:#fff;border:1px solid rgba(1,66,53,.1);border-radius:var(--ft-r);
  padding:32px 30px 34px;display:flex;flex-direction:column
}
.ft .card .num{font-family:var(--ft-serif);font-size:13px;font-weight:600;color:var(--ft-green-mid);letter-spacing:.12em;margin-bottom:16px}
.ft .card h3{font-size:23px;margin-bottom:12px}
.ft .card p{font-size:15px;color:var(--ft-muted);margin:0}
.ft .card-link{
  align-self:flex-start;margin-top:18px;color:var(--ft-green);font-size:14px;
  font-weight:700;text-decoration:none;border-bottom:1px solid rgba(1,66,53,.3)
}
.ft .card-link:hover{border-color:var(--ft-green)}
.ft .card-link + .card-link{margin-top:10px}
.ft .pill{
  display:inline-block;align-self:flex-start;background:var(--ft-green-soft);color:var(--ft-green);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:99px;margin-bottom:14px
}

.ft .partners{background:#fff;border-top:1px solid rgba(1,66,53,.08);border-bottom:1px solid rgba(1,66,53,.08)}
.ft .plogos{display:grid;grid-template-columns:repeat(4,1fr);gap:38px 30px;align-items:center;justify-items:center;margin-top:34px}
.ft .plogos img{width:100%;max-width:165px;height:56px;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s}
.ft .plogos img:hover{filter:none;opacity:1}

.ft .ig{text-align:left}
.ft .ig-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;margin-bottom:30px}
.ft .ig-head h2{font-size:clamp(28px,3.2vw,40px);margin:0}
.ft .ig-head .card-link{margin-top:0}
.ft .ig-tile{border-radius:var(--ft-r)}

/* Testimonials: this arm's own cards, shown one at a time. The slides carry
   the same words as the control — build.py renders both arms from
   content/testimonials.json — but the presentation is this layout's.
   .arrow and .dots are global in site.css and drawn white for the control's
   dark band, so both have to be restated for a light section. Padding on the
   track leaves the arrows a gutter rather than sitting them on the card. */
.ft .tcarousel{position:relative;padding-inline:52px}
.ft .tcarousel .slide{display:none}
.ft .tcarousel .slide.on{display:block}
.ft .tcard{
  background:#fff;border:1px solid rgba(1,66,53,.1);border-radius:var(--ft-r);
  padding:34px 32px;display:flex;flex-direction:column
}
.ft .tcard .qm{font-family:var(--ft-serif);font-size:40px;line-height:.8;color:var(--ft-green-mid);display:block;margin-bottom:6px}
.ft .tcard blockquote{margin:0 0 22px;font-size:15.5px;color:var(--ft-ink)}
.ft .tcard blockquote p{margin:0 0 14px}
.ft .tcard blockquote p:last-child{margin-bottom:0}
.ft .tcard .attr{margin-top:auto;border-top:1px solid rgba(1,66,53,.12);padding-top:14px;font-size:13px;color:var(--ft-muted)}
.ft .tcard .attr b{display:block;color:var(--ft-ink);font-size:14px;font-weight:700;letter-spacing:.04em}
.ft .tcarousel .arrow{color:var(--ft-green);font-size:30px;padding:8px}
.ft .tcarousel .arrow:hover{opacity:.55}
.ft .tcarousel .arrow.l{left:0}
.ft .tcarousel .arrow.r{right:0}
.ft .tcarousel .dots{margin-top:22px}
.ft .tcarousel .dots button{background:rgba(1,66,53,.26)}
.ft .tcarousel .dots button[aria-selected="true"]{background:var(--ft-green)}

.ft .memo{background:var(--ft-sand)}
.ft .memo-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ft .memo h2{font-size:clamp(26px,3vw,36px);margin:12px 0 12px}
.ft .memo p{color:var(--ft-muted);font-size:16px;margin:0}
.ft .memo form{background:#fff;border-radius:var(--ft-r);padding:28px}
/* The interest list dialog, which site.css styles for the control. Same
   markup, this layout's treatment: white card, Fraunces heading, the green
   the rest of the variant uses. */
.ft .waitlist-dialog::backdrop{background:rgba(1,66,53,.6)}
.ft .waitlist-panel{background:#fff;border-radius:var(--ft-r);padding:38px 36px 34px}
.ft .waitlist-panel h2{
  font-family:var(--ft-serif);font-weight:400;font-size:clamp(26px,3vw,34px);
  letter-spacing:-.01em;color:var(--ft-ink);margin:12px 0 14px
}
.ft .waitlist-note{color:var(--ft-muted);font-size:16px;margin:0 0 24px;max-width:none}
.ft .waitlist-close{font-family:var(--ft-sans);color:var(--ft-green)}
.ft .waitlist-dialog .btn{width:100%;justify-content:center}
.ft .lbl{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ft-muted);margin-bottom:7px}
.ft .inp{
  width:100%;border:1px solid rgba(1,66,53,.25);border-radius:var(--ft-r);background:#fff;
  font:inherit;font-size:15px;padding:12px 13px;color:var(--ft-ink)
}
.ft .inp:focus{outline:2px solid var(--ft-green-mid);outline-offset:1px;border-color:var(--ft-green)}
.ft .check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ft-muted);margin:14px 0 18px}
.ft .check input{width:16px;height:16px;margin-top:2px;accent-color:var(--ft-green)}

.ft .connect-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:58px;align-items:start}
.ft .fr{margin-bottom:18px}
.ft .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ft textarea.inp{height:118px;resize:vertical}
.ft .alt{margin-top:26px;font-size:15px;color:var(--ft-muted)}
.ft .alt a{color:var(--ft-green);font-weight:600}

.ft footer{background:var(--ft-green);color:#fff;padding:56px 0 34px}
/* A grid, not justify-content:space-between. The three blocks only add up to
   about 500px of content, so space-between spent the other ~600px as two
   300px voids — the link column floated in the middle of nowhere and the
   social row sat marooned against the right edge. Named tracks give the
   brand the room its 30ch paragraph needs and let the two short columns sit
   on a shared rhythm instead of being flung to the extremes. */
.ft .fgrid{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:40px 56px;align-items:start
}
.ft footer .mark .name{color:#fff}
.ft footer .mark .sub{color:#a9cdc3}
.ft .fcred{color:#a9cdc3;font-size:14px;margin:14px 0 0;max-width:30ch}
/* Column headings. Same eyebrow treatment as the light sections, lightened
   for the green, so each column reads as a labelled group rather than a
   loose pile of links. */
.ft .fh{
  font-family:var(--ft-sans);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:#7fb3a5;margin:0 0 16px
}
.ft .fcol{padding-top:6px}
.ft .fnav{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.ft .fnav a{color:#dce9e5;text-decoration:none;font-size:14px}
.ft .fnav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ft .fsoc{display:flex;gap:14px}
.ft .fsoc a{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.3);border-radius:50%;
  display:grid;place-items:center;color:#fff;transition:background .15s,border-color .15s
}
.ft .fsoc a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
.ft .fsoc svg{width:17px;height:17px;fill:currentColor}
.ft .fbot{
  margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  font-size:12.5px;color:#a9cdc3;display:flex;justify-content:space-between;
  align-items:center;gap:8px 28px;flex-wrap:wrap
}
/* Privacy and the opt-out live down here with the copyright rather than in
   Explore — they are page furniture, not places to go, and the control
   footer pairs them the same way. */
.ft .fmeta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ft .fmeta a,
.ft .fmeta .consent-link{color:#a9cdc3;text-decoration:none;font-size:12.5px;text-align:left}
.ft .fmeta a:hover,
.ft .fmeta .consent-link:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.ft .form-status.is-ok{color:var(--ft-green);font-weight:600}
.ft .form-status.is-error{color:#8a2b20}

@media (max-width:900px){
  /* No burger in this header, so the CTA is the one link that stays. */
  .ft .hdr nav a:not(.nav-cta){display:none}
  .ft .hero-grid,
  .ft .about-grid,
  .ft .svc,
  .ft .memo-grid,
  .ft .connect-grid{grid-template-columns:1fr;gap:38px}
  .ft .waitlist-panel{padding:32px 22px 28px}
  .ft .pt{order:-1;max-width:400px}
  .ft .plogos{grid-template-columns:repeat(2,1fr)}
  .ft section.pad{padding-block:60px}
  .ft .hero{padding-block:48px 60px}
  .ft .band{padding:56px 0}
  /* No room for a gutter, so the arrows move onto the card and need a disc
     behind them to stay legible over the quote. */
  .ft .tcarousel{padding-inline:0}
  .ft .tcarousel .arrow{
    width:34px;height:34px;padding:0;font-size:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.94);box-shadow:0 1px 6px rgba(1,66,53,.22)
  }
  .ft .tcarousel .arrow.l{left:6px}
  .ft .tcarousel .arrow.r{right:6px}
  /* The footer had no rules of its own here and relied on flex-wrap, which
     dropped the icons wherever they happened to land. Two tracks with the
     brand across the top keeps the break deliberate. */
  .ft .fgrid{grid-template-columns:1fr 1fr;gap:36px 40px}
  .ft .fbrand{grid-column:1/-1}
  .ft .fcol{padding-top:0}
}

@media (max-width:560px){
  .ft .fgrid{grid-template-columns:1fr;gap:32px}
  .ft footer{padding:44px 0 30px}
  .ft .fbot{margin-top:36px;justify-content:flex-start;gap:12px 22px}
}

/* ---------- blog index ----------

   Same shape as the post page below: one set of cards, restyled here for the
   fresh-take arm rather than duplicated. The cards become the homepage's
   bordered white card, and the script "POV Blog" becomes a Fraunces heading —
   the script face stays where it belongs, on the wordmark. */

html[data-home-design="fresh_take"] .blog-head{
  padding-block:64px 0;text-align:center;max-width:var(--ft-maxw);margin:0 auto
}
html[data-home-design="fresh_take"] .blog-head .script-h{
  font-family:var(--ft-serif);font-weight:400;font-size:clamp(34px,4.6vw,54px);
  line-height:1.1;letter-spacing:-.01em;color:var(--ft-ink)
}
html[data-home-design="fresh_take"] .blog-head p{
  font-size:17px;color:var(--ft-muted);max-width:56ch;margin:16px auto 0
}
html[data-home-design="fresh_take"] .blog-feed{
  max-width:var(--ft-maxw);margin:0 auto;padding-block:40px 84px
}
/* The covers are a mixed bag — a book jacket, a square logo, wide photos,
   portraits. object-fit:cover fills the frame evenly but crops whatever
   doesn't fit, which beheaded the portraits and cut the BetterHelp logo in
   half. contain shows each one whole and pads the difference with the page's
   own cream. */
html[data-home-design="fresh_take"] .pcard .thumb{
  background:var(--ft-cream);border:1px solid rgba(1,66,53,.08)
}
html[data-home-design="fresh_take"] .pcard .thumb img{object-fit:contain}
/* Nothing to enlarge on hover once the whole image is already in view. */
html[data-home-design="fresh_take"] .pcard:hover .thumb img{transform:none}
html[data-home-design="fresh_take"] .pcard h2{
  font-family:var(--ft-serif);font-weight:400;line-height:1.22;
  letter-spacing:-.012em;color:var(--ft-ink)
}
html[data-home-design="fresh_take"] .pcard:hover h2{color:var(--ft-green)}
html[data-home-design="fresh_take"] .pcard .excerpt{
  line-height:1.7;color:var(--ft-muted)
}
html[data-home-design="fresh_take"] .pcard .pmeta{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ft-green-mid);display:flex;align-items:center;gap:14px
}
html[data-home-design="fresh_take"] .pcard .flag{
  font-family:var(--ft-sans);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ft-green);margin:0 0 12px
}

/* The lead post carries the full cover; the list below it trades the image
   down to a thumbnail so ten posts fit in the space three used to take. */
html[data-home-design="fresh_take"] .pcard.lead{
  display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;
  padding-bottom:44px;border-bottom:2px solid rgba(1,66,53,.14)
}
html[data-home-design="fresh_take"] .pcard.lead .thumb{
  aspect-ratio:4/3;border-radius:var(--ft-r)
}
html[data-home-design="fresh_take"] .pcard.lead h2{font-size:clamp(26px,3vw,38px)}
html[data-home-design="fresh_take"] .pcard.lead .excerpt{font-size:16.5px;margin-top:14px}
html[data-home-design="fresh_take"] .pcard.lead .pmeta{margin-top:20px}

html[data-home-design="fresh_take"] .post-rows{display:grid;margin-top:8px}
html[data-home-design="fresh_take"] .pcard.row{
  display:grid;grid-template-columns:112px minmax(0,1fr);gap:26px;
  align-items:center;padding:24px 0;border-bottom:1px solid rgba(1,66,53,.1);
  transition:background .15s
}
html[data-home-design="fresh_take"] .pcard.row:hover{
  background:rgba(1,66,53,.028)
}
html[data-home-design="fresh_take"] .pcard.row .thumb{aspect-ratio:1;border-radius:var(--ft-r)}
html[data-home-design="fresh_take"] .pcard.row h2{font-size:20px}
html[data-home-design="fresh_take"] .pcard.row .excerpt{
  font-size:14.5px;margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
html[data-home-design="fresh_take"] .pcard.row .pmeta{margin-top:12px}
html[data-home-design="fresh_take"] .blog-page-label{color:var(--ft-green-mid)}
html[data-home-design="fresh_take"] .blog-pagination{
  border-top-color:rgba(1,66,53,.14);font-family:var(--ft-sans)
}
html[data-home-design="fresh_take"] .blog-page-direction,
html[data-home-design="fresh_take"] .blog-page-number{color:var(--ft-green)}
html[data-home-design="fresh_take"] .blog-page-number{
  border-color:rgba(1,66,53,.2);border-radius:var(--ft-r)
}
html[data-home-design="fresh_take"] a.blog-page-number:hover{
  background:var(--ft-green-soft)
}
html[data-home-design="fresh_take"] .blog-page-number[aria-current="page"]{
  background:var(--ft-green);border-color:var(--ft-green);color:#fff
}
html[data-home-design="fresh_take"] .blog-page-gap{color:var(--ft-muted)}

/* The like tally. Prefixed for the same reason .ft-like is: it has to
   out-specify the display:block that .ft-only reveals it with. */
html[data-home-design="fresh_take"] .ft-card-likes{
  display:inline-flex;align-items:center;gap:5px;flex:none;letter-spacing:.04em
}
html[data-home-design="fresh_take"] .ft-card-likes svg{
  width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8
}
html[data-home-design="fresh_take"] .ft-card-likes.is-liked{color:var(--ft-green)}
html[data-home-design="fresh_take"] .ft-card-likes.is-liked svg{fill:currentColor}

/* The memo signup under the list. It is the homepage's signup band, shared
   with the control design like the cards above it, so each rule has to
   out-specify its site.css counterpart — the prefix does that. Everything
   below restates the treatments the fresh-take homepage's own memo form
   already uses (.memo, .lbl, .inp, .check, .btn), reached through the
   control's class names because this markup is the control's.

   Scoped to data-page="blog" rather than to .signup-band alone: the homepage
   carries bands of its own inside #layout-control, and while this arm hides
   that whole layout, nothing should depend on it staying hidden. */
html[data-home-design="fresh_take"][data-page="blog"] .signup-band{
  background:var(--ft-sand);padding:72px 0 80px
}
html[data-home-design="fresh_take"][data-page="blog"] .signup-grid{
  max-width:var(--ft-maxw);gap:56px
}
html[data-home-design="fresh_take"][data-page="blog"] .signup-grid h2{
  font-family:var(--ft-serif);font-weight:400;font-size:clamp(26px,3vw,36px);
  line-height:1.15;letter-spacing:-.01em;color:var(--ft-ink);margin:0 0 12px
}
html[data-home-design="fresh_take"][data-page="blog"] .signup-grid p{
  font-size:16px;color:var(--ft-muted)
}
/* The variant's memo form runs label, field, consent, then a full-width
   button — the control's runs label, then field and button side by side, with
   the consent under them. Same markup either way, so the order is done here:
   the form becomes the flex column, .subrow steps out of the way with
   display:contents, and its two children take their places in it separately.
   Every child needs an explicit order, including the Turnstile mount and the
   .form-status paragraph forms.js appends, or the unnumbered ones collect at
   the top — which put the challenge between the label and its field. */
html[data-home-design="fresh_take"][data-page="blog"] .signup-grid form{
  background:#fff;border-radius:var(--ft-r);padding:28px;
  display:flex;flex-direction:column
}
html[data-home-design="fresh_take"][data-page="blog"] .subrow{display:contents}
html[data-home-design="fresh_take"][data-page="blog"] .field-label{
  order:0;display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ft-muted);margin-bottom:7px
}
html[data-home-design="fresh_take"][data-page="blog"] .line-input{
  order:1;border:1px solid rgba(1,66,53,.25);border-radius:var(--ft-r);background:#fff;
  font-size:15px;padding:12px 13px;color:var(--ft-ink)
}
html[data-home-design="fresh_take"][data-page="blog"] .line-input:focus{
  outline:2px solid var(--ft-green-mid);outline-offset:1px;border-color:var(--ft-green)
}
html[data-home-design="fresh_take"][data-page="blog"] .consent{
  order:2;align-items:flex-start;gap:10px;font-size:13px;color:var(--ft-muted);
  margin:16px 0 18px
}
html[data-home-design="fresh_take"][data-page="blog"] .consent input{
  width:16px;height:16px;margin-top:2px;accent-color:var(--ft-green)
}
html[data-home-design="fresh_take"][data-page="blog"] .js-turnstile{order:3}
html[data-home-design="fresh_take"][data-page="blog"] .btn-ghost{
  order:4;width:100%;background:var(--ft-green);color:#fff;border:0;
  border-radius:var(--ft-r);font-family:var(--ft-sans);font-size:14px;
  font-weight:600;padding:14px 26px;transition:background .15s
}
html[data-home-design="fresh_take"][data-page="blog"] .btn-ghost:hover{
  background:var(--ft-green-mid)
}
/* .ft .form-status doesn't reach this one — the shared body sits outside both
   .ft chrome blocks — so the variant's colours are repeated here. */
html[data-home-design="fresh_take"][data-page="blog"] .form-status{order:5}
html[data-home-design="fresh_take"][data-page="blog"] .form-status.is-ok{
  color:var(--ft-green);font-weight:600
}
html[data-home-design="fresh_take"][data-page="blog"] .form-status.is-error{color:#8a2b20}

@media (max-width:900px){
  html[data-home-design="fresh_take"] .blog-head{padding-block:44px 0}
  html[data-home-design="fresh_take"] .blog-feed{padding-block:30px 60px}
  html[data-home-design="fresh_take"][data-page="blog"] .signup-band{padding:52px 0 60px}
  html[data-home-design="fresh_take"] .pcard.lead{grid-template-columns:1fr;gap:24px}
  html[data-home-design="fresh_take"] .pcard.lead .thumb{aspect-ratio:16/9}
}
@media (max-width:560px){
  html[data-home-design="fresh_take"] .pcard.row{grid-template-columns:80px minmax(0,1fr);gap:18px}
  html[data-home-design="fresh_take"] .pcard.row h2{font-size:17.5px}
  html[data-home-design="fresh_take"] .pcard.row .excerpt{display:none}
}

/* ---------- post page ----------

   One article, two designs. The control post page is what site.css already
   styles; everything below is the fresh-take treatment of that same markup,
   so each rule has to out-specify its site.css counterpart — which the
   html[data-home-design="fresh_take"] prefix does on its own.

   The look follows the homepage: Fraunces for headings, cream ground, a sand
   offset block behind the cover image, and green for anything interactive.
   (The hero portrait used to carry that same offset block; it does not any
   more, now that its backdrop is a circle.) */

html[data-home-design="fresh_take"]{
  --ft-post-line:rgba(1,66,53,.14);
}
html[data-home-design="fresh_take"] .post{max-width:720px;padding:0 24px}

html[data-home-design="fresh_take"] .post-head{
  padding-block:60px 0;text-align:left
}
html[data-home-design="fresh_take"] .post-head .pmeta{
  font-family:var(--ft-sans);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ft-green-mid)
}
html[data-home-design="fresh_take"] .post-head h1{
  font-family:var(--ft-serif);font-weight:400;font-size:clamp(32px,4.4vw,50px);
  line-height:1.1;letter-spacing:-.01em;color:var(--ft-ink);margin:16px 0 20px
}
html[data-home-design="fresh_take"] .post-head .byline{
  font-size:14px;color:var(--ft-muted);border-top:1px solid var(--ft-post-line);
  padding-top:16px
}

/* The hero portrait's treatment: a sand rectangle offset behind the image.
   It sits on .cover, the frame the build sizes to the image, rather than on
   .post-cover, which is as wide as the column: behind a cover narrower than
   that — a book jacket, a logo — a full-width block stuck out either side
   of the image it was meant to back. Offsets are percentages for the same
   reason, so the block keeps its proportions at any cover's width. */
html[data-home-design="fresh_take"] .post-cover{
  margin:40px auto 0;max-width:var(--ft-maxw)
}
html[data-home-design="fresh_take"] .post-cover .cover{position:relative}
html[data-home-design="fresh_take"] .post-cover .cover::before{
  content:"";position:absolute;inset:auto 3% -18px 11%;height:60%;
  background:var(--ft-sand);border-radius:var(--ft-r)
}
html[data-home-design="fresh_take"] .post-cover img{
  position:relative;border-radius:var(--ft-r)
}

html[data-home-design="fresh_take"] .post-body{
  padding-block:40px 20px;font-size:17px;line-height:1.8;color:var(--ft-ink);
  font-weight:350
}
html[data-home-design="fresh_take"] .post-body h2,
html[data-home-design="fresh_take"] .post-body h3{
  font-family:var(--ft-serif);font-weight:400;letter-spacing:-.01em;color:var(--ft-ink)
}
html[data-home-design="fresh_take"] .post-body h2{font-size:28px;margin:44px 0 14px}
html[data-home-design="fresh_take"] .post-body h3{font-size:22px;margin:34px 0 12px}
html[data-home-design="fresh_take"] .post-body a{
  color:var(--ft-green);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px
}
html[data-home-design="fresh_take"] .post-body figure img{border-radius:var(--ft-r)}
html[data-home-design="fresh_take"] .post-body figcaption{
  font-size:13px;color:var(--ft-muted);margin-top:10px;text-align:left
}
/* The pull quote the post template uses, given the homepage's treatment of
   one: serif italic on the sand ground, no rule down the side. */
html[data-home-design="fresh_take"] .post-body blockquote{
  margin:32px 0;padding:26px 28px;border-left:0;border-radius:var(--ft-r);
  background:var(--ft-sand);font-family:var(--ft-serif);font-style:italic;
  font-size:21px;line-height:1.4;color:var(--ft-green)
}
html[data-home-design="fresh_take"] .post-body blockquote p:last-child{margin-bottom:0}

/* The Subscribe button in a post body, and the memo dialog it opens. Both
   sit in the shared article outside the .ft chrome blocks, so .ft .btn and
   .ft .waitlist-* above don't reach them; the variant's treatment is
   restated here through data-home-design, the way the blog index's memo
   form is, reached through the control's class names because this markup
   is the control's. */
html[data-home-design="fresh_take"] .post-body .post-cta{
  background:var(--ft-green);color:#fff;text-decoration:none;border-radius:var(--ft-r);
  font-family:var(--ft-sans);font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:14px 26px;transition:background .15s
}
html[data-home-design="fresh_take"] .post-body .post-cta:hover{background:var(--ft-green-mid)}
html[data-home-design="fresh_take"] .memo-dialog::backdrop{background:rgba(1,66,53,.6)}
html[data-home-design="fresh_take"] .memo-dialog .waitlist-panel{
  background:#fff;border-radius:var(--ft-r);padding:38px 36px 34px;
  font-family:var(--ft-sans);color:var(--ft-ink)
}
html[data-home-design="fresh_take"] .memo-dialog .signup-kicker{
  letter-spacing:.2em;color:var(--ft-green-mid);margin:0
}
html[data-home-design="fresh_take"] .memo-dialog h2{
  font-family:var(--ft-serif);font-weight:400;font-size:clamp(26px,3vw,34px);
  letter-spacing:-.01em;color:var(--ft-ink);margin:12px 0 14px
}
html[data-home-design="fresh_take"] .memo-dialog .waitlist-note{
  color:var(--ft-muted);font-size:16px;margin:0 0 24px
}
html[data-home-design="fresh_take"] .memo-dialog .waitlist-close{
  font-family:var(--ft-sans);color:var(--ft-green)
}
html[data-home-design="fresh_take"] .memo-dialog .field-label{
  display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ft-muted);margin-bottom:7px
}
html[data-home-design="fresh_take"] .memo-dialog .signup-input{
  border:1px solid rgba(1,66,53,.25);border-radius:var(--ft-r);
  font-size:15px;padding:12px 13px;color:var(--ft-ink)
}
html[data-home-design="fresh_take"] .memo-dialog .signup-input:focus{
  outline:2px solid var(--ft-green-mid);outline-offset:1px;border-color:var(--ft-green)
}
html[data-home-design="fresh_take"] .memo-dialog .consent{
  align-items:flex-start;gap:10px;font-size:13px;color:var(--ft-muted);margin:14px 0 18px
}
html[data-home-design="fresh_take"] .memo-dialog .consent input{
  width:16px;height:16px;margin-top:2px;accent-color:var(--ft-green)
}
html[data-home-design="fresh_take"] .memo-dialog .btn-solid{
  background:var(--ft-green);border-radius:var(--ft-r);font-family:var(--ft-sans);
  font-size:14px;font-weight:600;letter-spacing:.01em;padding:14px 26px;
  transition:background .15s
}
html[data-home-design="fresh_take"] .memo-dialog .btn-solid:hover{background:var(--ft-green-mid)}
html[data-home-design="fresh_take"] .memo-dialog .form-status.is-ok{color:var(--ft-green);font-weight:600}
html[data-home-design="fresh_take"] .memo-dialog .form-status.is-error{color:#8a2b20}

/* ---------- likes ----------
   Hidden until likes.js takes over, so the control is never dead: without
   JavaScript there is nothing to click, the same way the footer's tracking
   choice stays out of the markup's way until it can do something. */
/* Prefixed to out-specify the .ft-only display:block that reveals it. */
html[data-home-design="fresh_take"] .ft-like{
  max-width:720px;margin:0 auto;padding:26px 24px 4px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap
}
.ft-like-btn{
  display:inline-flex;align-items:center;gap:10px;background:#fff;
  border:1px solid rgba(1,66,53,.25);border-radius:999px;padding:11px 20px;
  font:inherit;font-family:var(--ft-sans);font-size:14px;font-weight:600;
  color:var(--ft-green);cursor:pointer;transition:background .15s,border-color .15s
}
.ft-like-btn:hover{background:var(--ft-green-soft);border-color:var(--ft-green)}
.ft-like-btn:focus-visible{outline:2px solid var(--ft-green-mid);outline-offset:2px}
.ft-like-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
.ft-like-btn[aria-pressed="true"]{background:var(--ft-green);border-color:var(--ft-green);color:#fff}
.ft-like-btn[aria-pressed="true"] svg{fill:currentColor;stroke:currentColor}
/* A short pulse on the press, skipped for a reader who asked for less motion. */
@media (prefers-reduced-motion:no-preference){
  .ft-like-btn.is-beating svg{animation:ft-beat .42s ease-out}
}
@keyframes ft-beat{
  0%{transform:scale(1)} 35%{transform:scale(1.32)} 70%{transform:scale(.94)} 100%{transform:scale(1)}
}
.ft-like-note{font-size:12.5px;color:var(--ft-muted);margin:0}

html[data-home-design="fresh_take"] .post-nav{
  max-width:720px;padding:22px 24px 72px;margin-top:24px;
  border-top:1px solid var(--ft-post-line);
  font-family:var(--ft-sans);font-size:14px
}
html[data-home-design="fresh_take"] .post-nav a{
  color:var(--ft-green);font-weight:600;text-decoration:none
}
html[data-home-design="fresh_take"] .post-nav a:hover{
  text-decoration:underline;text-underline-offset:3px
}

@media (max-width:900px){
  html[data-home-design="fresh_take"] .post-head{padding-block:40px 0}
  html[data-home-design="fresh_take"] .post-body{font-size:16.5px}
  html[data-home-design="fresh_take"] .post-cover .cover::before{inset:auto 3% -12px 9%}
}