/* Preview fixes (5 Nov): reliability across browsers and the phone layout. Nothing here changes the desktop design. */

/* the page never scrolls sideways (Safari scrolls a hidden overflow to bring a focused element into view) */
html, body { overflow-x: hidden; }

/* sizes that used to come from aspect-ratio alone, given explicitly too (Safari before 15 has no aspect-ratio) */
html .home .fig { width: calc(90vh * 16 / 9); }

/* INFO: the portrait's still is always there under the loop, so the frame is never an empty black square */
html .face .frame { background: #111 url(media/portrait.jpg) center / contain no-repeat; }   /* drawn exactly as the video draws its poster */
html .face video { background: transparent; }
html .face video.ld-wait { opacity: 0; }   /* candidate, 8 Nov: until the loop can play on without stopping (the frame shows the same poster) */

@media (max-width: 720px) {
  html .home .fig { width: calc(50vh * 16 / 9); }
  /* masthead: name, WORK, INFO and ES / EN on one line at 360 px and up, with room between them */
  html .masthead nav { gap: 16px; }
  html .masthead .lang-sw { margin-left: 0; padding-left: 12px; gap: 5px; }
  /* the archive: two columns that flow (04 under 03, never on it), a little smaller type and more air between works */
  html .home .layer { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; align-content: start;
    column-gap: 7vw; row-gap: 20px; box-sizing: border-box; padding: calc(64px + env(safe-area-inset-top, 0px)) var(--gutter) 0; }
  html .home .e { position: relative; width: auto; min-width: 0; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 8px; }
  html .home .e.r { grid-template-columns: minmax(0, 1fr) 30px; }
  html .home .e .n { font-size: 9.5px; line-height: 13px; }
  html .home .e .ti { font-size: 12.5px; line-height: 15.5px; }
  html .home .e .t { font-size: 8.5px; line-height: 11px; letter-spacing: .06em; margin-top: 2px; }
}
@media (max-width: 720px) and (max-height: 700px) { html .home .layer { row-gap: 14px; padding-top: calc(60px + env(safe-area-inset-top, 0px)); } }
@media (max-width: 720px) {
  /* the cue sits one line above the drawing's title, so the two never share a line */
  html .home .cue { bottom: calc(var(--gutter) + 28px + 26px + env(safe-area-inset-bottom, 0px)); }
}

/* the browser check (preview only) */
#mcheck { position: fixed; z-index: 500; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 80px);
  overflow: auto; background: #fff; border: 1px dashed var(--line); box-shadow: 0 10px 40px rgba(22, 28, 37, .12); font: 400 11px/16px var(--mono); color: var(--ink); }
#mcheck .mc-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px dashed var(--line); letter-spacing: .06em; text-transform: uppercase; }
#mcheck .mc-h button { font: inherit; background: none; border: 0; cursor: pointer; color: var(--ink); text-decoration: underline; }
#mcheck pre { margin: 0; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; font: inherit; }
@media (max-width: 720px) { .studybar button[onclick] { display: inline; } }
@media (max-width: 720px) {
  /* the drawing's title and the cue stay readable where they sit on the drawing: a soft halo of the paper behind the letters */
  html .home .wall, html .home .cue { text-shadow: 0 0 3px #f6f6f3, 0 0 8px #f6f6f3, 0 0 14px rgba(246, 246, 243, .9); }
  /* preview chrome on phone: one thin line between the masthead and the archive, out of the design's way */
  .studybar { top: calc(35px + env(safe-area-inset-top, 0px)) !important; padding: 1px 6px !important; font-size: 9px; line-height: 13px; gap: 10px !important; }
}

/* ---------- loading (loader.js) ---------- */
html.ld-cold .stage { visibility: hidden; }
.ld { position: fixed; inset: 0; z-index: 300; overflow: hidden; background: var(--surface); --cw: clamp(190px, 21vw, 360px); --ch: calc(var(--cw) / 2.273); }
.ld .ld-char { position: absolute; left: 50%; top: 44%; width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2); transform-origin: 50% 92%; will-change: transform; }
.ld-shadow { position: absolute; left: 50%; top: calc(44% + var(--ch) * .44); width: calc(var(--cw) * .7); height: calc(var(--ch) * .16); margin-left: calc(var(--cw) * -.33); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 28, 37, .2), rgba(22, 28, 37, .06) 60%, rgba(22, 28, 37, 0)); filter: blur(5px); pointer-events: none; }
.ld-plane { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 3; visibility: hidden; transform: translateY(101%);
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.63) 45%, rgba(255,255,255,.7));
  -webkit-backdrop-filter: blur(14px) saturate(.8); backdrop-filter: blur(14px) saturate(.8); border-top: 1px solid rgba(255,255,255,.95); }
@media (max-width: 720px) { .ld { --cw: 58vw; } }
/* the small one, while a page's images arrive: a frosted card at the foot of the screen, out of the content's way */
.ld-mini { position: fixed; z-index: 260; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: 152px; height: 96px; pointer-events: none;
  --cw: 112px; --ch: calc(var(--cw) / 2.273); border-radius: 3px; background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px) saturate(.8); backdrop-filter: blur(14px) saturate(.8); box-shadow: 0 8px 30px rgba(22, 28, 37, .12), 0 0 0 1px rgba(255,255,255,.9) inset; }
.ld-mini[hidden] { display: none; }
.ld-mini .ld-char { position: absolute; left: 50%; top: 44%; width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2); transform-origin: 50% 92%; }
.ld-mini .ld-shadow { top: calc(44% + var(--ch) * .44); }
.ld-who { position: absolute; inset: 0; }
/* short phones: the archive tightens a little before the drawing has to give way */
@media (max-width: 720px) and (max-height: 620px) { html .home .layer { row-gap: 10px; padding-top: calc(56px + env(safe-area-inset-top, 0px)); } }
/* the narrowest phones (320–360 px) */
@media (max-width: 360px) {
  html .masthead nav { gap: 11px; } html .masthead .lang-sw { padding-left: 9px; }
  html .home .layer { column-gap: 5vw; }
  html .home .e .ti { font-size: 12px; line-height: 15px; }
  html .home .e .t { font-size: 8px; line-height: 10.5px; }
}

/* ================= phone HOME · three studies (?m=a / b / c; without one, the current v2 layout) ================= */
@media (max-width: 720px) {
  .mpick a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }
  html.m-a .mpick a[href="?m=a"], html.m-b .mpick a[href="?m=b"], html.m-c .mpick a[href="?m=c"], html:not(.m-a):not(.m-b):not(.m-c) .mpick a[href="?m=now"] { color: var(--pulse); }

  /* A · INDEX: the archive becomes a compact two-column index (number, title, category; the thumbnails step aside), so
     the drawing keeps about half the screen on every phone */
  html.m-a .home .layer { row-gap: 14px; column-gap: 8vw; }
  html.m-a .home .e, html.m-a .home .e.r { grid-template-columns: minmax(0, 1fr); gap: 1px 0; }
  html.m-a .home .e .img { display: none; }
  html.m-a .home .e .n { font-size: 9px; line-height: 12px; }
  html.m-a .home .e .ti { font-size: 13px; line-height: 16px; }
  html.m-a .home .e .t { font-size: 8.5px; line-height: 11px; }

  /* B · TWO SCREENS: the first screen is the drawing, large, with its title and the cue; the archive (v2's layout, with
     its thumbnails) is right below it, a scroll away */
  html.m-b .home { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 44px, #000 76px); mask-image: linear-gradient(to bottom, transparent 0, transparent 44px, #000 76px); }
  html.m-b .home .layer { position: absolute; top: 100%; bottom: auto; height: auto; -webkit-mask-image: none; mask-image: none;
    padding: 40px var(--gutter) calc(110px + env(safe-area-inset-bottom, 0px)); row-gap: 22px; }

  /* C · AROUND HER (refined): the positions are computed in the page (layoutC), fitting each work around the figure
     outline; here only the look: thumbnails at the outer edge, text toward her */
  html.m-c .home .layer { display: block; padding: 0; }
  html.m-c .home .e { position: absolute; grid-template-columns: 26px minmax(0, 1fr); gap: 1px 7px; }
  html.m-c .home .e.r { grid-template-columns: minmax(0, 1fr) 26px; }
  html.m-c .home .e .n { font-size: 9px; line-height: 12px; }
  html.m-c .home .e .ti { font-size: 12.5px; line-height: 15.5px; }
  html.m-c .home .e .t { font-size: 8.5px; line-height: 11px; }
  html.m-c.c-tight .home .e, html.m-c.c-tight .home .e.r { grid-template-columns: minmax(0, 1fr); } html.m-c.c-tight .home .e .img { display: none; }
}
}
/* A+C · hybrid: C's look; on screens without room for it, the index form of the same layout (c-tight: no thumbnails) */
@media (max-width: 720px) {
  html.m-h .mpick a[href="?m=c"] { color: var(--ink); } html.m-h .mpick a[href="?m=h"] { color: var(--pulse); }
}
@media (max-width: 720px) {
  /* the index form: number and title on one line (as an index reads), the category under them */
  html.h-compact .home .e { display: block; }
  html.h-compact .home .e .n { display: inline; margin-right: 6px; }
  html.h-compact .home .e .ti { display: inline; }
  html.h-compact .home .e .ti .hw { display: inline; } html.h-compact .home .e .ti .hw::after { display: none; }
  html.h-compact .home .e .t { display: block; }
}
/* A+C on the smallest phones (tinyLayout): HOME scrolls a little; masthead and footer stay, the page fades under them */
@media (max-width: 720px) {
  html.h-tiny .home { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 42px, #000 64px, #000 calc(100% - 46px), transparent calc(100% - 22px));
            mask-image: linear-gradient(to bottom, transparent 0, transparent 42px, #000 64px, #000 calc(100% - 46px), transparent calc(100% - 22px)); }
  /* her foot fades into the paper, so the drawing ends softly instead of on a straight cut */
  html.h-tiny .home .fig { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%); mask-image: linear-gradient(to bottom, #000 78%, transparent 99%); }
  html.h-tiny .home .wall, html.h-tiny .home .cue { text-shadow: none; }
  .tpick a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }
  html.t2 .tpick a[href$="t=2"], html:not(.t2) .tpick a[href$="t=1"] { color: var(--pulse); }
}
@media (max-width: 720px) {
  html.h-fit .home .wall, html.h-fit .home .cue { text-shadow: none; }
  html.ts1 .tpick a[href$="t=s1"], html.ts2 .tpick a[href$="t=s2"], html.ts3 .tpick a[href$="t=s3"] { color: var(--pulse); }
  html.ts1 .tpick a[href$="t=1"], html.ts2 .tpick a[href$="t=1"], html.ts3 .tpick a[href$="t=1"] { color: var(--ink); }
}
@media (max-width: 720px) {
  /* S1–S3 (320×480, no scroll): the index a touch more compact, the cue a touch smaller, so title and cue share one line */
  html.h-fit .home .e .n { font-size: 8.5px; line-height: 11px; margin-right: 5px; }
  html.h-fit .home .e { line-height: 14.5px; }
  html.h-fit .home .e .ti { font-size: 12px; line-height: 14.5px; }
  html.h-fit .home .e .t { font-size: 8px; line-height: 10px; margin-top: 1px; }
  html.h-fit .home .cue { font-size: 9.5px; line-height: 12px; letter-spacing: .06em; }
}
@media (max-width: 720px) {
  /* D1 · eight places: a compact index; the drawing's title and cue take the right column's fourth place */
  html.h-d1 .home .e { line-height: 13px; }
  html.h-d1 .home .e .n { font-size: 7.5px; line-height: 9.5px; margin-right: 4px; }
  html.h-d1 .home .e .ti { font-size: 11px; line-height: 13px; }
  html.h-d1 .home .e .t { font-size: 7px; line-height: 9px; margin-top: 2px; }
  html.h-d1 .home .wall { text-align: right; border-top: 1px solid var(--line); padding-top: 5px; }
  html.h-d1 .home .wall b { font-size: 12px; line-height: 15px; }
  html.h-d1 .home .cue { font-size: 8px; line-height: 10.5px; letter-spacing: .06em; }
  /* D2 · the strip: numbered thumbnails in a row; one caption line under it */
  html.h-d2 .home .layer { -webkit-mask-image: none; mask-image: none; }
  html.h-d2 .home .e, html.h-d2 .home .e.r { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; text-align: left; }
  html.h-d2 .home .e .ti, html.h-d2 .home .e .t { display: none; }
  html.h-d2 .home .e .n { grid-row: 1; font-size: 8.5px; line-height: 11px; }
  html.h-d2 .home .e .img, html.h-d2 .home .e.r .img { grid-row: 2; grid-column: 1; width: 100%; transition: transform .25s cubic-bezier(.33, 1, .68, 1), box-shadow .25s; }
  html.h-d2 .home .e.d2-on .img { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ink), 1px 3px 6px rgba(22, 28, 37, .14); }
  html.h-d2 .home .e.d2-on .n { color: var(--pulse); }
  html.h-d2 .home .wall, html.h-d2 .home .cue { text-shadow: none; }
  html.h-d2 .home .cue { font-size: 8.5px; line-height: 11px; letter-spacing: .06em; }
  html.d2-naming .home .wall, html.d2-naming .home .cue { visibility: hidden; }
  .d2-cap { position: absolute; z-index: 5; left: 16px; right: 16px; display: none; }
  html.h-d2 .d2-cap { display: block; }
  .d2-cap .n { font: 400 9px/16px var(--mono); letter-spacing: .08em; color: var(--pulse); margin-right: 6px; }
  .d2-cap .ti { font: 500 13px/16px var(--sans); color: var(--ink); }
  .d2-cap .t { display: block; margin-top: 2px; font: 400 8.5px/11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #4a5466; }
  html.h-d1 .tpick a[href$="t=d1"], html.h-d2 .tpick a[href$="t=d2"] { color: var(--pulse); }
  html.h-d1 .tpick a[href$="t=1"], html.h-d2 .tpick a[href$="t=1"] { color: var(--ink); }
}
/* the smallest phones' layouts are drawn for the screen as it is (the page's 520 px minimum height made it taller than a 480 px screen) */
html.h-fit .stage, html.h-tiny .stage { min-height: 0; }
/* D1 (320×480): the footer is only © 2026 Jessica Melo (Still is set aside on this screen) */
@media (max-width: 720px) { html.h-d1 #still, html.h-d1 #tidy { display: none !important; } }
@media (max-width: 720px) {
  html.h-d1s .home { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 40px, #000 56px); mask-image: linear-gradient(to bottom, transparent 0, transparent 40px, #000 56px); }
  html.h-d1s .foot { display: none; }
  .d1-foot { position: absolute; left: 16px; z-index: 4; }
  html.h-d1 .tpick a[href$="t=d1s"] { color: var(--ink); } html.h-d1s .tpick a[href$="t=d1s"] { color: var(--pulse); } html.h-d1s .tpick a[href$="t=d1"] { color: var(--ink); }
}
@media (max-width: 720px) {
  /* D1: with paper under her now, the foot of the drawing fades into it instead of ending on a straight line */
  html.h-d1 .home .fig { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%); mask-image: linear-gradient(to bottom, #000 80%, transparent 99%); }
}

/* ---------- the name: a step more present (?name=0 shows it as it was, to compare) ----------
   Same face, same place, same line box (16 px), so nothing around it moves: only its size, weight and tracking. */
html:not(.name-was) #home-link, html:not(.name-was) .in-mast { font-size: 16px; font-weight: 600; letter-spacing: -.005em; --w-on: 700; }
@media (max-width: 720px) {
  html:not(.name-was) #home-link, html:not(.name-was) .in-mast { font-size: 15px; letter-spacing: 0; }
}
@media (max-width: 360px) {
  html:not(.name-was) #home-link, html:not(.name-was) .in-mast { font-size: 14px; }
}
.npick a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }
html.name-was .npick a[href$="name=0"], html:not(.name-was) .npick a[href$="name=1"] { color: var(--pulse); }
@media (max-width: 340px) { html:not(.name-was) #home-link, html:not(.name-was) .in-mast { letter-spacing: -.015em; } }

/* ---------- the name in its red frame (?frame=0 shows it without, to compare) ----------
   The frame is drawn around the name, not by padding it, so the name and everything around it stay exactly where they
   are. Thin, in the site's one accent, square corners; its margins grow with the name. */
html:not(.frame-off) #home-link, html:not(.frame-off) .in-mast { position: relative; }
html:not(.frame-off) #home-link::before, html:not(.frame-off) .in-mast::before {
  content: ""; position: absolute; inset: -7px -10px; border: 1.5px solid var(--pulse); pointer-events: none; }
html:not(.frame-off) #home-link:focus-visible { outline: none; }
html:not(.frame-off) #home-link:focus-visible::before { border-width: 2.5px; }   /* keyboard focus: the frame itself thickens */
@media (max-width: 720px) {
  html:not(.frame-off) #home-link::before, html:not(.frame-off) .in-mast::before { inset: -6px -8px; border-width: 1.25px; }
  html:not(.frame-off) .studybar { top: calc(41px + env(safe-area-inset-top, 0px)) !important; }   /* preview chrome only: clear of the frame */
}
@media (max-width: 360px) {
  html:not(.frame-off) #home-link::before, html:not(.frame-off) .in-mast::before { inset: -5px -6px; }
}
@media (max-width: 340px) {
  html:not(.frame-off) #home-link::before, html:not(.frame-off) .in-mast::before { inset: -5px -5px; border-width: 1px; }
}
.fpick a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }
html.frame-off .fpick a[href$="frame=0"], html:not(.frame-off) .fpick a[href$="frame=1"] { color: var(--pulse); }
@media (max-width: 340px) { html:not(.frame-off) .masthead nav { gap: 9px; } html:not(.frame-off) .masthead .lang-sw { padding-left: 8px; } }   /* 320 px: room for the frame before TRABAJOS */
/* preview only: Vimeo tests panel */
#mcheck .vt-l { margin: 0; padding: 4px 14px 0; list-style: none; }
#mcheck .vt-l li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
#mcheck .vt-t { color: var(--ink); }
#mcheck .vt-a { display: flex; gap: 12px; white-space: nowrap; }
#mcheck .vt-a button, #mcheck .vt-a a { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
#mcheck .vt-s { grid-column: 1 / -1; color: var(--ink-muted); }
@media (max-width: 560px) { #mcheck .vt-l li { grid-template-columns: 1fr; } }
@media (max-width: 360px) { .studybar a[href="?return=1"] { display: none; } }
/* F1 (approved 5 Nov): below 375 px the "you are here" dot gets room on both sides: a touch smaller and closer to its
   own word, with a little more space before INFO. The name, its frame and the masthead's proportions are unchanged. */
@media (max-width: 374px) {
  html .masthead nav a[aria-current="page"]::before { left: -8px; width: 5px; height: 5px; margin-top: -2.5px; }
}
@media (min-width: 341px) and (max-width: 360px) { html .masthead nav { gap: 13px; } }
@media (max-width: 340px) {
  html .masthead nav #info-link { margin-left: 3px; }
  html:not(.frame-off) .masthead .lang-sw { padding-left: 6px; gap: 4.5px; }
}
/* F2 (approved 5 Nov): on phones and small tablets the project's top bar carries a soft fade of the project's own ground,
   so text scrolling up passes beneath it and disappears instead of colliding with "← Archive" and ES / EN. */
@media (max-width: 860px) {
  html .p-bar::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: -30px; pointer-events: none;
    background: linear-gradient(to bottom, var(--p-ground) 0%, color-mix(in srgb, var(--p-ground) 92%, transparent) 45%, color-mix(in srgb, var(--p-ground) 55%, transparent) 72%, color-mix(in srgb, var(--p-ground) 0%, transparent) 100%); }
}
/* F3 (approved 5 Nov): "Watch on Vimeo ↗" always on one line; the caption beside it wraps instead */
html .p-film-link { flex: 0 0 auto; white-space: nowrap; }
html .p-film-cap > .label { flex: 1 1 auto; min-width: 0; }
/* ---------- F4 · PROPOSAL ONLY (shown with ?ls=1 or ?ls=2 on a phone held sideways; not part of the approved design) ----------
   Both: the page is exactly one screen (the desktop's 520 px minimum height is what pushed HOME's foot off a 390 px
   screen); the intro keeps its composition, scaled to the short screen, with the hint at the foot clear of ENTRAR / ENTER.
   The archive uses the approved phone index (number, title, type, thumbnail), in the reading order of the phone layouts.
   L1 · Side by side: the archive in two columns on the left, the drawing's title in the right column's fourth place
        (as in D1); the drawing at full height on the right.
   L2 · Desktop, re-spaced: the drawing at full height in the middle; the archive in one column on each side (01–04 left,
        05–07 right), evenly spaced; the drawing's title and the cue at the foot, as on desktop. */
html.ls .stage { min-height: 0 !important; }
html.ls .v-a2 { --cw: min(34vw, 300px); --cy: 36vh; }
html.ls .v-a2 .in-langs { top: calc(var(--cy) + var(--ch) / 2 + 30px) !important; bottom: auto !important; }
html.ls .v-a2 .in-lang { min-height: 0 !important; }
html.ls .v-a2 .in-lang .w { font-size: 26px; }
html.ls .v-a2 .in-hint { bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; top: auto !important; }
html.ls .home .layer { --r: 150px; display: grid; align-content: start; gap: 12px 18px; }
/* the index entry, compact for the short screen: a small thumbnail, the number set into the title's first line, the type under it */
html.ls #stack a.e { position: static !important; width: auto !important; display: grid !important; grid-template-columns: 28px minmax(0, 1fr) !important; grid-template-rows: auto auto;
  column-gap: 9px; row-gap: 2px; text-align: left !important; align-items: start; }
html.ls #stack a.e .img { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 28px; }
html.ls #stack a.e .n { grid-column: 2; grid-row: 1; font-size: 9px; line-height: 15px; }
html.ls #stack a.e .ti { grid-column: 2; grid-row: 1; justify-content: flex-start !important; font-size: 12.5px; line-height: 15px; text-indent: 17px; }
html.ls #stack a.e .ti .hw { display: inline; } html.ls #stack a.e .ti .hw::after, html.ls #stack a.e .ti .hw::before { display: none !important; }
html.ls #stack a.e .t { grid-column: 2; grid-row: 2; font-size: 8.5px; line-height: 11px; }
html.ls .home .fig { height: calc(100vh - 58px); width: auto; bottom: 0; }
/* L1 */
html.ls1 { --lsC: 204px; --lsA: calc(34px + 2 * var(--lsC)); }
@media (max-width: 799px) { html.ls1 { --lsC: 176px; } }
@media (max-width: 699px) { html.ls1 { --lsC: 150px; } }
html.ls1 .home .layer { grid-template-columns: repeat(2, minmax(0, var(--lsC))); grid-template-rows: repeat(4, auto); grid-auto-flow: column;
  padding: calc(58px + env(safe-area-inset-top, 0px)) 0 0 max(16px, env(safe-area-inset-left, 0px)); }
html.ls1 .home .fig { --A: calc(100vw - 64px - var(--lsA) - 8px); --W: min(calc((100vh - 58px) * 16 / 9), calc(var(--A) / .57));
  width: var(--W) !important; height: calc(var(--W) * 9 / 16) !important; top: auto !important; bottom: 0 !important;
  left: calc(var(--lsA) + 8px + (var(--A) - .57 * var(--W)) / 2 - .25 * var(--W)) !important; }   /* the figure spans 25-82 % of its frame: it sits between the index and the footer's Still, never on them */
html.ls1 .home .wall { left: calc(max(16px, env(safe-area-inset-left, 0px)) + var(--lsC) + 18px) !important; right: auto !important; width: var(--lsC) !important; top: var(--ls-slot, auto) !important; bottom: auto !important; text-align: left; }
html.ls1 .home .cue { left: calc(max(16px, env(safe-area-inset-left, 0px)) + var(--lsC) + 18px) !important; right: auto !important; text-align: left; top: calc(var(--ls-slot, 0px) + 24px) !important; bottom: auto !important; }

/* Context (approved 5 Nov): where Entry and Context follow one another in one scroll (860 px and narrower), Context starts
   from its second paragraph, as the first is already under the title. Desktop, with separate screens, is unchanged. */
@media (max-width: 860px) { html #p-ctx.more > p:first-child { display: none; } }   /* Context reads on from the next paragraph (its own, or the concept's) */
@media (max-width: 799px) { html.ls1 .home .wall .lab { display: none !important; } }   /* L1 below 800 px: the drawing's title without its year line, as on phones */
html.ls1 .home .layer { padding-top: calc(66px + env(safe-area-inset-top, 0px)); }   /* clear of the name's frame */
@media (max-height: 365px) { html.ls1 .home .layer { padding-top: calc(62px + env(safe-area-inset-top, 0px)); row-gap: 8px; } }
.studybar .lpick { display: none; } @media (orientation: landscape) and (max-height: 500px) { .studybar .lpick { display: inline; } }   /* preview only: the sideways study link, only where it applies */
@media (min-width: 721px) { .studybar { max-width: min(560px, calc(100vw - 380px)); overflow-x: auto; scrollbar-width: none; } .studybar::-webkit-scrollbar { display: none; } }   /* preview only: the bar never covers the masthead or a project's bar; scroll it sideways for more */

/* ---------- F4 · PROPOSAL L2 (shown with ?ls=2 on a phone held sideways; not part of the approved design) ----------
   HOME and WORK let the page be as tall as their content needs and scroll, instead of squeezing into one screen.
   HOME: the archive in the left column at a readable size (one column below 760 px wide, two above), always visible;
   the drawing at the full height of the screen in the right column, staying in view (sticky) while the archive
   scrolls beside it; the drawing's title, the count and the footer follow the archive.
   WORK: the window sits just under the masthead and above the footer, and scrolls inside itself; its strip keeps a
   height the images can be read at (200-300 px) instead of shrinking to fit. */
html.ls2 { --W: calc((100vh - 52px) * 16 / 9); --lsC2: calc(100vw - 2 * max(16px, env(safe-area-inset-left, 0px)) - 20px - .57 * var(--W)); --lsN: 1; }
@media (min-width: 760px) { html.ls2 { --lsN: 2; } }
html.ls2, html.ls2 body { overflow-x: hidden; } html.ls2 body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
html.ls2 .stage { height: auto !important; min-height: 100% !important; }
html.ls2 .home { position: relative !important; inset: auto !important; display: grid; grid-template-columns: var(--lsC2) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 20px;
  min-height: 100vh; box-sizing: border-box; padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(60px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow: visible !important; overflow-x: clip !important; }   /* clip, not hidden: the drawing can stay in view as you scroll */
html.ls2 .home .layer { position: relative !important; inset: auto !important; grid-column: 1; grid-row: 1; z-index: 3; padding: calc(68px + env(safe-area-inset-top, 0px)) 0 0 !important;
  grid-template-columns: repeat(var(--lsN), minmax(0, 1fr)) !important; grid-auto-flow: row; gap: 16px 18px !important; -webkit-mask-image: none !important; mask-image: none !important; }
html.ls2 #stack a.e { grid-template-columns: 38px minmax(0, 1fr) !important; column-gap: 11px; }
html.ls2 #stack a.e .img { width: 38px; }
html.ls2 #stack a.e .n { font-size: 10px; line-height: 18px; }
html.ls2 #stack a.e .ti { font-size: 14px; line-height: 18px; text-indent: 20px; }
html.ls2 #stack a.e .t { font-size: 9.5px; line-height: 13px; }
html.ls2 .home .fig { position: sticky !important; top: 52px; margin-top: 52px; grid-column: 2; grid-row: 1 / span 3; align-self: start; width: var(--W) !important; height: calc(100vh - 52px) !important;
  left: auto !important; right: auto !important; bottom: auto !important; margin-left: calc(-.25 * var(--W)); clip-path: inset(0 0 0 25%); }   /* the frame's empty left quarter (and its long line) stays out of the archive's column */
html.ls2 .home .wall { position: relative !important; inset: auto !important; grid-column: 1; grid-row: 2; margin-top: 28px; width: auto !important; }
html.ls2 .home .cue { position: relative !important; inset: auto !important; grid-column: 1; grid-row: 3; margin-top: 10px; text-align: left !important; align-self: start;
  height: 16px; overflow: hidden; }   /* the count only: the archive is already in view, so "touch to look closer" is not needed */
html.ls2 .home .glow { position: fixed !important; }
html.ls2 .win { position: fixed !important; inset: calc(58px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(46px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) !important; overscroll-behavior: contain; }
html.ls2 .work { padding: 14px 20px 18px !important; row-gap: 14px !important; --edge-h: clamp(200px, calc(100vh - 150px), 300px) !important; --open-w: calc(var(--edge-h) * .8); }
html.ls2 .work .edges { margin-top: 6px !important; }
html.ls2 .edge:not(.on) a { width: 30px; }   /* the closed edges a little narrower, so the open one can be larger */
html.ls2 .stage.win-open .home .layer, html.ls2 .stage.win-open .home .wall, html.ls2 .stage.win-open .home .cue { visibility: hidden; }   /* WORK open: behind the window only the drawing, as on desktop */
html.ls2 .stage.win-open .foot { position: fixed; }   /* and the footer in its place under the window */

/* the project bar keeps its own height (44 px) and "← Archive" its own place: the language switch's slightly larger type no longer lifts the shared baseline */
.p-bar .lang-sw { margin-top: -1px; }
/* desktop: the language switch keeps to the masthead's own 16 px line, so the masthead stays 48 px and the name, WORK and INFO stay exactly where they are (the phone composition, approved and tested as it is, is not affected) */
html:not(.m-on) .masthead .lang-sw { line-height: 16px; height: 16px; align-items: center; }