html { scroll-behavior: smooth; }
body { margin: 0; background: #121515; }
html[data-theme="light"] #robin-workshop { color-scheme: light; }
html[data-theme="dark"] #robin-workshop { color-scheme: dark; }
html[data-language="no"] [data-lang="en"],
html[data-language="en"] [data-lang="no"] { display: none !important; }
#robin-workshop { min-height: 100vh; }
#robin-workshop .rv-methods { border-top: 1px solid var(--rv-line); }
#robin-workshop .rv-methods-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
#robin-workshop .rv-methods-list a { display: block; padding-top: 14px; border-top: 1px solid var(--rv-line); font-size: 13px; }
#robin-workshop .rv-methods-list a:hover { color: var(--rv-teal); }
#robin-workshop .rv-methods-list small { display: block; color: var(--rv-muted); font-size: 11px; margin-top: 5px; }
@container rv (max-width: 500px) {
  #robin-workshop .rv-methods-list { grid-template-columns: 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

    #robin-workshop {
      --rv-paper: light-dark(#f5f7f5, #121515);
      --rv-surface: light-dark(#ffffff, #202727);
      --rv-ink: light-dark(#1d2726, #edf3f1);
      --rv-muted: light-dark(#56625e, #aebbb6);
      --rv-line: light-dark(#d5ded9, #35403e);
      --rv-teal: light-dark(#176b63, #4ecdc4);
      --rv-gold: light-dark(#8b672e, #d9b46f);
      --rv-soft: light-dark(#e7ede9, #1c2523);
      --rv-shadow: light-dark(#17272422, #00000066);
      --rv-on-teal: light-dark(#ffffff, #122825);
      --rv-title-scale: 1;
      --rv-tilt: 1;
      container: rv / inline-size;
      background: var(--rv-paper);
      color: var(--rv-ink);
      font-family: Inter, system-ui, sans-serif;
      font-size: 14px;
      line-height: 1.6;
      isolation: isolate;
    }
    #robin-workshop * { box-sizing: border-box; }
    #robin-workshop h1, #robin-workshop h2, #robin-workshop h3, #robin-workshop p { margin: 0; }
    #robin-workshop h1, #robin-workshop h2, #robin-workshop h3 { color: var(--rv-ink); }
    #robin-workshop button, #robin-workshop a, #robin-workshop summary { -webkit-tap-highlight-color: transparent; }
    #robin-workshop button { font: inherit; color: inherit; }
    #robin-workshop a { color: inherit; text-decoration: none; }
    #robin-workshop button:focus-visible, #robin-workshop a:focus-visible, #robin-workshop summary:focus-visible { outline: 3px solid var(--rv-teal); outline-offset: 5px; }
    #robin-workshop img { display: block; max-width: 100%; height: auto; }
    #robin-workshop .rv-wrap { padding-inline: 4.5%; }
    #robin-workshop .rv-mono { font: 500 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
    #robin-workshop .rv-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; min-height: 87px; border-bottom: 1px solid var(--rv-line); }
    #robin-workshop .rv-brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
    #robin-workshop .rv-mark { width: 34px; height: 38px; display: grid; place-items: center; background: var(--rv-teal); color: var(--rv-on-teal); font-size: 14px; font-weight: 600; letter-spacing: -.07em; border-radius: 3px; }
    #robin-workshop .rv-brand-name { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.05em; line-height: 1.3; }
    #robin-workshop .rv-brand-company { color: var(--rv-muted); font: 10px/1.5 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
    #robin-workshop .rv-nav-links { display: flex; gap: 21px; align-items: center; font-size: 12px; }
    #robin-workshop .rv-nav-links a:hover { color: var(--rv-teal); }
    #robin-workshop .rv-prefs { display: flex; gap: 3px; align-items: center; }
    #robin-workshop .rv-pref { background: transparent; border: 0; padding: 8px 6px; font-size: 11px; color: var(--rv-muted); }
    #robin-workshop .rv-pref[aria-pressed="true"] { color: var(--rv-teal); text-decoration: underline; text-underline-offset: 5px; background: transparent; }
    #robin-workshop .rv-theme { margin-left: 5px; border-left: 1px solid var(--rv-line); padding-left: 10px; font-size: 18px; line-height: 1; }
    #robin-workshop .rv-hero { padding-top: 56px; padding-bottom: 42px; display: grid; grid-template-columns: .93fr 1.17fr; align-items: center; gap: 14px; }
    #robin-workshop .rv-eyebrow { color: var(--rv-teal); display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
    #robin-workshop .rv-eyebrow::before { content: ''; width: 19px; height: 1px; background: currentColor; }
    #robin-workshop .rv-title { font-size: calc(clamp(35px, 5.6cqi, 62px) * var(--rv-title-scale)); font-weight: 600; line-height: 1.05; letter-spacing: -.055em; margin-bottom: 23px; }
    #robin-workshop .rv-title-accent { color: var(--rv-teal); }
    #robin-workshop .rv-lead { color: var(--rv-muted); max-width: 370px; font-size: 14px; line-height: 1.8; }
    #robin-workshop .rv-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
    #robin-workshop .rv-primary { display: inline-flex; align-items: center; gap: 18px; padding: 12px 18px; background: var(--rv-ink); color: var(--rv-paper); font-size: 12px; border-radius: 3px; }
    #robin-workshop .rv-primary:hover { background: var(--rv-teal); color: var(--rv-on-teal); }
    #robin-workshop .rv-text-link { display: inline-flex; gap: 12px; align-items: center; font-size: 12px; border-bottom: 1px solid var(--rv-line); padding-block: 8px; }
    #robin-workshop .rv-delivery { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 32px; color: var(--rv-muted); font-size: 11px; }
    #robin-workshop .rv-delivery span[aria-hidden] { color: var(--rv-gold); }
    #robin-workshop .rv-desk { position: relative; aspect-ratio: 1.03; min-width: 0; background-image: radial-gradient(var(--rv-line) .65px, transparent .65px); background-size: 18px 18px; }
    #robin-workshop .rv-desk-note { position: absolute; top: -6px; right: 8px; font: 500 10px/1.5 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--rv-muted); }
    #robin-workshop .rv-object { position: absolute; border: 1px solid var(--rv-line); background: var(--rv-surface); padding: 6px; box-shadow: 0 12px 24px -10px var(--rv-shadow); text-align: left; border-radius: 5px; }
    #robin-workshop .rv-object:hover, #robin-workshop .rv-object:focus-visible { box-shadow: 0 18px 32px -8px var(--rv-shadow); }
    #robin-workshop .rv-object img { width: 100%; object-fit: cover; }
    #robin-workshop .rv-object-caption { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 9px 5px 4px; line-height: 1.35; }
    #robin-workshop .rv-object-caption strong { font-size: 11px; font-weight: 500; }
    #robin-workshop .rv-object-caption small { display: block; font-size: 9px; color: var(--rv-muted); margin-top: 3px; }
    #robin-workshop .rv-object-caption b { font-size: 15px; font-weight: 400; color: var(--rv-teal); }
    #robin-workshop .rv-object-gis { display: flex; flex-direction: column-reverse; width: 83%; top: 8%; left: 4%; z-index: 1; }
    #robin-workshop .rv-object-gis .rv-object-caption { padding: 3px 5px 8px; }
    #robin-workshop .rv-object-gis img { aspect-ratio: 1.82; }
    #robin-workshop .rv-object-3d { width: 61%; left: 0; bottom: 1%; z-index: 2; }
    #robin-workshop .rv-object-3d img { aspect-ratio: 1.75; }
    #robin-workshop .rv-object-phone { width: 28%; right: 1%; top: 34%; z-index: 3; border: 4px solid var(--rv-ink); border-radius: 18px; padding: 3px; }
    #robin-workshop .rv-object-phone img { border-radius: 11px; }
    #robin-workshop .rv-object-phone .rv-object-caption { padding: 7px 2px 4px; }
    #robin-workshop .rv-object-phone .rv-object-caption strong { font-size: 10px; }
    #robin-workshop .rv-object-phone .rv-object-caption small { font-size: 9px; }
    #robin-workshop .rv-desk-cross { position: absolute; left: 64%; bottom: 2%; color: var(--rv-gold); font: 400 28px/1 ui-monospace, monospace; }
    #robin-workshop .rv-scope { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; border-top: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); padding-block: 18px; color: var(--rv-muted); }
    #robin-workshop .rv-scope a:last-child { color: var(--rv-ink); }
    #robin-workshop .rv-section { padding-block: 48px; }
    #robin-workshop .rv-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
    #robin-workshop .rv-section-index { color: var(--rv-gold); margin-bottom: 8px; }
    #robin-workshop h2 { font-size: 32px; font-weight: 500; letter-spacing: -.05em; line-height: 1.15; }
    #robin-workshop .rv-section-aside { max-width: 230px; font-size: 11px; color: var(--rv-muted); }
    #robin-workshop .rv-project-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 17px; margin-bottom: 20px; border-bottom: 1px solid var(--rv-line); }
    #robin-workshop .rv-pick { padding: 9px 0 11px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 11px; color: var(--rv-muted); }
    #robin-workshop .rv-pick[aria-pressed="true"] { color: var(--rv-teal); border-color: var(--rv-teal); background: transparent; }
    #robin-workshop .rv-more-projects { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 24px; margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--rv-line); color: var(--rv-muted); }
    #robin-workshop .rv-more-projects > span { font-size: 11px; }
    #robin-workshop .rv-more-projects .rv-project-picks { border: 0; margin: 0; }
    #robin-workshop .rv-project { display: grid; grid-template-columns: 1.5fr 1fr; align-items: start; gap: 34px; }
    #robin-workshop .rv-project-copy { display: flex; flex-direction: column; min-width: 0; }
    #robin-workshop .rv-project-type { font-size: 10px; color: var(--rv-teal); margin-bottom: 9px; }
    #robin-workshop .rv-project-copy h3 { font-size: 27px; font-weight: 500; line-height: 1.2; letter-spacing: -.045em; margin-bottom: 13px; }
    #robin-workshop .rv-project-copy p { font-size: 12px; color: var(--rv-muted); line-height: 1.8; }
    #robin-workshop .rv-project-role { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rv-line); }
    #robin-workshop .rv-project-role span { font-size: 10px; color: var(--rv-gold); }
    #robin-workshop .rv-project-role p { color: var(--rv-ink); font-size: 11px; margin-top: 3px; }
    #robin-workshop .rv-services { border-top: 1px solid var(--rv-line); }
    #robin-workshop .rv-service { border-top: 1px solid var(--rv-line); }
    #robin-workshop .rv-service:last-of-type { border-bottom: 1px solid var(--rv-line); }
    #robin-workshop .rv-aftercare { padding-top: 20px; color: var(--rv-muted); font-size: 12px; line-height: 1.7; }
    #robin-workshop .rv-service summary { list-style: none; display: grid; grid-template-columns: 26px 1fr 1fr 22px; align-items: center; gap: 17px; padding-block: 23px; }
    #robin-workshop .rv-service summary::-webkit-details-marker { display: none; }
    #robin-workshop .rv-service-num { color: var(--rv-gold); font: 10px/1 ui-monospace, monospace; }
    #robin-workshop .rv-service-title { font-size: 19px; line-height: 1.35; font-weight: 500; letter-spacing: -.04em; }
    #robin-workshop .rv-service-short { font-size: 11px; line-height: 1.7; color: var(--rv-muted); }
    #robin-workshop .rv-service-plus { color: var(--rv-teal); font-size: 22px; font-weight: 400; text-align: right; }
    #robin-workshop .rv-service[open] .rv-service-plus { transform: rotate(45deg); }
    #robin-workshop .rv-service[open] .rv-service-title { color: var(--rv-teal); }
    #robin-workshop .rv-service-detail { padding: 0 40px 23px 43px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; font-size: 12px; color: var(--rv-muted); }
    #robin-workshop .rv-example { display: grid; gap: 8px; width: 190px; padding: 0; border: 0; background: transparent; font-size: 12px; color: var(--rv-teal); text-align: left; white-space: nowrap; cursor: pointer; }
    #robin-workshop .rv-example img { width: 100%; aspect-ratio: 1.65; object-fit: cover; object-position: 50% 0; border: 1px solid var(--rv-line); border-radius: 3px; }
    #robin-workshop .rv-about { display: grid; grid-template-columns: .8fr 1.7fr; gap: 42px; align-items: center; padding: 35px; background: var(--rv-soft); margin-bottom: 45px; }
    #robin-workshop .rv-about-photo { aspect-ratio: 1; width: 100%; object-fit: cover; object-position: 50% 35%; border-radius: 3px; filter: grayscale(1); }
    #robin-workshop .rv-about h2 { margin: 10px 0 18px; }
    #robin-workshop .rv-about p { font-size: 12px; line-height: 1.9; color: var(--rv-muted); }
    #robin-workshop .rv-about-links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; }
    #robin-workshop .rv-about-links a { font-size: 11px; }
    #robin-workshop .rv-contact { padding: 43px 0; border-top: 1px solid var(--rv-line); display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; }
    #robin-workshop .rv-contact h2 { font-size: 42px; font-weight: 500; line-height: 1.1; letter-spacing: -.05em; color: var(--rv-ink); }
    #robin-workshop .rv-contact p { color: var(--rv-muted); font-size: 12px; margin-bottom: 16px; }
    #robin-workshop .rv-email { display: inline-flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--rv-gold); padding-bottom: 8px; font-size: 13px; }
    #robin-workshop .rv-footer { padding-block: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rv-line); font-size: 10px; color: var(--rv-muted); }
    #robin-workshop .rv-footer a { text-decoration: underline; text-underline-offset: 3px; }
    #robin-workshop [hidden] { display: none !important; }
    @container rv (max-width: 760px) {
      #robin-workshop .rv-nav { gap: 14px; padding-block: 18px; min-height: 74px; }
      #robin-workshop .rv-nav-links { gap: 15px; order: 3; flex-basis: 100%; justify-content: space-between; font-size: 11px; }
      #robin-workshop .rv-hero { grid-template-columns: 1fr; padding-top: 36px; gap: 30px; }
      #robin-workshop .rv-title { font-size: calc(clamp(39px, 8cqi, 58px) * var(--rv-title-scale)); }
      #robin-workshop .rv-lead { max-width: 520px; }
      #robin-workshop .rv-delivery { margin-top: 23px; }
      #robin-workshop .rv-desk { width: min(100%, 490px); justify-self: center; }
      #robin-workshop .rv-section-aside { max-width: 180px; }
      #robin-workshop .rv-project { gap: 20px; }
      #robin-workshop .rv-project-copy h3 { font-size: 24px; }
      #robin-workshop .rv-service-title { font-size: 17px; }
      #robin-workshop .rv-about { gap: 24px; padding: 25px; }
      #robin-workshop .rv-contact h2 { font-size: 35px; }
    }
    @container rv (max-width: 500px) {
      #robin-workshop .rv-wrap { padding-inline: 6%; }
      #robin-workshop .rv-nav-links { gap: 10px; }
      #robin-workshop .rv-eyebrow { font-size: 9px; margin-bottom: 18px; }
      #robin-workshop .rv-title { font-size: calc(clamp(35px, 10.2cqi, 49px) * var(--rv-title-scale)); }
      #robin-workshop .rv-lead { font-size: 13px; }
      #robin-workshop .rv-actions { gap: 13px; margin-top: 21px; }
      #robin-workshop .rv-primary { font-size: 11px; padding: 11px 13px; }
      #robin-workshop .rv-text-link { font-size: 11px; }
      #robin-workshop .rv-desk { margin-top: 12px; aspect-ratio: .95; }
      #robin-workshop .rv-object-gis { top: 7%; width: 87%; left: 2%; }
      #robin-workshop .rv-object-3d { bottom: 1%; width: 63%; }
      #robin-workshop .rv-object-phone { width: 29%; top: 35%; right: 0; border-width: 3px; border-radius: 13px; }
      #robin-workshop .rv-object-caption strong { font-size: 10px; }
      #robin-workshop .rv-object-caption small { font-size: 9px; }
      #robin-workshop .rv-object-phone .rv-object-caption strong { font-size: 9px; }
      #robin-workshop .rv-object-phone .rv-object-caption small { display: none; }
      #robin-workshop .rv-object-phone img { border-radius: 8px; }
      #robin-workshop .rv-desk-note { font-size: 10px; }
      #robin-workshop .rv-scope { font-size: 9px; justify-content: flex-start; gap: 9px 15px; }
      #robin-workshop .rv-section { padding-block: 32px; }
      #robin-workshop .rv-section-head { display: block; margin-bottom: 16px; }
      #robin-workshop .rv-section-aside { margin-top: 13px; max-width: none; }
      #robin-workshop h2 { font-size: 28px; }
      #robin-workshop .rv-project { grid-template-columns: 1fr; gap: 21px; }
      #robin-workshop .rv-project-picks { gap: 0 14px; }
      #robin-workshop .rv-pick { font-size: 10px; }
      #robin-workshop .rv-project-role { margin-top: 13px; }
      #robin-workshop .rv-service summary { grid-template-columns: 18px 1fr 20px; gap: 6px 12px; padding-block: 20px; }
      #robin-workshop .rv-service-title { font-size: 18px; }
      #robin-workshop .rv-service-short { grid-column: 2; grid-row: 2; font-size: 11px; }
      #robin-workshop .rv-service-plus { grid-column: 3; grid-row: 1 / 3; }
      #robin-workshop .rv-service-detail { padding: 0 0 20px 30px; display: block; }
      #robin-workshop .rv-example { margin-top: 14px; }
      #robin-workshop .rv-about { grid-template-columns: 1fr; padding: 23px; margin-bottom: 32px; }
      #robin-workshop .rv-about-photo { width: 105px; aspect-ratio: 1; }
      #robin-workshop .rv-about h2 { font-size: 27px; }
      #robin-workshop .rv-contact { grid-template-columns: 1fr; gap: 22px; padding-block: 30px; }
      #robin-workshop .rv-contact h2 { font-size: 38px; }
    }
    @media (pointer: coarse) {
      #robin-workshop .rv-pref, #robin-workshop .rv-pick, #robin-workshop .rv-nav-links a, #robin-workshop .rv-example { min-height: 44px; }
      #robin-workshop .rv-pref { min-width: 35px; }
      #robin-workshop .rv-nav-links a { display: flex; align-items: center; justify-content: center; min-width: 32px; }
    }
    #robin-workshop .rv-scroll-progress {
      position: fixed;
      inset: 0 0 auto;
      height: 2px;
      z-index: 20;
      background: var(--rv-teal);
      box-shadow: 0 0 12px var(--rv-teal);
      transform: scaleX(0);
      transform-origin: left;
      pointer-events: none;
    }
    #robin-workshop .rv-desk {
      background-image:
        radial-gradient(circle at var(--rv-spot-x, 50%) var(--rv-spot-y, 50%), color-mix(in srgb, var(--rv-teal) 11%, transparent), transparent 48%),
        radial-gradient(var(--rv-line) .65px, transparent .65px);
      background-size: 100% 100%, 18px 18px;
    }
    /* Collage depth: home.js sets --rv-px/--rv-py (-1..1) on the desk; each card moves and tilts by its own depth. */
    #robin-workshop .rv-desk { perspective: 1200px; }
    #robin-workshop .rv-object {
      --rv-shift: translate3d(calc(var(--rv-px, 0) * var(--rv-dx, 0px)), calc(var(--rv-py, 0) * var(--rv-dy, 0px)), 0);
      transform: var(--rv-shift) rotateX(calc(var(--rv-py, 0) * -2.5deg)) rotateY(calc(var(--rv-px, 0) * 3.5deg)) rotate(calc(var(--rv-rot, 0deg) * var(--rv-tilt)));
      transition: transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .35s, opacity .35s; will-change: transform; cursor: pointer;
    }
    #robin-workshop .rv-object-gis { --rv-dx: -9px; --rv-dy: -7px; --rv-rot: -3deg; --rv-drift: -22px; }
    #robin-workshop .rv-object-3d { --rv-dx: 8px; --rv-dy: 6px; --rv-rot: -6deg; --rv-drift: -52px; }
    #robin-workshop .rv-object-phone { --rv-dx: 12px; --rv-dy: -9px; --rv-rot: 5deg; --rv-drift: -90px; }
    #robin-workshop .rv-object:hover, #robin-workshop .rv-object:focus-visible { z-index: 5; transform: var(--rv-shift) translateY(-6px) scale(1.015); }
    #robin-workshop .rv-desk:has(.rv-object:focus-visible) .rv-object:not(:focus-visible) { opacity: .7; }
    @media (hover: hover) { #robin-workshop .rv-desk:has(.rv-object:hover) .rv-object:not(:hover) { opacity: .7; } }
    #robin-workshop .rv-object-caption b { transition: translate .3s; }
    #robin-workshop .rv-object:hover .rv-object-caption b, #robin-workshop .rv-object:focus-visible .rv-object-caption b { translate: 3px -3px; }
    #robin-workshop .rv-desk-cross { animation: rv-cross-breathe 4s ease-in-out infinite; }
    #robin-workshop .rv-nav-links a { background: linear-gradient(var(--rv-teal), var(--rv-teal)) no-repeat left bottom / 0 1px; transition: color .25s, background-size .3s; }
    #robin-workshop .rv-nav-links a:hover, #robin-workshop .rv-nav-links a:focus-visible { background-size: 100% 1px; }
    #robin-workshop .rv-primary span[aria-hidden], #robin-workshop .rv-text-link span[aria-hidden], #robin-workshop .rv-email span[aria-hidden] { transition: translate .3s; }
    #robin-workshop .rv-primary:hover span[aria-hidden], #robin-workshop .rv-text-link:hover span[aria-hidden], #robin-workshop .rv-email:hover span[aria-hidden] { translate: 3px -2px; }
    #robin-workshop .rv-pick { transition: color .25s, border-color .25s; }
    #robin-workshop .rv-pick:hover { color: var(--rv-ink); }
    #robin-workshop .rv-service summary { transition: background-color .25s, padding-inline .25s; }
    #robin-workshop .rv-service summary:hover { background: color-mix(in srgb, var(--rv-soft) 65%, transparent); padding-inline: 8px; }
    #robin-workshop .rv-service-plus { transition: transform .35s cubic-bezier(.2,.75,.2,1); }
    #robin-workshop .rv-service[open] .rv-service-detail { animation: rv-detail-in .35s ease-out both; }
    #robin-workshop .rv-methods-list a { transition: translate .3s, border-color .3s; }
    #robin-workshop .rv-methods-list a:hover { translate: 0 -4px; border-color: var(--rv-teal); }
    #robin-workshop .rv-about-photo { transition: filter .55s; }
    #robin-workshop .rv-about:hover .rv-about-photo { filter: grayscale(.25); }
    @keyframes rv-cross-breathe { 50% { opacity: .5; scale: 1.13; } }
    @keyframes rv-detail-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
    @keyframes rv-rise-in { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
    @keyframes rv-card-in { from { opacity: 0; scale: 1.07; rotate: var(--rv-deal, 4deg); } }
    @keyframes rv-drift { to { translate: 0 var(--rv-drift, -40px); } }
    @keyframes rv-line-rise { from { translate: 0 112%; } }
    @keyframes rv-step-in { from { opacity: 0; translate: -8px 0; } }
    @media (prefers-reduced-motion: no-preference) {
      #robin-workshop.rv-motion-ready .rv-hero-copy > * { animation: rv-rise-in .7s cubic-bezier(.2,.75,.2,1) both; }
      #robin-workshop.rv-motion-ready .rv-hero-copy > :nth-child(2) { animation-delay: 80ms; }
      #robin-workshop.rv-motion-ready .rv-hero-copy > :nth-child(3) { animation-delay: 160ms; }
      #robin-workshop.rv-motion-ready .rv-hero-copy > :nth-child(4) { animation-delay: 240ms; }
      #robin-workshop.rv-motion-ready .rv-hero-copy > :nth-child(5) { animation-delay: 320ms; }
      /* The headline rises line by line from a mask instead of fading as one block. */
      #robin-workshop.rv-motion-ready .rv-hero-copy > .rv-title { animation: none; }
      #robin-workshop.rv-motion-ready .rv-title > span { display: inline-block; clip-path: inset(-.1em -.1em -.22em -.1em); }
      #robin-workshop.rv-motion-ready .rv-title > span > span { display: inline-block; animation: rv-line-rise .9s cubic-bezier(.2,.75,.2,1) 60ms both; }
      #robin-workshop.rv-motion-ready .rv-title > .rv-title-accent > span { animation-delay: 180ms; }
      #robin-workshop.rv-motion-ready .rv-delivery > span { animation: rv-step-in .5s cubic-bezier(.2,.75,.2,1) both; animation-delay: calc(.8s + var(--rv-step, 0) * .15s); }
      #robin-workshop .rv-delivery > span:nth-child(2) { --rv-step: 1; }
      #robin-workshop .rv-delivery > span:nth-child(3) { --rv-step: 2; }
      #robin-workshop .rv-delivery > span:nth-child(4) { --rv-step: 3; }
      #robin-workshop .rv-delivery > span:nth-child(5) { --rv-step: 4; }
      /* Cards are dealt onto the desk, then drift apart by depth as the hero scrolls away. */
      #robin-workshop.rv-motion-ready .rv-object { animation: rv-card-in .9s cubic-bezier(.2,.75,.2,1) backwards; }
      #robin-workshop.rv-motion-ready .rv-object-gis { --rv-deal: -3deg; }
      #robin-workshop.rv-motion-ready .rv-object-3d { --rv-deal: 5deg; animation-delay: 130ms; }
      #robin-workshop.rv-motion-ready .rv-object-phone { --rv-deal: -6deg; animation-delay: 260ms; }
      @supports (animation-timeline: scroll()) {
        #robin-workshop.rv-motion-ready .rv-object { animation: rv-card-in .9s cubic-bezier(.2,.75,.2,1) backwards, rv-drift linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0px 900px; }
        #robin-workshop.rv-motion-ready .rv-object-3d { animation-delay: 130ms, 0s; }
        #robin-workshop.rv-motion-ready .rv-object-phone { animation-delay: 260ms, 0s; }
      }
      #robin-workshop.rv-motion-ready .rv-reveal { opacity: 0; translate: 0 20px; transition: opacity .65s ease, translate .65s cubic-bezier(.2,.75,.2,1); transition-delay: var(--rv-reveal-delay, 0ms); }
      #robin-workshop.rv-motion-ready .rv-reveal.rv-visible { opacity: 1; translate: 0 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      #robin-workshop .rv-object, #robin-workshop .rv-service summary, #robin-workshop .rv-service-plus,
      #robin-workshop .rv-primary span[aria-hidden], #robin-workshop .rv-text-link span[aria-hidden],
      #robin-workshop .rv-email span[aria-hidden], #robin-workshop .rv-methods-list a,
      #robin-workshop .rv-about-photo { animation: none !important; transition: none !important; }
      #robin-workshop .rv-desk-cross, #robin-workshop .rv-service[open] .rv-service-detail { animation: none; }
      #robin-workshop .rv-object:hover, #robin-workshop .rv-object:focus-visible { transform: rotate(calc(var(--rv-rot, 0deg) * var(--rv-tilt))); }
      #robin-workshop .rv-object:hover .rv-object-caption b, #robin-workshop .rv-object:focus-visible .rv-object-caption b { translate: 0 0; }
      #robin-workshop .rv-service summary:hover { padding-inline: 0; }
      #robin-workshop .rv-primary:hover span[aria-hidden], #robin-workshop .rv-text-link:hover span[aria-hidden],
      #robin-workshop .rv-email:hover span[aria-hidden], #robin-workshop .rv-methods-list a:hover { translate: 0 0; }
    }
  
.skip-link { position: absolute; left: 10px; top: -60px; z-index: 10; padding: 10px 14px; background: #121515; color: #fff; font: 500 14px/1.3 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.skip-link:focus { top: 10px; }

/* ==========================================================================
   Viewport motion language
   Motion borrows the camera of a map or 3D viewport: it flies, pans and zooms
   to what matters instead of fading it in. --rv-ease settles interface
   elements; --rv-ease-cam moves the camera.
   ========================================================================== */
#robin-workshop { --rv-ease: cubic-bezier(.2,.75,.2,1); --rv-ease-cam: cubic-bezier(.62,.02,.16,1); --rv-cam-time: .9s; interpolate-size: allow-keywords; }

/* Navigation: sticks on wider layouts and marks the section being read. Anchor jumps and focused
   elements stop below it (scroll-padding), so the scroll margins further down only add breathing room. */
@media (min-width: 761px) { html { scroll-padding-top: 76px; } }
@container rv (min-width: 761px) {
  #robin-workshop .rv-nav { position: sticky; top: -19px; z-index: 15; background: color-mix(in srgb, var(--rv-paper) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  #robin-workshop .rv-nav > * { transition: translate .35s var(--rv-ease); }
  #robin-workshop .rv-nav.rv-nav-stuck > * { translate: 0 9px; }
  #robin-workshop .rv-service { scroll-margin-top: 4px; }
}
#robin-workshop .rv-nav-links a[aria-current] { color: var(--rv-teal); background-size: 100% 1px; }

/* Hero desk: crosshair and coordinate readout follow the pointer (home.js sets --rv-cx/--rv-cy). */
#robin-workshop .rv-desk-coords { position: absolute; top: -6px; left: 4%; color: var(--rv-muted); font-variant-numeric: tabular-nums; transition: color .3s; }
#robin-workshop .rv-desk.rv-desk-live .rv-desk-coords { color: var(--rv-teal); }
#robin-workshop .rv-desk-axis { position: absolute; z-index: 6; background: var(--rv-teal); opacity: 0; pointer-events: none; transition: opacity .3s; }
#robin-workshop .rv-desk-axis-x { inset: 0 0 auto; height: 1px; transform: translateY(var(--rv-cy, 0px)); }
#robin-workshop .rv-desk-axis-y { inset: 0 auto 0 0; width: 1px; transform: translateX(var(--rv-cx, 0px)); }
#robin-workshop .rv-desk.rv-desk-live .rv-desk-axis { opacity: .3; }
@container rv (max-width: 400px) { #robin-workshop .rv-desk-coords { display: none; } }

/* Scope strip: each service area links to its description. */
#robin-workshop .rv-scope a { padding-block: 4px; background: linear-gradient(var(--rv-teal), var(--rv-teal)) no-repeat left bottom / 0 1px; transition: color .25s, background-size .3s var(--rv-ease); }
#robin-workshop .rv-scope a:hover, #robin-workshop .rv-scope a:focus-visible { color: var(--rv-teal); background-size: 100% 1px; }

/* Project selector: one underline glides between the lead projects. */
#robin-workshop .rv-lead-picks { position: relative; }
#robin-workshop .rv-pick { cursor: pointer; }
#robin-workshop .rv-pick-glider { display: none; position: absolute; top: 0; left: 0; width: 100px; height: 2px; background: var(--rv-teal); transform-origin: left; transform: translate(var(--rv-glide-x, 0px), var(--rv-glide-y, 0px)) scaleX(var(--rv-glide-w, 0)); transition: transform .5s var(--rv-ease), opacity .3s; pointer-events: none; }
#robin-workshop.rv-enhanced .rv-pick-glider { display: block; }
#robin-workshop.rv-enhanced .rv-lead-picks .rv-pick[aria-pressed="true"] { border-color: transparent; }

/* Project viewer: the stage clips the sheet (image, pins, reticle); home.js moves the sheet like a camera
   through --rv-cam-x/-y/-z. Pins and reticle divide by --rv-cam-z so they keep their size on screen. */
#robin-workshop .rv-project { scroll-margin-top: 20px; }
#robin-workshop .rv-viewport { min-width: 0; }
#robin-workshop .rv-frame { position: relative; }
#robin-workshop .rv-frame::before, #robin-workshop .rv-reticle::before {
  --rv-corners: linear-gradient(#000 0 0) 0 0 / var(--rv-c) var(--rv-c) no-repeat, linear-gradient(#000 0 0) 100% 0 / var(--rv-c) var(--rv-c) no-repeat, linear-gradient(#000 0 0) 0 100% / var(--rv-c) var(--rv-c) no-repeat, linear-gradient(#000 0 0) 100% 100% / var(--rv-c) var(--rv-c) no-repeat;
  -webkit-mask: var(--rv-corners); mask: var(--rv-corners); pointer-events: none;
}
#robin-workshop .rv-frame::before { content: ''; position: absolute; inset: -7px; --rv-c: 13px; border: 1px solid var(--rv-gold); }
#robin-workshop .rv-stage { position: relative; display: grid; place-items: center; aspect-ratio: var(--rv-ratio, 1.78); overflow: hidden; border-radius: 4px; background: var(--rv-soft); container-type: size; }
#robin-workshop .rv-stage[data-orient="portrait"] { aspect-ratio: 1.78; }
#robin-workshop .rv-sheet { position: relative; width: min(100cqw, calc(100cqh * var(--rv-ratio, 1.78))); aspect-ratio: var(--rv-ratio, 1.78); transform-origin: 0 0; transform: translate3d(var(--rv-cam-x, 0px), var(--rv-cam-y, 0px), 0) scale(var(--rv-cam-z, 1)); transition: transform var(--rv-cam-time) var(--rv-ease-cam); }
#robin-workshop .rv-sheet img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
#robin-workshop .rv-ghost { position: absolute; z-index: 2; max-width: none; object-fit: cover; pointer-events: none; }
/* A project's clip plays once over the still, then dissolves back to it so the points can be explored. */
#robin-workshop .rv-clip { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: contain; background: var(--rv-soft); opacity: 0; pointer-events: none; transition: opacity .45s; }
#robin-workshop .rv-stage.rv-clip-playing .rv-clip { opacity: 1; }
#robin-workshop.rv-enhanced .rv-stage.rv-clip-on { cursor: pointer; }
#robin-workshop.rv-enhanced .rv-stage { cursor: zoom-in; touch-action: pan-y; }
#robin-workshop.rv-enhanced .rv-stage.rv-zoomed { cursor: zoom-out; }
#robin-workshop.rv-enhanced .rv-stage.rv-dragging { cursor: grabbing; }

#robin-workshop .rv-pins { position: absolute; inset: 0; pointer-events: none; }
#robin-workshop .rv-pin { position: absolute; left: clamp(15px, calc(var(--x) * 100%), calc(100% - 15px)); top: clamp(15px, calc(var(--y) * 100%), calc(100% - 15px)); display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1.5px solid var(--rv-teal); border-radius: 50%; background: color-mix(in srgb, var(--rv-paper) 90%, transparent); box-shadow: 0 3px 10px -2px #0008; color: var(--rv-ink); font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; pointer-events: auto; cursor: pointer; transform: scale(calc(1 / var(--rv-cam-z, 1))); transition: transform var(--rv-cam-time) var(--rv-ease-cam), background-color .25s, border-color .25s, color .25s; }
#robin-workshop .rv-pin::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
#robin-workshop .rv-pin::after { content: ''; position: absolute; inset: -1.5px; border: 1.5px solid var(--rv-teal); border-radius: 50%; opacity: 0; pointer-events: none; }
#robin-workshop .rv-pin[data-mine], #robin-workshop .rv-pin[data-mine]::after { border-color: var(--rv-gold); }
#robin-workshop .rv-pin.is-active, #robin-workshop .rv-pin.is-hot { background: var(--rv-teal); border-color: var(--rv-teal); color: var(--rv-on-teal); }
#robin-workshop .rv-reticle { position: absolute; left: calc(var(--rv-bx, 0) * 100%); top: calc(var(--rv-by, 0) * 100%); width: calc(var(--rv-bw, 1) * 100%); height: calc(var(--rv-bh, 1) * 100%); box-shadow: 0 0 0 calc(1px / var(--rv-cam-z, 1)) color-mix(in srgb, var(--rv-gold) 55%, transparent), 0 0 0 200vmax rgb(0 0 0 / .32); opacity: 0; pointer-events: none; }
#robin-workshop .rv-reticle::before { content: ''; position: absolute; inset: 0; --rv-c: calc(20px / var(--rv-cam-z, 1)); border: calc(2.5px / var(--rv-cam-z, 1)) solid var(--rv-gold); }
#robin-workshop .rv-sheet.rv-has-focus .rv-reticle { opacity: 1; }
#robin-workshop .rv-sheet.rv-cut, #robin-workshop .rv-sheet.rv-cut .rv-pin,
#robin-workshop .rv-stage.rv-dragging .rv-sheet, #robin-workshop .rv-stage.rv-dragging .rv-pin { transition: none; }

/* Viewer toolbar under the image, so nothing covers the work: zoom readout, guided tour, back to overview. */
#robin-workshop .rv-hud { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 30px; margin-top: 16px; }
#robin-workshop .rv-hud-label { margin-right: auto; color: var(--rv-muted); font-variant-numeric: tabular-nums; }
#robin-workshop .rv-hud-button { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; border: 1px solid var(--rv-line); border-radius: 3px; background: transparent; font-size: 11px; line-height: 1.6; cursor: pointer; transition: border-color .25s, color .25s; }
#robin-workshop .rv-hud-button:hover, #robin-workshop .rv-hud-button[aria-pressed="true"] { border-color: var(--rv-teal); color: var(--rv-teal); }
#robin-workshop .rv-tour-icon { width: 0; height: 0; border-block: 4.5px solid transparent; border-left: 7px solid currentColor; }
#robin-workshop .rv-hud-button[aria-pressed="true"] .rv-tour-icon { width: 8px; height: 8px; border: 0; background: currentColor; }
#robin-workshop .rv-minimap { position: relative; height: 16px; aspect-ratio: var(--rv-ratio, 1.78); overflow: hidden; border: 1px solid var(--rv-muted); }
#robin-workshop .rv-minimap > span { position: absolute; left: var(--rv-map-x, 0%); top: var(--rv-map-y, 0%); width: var(--rv-map-w, 100%); height: var(--rv-map-h, 100%); background: color-mix(in srgb, var(--rv-teal) 60%, transparent); }

/* Caption: what the selected point shows. Its height is reserved so selecting points never moves the page. */
#robin-workshop .rv-caption { position: relative; min-height: calc(1.65em * 2 + 44px); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rv-line); font-size: 13px; }
#robin-workshop .rv-caption-progress { position: absolute; inset: -1px 0 auto; height: 1px; background: var(--rv-teal); transform: scaleX(0); transform-origin: left; }
#robin-workshop .rv-caption-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px; }
#robin-workshop .rv-caption-head .rv-mono { color: var(--rv-teal); }
#robin-workshop .rv-caption-head strong { font-size: 14px; font-weight: 500; }
#robin-workshop .rv-caption p { color: var(--rv-muted); line-height: 1.65; }
#robin-workshop .rv-point-flag { padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--rv-gold) 60%, transparent); border-radius: 2px; color: var(--rv-gold); font: 500 9px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }

/* Link to the project's own page or site, under its role text. */
#robin-workshop .rv-project-link { align-self: flex-start; margin-top: 14px; }

/* Points list: the keyboard route through the same points as the pins. */
#robin-workshop .rv-explore { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--rv-line); }
#robin-workshop .rv-explore-head { margin-bottom: 4px; color: var(--rv-gold); }
#robin-workshop .rv-points { margin: 0; padding: 0; list-style: none; }
#robin-workshop .rv-points li + li { border-top: 1px solid var(--rv-line); }
#robin-workshop .rv-point { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; background: transparent; font-size: 13px; text-align: left; cursor: pointer; transition: color .25s; }
#robin-workshop .rv-point-num { color: var(--rv-muted); font: 500 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; transition: color .25s; }
#robin-workshop .rv-point:hover, #robin-workshop .rv-points li.is-hot .rv-point, #robin-workshop .rv-point[aria-pressed="true"],
#robin-workshop .rv-point[aria-pressed="true"] .rv-point-num { color: var(--rv-teal); }
#robin-workshop .rv-point > :not(.rv-point-flag) { transition: color .25s, translate .3s var(--rv-ease); }
#robin-workshop .rv-point[aria-pressed="true"] > :not(.rv-point-flag) { translate: 8px 0; }

/* The image stays in view beside its points on two-column layouts. */
@media (min-height: 600px) {
  @container rv (min-width: 501px) { #robin-workshop.rv-enhanced .rv-viewport { position: sticky; top: 14px; } }
  @container rv (min-width: 761px) { #robin-workshop.rv-enhanced .rv-viewport { top: 88px; } }
}
@container rv (max-width: 1100px) { #robin-workshop .rv-caption { min-height: calc(1.65em * 3 + 44px); } }
@container rv (max-width: 500px) {
  #robin-workshop .rv-stage[data-orient="portrait"] { aspect-ratio: 1.15; }
  #robin-workshop .rv-caption { min-height: calc(1.65em * 4 + 44px); }
  #robin-workshop .rv-explore { margin-top: 16px; }
}

/* Services: one open at a time, with a project thumbnail as evidence. */
#robin-workshop .rv-service::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--rv-ease), content-visibility .45s allow-discrete; }
#robin-workshop .rv-service[open]::details-content { block-size: auto; }
#robin-workshop .rv-service-detail p { max-width: 64ch; }
#robin-workshop .rv-example img { transition: translate .35s var(--rv-ease), border-color .3s, box-shadow .35s; }
#robin-workshop .rv-example:hover img, #robin-workshop .rv-example:focus-visible img { translate: 0 -4px; border-color: var(--rv-teal); box-shadow: 0 12px 22px -12px var(--rv-shadow); }

/* Contact */
#robin-workshop .rv-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
#robin-workshop .rv-copy { padding: 6px 12px; border: 1px solid var(--rv-line); border-radius: 99px; background: transparent; font-size: 11px; color: var(--rv-muted); cursor: pointer; transition: border-color .25s, color .25s; }
#robin-workshop .rv-copy:hover { border-color: var(--rv-teal); color: var(--rv-teal); }
#robin-workshop .rv-copy-status { color: var(--rv-teal); }

@media (pointer: coarse) {
  #robin-workshop .rv-point { min-height: 44px; }
  #robin-workshop .rv-hud-button, #robin-workshop .rv-copy { min-height: 36px; }
  #robin-workshop .rv-project-link { min-height: 44px; }
  #robin-workshop .rv-scope { padding-block: 8px; }
  #robin-workshop .rv-scope a, #robin-workshop .rv-footer a { display: inline-flex; align-items: center; min-height: 32px; }
}

@keyframes rv-pin-in { from { opacity: 0; scale: .3; } }
@keyframes rv-ping { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 2.4; } }
@keyframes rv-ping-active { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 2.4; } }

@media (prefers-reduced-motion: no-preference) {
  /* Section heads are plotted: the index slides in, the heading rises from a mask, the rule draws. */
  #robin-workshop.rv-motion-ready .rv-section-head.rv-reveal { opacity: 1; translate: none; }
  #robin-workshop.rv-motion-ready .rv-section-head.rv-reveal .rv-section-index { opacity: 0; translate: -14px 0; transition: opacity .5s, translate .7s var(--rv-ease); }
  #robin-workshop.rv-motion-ready .rv-section-head.rv-reveal h2 { clip-path: inset(-.1em -.1em -.2em -.1em); }
  #robin-workshop.rv-motion-ready .rv-section-head.rv-reveal h2 > span { display: inline-block; translate: 0 112%; transition: translate .85s var(--rv-ease) .08s; }
  #robin-workshop.rv-motion-ready .rv-section-head.rv-reveal .rv-section-aside { opacity: 0; transition: opacity .7s .35s; }
  #robin-workshop.rv-motion-ready .rv-section-head.rv-visible .rv-section-index,
  #robin-workshop.rv-motion-ready .rv-section-head.rv-visible h2 > span,
  #robin-workshop.rv-motion-ready .rv-section-head.rv-visible .rv-section-aside { opacity: 1; translate: 0 0; }
  @supports selector(:has(a)) {
    #robin-workshop.rv-motion-ready .rv-services, #robin-workshop.rv-motion-ready .rv-methods { position: relative; border-top-color: transparent; }
    #robin-workshop.rv-motion-ready .rv-services::before, #robin-workshop.rv-motion-ready .rv-methods::before { content: ''; position: absolute; inset: -1px 0 auto; height: 1px; background: var(--rv-line); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--rv-ease-cam); }
    #robin-workshop.rv-motion-ready .rv-services:has(.rv-section-head.rv-visible)::before,
    #robin-workshop.rv-motion-ready .rv-methods:has(.rv-section-head.rv-visible)::before { transform: scaleX(1); }
  }
  /* Pins drop onto the image once the viewer is on screen, then ping once. */
  #robin-workshop.rv-motion-ready .rv-project.rv-reveal:not(.rv-visible) .rv-pin { opacity: 0; }
  #robin-workshop.rv-motion-ready .rv-project.rv-visible .rv-pin { animation: rv-pin-in .55s var(--rv-ease) backwards; animation-delay: calc(.45s + var(--i, 0) * 90ms); }
  #robin-workshop.rv-motion-ready .rv-project.rv-visible .rv-pin::after { animation: rv-ping 1.3s ease-out backwards; animation-delay: calc(1.05s + var(--i, 0) * 90ms); }
  #robin-workshop.rv-motion-ready .rv-project.rv-visible .rv-pin.is-active::after { animation: rv-ping-active 1.1s ease-out; }
  /* A collage card or service thumbnail flies into the viewer (view transition started in home.js). */
  ::view-transition-group(rv-flight) { animation-duration: .75s; animation-timing-function: cubic-bezier(.62,.02,.16,1); }
  ::view-transition-old(rv-flight), ::view-transition-new(rv-flight) { height: 100%; object-fit: cover; }
  ::view-transition-old(root) { animation-duration: .3s; }
  ::view-transition-new(root) { animation-duration: .5s; }
}
@media (prefers-reduced-motion: reduce) {
  #robin-workshop .rv-sheet, #robin-workshop .rv-pin, #robin-workshop .rv-pick-glider, #robin-workshop .rv-clip,
  #robin-workshop .rv-point > *, #robin-workshop .rv-nav > *, #robin-workshop .rv-example img,
  #robin-workshop .rv-desk-axis, #robin-workshop .rv-scope a { transition: none !important; }
  #robin-workshop .rv-service::details-content { transition: none; }
  #robin-workshop .rv-example:hover img, #robin-workshop .rv-example:focus-visible img { translate: 0 0; }
}

/* Legibility: body copy no smaller than 12.5px, and a larger scale on wide screens. */
#robin-workshop .rv-lead { font-size: 15px; }
#robin-workshop .rv-project-copy [data-project-description], #robin-workshop .rv-about p, #robin-workshop .rv-contact p { font-size: 14px; line-height: 1.75; }
#robin-workshop .rv-project-role p, #robin-workshop .rv-service-detail, #robin-workshop .rv-aftercare { font-size: 13px; }
#robin-workshop .rv-section-aside, #robin-workshop .rv-service-short, #robin-workshop .rv-about-links a,
#robin-workshop .rv-pick, #robin-workshop .rv-more-projects > span { font-size: 12.5px; }
#robin-workshop .rv-primary, #robin-workshop .rv-text-link, #robin-workshop .rv-nav-links { font-size: 13px; }
#robin-workshop .rv-methods-list small { font-size: 12px; }
#robin-workshop .rv-footer { font-size: 11px; }
@container rv (max-width: 500px) {
  #robin-workshop .rv-lead { font-size: 14px; }
  #robin-workshop .rv-nav-links { font-size: 12px; }
  #robin-workshop .rv-pick { font-size: 12px; }
}
/* The five navigation items stay on one row down to 320px-wide screens. */
@container rv (max-width: 350px) { #robin-workshop .rv-nav-links { gap: 6px; font-size: 11px; } }
@container rv (min-width: 1100px) {
  #robin-workshop .rv-lead { max-width: 430px; font-size: 16px; }
  #robin-workshop h2 { font-size: 38px; }
  #robin-workshop .rv-contact h2 { font-size: 50px; }
  #robin-workshop .rv-project-copy h3 { font-size: 30px; }
  #robin-workshop .rv-service-title { font-size: 21px; }
  #robin-workshop .rv-section-aside { max-width: 270px; }
  #robin-workshop .rv-mono { font-size: 11px; }
  #robin-workshop .rv-email { font-size: 15px; }
}
@container rv (min-width: 1500px) { #robin-workshop .rv-wrap { padding-inline: calc(50% - 680px); } }