/* NTVRLI 2026 editorial system — bone, ink, structure, human intervention. */
.evolution::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:99; opacity:.13; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }

.site-nav { min-height:5.25rem; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(1rem,4vw,4rem); padding:1.1rem var(--gut); position:relative; z-index:30; border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent); }
.wordmark { font-family:var(--face-sans); font-weight:800; font-size:1.3rem; line-height:1; text-decoration:none; letter-spacing:-.02em;
  display:inline-flex; align-items:center; min-height:44px; }
.navigation { justify-self:center; }
.navigation summary { display:none; }
.navigation:not([open]) summary { display:block; cursor:pointer; padding:.65rem; }
.navigation-links { display:flex; gap:clamp(1rem,2.6vw,2.75rem); align-items:center; }
.navigation a,.nav-cta { text-decoration:none; }
.navigation a { padding:.65rem 0; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
.navigation a:hover,.navigation a:focus-visible,.editorial-link:hover,.editorial-link:focus-visible { text-decoration:underline; text-underline-offset:.35em; }
.nav-cta { background:var(--ink); color:var(--bone); min-height:44px; display:flex; gap:1.5rem; align-items:center; padding:.75rem 1rem; }

.mass { text-wrap:balance; }
.editorial { font-family:var(--face-editorial); font-size:var(--t-say); line-height:1.48; max-width:40ch; }
.eyebrow-serif { font-family:var(--face-editorial); font-size:clamp(1.3rem,2.4vw,2.4rem); line-height:1.12; max-width:28ch; }
.serif-title { font-family:var(--face-editorial); font-size:clamp(1.55rem,2.7vw,2.8rem); line-height:1.08; font-weight:400; }
.editorial-link { display:inline-flex; min-height:44px; align-items:center; text-underline-offset:.35em; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; }

/* ══════════════════════════════════════════════════════════════════════
   SKETCH SYSTEM — the ruled construction field behind a secondary page's
   header (pages that carry no photograph). Decorative, aria-hidden. The
   hand-drawn markup everywhere else is markup.css and tools/markup/.

   The ladder: a section declares data-state="drafted|building|resolved"
   and every primitive inside it re-maps --sk-ink and --sk-dash. That one
   attribute IS the drafted-to-resolved narrative; nothing else encodes it,
   so the story cannot drift out of sync with the styling.
   ══════════════════════════════════════════════════════════════════════ */
[data-state="drafted"]  { --sk-ink:var(--sk-draft); --sk-dash:5 4; }
[data-state="building"] { --sk-ink:var(--sk-build); --sk-dash:10 3; }
[data-state="resolved"] { --sk-ink:var(--sk-final); --sk-dash:none; }

/* --sk-reveal defaults to 1: with no JavaScript the drawing is already
   complete. sketch-layer.js drives it from 0 as the section is read, wiping
   the field in left to right. A clip wipe rather than stroke-dashoffset,
   because the dash pattern is already carrying the drafted state. */
.sk-field { position:absolute; inset:0; width:100%; height:100%; color:var(--sk-ink); pointer-events:none; z-index:1; overflow:visible;
  clip-path:inset(0 calc(100% * (1 - var(--sk-reveal,1))) 0 0); }
.sk-field path,.sk-field rect,.sk-field circle,.sk-field ellipse,.sk-field line { fill:none; stroke:currentColor; stroke-width:var(--sk-hair); vector-effect:non-scaling-stroke; }
.sk-field .struct { stroke-dasharray:var(--sk-dash); }
.sk-field .reg { fill:currentColor; stroke:none; }
.sk-field .solid { stroke-dasharray:none; }

/* Reduced motion keeps every field fully drawn; only the wipe is removed. */
@media (prefers-reduced-motion:reduce) {
  .sk-field { clip-path:none; }
}

.act { min-height:78svh; padding:var(--band-pad) var(--gut); position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:clamp(1.5rem,3vw,3rem); overflow:hidden; }
.act > *:not(.sk-field){ position:relative; z-index:3; }
.act h2,.page-head h1 { font-size:var(--t-page); line-height:.94; max-width:15ch; }
.act-number { margin-bottom:clamp(1rem,2vw,2rem); }
.on-ink,.dark { --ground:var(--ink); --fg:var(--bone); --fg-quiet:#c7c4bd; --fg-accent:var(--bone); color:var(--fg); background:var(--ground); }
.on-bone { color:var(--ink); background:var(--bone); }

/* HERO — the owner's reference video, measured on its 1280×720 frame.
   Three columns in the video's proportions (type 490 : figure 540 : rail 85),
   the headline stacked in two lines at 38vw, the supporting lines in small
   tracked mono, the figure standing in the middle column on the hero's
   bottom rule, and a construction field behind figure and rail that carries
   the hand-drawn markup (markup.css, motion.js). */
.arrival { --hero-top:clamp(1.75rem,8vh,4.75rem);
  position:relative; display:grid; min-height:calc(100svh - 5.25rem);
  grid-template-columns:minmax(0,490fr) minmax(0,540fr) minmax(0,85fr);
  grid-template-rows:minmax(0,1fr) auto; column-gap:1.5rem;
  padding:var(--hero-top) var(--gut) 0; overflow-x:clip; }
/* The bottom rule the figure stands on. */
.arrival::after { content:""; position:absolute; left:var(--gut); right:var(--gut); bottom:0; z-index:3;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 26%,transparent); }
.arrival-lede { grid-column:1; grid-row:1; align-self:start; position:relative; z-index:4;
  display:grid; justify-items:start; gap:clamp(1.25rem,3.6vh,2.1rem); }
/* The hero's small type keeps the video's proportion to the headline as the
   screen widens (13px at 1280), up to a cap. */
.arrival :is(.micro,.action) { font-size:clamp(var(--t-micro),1.02vw,1.1rem); }
.hero-statement { font-family:var(--face-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(3.2rem,8.6vw,13rem); line-height:.9; letter-spacing:0; margin-bottom:.1rem; }
.hero-line { display:block; white-space:nowrap; }
.hero-support { color:var(--ink); line-height:1.75; }
.hero-actions { gap:1rem 1.75rem; }
.hero-secondary { display:inline-flex; align-items:center; gap:.9rem; min-height:44px; text-decoration:none; position:relative; }
.mk-swash { left:calc(100% + .9em); top:calc(50% - .1em); width:7.7em; height:4em; }
.hero-secondary i { width:2.25rem; border-top:1px solid currentColor; }
.hero-secondary:hover,.hero-secondary:focus-visible { text-decoration:underline; text-underline-offset:.35em; }
.hero-note { grid-column:1; grid-row:2; align-self:end; position:relative; z-index:4; color:var(--ink);
  line-height:1.75; max-width:27em; text-wrap:balance; padding:clamp(1.5rem,4vh,2.5rem) 0 clamp(2.25rem,7vh,4rem); }
/* The big ring and swash hang off the end of the headline, in em units, so
   they scale with the type they answer. */
.mk-anchor { position:relative; display:inline-block; width:0; height:1em; vertical-align:baseline; }
.mk-lede { left:-1.16em; top:.69em; width:1.51em; height:2.12em; }

/* contain:size — the figure takes the height the grid gives it and never
   asks for more. Without it the SVG's viewBox aspect becomes the figure's
   intrinsic height, the row grows to fit it, and the hero overflows. */
.arrival-figure { grid-column:2; grid-row:1/3; align-self:end; justify-self:stretch; height:72%;
  position:relative; z-index:2; min-width:0; contain:size; }
.sk-figure { display:block; width:100%; height:100%; overflow:visible; }
.sk-figure .fig-base { fill:var(--ink); }
.sk-figure.mk-retrace { position:absolute; inset:0; }

/* The field spans figure and rail, from the top of the hero to its rule. */
.arrival-field { grid-column:2/4; grid-row:1/3; position:relative; z-index:1; contain:size; margin-top:calc(-1 * var(--hero-top)); }
.arrival-field .mk-field { inset:0; width:100%; height:100%; }
.arrival-place { position:absolute; right:0; bottom:6.5%; color:var(--fg-quiet); }

/* The method list and engagement list on /approach. */

.method-list { list-style:none; width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:clamp(1rem,3vw,3rem); }
.method-list li { padding:1.5rem 1.5rem 1.5rem 0; border-top:1px solid currentColor; }
.method-list h3 { font-family:var(--face-mass); font-size:clamp(1.1rem,2vw,1.8rem); text-transform:uppercase; margin:.8rem 0; }
.method-list p { max-width:25ch; }

.engagement-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; border-top:1px solid color-mix(in srgb,var(--ink) 28%,transparent); }
.engagement-list article { padding:1.5rem 1.5rem 2rem 0; display:grid; gap:1rem; }
.engagement-list h3 { font-family:var(--face-mass); text-transform:uppercase; font-size:clamp(1.2rem,2vw,2rem); }

/* The secondary-page header, in the homepage's identity: mono label, Anton
   statement, Inter lede on the left; on the right one of the owner's toned
   landform photographs in a pencil frame with a terracotta mark, or — where a
   page should carry no image — the ruled construction field. */
.page-head { position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,5rem); align-items:end; min-height:min(78svh,52rem);
  padding:clamp(3rem,10vh,6rem) var(--gut) clamp(3rem,8vh,5rem);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent); }
.page-head-text { display:grid; gap:1.4rem; align-content:end; position:relative; z-index:3; }
.page-head h1 { font-size:clamp(3.4rem,8.2vw,9rem); line-height:.9; max-width:none; }
.page-head .editorial { max-width:42ch; }
.page-photo { position:relative; margin:0; align-self:end; }
.page-photo img { display:block; width:100%; height:auto; max-height:min(64svh,40rem); object-fit:cover; }
.page-photo--tall { justify-self:end; width:min(100%,24rem); }
.mk-overrun { left:-.7rem; top:-.7rem; width:calc(100% + 1.4rem); height:calc(100% + 1.4rem); }
.mk-photo-marks { left:-5.25rem; top:-5%; width:200px; height:160px; }
.page-field { position:relative; align-self:stretch; min-height:18rem; }
.page-field .sk-field { color:var(--mk-construct); }
.page-field .sk-field .struct { stroke-dasharray:none; }
/* /studio — the founder portrait as a colour-block collage (the owner's third
   reference video): pasted planes behind and around, the photograph, crayon
   paint clipped to the figure, pencil construction lines over everything. */
.page-portrait { position:relative; margin:0; justify-self:center; width:min(100%,26rem); aspect-ratio:760/1146; isolation:isolate; }
.page-portrait img, .page-portrait .mk-layer { position:absolute; inset:0; width:100%; height:100%; }
.page-portrait img { z-index:1; }
.pp-plane { position:absolute; z-index:0; }
.pp-a { left:-12%; top:22%; width:56%; height:48%; background:var(--mk-terra); }
.pp-b { right:-10%; top:34%; width:22%; aspect-ratio:1; background:var(--mk-teal); }
.pp-c { left:14%; top:6%; width:36%; height:3.5%; background:var(--mk-yellow); }
.pp-d { right:4%; bottom:10%; width:40%; height:4%; background:var(--mk-blue); z-index:2; }
/* Specificity above .mk-layer.mk-crayon (markup.css loads later), so this
   two-layer mask — wax tooth AND the figure — is the one that applies. */
.page-portrait .mk-layer.portrait-paint { z-index:2;
  -webkit-mask-image:url("texture/crayon.webp"), var(--founder); mask-image:url("texture/crayon.webp"), var(--founder);
  -webkit-mask-size:210px, 100% 100%; mask-size:210px, 100% 100%;
  -webkit-mask-repeat:repeat, no-repeat; mask-repeat:repeat, no-repeat;
  -webkit-mask-composite:source-in; mask-composite:intersect; }
.page-portrait .portrait-lines { z-index:3; overflow:visible; }
@media (max-width:900px) {
  .page-head { grid-template-columns:1fr; min-height:0; }
  .page-portrait { justify-self:start; width:min(80%,20rem); margin-left:12%; }
  .page-photo--tall { justify-self:start; width:min(100%,20rem); }
  .page-field { display:none; }
  .mk-photo-marks { display:none; }
}
.editorial-section { padding:var(--band-pad) var(--gut); display:grid; gap:2rem; border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent); }
.editorial-section > h2 { font-size:var(--t-mass); line-height:.94; max-width:18ch; }
.capability-detail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,4rem); margin-top:2rem; }
.capability-detail div { padding-top:1rem; border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent); }
.capability-detail dt { margin-bottom:1rem; }
.capability-detail dd { font-family:var(--face-editorial); font-size:var(--t-lead); line-height:1.48; max-width:34ch; }
.method-page .method-list { margin:0; }
.origins { display:grid; grid-template-columns:1fr 2fr; gap:1rem 3rem; max-width:70rem; }
.origins dt { font-family:var(--face-mass); text-transform:uppercase; }
.origins dd { margin-bottom:1rem; }
.case-phase { grid-template-columns:minmax(8rem,1fr) minmax(18rem,1.5fr) minmax(18rem,1fr); align-items:start; }
.case-phase > h2 { font-size:clamp(2rem,4vw,4rem); }
.contact-layout { grid-template-columns:minmax(16rem,.7fr) minmax(20rem,1fr); align-items:start; }

.lost-routes { list-style:none; display:grid; gap:0; width:min(100%,52rem); }
.lost-routes li { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.5rem;
  padding:1.1rem 0; border-top:var(--sk-hair) solid color-mix(in srgb,var(--ink) 22%,transparent); }
.lost-routes a { display:inline-flex; align-items:center; min-height:44px; font-family:var(--face-mass); font-size:var(--t-sub); text-transform:uppercase;
  letter-spacing:var(--track-mass); text-decoration:none; }
.lost-routes a:hover,.lost-routes a:focus-visible { text-decoration:underline; text-underline-offset:.3em; }
.lost-routes .micro { color:var(--fg-quiet); margin-left:auto; }

.legal-copy { max-width:none; }
.legal-copy h2 { font-family:var(--face-mass); text-transform:uppercase; }
.legal-copy p,.legal-copy li { font-family:var(--face-editorial); font-size:var(--t-lead); line-height:1.62; max-width:68ch; }
.legal-copy ul { display:grid; gap:1rem; padding-left:1.25rem; }
.legal-copy a { overflow-wrap:anywhere; }
.intake { display:grid; gap:2rem; width:min(100%,48rem); }
.intake input,.intake textarea,.intake select { width:100%; min-width:0; min-height:48px; font:inherit; color:var(--fg); background:transparent; }
.intake textarea,.intake select { padding:1rem; border:0; border-bottom:1px solid currentColor; }
.intake button { justify-self:start; }
.intake button:disabled { opacity:.55; cursor:wait; }
.audit-context summary { cursor:pointer; padding-block:1rem; }
.honeypot { position:absolute; left:-10000px; }
[hidden] { display:none!important; }

@media (max-width:900px) {
  .site-nav { grid-template-columns:auto auto; }
  .navigation { justify-self:end; }
  .navigation summary { display:block; min-height:44px; padding:.6rem; cursor:pointer; }
  .navigation:not([open]) .navigation-links { display:none; }
  .navigation-links { position:absolute; left:var(--gut); right:var(--gut); top:4.5rem; display:grid; padding:1rem; background:var(--bone); border:1px solid var(--ink); box-shadow:0 1rem 2rem rgb(0 0 0 / .12); }
  .navigation a { min-height:44px; display:flex; align-items:center; }
  .nav-cta { display:none; }
  
  
  .method-list,.engagement-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  
  
  
  
  .capability-detail { grid-template-columns:1fr; }
  .case-phase,.contact-layout { grid-template-columns:1fr; }
  
  /* The hero becomes one column: type, then the figure on the rule, then the
     note. The field layer and rail do not come along — at this width they
     would crowd the figure into a sliver — so the phone keeps a curated
     subset of the markup: the retrace, the word boxes, the loop and the
     ring, all of which are anchored to what they mark. */
  .arrival { min-height:0; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto;
    padding-top:clamp(1.5rem,6vw,2.5rem); }
  .arrival-lede { grid-row:1; }
  .arrival-figure { grid-column:1; grid-row:2; height:auto; width:min(100%,28rem); aspect-ratio:var(--fig-ratio); margin-top:clamp(2rem,8vw,3rem); justify-self:center; }
  .hero-note { grid-row:3; padding-top:1.5rem; }
  .arrival-field { display:none; }
  .hero-statement { font-size:clamp(3.2rem,19vw,9rem); }
  .hero-support { text-wrap:balance; }
  .hero-support br { display:none; }
  .mk-swash { display:none; }
  .arrival :is(.micro,.action) { font-size:var(--t-micro); }
}

/* MOBILE */
@media (max-width:760px) {
  .site-nav { min-height:4.5rem; }
  .act { min-height:auto; padding-block:clamp(4rem,16vw,6rem); }
  .method-list,.engagement-list{ grid-template-columns:1fr; }
  .method-list li,.engagement-list article { border-top:var(--sk-hair) solid currentColor; }
  
  
  
  
  
  
  .origins { grid-template-columns:1fr; }
  
}

/* FOOTER — sitewide, as the reference video closes the page: typed NTVRLI,
   the name lettered by hand beside it, the links circled and underlined in
   marker (markup.css; drawn by scroll on the homepage only). */
/* The footer is always ink on bone, so it pins its own role tokens: a page
   that re-maps --fg (Seed recolours the page per generated scene) must not
   turn the footer's text pale on its bone ground — the audit caught 2.0:1. */
.site-footer { --fg:var(--ink); --ground:var(--bone); --fg-quiet:var(--slate);
  background:var(--bone); color:var(--ink); padding:clamp(3rem,7vh,5rem) var(--gut) 2rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent); }
.footer-top { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr); gap:2rem 3rem; align-items:center;
  padding-bottom:clamp(2rem,5vh,3rem); border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent); }
.footer-wordmark { display:inline-flex; align-items:center; min-height:44px; font-family:var(--face-sans); font-weight:800; font-size:clamp(2rem,3.4vw,2.9rem); letter-spacing:-.02em; line-height:1; text-decoration:none; }
.footer-brand .micro { margin-top:1.1rem; line-height:1.7; }
.footer-sign { position:relative; aspect-ratio:330/118; max-width:22rem; width:100%; }
.footer-sign .mk-signature { inset:0; width:100%; height:100%; }
.footer-links { list-style:none; display:grid; grid-template-columns:auto auto; gap:.4rem 2.5rem; justify-content:end; }
.footer-links a { display:inline-flex; align-items:center; min-height:44px; font-family:var(--face-sans); font-weight:600;
  font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px; }
.footer-links a.mk-word { text-decoration:none; }
.footer-legal { display:flex; flex-wrap:wrap; align-items:center; gap:0 2rem; padding-top:1rem; }
/* 44px hit areas: the audit measured these at 21px, under WCAG's 24px. */
.footer-legal a { display:inline-flex; align-items:center; min-height:44px; }
@media (max-width:900px) {
  .footer-top { grid-template-columns:1fr; }
  .footer-links { justify-content:start; }
}

/* SELECTED WORK — shared by the homepage (section 05) and /work. Dark panels
   over graphite drawings of the real work, on hairlines that overrun the
   grid. --inset is the reference video's inner margin (193px at 1280): the
   drawing sits inset from the page like a sketch on a sheet. */
:root { --inset:clamp(0rem,10.4vw - 3.7rem,9.5rem); }
.work { position:relative; padding:clamp(2rem,6vh,3.5rem) var(--gut) clamp(4rem,10vh,6rem); }
.work-title { font-family:var(--face-display); font-weight:400; text-transform:uppercase; line-height:.95;
  font-size:clamp(2.6rem,6vw,6.4rem); margin-left:clamp(0rem,3.5vw,3.5rem); }
.work-num { margin-right:.12em; }
.work-grid { position:relative; display:grid; grid-template-columns:minmax(0,282fr) minmax(0,332fr) minmax(0,280fr);
  margin:clamp(2rem,5vh,3rem) 0 0 var(--inset); max-width:70rem; }
.work-grid::before { content:""; position:absolute; inset:0 -1.75rem; pointer-events:none;
  border-block:1px solid color-mix(in srgb,var(--ink) 22%,transparent); }
.work-col { position:relative; display:grid; grid-template-rows:repeat(2,clamp(17rem,27vw,23rem)); }
.work-col::before { content:""; position:absolute; left:0; top:-1.5rem; bottom:-1.5rem; pointer-events:none;
  border-left:1px solid color-mix(in srgb,var(--ink) 22%,transparent); }
.work-col:last-child::after { content:""; position:absolute; right:0; top:-1.5rem; bottom:-1.5rem; pointer-events:none;
  border-right:1px solid color-mix(in srgb,var(--ink) 22%,transparent); }
.work-panel { position:relative; background:#1B1B1A; color:var(--bone); --fg:var(--bone); overflow:visible; }
.work-text { display:flex; flex-direction:column; padding:clamp(1.25rem,2vw,1.75rem); text-decoration:none; }
.work-text .micro { color:var(--raw); }
.work-text h3 { font-family:var(--face-sans); font-weight:400; font-size:clamp(1.35rem,.9rem + 1.1vw,2rem);
  line-height:1.15; letter-spacing:-.015em; margin-top:.9rem; max-width:13ch; position:relative; }
.work-go { position:relative; margin-top:auto; align-self:flex-start; display:inline-flex; gap:.6rem; align-items:center;
  min-height:44px; padding:.35rem 1.1rem; border:1px solid color-mix(in srgb,var(--bone) 55%,transparent); border-radius:999px;
  font-family:var(--face-mono); font-size:var(--t-micro); font-weight:var(--micro-weight); letter-spacing:var(--track-micro); text-transform:uppercase; }
.work-go > span { position:relative; z-index:1; }
.work-text:hover .work-go,.work-text:focus-visible .work-go { background:var(--bone); color:var(--ink); }
.work-text:focus-visible { outline:2px solid var(--bone); outline-offset:-6px; }
.work-drawing { border-top:1px solid #2a2927; border-bottom:1px solid #2a2927; }
/* The drawing on its sheet, as in the owner's panels: paper set into the dark
   panel, a chalk frame overrunning its corners, the hatch strip below. */
.work-art { position:absolute; left:clamp(.9rem,1.6vw,1.4rem); right:clamp(.9rem,1.6vw,1.4rem); top:clamp(.9rem,1.6vw,1.4rem); bottom:4.9rem; }
.work-art img { display:block; width:100%; height:100%; object-fit:cover; }
/* A corner of the sheet folded back. */
.work-art--torn::after { content:""; position:absolute; right:0; bottom:0; width:32%; aspect-ratio:1;
  background:linear-gradient(135deg,transparent 49.5%,#EFEBE2 50%,#E2DDD2); clip-path:polygon(100% 0,100% 100%,0 100%); }
.mk-work-swash { left:-3.5rem; top:15%; width:min(620px,64%); height:240px; z-index:3; }
.mk-work-exit { left:calc(-1 * var(--inset) - 1rem); bottom:-17rem; width:220px; height:420px; z-index:3; }
.work-all { margin:1.75rem 0 0 var(--inset); max-width:70rem; text-align:right; }

.work--page { padding-block:clamp(3rem,8vh,5rem); }
.work--page .work-grid { margin-top:0; }
.work--page .mk-work-exit { display:none; }
@media (max-width:900px) {
  .mk-work-swash,.mk-work-exit { display:none; }
  .work-grid,.work-all { margin-left:0; }
  .work-grid { grid-template-columns:1fr; gap:1.5rem; }
  .work-grid::before,.work-col::before,.work-col:last-child::after { display:none; }
  .work-col { grid-template-rows:auto clamp(14rem,60vw,20rem); }
  .work-col:nth-child(2) .work-drawing { order:2; }
  .work-text { min-height:15rem; }
}