/*
Theme Name: Ollie Child — YogiTech PLATE
Template: ollie
Version: 3.2.1
Description: YogiTech technical-drawing theme. The page is a drawing sheet on squared paper.
             Block-native; this stylesheet is enhancement + the sheet shell.
*/

/* ═══════════════════════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root{
  --paper:#f4f1e8; --panel:#faf8f1; --ink:#1b1a16; --ink-2:#5f5a4e; --ink-3:#6e6a5c;  /* 4.8:1 on paper, 5.1:1 on panel - #96907f was 2.8:1 and failed WCAG AA */
  --line:#c8c2b0; --line-2:#e2ddce;

  --mint:#b7e0d3;    --mint-2:#9ccdbd;    --mint-ink:#0d6b5e;
  --apricot:#f8d0b0; --apricot-2:#eeb98f; --apricot-ink:#bc4419;
  --sage:#d6e4b0;    --sage-2:#c2d494;    --sage-ink:#57781f;

  --butter:#f8e7b2; --rose:#f4cdd4; --sky:#c9dcee; --lilac:#ded3ef;

  --tech:'Martian Mono',ui-monospace,monospace;
  --prose:'Newsreader',Georgia,serif;
  --logo:'Quicksand',ui-rounded,system-ui,sans-serif;
  --ease:cubic-bezier(.22,.75,.25,1);

  --sheet:1300px;
  --gutter:84px;

  /* per-page channel accent, overridden by the yt-ch-* body classes below */
  --accent:var(--mint); --accent-ink:var(--mint-ink);
}
body.yt-ch-3d-printing{--accent:var(--mint);    --accent-ink:var(--mint-ink)}
body.yt-ch-tools      {--accent:var(--apricot); --accent-ink:var(--apricot-ink)}
body.yt-ch-smart-home {--accent:var(--sage);    --accent-ink:var(--sage-ink)}

/* ═══════════════════════════════════════════════════════════════
   THE SHEET — squared paper, with the drawing sheet floating on it.
   Applies to EVERY template, so new pages inherit the shell for free.
   ═══════════════════════════════════════════════════════════════ */
body{
  background-color:var(--paper);
  background-image:
    linear-gradient(to right,var(--line-2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line-2) 1px,transparent 1px);
  background-size:24px 24px;
  padding:0 clamp(0px,2.4vw,44px);
  -webkit-font-smoothing:antialiased;
}
.wp-site-blocks{
  max-width:var(--sheet); margin:0 auto; position:relative;
  background:var(--paper);
  border-left:1px solid var(--line); border-right:1px solid var(--line);
}
/* the inner frame line of a drawing sheet */
.wp-site-blocks::before{
  content:"";position:absolute;inset:22px;border:1px solid var(--line-2);
  pointer-events:none;z-index:0
}
.wp-site-blocks > *{position:relative;z-index:1}
@media(max-width:1040px){:root{--gutter:52px} .wp-site-blocks::before{inset:16px}}
@media(max-width:680px){:root{--gutter:26px} .wp-site-blocks::before{inset:10px}}
/* Phone. The sheet conceit costs real content width here: 9px of body padding
   plus a 26px gutter left only 303px usable out of a 375px viewport. Tightened
   to reclaim ~32px without losing the floating-sheet look. */
@media(max-width:560px){
  :root{--gutter:15px}
  body{padding-left:4px;padding-right:4px;background-size:20px 20px}
  .wp-site-blocks::before{inset:6px}
}

/* Every top-level band gets the sheet gutter. NB: side padding only — a
   `padding: x 0` shorthand anywhere downstream silently zeroes it. */
.yt-band{padding-left:var(--gutter);padding-right:var(--gutter)}

a{text-decoration:none}

/* WP's constrained layout gives children `margin-inline:auto`. Any element we
   cap with a max-width narrower than contentSize therefore CENTRES itself
   instead of sitting flush left. Pin them back. (Longhands only — a
   `margin: x auto` shorthand here would re-break vertical rhythm.) */
.yt-art-title,.yt-page-title,.yt-lede,.yt-hero h1,.yt-arch-head .wp-block-term-description,.yt-arch-head .yt-arch-sub{
  margin-left:0!important;margin-right:auto!important
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */
.yt-header{
  border-bottom:1px solid var(--line)!important;background:var(--paper);
  position:sticky;top:0;z-index:20;
  padding-top:14px!important;padding-bottom:14px!important
}
.yt-brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.yt-brand img{width:38px;height:38px;display:block;flex:0 0 auto}
.yt-header .wp-block-site-title a,.yt-wordmark{
  font-family:var(--logo)!important;font-weight:700!important;font-size:1.62rem!important;
  letter-spacing:.055em;line-height:1;color:var(--ink)!important;text-decoration:none
}
/* Ollie hands nav items a fluid ~24px font-size; force ours on the item itself,
   not just the container, or the header grows to 237px and the nav wraps. */
.yt-header .wp-block-navigation,
.yt-header .wp-block-navigation .wp-block-navigation-item,
.yt-header .wp-block-navigation-item__content,
.yt-header .wp-block-navigation .wp-block-navigation-item__label{
  font-family:var(--tech)!important;font-size:.6rem!important;font-weight:400!important;
  letter-spacing:-.04em!important;line-height:1.5!important
}
.yt-header .wp-block-navigation{gap:4px!important}
.yt-header .wp-block-navigation .wp-block-navigation__container{gap:4px!important}
.yt-header .wp-block-navigation-item__content{
  padding:6px 10px!important;border:1px solid transparent;color:var(--ink-2);
  text-decoration:none!important;transition:.16s var(--ease)
}
.yt-header .wp-block-navigation-item__content:hover{border-color:var(--ink);color:var(--ink)}
.yt-header .wp-block-navigation .wp-block-navigation-item:nth-child(1) .wp-block-navigation-item__content:hover{background:var(--mint);border-color:var(--mint-ink);color:var(--mint-ink)}
.yt-header .wp-block-navigation .wp-block-navigation-item:nth-child(2) .wp-block-navigation-item__content:hover{background:var(--apricot);border-color:var(--apricot-ink);color:var(--apricot-ink)}
.yt-header .wp-block-navigation .wp-block-navigation-item:nth-child(3) .wp-block-navigation-item__content:hover{background:var(--sage);border-color:var(--sage-ink);color:var(--sage-ink)}
.yt-header .wp-block-navigation .wp-block-navigation-item:nth-child(4) .wp-block-navigation-item__content:hover{background:var(--butter);border-color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════
   SHARED PIECES
   ═══════════════════════════════════════════════════════════════ */
/* sheet label chip */
.yt-tag{
  font-family:var(--tech)!important;font-size:.56rem!important;letter-spacing:-.02em;
  color:var(--ink-2)!important;border:1px solid var(--line);display:inline-block;
  padding:5px 10px;background:var(--panel);margin:0
}
/* section bar: [ 02 ] TITLE ─────────── link → */
.yt-secbar{
  display:flex;align-items:center;gap:14px;font-family:var(--tech)!important;
  font-size:.6rem!important;letter-spacing:-.03em;color:var(--ink-2)!important;
  padding-top:52px;padding-bottom:18px
}
.yt-secbar .yt-no{border:1px solid var(--ink);padding:4px 8px;font-weight:700;color:var(--ink);margin:0}
.yt-secbar .yt-no.m{background:var(--mint)} .yt-secbar .yt-no.a{background:var(--apricot)}
.yt-secbar .yt-no.s{background:var(--sage)} .yt-secbar .yt-no.b{background:var(--butter)}
.yt-secbar .yt-ti{font-weight:700;color:var(--ink)!important;text-transform:uppercase;white-space:nowrap;font-size:.72rem!important;margin:0}
.yt-secbar .yt-rule{flex:1;height:1px;background:var(--line)}
.yt-secbar .yt-rt{color:var(--ink-3)!important;white-space:nowrap;margin:0}
.yt-secbar .yt-rt a:hover{color:var(--apricot-ink)}

/* general-notes block */
.yt-note{
  border:1px solid var(--ink);background:var(--butter);padding:20px 24px!important;
  display:grid;grid-template-columns:132px 1fr;gap:22px;margin-top:44px
}
.yt-note .k{font-family:var(--tech)!important;font-size:.5rem!important;letter-spacing:-.01em;color:var(--ink-2)!important;padding-top:5px;margin:0}
.yt-note p{font-size:1.08rem!important;line-height:1.5!important;font-weight:300;max-width:64ch;margin:0}
@media(max-width:740px){.yt-note{grid-template-columns:1fr;gap:10px}}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE HERO
   ═══════════════════════════════════════════════════════════════ */
.yt-hero{border-bottom:1px solid var(--line);padding-top:60px!important;padding-bottom:52px!important}
.yt-hero h1{
  font-family:var(--tech)!important;font-weight:700!important;
  font-size:clamp(1.35rem,2.75vw,2.05rem)!important;line-height:1.28!important;
  letter-spacing:-.085em!important;max-width:24ch;margin:0
}
/* the three domains carry their channel colour — the headline doubles as the key */
.yt-hero h1 u{text-decoration:none}
.yt-hero h1 .m1{background:linear-gradient(transparent 62%,var(--mint) 62%)}
.yt-hero h1 .m2{background:linear-gradient(transparent 62%,var(--apricot) 62%)}
.yt-hero h1 .m3{background:linear-gradient(transparent 62%,var(--sage) 62%)}
.yt-lede{font-size:1.12rem!important;line-height:1.55!important;color:var(--ink-2)!important;max-width:46ch;font-weight:300;margin-top:20px!important}

/* KEY legend */
.yt-legend{border:1px solid var(--ink);max-width:520px;background:var(--panel);font-family:var(--tech);margin-top:30px!important}
.yt-legend .lh{font-size:.5rem;letter-spacing:-.01em;color:var(--ink-3);padding:7px 12px;border-bottom:1px solid var(--line)}
.yt-legend a{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line-2);transition:background .16s var(--ease)}
.yt-legend a:last-child{border-bottom:none}
.yt-legend a:hover{background:var(--paper)}
.yt-legend .sw{width:26px;height:13px;border:1px solid var(--ink)}
.yt-legend .n{font-size:.66rem;font-weight:700;letter-spacing:-.06em}
.yt-legend .q{font-size:.54rem;color:var(--ink-3);letter-spacing:-.02em}
.yt-legend .c1 .sw{background:var(--mint)} .yt-legend .c1 .n{color:var(--mint-ink)}
.yt-legend .c2 .sw{background:var(--apricot)} .yt-legend .c2 .n{color:var(--apricot-ink)}
.yt-legend .c3 .sw{background:var(--sage)} .yt-legend .c3 .n{color:var(--sage-ink)}

/* ═══════════════════════════════════════════════════════════════
   THE EXPLODED ASSEMBLY DRAWING
   ═══════════════════════════════════════════════════════════════ */
.yt-asm{width:100%;height:auto;overflow:visible;display:block}
.yt-asm .ln{fill:none;stroke:var(--ink);stroke-width:1.35;stroke-linejoin:round;stroke-linecap:round}
.yt-asm .thin{fill:none;stroke:var(--ink);stroke-width:1;stroke-linejoin:round;stroke-linecap:round}
.yt-asm .axis{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:5 5}
.yt-asm .lead{fill:none;stroke:var(--ink-2);stroke-width:1}
.yt-asm .bal{stroke:var(--ink);stroke-width:1.3}
.yt-asm .num{font-family:'Martian Mono',monospace;font-size:12px;font-weight:700;fill:var(--ink);text-anchor:middle;letter-spacing:-1px}
.yt-asm .lbl{font-family:'Martian Mono',monospace;font-size:9.5px;font-weight:400;fill:var(--ink-2);letter-spacing:-.4px}
.yt-asm .lbl.b{font-weight:700;font-size:10.5px}
.yt-asm .lyr{fill:none;stroke:var(--mint-ink);stroke-width:1;stroke-linejoin:round;stroke-linecap:round;opacity:.9}
.yt-asm .tl{fill:none;stroke:#8d3512;stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round}
.yt-asm .tl *{vector-effect:non-scaling-stroke;fill:none;stroke:inherit}
.yt-asm .hs{fill:none;stroke:#3f5a15;stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round}
.yt-asm .sigln{fill:none;stroke:var(--sage-ink);stroke-width:1.4;stroke-linecap:round}
.yt-asm .cov{fill:none;stroke:var(--sage-ink);stroke-width:1;opacity:.28}
/* every animated path carries pathLength="100", so dash units need no length maths */
.yt-asm .dr{stroke-dasharray:100;stroke-dashoffset:100;animation:ytdr .55s var(--ease) forwards}
.yt-asm .dr.q{animation-duration:.32s}
.yt-asm .fi{opacity:0;animation:ytfi .5s var(--ease) forwards}
.yt-asm .pp{opacity:0;animation:ytpp .5s var(--ease) forwards}
@keyframes ytdr{to{stroke-dashoffset:0}}
@keyframes ytfi{to{opacity:1}}
@keyframes ytpp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.yt-asm .sig{opacity:0;animation:ytsig 2.8s ease-in-out infinite}
@keyframes ytsig{0%,100%{opacity:0}16%{opacity:.9}52%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .yt-asm .dr{stroke-dashoffset:0;animation:none}
  .yt-asm .fi,.yt-asm .pp,.yt-asm .sig{opacity:1;animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   CHANNEL CARDS
   ═══════════════════════════════════════════════════════════════ */
.yt-plates{border:1px solid var(--ink)}
.yt-plates .wp-block-column{border-right:1px solid var(--ink)}
.yt-plates .wp-block-column:last-child{border-right:none}
.yt-plate-hd{
  padding:12px 20px!important;border-bottom:1px solid var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;font-family:var(--tech)
}
.yt-plate.c1 .yt-plate-hd{background:var(--mint)}
.yt-plate.c2 .yt-plate-hd{background:var(--apricot)}
.yt-plate.c3 .yt-plate-hd{background:var(--sage)}
.yt-plate-hd h3{font-family:var(--tech)!important;font-size:.86rem!important;font-weight:700!important;letter-spacing:-.07em!important;margin:0}
.yt-plate.c1 .yt-plate-hd h3{color:var(--mint-ink)!important}
.yt-plate.c2 .yt-plate-hd h3{color:var(--apricot-ink)!important}
.yt-plate.c3 .yt-plate-hd h3{color:var(--sage-ink)!important}
.yt-plate-hd .q{font-size:.52rem;color:var(--ink-2);letter-spacing:-.01em;margin:0}
.yt-plate > * + *{margin-block-start:0!important}
.yt-plate-bd{padding:20px!important;background:var(--panel);transition:background .18s var(--ease);height:100%}
.yt-plate:hover .yt-plate-bd{background:var(--paper)}
.yt-plate-bd p{font-size:1.02rem!important;line-height:1.48!important;color:var(--ink-2)!important;font-weight:300;margin:0}
.yt-go{
  display:inline-block;margin-top:14px;font-family:var(--tech)!important;font-size:.56rem!important;
  letter-spacing:-.03em;color:var(--ink)!important;border-bottom:1px solid var(--ink);padding-bottom:2px
}
@media(max-width:900px){
  .yt-plates .wp-block-column{border-right:none;border-bottom:1px solid var(--ink)}
  .yt-plates .wp-block-column:last-child{border-bottom:none}
}

/* ═══════════════════════════════════════════════════════════════
   PARTS LIST — the post feed, used on the homepage AND on archives
   ═══════════════════════════════════════════════════════════════ */
.yt-parts{border:1px solid var(--ink);background:var(--paper)}
.yt-parts-hd{
  display:grid;grid-template-columns:64px 104px 1fr 132px 104px 104px;gap:14px;
  padding:9px 14px;border-bottom:1px solid var(--ink);background:var(--panel);
  font-family:var(--tech);font-size:.5rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:-.01em
}
.yt-parts .wp-block-post-template{margin:0!important;padding:0!important;display:block!important}
.yt-parts .wp-block-post{
  display:grid!important;grid-template-columns:64px 104px 1fr 132px 104px 104px;gap:14px;
  align-items:start;padding:15px 14px!important;margin:0!important;list-style:none;
  border-bottom:1px solid var(--line-2);counter-increment:ytpart;transition:background .16s var(--ease)
}
.yt-parts .wp-block-post-template{counter-reset:ytpart}
.yt-parts .wp-block-post:last-child{border-bottom:none}
.yt-parts .wp-block-post::before{
  content:counter(ytpart,decimal-leading-zero);font-family:var(--tech);font-size:.62rem;
  font-weight:700;color:var(--ink);letter-spacing:-.04em;padding-top:2px
}
.yt-parts .wp-block-post.category-3d-printing:hover{background:#eef8f4}
.yt-parts .wp-block-post.category-tools:hover{background:#fdf3ea}
.yt-parts .wp-block-post.category-smart-home:hover{background:#f6faec}

/* thumbnails: desaturated + tinted to the row's channel so loud covers don't
   fight the linework. Plain alpha, not mix-blend-mode. */
.yt-parts .wp-block-post-featured-image{margin:0!important;width:88px}
.yt-parts .wp-block-post-featured-image a,
.yt-parts .wp-block-post-featured-image img{display:block;width:88px;height:50px;object-fit:cover}
.yt-parts .wp-block-post-featured-image{position:relative;border:1px solid var(--ink);background:var(--panel);overflow:hidden}
.yt-parts .wp-block-post-featured-image img{
  filter:grayscale(1) sepia(.34) contrast(1.02) brightness(1.05);opacity:.92;
  transition:filter .45s var(--ease),opacity .45s var(--ease)
}
.yt-parts .wp-block-post-featured-image::after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .45s var(--ease)}
.yt-parts .category-3d-printing .wp-block-post-featured-image::after{background:rgba(183,224,211,.42)}
.yt-parts .category-tools .wp-block-post-featured-image::after{background:rgba(248,208,176,.42)}
.yt-parts .category-smart-home .wp-block-post-featured-image::after{background:rgba(214,228,176,.42)}
.yt-parts .wp-block-post:hover .wp-block-post-featured-image img{filter:none;opacity:1}
.yt-parts .wp-block-post:hover .wp-block-post-featured-image::after{opacity:0}

.yt-parts .wp-block-post-title{
  font-family:var(--prose)!important;font-size:1.14rem!important;font-weight:500!important;
  letter-spacing:0!important;line-height:1.25!important;margin:0;text-transform:none!important
}
.yt-parts .wp-block-post-title a{color:var(--ink)!important}
.yt-parts .wp-block-post-excerpt{margin:5px 0 0!important}
.yt-parts .wp-block-post-excerpt__excerpt{
  font-family:var(--prose)!important;font-size:.98rem!important;font-weight:300;
  color:var(--ink-2)!important;line-height:1.45!important;margin:0
}
.yt-parts .wp-block-post-excerpt__more-text{display:none}
.yt-parts .wp-block-post-terms{font-family:var(--tech)!important;font-size:.52rem!important;letter-spacing:-.01em;margin:0}
.yt-parts .wp-block-post-terms a{
  font-weight:500;padding:3px 7px;border:1px solid var(--ink);display:inline-block;text-decoration:none
}
.yt-parts .category-3d-printing .wp-block-post-terms a{background:var(--mint);color:var(--mint-ink)!important}
.yt-parts .category-tools .wp-block-post-terms a{background:var(--apricot);color:var(--apricot-ink)!important}
.yt-parts .category-smart-home .wp-block-post-terms a{background:var(--sage);color:var(--sage-ink)!important}
.yt-parts .wp-block-post-date{font-family:var(--tech)!important;font-size:.62rem!important;letter-spacing:-.04em;color:var(--ink-2)!important;margin:0;white-space:nowrap}
.yt-parts .yt-fmt{font-family:var(--tech)!important;font-size:.62rem!important;letter-spacing:-.04em;color:var(--ink-2)!important;margin:0;text-align:right;white-space:nowrap}
@media(max-width:980px){
  .yt-parts-hd{display:none}
  .yt-parts .wp-block-post{grid-template-columns:48px 88px 1fr;gap:12px}
  .yt-parts .wp-block-post-terms,.yt-parts .wp-block-post-date,.yt-parts .yt-fmt{grid-column:3;text-align:left;margin-top:6px}
}
/* Phone. The old rule collapsed the template to 1fr but left `grid-column:3`
   on the meta items from the 980px block — so the browser invented implicit
   columns 2 and 3 to satisfy it, the title landed in an 82px column and wrapped
   to ~460px tall. Every grid-column is reset explicitly here. */
@media(max-width:560px){
  .yt-parts .wp-block-post{
    grid-template-columns:84px minmax(0,1fr);
    column-gap:12px;row-gap:7px;align-items:start;
    padding:13px 12px!important
  }
  .yt-parts .wp-block-post::before{display:none}

  .yt-parts .wp-block-post-featured-image{grid-column:1;grid-row:1;width:84px}
  .yt-parts .wp-block-post-featured-image a,
  .yt-parts .wp-block-post-featured-image img{width:84px;height:48px}

  /* the title/excerpt wrapper — minmax(0,1fr) above lets it actually shrink-wrap */
  .yt-parts .wp-block-post > .wp-block-group{grid-column:2;grid-row:1;min-width:0}
  .yt-parts .wp-block-post-title{font-size:1.02rem!important;line-height:1.3!important}
  .yt-parts .wp-block-post-excerpt{display:none}

  /* meta band under the thumbnail + title */
  .yt-parts .wp-block-post-terms{grid-column:1;grid-row:2;margin:0!important}
  .yt-parts .wp-block-post-date{grid-column:2;grid-row:2;margin:0!important;align-self:center}
  .yt-parts .yt-fmt{grid-column:1/-1;grid-row:3;text-align:left;margin:0!important}

  /* 8.3px and 9.9px were below readable */
  .yt-parts .wp-block-post-terms{font-size:.6rem!important}
  .yt-parts .wp-block-post-date,
  .yt-parts .yt-fmt{font-size:.66rem!important}
}

/* ═══════════════════════════════════════════════════════════════
   BROWSER TOOLS — grouped index, built to grow
   ═══════════════════════════════════════════════════════════════ */
.yt-tg{border:1px solid var(--ink);background:var(--panel);display:flex;flex-direction:column;height:100%}
.yt-tg-hd{padding:12px 18px!important;border-bottom:1px solid var(--ink);font-family:var(--tech)}
.yt-tg.g1 .yt-tg-hd{background:var(--rose)}
.yt-tg.g2 .yt-tg-hd{background:var(--butter)}
.yt-tg.g3 .yt-tg-hd{background:var(--sky)}
.yt-tg-hd h3{font-family:var(--tech)!important;font-size:.78rem!important;font-weight:700!important;letter-spacing:-.07em!important;margin:0}
.yt-tg-hd p{font-family:var(--tech)!important;font-size:.52rem!important;font-weight:300;color:var(--ink-2)!important;letter-spacing:-.01em;margin:4px 0 0}
.yt-tg-bd{padding:6px 18px 16px!important;flex:1;display:flex;flex-direction:column}
/* NB: scope these to .yt-tg — `.yt-ti` is ALSO the section-bar title span, and
   an unscoped rule here gave every section heading this border and padding. */
.yt-tg .yt-ti{display:block;padding:14px 0;border-bottom:1px solid var(--line-2);transition:padding-left .2s var(--ease)}
.yt-tg .yt-ti:last-of-type{border-bottom:none}
.yt-tg a.yt-ti:hover{padding-left:8px}
.yt-tg .yt-ti-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.yt-tg .yt-ti h4{font-family:var(--tech)!important;font-size:.68rem!important;font-weight:700!important;letter-spacing:-.07em!important;line-height:1.3!important;margin:0}
.yt-st{font-family:var(--tech)!important;font-size:.5rem!important;letter-spacing:-.01em;white-space:nowrap;padding:3px 6px;border:1px solid var(--ink);margin:0}
.yt-st.on{background:var(--mint);color:var(--mint-ink)!important}
.yt-st.off{background:transparent;color:var(--ink-3)!important;border-color:var(--line);border-style:dashed}
.yt-tg .yt-ti p{font-size:.97rem!important;line-height:1.42!important;color:var(--ink-2)!important;font-weight:300;margin:7px 0 0}
.yt-slot{
  margin-top:auto;padding:13px 0 0;border-top:1px dashed var(--line);
  font-family:var(--tech)!important;font-size:.5rem!important;color:var(--ink-3)!important;letter-spacing:-.01em
}

/* ═══════════════════════════════════════════════════════════════
   DOWNLOADS / ELSEWHERE
   ═══════════════════════════════════════════════════════════════ */
.yt-out{border:1px solid var(--ink);padding:18px!important;background:var(--panel);transition:.18s var(--ease);height:100%}
.yt-out:hover{transform:translateY(-3px)}
.yt-out .k{font-family:var(--tech)!important;font-size:.5rem!important;color:var(--ink-3)!important;letter-spacing:-.01em;border-bottom:1px solid var(--line);padding-bottom:8px;margin:0 0 11px}
.yt-out h4{font-family:var(--tech)!important;font-size:.72rem!important;font-weight:700!important;letter-spacing:-.07em!important;margin:0}
.yt-out p{font-size:.96rem!important;line-height:1.42!important;color:var(--ink-2)!important;font-weight:300;margin:7px 0 0}
.yt-out.o1{border-top:5px solid var(--mint)}
.yt-out.o2{border-top:5px solid var(--apricot)}
.yt-out.o3{border-top:5px solid var(--sage)}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE (single.html)
   ═══════════════════════════════════════════════════════════════ */
.yt-article{padding-top:44px;padding-bottom:24px}
.yt-art-meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--tech)!important;font-size:.56rem!important;letter-spacing:-.02em;color:var(--ink-2)!important
}
.yt-art-meta .wp-block-post-terms a{
  padding:4px 8px;border:1px solid var(--ink);background:var(--accent);color:var(--accent-ink)!important;
  font-weight:500;text-decoration:none
}
.yt-art-meta .wp-block-post-date{color:var(--ink-2)!important;font-family:var(--tech)!important;font-size:.56rem!important}
.yt-art-title{
  font-family:var(--tech)!important;font-weight:700!important;
  font-size:clamp(1.5rem,3.2vw,2.35rem)!important;line-height:1.24!important;
  letter-spacing:-.085em!important;margin-top:18px!important;margin-bottom:0!important;max-width:26ch
}
.yt-art-hero{margin-top:26px!important;margin-bottom:0!important}
.yt-art-hero img{width:100%;display:block;border:1px solid var(--ink)}
/* title-block strip under the article head */
.yt-art-block{
  border:1px solid var(--ink);background:var(--panel);display:grid;
  grid-template-columns:repeat(4,1fr);font-family:var(--tech);margin-top:26px!important
}
.yt-art-block > div{padding:9px 12px;border-right:1px solid var(--line)}
.yt-art-block > div:last-child{border-right:none}
.yt-art-block .k{font-size:.5rem;color:var(--ink-3);display:block;margin-bottom:4px}
.yt-art-block .v{font-size:.66rem;font-weight:500;letter-spacing:-.05em}
@media(max-width:680px){.yt-art-block{grid-template-columns:repeat(2,1fr)}.yt-art-block > div:nth-child(2){border-right:none}}

.yt-article .wp-block-post-content{
  font-family:var(--prose)!important;font-size:1.17rem;line-height:1.72;color:#2a2620;
  padding-top:30px
}
.yt-article .wp-block-post-content p{margin:0 0 1.05em}
.yt-article .wp-block-post-content h2{
  font-family:var(--tech)!important;font-weight:700!important;font-size:1.12rem!important;
  letter-spacing:-.075em!important;line-height:1.35!important;margin:1.9em 0 .55em;
  padding-bottom:9px;border-bottom:1px solid var(--line)
}
.yt-article .wp-block-post-content h3{
  font-family:var(--tech)!important;font-weight:700!important;font-size:.88rem!important;
  letter-spacing:-.07em!important;margin:1.5em 0 .45em
}
.yt-article .wp-block-post-content strong{color:var(--ink)}
.yt-article .wp-block-post-content a{color:var(--apricot-ink);text-decoration:underline;text-underline-offset:3px}
.yt-article .wp-block-post-content img{border:1px solid var(--ink);width:100%;display:block}
.yt-article .wp-block-post-content figcaption{
  font-family:var(--tech)!important;font-size:.56rem!important;color:var(--ink-3)!important;
  letter-spacing:-.02em;margin-top:8px;text-align:left
}
.yt-article .wp-block-embed{border:1px solid var(--ink);margin:1.7em 0;background:var(--ink)}
.yt-article .wp-block-post-content ul,.yt-article .wp-block-post-content ol{margin:0 0 1.05em;padding-left:1.3em}
.yt-article .wp-block-post-content li{margin-bottom:.4em}
.yt-article .wp-block-post-content blockquote{
  border-left:4px solid var(--accent);padding-left:18px;margin:1.5em 0;font-style:italic;color:var(--ink-2)
}
.yt-article .wp-block-table td,.yt-article .wp-block-table th{border:1px solid var(--line);padding:9px 12px}
.yt-article .wp-block-table th{background:var(--panel);font-family:var(--tech);font-size:.6rem;letter-spacing:-.03em}

/* callouts — kept from OVERPRINT, recoloured to the macaron palette */
.yt-callout{
  border:1px solid var(--ink)!important;border-left-width:5px!important;
  border-left-color:var(--accent)!important;background:var(--panel)!important;
  padding:18px 20px!important;margin:1.7em 0!important
}
.yt-callout p{margin:0 0 6px!important;font-family:var(--tech)!important;font-size:.8rem!important;line-height:1.6!important;letter-spacing:-.04em;color:var(--ink)!important}
.yt-callout p:last-child{margin-bottom:0!important}
.yt-callout .yt-cta a{
  font-family:var(--tech)!important;font-weight:500;font-size:.6rem!important;letter-spacing:-.03em;
  background:var(--ink);color:var(--paper)!important;padding:9px 14px;display:inline-block;
  margin-top:8px;text-decoration:none!important;border:1px solid var(--ink)
}
.yt-callout .yt-cta a:hover{background:var(--butter);color:var(--ink)!important}
.yt-callout.pro{border-left-color:var(--sage-ink)!important;background:#f7fbee!important}
.yt-callout.con{border-left-color:var(--apricot-ink)!important;background:#fdf5ee!important}
.yt-callout.pro > p:first-child,.yt-callout.con > p:first-child{text-transform:uppercase;letter-spacing:-.01em;font-weight:700}
.yt-callout.pro > p:first-child{color:var(--sage-ink)!important}
.yt-callout.con > p:first-child{color:var(--apricot-ink)!important}

.yt-art-foot{
  border-top:1px solid var(--ink);padding-top:18px;margin-top:40px;
  font-family:var(--tech)!important;font-size:.56rem!important;letter-spacing:-.02em;color:var(--ink-3)!important
}
.yt-art-foot a{color:var(--ink)!important}
.yt-art-foot a:hover{color:var(--apricot-ink)!important}

/* ═══════════════════════════════════════════════════════════════
   ARCHIVE / CATEGORY
   ═══════════════════════════════════════════════════════════════ */
.yt-arch-head{
  border:1px solid var(--ink);background:var(--accent);
  padding:26px 28px!important;margin-top:44px!important
}
.yt-arch-head .k{font-family:var(--tech)!important;font-size:.5rem!important;letter-spacing:-.01em;color:var(--ink-2)!important;margin:0 0 10px}
.yt-arch-head h1,.yt-arch-head .wp-block-query-title{
  font-family:var(--tech)!important;font-weight:700!important;font-size:clamp(1.2rem,2.6vw,1.8rem)!important;
  letter-spacing:-.085em!important;color:var(--accent-ink)!important;margin:0
}
.yt-arch-head .wp-block-term-description,.yt-arch-head .yt-arch-sub{
  font-family:var(--prose)!important;font-size:1.05rem!important;font-weight:300;
  color:var(--ink)!important;margin:10px 0 0;max-width:60ch;line-height:1.5!important
}
.yt-empty{
  border:1px dashed var(--line);background:var(--panel);padding:38px 28px!important;text-align:center
}
.yt-empty p{font-family:var(--prose)!important;font-size:1.06rem!important;color:var(--ink-2)!important;font-weight:300;margin:0 auto;max-width:48ch}
.yt-empty .k{font-family:var(--tech)!important;font-size:.5rem!important;letter-spacing:-.01em;color:var(--ink-3)!important;margin:0 0 12px}
/* pagination */
.wp-block-query-pagination{
  font-family:var(--tech)!important;font-size:.6rem!important;letter-spacing:-.03em;
  margin-top:26px!important;gap:8px
}
.wp-block-query-pagination a,.wp-block-query-pagination .current{
  border:1px solid var(--line);padding:6px 10px;text-decoration:none;color:var(--ink-2)!important
}
.wp-block-query-pagination .current{background:var(--ink);color:var(--paper)!important;border-color:var(--ink)}
.wp-block-query-pagination a:hover{border-color:var(--ink);color:var(--ink)!important;background:var(--butter)}

/* ═══════════════════════════════════════════════════════════════
   GENERIC PAGE / SEARCH / 404
   ═══════════════════════════════════════════════════════════════ */
.yt-page{padding-top:44px;padding-bottom:20px}
.yt-page-title{
  font-family:var(--tech)!important;font-weight:700!important;
  font-size:clamp(1.4rem,3vw,2.1rem)!important;line-height:1.26!important;
  letter-spacing:-.085em!important;margin-top:16px!important;margin-bottom:0!important;max-width:26ch
}
.yt-page-body{font-family:var(--prose)!important;font-size:1.12rem;line-height:1.68;color:#2a2620;padding-top:26px}
.yt-page-body h2{font-family:var(--tech)!important;font-weight:700!important;font-size:1.05rem!important;letter-spacing:-.075em!important;margin:1.8em 0 .5em;padding-bottom:9px;border-bottom:1px solid var(--line)}
.yt-page-body h3{font-family:var(--tech)!important;font-weight:700!important;font-size:.86rem!important;letter-spacing:-.07em!important;margin:1.4em 0 .4em}
.yt-page-body a{color:var(--apricot-ink);text-decoration:underline;text-underline-offset:3px}
.yt-page-body img{border:1px solid var(--ink);max-width:100%;height:auto}
.yt-page-body ul,.yt-page-body ol{padding-left:1.3em;margin:0 0 1.05em}
.yt-404{padding-top:80px;padding-bottom:80px;text-align:center}
.yt-404 .big{font-family:var(--tech)!important;font-weight:700!important;font-size:clamp(2.4rem,7vw,4.4rem)!important;letter-spacing:-.1em!important;margin:0;color:var(--ink)}
.yt-404 p{font-family:var(--prose)!important;font-size:1.12rem!important;color:var(--ink-2)!important;font-weight:300;margin:16px auto 0;max-width:44ch}
.wp-block-search__button{
  font-family:var(--tech)!important;font-size:.6rem!important;letter-spacing:-.03em;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:10px 16px
}
.wp-block-search__input{
  font-family:var(--tech)!important;font-size:.7rem!important;border:1px solid var(--ink);
  background:var(--panel);padding:10px 12px;border-radius:0
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.yt-footer{border-top:1px solid var(--line);background:var(--panel);margin-top:56px}
.yt-footer .yt-fgrid{padding-top:38px!important;padding-bottom:28px!important;font-family:var(--tech)}
.yt-footer h2{
  font-family:var(--tech)!important;font-size:1.24rem!important;font-weight:700!important;
  letter-spacing:-.09em!important;line-height:1.2!important;margin:0
}
.yt-footer h2 .u{background:linear-gradient(transparent 60%,var(--apricot) 60%)}
.yt-fcol{display:flex;flex-direction:column;gap:7px;font-size:.58rem;letter-spacing:-.03em;color:var(--ink-2)}
.yt-fcol .b{font-size:.5rem;color:var(--ink-3);font-weight:400;margin:0 0 4px}
.yt-fcol a{color:var(--ink-2)!important}
.yt-fcol a:hover{color:var(--apricot-ink)!important}
.yt-fbot{
  border-top:1px solid var(--line);font-family:var(--tech)!important;font-size:.5rem!important;
  color:var(--ink-3)!important;letter-spacing:-.01em;
  padding-top:12px!important;padding-bottom:12px!important;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px
}
.yt-fbot p{margin:0;font-size:.5rem!important;color:var(--ink-3)!important}

/* ═══════════════════════════════════════════════════════════════
   PLUGIN SURFACES — Calculated Fields Form (page 177)
   Targeted by WP's own body class so the page content needs no edit.
   ═══════════════════════════════════════════════════════════════ */
.page-id-177 .cff-form-container,.page-id-177 form.cff-form,
.yt-calc .cff-form-container,.yt-calc form.cff-form{
  border:1px solid var(--ink)!important;background:var(--panel)!important;
  padding:22px!important;border-radius:0!important;box-shadow:none!important
}
.page-id-177 .cff-form-container *,
.yt-calc .cff-form-container *{border-radius:0!important;font-family:var(--prose)!important}
.page-id-177 input[type=text],.page-id-177 input[type=number],.page-id-177 select,.page-id-177 textarea,
.yt-calc input[type=text],.yt-calc input[type=number],.yt-calc select,.yt-calc textarea{
  border:1px solid var(--line)!important;background:var(--paper)!important;
  font-family:var(--tech)!important;font-size:.72rem!important;padding:9px 10px!important
}
.page-id-177 .cff-label,.page-id-177 form label,
.yt-calc label,.yt-calc .cff-label{font-family:var(--tech)!important;font-size:.58rem!important;letter-spacing:-.02em;color:var(--ink-2)!important}
.page-id-177 input[type=submit],.page-id-177 .cff-form-container button,
.yt-calc input[type=submit],.yt-calc button{
  font-family:var(--tech)!important;font-size:.6rem!important;letter-spacing:-.03em;
  background:var(--ink)!important;color:var(--paper)!important;border:1px solid var(--ink)!important;padding:10px 16px!important
}

/* ═══════════════════════════════════════════════════════════════
   PHONE — vertical rhythm
   Desktop spacing reads as generous on a wide sheet and as dead space on a
   375px screen: 52px above every section heading, 60px above the hero, 56px
   before the footer. Roughly 40% off each, mobile only. Desktop untouched.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:560px){
  .yt-secbar{padding-top:30px;padding-bottom:13px}
  .yt-hero{padding-top:34px!important;padding-bottom:30px!important}
  .yt-legend{margin-top:20px!important}
  .yt-footer{margin-top:34px}
  .yt-footer .yt-fgrid{padding-top:26px!important;padding-bottom:20px!important}
  .yt-out{padding:14px!important}

  /* The section bar is [ 02 ] TITLE ──────── link →, and .yt-rt is nowrap. With
     the tighter gutter it no longer fits and pushed the page 24px wide. Let the
     bar wrap so the link drops to its own line; the title itself stays on one. */
  .yt-secbar{flex-wrap:wrap;row-gap:8px;column-gap:11px}
  .yt-secbar .yt-rule{min-width:20px}
  .yt-secbar .yt-rt{white-space:normal;margin-left:auto}
}
.page-id-177 .wp-block-image img,
.yt-calc .wp-block-image img{border:1px solid var(--ink)}