/* ==========================================================================
   ericchowreal.com components, on top of the shared site.css and property.css.
   Same rules as the family system: white and Ink grounds, Platinum as the only
   accent, zero radius, hairlines, flex-wrap grids. Only transform and opacity
   animate; everything hidden until revealed is scoped to html.js; nothing
   moves under prefers-reduced-motion; nothing decorative prints.
   ========================================================================== */

/* ---------------------------------------------------------------- shared tweaks */
/* Contrast on white grounds (WCAG AA): the shared rules below read at 3.4 to 3.8
   on white. .s-white p also outranks .pillar-w, which sits on an Ink cell. */
.s-white .pullquote cite{color:var(--ink-label);}
.s-white .pillar .pillar-w{color:var(--platinum);}
/* Long eyebrows (roles, founding lines) wrap on phones; give the second line air. */
.eyebrow{line-height:1.7; margin-bottom:22px;}

/* A <picture> (WebP with a JPEG fallback) lays out as the image it holds. */
picture{display:contents;}

/* ---------------------------------------------------------------- home hero */
.hero-person{min-height:clamp(640px, 96vh, 980px);}
.hero-person .hero-inner{padding-bottom:clamp(48px, 7vw, 88px);}
.hero-person h1{
  font-size:clamp(54px, 9.6vw, 138px); line-height:0.94; letter-spacing:-0.035em;
  max-width:none; margin-bottom:30px;
}
.hero-person h1 em{display:block;}
.hero-person .lede{max-width:48ch;}
.hero-copy{position:relative; z-index:2; max-width:min(640px, 54%);}
.hero-portrait{
  position:absolute; z-index:1; top:76px; bottom:0; right:0;
  width:min(52vw, 760px); margin:0; pointer-events:none;
}
.hero-portrait img{
  width:100%; height:100%; object-fit:cover; object-position:58% 18%;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 18%, #000 38%), linear-gradient(to top, transparent 0%, rgba(0,0,0,0.7) 16%, #000 34%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 18%, #000 38%), linear-gradient(to top, transparent 0%, rgba(0,0,0,0.7) 16%, #000 34%);
          mask-composite:intersect;
}
/* The blueprint sits between the words and the portrait on the home page. */
.hero-person .bp{right:auto; left:34%; height:min(122%, 1120px);}
/* A load-time entrance in CSS alone: no script is needed for the portrait to
   appear, and reduced motion (site.css) turns the animation off entirely. */
.hero-portrait{animation:im-portrait-in 1.6s var(--ease) .12s both;}
@keyframes im-portrait-in{from{opacity:0; transform:translate3d(24px,0,0);}to{opacity:1; transform:none;}}
.hero-portrait img{will-change:transform;}
.hero-person .hero-meta{background:linear-gradient(to top, rgba(10,10,10,0.92), rgba(10,10,10,0.6));}
/* The portrait runs to the right edge of the screen at every desktop width, so
   there is never a hard edge with bare Ink beside it on wide monitors. */
@media (min-width:1025px){ .hero-portrait{right:0; width:clamp(560px, 50vw, 1040px);} }
@media (min-width:1600px){ .hero-person .bp{left:30%;} }
@media (max-width:1024px){
  .hero-copy{max-width:none;}
  .hero-portrait{top:76px; bottom:auto; height:min(64vh, 620px); width:100%;}
  .hero-portrait img{
    object-position:50% 14%;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 38%, rgba(0,0,0,0.35) 72%, transparent 100%);
    -webkit-mask-composite:source-over;
            mask-image:linear-gradient(to bottom, #000 0%, #000 38%, rgba(0,0,0,0.35) 72%, transparent 100%);
            mask-composite:add;
  }
  .hero-person .bp{left:auto; right:-30%;}
  .hero-person{min-height:max(720px, 100svh); padding-top:clamp(360px, 52vh, 520px);}
}
@media (max-width:620px){
  .hero-person{padding-top:clamp(300px, 46vh, 420px);}
  .hero-portrait{height:min(56vh, 480px);}
}

/* ---------------------------------------------------------------- page hero with a photo */
.page-hero.has-photo .wrap{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr); gap:clamp(32px, 5vw, 80px); align-items:end;}
.page-hero .hero-photo{margin:0; position:relative; z-index:2; border:1px solid var(--rule-dark); background:var(--panel);}
.page-hero .hero-photo img{width:100%; height:auto;}
.page-hero .hero-photo figcaption{font-size:12.5px; line-height:1.55; color:var(--graphite); padding:10px 12px; border-top:1px solid var(--rule-dark);}
@media (max-width:880px){ .page-hero.has-photo .wrap{grid-template-columns:1fr;} .page-hero .hero-photo{max-width:420px;} }

/* ---------------------------------------------------------------- stats: five across */
.stats.five > .stat{flex:1 1 200px;}
.stat-note{margin-top:22px;}

/* ---------------------------------------------------------------- press row */
.press{border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark);}
.press-label{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--platinum); margin:0; padding:26px 0 0;}
.press-list{list-style:none; margin:0; padding:10px 0 0; display:flex; flex-wrap:wrap;}
.press-list li{flex:1 1 150px; padding:20px 20px 26px 0;}
.press-list a{text-decoration:none; display:block;}
.press-name{display:block; font-family:var(--display); font-size:clamp(19px, 1.9vw, 25px); font-weight:700; letter-spacing:-0.02em; color:var(--white); line-height:1.1; transition:color .35s var(--ease);}
.press-note{display:block; margin-top:9px; font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--graphite);}
.press-list a:hover .press-name,.press-list a:focus-visible .press-name{color:var(--platinum);}
.s-white .press{border-color:var(--rule-light);}
.s-white .press-label{color:var(--ink-label);}
.s-white .press-name{color:var(--ink);}
.s-white .press-note{color:var(--ink-label);}
.s-white .press-list a:hover .press-name{color:var(--slate);}

/* ---------------------------------------------------------------- statement */
.statement{max-width:1100px;}
.statement p{
  font-family:var(--display); font-weight:300; letter-spacing:-0.025em; line-height:1.2;
  font-size:clamp(28px, 4.2vw, 58px); color:var(--white); max-width:none; margin:0;
}
.statement p strong{font-weight:700; color:var(--white);}
.s-white .statement p,.s-white .statement p strong{color:var(--ink);}
.statement cite{display:block; margin-top:30px; font-family:var(--display); font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--graphite);}
.s-white .statement cite{color:var(--ink-label);}
.split .statement p{font-size:clamp(24px, 2.7vw, 38px); line-height:1.25;}

/* ---------------------------------------------------------------- book feature */
.book-feature{display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr); gap:clamp(40px, 6vw, 96px); align-items:start;}
@media (min-width:881px){ .book-feature > .book-figure{position:sticky; top:110px;} }
.book-feature .cover{max-width:400px; width:100%;}
.book-figure{margin:0;}
.book-figure figcaption{margin-top:12px; font-size:12.5px; line-height:1.55; color:var(--graphite);}
.s-white .book-figure figcaption{color:var(--ink-label);}
.formats{display:flex; flex-wrap:wrap; gap:1px; background:var(--rule-light); border:1px solid var(--rule-light); margin:34px 0 0;}
.formats > div{flex:1 1 150px; background:var(--white); padding:18px 18px 16px;}
.s-ink .formats{background:var(--rule-dark); border-color:var(--rule-dark);}
.s-ink .formats > div{background:var(--ink);}
.formats dt{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label); margin-bottom:8px;}
.formats dd{margin:0; font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-0.02em; color:var(--ink);}
.formats dd.soft{font-size:16px; letter-spacing:-0.01em; padding-top:4px;}
.formats dd small{display:block; margin-top:4px; font-family:var(--body); font-size:12.5px; font-weight:400; letter-spacing:0; color:var(--ink-label);}
.s-ink .formats dt{color:var(--graphite);}
.s-ink .formats dd{color:var(--white);}
.s-ink .formats dd.soft{font-size:16px; letter-spacing:-0.01em; padding-top:4px;}
.s-ink .formats dd small{color:var(--steel);}
@media (max-width:880px){ .book-feature{grid-template-columns:1fr;} .book-feature .cover{max-width:300px;} }

/* Contents of the book */
.contents{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-light);}
.contents li{display:flex; gap:22px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--rule-light);}
.contents .n{flex:0 0 58px; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.18em; color:var(--ink-label);}
.contents .t{font-family:var(--display); font-size:clamp(17px, 1.6vw, 20px); font-weight:600; letter-spacing:-0.015em; color:var(--ink);}
.contents .c{margin-left:auto; font-size:13px; color:var(--ink-label); white-space:nowrap;}
.contents li.essay .t{font-weight:300; font-style:italic;}

/* Acclaim */
.acclaim{display:flex; flex-wrap:wrap; gap:1px; background:var(--rule-dark); border:1px solid var(--rule-dark);}
.acclaim figure{flex:1 1 300px; margin:0; background:var(--ink); padding:clamp(28px, 3vw, 40px);}
.acclaim blockquote{margin:0 0 22px; font-family:var(--display); font-weight:300; font-size:clamp(18px, 1.7vw, 21px); line-height:1.5; letter-spacing:-0.01em; color:var(--white);}
.acclaim figcaption{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--platinum); line-height:1.6;}
.acclaim figcaption span{display:block; color:var(--graphite); font-weight:600; letter-spacing:0.14em;}

/* ---------------------------------------------------------------- photo pair and mosaics */
.photo-pair{display:flex; flex-wrap:wrap; gap:clamp(16px, 2vw, 28px);}
.photo-pair figure{flex:1 1 300px; margin:0;}
.photo-pair img{width:100%; height:auto; border:1px solid var(--rule-dark);}
.s-white .photo-pair img{border-color:var(--rule-light);}
.photo-pair figcaption{margin-top:10px; font-size:12.5px; line-height:1.55; color:var(--graphite);}
.s-white .photo-pair figcaption{color:var(--ink-label);}

/* ---------------------------------------------------------------- mini timeline (home) */
.tl-mini{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); border-top:1px solid var(--rule-light); position:relative;}
.tl-mini + .tl-mini-label{margin-top:clamp(40px, 5vw, 56px);}
.tl-mini-label{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label); margin:0 0 16px;}
.tl-mini.ahead{border-top-style:dashed; border-top-color:var(--slate);}
.tl-mini li{padding:28px 18px 6px 0; position:relative; min-width:0;}
@media (max-width:1024px){ .tl-mini{grid-template-columns:repeat(4, minmax(0,1fr));} .tl-mini li{padding-bottom:22px;} }
@media (max-width:620px){ .tl-mini{grid-template-columns:repeat(2, minmax(0,1fr));} }
.tl-mini li::before{content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; background:var(--white); border:1px solid var(--ink);}
.tl-mini li.future::before{background:var(--white); border-style:dashed; border-color:var(--slate);}
.tl-mini .y{display:block; font-family:var(--display); font-size:clamp(26px, 2.6vw, 34px); font-weight:800; letter-spacing:-0.03em; color:var(--ink); line-height:1;}
.tl-mini .w{display:block; margin-top:12px; font-size:14px; line-height:1.6; color:var(--ink-body);}
.tl-mini li.future .y{color:var(--slate);}
.s-ink .tl-mini{border-color:var(--rule-dark);}
.s-ink .tl-mini li::before{background:var(--ink); border-color:var(--platinum);}
.s-ink .tl-mini .y{color:var(--white);}
.s-ink .tl-mini .w{color:var(--steel);}

/* ---------------------------------------------------------------- the timeline */
.tl{display:grid; grid-template-columns:minmax(0,0.42fr) minmax(0,1fr); gap:clamp(24px, 5vw, 80px); align-items:start;}
.tl-aside{position:sticky; top:110px;}
.tl-now{font-family:var(--display); font-weight:800; font-size:clamp(64px, 9vw, 150px); letter-spacing:-0.05em; line-height:0.9; color:var(--ink); margin:0 0 18px; font-variant-numeric:tabular-nums;}
.tl-now-label{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label); margin:0;}
.tl-legend{margin-top:34px; font-size:13.5px; line-height:1.7; color:var(--ink-label); max-width:30ch;}
.tl-list{list-style:none; margin:0; padding:0 0 0 34px; position:relative;}
.tl-list::before{content:""; position:absolute; left:4px; top:8px; bottom:0; width:1px; background:var(--rule-light);}
.tl-track{position:relative;}
.tl-rail{position:absolute; z-index:1; left:4px; top:8px; bottom:0; width:1px; background:var(--ink); transform-origin:top; transform:scaleY(0);}
.tl-item{position:relative; padding:0 0 clamp(40px, 5vw, 60px);}
.tl-item[hidden]{display:none !important;}
.tl-item::before{content:""; position:absolute; left:-34px; top:6px; width:9px; height:9px; background:var(--white); border:1px solid var(--ink); transition:background-color .4s var(--ease);}
.tl-item.passed::before{background:var(--ink);}
.tl-item.future::before{border-style:dashed; border-color:var(--slate);}
.tl-when{display:flex; align-items:baseline; gap:14px; margin:0 0 10px; font-family:var(--display);}
.tl-year{font-size:22px; font-weight:800; letter-spacing:-0.02em; color:var(--ink);}
.tl-date{font-size:10.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-label);}
.tl-item .tl-tag{display:flex; align-items:center; gap:10px; margin:0 0 12px; max-width:none; font-family:var(--display); font-size:10px; font-weight:700; line-height:1.4; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label);}
.tl-item .tl-tag::before{content:""; flex:none; width:18px; border-top:1px solid currentColor;}
.tl-item.future .tl-tag::before{border-top-style:dashed;}
.tl-item h3{margin:0 0 10px; font-size:clamp(20px, 1.9vw, 25px);}
.tl-item p{font-size:15.5px; line-height:1.75; color:var(--ink-body); max-width:62ch;}
.tl-item p + p{margin-top:12px;}
.tl-item blockquote{margin:18px 0 0; padding-left:20px; border-left:1px solid var(--ink); font-family:var(--display); font-weight:300; font-size:18px; line-height:1.55; color:var(--ink); max-width:56ch;}
.tl-item blockquote cite{display:block; margin-top:10px; font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-label);}
.tl-item figure{margin:22px 0 0; max-width:520px;}
.tl-item figure img{width:100%; height:auto; border:1px solid var(--rule-light);}
.tl-item figure figcaption{margin-top:8px; font-size:12.5px; color:var(--ink-label);}
.tl-era{list-style:none; margin:0 0 clamp(26px, 3vw, 34px) -34px; padding:0; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--ink-label);}
/* im.js sets ec-js on <html> itself, so if that file never runs, nothing here hides. */
.ec-js .tl-item .tl-body{opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.ec-js .tl-item.in .tl-body{opacity:1; transform:none;}
@media (max-width:880px){
  .tl{grid-template-columns:1fr;}
  .tl-aside{position:static;}
  .tl-now{font-size:clamp(56px, 18vw, 96px);}
}

/* ---------------------------------------------------------------- long-form biography */
.bio{display:grid; grid-template-columns:minmax(0,0.3fr) minmax(0,1fr); gap:clamp(28px, 5vw, 84px); align-items:start;}
.bio-toc{position:sticky; top:110px; border-top:1px solid var(--ink); padding-top:18px;}
.bio-toc p{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label); margin:0 0 12px;}
.bio-toc ol{list-style:none; margin:0; padding:0;}
.bio-toc li{border-bottom:1px solid var(--rule-light);}
.bio-toc a{display:block; padding:10px 0; font-size:14px; color:var(--ink-body); text-decoration:none; transition:color .3s var(--ease);}
.bio-toc a:hover,.bio-toc a[aria-current="true"]{color:var(--ink);}
.bio-toc a[aria-current="true"]{font-weight:500;}
.bio .prose{max-width:720px;}
.bio .prose h2{scroll-margin-top:100px;}
.bio-figure{margin:40px 0; clear:both;}
.bio-figure img{width:100%; height:auto; border:1px solid var(--rule-light);}
.bio-figure figcaption{margin-top:10px; font-size:12.5px; line-height:1.55; color:var(--ink-label);}
.bio-lead{font-family:var(--display); font-weight:300; font-size:clamp(20px, 2vw, 25px); line-height:1.5; letter-spacing:-0.01em; color:var(--ink); max-width:none;}
.prose .bio-lead{color:var(--ink);}
@media (max-width:980px){ .bio{grid-template-columns:1fr;} .bio-toc{position:static;} }

/* ---------------------------------------------------------------- routes (contact) */
.routes .cell h3{margin-bottom:12px;}
.routes .cell .tlink{margin-top:20px;}

/* ---------------------------------------------------------------- email list on Ink */
.subscribe-lg{max-width:620px; margin:34px auto 0; display:flex; flex-wrap:wrap; gap:0;}
.subscribe-lg input{flex:1 1 180px; min-width:0; font-size:15px; padding:16px 16px; border-right:1px solid var(--rule-dark);}
.subscribe-lg input + input{border-left:0;}
.subscribe-lg button{flex:0 0 auto; padding:16px 26px; font-size:11px;}
.subscribe-lg .fine{flex:1 1 100%; max-width:none; margin:14px 0 0; text-align:center;}
@media (max-width:620px){
  .subscribe-lg input{flex:1 1 100%; border-right:1px solid var(--rule-dark);}
  .subscribe-lg input + input{border-left:1px solid var(--rule-dark); border-top:0;}
  .subscribe-lg button{flex:1 1 100%;}
}
.cta-note{margin-top:18px;}

/* ---------------------------------------------------------------- blog */
/* Article pages (written by the blog dashboard): the author note under the text. */
.post-author{display:grid; grid-template-columns:96px minmax(0,1fr); gap:22px; align-items:start; margin:56px 0 0; padding:26px 0 0; border-top:1px solid var(--ink);}
.post-author img{width:96px; height:120px; object-fit:cover; object-position:50% 18%; border:1px solid var(--rule-light);}
.prose .post-author p{font-size:15px; line-height:1.7; margin:0 0 10px;}
.prose .post-author .post-author-name{font-family:var(--display); font-size:16px; font-weight:700; letter-spacing:-0.005em; color:var(--ink); margin:0 0 6px;}
.prose .post-author .post-author-links{display:flex; flex-wrap:wrap; gap:6px 20px; margin:0;}
@media (max-width:520px){
  .post-author{grid-template-columns:72px minmax(0,1fr); gap:16px;}
  .post-author img{width:72px; height:90px;}
}
.posts .cell h3 a{color:inherit; text-decoration:none;}
.posts .cell h3 a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;}
.posts .cell .tlink{margin-top:22px;}
.posts-empty{border-top:1px solid var(--rule-light); border-bottom:1px solid var(--rule-light); padding:34px 0; max-width:none;}
.posts-empty p{max-width:60ch;}
.elsewhere{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dark);}
.elsewhere li{border-bottom:1px solid var(--rule-dark);}
.elsewhere a{display:flex; flex-wrap:wrap; gap:6px 24px; align-items:baseline; padding:22px 0; text-decoration:none; color:var(--white);}
.elsewhere .t{flex:1 1 320px; font-family:var(--display); font-size:clamp(18px, 1.8vw, 22px); font-weight:600; letter-spacing:-0.015em; line-height:1.3;}
.elsewhere .w{flex:0 0 auto; max-width:100%; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--graphite);}
.elsewhere a:hover .t{color:var(--platinum);}
.s-white .elsewhere{border-color:var(--rule-light);}
.s-white .elsewhere li{border-color:var(--rule-light);}
.s-white .elsewhere a{color:var(--ink);}
.s-white .elsewhere .w{color:var(--ink-label);}
.s-white .elsewhere a:hover .t{color:var(--slate);}
/* A long email address may break anywhere rather than run past a narrow screen. */
a[href^="mailto:"]{overflow-wrap:anywhere;}
/* The Companies page: the newest releases under the newsroom's heading, kept current by im.js. */
.nr-latest{max-width:820px; margin:34px auto 38px; text-align:left;}

/* An article page */
.article-hero-img{margin:0 0 36px;}
.article-hero-img img{width:100%; height:auto; border:1px solid var(--rule-light);}
.article-hero-img figcaption{margin-top:9px; font-size:12.5px; color:var(--ink-label);}

/* ---------------------------------------------------------------- utility */
.center{text-align:center;}
.mt-0{margin-top:0;}
.eyebrow-center{justify-content:center;}
.kicker-list{display:flex; flex-wrap:wrap; gap:8px 26px; list-style:none; margin:26px 0 0; padding:0; font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--graphite);}
.s-white .kicker-list{color:var(--ink-label);}
.split-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px; margin-bottom:clamp(36px, 4.5vw, 56px);}
.split-head .section-head{margin-bottom:0;}

/* ---------------------------------------------------------------- the signature
   A two-layer wipe: the outer span slides in from the left while the inner one
   slides back, so the ink appears left to right, in place. Transform only. The
   resting state is the whole signature: without JavaScript, under reduced
   motion, and in print, nothing is hidden. */
.sig-wipe{display:inline-block; overflow:hidden; vertical-align:bottom; line-height:0; max-width:100%;}
.sig-wipe-in{display:block;}
.sig-wipe img{display:block; width:100%; height:auto;}
@keyframes im-wipe-out{from{transform:translateX(-101%);}to{transform:none;}}
@keyframes im-wipe-in{from{transform:translateX(101%);}to{transform:none;}}
/* On load: the home hero, Chow’s Choice, and the utility pages. */
.hero-sig .sig-wipe,.et-sig .sig-wipe,.utility-sig .sig-wipe{animation:im-wipe-out 1.5s var(--ease) 1s both;}
.hero-sig .sig-wipe-in,.et-sig .sig-wipe-in,.utility-sig .sig-wipe-in{animation:im-wipe-in 1.5s var(--ease) 1s both;}
/* On arrival: a sign-off writes itself in when it scrolls into view (site.js reveals .rv). */
.js .sign-off.rv .sig-wipe{transform:translateX(-101%); transition:transform 1.5s var(--ease) .25s;}
.js .sign-off.rv .sig-wipe-in{transform:translateX(101%); transition:transform 1.5s var(--ease) .25s;}
.js .sign-off.rv.in .sig-wipe,.js .sign-off.rv.in .sig-wipe-in{transform:none;}

/* The home hero: signed across the portrait, where the photograph fades to Ink. */
.hero-sig{position:absolute; z-index:2; left:6%; bottom:8%; width:clamp(150px, 15vw, 230px); pointer-events:none;}
.hero-sig .sig-wipe{width:100%;}
@media (max-width:1024px){ .hero-sig{left:auto; right:6%; bottom:auto; top:32%; width:clamp(96px, 22vw, 150px);} }
.et-sig{margin:30px 0 0; width:clamp(78px, 8vw, 104px); max-width:none;}
.utility-sig{margin:6px 0 30px; width:clamp(72px, 7vw, 92px); max-width:none;}

/* A signed close */
.sign-off{margin:clamp(40px, 5vw, 56px) 0 0; display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap;}
.sign-off .sig-wipe{width:clamp(110px, 12vw, 150px); flex:none;}
.sign-off figcaption{padding-bottom:10px; border-bottom:1px solid var(--rule-light);}
.sign-off .so-name{display:block; font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:var(--ink);}
.sign-off .so-role{display:block; margin-top:7px; font-size:13px; line-height:1.5; color:var(--ink-label);}
.s-ink .sign-off figcaption{border-color:var(--rule-dark);}
.s-ink .sign-off .so-name{color:var(--white);}
.s-ink .sign-off .so-role{color:var(--graphite);}
.sign-off.so-sm .sig-wipe{width:clamp(84px, 9vw, 112px);}
.pullquote + .sign-off{margin-top:30px;}

/* ---------------------------------------------------------------- tabs
   Without JavaScript each panel shows in order under its own heading; im.js
   builds the tab list and shows one panel at a time. */
.tab-list{display:flex; flex-wrap:wrap; gap:0 34px; margin:0 0 clamp(30px, 3.5vw, 44px); border-bottom:1px solid var(--rule-light);}
.tab-list[hidden]{display:none;}
.tab-btn{
  all:unset; cursor:pointer; position:relative; padding:16px 0 15px;
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label);
  transition:color .3s var(--ease);
}
.tab-btn::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);}
.tab-btn:hover{color:var(--ink);}
.tab-btn[aria-selected="true"]{color:var(--ink);}
.tab-btn[aria-selected="true"]::after{transform:none;}
.tab-btn:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
.tab-panel + .tab-panel{margin-top:clamp(48px, 6vw, 72px); padding-top:clamp(36px, 4vw, 48px); border-top:1px solid var(--rule-light);}
.tab-title{font-size:clamp(20px, 2vw, 26px); margin:0 0 22px;}
.tabs.is-tabs .tab-panel + .tab-panel{margin-top:0; padding-top:0; border-top:0;}
.tabs.is-tabs .tab-title{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.tabs.is-tabs .tab-panel[hidden]{display:none;}
.tabs.is-tabs .tab-panel.enter{animation:im-panel-in .55s var(--ease) both;}
@keyframes im-panel-in{from{opacity:0; transform:translate3d(0,10px,0);}to{opacity:1; transform:none;}}
.method{margin-top:clamp(72px, 9vw, 120px); padding-top:clamp(48px, 6vw, 72px); border-top:1px solid var(--rule-light);}

/* ---------------------------------------------------------------- the timeline: jump to a year, and the count */
.tl-years{margin-top:30px; border-top:1px solid var(--rule-light); padding-top:16px;}
.tl-years ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 16px;}
.tl-years a{display:inline-block; padding:4px 0; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:0.04em; color:var(--ink-label); text-decoration:none; border-bottom:1px solid transparent; font-variant-numeric:tabular-nums; transition:color .3s var(--ease), border-color .3s var(--ease);}
.tl-years a.ahead{color:var(--slate);}
.tl-years a:hover,.tl-years a[aria-current="true"]{color:var(--ink); border-color:var(--ink);}
.tl-count{margin-top:16px; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label);}
.tl-item{scroll-margin-top:110px;}
@media (max-width:880px){ .tl-years{display:none;} }

/* ---------------------------------------------------------------- contact: the route finder and the time in Little Rock */
.local-time{margin:24px 0 0; font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--graphite);}
.local-time[hidden]{display:none;}
.local-time time{color:var(--white); font-variant-numeric:tabular-nums;}
.route-finder{margin:0 0 clamp(28px, 3.5vw, 44px);}
.route-finder[hidden]{display:none;}
.route-ask{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label); margin:0 0 14px;}
.routes .cell{transition:opacity .4s var(--ease), transform .45s var(--ease), background-color .45s var(--ease);}
.routes.has-pick .cell{opacity:0.36;}
.routes.has-pick .cell.on{opacity:1; background:#F6F4EF;}

/* ---------------------------------------------------------------- Behind the Scenes, the newsletter */
.mm-hero .subscribe-lg{margin:34px 0 0;}
.mm-hero .subscribe-lg .fine{text-align:left;}
.minute-done{padding:22px 0 4px; max-width:620px; text-align:left; outline:none;}
.subscribe-lg + .minute-done,.cta .minute-done{margin:34px auto 0;}
.minute-done .md-title{font-family:var(--display); font-size:clamp(20px, 2vw, 25px); font-weight:700; letter-spacing:-0.015em; color:var(--white); margin:0 0 10px;}
.minute-done p{font-size:15px; line-height:1.7; color:var(--steel); margin:0; max-width:56ch;}
.minute-done .sig-wipe{width:78px; margin:0 0 16px; animation:im-wipe-out 1.3s var(--ease) .1s both;}
.minute-done .sig-wipe-in{animation:im-wipe-in 1.3s var(--ease) .1s both;}
.cta .minute-done{text-align:center;}
.cta .minute-done p{margin:0 auto;}
.s-white .minute-done .md-title,.cta.s-white .minute-done .md-title{color:var(--ink);}
.s-white .minute-done p{color:var(--ink-body);}
.site-footer .minute-done{padding:10px 0 0;}
.site-footer .minute-done .md-title{font-size:15px;}
.site-footer .minute-done p{font-size:13px; color:var(--graphite);}
.site-footer .minute-done .sig-wipe{display:none;}
.recent{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 5vw, 72px);}
.recent-label{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label); margin:0 0 14px;}
.recent-list:empty{display:none;}
.recent-all{margin-top:18px;}
@media (max-width:880px){ .recent{grid-template-columns:1fr;} }

/* ---------------------------------------------------------------- Chow’s Choice */
.et-search{flex:0 1 340px;}
.et-search[hidden]{display:none;}
.et-search input{
  display:block; width:100%; box-sizing:border-box; padding:14px 0; border:0; border-bottom:1px solid var(--ink); border-radius:0; background:transparent;
  font-family:var(--body); font-size:15px; color:var(--ink);
}
.et-search input::placeholder{color:var(--ink-label);}
.et-search input:focus{outline:none; border-bottom-width:2px; padding-bottom:13px;}
.et-search input:focus-visible{outline:2px solid var(--ink); outline-offset:4px;}
/* The browser's own clear button, drawn in ink rather than its default blue. */
.et-search input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none; width:13px; height:13px; margin-left:10px; cursor:pointer; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M1.5 1.5l10 10M11.5 1.5l-10 10' stroke='%230A0A0A' stroke-width='1.5'/%3E%3C/svg%3E") center / 13px 13px no-repeat;}
.posts .cell.et-miss{display:none !important;}
.et-none{margin:24px 0 0;}
.et-none[hidden]{display:none;}
.et-clear{margin-left:10px;}
/* An essay first published elsewhere says so, with a link to the original (its canonical). */
.prose p.first-published{max-width:none; margin:32px 0 0; padding:14px 0 0; border-top:1px solid var(--rule-light); font-size:14px; line-height:1.6; color:var(--ink-label);}
.prose p.first-published a{color:var(--ink);}
.posts .cell p.post-src{margin-top:14px; font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-label);}
/* An essay: the share row and the signed close (written by the dashboard) */
.share-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:40px 0 0; padding:18px 0; border-top:1px solid var(--rule-light); border-bottom:1px solid var(--rule-light);}
.share-label{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label); margin-right:10px;}
.prose .share-bar a{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding:10px 14px; border:1px solid var(--ink-label); transition:background-color .3s var(--ease), color .3s var(--ease);}
.prose .share-bar a:hover,.prose .share-bar a:focus-visible{background:var(--ink); color:var(--white);}
.share-bar button[hidden]{display:none;}
.post-more{margin:clamp(48px, 6vw, 72px) 0 0;}
.post-more[hidden]{display:none;}
.post-more-label{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label); margin:0 0 14px;}
.prose .post-more .elsewhere{padding-left:0;}
.prose .post-more .elsewhere li{margin:0;}
.prose .post-more .elsewhere a{color:var(--ink); text-decoration:none;}

/* ---------------------------------------------------------------- not found: suggestions from the site index */
.nf-suggest{margin-top:clamp(40px, 5vw, 56px); max-width:760px;}
.nf-suggest[hidden]{display:none;}
.nf-label{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--platinum); margin:0 0 12px;}

/* Ink grounds for the shared controls */
.s-ink .p3-rule,.s-ink .p3-n,.s-ink .calc-days,.s-ink .sky-result b{color:var(--white);}
.s-ink .p3-u,.s-ink .sky-result span{color:var(--steel);}
.s-ink .calc-label,.s-ink .p3-track i{color:var(--graphite); border-color:var(--graphite);}
.s-ink .p3-calc,.s-ink .sky-calc{border-color:var(--platinum);}
.s-ink .p3-presets button,.s-ink .route-chips button,.s-ink .talk-pick{color:var(--white); border-color:var(--slate);}
.s-ink .p3-presets [aria-pressed="true"],.s-ink .talk-pick[aria-pressed="true"]{background:var(--white); color:var(--ink); border-color:var(--white);}
.s-ink .talk-hint,.s-ink .talk-tray{color:var(--steel);}

/* ---------------------------------------------------------------- reduced motion and print */
@media (prefers-reduced-motion: reduce){
  .hero-portrait,.ec-js .tl-item .tl-body{opacity:1 !important; transform:none !important; transition:none !important; animation:none !important;}
  .sig-wipe,.sig-wipe-in,.js .sign-off.rv .sig-wipe,.js .sign-off.rv .sig-wipe-in,.sky-city span,.tab-panel.enter,.cx details[open] .cx-body,
  .js .cx.rv .cx-bar span,.js .composite.rv .seg,.js .lots.rv .lot-area,.p3-fill,.pan .w,.laws-line{animation:none !important; transition:none !important;}
  .sig-wipe,.sig-wipe-in,.js .sign-off.rv .sig-wipe,.js .sign-off.rv .sig-wipe-in,.js .composite.rv .seg,.js .lots.rv .lot-area{transform:none !important; opacity:1 !important;}
  .js .cx.rv .cx-bar span{transform:scaleX(var(--w)) !important;}
  .video-poster img{transition:none !important; transform:none !important;}
  .hero-portrait img{transform:none !important;}
  .js .org.rv .org-stem,.js .org.rv .org-branches > li::before{transform:none !important; transition:none !important;}
  .tl-rail{display:none;}
}
@media print{
  .bp,.hero-portrait,.tl-rail,.copy-btn,.subscribe,.subscribe-lg{display:none !important;}
  .hero-sig,.et-sig,.utility-sig,.tab-list,.p3-calc,.sky-calc,.pledge-calc,.route-finder,.unit-toggle,.talk-pick,.talk-tray,.et-search,.share-bar,.post-more,.nf-suggest,.local-time,.laws-line,.hz-today,.vp-play,.vp-label,.minute-done{display:none !important;}
  .sig-wipe,.sig-wipe-in{transform:none !important; animation:none !important;}
  .tabs.is-tabs .tab-panel[hidden]{display:block !important;}
  .tabs.is-tabs .tab-title{position:static; width:auto; height:auto; margin:0 0 16px; clip:auto; white-space:normal;}
  .js .cx.rv .cx-bar span{transform:scaleX(var(--w)) !important;}
  .js .composite.rv .seg,.js .lots.rv .lot-area{transform:none !important; opacity:1 !important;}
  .cx details > .cx-body{display:block;}
  .hero-person{min-height:0; padding-top:40px;}
  .hero-copy{max-width:none;}
  .hero-portrait,.ec-js .tl-item .tl-body,.org-stem,.org-branches > li::before{opacity:1 !important; transform:none !important; animation:none !important;}
  .tl-aside{position:static;}
  .bio-toc{display:none;}
  .bio{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------- testimonials
   Two voices, set as quotes rather than cards. */
.testimonials{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(32px, 5vw, 80px); margin-top:clamp(8px, 2vw, 20px);}
.testimonial{margin:0; border-top:1px solid var(--ink); padding-top:clamp(22px, 2.6vw, 32px);}
.testimonial blockquote{margin:0;}
.testimonial blockquote p{font-family:var(--display); font-size:clamp(19px, 2.1vw, 26px); font-weight:300; line-height:1.45; letter-spacing:-0.02em; color:var(--ink); margin:0; max-width:none;}
.testimonial figcaption{margin-top:22px;}
.testimonial .t-name{display:block; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:0.04em; color:var(--ink);}
.testimonial .t-role{display:block; margin-top:5px; font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-label);}
.s-ink .testimonial{border-color:var(--platinum);}
.s-ink .testimonial blockquote p,.s-ink .testimonial .t-name{color:var(--white);}
.s-ink .testimonial .t-role{color:var(--graphite);}
.measure .testimonial,.prose .testimonial{margin:clamp(32px, 4vw, 48px) 0;}
.prose .testimonial blockquote{border:0; padding:0;}
@media (max-width:760px){ .testimonials{grid-template-columns:minmax(0, 1fr);} }

/* ---------------------------------------------------------------- In the Media */
.stats.stats-3 > .stat{flex:1 1 180px;}
.page-hero .stats{margin-top:clamp(36px, 5vw, 56px);}
.m-group + .m-group{margin-top:clamp(56px, 7vw, 96px);}
.m-group[hidden]{display:none;}
.media-list .m-what{flex:1 0 100%; font-size:13.5px; color:var(--ink-label); margin-top:-2px;}
.s-ink .media-list .m-what{color:var(--steel);}
.media-list .m-static{display:flex; flex-wrap:wrap; gap:6px 24px; align-items:baseline; padding:22px 0; color:var(--ink);}
.s-ink .media-list .m-static{color:var(--white);}
.and-more{margin-top:clamp(56px, 7vw, 96px); border-top:1px solid var(--ink); padding-top:26px; max-width:760px;}
.and-more .am-label{font-family:var(--display); font-size:clamp(26px, 3.2vw, 40px); font-weight:700; letter-spacing:-0.03em; line-height:1; color:var(--ink); margin:0 0 16px;}
.profile-links{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dark);}
.profile-links li{border-bottom:1px solid var(--rule-dark);}
.profile-links a{display:flex; justify-content:space-between; align-items:center; padding:18px 0; text-decoration:none; font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--white); transition:color .3s var(--ease);}
.profile-links a:hover,.profile-links a:focus-visible{color:var(--platinum);}
.press-list .press-more .press-name{font-weight:300; font-style:italic;}

/* ---------------------------------------------------------------- the podcast archive */
.ep-tools{display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px 36px; margin:0 0 30px;}
.ep-tools[hidden]{display:none;}
.ep-tools input{
  flex:1 1 280px; max-width:380px; box-sizing:border-box; padding:14px 0; border:0; border-bottom:1px solid var(--ink); border-radius:0; background:transparent;
  font-family:var(--body); font-size:15px; color:var(--ink);
}
.ep-tools input::placeholder{color:var(--ink-label);}
.ep-tools input:focus{outline:none; border-bottom-width:2px; padding-bottom:13px;}
.ep-tools input:focus-visible{outline:2px solid var(--ink); outline-offset:4px;}
.ep-tools input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none; width:13px; height:13px; margin-left:10px; cursor:pointer; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M1.5 1.5l10 10M11.5 1.5l-10 10' stroke='%230A0A0A' stroke-width='1.5'/%3E%3C/svg%3E") center / 13px 13px no-repeat;}
.ep-years{display:flex; flex-wrap:wrap; border-bottom:1px solid var(--rule-light);}
.ep-years button{
  all:unset; cursor:pointer; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-label); padding:14px 0; margin-right:24px; margin-bottom:-1px; border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.ep-years button:hover{color:var(--ink);}
.ep-years button[aria-pressed="true"]{color:var(--ink); border-color:var(--ink);}
.ep-years button:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.ep-count{flex:1 0 100%; margin:0; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label);}
.ep-list{padding:0;}
.ep-list li[hidden]{display:none;}
.ep-more{margin:34px 0 0;}
.ep-more[hidden]{display:none;}

/* ---------------------------------------------------------------- FAQ */
.faq-jump{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:clamp(28px, 4vw, 44px);}
.faq-jump a{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--platinum); text-decoration:none; border-bottom:1px solid var(--rule-dark); padding-bottom:6px; transition:color .3s var(--ease), border-color .3s var(--ease);}
.faq-jump a:hover,.faq-jump a:focus-visible{color:var(--white); border-color:var(--platinum);}
.faq-wrap{max-width:980px;}
.faq-group{scroll-margin-top:110px;}
.faq-group + .faq-group{margin-top:clamp(52px, 6vw, 84px);}
.faq-h{margin:0 0 20px;}
@media print{
  .ep-tools,.ep-more,.faq-jump{display:none !important;}
  .ep-list li[hidden]{display:list-item !important;}
}

/* ---------------------------------------------------------------- breadcrumbs
   The visible trail above each inner page's eyebrow, matching its BreadcrumbList. */
.crumbs{margin:0 0 22px;}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 0;}
.crumbs li{font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--platinum);}
.crumbs li + li::before{content:"/"; margin:0 10px; color:var(--graphite);}
.crumbs a{color:var(--graphite); text-decoration:none; border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease);}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--white); border-bottom-color:currentColor;}
@media print{ .crumbs{display:none;} }

/* ---------------------------------------------------------------- header fit
   With Podcast in the nav, the narrowest desktop range tightens a little more
   so the nav, search, and Contact keep one line with the full gutter. */
@media (min-width:1101px) and (max-width:1279px){
  .site-header .wrap{gap:16px;}
  .nav{gap:14px;}
}

/* ---------------------------------------------------------------- lighting
   Every hero is lit like a studio backdrop: a key light from the upper right
   (the family's drifting glow, moved and warmed), a faint fill light low on
   the left, and the blueprint falling away into Ink before any edge, so it
   never stops at a hard line. The fade is an Ink gradient over the drawing,
   which works the same on pages the dashboard and newsroom write. Only
   transform animates; reduced motion stops it (site.css). */
.hero::before,.page-hero::before{
  left:auto; right:-26%; top:-62%;
  width:min(1500px, 160vw);
  background:radial-gradient(closest-side, rgba(200,197,190,0.19), rgba(200,197,190,0.075) 40%, rgba(200,197,190,0.02) 70%, rgba(200,197,190,0) 100%);
  animation:im-key-light 32s var(--ease) infinite alternate;
}
.hero-person::before{right:-18%; top:-48%;}
@keyframes im-key-light{
  0%  {transform:translate3d(0,0,0) scale(1);}
  50% {transform:translate3d(-7%,5%,0) scale(1.05);}
  100%{transform:translate3d(-12%,-2%,0) scale(0.98);}
}
.hero.has-bp::after,.page-hero.has-bp::after{
  display:block; content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:none; mask-image:none; background-size:auto;
  background:
    radial-gradient(ellipse 60% 70% at 4% 108%, rgba(200,197,190,0.07), rgba(200,197,190,0) 70%),
    linear-gradient(to top, var(--ink) 0%, rgba(10,10,10,0.82) 12%, rgba(10,10,10,0) 46%),
    linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.2) 30%, rgba(10,10,10,0) 55%);
}
/* The blueprint fills the header now that it fades out, instead of stopping short. */
.page-hero .bp{height:210%; right:-4%; top:-42%; opacity:0.11;}
.hero-person .bp{opacity:0.1;}
@media (max-width:880px){
  .page-hero .bp{height:150%; right:-38%; top:-18%; opacity:0.09;}
  .hero.has-bp::after,.page-hero.has-bp::after{
    background:
      linear-gradient(to top, var(--ink) 0%, rgba(10,10,10,0.8) 14%, rgba(10,10,10,0) 50%),
      linear-gradient(to right, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0) 60%);
  }
}
@media print{ .hero::before,.page-hero::before,.hero.has-bp::after,.page-hero.has-bp::after{display:none !important;} }

/* ---------------------------------------------------------------- published artwork
   The show's cover art, reproduced exactly as issued (no
   conversion to black and white), and set smaller than a photograph. */
.bio-figure.art-figure img,.tl-item figure.art img{max-width:min(100%, 340px); border-color:var(--rule-light);}
.tl-item figure.art{max-width:340px;}

/* ---------------------------------------------------------------- the podcast line
   Three shows, oldest first: two covers as they were published, and the next
   show held as an open panel until its artwork is released. */
.show-line{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(24px, 3vw, 44px); counter-reset:none;}
.show-line li{border-top:1px solid var(--ink); padding-top:24px; display:flex; flex-direction:column;}
.show-line figure{margin:0 0 22px; aspect-ratio:1/1; overflow:hidden; border:1px solid var(--rule-light); background:var(--ink);}
.show-line figure img{display:block; width:100%; height:100%; object-fit:cover;}
.show-line .sl-blank{aspect-ratio:1/1; margin:0 0 22px; background:var(--ink); border:1px solid var(--ink); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.show-line .sl-blank::before{content:""; position:absolute; inset:-20%; background:url("/assets/blueprint.svg") center / contain no-repeat; opacity:0.12;}
.show-line .sl-blank span{position:relative; font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.3em; text-transform:uppercase; color:var(--platinum);}
.show-line .sl-year{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label); margin:0 0 8px;}
.show-line h3{margin:0 0 10px;}
.show-line p{font-size:15px; line-height:1.65; color:var(--ink-body); margin:0;}
@media (max-width:900px){ .show-line{grid-template-columns:minmax(0, 1fr); max-width:520px;} }

/* ---------------------------------------------------------------- the statement
   The home page's loud moment: one line, set as large as the screen allows,
   each word sliding up into place under the key light. Transform only; the
   words rest in place without JavaScript, under reduced motion, and in print. */
.meet{position:relative; overflow:hidden; background:var(--ink); color:var(--white); padding:clamp(96px, 13vw, 190px) 0 0; border-bottom:1px solid var(--rule-dark);}
.meet::before{
  content:""; position:absolute; z-index:0; pointer-events:none; width:min(1300px, 150vw); aspect-ratio:1/1; left:-30%; top:-60%;
  background:radial-gradient(closest-side, rgba(200,197,190,0.16), rgba(200,197,190,0.05) 45%, rgba(200,197,190,0) 100%);
  animation:im-key-light 36s var(--ease) infinite alternate-reverse;
}
.meet .wrap{position:relative; z-index:1;}
.meet-kicker{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.3em; text-transform:uppercase; color:var(--platinum); margin:0 0 clamp(20px, 3vw, 34px);}
.meet-h{margin:0; font-family:var(--display); font-weight:800; font-size:clamp(52px, 11.2vw, 196px); line-height:0.9; letter-spacing:-0.045em; color:var(--white); max-width:none;}
.meet-h .mh-line{display:block; overflow:hidden; padding-bottom:0.06em;}
.meet-h .mh-line > span{display:inline-block;}
.meet-h em{font-style:normal; font-weight:300; color:var(--platinum);}
.js .meet-h.rv{opacity:1; transform:none;}
.js .meet-h.rv .mh-line > span{transform:translate3d(0, 108%, 0); transition:transform 1.1s var(--ease);}
.js .meet-h.rv .mh-line:nth-child(2) > span{transition-delay:.12s;}
.js .meet-h.rv .mh-line:nth-child(3) > span{transition-delay:.24s;}
.js .meet-h.rv.in .mh-line > span{transform:none;}
.meet-foot{display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); gap:clamp(28px, 5vw, 80px); align-items:end; margin-top:clamp(44px, 6vw, 80px); padding-bottom:clamp(48px, 6vw, 80px);}
.meet-lede{margin:0; font-size:clamp(17px, 1.5vw, 19px); line-height:1.7; color:#D9D6CF; max-width:44ch;}
.meet-fields{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border-top:1px solid var(--rule-dark);}
.meet-fields li{display:flex; gap:12px; align-items:baseline; padding:16px 12px 16px 0; border-bottom:1px solid var(--rule-dark);}
.meet-fields .mf-n{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.2em; color:var(--graphite);}
.meet-fields a{font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--white); text-decoration:none; transition:color .3s var(--ease);}
.meet-fields a:hover,.meet-fields a:focus-visible{color:var(--platinum);}
.meet-ticker{position:relative; z-index:1; overflow:hidden; border-top:1px solid var(--rule-dark); padding:18px 0;}
.mt-track{display:flex; width:max-content; animation:meet-ticker 60s linear infinite;}
.mt-track span{font-family:var(--display); font-size:clamp(22px, 2.6vw, 38px); font-weight:300; letter-spacing:-0.02em; color:var(--graphite); padding:0 clamp(22px, 3vw, 44px); white-space:nowrap;}
.mt-track span::after{content:"\00B7"; margin-left:clamp(22px, 3vw, 44px); color:var(--rule-dark);}
@keyframes meet-ticker{from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);}}
@media (max-width:880px){
  .meet-foot{grid-template-columns:minmax(0, 1fr);}
  .meet-fields{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (prefers-reduced-motion: reduce){ .meet-h .mh-line > span{transform:none !important;} }
@media print{ .meet-h .mh-line > span{transform:none !important;} .meet-ticker,.meet::before{display:none !important;} }
@media (max-width:620px){ .meet-h{font-size:14.4vw;} }

/* ---------------------------------------------------------------- phones
   Shorter scrolls without losing anything: the footer's link groups sit two
   across, the record's figures sit two by two, and the press photographs two
   across. */
@media (max-width:620px){
  .footer-top{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px 22px;}
  .footer-top > .footer-brand{grid-column:1 / -1;}
  .stats > .stat{flex:1 1 150px; padding:24px 18px;}
  .downloads > figure{flex:1 1 150px;}
  .downloads figcaption{padding:12px 12px 14px;}
  .bio-figure.art-figure img,.tl-item figure.art img{max-width:min(100%, 240px);}
  .tl-item figure.art{max-width:240px;}
}
/* The press sheet is a true grid, so an uneven count never stretches the last
   photograph across a row; hairlines come from each cell's own borders. */
.downloads{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; background:transparent; border:0; border-top:1px solid var(--rule-light); border-left:1px solid var(--rule-light);}
.downloads > figure{border-right:1px solid var(--rule-light); border-bottom:1px solid var(--rule-light);}
@media (max-width:1100px){ .downloads{grid-template-columns:repeat(3, minmax(0, 1fr));} }
@media (max-width:760px){ .downloads{grid-template-columns:repeat(2, minmax(0, 1fr));} }
.downloads .dl-frame{overflow:hidden; min-height:0;}
.downloads .dl-frame img{max-height:100%;}

/* ---------------------------------------------------------------- ericchowreal.com additions
   Published artwork in heroes and beside copy is shown whole, never cropped:
   the Manifesto cover (tall) and the podcast's cover art (square). */
.page-hero .hero-photo.hero-cover{width:min(300px, 100%); justify-self:end; align-self:center; background:none;}
.page-hero .hero-photo.hero-art{width:min(400px, 100%); justify-self:end; align-self:center;}
.page-hero .hero-photo.hero-cover img,.page-hero .hero-photo.hero-art img{display:block;}
@media (max-width:880px){ .page-hero .hero-photo.hero-cover,.page-hero .hero-photo.hero-art{justify-self:start;} .page-hero .hero-photo.hero-cover{width:min(220px, 100%);} .page-hero .hero-photo.hero-art{width:min(300px, 100%);} }
.cover-figure{margin:0; width:100%; max-width:460px;}
.cover-figure img{display:block; width:100%; height:auto; aspect-ratio:1/1; border:1px solid var(--rule-dark);}
.tl-item figure.art-book{max-width:200px;}
@media (max-width:880px){ .tl-item figure.art-book{max-width:160px;} }
/* Six cells in three columns: three and three at every desktop width. */
.grid.cols3.six{--cell-min:340px;}
/* A quote beside a heading, in the measure column. */
.measure .pullquote.pq-left{margin:0;}
/* The newsroom's empty state, before the first release about Eric. */
.nr-empty{font-size:15.5px; line-height:1.7; color:var(--ink-body); max-width:62ch; margin:8px 0 0;}

/* ---------- Quote of the Day (ec.js): a small card, bottom right ---------- */
.qotd{position:fixed; right:clamp(12px, 2vw, 28px); bottom:clamp(12px, 2vw, 28px); z-index:90; width:min(380px, calc(100vw - 24px));
  background:var(--ink); color:var(--white); border:1px solid rgba(255,255,255,0.78); box-shadow:0 0 0 4px rgba(255,255,255,0.06), 0 18px 50px rgba(0,0,0,0.45);
  padding:22px 24px 16px; opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.qotd.in{opacity:1; transform:none;}
.qotd-label{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--platinum); margin:0 32px 12px 0; line-height:1.6;}
.qotd-q{margin:0; padding:0; border:0;}
.qotd-q p{margin:0; font-family:var(--display); font-weight:300; font-size:18px; line-height:1.5; letter-spacing:-0.005em; color:var(--white); max-width:none;}
.qotd-q a{color:inherit; text-decoration:none;}
.qotd-q a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;}
.qotd-src{margin:12px 0 0; font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--steel);}
.qotd-act{display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--rule-dark);}
.qotd-act a,.qotd-act button{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--platinum); background:none; border:0; padding:6px 0; cursor:pointer; text-decoration:none;}
.qotd-act a:hover,.qotd-act button:hover{color:var(--white);}
.qotd-x{position:absolute; top:10px; right:10px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:none; border:1px solid transparent; color:var(--steel); font-size:22px; line-height:1; cursor:pointer;}
.qotd-x:hover{color:var(--white); border-color:var(--rule-dark);}
.qotd a:focus-visible,.qotd button:focus-visible{outline:2px solid var(--platinum); outline-offset:2px;}
@media (max-width:620px){
  .qotd{left:12px; right:12px; bottom:12px; width:auto; padding:18px 18px 12px;}
  .qotd-q p{font-size:16px;}
}
@media (prefers-reduced-motion:reduce){ .qotd{transition:none; transform:none;} }
@media print{ .qotd{display:none !important;} }
/* Transcript links beside listed episodes (tools/transcripts.py adds them). */
.elsewhere li.has-tx{display:flex; align-items:center; gap:16px;}
.elsewhere li.has-tx[hidden]{display:none;}
.elsewhere li.has-tx > a:first-child{flex:1 1 auto; min-width:0;}
.elsewhere .ep-tx{flex:0 0 auto; padding:8px 12px; border:1px solid var(--rule-dark); font-family:var(--display); font-size:9.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--platinum); text-decoration:none; transition:border-color .2s, color .2s;}
.elsewhere .ep-tx:hover,.elsewhere .ep-tx:focus-visible{color:var(--white); border-color:var(--platinum);}
/* Eric's panel reads like a line item on a plan: a milestone tick before the label. */
.qotd{border-color:rgba(255,255,255,0.5);}
.qotd::before{content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px; background:var(--platinum); transform-origin:top; transform:scaleY(0); transition:transform .9s var(--ease) .25s;}
.qotd.in::before{transform:scaleY(1);}
.qotd-tick{display:inline-block; width:7px; height:7px; border:1px solid var(--platinum); transform:rotate(45deg); margin:0 10px 1px 1px; vertical-align:middle;}
@media (prefers-reduced-motion:reduce){ .qotd::before{transition:none; transform:none;} }

/* ==========================================================================
   ericchowreal.com: the operator's motion. Isaac's site moves like a
   fingerprint (identity, organic); Eric's moves like a plan being carried out:
   milestones that fill, bars that draw to their finish, a drafting crosshair,
   and two tempos that reach the same place. Transform and opacity only;
   hidden states are scoped to html.js; all of it is off under reduced motion
   and in print.
   ========================================================================== */

/* ---------- Milestone eyebrows: a dependency line, then a milestone that fills
   when its section comes into view. The line draws first, the diamond lands. */
.eyebrow{gap:12px;}
.eyebrow::before{width:26px; flex:0 0 26px; order:-2; transform-origin:left center;}
.eyebrow::after{content:""; order:-1; flex:0 0 7px; width:7px; height:7px; box-sizing:border-box; border:1px solid currentColor; background:currentColor; transform:rotate(45deg); margin-right:4px;}
.eyebrow.no-rule::after{display:none;}
.js .rv .eyebrow::before,.js .eyebrow.rv::before{transform:scaleX(0); transition:transform .7s var(--ease) .1s;}
.js .rv .eyebrow::after,.js .eyebrow.rv::after{background:transparent; transform:rotate(45deg) scale(0.4); opacity:0; transition:transform .5s var(--ease) .55s, opacity .5s var(--ease) .55s, background-color .4s var(--ease) .9s;}
.js .rv.in .eyebrow::before,.js .eyebrow.rv.in::before{transform:none;}
.js .rv.in .eyebrow::after,.js .eyebrow.rv.in::after{background:currentColor; transform:rotate(45deg); opacity:1;}

/* ---------- The ticker: milestones between the words, not dots. */
.mt-track span::after{content:""; display:inline-block; width:7px; height:7px; border:1px solid var(--rule-dark); transform:rotate(45deg) translateY(-6px); vertical-align:middle;}

/* ---------- Two speeds, one destination (home, the firm). Isaac's line shoots
   straight to the finish; Eric's reaches the same finish in measured steps,
   each checkpoint landing before the next leg starts. */
.tempo{margin-top:clamp(56px, 7vw, 88px); border-top:1px solid var(--rule-light); padding-top:clamp(28px, 4vw, 44px);}
.tempo-title{font-family:var(--display); font-size:clamp(24px, 2.6vw, 34px); font-weight:700; letter-spacing:-0.02em; margin:0 0 6px;}
.tempo-title em{font-style:normal; font-weight:300;}
.tempo-sub{color:var(--ink-body); font-size:15px; margin:0 0 clamp(26px, 3.4vw, 40px); max-width:62ch;}
.tempo-row{display:flex; flex-wrap:wrap; align-items:center; gap:18px 36px; padding:22px 0; border-top:1px solid var(--rule-light);}
.tempo-who{flex:0 0 280px; max-width:100%;}
.tempo-role{display:block; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label); margin-bottom:6px;}
.tempo-who b{display:block; font-family:var(--display); font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-0.01em;}
.tempo-trait{display:block; font-size:14px; line-height:1.6; color:var(--ink-body); margin-top:4px;}
.tempo-track{position:relative; flex:1 1 320px; height:44px; display:flex; align-items:center;}
.tempo-track::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--rule-light);}
.tempo-track::after{content:""; position:absolute; right:0; top:4px; bottom:4px; width:0; border-right:1px dashed var(--ink-label);}
.tempo-shot{position:absolute; left:0; right:10px; top:calc(50% - 1px); height:3px; background:var(--ink); transform-origin:left center;}
.tempo-shot::after{content:""; position:absolute; right:-6px; top:-4px; border-left:8px solid var(--ink); border-top:5.5px solid transparent; border-bottom:5.5px solid transparent;}
.tempo-legs{position:absolute; inset:0 10px 0 0; display:flex;}
.tempo-leg{position:relative; flex:1 1 0; height:100%;}
.tempo-leg::before{content:""; position:absolute; left:0; right:9px; top:calc(50% - 1px); height:3px; background:var(--ink); transform-origin:left center;}
.tempo-leg::after{content:""; position:absolute; right:0; top:calc(50% - 4.5px); width:9px; height:9px; box-sizing:border-box; border:1.5px solid var(--ink); background:var(--ink); transform:rotate(45deg);}
.tempo-leg:last-child::after{display:none;}
.tempo-leg:last-child::before{right:-4px;}
.tempo-end{max-width:none; display:flex; justify-content:flex-end; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label); padding-top:12px; border-top:1px solid var(--rule-light);}
.js .tempo .tempo-shot{transform:scaleX(0); transition:transform .55s cubic-bezier(.6,0,.2,1) .35s;}
.js .tempo .tempo-leg::before{transform:scaleX(0); transition:transform .5s var(--ease) calc(.35s + var(--i) * .62s);}
.js .tempo .tempo-leg::after{background:transparent; transform:rotate(45deg) scale(0.3); opacity:0; transition:transform .35s var(--ease) calc(.8s + var(--i) * .62s), opacity .35s var(--ease) calc(.8s + var(--i) * .62s), background-color .3s var(--ease) calc(.95s + var(--i) * .62s);}
.js .tempo.in .tempo-shot,.js .tempo.in .tempo-leg::before{transform:none;}
.js .tempo.in .tempo-leg::after{background:var(--ink); transform:rotate(45deg); opacity:1;}
@media (max-width:620px){ .tempo-who{flex-basis:100%;} .tempo-track{flex-basis:100%;} }

/* ---------- The drafting crosshair: on a page hero, with a fine pointer, two
   hairlines follow the pointer and a readout gives its position, like a plan
   being measured. Decoration only (aria-hidden), and never on touch. */
.xhair{position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0; transition:opacity .4s var(--ease); overflow:hidden;}
.xhair.on{opacity:1;}
.xhair-v,.xhair-h{position:absolute; left:0; top:0; background:rgba(200,197,190,0.16);}
.xhair-v{width:1px; height:100%;}
.xhair-h{height:1px; width:100%;}
.xhair-read{position:absolute; left:0; top:0; font-family:var(--display); font-size:9.5px; font-weight:600; letter-spacing:0.18em; color:rgba(200,197,190,0.62); font-variant-numeric:tabular-nums; white-space:nowrap;}
@media (prefers-reduced-motion:reduce){
  .js .rv .eyebrow::before,.js .eyebrow.rv::before,.js .rv .eyebrow::after,.js .eyebrow.rv::after{transition:none; transform:none; opacity:1;}
  .js .rv .eyebrow::after,.js .eyebrow.rv::after{transform:rotate(45deg); background:currentColor;}
  .js .tempo .tempo-shot,.js .tempo .tempo-leg::before{transform:none; transition:none;}
  .js .tempo .tempo-leg::after{transition:none; transform:rotate(45deg); opacity:1; background:var(--ink);}
  .xhair{display:none;}
}
@media print{
  .xhair{display:none !important;}
  .eyebrow::before,.eyebrow::after,.tempo-shot,.tempo-leg::before,.tempo-leg::after{transform:none !important; opacity:1 !important;}
}
/* The tempo on Ink (the firm page). */
.s-ink .tempo{border-top-color:var(--rule-dark);}
.s-ink .tempo-sub,.s-ink .tempo-trait{color:var(--steel);}
.s-ink .tempo-who b,.s-ink .tempo-title{color:var(--white);}
.s-ink .tempo-role,.s-ink .tempo-end{color:var(--platinum);}
.s-ink .tempo-row,.s-ink .tempo-end{border-top-color:var(--rule-dark);}
.s-ink .tempo-track::before{background:var(--rule-dark);}
.s-ink .tempo-track::after{border-right-color:var(--platinum);}
.s-ink .tempo-shot,.s-ink .tempo-leg::before{background:var(--white);}
.s-ink .tempo-shot::after{border-left-color:var(--white);}
.s-ink .tempo-leg::after{border-color:var(--white); background:var(--white);}
.js .s-ink .tempo.in .tempo-leg::after{background:var(--white);}
.js .s-ink .tempo .tempo-leg::after{background:transparent;}
.js .s-ink .tempo.in .tempo-leg::after{background:var(--white);}

/* ---------- How Eric decides (home): three gates on a dependency line. The
   line draws to each gate in turn and the gate's milestone lands before the
   next leg starts; the decision is the last milestone, solid. A lit band:
   the lattice and one soft glow, as the house treatment for a feature. */
.decide{position:relative; overflow:hidden;}
.decide::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:56px 56px; -webkit-mask-image:linear-gradient(to bottom, #000, transparent 85%); mask-image:linear-gradient(to bottom, #000, transparent 85%);}
.decide::after{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--platinum), transparent); opacity:0.5;}
.decide .wrap{position:relative; z-index:1;}
.gates{list-style:none; margin:clamp(20px, 3vw, 36px) 0 clamp(36px, 5vw, 56px); padding:0; display:flex; flex-wrap:wrap;}
.gate{position:relative; flex:1 1 280px; padding:46px clamp(20px, 3vw, 40px) 8px 0; min-width:0;}
.gate::before{content:""; position:absolute; left:14px; right:0; top:10px; height:1px; background:var(--platinum); transform-origin:left center;}
.gate::after{content:""; position:absolute; left:0; top:4px; width:13px; height:13px; box-sizing:border-box; border:1.5px solid var(--platinum); background:var(--ink); transform:rotate(45deg);}
.gate:last-child::before{right:24px;}
.gates::after{content:""; position:absolute;}
.gate:last-child{padding-right:44px;}
.gate:last-child > .gate-n::after{content:""; position:absolute; right:4px; top:3px; width:15px; height:15px; background:var(--white); transform:rotate(45deg);}
.gate-n{display:block; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--platinum); margin-bottom:12px;}
.gate h3{font-family:var(--display); font-size:clamp(22px, 2.2vw, 30px); font-weight:700; letter-spacing:-0.02em; color:var(--white); margin:0 0 14px;}
.gate-q{font-family:var(--display); font-weight:300; font-size:clamp(17px, 1.5vw, 20px); line-height:1.5; color:var(--white); margin:0 0 12px; max-width:34ch;}
.gate-d{font-size:14.5px; line-height:1.7; color:var(--steel); margin:0 0 12px; max-width:36ch;}
.gate-at{margin:0; font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;}
.gate-at a{color:var(--platinum); text-decoration:none; border-bottom:1px solid var(--rule-dark); padding-bottom:4px;}
.gate-at a:hover,.gate-at a:focus-visible{color:var(--white); border-color:var(--platinum);}
.js .gates.rv{opacity:1; transform:none;}
.js .gates .gate::before{transform:scaleX(0); transition:transform .8s var(--ease) calc(.25s + var(--i) * .9s);}
.js .gates .gate::after{opacity:0; transform:rotate(45deg) scale(0.3); transition:transform .45s var(--ease) calc(.05s + var(--i) * .9s), opacity .45s var(--ease) calc(.05s + var(--i) * .9s);}
.js .gates .gate > *{opacity:0; transform:translateY(12px); transition:opacity .7s var(--ease) calc(.2s + var(--i) * .9s), transform .7s var(--ease) calc(.2s + var(--i) * .9s);}
.js .gates .gate:last-child > .gate-n::after{opacity:0; transform:rotate(45deg) scale(0.2); transition:transform .5s var(--ease) 2.9s, opacity .5s var(--ease) 2.9s;}
.js .gates.in .gate::before{transform:none;}
.js .gates.in .gate::after{opacity:1; transform:rotate(45deg);}
.js .gates.in .gate > *{opacity:1; transform:none;}
.js .gates.in .gate:last-child > .gate-n::after{opacity:1; transform:rotate(45deg);}
@media (max-width:860px){
  .gate{flex-basis:100%; padding:0 0 34px 34px;}
  .gate::before{left:6px; right:auto; top:18px; bottom:0; width:1px; height:auto; transform-origin:top center;}
  .js .gates .gate::before{transform:scaleY(0);}
  .gate::after{top:2px;}
  .gate:last-child{padding-right:0;}
  .gate:last-child::before{display:none;}
  .gate:last-child > .gate-n::after{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .js .gates .gate::before,.js .gates .gate > *{transform:none; opacity:1; transition:none;}
  .js .gates .gate::after,.js .gates .gate:last-child > .gate-n::after{opacity:1; transform:rotate(45deg); transition:none;}
}
@media print{ .gates .gate::before,.gates .gate::after,.gates .gate > *{opacity:1 !important; transform:none !important;} .decide::before{display:none;} }
/* Transcript and Quotes buttons in the podcast archive, which sits on white. */
.s-white .elsewhere .ep-tx{color:var(--ink-label); border-color:var(--rule-light);}
.s-white .elsewhere .ep-tx:hover,.s-white .elsewhere .ep-tx:focus-visible{color:var(--ink); border-color:var(--ink);}
.elsewhere li.has-tx > .ep-tx + .ep-tx{margin-left:-8px;}
/* Tall images in a post (phone screenshots) stay within a screen's height. */
.article-figure img{max-height:min(78vh, 720px); width:auto; max-width:100%; height:auto; display:block; margin:0 auto;}

/* ---------- Media kit (from isaacmashman.com) ---------- */
.mk-bio{border-top:1px solid var(--ink); padding:24px 0 30px;}
.mk-bio + .mk-bio{border-top-color:var(--rule-light);}
.mk-bio-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px;}
.mk-bio-head h3{margin:0; font-size:17px;}
.mk-bio-head span{font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-label);}
.mk-bio p{font-size:15.5px; line-height:1.8; color:var(--ink-body); max-width:72ch;}
.mk-band{padding-top:clamp(34px,4vw,52px); padding-bottom:clamp(34px,4vw,52px);}
.mk-band .stats{margin:0;}
.mk-jump{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; padding-top:22px; border-top:1px solid var(--rule-light);}
.mk-jump span{flex:1 1 100%; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label); margin-bottom:4px;}
.mk-jump a{font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding:9px 12px; border:1px solid var(--rule-light); transition:border-color .3s var(--ease), background .3s var(--ease);}
.mk-jump a:hover,.mk-jump a:focus-visible{border-color:var(--ink);}
@media print{ .mk-sticky{position:static;} .mk-jump{display:none;} }
@media (min-width:901px){ .mk-sticky{position:sticky; top:110px; align-self:start;} }
.mk-quote{margin:0; padding:20px 0; border-top:1px solid var(--rule-light);}
.mk-quote p{font-family:var(--display); font-weight:300; font-size:19px; line-height:1.5; color:var(--ink); margin:0 0 8px; max-width:56ch;}
.mk-quote cite{font-style:normal; font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-label);}
.mk-quote cite a{color:inherit;}
/* Press downloads (media kit), from isaacmashman.com. */
.downloads{display:flex; flex-wrap:wrap; gap:1px; background:var(--rule-light); border:1px solid var(--rule-light);}
.downloads > figure{flex:1 1 230px; margin:0; background:var(--white); display:flex; flex-direction:column;}
/* Every photograph is shown whole, in the same 4:5 mat, so portraits and landscapes
   sit together as one contact sheet and nothing is cropped out of context. */
.downloads .dl-frame{aspect-ratio:4/5; background:var(--white); padding:clamp(12px, 1.6vw, 20px); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--rule-light);}
.downloads .dl-frame img{display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 0 0 1px var(--rule-light);}
.downloads .dl-cat{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label);}
.downloads figcaption{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto;}
.downloads .dl-name{font-family:var(--display); font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-0.01em;}
.downloads .dl-meta{font-size:12.5px; color:var(--ink-label); line-height:1.5;}
.downloads a.dl{margin-top:auto; padding-top:10px; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink); text-decoration:none;}
.downloads a.dl:hover{text-decoration:underline; text-underline-offset:3px;}
.downloads{grid-template-columns:repeat(4, minmax(0, 1fr));}
.downloads{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; background:transparent; border:0; border-top:1px solid var(--rule-light); border-left:1px solid var(--rule-light);}
.downloads > figure{border-right:1px solid var(--rule-light); border-bottom:1px solid var(--rule-light);}
@media (max-width:1100px){ .downloads{grid-template-columns:repeat(3, minmax(0, 1fr));} }
@media (max-width:760px){ .downloads{grid-template-columns:repeat(2, minmax(0, 1fr));} }
.downloads .dl-frame{overflow:hidden; min-height:0;}
.downloads .dl-frame img{max-height:100%;}
.downloads > figure.is-feature{grid-column:span 2; grid-row:span 2;}
.downloads > figure.is-feature .dl-frame{flex:1 1 auto; aspect-ratio:auto; min-height:420px;}
@media (max-width:760px){ .downloads > figure.is-feature .dl-frame{min-height:300px;} }
/* The archive's second filter row: solo or interviews. */
.ep-kinds{margin-top:6px;}