/*! IGW Portfolio 0.1.1 (2026-09-21). Supersedes igwportfolio-0.1.0.css (2,304
bytes). Every rule of 0.1.0 is carried below unchanged, its own header line
included; the diff is this banner and one appended section.
WHAT WAS ADDED. The §4.4 image hover of the premium-polish instruction sheet
of 2026-09-21: "On @media (hover:hover) only: card image scales 1.03 inside
its clipped frame over 400 ms ease-out; a bottom gradient deepens from the
existing value by ~10%; play/arrow affordance translates up 2 px and
brightens. Reverses on leave." And its constraint: "Images must be inside an
overflow:hidden frame already (they are on the audited cards); do not add
frames."
THAT CONSTRAINT DECIDED THE SCOPE, AND IT CUT TWO OF THE THREE PLACES THE
SHEET NAMES. Every ![]()
larger than 80x60 on staging /films, /photography,
/news, /starship, / and an igw-media-library record page was read at
1440x900 on 2026-09-21 together with five levels of its ancestor chain and
each ancestor's computed `overflow`:
Films index cards span.igwch-thumb overflow:hidden, radius 2px YES
News / About cards span.igwch-thumb overflow:hidden YES
Films feature screen a.igwfilms-feature-screen overflow:hidden YES
Photography index a.igw2-media-archive-card no clipping ancestor NO
Media Library record div.igw2-article-inner no clipping ancestor NO
So:
* THE PHOTOGRAPHY INDEX IS DELIBERATELY NOT HERE. Its card has no frame
because the photograph IS the card: igwphotography 0.3.1 sets
`.igw2-media-archive-card{display:block!important;padding:0!important;
border:0!important;background:transparent!important;transform:none
!important}` and `.igw2-media-archive-photo{height:auto!important;
object-fit:contain!important}`, and the archive is a CSS `columns`
masonry. A 1.03 scale there has nothing to clip it, so it would grow into
the 28 px column gap and over its neighbours - and `transform:none
!important` on the card means the only way to land the rule at all would
be a second !important, fighting the page's own sheet. Giving the
photographs a frame is the one thing §4.4 forbids. This is a real gap
against the sheet and it is recorded rather than papered over: a hover on
/photography needs a frame first, which is a design decision, not a
stylesheet one.
* THE MEDIA LIBRARY TEMPLATE HAS NO PROJECT CARDS. The record page renders
one `img.igw2-article-media` as its subject, not a grid of cards, so there
is nothing on it for this rule to select.
* THE FILMS FEATURE SCREEN IS LEFT TO ITS OWN SHEET. igwfilms 0.1.0 already
implements the whole of §4.4 on it - a clipped frame, a hover scale, a
`::after` bottom gradient and `.igwfilms-play` lifting 2 px and
brightening - at `scale(1.018)` rather than 1.03, which is the right
number for an image 1265 px wide where 1.03 is a 38 px crop. Overriding it
from here would split one component's hover across two stylesheets for a
1.2% difference nobody asked for.
THE OTHER TWO THIRDS OF §4.4 DO NOT APPLY TO THESE CARDS, and saying so is
better than inventing them. `.igwch-thumb` has no bottom gradient to deepen
(igwchannel 0.2.1 gives it `aspect-ratio`, a `#05080b` ground and
`overflow:hidden`, and nothing else) and the card carries no play or arrow
affordance. "Deepens from the existing value" has no existing value here,
and adding a gradient and a glyph would be new furniture rather than polish.
THE HOMEPAGE IS NOT THIS FILE'S. Its film cards use the same `.igwch-card`
markup, and igwhomeart 0.1.2 already gives them a hover at scale(1.035) over
.6s from the page head, which is parsed after this site-head sheet and wins.
igwhomedesign 0.1.1 retunes them to 1.03 / 400 ms there. The two files agree
on the number and each owns one page.
MEASURED on staging /films at 1440x900 with this sheet swapped in: hovering
a card reports `matrix(1.03, 0, 0, 1.03, 0, 0)` on its thumbnail image and
the frame crops the extra 3%; leaving returns the transform to `none`; at
390x844 and in a touch context, where `matchMedia('(hover: hover)')` reports
false, the same approach leaves it at `none`. The §4.4 section at the foot
of this file carries the full numbers. */
/* IGW Portfolio 0.1.0. Existing photographs, motion, typography and gates own the page. */
[data-igw-portfolio-nav] .igw2-navlinks .igw2-navlink[aria-current="page"]{color:var(--_igw-2-0---color--text-primary);text-decoration:underline;text-underline-offset:8px;text-decoration-color:var(--_igw-2-0---color--accent)}
.igwportfolio-switcher{display:flex;flex-wrap:wrap;gap:8px;max-width:1320px;margin:0 auto 40px;padding:0 5vw}
.igwportfolio-switcher a{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border:1px solid var(--_igw-2-0---color--border-interactive);border-radius:100px;color:var(--_igw-2-0---color--text-primary);text-decoration:none;font-size:14px;background:var(--_igw-2-0---color--surface)}
.igwportfolio-switcher a[aria-current="page"]{color:var(--_igw-2-0---color--text-primary);border-color:var(--_igw-2-0---color--accent);background:var(--_igw-2-0---color--accent-fill)}
.igwportfolio-switcher a:hover{border-color:var(--_igw-2-0---color--text-primary)}
.igwch-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.igwch-filter{font:inherit;font-size:14px;min-height:44px;padding:10px 18px;color:var(--_igw-2-0---color--text-primary);background:var(--_igw-2-0---color--surface-elevated);border:1px solid var(--_igw-2-0---color--border-interactive);border-radius:100px;cursor:pointer}
.igwch-filter[aria-pressed="true"]{color:var(--_igw-2-0---color--background);background:var(--_igw-2-0---color--text-primary);border-color:var(--_igw-2-0---color--text-primary)}
.igwch-status{display:block;color:var(--_igw-2-0---color--text-muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
[data-igw-broadcast-state="live"] .igwch-status{color:var(--_igw-2-0---color--live)}
[data-igw-broadcast-state="upcoming"] .igwch-status{color:var(--_igw-2-0---color--warning)}
[data-igw-broadcast-state="replay"] .igwch-status{color:var(--_igw-2-0---color--success)}
.igwch-filter:focus-visible,.igwportfolio-switcher a:focus-visible{outline:2px solid var(--_igw-2-0---color--live);outline-offset:4px}
@media(max-width:767px){.igwportfolio-switcher{gap:6px;margin-bottom:28px;padding:0 20px}.igwportfolio-switcher a{font-size:13px;padding:9px 12px}}
.igwch-filters[hidden],.igwch-filter[hidden],.igwch-card[hidden]{display:none!important}
/* ==========================================================================
§4.4 IMAGE HOVER - added 0.1.1, 2026-09-21
==========================================================================
The transition sits on the image at all times so the scale reverses on
leave; the transform is applied only under `hover:hover`, so a touch device
- which reports `hover:none` - never enters the state and never has to be
tapped twice to leave it. 400 ms and the site's ease-out curve come from
igwmotiontokens-0.1.0.css, with the §3 value as the fallback.
THE SELECTOR IS `.igwch-grid .igwch-card ...` AND THE EXTRA CLASS IS LOAD
BEARING. Written the obvious way, `.igwch-card .igwch-thumb img` at
specificity (0,2,1), this rule LOSES on /films and /news and was measured
doing exactly that: igweditorialart 0.1.2, a page-head sheet, carries
`:scope main .igwch-thumb img { ... transform:none; transition:opacity .2s
ease }` at (0,2,2), so the image's computed transition read `opacity 0.2s`
and its hover transform read `none` with this stylesheet loaded and the rule
plainly present in it. Adding the grid class takes the base rule to (0,3,1)
and the hover rule to (0,4,1), which is the smallest change that wins.
`.igwch-grid` is the channel module's own container - igwchannel 0.2.1
builds every `.igwch-card` inside one - so it narrows nothing.
AND THE TRANSITION NAMES `opacity .2s ease` AS WELL AS transform, because
`transition` is a shorthand: winning the cascade with `transition: transform
400ms` alone would not add transform to igweditorialart's list, it would
REPLACE it and take the editorial layout's thumbnail fade away. The only
declaration this file takes from that rule is `transform` on hover, and only
on a pointer that can hover.
THAT CONSTRAINT DECIDED THE SCOPE, AND IT CUT TWO OF THE THREE PLACES THE
SHEET NAMES. Every ![]()
larger than 80x60 on staging /films, /photography,
/news, /starship, / and an igw-media-library record page was read at
1440x900 on 2026-09-21 together with five levels of its ancestor chain and
each ancestor's computed `overflow`:
Films index cards span.igwch-thumb overflow:hidden, radius 2px YES
News / About cards span.igwch-thumb overflow:hidden YES
Films feature screen a.igwfilms-feature-screen overflow:hidden YES
Photography index a.igw2-media-archive-card no clipping ancestor NO
Media Library record div.igw2-article-inner no clipping ancestor NO
* THE PHOTOGRAPHY INDEX IS DELIBERATELY NOT HERE. Its card has no frame
because the photograph IS the card: igwphotography 0.3.1 sets
`.igw2-media-archive-card{display:block!important;padding:0!important;
border:0!important;background:transparent!important;transform:none
!important}` and `.igw2-media-archive-photo{height:auto!important;
object-fit:contain!important}`, and the archive is a CSS `columns`
masonry. A 1.03 scale there has nothing to clip it, so it would grow into
the 28 px column gap and over its neighbours - and `transform:none
!important` on the card means the only way to land the rule at all would
be a second !important, fighting the page's own sheet. Giving the
photographs a frame is the one thing §4.4 forbids. This is a real gap
against the sheet and it is recorded rather than papered over: a hover on
/photography needs a frame first, which is a design decision, not a
stylesheet one.
* THE MEDIA LIBRARY TEMPLATE HAS NO PROJECT CARDS. The record page renders
one `img.igw2-article-media` as its subject, not a grid of cards, so there
is nothing on it for this rule to select.
* THE FILMS FEATURE SCREEN IS LEFT TO ITS OWN SHEET. igwfilms 0.1.0 already
implements the whole of §4.4 on it - a clipped frame, a hover scale, a
`::after` bottom gradient and `.igwfilms-play` lifting 2 px and
brightening - at `scale(1.018)` rather than 1.03, which is the right
number for an image 1265 px wide where 1.03 is a 38 px crop. Overriding it
from here would split one component's hover across two stylesheets for a
1.2% difference nobody asked for.
THE OTHER TWO THIRDS OF §4.4 DO NOT APPLY TO THESE CARDS, and saying so is
better than inventing them. `.igwch-thumb` has no bottom gradient to deepen
(igwchannel 0.2.1 gives it `aspect-ratio`, a `#05080b` ground and
`overflow:hidden`, and nothing else) and the card carries no play or arrow
affordance. "Deepens from the existing value" has no existing value here,
and adding a gradient and a glyph would be new furniture rather than polish.
THE HOMEPAGE IS NOT THIS FILE'S. Its film cards use the same `.igwch-card`
markup, and igwhomeart 0.1.2 already gives them a hover at scale(1.035) over
.6s from the page head. igwhomedesign 0.1.1 retunes them to 1.03 / 400 ms
there, at specificity (1,6,1), so it outranks both that sheet and this one.
The two files agree on the number and each owns one page.
REDUCED MOTION is belt and braces: the rules below turn the transform off,
and igwfinish 0.1.5 independently carries
`@media (prefers-reduced-motion: reduce){ .igwch-card img {transition:none
!important;transform:none!important} }`, which nothing here can outrank.
MEASURED on staging /films at 1440x900 with this sheet swapped in: the
thumbnail image's computed transition reads
`transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s` - transform
added, the editorial sheet's opacity fade kept; hovering a card reports
`matrix(1.03, 0, 0, 1.03, 0, 0)`; the scaled image's box grows from
406.41 x 228.59 to 418.60 x 235.45 while the frame it sits in stays
406.41 x 228.59 with `overflow: hidden`, so the extra 3% is cropped by the
frame rather than painted over the card - which is the whole reason §4.4
requires an existing clipped frame; leaving returns the transform to `none`;
at 390x844 and in a touch context, where `matchMedia('(hover: hover)')`
reports false, the same approach leaves it at `none`. */
.igwch-grid .igwch-card .igwch-thumb img {
transition: transform 400ms var(--igw-ease-out, cubic-bezier(.2, .7, .2, 1)), opacity .2s ease;
}
@media (hover: hover) {
.igwch-grid .igwch-card:hover .igwch-thumb img { transform: scale(1.03); }
}
/* §0: "prefers-reduced-motion: reduce -> every effect in this sheet becomes an
instant state change." A scale is not a state anyone asked for, so §4.4 says
plainly "reduced motion: no transform", and that is what this does rather
than making it instant. */
@media (prefers-reduced-motion: reduce) {
.igwch-grid .igwch-card .igwch-thumb img { transition: none; }
.igwch-grid .igwch-card:hover .igwch-thumb img { transform: none; }
}