/* Inner pages and cases in the 2026 style (swarm stream: inner, 20 Oct 2026). Loaded last on every page; every rule is
   scoped to html[data-room] so the homepage keeps its own. The owner: «внутренние страницы тоже… там есть где остались
   старые и нет анимированных сцен». The world decides each page's scene (js/3d/space-camera.js ROOM_PATHS); this file
   takes out what is left of the older layers: glass plates, gradients, navy labels, grey boxes, a pipe metadata row. */

/* ---- About ---- */
/* the year cards carry their covers now (the cover holds the brand), so the category label over the cover goes: it sat
   on the picture in a navy ink (#123764 from the old card faces); the year's names under the fan keep the titles */
html[data-room=about] .year-card.has-cover .year-card-meta{display:none!important}
/* the bio tabs were a frosted plate with gradient pills (portfolio-v36/38/41); they become the /work filter chips:
   flat pills in the chip grey, the pressed one in ink, no blur, no rim */
html[data-room=about] #about .bio-tabs:not(#_u){gap:6px!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-room=about] #about .bio-tabs:not(#_u)::before,html[data-room=about] #about .bio-tabs:not(#_u)::after{content:none!important}
html[data-room=about] #about .bio-tabs:not(#_u)>button{min-height:0!important;padding:8px 14px!important;border:0!important;border-radius:999px!important;background:var(--cool-chip,#eceff5)!important;color:var(--cool-ink,#000)!important;font-size:14px!important;line-height:1.3!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-room=about] #about .bio-tabs:not(#_u)>button:hover{background:var(--cool-chip-hover,#e2e5eb)!important}
html[data-room=about] #about .bio-tabs:not(#_u)>button[aria-pressed=true]{background:var(--cool-ink,#000)!important;color:var(--cool-ground,#fff)!important}
/* the battle film's controls were a frosted gradient lozenge; a solid ink pill like every other control */
html[data-room=about] .battle-screen>.battle-controls:not(#_u){background:#000000!important;color:#ffffff!important;border-radius:999px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
html[data-room=about] .battle-screen>.battle-controls:not(#_u) button{border-radius:999px!important}
html[data-room=about] .battle-screen>.battle-controls:not(#_u) button:hover{background:#22252b!important}

/* ---- Approach ---- */
/* the hero stands at the homepage's sea station (ROOM_PATHS approach starts at s 2, the process key): the waterline,
   the lenses and the sea fill the lower half, so the lead cannot sit on the world. It takes the homepage's own device at
   this station, the edge sheet (DESIGN.md, «Copy sits on the quiet ground the composition leaves, or on an edge sheet»):
   paper by day, ink by night, anchored to the frame's bottom edge on the station panel's 2.8vw margin, rounded only on
   its free corners. The old frosted plate (portfolio-polish-v54, --plate) is gone with it */
@media (min-width:701px){
 html[data-room=approach] body[data-page=approach] main>.page-opening:not(#_u){position:relative;min-height:100svh}
 html[data-room=approach] body[data-page=approach] main>.page-opening:not(#_u)>p{position:absolute;right:2.8vw;bottom:0;width:min(31vw,460px);max-width:none;margin:0;
  padding:24px 24px 32px;border-radius:16px 16px 0 0;background:#ffffff!important;color:#000000!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  font-size:var(--t-lead,24px);line-height:1.3;text-wrap:pretty;z-index:2}   /* the lead role (21 Oct: it was 18-22 px, off the roles) */
 html[data-room=approach][data-theme=dark] body[data-page=approach] main>.page-opening:not(#_u)>p{background:#000000!important;color:#ffffff!important}
}

/* ---- Work ---- */
/* the cloud sea crosses the hero at the height of «work.» (s .98 to 1.1), so the lede moves up to the heading's first
   line, on the clear sky above the crests; it reads with the title instead of under a band of dots */
@media (min-width:701px){
 html[data-room=work] body[data-page=work] #projects>.section-heading:not(#_u)>p{align-self:flex-start!important;margin-top:clamp(20px,2.3vw,36px)!important}
}

/* ---- 404 ---- */
/* the signature keeps the name and the line; the grey particle head (particle-head-v38.svg) was the last avatar of the
   old site and reads as a grey blob next to the copy */
html[data-room=lost] .hero-frame .hero-person>img{display:none!important}
html[data-room=lost] .hero-frame .hero-person{gap:0!important}

/* ---- CV ---- */
/* the opening takes the first screen, as every other page's does, and keeps its copy at the top: the lower part of the
   frame is the world's (ROOM_PATHS cv), where the glass falls toward the sea, and «Core practice.» starts below it */
@media screen and (min-width:801px){
 html[data-room=cv] .cv-opening:not(#_u){min-height:calc(100svh - 150px);align-content:start}
}
/* lists: internal dividers only, a hairline between two items, none above the first or under the last */
@media screen{
 html[data-room=cv] .cv-experience>.cv-role:not(#_u){margin:0;padding-block:32px}   /* 8 px rhythm (21 Oct; the owner: «проверь все размеры, отступы»): was 28 */
 html[data-room=cv] .cv-experience>.cv-role:not(#_u):first-child{padding-top:0}
 html[data-room=cv] .cv-experience>.cv-role:not(#_u):last-child{padding-bottom:0}
 html[data-room=cv] .cv-experience>.cv-role:not(#_u)+.cv-role{border-top:1px solid var(--cool-line,#dfe2e8)}
 html[data-room=cv] section[aria-labelledby=cv-recognition] .cv-recognition>p:not(#_u){margin:0;padding-block:16px}
 html[data-room=cv] section[aria-labelledby=cv-recognition] .cv-recognition>p:not(#_u):first-child{padding-top:0}
 html[data-room=cv] section[aria-labelledby=cv-recognition] .cv-recognition>p:not(#_u):last-child{padding-bottom:0}
 html[data-room=cv] section[aria-labelledby=cv-recognition] .cv-recognition>p:not(#_u)+p{border-top:1px solid var(--cool-line,#dfe2e8)}
 /* selected work: six cases, so they become cards with the case's own 16:10 cover (the same one as the next-case card);
    the covers are the colour on the page */
 html[data-room=cv] .cv-selected:not(#_u){gap:40px 24px}
 html[data-room=cv] .cv-selected:not(#_u)>a{display:block}
 html[data-room=cv] .cv-selected:not(#_u)>a>img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin-bottom:16px}
}
@media print{html[data-room=cv] .cv-selected>a>img{display:none!important}}
/* «Back to homepage» kept the homepage hero's downward arrow (rotate 135deg, «scroll on»); it leaves the page, so the
   arrow points out (the path's own ↗), in a solid pill of the room's ink like every other control */
html[data-room=lost] .hero-frame .hero-explore .round-arrow:not(#_u){border:0!important;background:var(--cool-ink,#000)!important;color:var(--cool-ground,#fff)!important;box-shadow:none!important}
html[data-room=lost] .hero-frame .hero-explore .round-arrow:not(#_u) svg{transform:none!important}

/* ---- Phones: small copy leaves the dotted world for an edge sheet (20 Oct: the approach lead sat on the sea and ran
   under the nav's tab, the CV summary had the glass's dots and line through it, the 404 note sat under the dotted
   ring). The process step's phone sheet is the model (space-ui.css, «the process step's copy on a sheet»): paper by
   day, ink by night, edge to edge on the frame's inner edges, rounded only on its free top corners (the bottom ones
   follow the frame's own radius), clearing the nav's tab; no blur, no plate of its own. The display lines stay on
   the world above it */
@media (max-width:700px){
 /* approach: the lead is the sheet, anchored to the frame's bottom edge on the first screen */
 html[data-room=approach] body[data-page=approach] main>.page-opening:not(#_u){position:relative;min-height:100svh}
 html[data-room=approach] body[data-page=approach] main>.page-opening:not(#_u)>p:not(#_v){position:absolute;left:var(--frame,8px);right:var(--frame,8px);bottom:var(--frame,8px);
  width:auto;max-width:none;margin:0;padding:16px 16px calc(80px + env(safe-area-inset-bottom,0px));border-radius:16px 16px var(--frame-r,12px) var(--frame-r,12px);
  background:#ffffff!important;color:#000000!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;filter:none!important;z-index:4;text-wrap:pretty}
 html[data-room=approach][data-theme=dark] body[data-page=approach] main>.page-opening:not(#_u)>p:not(#_v){background:#000000!important;color:#ffffff!important}
 html[data-room=approach] body[data-page=approach] main>.page-opening:not(#_u)>p:not(#_v)::before{display:none!important;content:none!important}
 /* CV: the summary, its actions and the place are one sheet; it stays in the flow and rises from the frame's bottom
    edge on the first screen, so the name and the role stand on the quiet sky above it */
 html[data-room=cv] .cv-opening:not(#_u){min-height:calc(100svh - 130px);padding-bottom:0;grid-template-rows:auto 1fr}
 html[data-room=cv] .cv-opening>.cv-summary:not(#_u){align-self:end;width:calc(100vw - 2 * var(--frame,8px));max-width:none;margin:0 0 var(--frame,8px) calc(50% - 50vw + var(--frame,8px));
  padding:16px calc(50vw - 50% - var(--frame,8px)) calc(80px + env(safe-area-inset-bottom,0px));box-sizing:border-box;border-radius:16px 16px var(--frame-r,12px) var(--frame-r,12px);
  background:#ffffff!important;color:#000000!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;position:relative;z-index:2}
 html[data-room=cv][data-theme=dark] .cv-opening>.cv-summary:not(#_u){background:#000000!important;color:#ffffff!important}
 html[data-room=cv] .cv-opening>.cv-summary:not(#_u) :is(p,a,button)::before{display:none!important;content:none!important}
 /* 404: the signature, the note and the way back are one sheet on the frame's bottom edge; «We do apologise!» stays
    on the world above it */
 html[data-room=lost] body .hero-frame>.hero-bottom:not(#_u):not(#_v){position:absolute!important;top:auto!important;left:var(--frame,8px)!important;right:var(--frame,8px)!important;bottom:var(--frame,8px)!important;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:16px!important;margin:0!important;
  padding:16px 16px calc(80px + env(safe-area-inset-bottom,0px))!important;border-radius:16px 16px var(--frame-r,12px) var(--frame-r,12px)!important;
  background:#ffffff!important;color:#000000!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;z-index:3}
 html[data-room=lost][data-theme=dark] body .hero-frame>.hero-bottom:not(#_u):not(#_v){background:#000000!important;color:#ffffff!important}
 html[data-room=lost] body .hero-frame>.hero-bottom:not(#_u):not(#_v)>*{position:static!important;margin:0!important;max-width:none!important;text-align:left!important;transform:none!important}
 html[data-room=lost] body .hero-frame>.hero-bottom:not(#_u):not(#_v) :is(.hero-person,.hero-note,.hero-explore)::before{display:none!important;content:none!important}
 html[data-room=lost]:not([data-theme=dark]) body .hero-frame>.hero-bottom:not(#_u):not(#_v) :is(p,span:not(.round-arrow),a){color:#000000!important}
 html[data-room=lost][data-theme=dark] body .hero-frame>.hero-bottom:not(#_u):not(#_v) :is(p,span:not(.round-arrow),a){color:#ffffff!important}
}

/* ---- About: the opener as a Swiss split title (20 Oct; owner: «в эбаут… хиро очень скучно, имя фамилия и всё») ----
   Three structural rules from three studied exemplars (skills/swiss-editorial-design/references/exemplars):
   E01 split title starts (neutra-vdl): the name is the grid: «Dmytro» on column 1, «Dintsen.» two columns in, and the
   facts start under the fragment they belong to; E12 proposition in the gap (chipsa-promeat): the role stands in the step
   the second line leaves, on its baseline; E05 hanging secondary axis (laguta-ctmk): the claim and the route hang from the
   axis «Dintsen.» opens, not from the page edge. E13 (promeat): the type keeps the calm half; the head stands right. One
   grid for the page: 12 columns, 4vw margins, 2vw gutters (a column and its gutter are 7.8333vw). */
@media (min-width:1025px){
 html body[data-page=about] .about-head-hero .about-opening-copy:not(#_u):not(#_v){left:4vw!important;right:4vw!important;width:auto!important;bottom:11%!important;
  display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;align-items:end}
 html body[data-page=about] .about-head-hero .about-opening-copy:not(#_u):not(#_v) h1{grid-column:1/span 8;grid-row:1}
 /* the step is two columns, minus the .06em each line mask gives back on its left (css/type-2026.css): that rule is
    !important, so the step is too (22 Oct: without it «Dintsen.» stood under «Dmytro» and the role crossed it) */
 html body[data-page=about] .about-head-hero #about-title:not(#_u):not(#_v) .text-mask:nth-of-type(2){margin-left:calc(15.667vw - .06em)!important}
 html body[data-page=about] .about-head-hero .about-opening-copy:not(#_u):not(#_v) .about-role{grid-column:1/span 2;grid-row:1;align-self:end;
  margin:0 0 calc(var(--t-xl,144px)*.16)!important;font-size:var(--t-small,14px)!important;line-height:1.35!important;max-width:11em;color:inherit}
 html body[data-page=about] .about-head-hero .about-opening-copy:not(#_u):not(#_v) .about-claim{grid-column:3/span 4;grid-row:2;
  margin:clamp(22px,2.2vw,36px) 0 0!important;font-size:var(--t-body,17px)!important;line-height:1.45!important;max-width:21em}
 /* air (owner, 20 Oct: «не забывай про воздух… смотри референсы»; the SOTD portfolios in the library, max-milkin,
    clement-grellier, olha-lazarieva: one dominant and one or two small groups on the first screen): the claim is a quiet
    text block on the axis, not a second display voice */
 html body[data-page=about] .about-head-hero .about-opening-copy:not(#_u):not(#_v) .text-button{grid-column:3/span 4;grid-row:3;justify-self:start;margin-top:clamp(22px,2.2vw,36px)}
 /* the head steps right so the split title stands on the calm half */
 html body[data-page=about] .about-head-hero .about-head-art:not(#_u){transform:translateX(6vw)}
}
@media (max-width:1024px){
 /* E20 narrow keeps pairs: the title collapses to left lines with one small step, the role stays with the claim */
 html body[data-page=about] .about-head-hero #about-title:not(#_u):not(#_v) .text-mask:nth-of-type(2){margin-left:calc(10vw - .06em)!important}
 html body[data-page=about] .about-head-hero .about-opening-copy:not(#_u):not(#_v) .about-role{margin:clamp(16px,3vw,24px) 0 0!important;font-size:var(--t-small,13px)!important;line-height:1.35!important}
 html body[data-page=about] .about-head-hero .about-opening-copy:not(#_u):not(#_v) .about-claim{margin:6px 0 clamp(18px,4vw,26px)!important;font-size:var(--t-lead,19px)!important;line-height:1.3!important;max-width:20em}
}
/* the opener is one screen: an old floor of 740 px (portfolio-v40) pushed its route under the nav's tab on a phone. Not
   under 500 px of height (a phone on its side): one screen of 390 px held only the lower half of the title, the rest ran
   under the frame's top band and its nav (devices, 22 Oct) */
@media (max-width:1024px) and (min-height:500px){html.room-live body[data-page=about] .page-opening.about-head-hero:not(#_u):not(#_v){min-height:0!important;height:100svh!important}}
/* phones, the still room too (.has-frame without room-live): the floor goes, its height stays one screen less the 8 px
   margins (portfolio-v40); at 375 x 667 the route stood under the frame's bottom tab. Not under 500 px of height (a phone
   on its side), where the copy would run out of the top of the room's clip (devices, 22 Oct) */
@media (max-width:700px) and (min-height:500px){html.has-frame body[data-page=about] .page-opening.about-head-hero:not(#_u):not(#_v){min-height:0!important}}
/* 404: «Back to homepage» is the site's one outlined pill now (20 Oct), as wide as its words, not its grid cell */
html[data-room=lost] body .hero-frame .hero-bottom>.text-button:not(#_u):not(#_v){grid-column:1!important;justify-self:start!important;align-self:end!important;width:auto!important;max-width:max-content!important;flex:none!important}   /* (22 Oct, round 3) under the signature on the paper: with the note gone from the 404 it took the grid's right column, on the planet */
@media (max-width:700px){html[data-room=lost] body .hero-frame .hero-bottom>.text-button:not(#_u):not(#_v){align-self:flex-start!important}}   /* the phone's sheet is a column */
/* Gallery (21 Oct, review-frames.md fix 10, one dominant per screen): the name of the work in focus was set at 64 px
   beside the chapter's own 64 px title, two display lines facing each other over the cover; it steps down to the lead
   size in the text face, a label for the cover, which stays the screen's dominant */
html body .selected-gallery .gal-now-title:not(#_t){font-family:var(--t-text);font-size:var(--t-lead);line-height:1.25;letter-spacing:0;font-variation-settings:normal}
html body .selected-gallery .gal-now-meta:not(#_t){margin-top:8px;font-size:var(--t-small);line-height:1.4}   /* small 14 (it was 15), on the 8 px rhythm (21 Oct) */

/* The award on the cover (21 Oct; the owner: «награды, как Behance делает»): a tab cut into the cover's top-left corner,
   in the frame's language (the page's own ground, concave joins of the cover's radius), holding «Behance featured» for the
   cases the site records as featured; the line under the cover keeps the galleries */
html body .work-card .work-image>.work-award{position:absolute;z-index:4;left:0;top:0;padding:8px 12px;font-size:13px;line-height:16px;letter-spacing:0;   /* 8 px rhythm, the tab still 32 px tall (21 Oct) */
 color:#000000;background:#ffffff;border-radius:0 0 12px 0;pointer-events:none;white-space:nowrap}
html body .work-card .work-image>.work-award::before,html body .work-card .work-image>.work-award::after{content:'';position:absolute;width:12px;height:12px;
 background:radial-gradient(circle at 100% 100%,transparent 11.5px,#ffffff 12px)}
html body .work-card .work-image>.work-award::before{top:0;right:-12px}
html body .work-card .work-image>.work-award::after{left:0;bottom:-12px}
html[data-theme=dark] body .work-card .work-image>.work-award{color:#ffffff;background:#000000}
html[data-theme=dark] body .work-card .work-image>.work-award::before,html[data-theme=dark] body .work-card .work-image>.work-award::after{background:radial-gradient(circle at 100% 100%,transparent 11.5px,#000000 12px)}

/* ---- The inner pages' scenes (21 Oct; the owner: «чтоб была логика, красота»; work/_claude-qa/review-20261021c/
   scenes-approach-explore-work.md) ---- */
/* Approach: the hero's h1 «Good design. Clear decisions.» was followed at 1101 px and wider by the homepage's process
   opener «Good design starts with understanding.» (css/grid-2026.css shows #design-bottom .approach-intro as a grid, over
   portfolio-v36's display:none on this page), the same words twice. It stays for assistive tech, as the cycle's name */
html[data-room=approach] body[data-page=approach] #design-bottom .approach-intro:not(#_g):not(#_h){display:block!important;position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
/* the cycle's tiles by day print with a body (critique.md §8: as pencil they nearly vanished at 1440): the fine dark in ink
   over the body in the light greys, the About forms' filter; by night the fine light as before; colour mode keeps its own */
html.one-bit[data-room=approach]:not([data-theme=dark]):not([data-colour=on]) body canvas.cycle-canvas{filter:url(#one-bit-alpha-tone-ink)!important}
/* the services' plaster maquettes (js/3d/principle-scenes.js) print as an opaque drawing in the four tones: by day lit
   planes paper, the shadow side the greys and the contour ink; by night dense black with the rim traced in white */
html.one-bit:not([data-theme=dark]):not([data-colour=on]) body canvas.principles-canvas[data-material=plaster]{filter:url(#one-bit-day-object)!important}
html.one-bit[data-theme=dark]:not([data-colour=on]) body canvas.principles-canvas[data-material=plaster]{filter:url(#one-bit-night-object)!important}
html.one-bit[data-colour=on]:not([data-theme=dark]) body canvas.principles-canvas[data-material=plaster]{filter:url(#one-bit-day-object-c)!important}
html.one-bit[data-colour=on][data-theme=dark] body canvas.principles-canvas[data-material=plaster]{filter:url(#one-bit-night-object-c)!important}
/* after the last service the stage left into 130 px of padding over the footer's own: two thirds of the frame stood
   empty (pass65 approach 06); the closing line follows the last maquette */
html body[data-page=approach] #services.services-section:not(#_i){padding-bottom:48px!important}

/* ---- Type roles and the stage copy on Approach, Explore and Work (21 Oct; the owner: «проверь все размеры, отступы»;
   the lead's audit at 1440). Roles from css/type-2026.css: display XL 144, L 96, M 64 in the display face; lead 24, body 17,
   small 14, caption 13 in Basel; the /work card's name 15 ---- */
/* Approach: the stage lines are step lines, M in the display face (43 px in the text face); their text body, their tags
   caption (12) */
html body[data-page=approach] .cycle-panel h3:not(#_i):not(#_n):not(#_r){font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-size:var(--t-m)!important;line-height:var(--t-lh-m,1.05)!important;letter-spacing:var(--t-track-m)!important;font-kerning:normal}
html body[data-page=approach] .cycle-panel p:not(#_i):not(#_n):not(#_r){font-family:var(--t-text)!important;font-size:var(--t-body)!important;line-height:1.5!important;letter-spacing:0!important}
html body[data-page=approach] .cycle-panel :is(ul,li):not(#_i):not(#_n):not(#_r){font-family:var(--t-text)!important;font-size:13px!important;line-height:1.35!important;letter-spacing:0!important}
/* the foundation: its title L (89), its three lines M in the display face (49 in the text face, the first line in a second
   grey: one ink), their text body (19.5) */
html body[data-page=approach] .practice-detail>h2:not(#_i):not(#_n):not(#_r){font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-size:var(--t-l)!important;line-height:var(--t-lh-l,1)!important;letter-spacing:var(--t-track-l)!important;font-kerning:normal}
html body[data-page=approach] .practice-grid article h3:not(#_i):not(#_n):not(#_r){font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-size:var(--t-m)!important;line-height:var(--t-lh-m,1.05)!important;letter-spacing:var(--t-track-m)!important;font-kerning:normal}
html body[data-page=approach] .practice-grid article h3::first-line{color:inherit!important}
html body[data-page=approach] .practice-grid article p:not(#_i):not(#_n):not(#_r){font-family:var(--t-text)!important;font-size:var(--t-body)!important;line-height:1.5!important;letter-spacing:0!important}
/* the services' lines under the current row: the description body (18), the meta line small (14.5) */
html body[data-page=approach] .svc-show .svc-more p.service-description:not(#_i):not(#_n):not(#_r){font-size:var(--t-body)!important;line-height:1.5!important;letter-spacing:0!important}
html body[data-page=approach] .svc-show .svc-more p:not(.service-description):not(#_i):not(#_n):not(#_r){font-size:var(--t-small)!important;line-height:1.4!important;letter-spacing:0!important}
/* Explore: the practice's title L (57.6), its scroll-filled statement M in the display face as the About intro's (43 in
   the text face), the notes' text body (21); the rail's own card captions (seen when it is static or a swipe) take the
   /work card's name 15 and line 13 (43 and 15) */
html body[data-page=gallery] #explore-practice-title:not(#_i):not(#_n):not(#_r){font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-size:var(--t-l)!important;line-height:var(--t-lh-l,1)!important;letter-spacing:var(--t-track-l)!important;font-kerning:normal}
html body[data-page=gallery] .explore-practice-intro>p:not(#_i):not(#_n):not(#_r){font-family:var(--t-display)!important;font-variation-settings:normal!important;font-weight:400!important;font-size:var(--t-m)!important;line-height:var(--t-lh-m,1.05)!important;letter-spacing:var(--t-track-m)!important;font-kerning:normal}
html body[data-page=gallery] .explore-practice-notes article>p:not(#_i):not(#_n):not(#_r){font-family:var(--t-text)!important;font-size:var(--t-body)!important;line-height:1.5!important;letter-spacing:0!important}
html body[data-page=gallery] .selected-gallery .work-card .work-caption h3:not(#_i):not(#_n):not(#_r){font-family:var(--t-text)!important;font-variation-settings:normal!important;font-weight:400!important;font-size:15px!important;line-height:1.3!important;letter-spacing:0!important}
html body[data-page=gallery] .selected-gallery .work-card>.work-caption>span:not(#_i):not(#_n):not(#_r),html body[data-page=gallery] .selected-gallery .work-card>p:not(#_i):not(#_n):not(#_r){font-size:13px!important;line-height:1.35!important;letter-spacing:0!important}
/* split lines and words inherit their heading's role */
html body:is([data-page=approach],[data-page=gallery]) :is(.cycle-panel h3,.practice-detail>h2,.practice-grid article h3,#explore-practice-title,.explore-practice-intro>p) :is(span,div):not(#_i):not(#_n){font-family:inherit!important;font-variation-settings:inherit!important;font-size:inherit!important;letter-spacing:inherit!important}
/* Work: «Featured in the … galleries on Behance» under a featured cover is part of the card's line: caption 13 in its grey
   (it was 18) */
html body[data-page=work] .work-sheet #cardContainer .work-card .work-recognition:not(#_i):not(#_n){font-size:13px!important;line-height:1.35!important;letter-spacing:0!important;min-height:0!important;color:#707379!important;margin:6px 0 0!important}   /* -72: under the description, so every title in a row keeps one line (the visual jury) */
html[data-theme=dark] body[data-page=work] .work-sheet #cardContainer .work-card .work-recognition:not(#_i):not(#_n){color:#888b91!important}
/* Approach, 1101 px and wider: the stage copy stands on the page grid (12 columns in 4vw margins, 2vw gutters), the step
   line on columns 1-6, so at M it keeps to two lines; its text hangs from column 8 (grid-2026.css, E05) */
@media (min-width:1101px){
 html body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-detail:not(#_i){width:100%!important;max-width:none!important}
 html body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-panel:not([hidden]):not(#_i){display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;column-gap:2vw!important;row-gap:0!important;align-items:start}
 html body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-panel:not(#_i)>h3{grid-column:1/span 6!important;grid-row:1/span 2!important;max-width:none!important;margin:0!important}
 html body[data-page=approach] .cycle-scroll:not(.is-static) .cycle-panel:not(#_i)>:is(p,ul){grid-column:8/span 5!important;max-width:none!important}
}