/* Melville Island Heritage
   Layout: each story chapter is a full-bleed archival image with a translucent white card on the left;
   a translucent ink timeline legend runs down the right on desktop. Phones: image, then card, with a sticky chapter bar.
   Contrast for every text pair was calculated against the worst case behind it (WCAG 2.2 AA). */

:root{
  --mih-paper:#F7F3EA;
  --mih-ink:#141827;
  --mih-navy:#38446F;
  --mih-navy-muted:#D5D8E2;
  --mih-brass:#7A5A00;
  --mih-gold:#FBCE55;
  --mih-muted:#555B6B;
  --mih-rule:#7F838E;
  --mih-band:#141827;
  --mih-band-muted:#B8BCC8;
  --mih-band-rule:#7A819C;
  --mih-legend-rule:#9AA0B8;
  --mih-display:"Libre Baskerville", Georgia, "Times New Roman", serif;
  --mih-body:"Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mih-step--1:clamp(0.9rem,0.87rem + 0.15vw,0.975rem);
  --mih-step-1:clamp(1.3rem,1.2rem + 0.5vw,1.55rem);
  --mih-step-2:clamp(1.65rem,1.45rem + 1vw,2.2rem);
  --mih-step-3:clamp(2.2rem,1.7rem + 2.6vw,3.8rem);
  --mih-bar-h:56px;
  --mih-legend-w:260px;
  --mih-top:var(--wp-admin--admin-bar--height, 0px);
  --mih-head:48px;      /* height of the sticky header row */
  --mih-head-extra:0px; /* part of the desktop header that scrolls away */
  --mih-stick:calc(var(--mih-top) + var(--mih-head));
}

html{scroll-padding-top:calc(var(--mih-stick) + var(--mih-bar-h) + 16px)}
@media (min-width:960px){html{scroll-padding-top:calc(var(--mih-stick) + 16px)}}
/* Below 600px the WordPress admin bar scrolls away, so sticky bars sit at the top */
@media (max-width:600px){:root{--mih-top:0px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Remove the parent theme's gaps between the full-bleed sections */
:where(.wp-site-blocks) > *{margin-block:0}
.mih-main > *{margin-block:0}
.mih-main{margin-block:0}

.mih-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.mih-icon{flex:none}
:where(.mih-main, .mih-site-header, .mih-site-footer) :focus-visible{outline:3px solid var(--mih-navy);outline-offset:3px}
.mih-hero :focus-visible,.mih-legend :focus-visible,
.mih-chapbar :focus-visible,.mih-backbar :focus-visible{outline-color:var(--mih-gold)}
.mih-pager :focus-visible{outline-color:var(--mih-navy)}

.mih-eyebrow{font-size:var(--mih-step--1);letter-spacing:0.08em;text-transform:uppercase;font-weight:700;color:var(--mih-brass);margin:0}

/* Body text is a fixed 18px at every width. WordPress's fluid type would otherwise shrink it to about 14px on phones. */
html body{font-size:1.125rem}

/* Shared gutter and width */
.mih-site-header .in,.mih-site-footer .in,.mih-hero .in,.mih-backbar .in,.mih-chapbar{
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.mih-site-header .in,.mih-site-footer .in,.mih-hero .in,.mih-backbar .in{max-width:1440px;margin-inline:auto;box-sizing:border-box}

/* Header. Phones and tablets: a compact sticky bar. Desktop: the full header scrolls with the page;
   once it has scrolled past, a compact copy (name and menu, about half the height) is fixed at the top. */
.wp-site-blocks > header.wp-block-template-part{position:sticky;top:var(--mih-top);z-index:60}
.mih-site-header{background:var(--mih-navy);color:var(--mih-paper)}
.mih-site-header .in{position:relative}
.mih-site-header .mih-tag{display:none;font-size:0.8rem;line-height:18px;letter-spacing:0.06em;text-transform:uppercase;color:var(--mih-navy-muted);margin:0}
@media (min-width:960px){
  .wp-site-blocks > header.wp-block-template-part{position:relative;top:auto}
  .mih-site-header .in{padding-block:20px}
  /* Full desktop header: menu text about 24px. The compact bar on scroll keeps 18px. */
  .mih-site-header .mih-menu .lvl1 > li > a,.mih-site-header .mih-menu .lvl1 > li > .mih-sub-toggle{font-size:1.51875rem}
  .mih-compact .mih-site-header .mih-menu .lvl1 > li > a,.mih-compact .mih-site-header .mih-menu .lvl1 > li > .mih-sub-toggle{font-size:1.125rem}
  .mih-site-header .mih-tag{display:block}
  .mih-brandwrap{display:grid}
  .mih-site-header .mih-brand{font-size:var(--mih-step-1)}
  .mih-site-header .mih-logo{width:clamp(330px, 36.3vw, 495px)}
  /* Tagline: 70% of the size that would match the logo's width (logo width / 16.88 x 0.7) */
  .mih-site-header .mih-tag{font-size:clamp(13.69px, 1.505vw, 20.53px);line-height:1.2;margin-right:-0.06em;white-space:nowrap}
  /* Tuck the tagline up into the logo's descender space (only the "g" hangs below, at the far right): pull up 3.9% of the logo width */
  .mih-site-header .mih-tag{margin-top:calc(clamp(330px, 36.3vw, 495px) * -0.039 + 0.5rem)}
  .mih-compact .mih-site-header .mih-tag{margin-top:0}
  .mih-compact .mih-site-header{position:fixed;top:var(--mih-top);left:0;right:0;z-index:60;box-shadow:0 6px 16px -10px rgba(0,0,0,0.5)}
  .mih-compact .mih-site-header .in{padding-block:0}
  .mih-compact .mih-site-header .mih-tag{display:none}
  .mih-compact .mih-site-header .mih-brand{font-size:1.15rem}
  .mih-compact .mih-site-header .mih-logo{width:253px}
}
.mih-head-row{display:flex;align-items:center;justify-content:space-between;gap:8px 32px;min-height:var(--mih-head)}
.mih-brand{font-family:var(--mih-display);font-size:1.15rem;font-weight:700;line-height:1.1;color:var(--mih-paper);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.mih-brand:hover{text-decoration:underline}
/* Script logo (transparent PNG), sized to the width the text title had: 230px compact and phones, 311px full desktop header */
.mih-logo{display:block;width:clamp(150px, calc(100vw - 156px), 360px);height:auto}
/* Phones and tablets: taller bar (60px). The Menu button never shrinks; the logo gives way instead. */
@media (max-width:959px){
  :root{--mih-head:60px}
  .mih-head-row{gap:8px 16px}
  .mih-menu-toggle{flex:none;white-space:nowrap}
  /* Logo and Menu button share one centre line */
  .mih-brandwrap{min-width:0;display:flex;align-items:center;align-self:center}
  .mih-brand{display:flex;align-items:center}
  .mih-menu-toggle{align-self:center}
}
.mih-brand:hover .mih-logo{opacity:.85}
.mih-menu ul{list-style:none;margin:0;padding:0}
.mih-menu a{color:var(--mih-paper);text-decoration:none;font-weight:600}
.mih-menu a:hover{text-decoration:underline}
.mih-menu a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:0.3em}
.mih-menu-toggle,.mih-sub-toggle{background:none;border:0;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0}
.mih-menu-toggle{gap:8px;font-weight:700;padding:0 12px;line-height:1;border:1px solid rgba(247,243,234,0.6);border-radius:4px;min-height:44px}
.mih-menu-toggle .lbl{display:inline-block;line-height:1}
.mih-menu-toggle:hover{border-color:var(--mih-paper);background:rgba(255,255,255,0.08)}
.mih-menu-toggle .mih-icon{width:22px;height:22px;display:block}
/* One icon at a time: menu icon when closed, X when open */
.mih-menu-toggle .i-open,.mih-menu-toggle .i-close{align-items:center}
.mih-menu-toggle .i-open{display:inline-flex}
.mih-menu-toggle .i-close{display:none}
.mih-menu-toggle[aria-expanded="true"] .i-open{display:none}
.mih-menu-toggle[aria-expanded="true"] .i-close{display:inline-flex}
@media (prefers-reduced-motion:no-preference){.mih-sub-toggle .mih-icon{transition:transform .2s}}
.mih-sub-toggle[aria-expanded="true"] .mih-icon{transform:rotate(180deg)}
.mih-sub-toggle{gap:6px;font-weight:600}
.mih-sub-toggle:hover{text-decoration:underline}
.mih-sub-nojs{display:inline-flex}
.js .mih-sub-nojs{display:none!important}
.mih-sub-toggle{display:none!important}
.js .mih-sub-toggle{display:inline-flex!important}
.mih-sub .all a{border-bottom:1px solid rgba(213,216,226,0.35);margin-bottom:4px}
.mih-sub .yr{display:block;font-family:var(--mih-display);font-size:0.85rem;color:var(--mih-gold);font-variant-numeric:tabular-nums}
.mih-sub .ti{display:block;font-weight:600;line-height:1.3}
.mih-sub a{display:block;padding:8px 16px}

/* Phones and tablets: menu button opens the menu under the header */
@media (max-width:959px){
  .mih-menu-toggle{display:none}
  .js .mih-menu-toggle{display:inline-flex}
  .mih-menu .lvl1{display:flex;flex-wrap:wrap;gap:0 8px;padding-bottom:8px}
  .mih-menu .lvl1 > li > a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
  .mih-sub-toggle{display:none}
  .mih-sub{display:none}
  .js .mih-head-row{flex-wrap:nowrap}
  .js .mih-menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--mih-navy);max-height:calc(100svh - var(--mih-stick));overflow:auto;box-shadow:0 12px 24px -12px rgba(0,0,0,0.5);padding:8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
  .js .mih-menu.is-open{display:block}
  .js .mih-menu .lvl1{display:block;padding:0}
  .js .mih-menu .lvl1 > li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:1px solid rgba(213,216,226,0.35)}
  .js .mih-menu .lvl1 > li > a{flex:1;min-height:48px;padding:0}
  .js .mih-menu .has-sub > .mih-sub-toggle{flex:1;justify-content:space-between;min-height:48px;font-size:inherit}
  .js .mih-sub-toggle{display:inline-flex}
  .js .mih-sub{flex-basis:100%;padding:0 0 8px 12px}
  .js .mih-sub.is-open{display:block}
  .js .mih-sub a{padding:8px 0}
}

/* Desktop: inline menu with a Stories dropdown */
@media (min-width:960px){
  .mih-menu-toggle{display:none}
  .mih-menu .lvl1{display:flex;align-items:center;gap:4px}
  .mih-menu .lvl1 > li{position:relative;display:flex;align-items:center}
  .mih-menu .lvl1 > li > a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
  .mih-menu .mih-sub-toggle{padding:0 10px;min-height:44px}
  .mih-sub{display:none}
  .js .mih-sub{position:absolute;top:100%;right:0;width:320px;max-height:calc(100svh - var(--mih-stick) - 16px);overflow:auto;background:var(--mih-navy);box-shadow:0 16px 32px -12px rgba(0,0,0,0.5);padding:8px 0;z-index:70}
  .js .mih-sub.is-open{display:block}
  .mih-sub a:hover{background:rgba(255,255,255,0.08)}
  .mih-sub a[aria-current]{box-shadow:inset 4px 0 0 var(--mih-gold)}
}

/* Hero */
.mih-hero{position:relative;background:var(--mih-band);color:var(--mih-paper);overflow:hidden}
.mih-hero::before{content:"";position:absolute;inset:0;background:url(../img/hero.jpg) center/cover no-repeat;filter:grayscale(1);opacity:0.18}
.mih-hero .in{position:relative;padding-block:clamp(56px,10vw,128px);display:grid;gap:24px}
.mih-hero .in > *{margin:0}
.mih-hero .mih-eyebrow{color:var(--mih-gold)}
.mih-hero h1{font-size:var(--mih-step-3);max-width:16ch;color:var(--mih-paper);text-wrap:balance}
.mih-hero .intro{max-width:46ch;font-size:var(--mih-step-1);line-height:1.5;color:#E9E4D8}
.mih-hero .meta{color:var(--mih-band-muted);font-size:var(--mih-step--1)}
.mih-hero .mih-start .wp-block-button__link{background:var(--mih-gold);color:var(--mih-ink);min-height:48px;display:inline-flex;align-items:center;padding:0 22px;border-radius:0;text-decoration:none}
.mih-hero .mih-start .wp-block-button__link{gap:10px;border:2px solid var(--mih-gold)}
.mih-hero .mih-start .wp-block-button__link::after{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion:no-preference){.mih-hero .mih-start .wp-block-button__link::after{transition:transform .2s ease}}
.mih-hero .mih-start .wp-block-button__link:hover{background:var(--mih-navy);color:var(--mih-paper)}
.mih-hero .mih-start .wp-block-button__link:hover::after,.mih-hero .mih-start .wp-block-button__link:focus-visible::after{transform:translateY(4px)}

/* Chapters */
.mih-home{display:grid;grid-template-columns:minmax(0,1fr)}
.mih-chapter{position:relative;display:grid}
.mih-chapter + .mih-chapter{border-top:4px solid var(--mih-navy)}
.mih-media{position:relative;margin:0;background:var(--mih-band)}
.mih-media .mih-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.mih-media.is-portrait .mih-img{object-fit:contain;object-position:center}
.mih-credit{position:absolute;right:0;top:0;max-width:min(90%,46ch);background:rgba(20,24,39,0.92);color:#E9E4D8;font-size:0.8rem;line-height:1.4;padding:6px 10px}
.mih-card{position:relative;background:rgba(255,255,255,0.9);color:var(--mih-ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;gap:14px;padding:24px 20px 28px;margin:-40px 16px 40px;box-shadow:0 18px 40px -18px rgba(20,24,39,0.45)}
.mih-card > *{margin:0}
.mih-card::before{content:"";position:absolute;left:-0.5rem;top:0;bottom:0;width:0.5rem;background:var(--mih-gold);opacity:0}
@media (prefers-reduced-motion:no-preference){.mih-card::before{transition:opacity .9s ease}}
.mih-chapter.is-focus .mih-card::before{opacity:1}
.mih-card-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.mih-card-meta > *{margin:0}
/* Card meta row: date range (bold) left, story number right, both navy and the same size */
.mih-card .mih-card-meta{align-items:center}
.mih-card .mih-card-meta .mih-eyebrow,.mih-card .mih-card-meta .num{font-size:var(--mih-step--1);line-height:1.3;color:var(--mih-navy)}
.mih-card .mih-card-meta .mih-eyebrow{font-weight:700}
.mih-card .mih-card-meta .num{font-weight:400}
.mih-card h2,.mih-card h1{font-family:var(--mih-display);font-size:var(--mih-step-2);line-height:1.18;color:var(--mih-ink);text-wrap:balance}
.mih-card .sum{color:var(--mih-ink)}
.mih-card .byline{font-weight:700;color:var(--mih-ink);font-size:var(--mih-step--1);letter-spacing:0.02em}
.mih-card .num{font-size:var(--mih-step--1);color:var(--mih-muted);font-weight:600;font-variant-numeric:tabular-nums}
.mih-more{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;background:var(--mih-navy);color:var(--mih-paper)!important;font-weight:700;text-decoration:none}
.mih-more:hover{background:var(--mih-gold);color:var(--mih-navy)!important}
.mih-more .mih-icon{transition:none}
@media (prefers-reduced-motion:no-preference){.mih-more .mih-icon{transition:transform .2s ease}}
.mih-more:hover .mih-icon,.mih-more:focus-visible .mih-icon{transform:translateX(4px)}
.mih-empty{padding:48px 16px;text-align:center}

@media (min-width:960px){
  .mih-home{position:relative}
  .mih-chapter{min-height:100svh;align-items:center}
  .mih-chapter .mih-media{position:absolute;inset:0}
  .mih-chapter .mih-media .mih-img{height:100%;aspect-ratio:auto}
  .mih-chapter .mih-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,24,39,0.55),rgba(20,24,39,0.05) 60%)}
  .mih-media.is-portrait .mih-img{object-position:62% center}
  .mih-credit{z-index:1;top:auto;bottom:0}
  .mih-home .mih-credit{right:var(--mih-legend-w)}
  .mih-card{width:min(440px,42%);margin:clamp(48px,6vw,96px) 0 clamp(48px,6vw,96px) clamp(32px,5vw,88px);padding:32px 32px 36px}
}

/* Timeline list (shared by the legend and the phone menu) */
.tl-wrap{position:relative;min-height:0}
.mih-tl{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:4px}
.tl-wrap::before,.tl-wrap .fill{content:"";position:absolute;left:11px;top:14px;width:2px;background:var(--mih-band-rule);bottom:14px}
.tl-wrap .fill{background:var(--mih-gold);bottom:auto;height:0}
@media (prefers-reduced-motion:no-preference){.tl-wrap .fill{transition:height .4s ease}}
.mih-tl a{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:center;min-height:44px;text-decoration:none;color:var(--mih-paper)}
.mih-tl a:hover .lbl{text-decoration:underline}
.mih-tl .dot{width:24px;height:24px;display:grid;place-items:center}
.mih-tl .dot::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--mih-band);border:2px solid var(--mih-band-rule)}
.mih-tl .yr{display:block;font-family:var(--mih-display);font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--mih-band-muted);line-height:1.1}
.mih-tl .lbl{display:block;font-size:0.9rem;line-height:1.3}
.mih-tl a.past .dot::after{background:var(--mih-gold);border-color:var(--mih-gold)}
.mih-tl a[aria-current] .dot::after{width:18px;height:18px;background:var(--mih-band);border:3px solid var(--mih-gold);box-shadow:0 0 0 4px var(--mih-band)}
.mih-tl a[aria-current] .yr{color:var(--mih-gold);font-size:1.35rem}
.mih-tl a[aria-current] .lbl{font-weight:700}

/* Desktop legend over the images */
.mih-legend{display:none}
@media (min-width:960px){
  .mih-legend{display:block;position:absolute;top:0;right:0;bottom:0;width:var(--mih-legend-w);z-index:5;color:var(--mih-paper)}
  .mih-legend .stick{position:sticky;top:var(--mih-stick);height:calc(100svh - var(--mih-stick));display:grid;grid-template-rows:auto 1fr;padding:36px 24px 24px;box-sizing:border-box;background:rgba(20,24,39,0.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .mih-legend h2{font-family:var(--mih-body);font-size:var(--mih-step--1);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--mih-navy-muted);margin:0 0 16px}
  .mih-legend .mih-tl{height:100%;justify-content:space-between;gap:0}
  .mih-legend .yr{color:var(--mih-navy-muted)}
  .mih-legend .tl-wrap::before{background:var(--mih-legend-rule)}
  .mih-legend .mih-tl .dot::after{background:var(--mih-band);border-color:var(--mih-legend-rule)}
  .mih-legend .mih-tl a.past .dot::after{background:var(--mih-gold);border-color:var(--mih-gold)}
  .mih-legend .mih-tl a[aria-current] .dot::after{background:var(--mih-band);border-color:var(--mih-gold);box-shadow:0 0 0 4px rgba(20,24,39,0.8)}
  .mih-legend .mih-tl a[aria-current] .yr{color:var(--mih-gold)}
}

/* Phone chapter bar */
.mih-chapbar{background:var(--mih-band);color:var(--mih-paper);padding-block:8px}
.mih-chapbar-toggle{display:none}
.js .mih-chapbar{position:sticky;top:var(--mih-stick);z-index:30;padding-block:0;isolation:isolate}
.js .mih-chapbar-toggle{width:100%;min-height:var(--mih-bar-h);display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;padding:0}
.mih-chapbar-toggle .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mih-chapbar-toggle .cnt{font-weight:700;color:var(--mih-gold)}
@media (prefers-reduced-motion:no-preference){.mih-chapbar-toggle .mih-icon{transition:transform .2s}}
.mih-chapbar-toggle[aria-expanded="true"] .mih-icon{transform:rotate(180deg)}
.js .mih-chap-panel{position:absolute;left:0;right:0;top:100%;background:var(--mih-band);max-height:65svh;overflow:auto;padding:8px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));box-shadow:0 12px 24px -12px rgba(0,0,0,0.5)}
@media (min-width:960px){.mih-chapbar{display:none}}

/* Story page */
.mih-backbar{position:sticky;top:var(--mih-stick);z-index:30;background:var(--mih-band);color:var(--mih-paper)}
.mih-backbar .in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--mih-bar-h)}
.mih-backbar a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--mih-paper)}
.mih-backbar .pos{font-size:var(--mih-step--1);color:var(--mih-band-muted)}

.mih-s-hero{position:relative;display:grid}
.mih-s-hero .mih-media .mih-img{aspect-ratio:16/10}
.mih-s-hero .mih-card h1{font-size:var(--mih-step-3)}
@media (min-width:960px){
  .mih-s-hero{min-height:78svh;align-items:end}
  .mih-s-hero .mih-media{position:absolute;inset:0}
  .mih-s-hero .mih-media .mih-img{height:100%;aspect-ratio:auto}
  .mih-s-hero .mih-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,24,39,0.55),rgba(20,24,39,0.05) 60%)}
  .mih-s-hero .mih-card{width:min(620px,52%)}
}
.mih-article{padding-block:clamp(40px, 5vw, 64px) 72px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mih-prose{display:flow-root;font-size:1.125rem}
.mih-prose > p:first-of-type{font-size:clamp(1.25rem, 1rem + 1vw, 1.5rem);line-height:1.5}
.mih-prose > *{margin-block:0}
.mih-prose > * + *{margin-block-start:1.25rem}
.mih-prose h2{font-size:var(--mih-step-1)}
.mih-prose > * + h2{margin-block-start:2.5rem}
.mih-prose .mih-reading{margin-block-start:3rem}
.mih-prose .mih-reading > * + *{margin-block-start:1rem}
.mih-prose .wp-block-quote{margin:0!important;padding:4px 0 4px 20px;border-left:3px solid var(--mih-brass)}
.mih-prose .wp-block-quote p{font-family:var(--mih-display);font-style:italic;font-size:var(--mih-step-1);line-height:1.5}
.mih-prose .wp-block-quote cite{display:block;font-style:normal;font-size:var(--mih-step--1);color:var(--mih-muted);margin-top:8px}
.mih-prose .wp-block-image img{border:1px solid var(--mih-rule)}
/* Images: clear space above and below so they read as a break from the text */
.mih-prose > .wp-block-image{margin-block-start:clamp(2.5rem, 5vw, 4rem)!important;margin-block-end:clamp(2.5rem, 5vw, 4rem)!important}
.mih-prose figcaption{font-size:var(--mih-step--1);color:var(--mih-muted)}
.mih-prose .mih-todo{background:#FCEFC4;border:1px dashed var(--mih-brass);padding:0 4px}
.mih-prose .mih-reading{border-top:1px solid var(--mih-rule);padding-top:24px}
.mih-pager{display:grid;gap:16px;margin-top:48px}
@media (min-width:720px){.mih-pager{grid-template-columns:1fr 1fr}.mih-pager .next{grid-column:2;text-align:right;justify-content:flex-end}}
.mih-pager a{display:flex;align-items:center;gap:14px;min-height:44px;padding:16px 18px;background:#FFFFFF;border:1px solid var(--mih-rule);color:var(--mih-ink);text-decoration:none}
.mih-pager a:hover{border-color:var(--mih-navy);box-shadow:inset 0 0 0 1px var(--mih-navy)}
.mih-pager .tx{display:grid;gap:2px;min-width:0}
.mih-pager .mih-icon{width:24px;height:24px;color:var(--mih-navy);stroke-width:2.4}
@media (prefers-reduced-motion:no-preference){.mih-pager .mih-icon{transition:transform .15s ease}}
.mih-pager .prev:hover .mih-icon{transform:translateX(-3px)}
.mih-pager .next:hover .mih-icon{transform:translateX(3px)}
@media (max-width:719px){.mih-pager .next{justify-content:space-between}}
.mih-pager a:hover .pt{text-decoration:underline}
.mih-pager .pl{font-size:var(--mih-step--1);color:var(--mih-muted);font-weight:600}
.mih-pager .pt{font-family:var(--mih-display);font-weight:700;font-size:1.1rem;line-height:1.3;color:var(--mih-navy)}

/* Footer */
.mih-site-footer{background:var(--mih-navy);color:var(--mih-paper)}
.mih-site-footer .in{padding-block:48px 28px;display:grid;gap:28px}
.mih-site-footer .in > *{margin:0}
@media (min-width:720px){.mih-site-footer .in{grid-template-columns:1.3fr 1fr}}
/* AYC logo in a white circle, with the site info beside it */
.mih-foot-org{display:flex;align-items:flex-start;gap:24px}
/* Line the circle up with the top of the site name: no inherited block-gap margin, and trim the space above the capitals */
.mih-foot-org > *{margin:0!important}
.mih-foot-org .name{line-height:1.15;text-box:trim-start cap alphabetic}
.mih-ayc-badge{flex:none;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:#FFFFFF}
.mih-ayc-badge img{display:block;width:80%;height:auto}
/* Desktop: circle as tall as the site info beside it (name to link, about 144px) */
@media (min-width:960px){.mih-ayc-badge{width:144px;height:144px}}
@media (max-width:479px){.mih-foot-org{gap:16px}.mih-ayc-badge{width:84px;height:84px}}
.mih-foot-about,.mih-foot-links{display:grid;gap:12px;align-content:start}
.mih-foot-about > *,.mih-foot-links > *{margin:0}
.mih-site-footer p{color:var(--mih-navy-muted);max-width:46ch}
.mih-site-footer .name{font-family:var(--mih-display);font-size:var(--mih-step-1);color:var(--mih-paper)}
.mih-site-footer .mih-nav .wp-block-navigation-item__content{display:inline-flex;align-items:center;min-height:44px;padding:0 20px 0 0;color:var(--mih-paper);font-weight:600;text-decoration:underline;text-underline-offset:0.18em}
.mih-site-footer .mih-nav .wp-block-navigation-item__content:hover{color:var(--mih-gold);text-decoration-thickness:2px}
/* "Visit Armdale Yacht Club": gold on navy, 6.3:1 */
.mih-ayc{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:var(--mih-gold)!important;text-decoration:none}
.mih-ayc .t{text-decoration:underline;text-underline-offset:0.18em}
.mih-ayc:hover .t{text-decoration-thickness:2px}
.mih-ayc .mih-icon{width:18px;height:18px}
/* Copyright: bottom right of the footer */
.mih-site-footer .mih-foot-copy{grid-column:1 / -1;justify-self:end;text-align:right;font-size:var(--mih-step--1);color:var(--mih-navy-muted)}

/* Contact form */
.mih-contact{display:grid;gap:24px;max-width:var(--wp--style--global--content-size, 720px);scroll-margin-top:24px}
.mih-form{display:grid;gap:24px}
.mih-field{display:grid;gap:6px}
.mih-field label{font-weight:700}
.mih-field input,.mih-field textarea{font:inherit;color:var(--mih-ink);background:#FFFFFF;border:2px solid var(--mih-ink);border-radius:0;padding:10px 12px;min-height:48px;width:100%;box-sizing:border-box}
.mih-field textarea{min-height:12em;resize:vertical}
.mih-field input:focus-visible,.mih-field textarea:focus-visible{outline:3px solid var(--mih-navy);outline-offset:0;box-shadow:inset 0 0 0 1px var(--mih-ink)}
.mih-field.has-error{border-left:4px solid #A4161A;padding-left:14px}
.mih-field.has-error input,.mih-field.has-error textarea{border-color:#A4161A}
.mih-field-error{color:#A4161A;font-weight:700;margin:0}
.mih-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.mih-form-note{font-size:var(--mih-step--1);color:var(--mih-muted);margin:0}
.mih-submit{justify-self:start;min-height:48px;padding:0 24px;background:var(--mih-navy);color:var(--mih-paper);font:inherit;font-weight:700;border:0;border-radius:0;cursor:pointer}
.mih-submit:hover{background:var(--mih-gold);color:var(--mih-navy)} /* matches .mih-more on the homepage */
.mih-submit:focus-visible{outline:3px solid var(--mih-ink);outline-offset:3px}
.mih-submit:disabled{opacity:0.7;cursor:progress}
.mih-success,.mih-error-summary{padding:20px 20px 20px 24px;background:#FFFFFF;scroll-margin-top:calc(var(--mih-stick) + 24px)}
.mih-success{border:4px solid #1B5E3B;background:#1B5E3B;color:#FFFFFF}
.mih-success h2,.mih-success p{color:#FFFFFF} /* white on #1B5E3B = 7.8:1 (WCAG 1.4.3) */
.mih-error-summary{border:4px solid #A4161A}
.mih-success h2,.mih-error-summary h2{font-size:var(--mih-step-1);margin:0 0 8px}
.mih-success p,.mih-error-summary p{margin:0}
.mih-error-summary ul{margin:0;padding-left:1.1em}
.mih-error-summary a{color:#A4161A;font-weight:700}
.mih-error-summary:focus{outline:3px solid var(--mih-navy);outline-offset:3px}
.mih-success:focus{outline:none} /* non-interactive status message; focus is only moved here so it is announced */

/* 404 and search */
.mih-plain{padding-block:56px 80px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mih-plain > *{margin-block:0}
.mih-plain > * + *{margin-block-start:1.25rem}
.mih-plain h1{font-size:var(--mih-step-3)}
.mih-results{list-style:none;padding:0}
.mih-results .wp-block-post{border-top:1px solid var(--mih-rule);padding-block:20px}
.mih-results .wp-block-post-title{font-size:var(--mih-step-1);margin:0 0 8px}
.mih-results .wp-block-post-excerpt__excerpt{margin:0}
.mih-plain .wp-block-search__input{border:2px solid var(--mih-ink);border-radius:0;min-height:48px;padding:8px 12px;font:inherit}
.mih-plain .wp-block-search__button{border-radius:0;min-height:48px;background:var(--mih-navy);color:var(--mih-paper);font-weight:700}

/* External links in page and story content: underlined, with an arrow in the link's own colour */
.wp-block-post-content a[href^="http"]:not([href*="//melvilleislandheritage.ca"]){text-decoration:underline;text-underline-offset:0.18em}
.wp-block-post-content a[href^="http"]:not([href*="//melvilleislandheritage.ca"])::after{
  content:"";display:inline-block;width:0.8em;height:0.8em;margin-left:0.3em;vertical-align:-0.05em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat}

/* Wide, zoomable image (core Image block style) */
.mih-prose > .wp-block-image.is-style-mih-zoom,
.wp-block-post-content > .wp-block-image.is-style-mih-zoom{--mih-avail:min(1100px, calc(100vw - 2rem));--mih-up:1.25}
.mih-prose > .wp-block-image.is-style-mih-zoom-col,
.wp-block-post-content > .wp-block-image.is-style-mih-zoom-col{--mih-avail:100%}
.mih-prose > .wp-block-image.is-style-mih-zoom-narrow,
.wp-block-post-content > .wp-block-image.is-style-mih-zoom-narrow{--mih-avail:min(100%, 560px)}
/* Width = the space the style allows. Column and narrow images are never enlarged past their real size;
   wide images may be enlarged up to 125%. Tall (portrait) images are capped at 80% of the screen height.
   A smaller image sits centred and the caption matches its width. */
.mih-prose > .wp-block-image:is(.is-style-mih-zoom,.is-style-mih-zoom-col,.is-style-mih-zoom-narrow),
.wp-block-post-content > .wp-block-image:is(.is-style-mih-zoom,.is-style-mih-zoom-col,.is-style-mih-zoom-narrow){
  --mih-fig:min(var(--mih-avail), calc(var(--mih-iw, 10000px) * var(--mih-up, 1)));
  width:var(--mih-fig)!important;max-width:none!important;
  margin-left:calc((100% - var(--mih-fig)) / 2)!important;margin-right:calc((100% - var(--mih-fig)) / 2)!important;
}
.mih-prose > .wp-block-image.mih-tall:is(.is-style-mih-zoom,.is-style-mih-zoom-col,.is-style-mih-zoom-narrow),
.wp-block-post-content > .wp-block-image.mih-tall:is(.is-style-mih-zoom,.is-style-mih-zoom-col,.is-style-mih-zoom-narrow){
  --mih-fig:min(var(--mih-avail), calc(var(--mih-iw, 10000px) * var(--mih-up, 1)), calc(80vh * var(--mih-ar, 1)));
}
.wp-block-image:is(.is-style-mih-zoom,.is-style-mih-zoom-col,.is-style-mih-zoom-narrow) img{display:block;width:100%;height:auto;border:0!important}
.mih-zoom-open{display:block;position:relative;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in}
.mih-zoom-open:focus-visible{outline:3px solid var(--mih-navy);outline-offset:4px}
.mih-zoom-hint{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(20,24,39,0.85);color:var(--mih-paper)}
.mih-zoom-hint .mih-icon{width:22px;height:22px}
@media (prefers-reduced-motion:no-preference){.mih-zoom-hint{transition:transform .2s ease}}
.mih-zoom-open:hover .mih-zoom-hint{transform:scale(1.08)}
.wp-block-image:is(.is-style-mih-zoom,.is-style-mih-zoom-col,.is-style-mih-zoom-narrow) figcaption{font-size:var(--mih-step--1);color:var(--mih-muted);margin-top:10px;text-align:left}

/* Image viewer */
.mih-viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,12,20,0.97);color:var(--mih-paper);overflow:hidden}
.mih-viewer::backdrop{background:rgba(10,12,20,0.9)}
.mih-viewer[open]{display:flex;flex-direction:column}
.mih-viewer .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));padding-top:max(8px,env(safe-area-inset-top,0px))}
.mih-viewer .tools{display:flex;align-items:center;gap:6px}
.mih-viewer button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;background:transparent;color:var(--mih-paper);border:1px solid rgba(247,243,234,0.6);border-radius:4px;font:inherit;font-weight:700;cursor:pointer}
.mih-viewer button:hover{background:rgba(255,255,255,0.1);border-color:var(--mih-paper)}
.mih-viewer button:disabled{opacity:0.45;cursor:default}
.mih-viewer button:focus-visible{outline:3px solid var(--mih-gold);outline-offset:2px}
.mih-viewer .pct{min-width:5.5em;font-variant-numeric:tabular-nums}
.mih-viewer .stage{position:relative;flex:1;overflow:hidden;touch-action:none;cursor:grab}
.mih-viewer .stage.is-dragging{cursor:grabbing}
.mih-viewer .stage img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;user-select:none;-webkit-user-drag:none}
.mih-viewer .cap{margin:0;padding:10px max(16px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-bottom,0px));font-size:var(--mih-step--1);color:#D5D8E2;max-width:80ch}
.mih-viewer .cap:empty{display:none}
.mih-viewer .help{font-size:0.8rem;color:#B8BCC8}
@media (max-width:600px){.mih-viewer .help{display:none}}

/* =========================================================================
   Light header and footer (0.5.0): paper background like the content,
   with an 8px (0.5rem) navy band at the bottom of the header and the top of the footer.
   Contrast on paper (#F7F3EA): navy 9.4:1, ink 16:1, muted 6.3:1, brass 5.9:1.
   ========================================================================= */
.mih-site-header{background:#FAFAFA;color:var(--mih-ink);border-bottom:0.25rem solid var(--mih-navy)}
.mih-site-footer{background:#FAFAFA;color:var(--mih-ink);border-top:0.25rem solid var(--mih-navy)}
:root{--mih-band-h:0.25rem}
/* Sticky offsets include the band so bars below the header still sit flush */
:root{--mih-stick:calc(var(--mih-top) + var(--mih-head) + var(--mih-band-h))}
.mih-site-header .mih-tag{color:var(--mih-muted)}
.mih-brand{color:var(--mih-navy)}
.mih-menu a,.mih-menu-toggle,.mih-sub-toggle{color:var(--mih-navy)}
.mih-menu a:hover,.mih-sub-toggle:hover{color:var(--mih-ink)}
.mih-menu-toggle{border-color:var(--mih-navy)}
.mih-menu-toggle:hover{border-color:var(--mih-ink);background:rgba(56,68,111,0.06)}
.mih-sub .all a{border-bottom-color:var(--mih-rule)}
.mih-sub .yr{color:var(--mih-brass)}
.mih-sub .ti{color:var(--mih-ink)}
@media (max-width:959px){
  /* Open below the header's navy band, not over it */
  .js .mih-menu{background:#FAFAFA;border-bottom:0.25rem solid var(--mih-navy);top:calc(100% + 0.25rem)}
  .js .mih-menu .lvl1 > li{border-top-color:var(--mih-rule)}
}
@media (min-width:960px){
  .js .mih-sub{background:#FFFFFF;border:1px solid var(--mih-rule);box-shadow:0 16px 32px -16px rgba(20,24,39,0.35)}
  .mih-sub a:hover{background:rgba(56,68,111,0.06)}
  .mih-sub a[aria-current]{box-shadow:inset 4px 0 0 var(--mih-navy)}
  .mih-compact .mih-site-header{box-shadow:0 6px 16px -12px rgba(20,24,39,0.35)}
}
/* Footer */
.mih-site-footer p{color:var(--mih-muted)}
.mih-site-footer .name{color:var(--mih-ink)}
.mih-site-footer .mih-nav .wp-block-navigation-item__content{color:var(--mih-navy)}
.mih-site-footer .mih-nav .wp-block-navigation-item__content:hover{color:var(--mih-ink)}
.mih-ayc{color:var(--mih-brass)!important}
.mih-ayc:hover{color:var(--mih-ink)!important}
.mih-site-footer .mih-foot-copy{color:var(--mih-muted)}
.mih-ayc-badge{box-shadow:0 0 0 1px var(--mih-rule)}

/* 0.5.1: very light grey (#FAFAFA) header and footer. On #FAFAFA: navy 9.0:1, muted 6.5:1, brass 6.1:1.
   Nav links: lighter weight; hover/focus = AYC gold box with ink text and underline (ink on gold 11.8:1),
   easing in and out over 0.2s (no animation when reduced motion is requested). */
.mih-menu .lvl1 > li > a,.mih-menu .lvl1 > li > .mih-sub-toggle{font-weight:500;border-radius:2px;text-underline-offset:0.25em}
.mih-site-footer .mih-nav .wp-block-navigation-item__content{font-weight:400;border-radius:2px;padding:0 10px;margin-left:-10px;margin-right:10px}
.mih-menu .lvl1 > li > a:hover,.mih-menu .lvl1 > li > .mih-sub-toggle:hover,
.mih-site-footer .mih-nav .wp-block-navigation-item__content:hover{background:var(--mih-gold);color:var(--mih-ink);text-decoration:underline;text-decoration-thickness:2px}
@media (prefers-reduced-motion:no-preference){
  .mih-menu .lvl1 > li > a,.mih-menu .lvl1 > li > .mih-sub-toggle,
  .mih-site-footer .mih-nav .wp-block-navigation-item__content{transition:background-color .2s ease-in-out,color .2s ease-in-out}
}
@media (max-width:959px){
  .js .mih-menu .lvl1 > li > a,.js .mih-menu .has-sub > .mih-sub-toggle{padding:0 10px;margin:4px -10px}
}
/* 0.5.2: tagline centred under the logo (desktop full header) */
@media (min-width:960px){
  .mih-site-header .mih-brandwrap{justify-items:start}
  .mih-site-header .mih-tag{justify-self:center;text-align:center}
}

/* 0.5.3: navy bands 4px (0.25rem). Compact desktop bar on scroll 10% taller: 53px + band, logo 253px. */
@media (min-width:960px){:root{--mih-head:53px}}

/* WCAG 2.2 SC 2.4.11: on story pages, keep focused items clear of the sticky back bar at desktop widths */
@media (min-width:960px){html:has(.mih-backbar){scroll-padding-top:calc(var(--mih-stick) + var(--mih-bar-h) + 16px)}}

/* Standard pages (not stories): extra 1rem above content headings */
.wp-block-post-content:not(.mih-prose) > :is(h2,h3,h4){margin-block-start:calc(var(--wp--style--block-gap, 1.2rem) + 1rem)}

/* Core Button blocks on standard pages: same navy button with gold hover as .mih-more */
.wp-block-post-content:not(.mih-prose) .wp-block-button__link{background:var(--mih-navy);color:var(--mih-paper);border-radius:0;font-weight:700;min-height:44px;display:inline-flex;align-items:center;padding:0 18px;text-decoration:none}
.wp-block-post-content:not(.mih-prose) .wp-block-button__link:hover{background:var(--mih-gold);color:var(--mih-navy)}

/* Show the 1951 "Sails on the Sea" colour film still in colour (all other story images stay greyscale) */
.mih-media .mih-img[src*="sailing-arm-1950s"]{filter:none}

/* Header and footer: aged-paper texture (Media Library image 292) under a 50% white layer */
.mih-site-header,.mih-site-footer{background-color:#F3E6CE;background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),url(/wp-content/uploads/2026/11/mih-paper-texture.jpg);background-size:auto,cover;background-position:center;background-repeat:no-repeat}
/* The lighter grey and gold text fall below 4.5:1 on the darker patches of the texture, so use ink and navy here */
.mih-site-header .mih-tag,.mih-site-footer p,.mih-site-footer .mih-foot-copy{color:var(--mih-ink)}
.mih-site-footer .mih-ayc .t{color:var(--mih-navy)}

/* Homepage hero "Begin with 1749" link: CSS double chevron, no button shape */
.mih-hero .mih-begin{justify-self:start;display:inline-flex;align-items:center;gap:18px;margin-top:48px;color:var(--mih-gold);font-family:var(--mih-display);font-weight:700;font-size:var(--mih-step-1);line-height:1.2;text-decoration:none;transition:color .2s ease}
.mih-hero .mih-begin:hover{color:#FFE08A}
.mih-hero .mih-begin:hover .mih-begin-text{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.mih-hero .mih-begin:focus-visible{outline:3px solid var(--mih-gold);outline-offset:6px;border-radius:2px}
.mih-begin-icon{position:relative;flex:none;display:block;width:34px;height:30px}
.mih-chev{position:absolute;inset:0;display:block}
.mih-chev::before,.mih-chev::after{content:"";position:absolute;left:5px;width:24px;height:24px;box-sizing:border-box;border-right:3.5px solid currentColor;border-bottom:3.5px solid currentColor;transform:rotate(45deg)}
.mih-chev::before{top:-12px}
.mih-chev::after{top:0}
@keyframes mih-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:no-preference){
.mih-begin-icon{transition:transform .2s ease}
.mih-hero .mih-begin:hover .mih-begin-icon{transform:translateY(3px)}
/* Three nudges (4.5 s) then stop: looping motion would need a pause control under WCAG 2.2.2 */
.mih-chev{animation:mih-nudge 1.5s ease-in-out 3}
}

/* Story pages: read-aloud controls (added by mih.js) */
.mih-tts-start{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:18px}
.mih-tts-start[hidden],.mih-tts-player[hidden]{display:none}
.mih-tts-listen{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid var(--mih-navy);border-radius:0;background:#FFFFFF;color:var(--mih-navy);font:inherit;font-weight:700;cursor:pointer}
.mih-tts-listen:hover{background:var(--mih-navy);color:var(--mih-paper)}
.mih-tts-listen svg,.mih-tts-btn svg{width:20px;height:20px;flex:none}
.mih-tts-time{font-size:var(--mih-step--1);color:var(--mih-muted)}
.mih-tts-player{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--mih-paper)}
.mih-tts-label{display:none}
.mih-tts-progress{font-size:.85rem;color:var(--mih-band-muted);white-space:nowrap;margin-right:4px}
.mih-tts-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;border:1.5px solid var(--mih-band-rule);border-radius:0;background:transparent;color:var(--mih-paper);font:inherit;font-size:.9rem;cursor:pointer}
.mih-tts-btn svg{width:18px;height:18px}
.mih-tts-pause{border-color:var(--mih-gold);color:var(--mih-gold)}
.mih-tts-btn:hover{background:rgba(255,255,255,.1)}
.mih-tts-speed{display:inline-flex;align-items:center;gap:6px;font-size:.9rem}
.mih-tts-speed select{min-height:36px;padding:0 6px;border:1.5px solid var(--mih-band-rule);border-radius:0;background:var(--mih-band);color:var(--mih-paper);font:inherit;font-size:.9rem;cursor:pointer}
.mih-tts-now{background:#FDF1CF;box-shadow:-12px 0 0 #FDF1CF,-16px 0 0 #7A5A00,12px 0 0 #FDF1CF}
@media (max-width:959px){
.mih-tts-start{flex-direction:column;align-items:stretch;text-align:center}
.mih-tts-listen{justify-content:center;min-height:48px}
.mih-tts-player{position:fixed;left:0;right:0;bottom:0;z-index:70;margin:0;display:grid;grid-template-columns:1.4fr 1fr .9fr;grid-template-areas:"label label prog" "pause stop speed";gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:var(--mih-band);border-top:1px solid var(--mih-band-rule)}
.mih-tts-player[hidden]{display:none}
.mih-tts-label{display:block;grid-area:label;font-size:.8rem;color:var(--mih-band-muted)}
.mih-tts-progress{grid-area:prog;text-align:right;font-size:.8rem;margin:0}
.mih-tts-pause{grid-area:pause}
.mih-tts-stop{grid-area:stop}
.mih-tts-speed{grid-area:speed;display:block}
.mih-tts-btn,.mih-tts-speed select{width:100%;min-height:48px}
.mih-tts-speed-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.mih-tts-on{scroll-padding-bottom:calc(var(--mih-tts-h,110px) + 16px)}
html.mih-tts-on body{padding-bottom:var(--mih-tts-h,110px)}
}