/* /features (features.html): the Features page. Built as /features-draft beside the earlier page from 30 September
2026 and made the page itself on 2 October 2026 (owner).
Loaded after world-interior.css; every rule is scoped under body.fd-page.
Three reading depths on one page (1 October 2026, Oli and Nikhil):
1. Skim. Every group shows its header tile (number, heading, lead) and its feature titles with their term tags,
as a list of tabs.
2. Focus. Beside the list, one panel: the selected feature's explanation and example scenario, and the group's
animated diagram on an ink tile, captioned with that feature. One feature at a time; the first by default.
3. Everything. "Show all details" (in the title band and the rail) opens every explanation and scenario in place.
The two script modes are classes on : .fd-focus (one at a time) and .fd-all. Without the script neither is set
and the page is in the "everything" layout, so no text depends on JavaScript. A hidden explanation is
hidden="until-found" where the browser supports it, so find-in-page still reaches it.
In focus mode each feature unit (.fd-card, id gNfM) is display:contents: its head (the tab) and its main (the panel
text) become cells of the group's grid, every main sharing one cell. The group's width (a container query on
.fd-groups) picks the arrangement: list | text | diagram when wide, the list above the panel when medium, and on a
phone each explanation opens under its own title.
The four soft Superstrate tones colour the header tiles only; every tab, tag and scenario is styled alike; gold is the
one accent; grain stays on the title band (world-interior.css). Below 1101px the rail becomes a sticky Contents
control. Print shows everything. */
/* ------------------------------------------------------------------ tokens */
.fd-page{
--fd-t:var(--frame-inset);
--fd-rail-w:clamp(250px,18vw,310px);
/* The Menu pill's resting box (right 28px, about 104px wide) plus a gap: no line of the groups column runs under it. */
--fd-pill-clear:144px;
--fd-ink:#1c1b1f;
--fd-gold:#ffd64e;
--fd-gold-deep:#e2b400;
--fd-hair:rgba(28,27,31,.12);
--fd-ease:cubic-bezier(.16,1,.3,1);
}
/* -------------------------------------------------------------------- band */
.fd-page .fd-band{
min-height:0;justify-content:flex-end;
padding-block:calc(var(--wi-header) - var(--frame-inset) + clamp(10px,2.2vh,28px)) clamp(34px,5vh,48px);
}
.fd-page .fd-band-inner{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px clamp(32px,5vw,96px)}
.fd-page .fd-band .fd-title{margin:0;max-width:none;font-size:clamp(44px,4.4vw,84px);line-height:1.02;letter-spacing:-.045em}
.fd-page .fd-band-side{display:grid;gap:10px;max-width:46ch;padding-bottom:.3em}
.fd-page .fd-band-lead{margin:0;font-size:clamp(18px,1.3vw,24px);line-height:1.4;letter-spacing:-.01em;font-style:italic;color:#fff}
.fd-page .fd-band-index{margin:0;font-size:clamp(16px,1.12vw,20px);line-height:1.5;color:var(--wi-band-muted)}
/* The "Show all details" switch (features.js unhides it and writes its label). */
.fd-page .fd-all-toggle{
display:inline-flex;align-items:center;gap:10px;justify-self:start;min-height:44px;margin-top:6px;padding:9px 18px 9px 14px;
border:0;border-radius:999px;background:#fffbf2;color:var(--fd-ink);
font:inherit;font-size:15px;line-height:1.2;font-weight:600;letter-spacing:-.005em;cursor:pointer;
transition:background-color .2s,transform .2s var(--fd-ease);
}
.fd-page .fd-all-toggle:hover{background:#fff}
.fd-page .fd-all-toggle:active{transform:scale(.98)}
.fd-page .fd-all-toggle:focus-visible{outline:2px solid var(--fd-gold);outline-offset:3px}
/* Two stacked bars (one at a time) that open into four (everything). */
.fd-page .fd-all-icon{position:relative;flex:0 0 auto;width:16px;height:14px}
.fd-page .fd-all-icon::before,.fd-page .fd-all-icon::after{
content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
box-shadow:0 4px 0 currentColor;transition:box-shadow .3s var(--fd-ease),transform .3s var(--fd-ease);
}
.fd-page .fd-all-icon::before{top:1px}
.fd-page .fd-all-icon::after{top:9px}
.fd-page .fd-all-icon::before{box-shadow:none}
.fd-page .fd-all-icon::after{box-shadow:none}
html.fd-all .fd-page .fd-all-icon::before{box-shadow:0 4px 0 currentColor}
html.fd-all .fd-page .fd-all-icon::after{box-shadow:0 -4px 0 currentColor}
/* The rail's copy of the switch: a quiet row under the index title. */
.fd-page .fd-rail .fd-all-toggle{
min-height:36px;margin:0 4px 10px;padding:6px 12px 6px 10px;background:rgba(28,27,31,.06);font-size:13.5px;
}
.fd-page .fd-rail .fd-all-toggle:hover{background:rgba(255,214,78,.35)}
.fd-page .fd-rail .fd-all-toggle:focus-visible{outline-color:var(--fd-ink);outline-offset:1px}
/* ------------------------------------------------------------------ layout */
.fd-page .world-interior-main{background:#f4f1ea}
.fd-page .fd-layout{
display:grid;grid-template-columns:var(--fd-rail-w) minmax(0,1fr);column-gap:clamp(28px,3vw,56px);align-items:start;
padding:clamp(18px,2vw,28px) max(var(--wi-gutter),var(--fd-pill-clear)) 0 var(--frame-inset);
}
.fd-page .fd-groups{min-width:0;max-width:1240px;container:fdg / inline-size}
/* -------------------------------------------------------------------- rail */
.fd-page .fd-rail{
position:sticky;top:var(--fd-t);
/* Clears the Pause pill in the bottom-left corner. */
height:calc(100svh - 2 * var(--fd-t) - 52px);
}
.fd-page .fd-contents{display:none}
.fd-page .fd-rail-panel{
display:flex;flex-direction:column;height:100%;box-sizing:border-box;
padding:20px 10px 12px 12px;border-radius:var(--frame-radius);
background:#fff;color:var(--fd-ink);box-shadow:inset 0 0 0 1px var(--fd-hair);
}
.fd-page .fd-rail-title{
margin:0 8px 12px;font-size:12px;line-height:1.3;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:rgba(28,27,31,.58);
}
.fd-page .fd-rail-groups{
flex:1 1 auto;min-height:0;margin:0;padding:0 4px 18px 0;list-style:none;
overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(28,27,31,.22) transparent;
-webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);mask-image:linear-gradient(#000 calc(100% - 26px),transparent);
}
.fd-page .fd-rail-group{border-top:1px solid var(--fd-hair);padding:3px 0 5px}
.fd-page .fd-rail-group:first-child{border-top:0}
.fd-page .fd-rail-row{display:flex;align-items:center;gap:2px}
.fd-page .fd-rail-glink{
flex:1 1 auto;min-width:0;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;column-gap:8px;
min-height:40px;padding:6px 8px;border-radius:14px;
font-size:15px;line-height:1.25;font-weight:600;letter-spacing:-.01em;color:rgba(28,27,31,.78);text-decoration:none;
transition:background-color .2s,color .2s;
}
.fd-page .fd-rail-glink:hover{background:rgba(28,27,31,.05);color:var(--fd-ink);text-decoration:none}
.fd-page .fd-rail-num{font-size:12px;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums;color:rgba(28,27,31,.45);transition:color .2s}
.fd-page .fd-rail-group.is-active .fd-rail-glink{color:var(--fd-ink)}
.fd-page .fd-rail-group.is-active .fd-rail-num{color:var(--fd-ink)}
.fd-page .fd-rail-toggle{
flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:14px;
background:transparent;color:rgba(28,27,31,.5);transition:background-color .2s,color .2s;
}
.fd-page .fd-rail-toggle:hover{background:rgba(28,27,31,.05);color:var(--fd-ink)}
.fd-page .fd-rail-toggle svg{transition:transform .35s var(--fd-ease)}
.fd-page .fd-rail-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Per-group progress: one segment per feature, filled once that feature has been opened or read (--f, 0 or 1). */
.fd-page .fd-rail-meter{display:flex;gap:3px;height:3px;margin:1px 10px 5px 40px}
.fd-page .fd-rail-meter i{position:relative;flex:1;overflow:hidden;border-radius:2px;background:rgba(28,27,31,.1)}
.fd-page .fd-rail-meter i::after{
content:"";position:absolute;inset:0;background:var(--fd-gold-deep);transform-origin:left;transform:scaleX(var(--f,0));
transition:transform .5s var(--fd-ease);
}
.fd-page .fd-rail-fwrap{position:relative;display:grid;grid-template-rows:1fr;margin-left:30px;transition:grid-template-rows .45s var(--fd-ease)}
.fd-page .fd-rail-fwrap::before{content:"";position:absolute;left:1px;top:6px;bottom:10px;width:1px;background:var(--fd-hair)}
.fd-page .fd-rail-features{min-height:0;overflow:hidden;margin:0;padding:3px 0 6px;list-style:none;transition:visibility 0s linear .45s}
/* Shown at once when a group opens; hidden only once its fold has closed. */
.fd-page .fd-rail-group.is-open .fd-rail-features{transition-delay:0s}
.fd-page .fd-rail-features a{
display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:4px;
padding:6px 8px 6px 14px;border-radius:12px;
font-size:13.5px;line-height:1.35;color:rgba(28,27,31,.68);text-decoration:none;transition:color .2s,background-color .2s;
}
.fd-page .fd-rail-features a:hover{color:var(--fd-ink);background:rgba(28,27,31,.05);text-decoration:none}
.fd-page .fd-rail-features a[aria-current]{color:var(--fd-ink);background:rgba(255,214,78,.3)}
.fd-page .fd-rail-fnum{padding-top:1px;font-size:11.5px;font-variant-numeric:tabular-nums;color:rgba(28,27,31,.45)}
.fd-page .fd-rail-features a[aria-current] .fd-rail-fnum{color:var(--fd-ink);font-weight:700}
/* The moving marker: a 1px-tall bar scaled to the active entry's height and slid to its top (compositor only). */
.fd-page .fd-rail-marker{
position:absolute;left:0;top:0;width:3px;height:1px;border-radius:2px;background:var(--fd-gold-deep);
transform-origin:0 0;transform:translateY(var(--my,0px)) scaleY(var(--mh,0));opacity:0;
transition:transform .45s var(--fd-ease),opacity .25s;
}
.fd-page .fd-rail-group.is-active .fd-rail-marker{opacity:1}
.fd-page .fd-rail-panel :is(a,button):focus-visible{outline:2px solid var(--fd-ink);outline-offset:-2px}
.fd-page .fd-rail-demo{flex:0 0 auto;margin:12px 4px 2px;justify-content:space-between;gap:16px}
/* Collapsed groups (script only): the list folds to zero rows and leaves the tab order. */
html.fd-js .fd-page .fd-rail-group:not(.is-open) .fd-rail-fwrap{grid-template-rows:0fr}
html.fd-js .fd-page .fd-rail-group:not(.is-open) .fd-rail-features{visibility:hidden}
/* ------------------------------------------------------------------ groups */
/* Four soft tones from the Superstrate palette (butter gold, warm cream, stone, ink), for the header tiles only. */
.fd-page [data-g="1"],.fd-page [data-g="5"]{--tone:#ffe7a0;--tone-on:#1c1b1f;--tone-soft:rgba(28,27,31,.74)}
.fd-page [data-g="2"],.fd-page [data-g="6"]{--tone:#f2eadb;--tone-on:#1c1b1f;--tone-soft:rgba(28,27,31,.74)}
.fd-page [data-g="3"],.fd-page [data-g="7"]{--tone:#e4e0d6;--tone-on:#1c1b1f;--tone-soft:rgba(28,27,31,.74)}
.fd-page [data-g="4"],.fd-page [data-g="8"]{--tone:#1e1e1a;--tone-on:#f6f3ec;--tone-soft:rgba(246,243,236,.78)}
/* The "everything" arrangement (no script, and Show all details): the header tile across the top, every feature unit
as a white tile down the left, the diagram pinned beside them. */
.fd-page .fd-group{
--tile-r:18px;--tile-pad:clamp(18px,1.5vw,24px);--foot:#f7f2e6;--gap:14px;
position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gap);row-gap:0;align-items:start;
margin-bottom:clamp(40px,4vw,64px);
/* The groups column never runs under the Menu pill, so a group can land close to the top of the window. */
scroll-margin-top:calc(var(--fd-t) + 10px);
}
.fd-page .fd-group:last-child{margin-bottom:clamp(36px,3.5vw,56px)}
/* Beats the interior pages' main [id] anchor offset (104px), which is sized for content under the Menu pill. */
.fd-page main .fd-group[id]{scroll-margin-top:calc(var(--fd-t) + 10px)}
.fd-page .fd-plate-cell,.fd-page .fd-cards{display:contents}
/* The header tile: number, heading and lead in one row when there is room. */
.fd-page .fd-plate{
grid-column:1 / -1;grid-row:1;box-sizing:border-box;position:relative;isolation:isolate;margin-bottom:var(--gap);
display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(18px,2vw,36px);align-items:start;
padding:var(--tile-pad) calc(var(--tile-pad) + 4px);border-radius:var(--tile-r);
background:var(--tone);color:var(--tone-on);
outline:3px solid transparent;outline-offset:-3px;
}
.fd-page .fd-plate-head{display:flex;align-items:flex-end}
/* The number ties the tile to its line in the index. The odometer markup rests on the group's own digit. */
.fd-page .fd-num{
--roll:calc(var(--gi,1) - 1);
display:flex;margin:0;max-width:none;
font-size:clamp(36px,2.9vw,52px);line-height:.9;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.fd-page [data-g="1"]{--gi:1}.fd-page [data-g="2"]{--gi:2}.fd-page [data-g="3"]{--gi:3}.fd-page [data-g="4"]{--gi:4}
.fd-page [data-g="5"]{--gi:5}.fd-page [data-g="6"]{--gi:6}.fd-page [data-g="7"]{--gi:7}.fd-page [data-g="8"]{--gi:8}
.fd-page .fd-num-tens,.fd-page .fd-num-ones{display:block;height:1em;overflow:hidden}
.fd-page .fd-num-strip{display:block;transform:translateY(calc(var(--roll) * -1em))}
.fd-page .fd-num-strip span{display:block;height:1em}
/* The group's index name already sits in the rail beside it: in the tile it stays for screen readers only. */
.fd-page .fd-plate-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fd-page .fd-plate .fd-plate-title{margin:0;max-width:22ch;font-size:clamp(24px,1.95vw,34px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance;color:inherit}
.fd-page .fd-plate .fd-group-lead{margin:2px 0 0;max-width:44em;font-size:clamp(15.5px,1vw,17px);line-height:1.5;color:var(--tone-soft)}
/* The diagram tile, pinned beside its group while the group is read. */
.fd-page .fd-art{
grid-column:2;grid-row:2 / span 7;box-sizing:border-box;position:sticky;top:calc(var(--fd-t) + 8px);overflow:hidden;
display:flex;flex-direction:column;padding:clamp(12px,1.1vw,18px);border-radius:var(--tile-r);
background:radial-gradient(70% 55% at 50% 58%,rgba(255,214,78,.16),transparent 72%),#1c1b1f;
height:clamp(300px,29vw,440px);
}
.fd-page [data-g="4"] .fd-art,.fd-page [data-g="8"] .fd-art{background:radial-gradient(70% 55% at 50% 58%,rgba(255,214,78,.16),transparent 72%),#27262b}
.fd-page .fd-art-frame{position:relative;flex:1 1 auto;min-height:0;width:100%;overflow:hidden}
.fd-page .fd-art-media{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
/* Each newly selected feature is answered with one yellow scan line across the window (features.js). */
.fd-page .fd-art-frame::after{
content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:linear-gradient(transparent 47%,rgba(255,215,0,.85) 50%,transparent 53%);
}
.fd-page .fd-art-frame.is-pulse::after{animation:fd-scan .9s var(--fd-ease)}
@keyframes fd-scan{0%{opacity:1;transform:translateY(-52%)}100%{opacity:0;transform:translateY(52%)}}
/* The live caption: the selected feature, named under its group's diagram (features.js writes it). */
.fd-page .fd-art-caption{
flex:0 0 auto;display:flex;align-items:baseline;gap:10px;margin:10px 4px 2px;min-height:2.6em;
font-size:14.5px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:#f6f3ec;
}
.fd-page .fd-art-caption b{flex:0 0 auto;padding:2px 8px;border-radius:999px;background:#ffd64e;color:#1c1b1f;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.fd-page .fd-art-caption span{transition:opacity .35s,transform .45s var(--fd-ease)}
.fd-page .fd-art-caption.is-swap span{opacity:0;transform:translateY(6px)}
/* ------------------------------------------------------------ feature units */
/* The "everything" unit: one white tile, all alike, the example scenario as its tinted foot. */
.fd-page .fd-card{
grid-column:1;box-sizing:border-box;position:relative;
display:flex;flex-direction:column;margin-bottom:12px;
padding:var(--tile-pad) var(--tile-pad) 0;border-radius:var(--tile-r);
background:#fff;box-shadow:inset 0 0 0 1px rgba(28,27,31,.07),0 16px 32px -26px rgba(28,27,31,.3);
scroll-margin-top:calc(var(--fd-t) + 10px);
outline:2px solid transparent;outline-offset:-2px;
}
.fd-page .fd-cards > .fd-note{grid-column:1;margin:2px var(--tile-pad) 12px}
.fd-page .fd-card:focus{outline:none}
.fd-page .fd-card-head{position:relative;margin-bottom:12px}
.fd-page .fd-card-num{
display:inline-flex;margin:0 0 10px;padding:2px 9px;border-radius:999px;
font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;
background:#ffd64e;color:#1c1b1f;transition:background-color .3s,color .3s;
}
.fd-page .fd-card .fd-card-title{
margin:0 0 10px;font-size:clamp(19px,1.35vw,23px);line-height:1.18;letter-spacing:-.025em;text-wrap:balance;
text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:.3em;text-underline-offset:-.12em;text-decoration-skip-ink:none;
transition:text-decoration-color .4s,color .2s;
}
/* The tab (features.js wraps each title's words in it): a plain button whose hit area covers the whole head. */
.fd-page .fd-tab{
display:inline;margin:0;padding:0;border:0;background:none;color:inherit;
font:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;text-wrap:inherit;cursor:pointer;
}
.fd-page .fd-tab::after{content:"";position:absolute;inset:0;border-radius:14px}
.fd-page .fd-tab:focus{outline:none}
.fd-page .fd-tab:focus-visible::after{outline:2px solid var(--fd-ink);outline-offset:-2px}
.fd-page .fd-card-main{flex:1 1 auto;display:flex;flex-direction:column}
.fd-page .fd-card-body{margin-bottom:18px}
.fd-page .fd-card-body p{max-width:66ch;margin:0 0 .6em;font-size:clamp(15.5px,.98vw,17px);line-height:1.55;color:#2c2b2f}
.fd-page .fd-card-body p:last-child{margin-bottom:0}
/* The scenario is the tile's own tinted foot, flush to its edges: part of the unit, not a box inside it. */
.fd-page .fd-scenario{
margin:auto calc(-1 * var(--tile-pad)) 0;padding:13px var(--tile-pad) 16px;
border-radius:0 0 var(--tile-r) var(--tile-r);background:var(--foot);color:#34332e;
}
.fd-page .fd-scenario-label{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:11.5px;line-height:1.3;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#1c1b1f}
.fd-page .fd-scenario-label::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#e2b400}
.fd-page .fd-scenario p:last-child{max-width:66ch;margin:0;font-size:clamp(14.5px,.92vw,16px);line-height:1.5}
.fd-page .fd-note{max-width:66ch;font-size:14px;line-height:1.5;font-style:italic;color:#55574e}
/* A browser without hidden="until-found" gets a plain hidden attribute: honour it over the display rules here. */
.fd-page .fd-card-main[hidden]:not([hidden="until-found"]){display:none}
/* Landing: the unit a link arrives on (class from features.js; :target without the script). */
.fd-page .fd-card.is-landed,
html:not(.fd-js) .fd-page .fd-card:target{outline-color:#ffd700}
.fd-page .fd-card.is-landed .fd-card-title,
html:not(.fd-js) .fd-page .fd-card:target .fd-card-title{text-decoration-color:#ffd700}
.fd-page .fd-group:focus{outline:none}
.fd-page .fd-group.is-landed .fd-plate{animation:fd-land 2.4s var(--fd-ease)}
@keyframes fd-land{0%,35%{outline-color:#ffd700}100%{outline-color:rgba(255,215,0,0)}}
/* The "everything" arrangement on a narrow column: one stack, the diagram under the header tile. */
@container fdg (max-width:699px){
.fd-page .fd-group{grid-template-columns:minmax(0,1fr)}
.fd-page .fd-art{grid-column:1;grid-row:auto;position:relative;top:auto;height:clamp(280px,70cqi,400px);margin-bottom:12px}
}
/* ---------------------------------------------------------- one at a time */
/* Focus mode, narrowest first: a phone reads the group as one stack (header tile, diagram, then the list), and the
selected feature's explanation opens under its own title. Each unit is display:contents, so its head and main are
cells of the group's grid; only one main per group is ever not hidden. */
html.fd-focus .fd-page .fd-group{grid-template-columns:minmax(0,1fr)}
html.fd-focus .fd-page .fd-card{display:contents}
html.fd-focus .fd-page .fd-art{grid-column:1;grid-row:auto;position:relative;top:auto;height:clamp(260px,64cqi,380px);margin-bottom:12px}
html.fd-focus .fd-page .fd-cards > .fd-note{grid-column:1;grid-row:auto;margin:6px 4px 0}
/* The tab: number beside the title, the term tags under it. */
html.fd-focus .fd-page .fd-card-head{
grid-column:1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;
margin:0 0 2px;padding:10px 14px 11px 12px;border-radius:14px;
transition:background-color .25s,box-shadow .25s;
scroll-margin-top:calc(var(--fd-t) + 10px);
}
html.fd-focus .fd-page .fd-card-head:hover{background:rgba(255,255,255,.6)}
html.fd-focus .fd-page .fd-card-num{grid-column:1;grid-row:1 / span 2;margin:1px 0 0;background:rgba(28,27,31,.07);color:var(--fd-ink)}
html.fd-focus .fd-page .fd-card .fd-card-title{
grid-column:2;margin:0 0 6px;font-size:clamp(16.5px,1.1vw,18.5px);line-height:1.25;letter-spacing:-.018em;text-wrap:pretty;color:rgba(28,27,31,.74);
}
/* The selected tab: a white tile, its number inked. */
html.fd-focus .fd-page .fd-card.is-selected .fd-card-head{background:#fff;box-shadow:inset 0 0 0 1px rgba(28,27,31,.07),0 14px 28px -22px rgba(28,27,31,.4)}
html.fd-focus .fd-page .fd-card.is-selected .fd-card-num{background:#1c1b1f;color:#ffd64e}
html.fd-focus .fd-page .fd-card.is-selected .fd-card-title{color:var(--fd-ink)}
/* The panel text: the selected feature's explanation and scenario on a white tile. */
html.fd-focus .fd-page .fd-card-main{grid-column:1;min-width:0}
html.fd-focus .fd-page .fd-card-main:not([hidden]){
box-sizing:border-box;margin:0 0 12px;padding:var(--tile-pad) var(--tile-pad) 0;border-radius:var(--tile-r);
background:#fff;box-shadow:inset 0 0 0 1px rgba(28,27,31,.07),0 16px 32px -26px rgba(28,27,31,.3);
}
html.fd-focus .fd-page .fd-card-main[hidden]{align-self:start;margin:0;padding:0}
/* The change of feature: the new text fades up (no motion under reduced motion; see below). */
html.fd-focus .fd-page .fd-card-main.is-enter > *{animation:fd-enter .34s var(--fd-ease) both}
html.fd-focus .fd-page .fd-card-main.is-enter > .fd-scenario{animation-delay:.05s}
@keyframes fd-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Landing in focus mode: the tab carries the gold ring. */
html.fd-focus .fd-page .fd-card.is-landed .fd-card-head{outline:2px solid #ffd700;outline-offset:-2px}
html.fd-focus .fd-page .fd-card.is-landed .fd-card-title{text-decoration-color:transparent}
/* Medium: the list across the width, then the panel (diagram beside the text). */
@container fdg (min-width:560px){
html.fd-focus .fd-page .fd-group{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
html.fd-focus .fd-page .fd-card-head{grid-column:1 / -1}
html.fd-focus .fd-page .fd-card:nth-child(1) .fd-card-head{grid-row:2}
html.fd-focus .fd-page .fd-card:nth-child(2) .fd-card-head{grid-row:3}
html.fd-focus .fd-page .fd-card:nth-child(3) .fd-card-head{grid-row:4}
html.fd-focus .fd-page .fd-card:nth-child(4) .fd-card-head{grid-row:5}
html.fd-focus .fd-page .fd-card:nth-child(5) .fd-card-head{grid-row:6}
html.fd-focus .fd-page .fd-cards > .fd-note{grid-column:1 / -1;grid-row:7;margin:4px 14px 10px}
html.fd-focus .fd-page .fd-art{grid-column:1;grid-row:8;align-self:stretch;height:auto;min-height:340px;margin:8px 0 0}
html.fd-focus .fd-page .fd-card-main{grid-column:2;grid-row:8}
html.fd-focus .fd-page .fd-card-main:not([hidden]){align-self:stretch;margin:8px 0 0}
}
/* Wide: list | text | diagram, the whole group about one window tall. */
@container fdg (min-width:880px){
html.fd-focus .fd-page .fd-group{
grid-template-columns:minmax(0,1.1fr) minmax(0,1.12fr) minmax(0,.8fr);grid-template-rows:auto repeat(5,auto) 1fr;
}
html.fd-focus .fd-page .fd-card-head{grid-column:1}
html.fd-focus .fd-page .fd-cards > .fd-note{grid-column:1;grid-row:7;margin:6px 14px 0}
html.fd-focus .fd-page .fd-art{grid-column:3;grid-row:2 / -1;min-height:clamp(380px,32cqi,470px);margin:0}
html.fd-focus .fd-page .fd-card-main{grid-column:2;grid-row:2 / -1}
html.fd-focus .fd-page .fd-card-main:not([hidden]){margin:0}
}
/* The header tile stacks when the column is narrow. */
@container fdg (max-width:779px){
.fd-page .fd-plate{grid-template-columns:auto minmax(0,1fr);row-gap:12px}
.fd-page .fd-plate .fd-group-lead{grid-column:1 / -1}
}
@container fdg (max-width:459px){
.fd-page .fd-plate{grid-template-columns:minmax(0,1fr)}
.fd-page .fd-plate .fd-group-lead{grid-column:1}
}
/* --------------------------------------------------- the Contents control */
/* 1 October 2026 (phones and tablets): a slim ink bar, the Menu pill's height and corner, top left beside it: the index
icon, the group in view (number and name) and a gold hairline for the reader's place in the 39 features. It opens the
index under it across the width, over a scrim; a tap on the scrim, Escape or a chosen entry closes it. The Pause pill
(bottom left) is never covered by the bar. */
@media (max-width:1100px){
/* The bar is centred on the Menu pill (top 24px, 50px tall). */
.fd-page{--fd-bar-top:25px;--fd-bar-h:48px;--fd-bar-r:16px;--fd-pill-room:166px}
.fd-page .fd-layout{display:block;padding:0 var(--wi-gutter)}
/* Without the script: the full list as a static block before the groups. */
.fd-page .fd-rail{position:static;height:auto;margin:8px 0 18px}
.fd-page .fd-rail-groups{overflow:visible;-webkit-mask-image:none;mask-image:none}
.fd-page .fd-rail-demo{align-self:flex-start}
/* With the script: the sticky bar. Its right edge stops short of the Menu pill. */
html.fd-js .fd-page .fd-rail{
position:sticky;top:var(--fd-bar-top);z-index:30;width:fit-content;max-width:calc(100% + var(--wi-gutter) - var(--fd-pill-room));
margin:8px 0 18px;
}
html.fd-js .fd-page .fd-contents{
position:relative;display:flex;align-items:center;gap:10px;box-sizing:border-box;height:var(--fd-bar-h);max-width:100%;
padding:0 16px 0 15px;border:0;border-radius:var(--fd-bar-r);overflow:hidden;
background:var(--fd-ink);color:#f6f3ec;box-shadow:0 12px 28px -10px rgba(28,27,31,.45);text-align:left;cursor:pointer;
}
html.fd-js .fd-page .fd-contents-icon{flex:0 0 auto;color:rgba(246,243,236,.7)}
html.fd-js .fd-page .fd-contents-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.fd-js .fd-page .fd-contents-num{
flex:0 0 auto;padding:2px 7px;border-radius:999px;background:var(--fd-gold);color:var(--fd-ink);
font-size:12px;line-height:1.35;font-weight:700;font-variant-numeric:tabular-nums;
}
html.fd-js .fd-page .fd-contents-now{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
html.fd-js .fd-page .fd-contents-chev{flex:0 0 auto;margin-left:2px;color:rgba(246,243,236,.7);transition:transform .3s var(--fd-ease)}
html.fd-js .fd-page .fd-contents[aria-expanded="true"] .fd-contents-chev{transform:rotate(180deg)}
html.fd-js .fd-page .fd-contents:focus-visible{outline:2px solid #ffd700;outline-offset:3px}
/* The reader's place: a 2px track along the foot of the bar, filled in gold (features.js sets --fd-p). */
html.fd-js .fd-page .fd-contents-progress{position:absolute;left:15px;right:15px;bottom:8px;height:2px;border-radius:2px;background:rgba(246,243,236,.14);overflow:hidden}
html.fd-js .fd-page .fd-contents-progress::after{
content:"";position:absolute;inset:0;background:var(--fd-gold);transform-origin:left;transform:scaleX(var(--fd-p,0));
transition:transform .5s var(--fd-ease);
}
/* The index: under the bar, as wide as the page's column allows, over a scrim that dims the page. */
html.fd-js .fd-page .fd-rail.is-open::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(28,27,31,.34)}
html.fd-js .fd-page .fd-rail-panel{
display:none;position:absolute;left:0;top:calc(100% + 8px);
width:min(560px,calc(100vw - 2 * var(--wi-gutter)));height:auto;max-height:calc(100svh - var(--fd-bar-top) - var(--fd-bar-h) - 28px);
box-shadow:inset 0 0 0 1px var(--fd-hair),0 24px 60px rgba(28,27,31,.3);
}
html.fd-js .fd-page .fd-rail.is-open .fd-rail-panel{display:flex}
html.fd-js .fd-page .fd-rail-groups{overflow-y:auto;-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
/* Touch: every row of the index is at least 44px tall. */
.fd-page .fd-rail-glink{min-height:44px}
.fd-page .fd-rail-toggle{width:44px;height:44px}
.fd-page .fd-rail-features a{padding-block:10px}
/* The groups column now reaches the right edge: a landing group clears the Menu pill (and the bar) as other anchors do. */
.fd-page main .fd-group[id],html.fd-focus .fd-page .fd-card-head,.fd-page .fd-card{scroll-margin-top:var(--wi-anchor-offset)}
/* No one-line summaries below 1101px: the titles alone, on phones and in a landscape tablet's narrow list. */
.fd-page .fd-card-sum{display:none}
}
@media (max-width:600px){
/* The Menu pill is smaller here (top 14px, 50px tall, right 14px). */
.fd-page{--fd-bar-top:17px;--fd-bar-h:44px;--fd-bar-r:14px;--fd-pill-room:128px}
html.fd-js .fd-page .fd-contents{gap:8px;padding:0 13px 0 12px}
html.fd-js .fd-page .fd-contents-now{font-size:14px}
html.fd-js .fd-page .fd-contents-progress{left:12px;right:12px;bottom:5px}
.fd-page .fd-band-side{max-width:none}
}
@media (prefers-reduced-motion:reduce){
html.fd-js .fd-page .fd-contents-chev,html.fd-js .fd-page .fd-contents-progress::after{transition:none}
}
/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion:reduce){
.fd-page .fd-rail-marker,.fd-page .fd-rail-fwrap,.fd-page .fd-rail-features,.fd-page .fd-rail-toggle svg,.fd-page .fd-rail-meter i::after,
.fd-page .fd-card,.fd-page .fd-card-head,.fd-page .fd-card-title,.fd-page .fd-card-num,.fd-page .fd-contents svg,
.fd-page .fd-all-toggle,.fd-page .fd-all-icon::before,.fd-page .fd-all-icon::after,.fd-page .fd-art-caption span{transition:none}
.fd-page .fd-art-frame.is-pulse::after,html.fd-focus .fd-page .fd-card-main.is-enter > *{animation:none}
.fd-page .fd-group.is-landed .fd-plate{animation:none;outline-color:#ffd700}
}
.fd-page[data-motion-paused="true"] .fd-art-frame.is-pulse::after{animation:none}
/* ------------------------------------------------------------------- print */
/* Everything, in reading order (features.js also switches to Show all details before printing). */
@media print{
.fd-page .fd-rail,.fd-page .fd-all-toggle,.fd-page .fd-art{display:none}
.fd-page .fd-layout{display:block;padding:0}
.fd-page .fd-group{display:block;break-inside:auto}
.fd-page .fd-card{display:block;break-inside:avoid;box-shadow:inset 0 0 0 1px rgba(28,27,31,.2)}
.fd-page .fd-card-head{display:block}
.fd-page .fd-card-main,.fd-page .fd-card-main[hidden]{display:block;content-visibility:visible;padding:0;background:none;box-shadow:none}
.fd-page .fd-scenario{margin:12px 0 0}
}
/* --- Owner round, 1 October 2026 (evening) ------------------------------------------------------------------------
One richer colour for every group's header tile (Headline Gold), its number, heading and lead centred on one line;
square term tags with room around the words; no gap above the example scenario; a bigger diagram tile; and each
feature's own diagram, cross-faded over the section's (features.js), with a Section overview button back. */
.fd-page .fd-group{--tone:#ffd64e;--tone-on:#1c1b1f;--tone-soft:rgba(28,27,31,.8)}
.fd-page .fd-plate{align-items:center}
.fd-page .fd-plate-head{align-items:center}
.fd-page .fd-plate .fd-group-lead{margin:0}
.fd-page .fd-scenario{margin-top:18px}
html.fd-focus .fd-page .fd-card-main:not([hidden]){align-self:start}
@container fdg (min-width:880px){
/* Polish: the drawing's size is set by the column's width, so the diagram column is the widest, and the tile fits the
drawing (4:5, the feature diagrams' viewBox) instead of running past the bottom of the window. */
html.fd-focus .fd-page .fd-group{grid-template-columns:minmax(0,.92fr) minmax(0,1fr) minmax(0,1.2fr)}
html.fd-focus .fd-page .fd-art{align-self:start;min-height:0;height:auto}
html.fd-focus .fd-page .fd-art-frame{flex:0 0 auto;aspect-ratio:4/5}
}
.fd-page .fd-art{height:clamp(380px,36vw,560px)}
.fd-page .fd-art-media{transition:opacity .45s var(--fd-ease)}
.fd-page .fd-art-feature{opacity:0}
.fd-page .fd-art-frame.is-feature .fd-art-media:not(.fd-art-feature){opacity:0}
.fd-page .fd-art-frame.is-feature .fd-art-feature{opacity:1}
.fd-page .fd-art-back{
position:absolute;top:12px;left:12px;z-index:2;display:none;margin:0;padding:6px 12px;border:0;border-radius:999px;
background:rgba(246,243,236,.12);color:#f6f3ec;font:600 12.5px/1.2 var(--ff-body);letter-spacing:.01em;cursor:pointer;
transition:background-color .2s;
}
.fd-page .fd-art-back:hover{background:rgba(246,243,236,.22)}
.fd-page .fd-art-back:focus-visible{outline:2px solid #ffd64e;outline-offset:2px}
.fd-page .fd-art.is-feature .fd-art-back{display:inline-block}
@media (prefers-reduced-motion:reduce){.fd-page .fd-art-media{transition:none}}
/* --- Landscape stage (1 October 2026, owner; group 1 first, data-art-wide) ----------------------------------------
On a wide column the group reads: the feature list on the left; on the right the diagram as a 2:1 landscape stage
across the top (features.js loads the -wide drawings), and under it the explanation (about 70%) with the
example scenario beside it (about 30%), like a caption to the drawing. The stage's height is derived from the
container width (cqi), so the text sits directly under it at any landscape size. Portrait files stay for narrow and
portrait screens. */
@container fdg (min-width:880px){
html.fd-focus .fd-page .fd-group[data-art-wide]{
grid-template-columns:minmax(0,.9fr) minmax(0,1.62fr) minmax(0,.68fr);
--stage-w:calc((100cqi - 2 * var(--gap)) * 2.3 / 3.2 + var(--gap));
--stage-h:calc(var(--stage-w) / 2);
}
html.fd-focus .fd-page .fd-group[data-art-wide] .fd-art{grid-column:2 / 4;grid-row:2 / span 6;align-self:start;height:var(--stage-h);min-height:0}
html.fd-focus .fd-page .fd-group[data-art-wide] .fd-art-frame{flex:1 1 auto;aspect-ratio:auto}
html.fd-focus .fd-page .fd-group[data-art-wide] .fd-art-caption{margin-top:6px;min-height:0}
html.fd-focus .fd-page .fd-group[data-art-wide] .fd-card-main{grid-column:2 / 4;grid-row:2 / span 6}
html.fd-focus .fd-page .fd-group[data-art-wide] .fd-card-main:not([hidden]){
align-self:start;margin:calc(var(--stage-h) + var(--gap)) 0 0;
display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);column-gap:clamp(16px,1.6vw,26px);align-items:start;
padding:var(--tile-pad);
}
html.fd-focus .fd-page .fd-group[data-art-wide] .fd-card-body{margin:0}
html.fd-focus .fd-page .fd-group[data-art-wide] .fd-scenario{margin:0;padding:14px 16px 16px;border-radius:12px}
html.fd-focus .fd-page .fd-group[data-art-wide] .fd-card-main > .fd-note{grid-column:1 / -1;margin:12px 0 0}
}
/* --- Pinned group (1 October 2026, owner; group 1 first, data-pin) ------------------------------------------------
features.js wraps the group in a .fd-pin-track whose spacer (.fd-pin-spacer) is the scroll distance and marks it
.is-pinned on a wide column: the group is then exactly one screen and pins, scrolling steps through the section
overview and each feature, and the next group rises over it. The stage takes whatever height the screen leaves. */
.fd-page .fd-pin-track{position:relative;margin-bottom:clamp(40px,4vw,64px)}
.fd-page .fd-pin-track ~ .fd-group{z-index:2;background:#f4f1ea}
@container fdg (min-width:880px){
html.fd-focus .fd-page .fd-group.is-pinned{
position:sticky;top:var(--fd-t);z-index:1;box-sizing:border-box;height:calc(100svh - 2 * var(--fd-t));margin-bottom:0;
overflow:hidden;background:#f4f1ea;align-content:start;
--stage-h:min(calc(var(--stage-w) / 2),calc(100svh - 2 * var(--fd-t) - 345px));
}
html.fd-focus .fd-page .fd-group.is-pinned .fd-plate{padding:14px 24px;--tile-pad:14px}
html.fd-focus .fd-page .fd-group.is-pinned .fd-num{font-size:clamp(34px,2.6vw,46px)}
html.fd-focus .fd-page .fd-group.is-pinned .fd-plate .fd-plate-title{font-size:clamp(22px,1.7vw,30px)}
html.fd-focus .fd-page .fd-group.is-pinned .fd-plate .fd-group-lead{font-size:clamp(14.5px,.95vw,16px);line-height:1.45}
html.fd-focus .fd-page .fd-group.is-pinned .fd-card-head{padding:8px 12px 9px 10px}
/* The feature titles spread over the height of the stage and its text: the stage and text span the title rows, whose
extra height is shared equally, and each title is centred in its row, so the gaps between titles are equal. */
html.fd-focus .fd-page .fd-group.is-pinned{grid-template-rows:auto repeat(5,auto)}
html.fd-focus .fd-page .fd-group.is-pinned:has(.fd-card:nth-child(4):last-child){grid-template-rows:auto repeat(4,auto)}
html.fd-focus .fd-page .fd-group.is-pinned .fd-card-head{align-self:center}
/* The group is only as tall as its stage and text (never more than the screen), so the titles' rows span exactly from the
top of the stage to the foot of the text; the first title meets the top edge and the last the bottom edge. */
html.fd-focus .fd-page .fd-group.is-pinned{height:auto;max-height:calc(100svh - 2 * var(--fd-t))}
html.fd-focus .fd-page .fd-group.is-pinned .fd-art,html.fd-focus .fd-page .fd-group.is-pinned .fd-card-main{grid-row:2 / -1}
html.fd-focus .fd-page .fd-group.is-pinned .fd-card-main:not([hidden]){padding:16px 18px}
html.fd-focus .fd-page .fd-group.is-pinned .fd-card-body p{font-size:clamp(15px,.95vw,16.5px);line-height:1.5}
/* 2 October 2026 (owner): the titles are a column of their own that scrolls when they outgrow the stage (features.js
pinList moves the text panels into the grid while pinned, and glides the chosen title into view). Its height is the
stage's and the text's; a thin, nearly clear scrollbar, and the column's ends fade so a cut-off title reads as "more". */
html.fd-focus .fd-page .fd-group.is-pinned,
html.fd-focus .fd-page .fd-group.is-pinned:has(.fd-card:nth-child(4):last-child){grid-template-rows:auto minmax(0,1fr)}
html.fd-focus .fd-page .fd-group.is-pinned .fd-cards.is-scroller{
display:block;grid-column:1;grid-row:2;align-self:stretch;min-height:0;contain:size;overflow-y:auto;overscroll-behavior:contain;padding:2px 6px 14px 0;
scrollbar-width:thin;scrollbar-color:rgba(28,27,31,.16) transparent;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 26px),transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 26px),transparent 100%);
}
html.fd-focus .fd-page .fd-group.is-pinned .fd-cards.is-scroller::-webkit-scrollbar{width:6px}
html.fd-focus .fd-page .fd-group.is-pinned .fd-cards.is-scroller::-webkit-scrollbar-thumb{border-radius:3px;background:rgba(28,27,31,.16)}
html.fd-focus .fd-page .fd-group.is-pinned .fd-cards.is-scroller::-webkit-scrollbar-track{background:transparent}
html.fd-focus .fd-page .fd-group.is-pinned .fd-cards.is-scroller .fd-card-head{align-self:auto;margin:0 0 4px}
/* A long explanation scrolls inside its own panel (features.js fitMain caps its height to the room it has). */
html.fd-focus .fd-page .fd-group.is-pinned .fd-card-main:not([hidden]){overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(28,27,31,.16) transparent}
html.fd-focus .fd-page .fd-group.is-pinned .fd-card-main::-webkit-scrollbar{width:6px}
html.fd-focus .fd-page .fd-group.is-pinned .fd-card-main::-webkit-scrollbar-thumb{border-radius:3px;background:rgba(28,27,31,.16)}
}
/* One-line summaries under the feature titles (1 October 2026, owner; group 1 for now): a small, quiet line condensed from
the unit's own explanation, filling the space the term tags used to. */
.fd-page .fd-card-sum{margin:0;max-width:60ch;font-size:13.5px;line-height:1.4;color:rgba(28,27,31,.6)}
html.fd-focus .fd-page .fd-card-sum{grid-column:2;margin-top:3px}
html.fd-focus .fd-page .fd-card.is-selected .fd-card-sum{color:rgba(28,27,31,.72)}
/* --- Phones and tablets: one line of reading (1 October 2026, owner) ----------------------------------------------
html.fd-stack (features.js) wherever the pinned group cannot fit: below 1101px unless the column is 880px wide and
the window 520px tall, and on any window under 520px tall. Every feature is open and reads as one unit, in order: its
number and title, its own portrait drawing (feature-gNfM.svg, made and loaded by features.js as it nears the
screen), its explanation, then its example scenario as the tile's foot; feature after feature. The group opens with its
header tile and the section overview (art-0N, portrait). No one-line summaries and no Show all details switch: there is
nothing left to open. From a 600px column (portrait tablets, phones held sideways) the drawing sits beside the text,
and the section overview beside the header tile, in one column of drawings down the left. */
.fd-page .fd-card-art{display:none}
html.fd-stack .fd-page .fd-all-toggle,html.fd-stack .fd-page .fd-card-sum{display:none}
html.fd-stack .fd-page .fd-group{display:block;margin-bottom:0}
html.fd-stack .fd-page .fd-art{position:relative;top:auto;height:clamp(320px,104cqi,460px);margin-bottom:var(--gap)}
html.fd-stack .fd-page .fd-card{margin-bottom:var(--gap)}
html.fd-stack .fd-page .fd-card-head{margin-bottom:14px}
html.fd-stack .fd-page .fd-card .fd-card-title{margin:0}
html.fd-stack .fd-page .fd-card-art{
display:block;position:relative;overflow:hidden;box-sizing:border-box;height:clamp(240px,72cqi,320px);margin:0 0 4px;
border-radius:12px;background:radial-gradient(70% 55% at 50% 58%,rgba(255,214,78,.16),transparent 72%),#1c1b1f;
}
html.fd-stack .fd-page .fd-card-art .fd-art-media{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
html.fd-stack .fd-page .fd-card-main{padding-top:14px}
html.fd-stack .fd-page .fd-card-body{margin-bottom:0}
html.fd-stack .fd-page .fd-cards > .fd-note{margin:0 4px var(--gap)}
@container fdg (min-width:600px){
html.fd-stack .fd-page .fd-group{
--fd-art-w:min(36cqi,calc(56svh * .8),300px);
display:grid;grid-template-columns:var(--fd-art-w) minmax(0,1fr);column-gap:var(--gap);align-items:stretch;
}
html.fd-stack .fd-page .fd-plate{grid-column:2;grid-row:1;margin-bottom:var(--gap);grid-template-columns:auto minmax(0,1fr);row-gap:12px;align-content:center}
html.fd-stack .fd-page .fd-plate .fd-group-lead{grid-column:1 / -1}
html.fd-stack .fd-page .fd-art{grid-column:1;grid-row:1;height:auto;min-height:calc(var(--fd-art-w) * 1.25 + 48px)}
html.fd-stack .fd-page .fd-card,html.fd-stack .fd-page .fd-cards > .fd-note{grid-column:1 / -1}
html.fd-stack .fd-page .fd-card{
display:grid;grid-template-columns:calc(var(--fd-art-w) - var(--tile-pad)) minmax(0,1fr);column-gap:calc(var(--gap) + 10px);
align-items:start;padding-bottom:var(--tile-pad);
}
html.fd-stack .fd-page .fd-card-head{grid-column:1 / -1}
html.fd-stack .fd-page .fd-card-art{grid-column:1;grid-row:2;height:auto;aspect-ratio:4 / 5;margin:0}
html.fd-stack .fd-page .fd-card-main{grid-column:2;grid-row:2;padding-top:0}
html.fd-stack .fd-page .fd-scenario{margin:18px 0 0;padding:14px 16px 16px;border-radius:12px}
}
@media print{.fd-page .fd-card-art{display:none}}
/* A landscape tablet below 1101px still pins (a column of 880px or more, 520px tall or more): the pinned group then starts
under the Contents bar, and its stage gives up the bar's height. */
@media (max-width:1100px){
@container fdg (min-width:880px){
html.fd-focus .fd-page .fd-group.is-pinned{
top:calc(var(--fd-bar-top) + var(--fd-bar-h) + 10px);max-height:calc(100svh - var(--fd-bar-top) - var(--fd-bar-h) - 10px - var(--fd-t));
--stage-h:min(calc(var(--stage-w) / 2),calc(100svh - var(--fd-bar-top) - var(--fd-bar-h) - 10px - var(--fd-t) - 345px));
}
}
}