/* mrjttaylor.com refresh layer. Sep 19 2026, rewritten Sep 20.

   JT, Sep 20: "I want to lean much more into the NOC rebrand style (keeping mrjt site its colors
   and theme) but incorporating more of the new style from the new NOC site. It will make my mrjt
   site look more high end."

   So this is no longer three borrowed elements. The CHROME of this site is now built to the new
   NOC site's measured spec, in this brand's own palette. Every number below was read out of the
   live https://notebookofacoo.com/assets/css/core.css on Sep 20, not estimated from a screenshot,
   because the first pass at the menu WAS estimated from a screenshot and JT rejected it twice.

   THE TYPE DECISION, JT Sep 20 (asked, not assumed, because the display face is a brand rule):
   "Chrome and menu, keep Oswald for headlines." So the nav pills, the menu, the labels and the
   buttons move to NOC's sentence case treatment set in Open Sans, and Oswald still owns every page
   headline in main.css, which this file does not touch. That is what makes the site read as this
   brand rather than as a recolour of NOC.

   WHY SENTENCE CASE IS THE WHOLE POINT. The old chrome was condensed uppercase with wide positive
   letter-spacing. NOC is large, tight and sentence case with NEGATIVE tracking. Those are opposite
   instincts, and the second is what reads as expensive. The "MORE" column was the clearest case:
   at 19px weight 700 it read as bold small print, where NOC's 22px weight 600 at -0.02em reads as
   navigation someone chose.

   Loaded AFTER main.css. Override rules carry an `html ` prefix on purpose: many pages define
   .card / .ep-card / .panel inside a <style> block in the BODY, which would otherwise win on
   source order. New components use the rf- prefix so they cannot collide with anything.

   Tokens from main.css's light block: --cream #FAF6EF, --navy #1E3A56, --accent #2C67A0,
   --text #54606A, --rule #E6DFCF, --display Oswald, --sans Open Sans.
   NOC's geometry, for reference: pill 44px, menu link 22px/600/-0.02em, label 13px/600/+0.14em,
   button 56px/700 16px, menu button 48px/600 15px, card radius 26px, section clamp(96,11vw,168). */

/* ============================================================
   1. THE FLOATING PILL NAV
   ============================================================ */

/* the old fixed bar is retired. It stays in the markup for one release as a no-JS fallback,
   hidden here, so a cached page that has not picked up the new markup still navigates. */
html .nav{display:none}

.rf-nav{
  position:fixed; z-index:60; top:24px; left:0; right:0;
  padding:0 clamp(20px,4vw,56px);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  pointer-events:none;
  transition:transform .4s var(--ease,cubic-bezier(.16,1,.3,1)), opacity .3s ease;
}
.rf-nav.is-hidden{transform:translateY(-140%); opacity:0}
.rf-nav:focus-within{transform:none; opacity:1}
.rf-nav > *{pointer-events:auto}

.rf-pill,.rf-brand{
  display:inline-flex; align-items:center; height:44px;
  border-radius:999px;
  border:1px solid rgba(30,58,86,.14);
  background:rgba(250,246,239,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 6px 24px rgba(30,58,86,.07);
}
/* Sentence case, Open Sans, 600 at 15px, NO letter-spacing. This single rule is most of the
   difference between the old chrome and NOC's. */
.rf-pill{
  gap:10px; padding:0 18px; cursor:pointer;
  font:600 15px/1 var(--sans,"Open Sans",sans-serif);
  text-transform:none; letter-spacing:0;
  color:var(--navy,#1E3A56); text-decoration:none; white-space:nowrap;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.rf-pill:hover{background:rgba(255,255,255,.95); color:var(--accent,#2C67A0)}
.rf-menu-btn{justify-self:start}
.rf-nav-end{justify-self:end; display:flex; gap:10px}

/* the signature is the brand mark and sits in the middle */
.rf-brand{justify-self:center; padding:0 20px; line-height:0}
.rf-brand img{height:25px; width:auto; display:block}

/* the one call to action. NOC's is a gold gradient; this brand's single accent is the blue. */
.rf-cta{background:var(--accent,#2C67A0); border-color:transparent; color:#fff}
.rf-cta:hover{background:transparent; color:var(--accent,#2C67A0); border-color:var(--accent,#2C67A0)}

/* the burger's three lines, drawn in CSS so the button needs no image */
.rf-bars{display:block; width:17px; height:1.5px; background:currentColor; position:relative; flex:none}
.rf-bars::before,.rf-bars::after{
  content:""; position:absolute; left:0; width:17px; height:1.5px; background:currentColor;
  transition:transform .3s var(--ease,cubic-bezier(.16,1,.3,1)), top .3s var(--ease,cubic-bezier(.16,1,.3,1));
}
.rf-bars::before{top:-5.5px} .rf-bars::after{top:5.5px}

/* ============================================================
   2. THE FULL SCREEN MENU
   ============================================================ */

.rf-menu{
  position:fixed; inset:0; z-index:80;
  display:flex; flex-direction:column;
  background:rgba(250,246,239,.96);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  padding:24px clamp(20px,4vw,56px) 40px;
  overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
/* :target is the no-JavaScript path, .is-open is the scripted one */
.rf-menu.is-open,.rf-menu:target{opacity:1; visibility:visible; transition:opacity .3s ease}

.rf-menu-top{display:flex; justify-content:space-between; align-items:center}
.rf-menu-close{width:44px; height:44px; padding:0; justify-content:center; gap:0}
.rf-menu-close .rf-bars{background:transparent}
.rf-menu-close .rf-bars::before{top:0; transform:rotate(45deg)}
.rf-menu-close .rf-bars::after{top:0; transform:rotate(-45deg)}

.rf-menu-body{
  flex:1; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:40px; align-items:end;
  max-width:var(--max,88rem); width:100%; margin:48px auto 0;
}
/* The big links: large, tight, SENTENCE CASE, in the sans. JT's call Sep 20. Oswald is not used
   here any more, because a condensed uppercase face cannot carry -0.045em tracking and the tight
   sentence case IS the NOC quality he asked for. Oswald still owns every page headline. */
.rf-menu-main a{
  display:block; width:fit-content; padding:6px 0;
  font-family:var(--sans,"Open Sans",sans-serif);
  text-transform:none;
  font-weight:700; font-size:clamp(38px,5.4vw,76px); line-height:1.02;
  letter-spacing:-.045em;
  color:var(--navy,#1E3A56); text-decoration:none;
  transition:color .2s ease;
}
.rf-menu-main a:hover,.rf-menu-main a[aria-current="page"]{color:var(--accent,#2C67A0)}

.rf-menu-side{display:flex; flex-direction:column; gap:26px}
.rf-menu-label{
  font:600 13px/1 var(--sans,"Open Sans",sans-serif);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent,#2C67A0); margin-bottom:12px;
}
/* the text links only. A bare `.rf-menu-side a` also catches the buttons below it and blows their
   labels up, which is exactly the bug that shipped on NOC live on Sep 18.
   JT rejected this column twice. It is now NOC's number, not an estimate: 22px, weight 600,
   tracking -0.02em. It was 19px at weight 700, which is why it read as small print. */
.rf-menu-side > div:not(.rf-menu-actions) a{
  display:block; width:fit-content; padding:6px 0;
  font-size:22px; font-weight:600; letter-spacing:-.02em;
  color:var(--navy,#1E3A56); text-decoration:none;
  transition:color .2s ease;
}
.rf-menu-side > div:not(.rf-menu-actions) a:hover{color:var(--accent,#2C67A0)}
.rf-menu-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}

body.rf-menu-open{overflow:hidden}

/* ============================================================
   3. BUTTONS
   ============================================================ */

/* the page level button, NOC's .btn geometry: 56px tall, 30px sides, 700 at 16px, sentence case */
html .hero-cta,
html .card--cta .btn,
html a.rf-btn,
html button.rf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:56px; padding:0 30px;
  border:1px solid transparent; border-radius:999px;
  background:var(--accent,#2C67A0); color:#fff;
  font:700 16px/1 var(--sans,"Open Sans",sans-serif);
  text-transform:none; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 10px 30px rgba(30,58,86,.16);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
/* hollows out on hover, the light-mode answer to NOC's glass hover */
html .hero-cta:hover,
html .card--cta .btn:hover,
html a.rf-btn:hover,
html button.rf-btn:hover{
  background:transparent; color:var(--accent,#2C67A0);
  border-color:var(--accent,#2C67A0); box-shadow:none;
}
html a.rf-btn-ghost{
  background:transparent; color:var(--navy,#1E3A56);
  border-color:rgba(30,58,86,.32); box-shadow:none;
}
html a.rf-btn-ghost:hover{background:var(--navy,#1E3A56); border-color:var(--navy,#1E3A56); color:var(--cream,#FAF6EF)}

/* Sep 20: the rules above only named a.rf-btn, so the Be a guest form's real <button> got none of
   it and rendered 135 x 21, plain text where the page's main action should be. A button also needs
   the pointer and a visible "sending" state, which a link never had to have. */
html button.rf-btn{cursor:pointer; -webkit-appearance:none; appearance:none}
html button.rf-btn[disabled]{opacity:.6; cursor:wait}

/* the two menu buttons are smaller than a page button, exactly as on NOC */
html .rf-menu-actions a.rf-btn{height:48px; padding:0 22px; font:600 15px/1 var(--sans,"Open Sans",sans-serif); box-shadow:none}

/* ============================================================
   4. SOFTER CARDS, MORE AIR
   ============================================================ */

html .card,
html .panel,
html .ep-card,
html .hw-card{
  border-radius:26px;
  border-color:var(--rule,#E6DFCF);
  transition:transform .35s var(--ease,cubic-bezier(.16,1,.3,1)), box-shadow .35s ease, border-color .3s ease;
}
html .ep-card,
html .hw-card{overflow:hidden}
html .ep-card:hover,
html .hw-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(30,58,86,.10);
  border-color:rgba(44,103,160,.34);
}
/* the thumbnail corners follow the card so nothing pokes out of the new radius */
html .ep-card img,
html .hw-card img{border-radius:0}

/* NOC's section rhythm, its single most copyable quality and the cheapest way to read as premium.
   Theirs is clamp(96px,11vw,168px); this was clamp(72px,8vw,120px), which is why the old pages
   felt tighter and busier than the new NOC ones. */
html section.section,
html .section{padding-block:clamp(96px,11vw,168px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:900px){
  .rf-menu-body{grid-template-columns:minmax(0,1fr); align-items:start}
}
@media (max-width:760px){
  .rf-nav{top:16px; padding:0 16px; grid-template-columns:1fr auto}
  .rf-nav-end{display:none}
  .rf-pill,.rf-brand{height:40px}
  .rf-pill{gap:8px; padding:0 14px; font-size:14px}
  .rf-brand{justify-self:end; padding:0 16px}
  .rf-brand img{height:22px}
  .rf-menu{padding:16px 16px 32px}
  .rf-menu-body{gap:36px; margin-top:40px}
  .rf-menu-side > div:not(.rf-menu-actions) a{font-size:20px}
  html .hero-cta,html a.rf-btn{height:52px; padding:0 24px; font-size:15px}
  html section.section,html .section{padding-block:clamp(72px,12vw,104px)}
}

@media (prefers-reduced-motion:reduce){
  .rf-nav{transition:none}
  html .ep-card:hover,html .hw-card:hover{transform:none}
  .rf-bars::before,.rf-bars::after{transition:none}
}

/* the quiet Admin link in the footer base (JT Sep 20). Deliberately understated: it is a
   convenience for him, not a feature for visitors. */
html .foot-admin{opacity:.5;text-decoration:none;transition:opacity .25s,color .25s}
html .foot-admin:hover{opacity:1;color:var(--accent,#2C67A0)}


/* ============================================================
   ROUND 2, JT Sep 20 evening: "I want more of the style and movement from the NOC site."
   His picks, asked with a multi select BEFORE any of this was written: everyday motion only,
   plus all four style elements (announcement bar, navy contrast bands, a statement that
   brightens as you scroll, numbered step cards). He declined counters, a scroll linked marquee
   and NOC's signature scenes, which are NOC's identity. See the refresh layer memory.
   ============================================================ */

/* ============================================================
   5. MOTION START STATES
   ============================================================ */

/* These apply ONLY once motion.js has loaded and added html.motion. Without it, main.css's own
   .rv reveal (site.js adds .in through an IntersectionObserver) still works, so the page never
   depends on a CDN being up. When motion IS on, motion.js takes the .rv blocks over and staggers
   their children, so the old CSS transition is switched off here: two systems animating the same
   element is how a block jumps twice. */
html.motion .rv{opacity:1;transform:none;transition:none}
/* SplitText's line wrappers. The mask is what makes a line rise out of nothing rather than fade. */
html.motion .rf-line-mask{display:block;overflow:clip}
html.motion .rf-line{display:block}

/* ============================================================
   6. THE ANNOUNCEMENT BAR
   ============================================================ */

.rf-bar{
  position:relative; z-index:61;
  background:var(--navy,#1E3A56); color:var(--cream,#FAF6EF);
  font:600 14px/1.35 var(--sans,"Open Sans",sans-serif);
  text-align:center; padding:11px clamp(16px,4vw,56px);
}
.rf-bar a{
  color:inherit; text-decoration:none;
  display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.2em .55em;
}
.rf-bar b{color:#A9CBE8; font-weight:700}
.rf-bar .rf-bar-go{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.rf-bar a:hover .rf-bar-go{color:#A9CBE8}
.rf-bar a:focus-visible{outline:2px solid #A9CBE8; outline-offset:4px; border-radius:4px}
/* The nav is fixed and the bar is in the page flow, so at the top of the page the nav has to sit
   BELOW the bar. This sibling rule does that with no script. motion.js then walks the nav back up
   to its normal 24px as the bar scrolls out of view, so it never leaves a gap. */
.rf-bar + .rf-nav{top:calc(var(--rf-bar-h,42px) + 14px)}

/* ============================================================
   7. NAVY CONTRAST BANDS
   ============================================================ */

/* The home page ran about 3,900px between the marquee and Speaking with no navy in it at all,
   only cream and the cream tint. Books and Watch sit in the middle of that run. Scoped by id,
   which is unique to the home page (checked), so no markup changes and no other page moves. */
html #books.sec,html #watch.sec{background:var(--navy,#1E3A56); color:rgba(250,246,239,.82)}
html #books.sec h2,html #watch.sec h2{color:var(--cream,#FAF6EF)}
html #books.sec h2 em,html #watch.sec h2 em{color:#A9CBE8}
html #books.sec .eyebrow,html #watch.sec .eyebrow{color:#A9CBE8}
html #books.sec .lede,html #watch.sec .lede,
html #books.sec p,html #watch.sec p{color:rgba(250,246,239,.78)}
html #books.sec .arrowlink,html #watch.sec .arrowlink{color:var(--cream,#FAF6EF)}
html #books.sec .arrowlink:hover,html #watch.sec .arrowlink:hover{color:#A9CBE8}
html #books.sec .bk-t{color:var(--cream,#FAF6EF)}
html #books.sec .bk-no{color:rgba(250,246,239,.55)}
/* the watch card's own title sits on the photo and stays white; only its lift changes on navy */
html #watch.sec .hw-card{box-shadow:0 26px 60px rgba(0,0,0,.34)}

/* ============================================================
   8. THE STATEMENT, brightening word by word
   ============================================================ */

/* motion.js splits the home page statement's headline into words and scrubs each one from faint
   to full as the section moves through the screen. Without motion it is simply the headline. */
html.motion .statement h2 .rf-word{display:inline-block; will-change:opacity}

/* ============================================================
   9. NUMBERED STEP CARDS
   ============================================================ */

/* Any process, in order. Numbered because the ORDER is the content, which is the only honest
   reason to number anything. The numeral is drawn by a CSS counter, so the markup is a plain list. */
.rf-steps{
  list-style:none; margin:clamp(28px,4vw,48px) 0 0; padding:0;
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  counter-reset:rf-step;
}
/* a fixed count when the number of steps is known, so a row never leaves one card alone */
.rf-steps.rf-steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rf-steps.rf-steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rf-step{
  counter-increment:rf-step; position:relative;
  padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--rule,#E6DFCF); border-radius:26px; background:#fff;
}
.rf-step::before{
  content:counter(rf-step,decimal-leading-zero); display:block;
  font:600 clamp(2.4rem,4vw,3.3rem)/1 var(--display,"Oswald",sans-serif);
  letter-spacing:-.02em; color:var(--accent,#2C67A0); margin-bottom:20px;
}
.rf-step h3{font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.15; color:var(--navy,#1E3A56); margin:0 0 .55rem}
.rf-step p{font-size:.97rem; line-height:1.65; margin:0; color:var(--text,#54606A)}
/* on a navy band the cards invert */
.rf-navy .rf-step{background:rgba(255,255,255,.06); border-color:rgba(250,246,239,.14)}
.rf-navy .rf-step::before{color:#A9CBE8}
.rf-navy .rf-step h3{color:var(--cream,#FAF6EF)}
.rf-navy .rf-step p{color:rgba(250,246,239,.76)}

/* a general navy band for new pages, the same treatment as Books and Watch */
.rf-navy{background:var(--navy,#1E3A56); color:rgba(250,246,239,.82)}
.rf-navy h2,.rf-navy h3{color:var(--cream,#FAF6EF)}
.rf-navy h2 em{color:#A9CBE8}
.rf-navy .eyebrow{color:#A9CBE8}
.rf-navy .lede,.rf-navy p{color:rgba(250,246,239,.78)}

@media (max-width:900px){
  .rf-steps.rf-steps-3,.rf-steps.rf-steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .rf-steps.rf-steps-3,.rf-steps.rf-steps-4{grid-template-columns:minmax(0,1fr)}
  .rf-bar{font-size:13px; padding:10px 16px}
  .rf-bar .rf-bar-long{display:none}
}
@media (prefers-reduced-motion:reduce){
  html.motion .rv{opacity:1;transform:none}
}

/* ============================================================
   10. THE /watch/ HUB: FEATURED + GRID
   JT, Sep 20: "It is too much scrolling, especially now that we have more episodes." Measured
   13,593px on a phone, 16.7 screens, 677px a card. He picked "Featured + grid": the newest
   episode stays the big card, every other episode becomes a thumbnail tile, 3 across on a desktop
   and 2 on a phone. It is styling only, on purpose: the card markup is untouched, so the episode
   builders (which clone the first card and demote its Latest tag) keep working, and each new
   episode becomes the featured card automatically. Scoped by .eplist--grid, which only the hub
   carries: /podcast/ uses the same .eplist and keeps its own stack.
   ============================================================ */
/* a phone and a tablet: 2 across, on a 4 column grid so a last tile left alone by an odd count
   can sit centered at the same size as every other tile, instead of beside an empty slot. */
html .eplist--grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem}
html .eplist--grid > .ep-card:first-child{grid-column:1/-1}
html .eplist--grid > .ep-card + .ep-card{grid-column:span 2}
html .eplist--grid > .ep-card + .ep-card:nth-child(2n):last-child{grid-column:2 / span 2}

/* every tile: thumbnail on top, a small tag and a title cut at three lines. The play button comes
   off the tiles: it sat on the artwork's own title lettering, and the whole tile is the link. */
html .eplist--grid > .ep-card + .ep-card{grid-template-columns:minmax(0,1fr); border-radius:14px}
html .eplist--grid > .ep-card + .ep-card .body{padding:1rem 1.1rem 1.2rem; justify-content:flex-start}
html .eplist--grid > .ep-card + .ep-card .tag{font-size:12px; letter-spacing:.1em; margin-bottom:.5rem}
html .eplist--grid > .ep-card + .ep-card h2{
  font-size:clamp(1rem,1.25vw,1.12rem); line-height:1.12;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
html .eplist--grid > .ep-card + .ep-card .desc,
html .eplist--grid > .ep-card + .ep-card .go,
html .eplist--grid > .ep-card + .ep-card .play{display:none}
html .eplist--grid > .ep-card + .ep-card .dur{font-size:12px; right:.55rem; bottom:.55rem; padding:.2rem .45rem}

@media (min-width:761px){
  html .eplist--grid{gap:clamp(1rem,2vw,1.5rem)}
}
/* a desktop: 3 across on a 6 column grid, so a short last row can always be CENTERED with every
   tile the same size. Tiles are children 2 to N, three to a row, and a row starts on child 3n+2.
     one left over    it sits in the middle
     two left over    they sit centered together
   Sep 20: the first version stretched the leftovers to half width and the last tiles came out as
   690px posters beside 446px tiles. Same size everywhere reads as one grid. */
@media (min-width:1001px){
  html .eplist--grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  html .eplist--grid > .ep-card + .ep-card,
  html .eplist--grid > .ep-card + .ep-card:nth-child(2n):last-child{grid-column:span 2}
  html .eplist--grid > .ep-card + .ep-card:nth-child(3n+2):last-child{grid-column:3 / span 2}
  html .eplist--grid > .ep-card + .ep-card:nth-child(3n+2):nth-last-child(2){grid-column:2 / span 2}
  html .eplist--grid > .ep-card + .ep-card:nth-child(3n):last-child{grid-column:4 / span 2}
}

@media (max-width:760px){
  /* the featured card drops its paragraph on a phone: the title and the button carry it */
  html .eplist--grid > .ep-card:first-child .desc{display:none}
  html .eplist--grid > .ep-card + .ep-card .body{padding:.7rem .75rem .85rem}
  /* on a 161px phone tile the tag only repeated the guest's name, which opens every title */
  html .eplist--grid > .ep-card + .ep-card .tag{display:none}
  html .eplist--grid > .ep-card + .ep-card h2{font-size:.9rem}
}

/* 10b. Section headings on a phone. .sechead is a heading beside a paragraph; on a phone it wraps
   and main.css's 2rem gap became 46px of empty space between them (7 pages use it). */
@media (max-width:760px){
  html .sechead{row-gap:.35rem}
}

/* ============================================================
   11. ONE FOOTER ON EVERY PAGE, FOUR LINK COLUMNS
   Sep 20: 34 pages carried "Site | More | Ventures" and the 3 newer ones "Site | The show |
   Ventures", so the podcast, Be a guest and Work with me were missing from most footers. shell.py
   now writes one footer everywhere. main.css lays out a signature plus THREE columns; this adds
   the fourth, and keeps a phone at two columns instead of one long stack.
   ============================================================ */
html .foot-grid--4{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}
@media (max-width:1100px){
  html .foot-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  html .foot-grid--4 .sig{grid-column:1/-1}
}
@media (max-width:860px){
  html .foot-grid--4{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.4rem}
}

/* ============================================================
   12. PHONE LEGIBILITY AND TAP TARGETS
   From the Sep 20 audit of all 37 pages at a true 375px: nothing overflowed, but every page set its
   small uppercase labels at 10.5 to 11.5px (eyebrows, breadcrumbs, captions, footer headings, the
   podcast's listen links), and standalone list links (the contact and press details, the social
   list, "All episodes") were about 21px tall to a thumb. Links inside a sentence stay as they are.
   ============================================================ */
@media (max-width:760px){
  /* doubled class selectors on purpose: page styles like .ep-card .tag and .hero-l .eyebrow are
     more specific than a bare .tag, and the first version lost to them (featured tag stayed 11.2px) */
  html body .eyebrow, html body .crumb, html body .crumb a, html body .cap, html body .foot h4,
  html body .ep-card .tag, html body .ep-card .dur, html body .tag, html body .dur{font-size:12px}
  /* the rest the audit found, each held small by its own page rule: a floor, so !important */
  html .eyebrow, html .crumb, html .crumb a, html .cap, html dt, html .row-role, html .row-go,
  html .bk-no, html .buybtn, html .noteside h3, html .plats a, html .pod-steps b,
  html .ep-card .tag, html .ep-card .dur, html .foot h4{font-size:12px !important}
  html form label{font-size:13px !important}
  html main dd > a, html main li > a.prose, html main p > a.link{display:inline-block; padding:.6rem 0}
  html .pod-listen a{font-size:13px}
}

/* ============================================================
   13. FORMS AND THE FOOTER'S LEGAL LINKS (Sep 21, backend step 2)
   JT, Sep 21: "Forms only". The contact form, the newsletter forms and the guest form share one
   look. The pod-* rules were page level on the podcast pages only; they live here now so any page
   can carry a form. Every public form carries the same required agreement line (NOC's rule: every
   door binds to the Terms, on the form AND on the server).
   ============================================================ */
html .foot-legal{display:inline-flex;gap:1.3rem}
.pod-form{display:grid;gap:1.05rem;max-width:44rem;margin-top:1.8rem}
.pod-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.05rem}
.pod-field label{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.11em;
  font-size:.67rem;color:var(--navy);margin-bottom:.4rem}
.pod-field input,.pod-field textarea,.pod-field select{width:100%;padding:.85rem 1rem;border:1px solid var(--rule-2);
  border-radius:14px;background:#fff;color:var(--navy);font-family:var(--sans);font-size:.97rem;line-height:1.5}
.pod-field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E3A56' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1rem center}
.pod-field textarea{min-height:7rem;resize:vertical}
.pod-field input:focus,.pod-field textarea:focus,.pod-field select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.pod-hint{font-size:.83rem;color:var(--dim);margin-top:.35rem}
.pod-note{font-size:.88rem;color:var(--dim);max-width:44rem;margin-top:1rem}
.pod-status{display:none;margin-top:1rem;padding:1rem 1.2rem;border-radius:16px;font-size:.95rem}
.pod-status.ok{display:block;background:#EAF3EA;border:1px solid #BBD8BB;color:#2A5E33}
.pod-status.bad{display:block;background:#FBEDEC;border:1px solid #E5C2BF;color:#8C332B}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* the agreement line: a real checkbox, a 44px tall target, links inside it */
.agree{display:flex;align-items:flex-start;gap:.7rem;font-size:.9rem;line-height:1.5;color:var(--text,#54606A);
  max-width:44rem;cursor:pointer;min-height:44px;padding-top:.2rem}
.agree input{flex:0 0 auto;width:1.15rem;height:1.15rem;margin:.18rem 0 0;accent-color:var(--accent,#2C67A0);cursor:pointer}
.agree a{color:var(--accent,#2C67A0);text-decoration:underline;text-underline-offset:2px}
.subform + .agree, .subform .agree{margin-top:.9rem;flex-basis:100%}
.subform .pod-status{flex-basis:100%;margin-top:.4rem}
html form .agree{font-size:.9rem !important}
@media (max-width:760px){ html form label.agree{font-size:14px !important} }