/* The work section and its project cards. */
.portfolio-section{background:#e9eff0;padding-block:100px;color:#262828}
.portfolio-heading{display:block;margin:0 0 48px}
.portfolio-heading h2{font-size:clamp(44px,5.2vw,76px);line-height:1.08}
.portfolio-heading p{max-width:390px;color:#53646d;font-size:14px;line-height:1.8}
/* Project cards (WEB-059): each card is a panel in its project's colour (--card-colour, over a softly blurred copy of its screen),
   laid out top to bottom: the kind, the title, the screen in a dark frame (its clip plays while the card is on screen,
   portfolio.js), the 3D product choice where there is one, and the description. Nothing opens; the card is the whole story.
   --card-ink is the text colour that reads on the card's colour (dark, or white on the darker cards). */
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.project-card{--ink:var(--card-ink,#12181b);position:relative;isolation:isolate;overflow:hidden;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;padding:clamp(20px,2.3vw,32px);border-radius:18px;background:var(--card-colour,#7c8f99);color:var(--ink)}
.project-card:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 80% 0%,#ffffff2e,transparent 58%);pointer-events:none}
.project-open,.project-stage,.project-caption,.project-caption>div{display:contents}
.project-backdrop{position:absolute;inset:-14%;z-index:-2;width:128%;height:128%;object-fit:cover;filter:blur(28px) saturate(.78);opacity:.45;transform:scale(1.14);pointer-events:none}
.project-kind{order:1;font-size:11px;text-transform:uppercase;letter-spacing:.13em}
.project-caption h3{order:2;margin:8px 0 22px;font-size:clamp(26px,2.6vw,38px);font-weight:500;line-height:1.12;letter-spacing:-.04em}
.project-frame{order:3;position:relative;display:block;aspect-ratio:16/9;border:4px solid #171a1c;border-radius:12px;background:#171a1c;overflow:hidden;box-shadow:0 22px 44px -26px #000a}
.project-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.project-description{order:5;max-width:560px;margin-top:20px;font-size:14px;line-height:1.75}
.project-screen{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.project-screen .project-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;pointer-events:none}
.has-motion>.project-video{opacity:1}

/* The 3D products card: a choice between the marker and the display, under the screen. */
.project-variants{order:4;display:flex;gap:4px;width:fit-content;margin-top:16px;border-bottom:1px solid color-mix(in srgb,var(--ink) 35%,transparent)}
.project-variants button{min-height:44px;min-width:88px;padding:10px 16px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink);opacity:.75;font:inherit;font-size:13px;cursor:pointer}
.project-variants button[aria-pressed="true"]{border-bottom-color:var(--ink);opacity:1;font-weight:600}
.project-variants button:hover{opacity:1;background:#ffffff26}
.project-variants button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* The accounting card plays a live, self-advancing explainer where other cards show a clip. */
.project-live{--acx-display:Inter,Arial,sans-serif;--acx-ui:Inter,Arial,sans-serif;transition:opacity .4s ease}

/* The Laydan card is the last one before the contact scene, so it takes that scene's black and HUD red (contact.css --hud). */
#project-robot-roo-website:after{background:radial-gradient(ellipse at 80% 0%,#ff2e2e30,transparent 58%)}
#project-robot-roo-website .project-backdrop{display:none}
#project-robot-roo-website .project-kind{color:#ff2e2e}

@media(max-width:1100px){.portfolio-section{padding-block:80px}.portfolio-heading{gap:38px}.project-grid{gap:22px}}
@media(max-width:760px){.portfolio-section{padding-block:63px}.portfolio-heading{grid-template-columns:1fr;gap:20px;margin:0 0 32px}.portfolio-heading h2{font-size:48px}.portfolio-heading p{font-size:12px}.project-grid{grid-template-columns:1fr;gap:20px}.project-card{padding:20px 18px 22px;border-radius:14px}.project-caption h3{font-size:26px;margin-bottom:18px}.project-frame{border-width:3px;border-radius:9px}.project-description{font-size:13px;margin-top:16px}}


/* Work section on typewriter paper: textured white paper (noise lit from the top left, multiplied onto off-white, with faint
   fibres; drawn as SVG data: images) and typewriter type. Laydan Typewriter (Special Elite) for the heading and Laydan Courier
   (Courier Prime) for the project text are loaded by portfolio.js and take over once the html element has .work-type; until
   then the Inter setting above stays. The heading types itself in once when it comes into view (portfolio.js), with a cursor
   that waits between the two lines; reduced motion shows it at once. */
.portfolio-section{background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='480'%3E%3Cfilter%20id='f'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.006%20.11'%20numOctaves='3'%20seed='9'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%20.55%200%200%200%200%20.52%200%200%200%200%20.47%200%200%200%20.12%20-.054'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23f)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='360'%3E%3Cfilter%20id='p'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.022'%20numOctaves='5'%20seed='4'%20stitchTiles='stitch'%20result='n'/%3E%3CfeDiffuseLighting%20in='n'%20lighting-color='%23fff'%20surfaceScale='2.6'%3E%3CfeDistantLight%20azimuth='225'%20elevation='70'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23p)'/%3E%3C/svg%3E") #fbfaf6;background-blend-mode:normal,multiply}
#work-title .work-l1,#work-title .work-l2{display:block}
.work-type #work-title{font:400 clamp(38px,5vw,76px)/1.06 "Laydan Typewriter",Inter,Arial,sans-serif;letter-spacing:0}
/* The step in is four typewriter characters (em, because the subset has no "0" for ch to measure) */
.work-type #work-title .work-l2{margin:.32em 0 0 2.44em}
.work-type .project-kind{font:400 11px/1.4 "Laydan Courier",monospace;letter-spacing:.14em}
.work-type .project-caption h3{font:700 clamp(26px,2.5vw,36px)/1.15 "Laydan Courier",monospace;letter-spacing:0}
.work-type .project-description{font:400 14px/1.65 "Laydan Courier",monospace}
.work-type .project-card .project-variants button{font-family:"Laydan Courier",monospace}
@media(max-width:760px){.work-type .project-caption h3{font-size:26px}.work-type #work-title{font-size:min(38px,10.6vw)}.work-type #work-title .work-l2{margin-left:1.22em}}
.work-word{display:inline-block;white-space:nowrap}
.work-ch{display:inline-block}
#work-title.work-typing .work-ch{visibility:hidden}
#work-title.work-typing .work-ch.on{visibility:visible;animation:work-strike .07s ease-out}
@keyframes work-strike{from{transform:translateY(.04em)}to{transform:none}}
.work-cursor{position:relative;display:inline-block;width:0;height:0;animation:work-blink 1.06s steps(1) infinite}
.work-cursor:before{content:"";position:absolute;left:.03em;bottom:-.12em;width:.5em;height:.07em;background:currentColor}
@keyframes work-blink{50%{opacity:0}}