/* ============================================================================
   INTERIOR PAGES — "Gulf Current" design layer
   ----------------------------------------------------------------------------
   Everything below the homepage: the shared hero band (includes/page_hero.html),
   listing layouts (news stories, the memo / delegation ledger, the events
   agenda), the reading sheet used by detail pages, the section directory
   on content pages, pagination and search.

   Concept: the Chamber sits on the Arabian Gulf, and trade moves like a
   current. The hero is a deep-water band with luminous current lines drawn on
   a <canvas> by js/inner.js — they flow in the reading direction (right to
   left in Arabic), small lights travel along them like ships, and the lines
   part around the visitor's cursor. The site control panel can swap the
   lines (inner_hero_effect, data-hero-effect on the band) for "ripples",
   a softly lit water surface whose crests roll in the same direction,
   "shimmer", sheens of light sweeping across with twinkling glints,
   "shimmer-slow", the same sheens stronger and slower, without glints,
   "waves", slow translucent layers of swell, "mashrabiya", a fine
   eight-point star lattice lit by a passing lantern, stars traced in light,
   "emblem", the same lattice made of the Chamber's sail emblem, or "lines",
   the emblem's lanterns over the Chamber mark's fine lines alone (at the
   band's edge and beside the title), lit by the lanterns and the cursor.
   The page title surfaces word by word.
   Everything under the band stays quiet: paper, navy ink, one gold accent.

   Motion is opt-in: `html.gc-motion` is set by the inline script in base.html
   only when prefers-reduced-motion is not "reduce". Without it (or without
   JS) every element renders in its final state.

   Loaded after mysite.css on every page; all selectors are scoped to classes
   that only interior templates emit, so the homepage is untouched.
   ============================================================================ */

:root {
    --gc-abyss:     #021a33;   /* hero floor */
    --gc-deep:      #01284a;   /* = --clr-primary-darker */
    --gc-navy:      #013d6e;   /* = --clr-primary-dark */
    --gc-brand:     #015599;   /* = --clr-primary */
    --gc-current:   #5cc2ff;   /* current-line highlight, hero only */
    --gc-sand:      #f0a500;   /* = --clr-accent; the single warm accent */
    --gc-sand-soft: #ffd88a;
    --gc-paper:     #f3f6fa;   /* listing / reading background */
    --gc-ink:       #14243a;
    --gc-ink-soft:  #56657a;
    --gc-line:      #e1e9f2;

    --gc-ease:      cubic-bezier(.22, .61, .36, 1);
    --gc-ease-out:  cubic-bezier(.16, 1, .3, 1);

    --gc-shadow-rest:  0 1px 2px rgba(2, 26, 51, .06), 0 10px 28px -16px rgba(2, 26, 51, .22);
    --gc-shadow-lift:  0 2px 4px rgba(2, 26, 51, .06), 0 26px 48px -22px rgba(2, 26, 51, .38);
    --gc-shadow-sheet: 0 2px 4px rgba(2, 26, 51, .04), 0 34px 70px -34px rgba(2, 26, 51, .42);

    /* how far listing / reading content rises into the hero band */
    --gc-overlap: clamp(64px, 7vw, 104px);
}

/* ============================================================================
   1. HEADER OVER THE BAND
   The inline script after <header> in base.html adds `has-fullscreen-hero`
   + `has-inner-hero` to <body> and `hero-overlap` to the header, so the
   homepage's transparent-header rules (mysite.css) apply from first paint;
   effects.js then keeps `hero-overlap` in step with scroll. The header is
   position:fixed there, so the band reserves its height here.
   ============================================================================ */
body.has-inner-hero {
    --gc-bar-h: 84px;
    --gc-top-h: 0px;
}
body.has-inner-hero:has(.site-header.has-topbar) { --gc-top-h: var(--topbar-h); }
@media (max-width: 600px) {
    body.has-inner-hero { --gc-bar-h: 70px; }
}
/* Scrolled but still over the band: the title would slide under bare white
   nav text, so the bar turns to frosted deep-water glass until the band has
   passed (then effects.js drops hero-overlap and it goes white). */
body.has-inner-hero .site-header.hero-overlap.scrolled {
    background: rgba(2, 26, 51, .8);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
            backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .07), 0 10px 30px -12px rgba(0, 0, 0, .45);
}

/* ============================================================================
   2. THE BAND
   ============================================================================ */
.page-hero {
    --gc-hero-pad-top: clamp(36px, 5vw, 64px);
    --gc-hero-pad-bottom: clamp(76px, 8vw, 112px);
    --gc-glow-x: 82%;
    --gc-glow-x2: 12%;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc(var(--gc-top-h, 0px) + var(--gc-bar-h, 0px) + clamp(250px, 30vw, 340px));
    padding: calc(var(--gc-top-h, 0px) + var(--gc-bar-h, 0px) + var(--gc-hero-pad-top)) 0 var(--gc-hero-pad-bottom);
    color: #fff;
    background-color: var(--gc-abyss);
    background-image:
        radial-gradient(ellipse 62% 85% at var(--gc-glow-x) -8%, rgba(3, 136, 232, .36), transparent 64%),
        radial-gradient(ellipse 55% 70% at var(--gc-glow-x2) 112%, rgba(1, 85, 153, .55), transparent 70%),
        linear-gradient(180deg, #01284a 0%, #021f3c 56%, var(--gc-abyss) 100%);
}
[dir="rtl"] .page-hero { --gc-glow-x: 18%; --gc-glow-x2: 88%; }

/* Listing and reading templates pass hero_overlap=1: deeper band, content
   rises into it. */
.page-hero--overlap {
    --gc-hero-pad-bottom: calc(var(--gc-overlap) + clamp(56px, 6vw, 84px));
}

/* Chamber CVI mark — large, faint, running off the inline-end edge. */
.page-hero__mark {
    position: absolute;
    z-index: -2;
    top: 50%;
    inset-inline-end: clamp(-150px, -7vw, -40px);
    width: clamp(300px, 36vw, 540px);
    aspect-ratio: 620 / 590;
    background: linear-gradient(200deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .015) 72%);
    -webkit-mask: var(--cvi-mark) center / contain no-repeat;
            mask: var(--cvi-mark) center / contain no-repeat;
    transform: translateY(-44%) rotate(-8deg);
    translate: 0 calc(var(--gc-par, 0) * 70px);
    pointer-events: none;
}
/* The "lines" effect draws the mark on the canvas itself, to trace it in
   light (inner.js); the element stays in place, unanimated, to be measured. */
.page-hero.page-hero--lines .page-hero__mark {
    visibility: hidden;
    animation: none;
}
/* Its lines show from the first frame, so the canvas comes up almost at once. */
.gc-motion .page-hero--lines .page-hero__current { transition-duration: .2s; }

.page-hero__current {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.page-hero__current.is-live { opacity: 1; }

.page-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-inline: clamp(18px, 4vw, 56px);
    translate: 0 calc(var(--gc-par, 0) * 36px);
    opacity: calc(1 - var(--gc-par, 0) * .9);
}

.page-hero__title {
    margin: 0;
    max-width: 980px;
    font-size: clamp(2rem, 1.2rem + 2.7vw, 3.5rem);
    font-weight: 700;
    line-height: 1.24;
    text-wrap: balance;
    overflow-wrap: anywhere;
    color: #fff;
}
.page-hero__title--long {
    font-size: clamp(1.55rem, 1.05rem + 1.7vw, 2.45rem);
    line-height: 1.42;
}
html[dir="ltr"] .page-hero__title { letter-spacing: -.015em; }

.page-hero__lead {
    margin: 16px 0 0;
    max-width: 64ch;
    font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
    line-height: 1.85;
    color: rgba(255, 255, 255, .78);
}

/* Shoreline where the band meets the page. Fill follows the page below. */
.page-hero__tide {
    position: absolute;
    z-index: 0;
    inset-inline: 0;
    bottom: -1px;
    display: block;
    width: 100%;
    height: clamp(24px, 4vw, 60px);
    color: var(--gc-tide, #fff);
    pointer-events: none;
}
.page-hero__tide path { fill: currentColor; }
.page-hero__tide .page-hero__tide-back { opacity: .16; }
[dir="rtl"] .page-hero__tide { transform: scaleX(-1); }

/* ── Breadcrumbs as a route ── */
.breadcrumbs__home a {
    display: inline-flex;
    align-items: center;
}
.breadcrumbs__home svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.page-hero .breadcrumbs {
    max-width: none;
    margin: 0 0 clamp(14px, 2vw, 24px);
    padding: 0;
    font-size: .92rem;
    color: rgba(255, 255, 255, .7);
}
.page-hero .breadcrumbs ol { gap: 6px 0; align-items: center; }
.page-hero .breadcrumbs a {
    color: rgba(255, 255, 255, .72);
    transition: color .2s ease;
}
.page-hero .breadcrumbs a:hover,
.page-hero .breadcrumbs a:focus-visible { color: #fff; }
.page-hero .breadcrumbs li + li::before,
[dir="rtl"] .page-hero .breadcrumbs li + li::before {
    content: "";
    width: 24px;
    height: 7px;
    margin: 0 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .5)) center / 100% 1px no-repeat;
}
[dir="rtl"] .page-hero .breadcrumbs li + li::before {
    background-image: linear-gradient(270deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .5));
}
/* the leg into the current page ends in a gold dot */
.page-hero .breadcrumbs li[aria-current]::before {
    background:
        radial-gradient(circle 3.5px at calc(100% - 3.5px) 50%, var(--gc-sand) 97%, transparent 100%),
        linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .5)) center / calc(100% - 9px) 1px no-repeat;
}
[dir="rtl"] .page-hero .breadcrumbs li[aria-current]::before {
    background:
        radial-gradient(circle 3.5px at 3.5px 50%, var(--gc-sand) 97%, transparent 100%),
        linear-gradient(270deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .5)) right center / calc(100% - 9px) 1px no-repeat;
}
.page-hero .breadcrumbs [aria-current="page"] {
    color: #fff;
    font-weight: 500;
}
/* Long titles already headline the band; keep the trail to one line. */
.page-hero .breadcrumbs li[aria-current] {
    display: block;
    max-width: 40ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.page-hero .breadcrumbs li[aria-current]::before {
    display: inline-block;
    vertical-align: middle;
}

/* ── Facts row (dates, place, category) ── */
.hero-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: clamp(18px, 2.4vw, 28px) 0 0;
    padding: 0;
}
.hero-fact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: .93rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .92);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
.hero-fact svg {
    flex: none;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .75;
}
.hero-fact--tag {
    color: var(--gc-sand-soft);
    background: rgba(240, 165, 0, .1);
    border-color: rgba(240, 165, 0, .42);
    font-weight: 700;
}
.hero-fact bdi { unicode-bidi: isolate; }

/* ── Search field inside the band ── */
.hero-search {
    display: flex;
    gap: 10px;
    max-width: 760px;
    margin-top: clamp(20px, 2.6vw, 30px);
    padding: 8px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.hero-search:focus-within {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(92, 194, 255, .7);
    box-shadow: 0 0 0 4px rgba(92, 194, 255, .16);
}
.hero-search__field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}
.hero-search__field svg {
    position: absolute;
    inset-inline-start: 16px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: rgba(255, 255, 255, .7);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}
.hero-search input[type="text"] {
    width: 100%;
    height: 54px;
    padding-inline: 48px 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #fff;
    font-size: 1.08rem;
}
.hero-search input[type="text"]::placeholder { color: rgba(255, 255, 255, .55); }
.hero-search input[type="text"]:focus { outline: none; }
.hero-search button {
    flex: none;
    height: 54px;
    padding: 0 30px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: var(--gc-navy);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .2s ease;
}
.hero-search button:hover { background: var(--gc-sand-soft); }
.hero-search button:active { transform: scale(.98); }
.hero-search button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Load sequence (one orchestrated moment) ── */
@keyframes gc-rise {
    from { opacity: 0; transform: translateY(14px); }
}
@keyframes gc-surface {
    to { opacity: 1; top: 0; filter: blur(0); }
}
@keyframes gc-show {
    to { opacity: 1; }
}
@keyframes gc-mark-in {
    from { opacity: 0; transform: translateY(-38%) rotate(-16deg) scale(.94); }
}

.gc-motion .page-hero__mark { animation: gc-mark-in 2s var(--gc-ease-out) both .1s; }
.gc-motion .page-hero .breadcrumbs { animation: gc-rise .9s var(--gc-ease-out) both .05s; }
.gc-motion .page-hero__lead { animation: gc-rise .9s var(--gc-ease-out) both .45s; }
.gc-motion .hero-facts,
.gc-motion .hero-search { animation: gc-rise .9s var(--gc-ease-out) both .55s; }

/* Title words surface out of the water. inner.js splits the title into
   .gc-w spans; until it does, the title is held back — with a timed
   fallback so a failed script can never leave it hidden. */
.gc-motion .page-hero__title[data-surface]:not(.is-split) {
    opacity: 0;
    animation: gc-show 0s linear 1.2s forwards;
}
/* Words stay plain inline boxes: an inline-block is bidi-neutral, which
   would reverse runs of Latin words / numbers inside an Arabic title
   ("Test Gam 1" -> "1 Gam Test"). Inline boxes can't take transforms,
   so the rise uses relative `top`. */
.page-hero__title .gc-w {
    position: relative;
    top: .42em;
    opacity: 0;
    filter: blur(10px);
    animation: gc-surface 1s var(--gc-ease-out) forwards;
    animation-delay: calc(160ms + var(--i, 0) * 65ms);
}

/* ============================================================================
   3. PAGE CANVAS UNDER THE BAND
   ============================================================================ */
body.ip-paper { --gc-tide: var(--gc-paper); }
body.ip-paper main { background: var(--gc-paper); }

.ip-wrap {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 56px) clamp(64px, 8vw, 112px);
}
.ip-rise { margin-top: calc(-1 * var(--gc-overlap)); }

.ip-intro { margin-bottom: clamp(20px, 3vw, 32px); }
.ip-wrap.search-page {
    max-width: 1000px;
    padding-top: clamp(32px, 4vw, 48px);
}

.ip-empty {
    padding: 56px 24px;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--gc-shadow-rest);
    text-align: center;
    color: var(--gc-ink-soft);
    font-size: 1.05rem;
}

/* direction-bearing glyphs (arrows): drawn for LTR, mirrored for RTL */
[dir="rtl"] .gc-flip { transform: scaleX(-1); }

/* ============================================================================
   4. NEWS — lead story + river of stories
   ============================================================================ */
.ip-stories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.ip-story { min-width: 0; }
.ip-story__link {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    color: var(--gc-ink);
    box-shadow: var(--gc-shadow-rest);
    transition: transform .5s var(--gc-ease-out), box-shadow .5s var(--gc-ease-out);
}
.ip-story__link:hover,
.ip-story__link:focus-visible {
    color: var(--gc-ink);
    transform: translateY(-5px);
    box-shadow: var(--gc-shadow-lift);
}
/* gold underline sweeps in from the reading start */
.ip-story__link::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gc-sand), #ffcd5c);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s var(--gc-ease-out);
}
[dir="rtl"] .ip-story__link::after { transform-origin: right center; }
.ip-story__link:hover::after,
.ip-story__link:focus-visible::after { transform: scaleX(1); }

.ip-story__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--gc-deep);
}
.ip-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--gc-ease-out);
}
.ip-story__link:hover .ip-story__media img { transform: scale(1.06); }

/* no photo: deep-water plate with the CVI mark */
.ip-story__plate {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 70% at 80% 0%, rgba(3, 136, 232, .35), transparent 65%),
        linear-gradient(160deg, var(--gc-navy), var(--gc-abyss));
}
.ip-story__plate::after {
    content: "";
    position: absolute;
    width: 46%;
    aspect-ratio: 620 / 590;
    inset-inline-end: -8%;
    bottom: -12%;
    background: rgba(255, 255, 255, .12);
    -webkit-mask: var(--cvi-mark) center / contain no-repeat;
            mask: var(--cvi-mark) center / contain no-repeat;
    transform: rotate(-10deg);
}

.ip-story__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px 24px;
}
.ip-story__date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .86rem;
    font-weight: 500;
    color: var(--gc-brand);
}
.ip-story__date svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ip-story__title {
    margin: 0;
    font-size: 1.07rem;
    font-weight: 700;
    line-height: 1.7;
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .3s ease;
}
.ip-story__link:hover .ip-story__title { color: var(--gc-brand); }

/* lead story: photo fills the card, headline sits on a deep-water scrim */
.ip-story--lead {
    grid-column: span 2;
    grid-row: span 2;
}
.ip-story--lead .ip-story__link {
    justify-content: flex-end;
    min-height: 520px;
    color: #fff;
}
.ip-story--lead .ip-story__link:hover,
.ip-story--lead .ip-story__link:focus-visible { color: #fff; }
.ip-story--lead .ip-story__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}
.ip-story--lead .ip-story__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(2, 26, 51, .95) 0%,
        rgba(2, 26, 51, .62) 34%,
        rgba(2, 26, 51, 0) 68%);
}
.ip-story--lead .ip-story__body {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    gap: 14px;
    padding: clamp(24px, 3.2vw, 44px);
}
.ip-story--lead .ip-story__date { color: var(--gc-sand-soft); }
.ip-story--lead .ip-story__title {
    max-width: 30ch;
    font-size: clamp(1.35rem, 1rem + 1.25vw, 2.05rem);
    line-height: 1.5;
    -webkit-line-clamp: 4;
    color: #fff;
}
.ip-story--lead .ip-story__link:hover .ip-story__title { color: #fff; }

/* ============================================================================
   5. LEDGER — memos, delegations, events (dated entries)
   ============================================================================ */
.ip-ledger {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--gc-shadow-sheet);
}
.ip-entry { position: relative; }
.ip-entry + .ip-entry { border-top: 1px solid var(--gc-line); }
.ip-entry__link {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(16px, 2.4vw, 32px);
    padding: 22px clamp(18px, 3vw, 36px);
    color: var(--gc-ink);
    transition: background-color .35s var(--gc-ease);
}
.ip-entry__link::before {
    content: "";
    position: absolute;
    inset-block: 16px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--gc-sand);
    transform: scaleY(0);
    transition: transform .45s var(--gc-ease-out);
}
.ip-entry__link:hover,
.ip-entry__link:focus-visible {
    color: var(--gc-ink);
    background-color: #f7fafd;
}
.ip-entry__link:hover::before,
.ip-entry__link:focus-visible::before { transform: scaleY(1); }
.ip-entry__link:focus-visible { outline-offset: -3px; }

/* date stamp */
.ip-stamp {
    display: grid;
    justify-items: center;
    align-content: center;
    min-height: 76px;
    padding-inline-end: clamp(14px, 2.2vw, 28px);
    border-inline-end: 1px solid var(--gc-line);
    text-align: center;
    line-height: 1.1;
    color: var(--gc-navy);
}
.ip-stamp__day {
    font-size: 2.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.ip-stamp__month {
    margin-top: 5px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--gc-brand);
}
.ip-stamp__year {
    margin-top: 3px;
    font-size: .78rem;
    color: var(--gc-ink-soft);
}
.ip-stamp--none .ip-stamp__day { color: var(--gc-line); }

.ip-entry__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
}
.ip-entry__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--gc-ink);
    overflow-wrap: anywhere;
    transition: color .3s ease;
}
.ip-entry__link:hover .ip-entry__title { color: var(--gc-brand); }
.ip-entry__excerpt {
    max-width: 100%;
    font-size: .93rem;
    line-height: 1.75;
    color: var(--gc-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ip-entry__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: .9rem;
    color: var(--gc-ink-soft);
}
.ip-entry__meta span {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.ip-entry__meta svg {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    fill: none;
    stroke: var(--gc-brand);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ip-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.5;
    color: #7a5200;
    background: rgba(240, 165, 0, .15);
}
.ip-entry__aside {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ip-chip {
    padding: 3px 9px;
    border-radius: 6px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gc-brand);
    background: rgba(1, 85, 153, .07);
    border: 1px solid rgba(1, 85, 153, .16);
}
.ip-thumb {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    padding: 6px;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--gc-line);
}
.ip-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ip-go {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--gc-line);
    color: var(--gc-brand);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, translate .45s var(--gc-ease-out);
}
.ip-go svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ip-entry__link:hover .ip-go,
.ip-entry__link:focus-visible .ip-go {
    background: var(--gc-navy);
    border-color: var(--gc-navy);
    color: #fff;
    translate: 4px 0;
}
[dir="rtl"] .ip-entry__link:hover .ip-go,
[dir="rtl"] .ip-entry__link:focus-visible .ip-go { translate: -4px 0; }

/* ============================================================================
   6. PAGINATION
   ============================================================================ */
.ip-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(36px, 5vw, 60px);
}
.ip-pager__pages {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 6px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--gc-shadow-rest);
}
.ip-pager__pages a,
.ip-pager__pages span {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .98rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gc-ink);
    transition: background-color .25s ease, color .25s ease;
}
.ip-pager__pages a:hover { background: #eef4fa; color: var(--gc-brand); }
.ip-pager__pages [aria-current="page"] {
    background: var(--gc-navy);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(1, 61, 110, .7);
}
.ip-pager__pages .ip-pager__gap {
    min-width: 22px;
    padding: 0;
    color: var(--gc-ink-soft);
}
.ip-pager__step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    background: #fff;
    color: var(--gc-navy);
    font-weight: 700;
    box-shadow: var(--gc-shadow-rest);
    transition: background-color .3s ease, color .3s ease, transform .2s ease;
}
.ip-pager__step:hover { background: var(--gc-navy); color: #fff; }
.ip-pager__step:active { transform: scale(.97); }
.ip-pager__step svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ip-pager__step.is-disabled {
    opacity: .4;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}
.ip-pager__info {
    display: none;
    font-weight: 600;
    color: var(--gc-ink-soft);
    font-variant-numeric: tabular-nums;
}
.ip-pager__info--always { display: inline; }

/* ============================================================================
   7. READING SHEET — news article, memo, delegation, event
   ============================================================================ */
.ip-article {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 880px) minmax(0, 1fr);
    column-gap: 28px;
    margin-top: calc(-1 * var(--gc-overlap));
    padding: 0 clamp(14px, 3vw, 24px) clamp(64px, 8vw, 112px);
}
.ip-sheet {
    grid-column: 2;
    grid-row: 1;
    align-self: start;   /* the share rail shares this row; don't stretch to it */
    min-width: 0;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--gc-shadow-sheet);
}

/* figure: letterboxed photos sit on a blurred copy of themselves */
.ip-figure {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    overflow: hidden;
    background: var(--gc-deep);
    max-height: 620px;
}
.ip-figure::before {
    content: "";
    position: absolute;
    inset: -48px;
    background: var(--fig-bg, none) center / cover no-repeat;
    filter: blur(30px) saturate(1.15) brightness(.7);
    transform: scale(1.08);
}
.ip-figure img {
    position: relative;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: contain;
}
/* unveil from the reading start (inner.js adds .gc-unveil, then .is-in) */
.ip-figure.gc-unveil {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.3s var(--gc-ease-out);
}
[dir="rtl"] .ip-figure.gc-unveil { clip-path: inset(0 0 0 100%); }
.ip-figure.gc-unveil img {
    transform: scale(1.08);
    transition: transform 1.8s var(--gc-ease-out);
}
.ip-figure.gc-unveil.is-in,
[dir="rtl"] .ip-figure.gc-unveil.is-in { clip-path: inset(0 0 0 0); }
.ip-figure.gc-unveil.is-in img { transform: none; }

.ip-prose {
    padding: clamp(28px, 4.6vw, 60px) clamp(22px, 5.4vw, 72px) clamp(36px, 5vw, 64px);
}
.ip-prose.detail-body {
    font-size: 1.0625rem;
    line-height: 1.95;
    color: #1d2c41;
}
.ip-prose.detail-body > p:first-child,
.ip-prose.detail-body > div:first-child > p:first-child {
    font-size: 1.14em;
    line-height: 1.9;
    color: var(--gc-ink);
}
.ip-prose.detail-body p { margin: 0 0 1.1em; }
.ip-prose.detail-body a {
    text-decoration: underline;
    text-decoration-color: rgba(1, 85, 153, .3);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.ip-prose.detail-body a:hover { text-decoration-color: currentColor; }
.ip-prose.detail-body img {
    border-radius: 12px;
    margin-block: 1.4em;
}
.ip-prose.detail-body blockquote {
    margin: 1.6em 0;
    padding: 18px 24px;
    border-inline-start: 3px solid var(--gc-sand);
    background: var(--gc-paper);
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;
}
.ip-sheet > .ip-prose:empty { display: none; }
.ip-prose--empty {
    margin: 0;
    text-align: center;
    color: var(--gc-ink-soft);
}

/* attachment rendered as a document */
.ip-doc {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: clamp(22px, 4vw, 44px) clamp(22px, 5.4vw, 72px) 0;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid var(--gc-line);
    background: linear-gradient(180deg, #fff, var(--gc-paper));
    color: var(--gc-ink);
    transition: border-color .3s ease, box-shadow .4s var(--gc-ease-out), transform .4s var(--gc-ease-out);
}
.ip-doc:hover,
.ip-doc:focus-visible {
    color: var(--gc-ink);
    border-color: rgba(1, 85, 153, .35);
    box-shadow: var(--gc-shadow-lift);
    transform: translateY(-2px);
}
.ip-doc__icon {
    position: relative;
    flex: none;
    display: grid;
    place-items: end center;
    width: 50px;
    height: 62px;
    padding-bottom: 9px;
    background: linear-gradient(160deg, var(--gc-brand), var(--gc-navy));
    clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%);
    border-radius: 6px;
}
.ip-doc__icon::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 32%;
    height: 26%;
    background: rgba(255, 255, 255, .35);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.ip-doc__ext {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
}
.ip-doc__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ip-doc__text strong {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--gc-navy);
    overflow-wrap: anywhere;
}
.ip-doc__text span {
    font-size: .86rem;
    color: var(--gc-ink-soft);
}
.ip-doc__action {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--gc-navy);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    transition: background-color .3s ease;
}
.ip-doc:hover .ip-doc__action { background: var(--gc-brand); }
.ip-doc__action svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* share rail: sticky beside the sheet on wide screens */
.ip-share {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    position: sticky;
    top: 104px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: calc(var(--gc-overlap) + 28px);
}
.ip-share[hidden] { display: none; }
.ip-share__btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--gc-line);
    border-radius: 50%;
    background: #fff;
    color: var(--gc-navy);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(2, 26, 51, .05);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .35s var(--gc-ease-out);
}
.ip-share__btn:hover,
.ip-share__btn:focus-visible {
    background: var(--gc-navy);
    border-color: var(--gc-navy);
    color: #fff;
    transform: translateY(-2px);
}
.ip-share__btn svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ip-share__btn svg.is-solid { fill: currentColor; stroke: none; }
/* tooltip from the accessible name, pointing away from the sheet */
.ip-share__btn::after {
    content: attr(aria-label);
    position: absolute;
    top: 50%;
    inset-inline-end: calc(100% + 12px);
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--gc-ink);
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-50%) translateX(var(--gc-tip-x, 6px));
    transition: opacity .2s ease, transform .3s var(--gc-ease-out);
    pointer-events: none;
}
[dir="rtl"] .ip-share__btn::after { --gc-tip-x: -6px; }
.ip-share__btn:hover::after,
.ip-share__btn:focus-visible::after {
    opacity: 1;
    --gc-tip-x: 0px;
}

.ip-toast {
    position: fixed;
    z-index: 1200;
    left: 50%;
    bottom: 32px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--gc-ink);
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    box-shadow: var(--gc-shadow-lift);
    opacity: 0;
    transform: translate(-50%, 16px);
    transition: opacity .3s ease, transform .45s var(--gc-ease-out);
    pointer-events: none;
}
.ip-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* reading progress: a gold line along the very top */
.ip-progress {
    position: fixed;
    z-index: 1100;
    top: 0;
    inset-inline: 0;
    height: 3px;
    pointer-events: none;
}
.ip-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gc-sand), #ffd166);
    transform: scaleX(var(--p, 0));
    transform-origin: left center;
}
[dir="rtl"] .ip-progress__bar {
    background: linear-gradient(270deg, var(--gc-sand), #ffd166);
    transform-origin: right center;
}

/* back to the parent listing */
.ip-backbar {
    grid-column: 2;
    margin-top: 22px;
}
.ip-back {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 18px;
    background: #fff;
    color: var(--gc-ink);
    box-shadow: var(--gc-shadow-rest);
    transition: box-shadow .4s var(--gc-ease-out), transform .4s var(--gc-ease-out);
}
.ip-back:hover,
.ip-back:focus-visible {
    color: var(--gc-ink);
    box-shadow: var(--gc-shadow-lift);
    transform: translateY(-2px);
}
.ip-back__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eef4fa;
    color: var(--gc-brand);
    transition: background-color .3s ease, color .3s ease, translate .45s var(--gc-ease-out);
}
.ip-back:hover .ip-back__icon {
    background: var(--gc-navy);
    color: #fff;
    translate: -4px 0;
}
[dir="rtl"] .ip-back:hover .ip-back__icon { translate: 4px 0; }
.ip-back__icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ip-back__text {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}
.ip-back__text small {
    font-size: .82rem;
    color: var(--gc-ink-soft);
}
.ip-back__text strong {
    font-size: 1.02rem;
    color: var(--gc-navy);
}

/* ============================================================================
   8. CONTENT PAGES — section directory
   ============================================================================ */
.ip-dir { margin-top: 8px; }
/* section landing: the directory rises into the band (hero_overlap).
   Doubled class: content_page.css loads after this file and resets
   .cp-article's margin. */
.cp-article.cp-article--landing {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--gc-overlap));
    padding-top: 0;
}
.cp-article--landing .ip-tile { box-shadow: var(--gc-shadow-rest); border-color: transparent; }
.cp-article--landing .ip-tile:hover,
.cp-article--landing .ip-tile:focus-visible { box-shadow: var(--gc-shadow-lift); }
.cp-block + .ip-dir,
.content-page__body:not(:empty) + .ip-dir { margin-top: clamp(48px, 6vw, 72px); }
.ip-dir__title {
    margin: 0 0 22px;
    font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
    font-weight: 700;
    color: var(--gc-navy);
}
.ip-dir__grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: clamp(14px, 1.8vw, 22px);
    margin: 0;
    padding: 0;
}
.ip-tile {
    --mx: 50%;
    --my: 50%;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    height: 100%;
    min-height: 156px;
    padding: 26px 26px 22px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--gc-line);
    background: #fff;
    color: var(--gc-ink);
    transition: transform .5s var(--gc-ease-out), box-shadow .5s var(--gc-ease-out), border-color .4s ease;
}
/* cursor spotlight (inner.js feeds --mx / --my) */
.ip-tile::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(340px circle at var(--mx) var(--my), rgba(3, 136, 232, .11), transparent 62%);
    opacity: 0;
    transition: opacity .45s ease;
}
/* CVI mark rising from the corner on hover */
.ip-tile::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 120px;
    aspect-ratio: 620 / 590;
    inset-inline-end: -26px;
    bottom: -34px;
    background: rgba(1, 85, 153, .06);
    -webkit-mask: var(--cvi-mark) center / contain no-repeat;
            mask: var(--cvi-mark) center / contain no-repeat;
    transform: rotate(-12deg) translateY(10px);
    transition: transform .8s var(--gc-ease-out), background-color .5s ease;
}
.ip-tile:hover,
.ip-tile:focus-visible {
    color: var(--gc-ink);
    border-color: rgba(1, 85, 153, .28);
    transform: translateY(-4px);
    box-shadow: var(--gc-shadow-lift);
}
.ip-tile:hover::before,
.ip-tile:focus-visible::before { opacity: 1; }
.ip-tile:hover::after {
    background-color: rgba(1, 85, 153, .1);
    transform: rotate(-4deg) translateY(-4px);
}
.ip-tile__title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.55;
    color: var(--gc-navy);
    overflow-wrap: anywhere;
}
.ip-tile__desc {
    margin-top: -12px;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--gc-ink-soft);
}
.ip-tile .ip-go { align-self: flex-end; }
.ip-tile:hover .ip-go,
.ip-tile:focus-visible .ip-go {
    background: var(--gc-navy);
    border-color: var(--gc-navy);
    color: #fff;
    translate: 4px 0;
}
[dir="rtl"] .ip-tile:hover .ip-go,
[dir="rtl"] .ip-tile:focus-visible .ip-go { translate: -4px 0; }

/* ============================================================================
   9. SEARCH RESULTS
   ============================================================================ */
.ip-results {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--gc-shadow-sheet);
}
.ip-results > li + li { border-top: 1px solid var(--gc-line); }
.ip-result {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 22px clamp(18px, 3vw, 36px);
    color: var(--gc-ink);
    transition: background-color .3s ease;
}
.ip-result:hover,
.ip-result:focus-visible { background: #f7fafd; color: var(--gc-ink); }
.ip-result__section {
    display: block;
    margin-bottom: 4px;
    font-size: .84rem;
    font-weight: 500;
    color: var(--gc-brand);
}
.ip-result__title {
    display: block;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.6;
}
.ip-result:hover .ip-result__title { color: var(--gc-brand); }
.ip-result__desc {
    display: block;
    margin-top: 6px;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--gc-ink-soft);
}
.ip-result:hover .ip-go {
    background: var(--gc-navy);
    border-color: var(--gc-navy);
    color: #fff;
}
.ip-results-note {
    margin: 0 0 18px;
    font-size: .98rem;
    color: var(--gc-ink-soft);
}
.ip-results-note strong { color: var(--gc-navy); }

/* ============================================================================
   10. SCROLL REVEAL
   inner.js adds .gc-reveal (only under html.gc-motion) and .gc-in when the
   element enters the viewport. Uses the individual `translate` property so
   card :hover transforms keep working.
   ============================================================================ */
.gc-reveal {
    opacity: 0;
    translate: 0 26px;
    transition:
        opacity .75s ease var(--gc-d, 0ms),
        translate .95s var(--gc-ease-out) var(--gc-d, 0ms);
}
.gc-reveal.gc-in {
    opacity: 1;
    translate: 0 0;
}

/* ============================================================================
   11. RESPONSIVE
   ============================================================================ */
@media (max-width: 1180px) {
    .ip-article { grid-template-columns: minmax(0, 1fr); }
    .ip-sheet,
    .ip-backbar { grid-column: 1; }
    .ip-sheet { grid-row: auto; }
    .ip-share {
        grid-column: 1;
        grid-row: auto;
        order: 2;
        position: static;
        justify-self: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 22px;
    }
    .ip-share__btn::after { display: none; }
    .ip-backbar { order: 3; }
    .ip-article { max-width: 920px; margin-inline: auto; }
}

@media (max-width: 1024px) {
    .ip-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ip-story--lead { grid-column: span 2; grid-row: auto; }
    .ip-story--lead .ip-story__link { min-height: 440px; }
}

@media (max-width: 760px) {
    .ip-entry__link {
        grid-template-columns: 70px minmax(0, 1fr);
        align-items: start;
        padding: 18px 18px;
    }
    .ip-stamp { min-height: 64px; padding-inline-end: 14px; }
    .ip-stamp__day { font-size: 1.7rem; }
    .ip-entry__aside {
        grid-column: 2;
        justify-content: flex-start;
    }
    .ip-entry__aside:not(:has(.ip-chip, .ip-thumb)) { display: none; }
    .ip-entry__aside .ip-go { display: none; }
    .ip-thumb { width: 64px; height: 64px; }
    .ip-entry__title { font-size: 1.02rem; }

    .ip-pager__pages { display: none; }
    .ip-pager__info { display: inline; order: 0; }
    .ip-pager { gap: 10px; }
    .ip-pager__step { height: 48px; padding: 0 18px; }
    .ip-pager__step:first-child { order: -1; }

    .ip-doc { flex-wrap: wrap; }
    .ip-doc__action { width: 100%; justify-content: center; }

    .hero-search { flex-direction: column; padding: 8px; }
    .hero-search button { width: 100%; height: 50px; }
}

@media (max-width: 640px) {
    .ip-stories { grid-template-columns: minmax(0, 1fr); }
    .ip-story--lead { grid-column: auto; }
    .ip-story--lead .ip-story__link { min-height: 380px; }
    .ip-story__body { padding: 18px 18px 20px; }

    .ip-sheet { border-radius: 18px; }
    .ip-figure,
    .ip-figure img { max-height: 420px; }

    .page-hero .breadcrumbs li[aria-current] { max-width: 22ch; }
    .page-hero__mark { width: 260px; inset-inline-end: -90px; }

    .ip-tile { min-height: 136px; padding: 22px 22px 18px; }
    .ip-result { grid-template-columns: minmax(0, 1fr); }
    .ip-result .ip-go { display: none; }
}

/* ============================================================================
   12. PRINT (the share rail offers "Print")
   Backgrounds don't print by default, so the band's white type would vanish:
   print the title dark on paper and drop the chrome.
   ============================================================================ */
@media print {
    .site-header,
    .site-footer,
    .back-to-top,
    .ip-share,
    .ip-toast,
    .ip-progress,
    .ip-backbar,
    .ip-pager,
    .page-hero__current,
    .page-hero__mark,
    .page-hero__tide { display: none; }
    /* page content that happens to use the class (see mysite.css) prints */
    main .site-header { display: block; }

    .page-hero,
    .page-hero--overlap {
        min-height: 0;
        padding: 0 0 16px;
        color: #000;
        background: none;
    }
    .page-hero__inner { opacity: 1; translate: none; padding: 0; }
    .page-hero__title,
    .page-hero .breadcrumbs,
    .page-hero .breadcrumbs a,
    .page-hero .breadcrumbs [aria-current="page"] { color: #000; }
    .hero-fact {
        color: #000;
        background: none;
        border-color: #999;
    }
    body.ip-paper main { background: none; }
    .ip-article,
    .ip-rise,
    .cp-article.cp-article--landing { margin-top: 0; }
    .ip-article { display: block; padding: 0; }
    .ip-sheet { box-shadow: none; border-radius: 0; }
    .ip-figure { background: none; }
    .ip-figure::before { display: none; }
    .ip-prose { padding: 16px 0 0; }
}

/* ============================================================================
   13. REDUCED MOTION — final states, no travel
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .page-hero__current { transition: none; }
    .page-hero__inner { translate: none; opacity: 1; }
    .page-hero__mark { translate: none; }
    .ip-story__link,
    .ip-story__media img,
    .ip-entry__link,
    .ip-tile,
    .ip-doc,
    .ip-back,
    .ip-go,
    .ip-share__btn,
    .ip-toast { transition: none; }
    .ip-story__link:hover,
    .ip-tile:hover,
    .ip-doc:hover,
    .ip-back:hover { transform: none; }
    .ip-story__link:hover .ip-story__media img { transform: none; }
}