/* Personal design language: clearer type and tools of product design. */
.hero { min-height: 880px; padding-top: 168px; }
.hero-stage { padding: 26px 11% 64px; }
.hero h1 {
 font-size: clamp(54px, 7.7vw, 112px);
 letter-spacing: -.012em;
 line-height: 1.14;
 font-kerning: normal;
 font-variant-ligatures: none;
}
.hero-line { gap: .3em; margin-bottom: .32em; }
.hero-line:last-child { font-size: .77em; gap: .25em; margin-bottom: 0; }
.word { padding: .07em .22em .12em; }
/* Shared stepped corners for every text backplate. */
.hero .word,
.highlight,
.highlight.yellow,
.highlight.lavender {
 --plate-notch: clamp(4px, .12em, 12px);
 border-radius: 0;
 clip-path: polygon(
  0 var(--plate-notch),
  var(--plate-notch) var(--plate-notch),
  var(--plate-notch) 0,
  calc(100% - var(--plate-notch)) 0,
  calc(100% - var(--plate-notch)) var(--plate-notch),
  100% var(--plate-notch),
  100% calc(100% - var(--plate-notch)),
  calc(100% - var(--plate-notch)) calc(100% - var(--plate-notch)),
  calc(100% - var(--plate-notch)) 100%,
  var(--plate-notch) 100%,
  var(--plate-notch) calc(100% - var(--plate-notch)),
  0 calc(100% - var(--plate-notch))
 );
}
/* White word plates invert softly with hover, keyboard focus, or touch. */
.hero .word {
 background: #fff;
 color: #141210;
 border: 0;
 font: inherit;
 letter-spacing: inherit;
 cursor: pointer;
 transform: none;
 box-shadow: 0 2px 0 #1412100c;
 transition: background-color .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.hero .word:not([data-color]):focus-visible {
 background: #111;
 color: #fff;
 transform: translateY(-3px);
 box-shadow: 0 5px 12px #14121012;
}
@media (hover: hover) and (pointer: fine) {
 .hero .word:not([data-color]):hover {
  background: #111;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 5px 12px #14121012;
 }
}
@media (hover: none) {
 .hero .word:hover { transform: none; }
}
.highlight,
.highlight.yellow,
.highlight.lavender {
 background: color-mix(in srgb, var(--ink) 7%, var(--paper));
 color: var(--ink);
 rotate: 0deg;
}
.hero-copy { margin-top: 18px; max-width: 550px; line-height: 1.75; }
.design-object {
 position: absolute;
 z-index: 3;
 pointer-events: none;
 translate: var(--pointer-x, 0px) var(--pointer-y, 0px);
 transition: translate .65s cubic-bezier(.2,.7,.2,1);
 animation: design-drift 7s ease-in-out infinite;
}
.design-object svg { width: 100%; height: 100%; stroke: #24241d; stroke-width: 2; }
.object-bezier {
 left: 2.8%; top: 9%; width: 125px; height: 134px;
 background: #f8f6ed; border: 1px solid #c5c2b7; border-radius: 12px;
 box-shadow: 0 5px 0 #14121015; rotate: -13deg;
}
.object-bezier svg { height: 105px; }
.object-caption { display:block; text-align:center; color:#535348; font: 9px var(--mono); letter-spacing: .3px; }
.object-bezier .guide { stroke:#9c9c8f; stroke-width:1.3; }
.object-bezier .curve { stroke:#303b16; stroke-width:3; stroke-dasharray:150; animation: draw-curve 5s ease-in-out infinite; }
.object-bezier .handle { fill:#f8f6ed; }
.object-bezier .anchor { fill:#c3f53c; }
.object-wireframe { width:132px; height:114px; right:2%; top:0; rotate:12deg; animation-delay:-2s; }
.object-wireframe .canvas { fill:#f8f6ed; }
.object-wireframe .layout-main { fill:#c3f53c; }
.object-wireframe .layout-small { fill:#d9d8cf; }
.object-wireframe .wire-lines { stroke-width:2; }
.object-wireframe .layout-main { animation: layout-pulse 6s ease-in-out infinite; }
.object-tokens { width:110px; height:126px; left:5%; bottom:-12px; rotate:-14deg; animation-delay:-4s; }
.swatch { position:absolute; display:block; width:65px; height:104px; left:18px; top:0; border:1.5px solid #24241d; border-radius:6px; transform-origin:50% 90%; box-shadow:2px 3px 0 #14121015; }
.swatch-purple { background:#b8b9ae; rotate:-27deg; }
.swatch-orange { background:#e2e0d6; rotate:0deg; }
.swatch-lime { background:#c3f53c; rotate:25deg; }
.swatch-lime i { display:block; background:#f8f6ed; border-top:1.5px solid #24241d; position:absolute; left:0; right:0; bottom:0; height:32px; border-radius:0 0 5px 5px; }
.swatch-lime span { position:absolute; bottom:11px; left:6px; color:#24241d; font:8px var(--mono); }
.object-selection { width:102px; height:108px; right:4.5%; bottom:-8px; rotate:11deg; animation-delay:-1s; }
.object-selection .selection-outline { fill:#c3f53c22; stroke:#4a5d1b; stroke-dasharray:5 3; }
.object-selection .selection-handle { fill:#f8f6ed; stroke:#4a5d1b; }
.object-selection .pointer { fill:#f8f6ed; stroke-width:2.5; animation: cursor-nudge 5s ease-in-out infinite; }
/* Each company gets a block fitted to its own wordmark. */
.brick-stack { max-width: 880px; padding-inline: 0; }
.brick-row { justify-content:center; gap:26px; }
.brick {
 flex: 0 0 auto;
 width: max-content;
 min-width: 0;
 max-width: none;
 min-height: 0;
 padding: 13px 24px 18px;
}
.wordmark { display:block; font-size:clamp(30px,3.7vw,51px); letter-spacing:-.045em; line-height:1.08; }
.brick-info { width:180px; }
@keyframes design-drift { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-9px) rotate(2deg); } }
@keyframes draw-curve { 0%,100% { stroke-dashoffset:0; } 45% { stroke-dashoffset:45; } }
@keyframes layout-pulse { 0%,100% { fill:#c3f53c; } 50% { fill:#d8f69e; } }
@keyframes cursor-nudge { 0%,100% { transform:translate(0,0); } 50% { transform:translate(5px,-5px); } }
@media(min-width:1650px) {
 .hero { min-height:950px; }
}
@media(max-width:1050px) {
 .hero { min-height:800px; padding-top:165px; }
 .hero-stage { padding-inline:12%; }
 .hero h1 { font-size:7.7vw; }
 .hero-line:last-child { font-size:.73em; }
 .object-bezier { width:95px; height:108px; left:2%; }
 .object-bezier svg { height:82px; }
 .object-caption { font-size:7px; }
 .object-wireframe { width:100px; height:88px; }
 .object-tokens { transform:scale(.8); left:2%; bottom:-20px; }
 .object-selection { width:85px; height:90px; right:2%; }
 .brick-stack { max-width:730px; }
 .wordmark { font-size:39px; }
 .brick-info { width:155px; }
 .brick-row { --offset:0px !important; }
}
@media(max-width:650px) {
 .hero { min-height:730px; padding-top:188px; padding-bottom:80px; }
 .hero-stage { padding:25px 5% 74px; }
 .hero h1 { font-size:clamp(37px,9.5vw,59px); letter-spacing:-.008em; line-height:1.2; }
 .hero-line { gap:.2em; margin-bottom:.4em; }
 .hero-line:last-child { font-size:.65em; gap:.19em; }
 .word { padding:.1em .18em .13em; }
 .hero-copy { font-size:15px; line-height:1.75; margin-top:27px; max-width:350px; }
 .object-bezier { width:66px; height:71px; left:5%; top:-49px; border-radius:7px; }
 .object-bezier svg { height:59px; }
 .object-caption { font-size:5px; letter-spacing:0; }
 .object-wireframe { width:70px; height:63px; right:5%; top:-45px; }
 .object-tokens { width:70px; height:73px; left:10%; bottom:-2px; }
 .swatch { width:35px; height:57px; left:15px; border-width:1px; border-radius:4px; }
 .swatch-lime i { height:19px; border-top-width:1px; }
 .swatch-lime span { font-size:4.4px; left:3px; bottom:6px; }
 .object-selection { width:63px; height:68px; right:9%; bottom:1px; }
 .brick-stack { max-width:370px; padding-inline:0; }
 .brick-row { gap:13px; margin-bottom:11px; justify-content:flex-start; }
 .brick { flex:0 0 auto; padding:12px 15px 15px; }
 .wordmark { font-size:26px; letter-spacing:-.035em; }
 .brick-info { width:auto; flex:1; min-width:0; font-size:8px; }
 .brick:before { left:8px; right:8px; }
}
@media(max-width:370px) {
 .wordmark { font-size:23px; }
 .brick { padding-inline:12px; }
 .brick-row { gap:11px; }
 .hero-line:last-child { font-size:.59em; }
}
@media(prefers-reduced-motion:reduce) {
 .design-object { animation:none; translate:none; }
 .design-object * { animation:none !important; }
}

/* One circular portrait mark across the header, project specimen and playground. */
.avatar { display:block; object-fit:cover; border-radius:50%; background:transparent; flex-shrink:0; }
.specimen-one .morph.profile-mark { border-radius:50%; background:transparent; overflow:hidden; animation:portrait-float 6s ease-in-out infinite; box-shadow:0 5px 18px #14121022; }
.profile-mark img, .dock-avatar img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.dock-art i.dock-avatar { border-radius:50%; background:transparent; overflow:hidden; }
@keyframes portrait-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }

/* Dark word plates reverse the light theme, including touch and keyboard states. */
.dark .hero .word { background: #2c2c29; color: #f1eee3; }
.dark .hero .word:not([data-color]):focus-visible { background: #fff; color: #111; }
@media (hover: hover) and (pointer: fine) {
 .dark .hero .word:not([data-color]):hover { background: #fff; color: #111; }
}
/* Active word colours follow the wall's light and dark ink palette. */
.hero .word[data-color="blue"] { background: #244b8f; color: #fff; }
.hero .word[data-color="green"] { background: #2b684d; color: #fff; }
.hero .word[data-color="burgundy"] { background: #963e50; color: #fff; }
.hero .word[data-color="violet"] { background: #6d4c91; color: #fff; }
.dark .hero .word[data-color="blue"] { background: #89adf4; color: #141210; }
.dark .hero .word[data-color="green"] { background: #89c9a6; color: #141210; }
.dark .hero .word[data-color="burgundy"] { background: #eaa0b2; color: #141210; }
.dark .hero .word[data-color="violet"] { background: #c2a6e6; color: #141210; }
/* Opaque, interlocking blocks: adjacent courses cover the studs beneath them. */
.brick-stack { --stud-pitch: 32px; }
.brick-row { display: grid; grid-template-columns: minmax(0, 370px) 180px; justify-content: center; gap: 26px; margin-bottom: -2px; }
.brick-row:nth-child(1) { --course-offset: 0px; }
.brick-row:nth-child(2) { --course-offset: 32px; }
.brick-row:nth-child(3) { --course-offset: -32px; }
.brick-row:nth-child(4) { --course-offset: 0px; }
.brick-row:nth-child(5) { --course-offset: -64px; }
.brick-row:nth-child(6) { --course-offset: -32px; }
.brick-row:nth-child(7) { --course-offset: calc(-32px + var(--centering-offset, 0px)); }
.brick-row { --offset: var(--course-offset) !important; }
.brick {
 --brick-fill: #cecec7;
 --brick-text: #252620;
 --brick-shade: #00000016;
 --brick-shadow-size: 5px;
 justify-self: end;
 background: var(--brick-fill);
 color: var(--brick-text);
 filter: none;
 opacity: 1;
 border-radius: 3px;
 box-shadow: inset 0 calc(-1 * var(--brick-shadow-size)) 0 var(--brick-shade), inset 0 1px 0 #ffffff45;
 transition: transform .42s cubic-bezier(.18,.85,.25,1.15), background-color .35s ease, color .35s ease, box-shadow .42s ease;
}
.dark .brick { --brick-fill: #55574f; --brick-text: #f1eee3; }
.brick::before {
 top: -10px; height: 12px; left: 12px; right: 12px;
 background: repeating-linear-gradient(to left, var(--brick-fill) 0 22px, transparent 22px var(--stud-pitch));
 border-radius: 3px 3px 0 0;
 transition: background .35s ease;
}
.brick::after { display: none; }
.brick:hover,
.brick:focus-visible {
 --brick-fill: var(--brand);
 --brick-text: var(--brand-ink);
 filter: none;
 opacity: 1;
 transform: none;
}
@media(max-width:1050px) {
 .brick-row { grid-template-columns: minmax(0, 1fr) 155px; }
}
@media(max-width:650px) {
 .brick-stack { --stud-pitch: 24px; }
 .brick-row { grid-template-columns: minmax(0, 1fr) 105px; gap: 13px; margin-bottom: -2px; --offset: 0px !important; }
 .brick { max-width: 100%; padding-inline: 12px; }
 .wordmark { font-size: clamp(20px, 6.1vw, 26px); }
 .brick-info { width: auto; }
 .brick::before { left: 8px; right: 8px; top: -8px; height: 10px; background: repeating-linear-gradient(to left, var(--brick-fill) 0 17px, transparent 17px var(--stud-pitch)); }
}

/* Pick up one block: bring its entire silhouette above the surrounding courses. */
.brick-row:has(.brick:hover),
.brick-row:has(.brick:focus-visible),
.brick-row:has(.brick:active) { z-index: 30; }
.brick { transform-origin: 50% 80%; }
.brick::before {
 top: -12px;
 height: 12px;
 background: linear-gradient(#ffffff28, transparent 65%), var(--brick-fill);
 border-radius: 0;
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12' viewBox='0 0 32 12'%3E%3Cpath d='M5 12V3Q5 0 8 0H24Q27 0 27 3V12Z' fill='black'/%3E%3C/svg%3E");
 mask-size: var(--stud-pitch) 100%;
 mask-repeat: round no-repeat;
 transition: background-color .35s ease;
}
.brick::after {
 display: block;
 z-index: -1;
 inset: 1px 0 5px;
 border-radius: inherit;
 background: currentColor;
 opacity: .14;
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 .5H15.5V16M.5 0V16' fill='none' stroke='black' stroke-width='1' stroke-dasharray='1 3'/%3E%3C/svg%3E");
 mask-size: 16px 16px;
 mask-repeat: repeat;
}
.brick:hover,
.brick:focus-visible,
.brick:active {
 --brick-fill: var(--brand);
 --brick-text: var(--brand-ink);
 transform: translateY(-22px) rotate(-1deg);
 --brick-shade: #00000020;
 box-shadow: inset 0 calc(-1 * var(--brick-shadow-size)) 0 var(--brick-shade), inset 0 1px 0 #ffffff60, 0 16px 20px -8px #00000045;
}
@media(max-width:650px) {
 .brick::before { top: -10px; height: 10px; }
 .brick:hover, .brick:focus-visible, .brick:active { transform: translateY(-18px) rotate(-1deg); }
}
@media(hover:none) {
 .brick-row:has(.brick:focus) { z-index: 30; }
 .brick:focus { --brick-fill: var(--brand); --brick-text: var(--brand-ink); transform: translateY(-18px) rotate(-1deg); }
}
@media(prefers-reduced-motion:reduce) {
 .brick { transition: none; }
 .brick:hover, .brick:focus-visible, .brick:active, .brick:focus { transform: none; }
}

/* Folder tabs share the stepped word-plate corners only along their top edge. */
.project { border-radius: 0; }
.project-tab {
 --tab-notch: 9px;
 border-radius: 0;
 clip-path: polygon(
  0 var(--tab-notch),
  var(--tab-notch) var(--tab-notch),
  var(--tab-notch) 0,
  calc(100% - var(--tab-notch)) 0,
  calc(100% - var(--tab-notch)) var(--tab-notch),
  100% var(--tab-notch),
  100% 100%,
  0 100%
 );
}
@media(max-width:650px) { .project-tab { --tab-notch: 7px; } }

/* Six adjacent tabs divide the card edge evenly instead of overlapping. */
.project-tab { left: calc(var(--index) * 100% / 6); width: calc(100% / 6 + 1px); padding-left: 14px; gap: 6px; }
@media(max-width:900px) {
 .project-tab { justify-content: center; padding-inline: 4px; }
 .project-tab-name { display: none; }
}

/* Cover subpixel raster seams; the final tab still ends at the card edge. */
.project:last-child .project-tab { width: calc(100% / 6); }

/* Service linework stays visible on dark surfaces. */
.dark .services .pixel-icon { border-color: #73796c; }
.dark .services .pixel-icon svg { stroke: #adb3a5; }
.dark .services .pixel-icon [fill="#deded4"],
.dark .services .pixel-icon [fill="#f8f6ed"] { fill: #42463b; }
/* Bottom-only inset shade: same colour as the body, exactly half its depth. */
.brick::before {
 background-color: var(--brick-fill);
 background-image: linear-gradient(to top, var(--brick-shade) 0 calc(var(--brick-shadow-size) / 2), transparent calc(var(--brick-shadow-size) / 2)), linear-gradient(#ffffff28, transparent 65%);
 background-size: 100% 100%, 100% 100%;
 background-repeat: no-repeat;
}
/* The existing recommendation cards move one card at a time. */
.testimonial-carousel { max-width: 1120px; margin: auto; }
.testimonial-viewport { overflow: hidden; padding: 18px 10px 30px; touch-action: pan-y; }
.testimonial-track { max-width: none; margin: 0; padding: 0; overflow: visible; gap: 26px; scroll-snap-type: none; transition: transform .7s cubic-bezier(.22,.7,.22,1); }
.testimonial-track.no-transition { transition: none; }
.testimonial-track .quote-card { flex: 0 0 calc((100% - 26px) / 2); min-width: 0; scroll-snap-align: none; }
.testimonial-track .quote-card:nth-child(even) { rotate: 2deg; }
.testimonial-controls { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 8px; }
.quote-control { width: 36px; height: 36px; background: var(--paper); border: 1px solid var(--control-border); color: var(--ink); font-size: 20px; }
.quote-control:hover { background: var(--ink); color: var(--paper); }
.quote-control svg { width: 17px; height: 17px; }
.quote-count { color: var(--soft); min-width: 66px; text-align: center; }
@media(max-width:650px) {
 .testimonial-track { gap: 23px; }
 .testimonial-track .quote-card { flex-basis: 85%; }
}
@media(prefers-reduced-motion:reduce) { .testimonial-track { transition: none; } }

@media(max-width:650px) {
 .brick-row:nth-child(7) { --offset: var(--centering-offset, 0px) !important; }
}

/* A quiet surface across the entire service row on interaction. */
.service { transition: background-color .28s ease; }
@media (hover: hover) and (pointer: fine) {
 .service:hover { background-color: color-mix(in srgb, var(--ink) 5%, transparent); }
}
.service:focus-within, .service:active { background-color: color-mix(in srgb, var(--ink) 5%, transparent); }
@media (prefers-reduced-motion: reduce) {
 .service { transition: none; }
}

/* Preserve the upper courses as one group over the centered Pegah block. */
.brick-row:nth-child(-n+4) { translate: var(--upper-stack-shift, 0px) 0; }

/* Desktop work previews use the card height, rather than growing from width. */
@media(min-width:651px) {
 .project { --project-inset:50px; --project-gap:50px; }
 .project-copy { min-width:0; }
 .project-media {
  position:absolute; top:15%; right:var(--project-inset); height:70%;
  width:calc((100% - 2 * var(--project-inset) - var(--project-gap)) * .55);
  min-width:0; min-height:0; max-width:none; aspect-ratio:auto; margin:0;
  container-type:inline-size;
 }
 .project-media .specimen { padding:clamp(12px,4cqw,24px); }
 .project-media .type-art { font-size:clamp(42px,18cqw,140px); }
 .project-media .specimen-label { max-width:95%; text-align:center; font-size:clamp(6px,1.4cqw,9px); letter-spacing:clamp(.5px,.3cqw,2px); line-height:1.5; }
 .project-media .orbit { width:min(160px,45cqw); height:auto; aspect-ratio:1; }
 .project-media .morph { width:min(110px,30cqw); height:auto; aspect-ratio:1; }
 .project-media .system-grid { width:min(200px,65cqw); grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(6px,2cqw,10px); }
 .project-media .system-grid i { width:100%; height:auto; aspect-ratio:1; }
 .project-media .steps { width:min(210px,80cqw); gap:clamp(6px,2cqw,12px); }
 .project-media .steps i { flex:1; min-width:0; max-width:58px; height:auto; aspect-ratio:1; }
}
@media(min-width:651px) and (max-width:1050px) {
 .project { --project-inset:35px; --project-gap:30px; }
}

.yal-card-art {height:100%;width:100%;display:flex;gap:5%;align-items:center;justify-content:center;overflow:hidden;padding:8px;}
.yal-card-art img {height:94%;width:auto;max-width:47%;object-fit:contain;filter:drop-shadow(0 12px 10px #14121025);}
.yal-card-art img:first-child {transform:rotate(-5deg) translateY(-3%);}.yal-card-art img:last-child {transform:rotate(5deg) translateY(3%);}

/* Compact tabs keep only the file number; full labels stay on larger screens. */
@media(max-width:900px) {
 .project-tab svg, .project-tab .project-tab-name { display:none; }
 .project-tab { justify-content:center; gap:0; padding-inline:4px; }
 .project-tab .project-tab-number { display:inline; font-size:11px; line-height:1; }
}

/* Keep translated decorative rows inside the viewport, as the body already does. */
html { overflow-x: clip; }

.project:has(a[href="/projects/giftaty"]) .yal-card-art {background:#e6e4ee;}

/* Keep navigation on one row, with equal space around its center. */
.header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.header>.identity{justify-self:start}
.header nav{position:static;transform:none;white-space:nowrap}
.header>.header-tools{justify-self:end;margin-left:0}
@media(max-width:1050px){
 .header .identity-name,.header .command-button{display:none}
 .header .identity{padding:4px;gap:0}
 .header nav a{padding:8px 13px}
}
@media(max-width:650px){
 .header{grid-template-columns:36px minmax(0,1fr) 36px;top:10px;gap:8px}
 .header nav{position:static;left:auto;top:auto;transform:none;justify-self:center;padding:3px 5px;gap:0}
 .header nav a{font-size:12px;padding:7px 11px}
 .header .identity{width:36px;height:36px;justify-content:center}
 .header .avatar{width:26px;height:26px}
 .project{top:90px;min-height:0;height:auto;max-height:none;padding:24px 20px 26px;gap:24px;grid-template-rows:auto auto}
 .project-media{align-self:start;margin:0 auto;aspect-ratio:1.5}
}

@media(max-width:360px){.header nav a{font-size:11px;padding-inline:8px}.header nav{padding-inline:3px}}

/* Keep the mobile section heading centered, with its description below. */
@media(max-width:650px){
 .work>.section-title.reveal{position:-webkit-sticky;position:sticky;top:66px;z-index:12;height:auto;min-height:0;flex-direction:column;padding:12px 0 14px;margin-bottom:70px;background:transparent;gap:22px;align-items:center;text-align:center;transform:translateY(var(--work-heading-shift,0px));transition:none;opacity:1}
 .work>.section-title h2{font-size:45px;white-space:normal;line-height:.98}
 .work>.section-title>.mono{font-family:var(--body,'Mozilla Text',Arial,sans-serif);font-size:15px;font-weight:400;line-height:1.65;letter-spacing:0;flex:none;width:100%;max-width:310px;text-align:center;color:var(--soft)}
 /* Stacking is structural, including with Reduce Motion. The global reduced
    motion rule must not turn cards into a different scrolling layout. */
 .work .project{position:-webkit-sticky;position:sticky;top:calc(119px + var(--work-heading-height,118px));height:min(var(--work-card-height,600px),calc(100svh - 139px - var(--work-heading-height,118px)));align-content:start;grid-template-rows:auto minmax(0,1fr)}
 .work .project-media{min-height:0;max-height:100%}
}

/* Zingle is a desktop product preview rather than a pair of phone screens. */
.project:has(a[href="/projects/zingle"]) .yal-card-art{padding:0;background:#171a1b}
.project:has(a[href="/projects/zingle"]) .yal-card-art img{width:100%;max-width:100%;height:100%;object-fit:cover;object-position:center;transform:none;filter:none}
.project-coming-soon{border-bottom:0;cursor:default}

/* Mobile keeps the block composition and moves the detail into one table below. */
.mobile-experience-table{display:none}
@media(max-width:650px){
 .brick-stack{width:100%;max-width:370px;padding-inline:8px 48px;margin-bottom:32px}
 .brick-row{grid-template-columns:minmax(0,1fr);gap:0;justify-content:center;--offset:var(--course-offset)!important}
 .brick-row:nth-child(1){--course-offset:0px}
 .brick-row:nth-child(2){--course-offset:16px}
 .brick-row:nth-child(3){--course-offset:-16px}
 .brick-row:nth-child(4){--course-offset:0px}
 .brick-row:nth-child(5){--course-offset:-32px}
 .brick-row:nth-child(6){--course-offset:-16px}
 .brick-row:nth-child(7){--offset:var(--course-offset)!important;--course-offset:calc(-16px + var(--centering-offset,0px))}
 .brick{justify-self:end;min-width:0;max-width:none;padding:13px 12px 17px}
 .brick .wordmark{font-size:clamp(21px,6.1vw,26px);white-space:nowrap}
 .brick-row>.brick-info{display:none}
 .mobile-experience-table{display:table;width:100%;max-width:370px;margin:0 auto;border:0;border-collapse:collapse;text-align:left;table-layout:fixed}
 .mobile-experience-table th,.mobile-experience-table td{border:0;padding:12px 0;vertical-align:top;font-weight:400}
 .mobile-experience-table th{width:65%;padding-right:14px}
 .mobile-experience-table strong{display:block;font-size:15px;font-weight:700;line-height:1.4;letter-spacing:-.2px}
 .mobile-experience-table th span{display:block;font-size:12px;line-height:1.6;color:var(--soft);margin-top:3px}
 .mobile-experience-table td{text-align:right;font:10px/21px var(--mono);white-space:nowrap;color:var(--soft)}
}

@media(max-width:650px){
 .brick,.dark .brick{--brick-fill:var(--brand);--brick-text:var(--brand-ink);--brick-shade:#00000020}
}

/* An original language-learning poster in the sixth folder's violet palette. */
.project-media .specimen-six{display:block;padding:0;background:#2c223c}
.language-learning-poster{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.coming-soon-poster{width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 78% 24%,#59416e,#2c223c 85%);position:relative}
.coming-soon-poster::before{content:'';position:absolute;inset:0;background-image:radial-gradient(#dfc9ff1f .6px,transparent .6px);background-size:20px 20px;pointer-events:none}
.coming-soon-type{display:block;position:relative;width:100%;height:100%;fill:#eee5f7;stroke:none;overflow:visible}
.coming-soon-motion-control{position:absolute;right:8px;bottom:8px;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;background:#2c223ccc;color:#eee5f7;border:1px solid #eee5f755;border-radius:50%;opacity:.8}
.coming-soon-motion-control:hover,.coming-soon-motion-control:focus-visible{opacity:1;background:#2c223c}
.coming-soon-motion-control svg{width:16px;height:16px;fill:currentColor;stroke:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.coming-soon-motion-control{opacity:0}.coming-soon-poster:hover .coming-soon-motion-control,.coming-soon-motion-control:focus-visible{opacity:1}}