/* The Ümbe identity page (/work/umbe/): the studio's own system, drawn live from the site's own marks (media/marks.svg),
   pair tokens and motion primitives (base.css). Only the layouts live here. */
.id-o{padding-inline:var(--pad)}
.id-sec{--ink:var(--slate)}

/* 01 the red star */
.id-mark{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:2rem;padding-inline:var(--pad);align-items:end}
.id-hero{grid-column:1/7;aspect-ratio:1;display:grid;place-items:center;background:var(--creme);outline:1px solid var(--rule)}
.id-hero svg{width:72%;height:auto;fill:var(--red)}
.id-scale{grid-column:7/13;display:flex;align-items:flex-end;flex-wrap:wrap;gap:1.4rem 2rem;padding-bottom:0.4rem}
.id-scale svg{width:var(--z);height:var(--z);fill:var(--red)}
.id-scale .ml{flex-basis:100%;opacity:.78}
.id-grounds{grid-column:7/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.id-grounds p{aspect-ratio:1;display:grid;place-items:center;align-content:center;gap:0.6rem;margin:0}
.id-grounds svg{width:46%;height:auto}
.id-grounds .ml{background:var(--creme);color:var(--slate);padding:0.1rem 0.35rem}
.id-grounds .g1{background:var(--creme);outline:1px solid var(--rule)}.id-grounds .g1 svg{fill:var(--red)}
.id-grounds .g2{background:var(--red);color:var(--creme)}.id-grounds .g2 svg{fill:var(--creme)}.id-grounds .g2 .ctr{fill:var(--red)}
.id-grounds .g3{background:var(--slate);color:var(--creme)}.id-grounds .g3 svg{fill:var(--red)}
.id-sec .cs2-text{margin-top:clamp(2rem,3vw,3rem)}

/* 02 the family */
.id-family{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);padding-inline:var(--pad)}
.id-family li{display:grid;gap:0.6rem;align-content:start}
.id-family svg{width:100%;height:auto;aspect-ratio:1;color:var(--c);fill:currentColor;background:var(--creme);outline:1px solid var(--rule);padding:12%;
  -webkit-mask:url("/media/grain.png") 0 0/200px;mask:url("/media/grain.png") 0 0/200px}
.id-fn{font:900 clamp(1.4rem,1rem + 1.2vw,2.2rem)/1 var(--ff-black);letter-spacing:-0.04em;margin-top:0.6rem}
.id-family p:not(.id-fn),.id-motion p:not(.id-fn){font:500 0.9375rem/1.45 var(--ff-head);max-width:30ch}

/* 03 printed, not placed */
.id-print{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:2rem;padding-inline:var(--pad);align-items:center}
.id-press{grid-column:1/8;position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--creme);outline:1px solid var(--rule);isolation:isolate}
.id-press .stp{mix-blend-mode:multiply}
.id-rules{grid-column:8/13;display:grid;gap:1rem;counter-reset:r}
.id-rules li{counter-increment:r;display:grid;grid-template-columns:2rem 1fr;font:500 clamp(1.05rem,0.95rem + 0.3vw,1.25rem)/1.35 var(--ff-head);border-top:2px solid currentColor;padding-top:0.7rem}
.id-rules li::before{content:counter(r,decimal-leading-zero);font:700 0.6875rem/1.9 var(--ff-head)}

/* 04 letters: the print hangs beside the proof */
.id-sec:has(.id-printframe){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:clamp(2rem,3vw,3rem);padding-inline:var(--pad);align-items:start}
.id-sec:has(.id-printframe) > *{grid-column:1/-1}
.id-sec:has(.id-printframe) > .cs2-rule{margin-inline:0;margin-bottom:0}
.id-sec:has(.id-printframe) > .cs2-plate{padding-inline:0}
.id-sec:has(.id-printframe) > .cs2-plate:nth-of-type(1){grid-column:1/9}
.id-sec:has(.id-printframe) > .cs2-plate:nth-of-type(2){grid-column:9/13;margin-top:clamp(3rem,8vw,8rem)}
.id-sec:has(.id-printframe) > .cs2-text{padding-inline:0}
.id-printframe{padding:clamp(4px,0.5vw,9px);background:linear-gradient(135deg,#DDBB90 0%,#C89D6E 30%,#E2C29B 52%,#BD9163 78%,#D6B084 100%)}

/* 05 the pairs, as small two-colour prints */
.id-pairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);padding-inline:var(--pad)}
.id-pairs li{position:relative;aspect-ratio:5/7;overflow:hidden;background:var(--pf);color:var(--pi);display:flex;flex-direction:column;justify-content:flex-end;gap:0.2rem;padding:0.9rem}
.id-pairs b{position:absolute;left:0.04em;top:0.1em;color:var(--pg);font:900 clamp(7rem,1rem + 16vw,17rem)/1 var(--ff-black);letter-spacing:-0.06em}
.id-pairs .ml{position:relative;z-index:1;width:fit-content;background:var(--creme);color:var(--slate);padding:0.1rem 0.3rem;margin-left:-0.3rem}

/* 06 type */
.id-type{display:grid;gap:clamp(2rem,3vw,3.5rem);padding-inline:var(--pad)}
.id-type .ml{display:block;margin-bottom:0.7rem;opacity:.78}
.id-t1{font:900 clamp(3rem,1rem + 7vw,8.5rem)/0.86 var(--ff-black);letter-spacing:-0.06em}
.id-t2{font:700 clamp(0.9rem,0.8rem + 0.4vw,1.2rem)/1.3 var(--ff-head);letter-spacing:0.02em}
.id-t3{font:400 clamp(1.25rem,1rem + 1vw,2rem)/1.35 var(--ff-text);max-width:34ch}

/* 07 fitted or cropped: the word is measured against its own sheet (container units) */
.id-comp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);padding-inline:var(--pad)}
.id-comp figure{display:grid;gap:0.7rem;margin:0;container-type:inline-size}
.id-fit p,.id-crop p{overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;margin:0}
.id-fit p{background:var(--p-moss);color:var(--p-lime);padding-inline:6%;font:900 calc(88cqw / var(--fit))/0.8 var(--ff-black);letter-spacing:-0.045em;white-space:nowrap}
.id-crop p{background:var(--p-cobalt);color:var(--p-pink);justify-content:center;font:900 46cqw/0.8 var(--ff-black);letter-spacing:-0.07em;white-space:nowrap}
.id-comp figcaption{opacity:.78}

/* 08 motion: each tile runs one primitive as it scrolls through */
.id-motion{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gut);padding-inline:var(--pad)}
.id-motion li{display:grid;gap:0.5rem;align-content:start}
.id-demo{position:relative;aspect-ratio:1;overflow:hidden;background:var(--creme);outline:1px solid var(--rule);display:grid;place-items:center}
.id-word{font:900 clamp(1.6rem,1rem + 2vw,3rem)/1 var(--ff-black);letter-spacing:-0.05em;color:var(--slate)}
.id-sep span{display:inline-block}
.id-mask{width:56%}
.id-mask img{width:100%;height:auto}

/* 09 three rounds */
.id-rounds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);padding-inline:var(--pad);align-items:start}
.id-rounds .cs2-plate{padding-inline:0}
.id-rounds .cs2-plate:nth-child(2){margin-top:clamp(2rem,5vw,5rem)}

@media (max-width:1100px){.id-motion{grid-template-columns:repeat(3,minmax(0,1fr))}.id-pairs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:759px){
  .id-mark,.id-print{grid-template-columns:1fr}
  .id-hero,.id-scale,.id-grounds,.id-press,.id-rules{grid-column:1/-1}
  .id-family,.id-pairs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .id-comp,.id-rounds{grid-template-columns:1fr}
  .id-rounds .cs2-plate:nth-child(2){margin-top:0}
  .id-motion{grid-template-columns:repeat(2,minmax(0,1fr))}
  .id-sec:has(.id-printframe) > .cs2-plate:nth-of-type(n){grid-column:1/-1;margin-top:0}
  .id-sec:has(.id-printframe) > .cs2-plate:nth-of-type(2){width:70%}
}