/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --raw-color-white: #ffffff;
  --raw-color-black: #000000;
  --raw-color-neutral-950: #0a0b09;
  --raw-color-neutral-900: #121311;
  --raw-color-forest-900: #212623;
  --raw-color-sand-100: #f4f0eb;
  --raw-color-sand-200: #e2ddd5;
  --raw-color-ink-900: #2c2e2a;
  --raw-color-sage-500: #646c61;
  --raw-color-mint-300: #9fd7b5; /* jimnano.com's own accent, sampled from the live site */

  --raw-duration-fast: 200ms;
  --raw-duration-normal: 350ms;
  --raw-duration-slow: 600ms;

  --raw-font-size-display: 11.875rem;
  --raw-font-size-display-tablet: 8.9375rem;
  --raw-font-size-display-phone: 3.75rem;
  --raw-font-size-stat-phone: 2.25rem;
  --raw-font-size-headline: 2.5rem;
  --raw-font-size-headline-phone: 1.625rem;
  --raw-font-size-title: 2rem;
  --raw-font-size-title-phone: 1.25rem;
  --raw-font-size-lead: 1.125rem;
  --raw-font-size-body: 1rem;
  --raw-font-size-body-phone: 0.875rem;
  --raw-font-size-caption: 0.8125rem;
  --raw-font-size-badge: 0.6875rem;
  --raw-font-size-quote-mark: 10rem;
  --raw-font-size-quote-mark-phone: 5rem;
  --raw-font-size-wordmark: 19.5vw;
  --raw-font-size-wordmark-phone: 18vw;

  --raw-leading-hero: 0.9;
  --raw-leading-wordmark: 0.75;
  --raw-leading-heading: 1.15;
  --raw-leading-copy: 1.5;

  --raw-tracking-display: -0.04em;
  --raw-tracking-title: -0.02em;
  --raw-tracking-copy: -0.01em;
  --raw-tracking-caps: 0.22em;
  --raw-tracking-caps-wide: 0.25em;

  --raw-size-showreel: 65vw;
  --raw-ratio-showreel: 65 / 37;
  --raw-size-overlay-lead: 48vw;
  --raw-size-overlay-aside: 22vw;
  --raw-size-star: 156.25rem;
  --raw-size-footer-reveal: 85vh;
  --raw-size-wordmark-drop: calc(11vw - 12.5rem);

  --background: var(--raw-color-black);
  --foreground: var(--raw-color-white);
  --surface-glass: var(--raw-color-neutral-950);
  --surface-glass-raised: var(--raw-color-neutral-900);
  --surface-footer: var(--raw-color-forest-900);
  --surface-inverse: var(--raw-color-sand-100);
  --surface-inverse-sunken: var(--raw-color-sand-200);
  --foreground-inverse: var(--raw-color-ink-900);
  --foreground-inverse-muted: var(--raw-color-sage-500);
  --star: var(--raw-color-mint-300); /* the menu's accent — CTA button, arrows, the current link */
  --duration-fast: var(--raw-duration-fast);
  --duration-normal: var(--raw-duration-normal);
  --duration-slow: var(--raw-duration-slow);

  --font-size-display: var(--raw-font-size-display);
  --font-size-display-tablet: var(--raw-font-size-display-tablet);
  --font-size-display-phone: var(--raw-font-size-display-phone);
  --font-size-stat-phone: var(--raw-font-size-stat-phone);
  --font-size-headline: var(--raw-font-size-headline);
  --font-size-headline-phone: var(--raw-font-size-headline-phone);
  --font-size-title: var(--raw-font-size-title);
  --font-size-title-phone: var(--raw-font-size-title-phone);
  --font-size-lead: var(--raw-font-size-lead);
  --font-size-body: var(--raw-font-size-body);
  --font-size-body-phone: var(--raw-font-size-body-phone);
  --font-size-caption: var(--raw-font-size-caption);
  --font-size-badge: var(--raw-font-size-badge);
  --font-size-quote-mark: var(--raw-font-size-quote-mark);
  --font-size-quote-mark-phone: var(--raw-font-size-quote-mark-phone);
  --font-size-wordmark: var(--raw-font-size-wordmark);
  --font-size-wordmark-phone: var(--raw-font-size-wordmark-phone);
  --line-height-hero: var(--raw-leading-hero);
  --line-height-wordmark: var(--raw-leading-wordmark);
  --line-height-heading: var(--raw-leading-heading);
  --line-height-copy: var(--raw-leading-copy);
  --letter-spacing-display: var(--raw-tracking-display);
  --letter-spacing-title: var(--raw-tracking-title);
  --letter-spacing-copy: var(--raw-tracking-copy);
  --letter-spacing-caps: var(--raw-tracking-caps);
  --letter-spacing-caps-wide: var(--raw-tracking-caps-wide);
  --size-showreel: var(--raw-size-showreel);
  --ratio-showreel: var(--raw-ratio-showreel);
  --size-overlay-lead: var(--raw-size-overlay-lead);
  --size-overlay-aside: var(--raw-size-overlay-aside);
  --size-star: var(--raw-size-star);
  --size-footer-reveal: var(--raw-size-footer-reveal);
  --size-wordmark-drop: var(--raw-size-wordmark-drop);

  --leading-display: 1.1;
  --ease-entrance: cubic-bezier(0.2, 0, 0, 1);
  --ease-glide: cubic-bezier(0.25, 1, 0.5, 1);

  /* alpha mixes used more than once */
  --fg-70: color-mix(in oklab, var(--foreground) 70%, transparent);
  --fg-30: color-mix(in oklab, var(--foreground) 30%, transparent);
  --fg-22: color-mix(in oklab, var(--foreground) 22%, transparent);
  --fg-18: color-mix(in oklab, var(--foreground) 18%, transparent);
  --fg-10: color-mix(in oklab, var(--foreground) 10%, transparent);
  --fg-8: color-mix(in oklab, var(--foreground) 8%, transparent);
  --glass-85: color-mix(in oklab, var(--surface-glass) 85%, transparent);
  --glass-75: color-mix(in oklab, var(--surface-glass) 75%, transparent);
  --glass-raised-95: color-mix(in oklab, var(--surface-glass-raised) 95%, transparent);
}

/* ── Root scale ──────────────────────────────────────────────────────────── */
html { font-size: 16px; }
@media (max-width: 1440px) { html { font-size: 1.111111vw; } }
@media (max-width: 1024px) { html { font-size: 1.5625vw; } }
@media (max-width: 640px)  { html { font-size: 4.444444vw; } }

/* ── Lenis ───────────────────────────────────────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-weight: 400;
  background: var(--background);
  color: var(--foreground);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3, p, dl, dd, dt, figure, blockquote, ul { margin: 0; font-weight: inherit; font-size: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
img, video, svg, canvas { display: block; max-width: 100%; }
address { font-style: normal; }
a:focus-visible, button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
[inert] { pointer-events: none; }

/* ── Type roles ──────────────────────────────────────────────────────────── */
.t-display { font-size: var(--font-size-display-phone); line-height: var(--line-height-hero); letter-spacing: var(--letter-spacing-display); }
@media (min-width: 640px)  { .t-display { font-size: var(--font-size-display-tablet); } }
@media (min-width: 1024px) { .t-display { font-size: var(--font-size-display); } }
.t-stat { font-size: var(--font-size-stat-phone); line-height: var(--line-height-hero); letter-spacing: var(--letter-spacing-display); font-variant-numeric: tabular-nums; }
@media (min-width: 768px)  { .t-stat { font-size: var(--font-size-display-tablet); } }
@media (min-width: 1024px) { .t-stat { font-size: var(--font-size-display); } }
.t-title { font-size: var(--font-size-title-phone); text-transform: uppercase; letter-spacing: var(--letter-spacing-title); }
@media (min-width: 640px) { .t-title { font-size: var(--font-size-title); } }
.t-headline { font-size: var(--font-size-headline-phone); text-transform: uppercase; line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-title); }
@media (min-width: 640px) { .t-headline { font-size: var(--font-size-headline); } }
.t-body { font-size: var(--font-size-body-phone); line-height: var(--line-height-copy); letter-spacing: var(--letter-spacing-copy); }
@media (min-width: 640px) { .t-body { font-size: var(--font-size-body); } }
.t-lead { font-size: var(--font-size-lead); font-weight: 500; text-transform: uppercase; letter-spacing: var(--letter-spacing-copy); }
.t-caption { font-size: var(--font-size-caption); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); }
.muted { color: var(--fg-70); }

/* ── Arrow link ──────────────────────────────────────────────────────────── */
.arrow-link { display: inline-flex; width: fit-content; align-items: center; gap: 0.75rem; color: var(--foreground); transition-property: opacity, translate, background-color, border-color; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-glide); }
.arrow-link svg { width: 1.125rem; height: 1.125rem; transition: translate var(--duration-normal) var(--ease-glide); }
.arrow-link:hover svg { translate: 0.125rem 0.125rem; }
.arrow-link .arrow-label { font-size: var(--font-size-caption); line-height: var(--leading-display); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; }
.arrow-link.plain:hover { opacity: 0.8; translate: 0 0.125rem; }
.arrow-link.glass { border-radius: 0.25rem; border: 1px solid var(--fg-8); background: var(--glass-75); padding: 0.875rem 1.75rem; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.arrow-link.glass:hover { translate: 0 -0.125rem; border-color: var(--fg-22); background: var(--glass-raised-95); }

/* ── Dock ────────────────────────────────────────────────────────────────── */
.dock { pointer-events: none; position: fixed; left: 0; right: 0; bottom: 2.5rem; z-index: 100; display: flex; justify-content: center; }
@media (max-width: 767.98px) { .dock { bottom: 1.5rem; } }
.dock nav { position: relative; }
.dock nav.live { pointer-events: auto; }
.dock-bar { display: flex; height: 4rem; width: 22.5rem; align-items: center; justify-content: space-between; border: 1px solid var(--fg-10); background: var(--glass-85); padding: 0 1.25rem; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); transition-property: background-color, border-color, translate; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-glide); }
.dock-bar:hover { translate: 0 -0.125rem; border-color: var(--fg-22); background: var(--glass-raised-95); }
@media (max-width: 639.98px) { .dock-bar { width: 17.5rem; } }
.dock-home { transition: opacity var(--duration-fast) var(--ease-glide); }
.dock-home:hover { opacity: 0.8; }
.dock-home img { width: 1.75rem; height: 1.75rem; object-fit: contain; }
.dock-label { font-size: var(--font-size-caption); text-transform: uppercase; line-height: var(--leading-display); letter-spacing: var(--letter-spacing-caps-wide); transition: opacity var(--duration-fast) var(--ease-glide); }
.dock-label:hover { opacity: 0.8; }
.dock-toggle { transition: opacity var(--duration-fast) var(--ease-glide); }
.dock-toggle:hover { opacity: 0.8; }
.dock-toggle svg { width: 1.375rem; height: 1.375rem; }
.dock-toggle svg.hidden { display: none; }

/* ── Menu — the Buon Cibo menu: a photo panel out of the dock (wide), a full-screen sheet (phone) ── */
.rise { opacity: 0; translate: 0 1.5rem; transition: opacity 700ms var(--ease-glide), translate 700ms var(--ease-glide); }
.rise-8 { translate: 0 2rem; }
.open > .rise, .open .rise { opacity: 1; translate: 0 0; }
.menu-scrim { position: fixed; inset: 0; z-index: 98; display: none; cursor: default; background: rgb(0 0 0 / 0.55); opacity: 0; pointer-events: none; transition: opacity 700ms var(--ease-glide); }
@media (min-width: 1024px) { .menu-scrim { display: block; } }
.menu-scrim.open { opacity: 1; pointer-events: auto; }
.btn-star { display: flex; align-items: center; justify-content: space-between; border-radius: 0.25rem; background: var(--star); padding: 1.25rem 1.5rem; font-size: min(1.125rem, 4.6vw); font-weight: 500; text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: #000; transition-property: scale, filter; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-glide); }
.btn-star:active { scale: 0.98; filter: brightness(1.1); }
.btn-star svg { width: 1.5rem; height: 1.5rem; }
.btn-ghost { display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.25rem; border: 1px solid color-mix(in oklab, var(--foreground) 20%, transparent); padding: 0.875rem 1rem; font-size: var(--font-size-caption); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); transition-property: background-color, border-color, scale; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-glide); }
.btn-ghost:active { scale: 0.98; border-color: var(--star); background: color-mix(in oklab, var(--foreground) 5%, transparent); }

/* the sheet */
.mobile-menu { position: fixed; inset: 0; z-index: 99; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface-footer); clip-path: inset(100% 0 0 0); pointer-events: none; transition: clip-path 700ms cubic-bezier(0.76, 0, 0.24, 1); }
.mobile-menu.open { clip-path: inset(0 0 0 0); pointer-events: auto; }
@media (min-width: 1024px) { .mobile-menu { display: none; } }
.menu-diamond { pointer-events: none; position: absolute; right: -11rem; top: 2.5rem; display: block; width: 34rem; height: 34rem; background: color-mix(in oklab, var(--star) 7%, transparent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
.mobile-menu-inner { position: relative; display: flex; min-height: 100dvh; flex-direction: column; padding: 5rem 1.5rem 8rem; }
.mm-row { border-bottom: 1px solid var(--fg-10); }
.mm-link { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0; transition-property: color, translate; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-glide); }
.mm-link:active { translate: 0.25rem 0; color: var(--star); }
.mm-thumb { position: relative; display: block; height: 3.5rem; width: 4.5rem; flex-shrink: 0; overflow: hidden; background: var(--background); }
.mm-thumb img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--duration-slow) var(--ease-glide); }
.mm-link:active .mm-thumb img { scale: 1.1; }
.mm-text { display: flex; min-width: 0; flex-grow: 1; flex-direction: column; }
.mm-label { display: flex; align-items: center; gap: 0.5rem; font-size: min(1.625rem, 6.4vw); text-transform: uppercase; line-height: 1; letter-spacing: -0.025em; }
.mm-detail { margin-top: 0.375rem; font-size: 0.6875rem; text-transform: uppercase; line-height: 1; letter-spacing: var(--letter-spacing-caps); color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.mm-arrow { width: 1.25rem; height: 1.25rem; flex-shrink: 0; translate: -0.5rem 0; color: var(--star); opacity: 0.6; transition-property: translate, opacity; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-glide); }
.mm-link:active .mm-arrow { translate: 0 0; opacity: 1; }
.mm-actions { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; }
.mm-actions .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.mm-info { margin-top: 1.5rem; display: grid; gap: 1.25rem; font-size: 0.75rem; text-transform: uppercase; line-height: 1.5; letter-spacing: var(--letter-spacing-caps); color: var(--fg-70); }
.mm-info .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.mm-info .k { margin-bottom: 0.25rem; display: block; color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.mm-info a { display: block; }
.mm-info a:active { color: var(--star); }
.mm-info ul.socials { display: flex; gap: 1.25rem; }
.mm-info ul.socials a { display: inline; }
.mm-spacer { min-height: 1.25rem; flex: 1 1 0%; }
.mm-ticker { margin: 1.5rem -1.5rem 0; overflow: hidden; border-top: 1px solid var(--fg-10); padding-top: 0.875rem; }
.mm-ticker .track { display: flex; width: max-content; white-space: nowrap; font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: color-mix(in oklab, var(--foreground) 40%, transparent); animation: marquee 26s linear infinite; }

/* the panel out of the dock */
.dock-panel { position: absolute; bottom: 100%; left: 50%; margin-bottom: 0.75rem; width: 64rem; max-width: 94vw; translate: -50% 0; overflow-y: auto; max-height: calc(100dvh - 9rem); border: 1px solid var(--fg-10); background: color-mix(in oklab, var(--surface-glass) 95%, transparent); padding: 1.5rem; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); clip-path: inset(100% 0 0 0); pointer-events: none; transition: clip-path 700ms cubic-bezier(0.76, 0, 0.24, 1); }
.dock-panel.open { clip-path: inset(0 0 0 0); pointer-events: auto; }
@media (max-width: 1023.98px) { .dock-panel { display: none; } }
.dock-panel-head { margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.dock-panel-head p { display: flex; align-items: center; gap: 0.5rem; font-size: var(--font-size-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--fg-70); }
.dock-panel-head p .star-glyph { color: var(--star); }
.dock-panel-head a { border-radius: 0.25rem; background: var(--star); padding: 0.625rem 1.25rem; font-size: var(--font-size-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: #000; transition-property: filter, scale; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-glide); }
.dock-panel-head a:hover { filter: brightness(1.1); }
.dock-panel-head a:active { scale: 0.98; }
.dock-panel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.card { display: block; }
.card-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--background); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--duration-slow) var(--ease-glide); }
.card:hover .card-img img { scale: 1.05; }
.card-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.1) 50%, transparent); }
.card-row { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; }
.card-row .lbl { font-size: var(--font-size-lead); font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: var(--letter-spacing-copy); }
.card-row .arr { translate: 0.25rem 0; opacity: 0; transition-property: opacity, translate; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-glide); }
.card:hover .card-row .arr { translate: 0 0; opacity: 1; }
.card-detail { margin-top: 0.5rem; display: block; font-size: var(--font-size-caption); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: color-mix(in oklab, var(--foreground) 60%, transparent); }
.dock-panel-info { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; border-top: 1px solid color-mix(in oklab, var(--foreground) 15%, transparent); padding-top: 1.25rem; font-size: var(--font-size-caption); text-transform: uppercase; line-height: 1.6; letter-spacing: var(--letter-spacing-caps); }
.dock-panel-info .k { margin-bottom: 0.25rem; display: block; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.dock-panel-info a { display: block; transition: color var(--duration-fast) var(--ease-glide); }
.dock-panel-info a:hover { color: var(--fg-70); }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .dock-panel, .rise, .menu-scrim { transition: none; }
  .menu-diamond, .mm-ticker .track { animation: none; }
}

/* ── Failure banner ──────────────────────────────────────────────────────── */
.asset-banner { position: fixed; left: 1rem; right: 1rem; top: 1rem; z-index: 300; border: 1px solid #a33; background: #200; color: #fbb; padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.4; word-break: break-all; }
.asset-banner:empty { display: none; }

/* ── Header (inner pages): the fixed glass bar, links that roll on hover ─── */
.site-header { position: fixed; left: 0; right: 0; top: 0; z-index: 100; }
.site-header-bar { position: relative; z-index: 100; display: flex; height: 4rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--fg-10); background: var(--glass-75); padding: 0 2.5rem; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); transition: background-color 500ms var(--ease-glide), border-color 500ms var(--ease-glide); }
@media (max-width: 767.98px) { .site-header-bar { padding: 0 1.5rem; } }
@media (max-width: 1023.98px) { .site-header.menu-open .site-header-bar { border-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.site-header-brand { display: flex; align-items: center; font-size: var(--font-size-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--letter-spacing-caps-wide); transition: opacity var(--duration-fast) var(--ease-glide); }
.site-header-brand:hover { opacity: 0.7; }
.site-header-nav { display: none; }
@media (min-width: 1024px) { .site-header-nav { display: block; } }
.site-header-nav ul { display: flex; align-items: center; gap: 1.25rem; white-space: nowrap; }
@media (min-width: 1280px) { .site-header-nav ul { gap: 1.75rem; } }
.hdr-link { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; font-size: var(--font-size-caption); text-transform: uppercase; line-height: 1; letter-spacing: var(--letter-spacing-caps); }
.hdr-link .roll { position: relative; display: block; height: 1em; line-height: 1; overflow: hidden; }
.hdr-link .roll span { display: block; transition: transform var(--duration-normal) var(--ease-glide); }
.hdr-link .roll .b { position: absolute; left: 0; right: 0; top: 0; transform: translateY(110%); color: var(--star); }
.hdr-link:hover .roll .a { transform: translateY(-100%); }
.hdr-link:hover .roll .b { transform: translateY(0); }
.hdr-link[aria-current] .roll .a { color: var(--star); }
.hdr-link svg { width: 0.875rem; height: 0.875rem; margin-left: -0.25rem; translate: -0.5rem 0; color: var(--star); opacity: 0; transition: translate var(--duration-normal) var(--ease-glide), opacity var(--duration-normal) var(--ease-glide); }
.hdr-link:hover svg { translate: 0 0; opacity: 1; }
.hdr-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; transform-origin: left; background: var(--star); transform: scaleX(0); transition: transform var(--duration-normal) var(--ease-glide); }
.hdr-link:hover::after, .hdr-link[aria-current]::after { transform: scaleX(1); }
.hdr-link.hdr-cta { border-radius: 0.25rem; border: 1px solid color-mix(in oklab, var(--foreground) 20%, transparent); padding: 0.5rem 1rem; transition: border-color var(--duration-normal) var(--ease-glide), background-color var(--duration-normal) var(--ease-glide); }
.hdr-link.hdr-cta:hover { border-color: var(--star); background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.hdr-link.hdr-cta::after { display: none; }
.site-header-toggle { display: block; }
@media (min-width: 1024px) { .site-header-toggle { display: none; } }
.site-header-toggle svg { width: 1.5rem; height: 1.5rem; }
.site-header-toggle svg.hidden { display: none; }

/* ── Intro + the three coloured cards (from jimnano.com) ───────────────── */
.intro { position: relative; z-index: 50; background: #f6f4f0; color: #111; padding: 6rem 2.5rem; }
@media (max-width: 767.98px) { .intro { padding: 4rem 1.5rem; } }
.intro-head { display: grid; gap: 2.5rem; border-top: 1px solid rgb(0 0 0 / 0.15); padding-top: 1rem; }
@media (min-width: 1024px) { .intro-head { grid-template-columns: 1fr 2fr; align-items: end; } }
.intro-label { display: flex; align-items: center; gap: 0.5rem; font-size: var(--font-size-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: #646c61; }
.intro-label .star-glyph { color: #4a8f6a; }
.intro-text { max-width: 46rem; font-size: 1.375rem; line-height: 1.4; letter-spacing: -0.01em; }
@media (min-width: 640px) { .intro-text { font-size: 1.75rem; line-height: 1.3; } }
.intro-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.intro .arrow-link { color: #111; }
.cards { margin-top: 4rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-c { display: flex; flex-direction: column; overflow: hidden; border-radius: 0.25rem; color: #111; transition: translate var(--duration-normal) var(--ease-glide), box-shadow var(--duration-normal) var(--ease-glide); }
.card-c:hover { translate: 0 -0.25rem; box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.35); }
.card-c.white { background: #ffffff; }
.card-c.sand { background: #dbd7d1; }
.card-c.mint { background: #9fd7b5; }
.card-c-img { aspect-ratio: 4 / 5; overflow: hidden; }
.card-c-img img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--duration-slow) var(--ease-glide); }
.card-c:hover .card-c-img img { scale: 1.05; }
.card-c-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.75rem; padding: 1.5rem 1.5rem 1.75rem; }
.card-c-eyebrow { font-size: var(--font-size-caption); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: rgb(0 0 0 / 0.55); }
.card-c-title { font-size: 2rem; line-height: 1.05; letter-spacing: -0.02em; }
.card-c-text { font-size: 1rem; line-height: 1.5; letter-spacing: -0.01em; color: rgb(0 0 0 / 0.75); }
.card-c-link { margin-top: auto; padding-top: 1rem; }
.card-c .arrow-link { color: #111; }

/* ── Blog cards ─────────────────────────────────────────────────────────── */
.posts-section { position: relative; z-index: 50; background: var(--background); color: var(--foreground); padding: 6rem 2.5rem; }
@media (max-width: 767.98px) { .posts-section { padding: 4rem 1.5rem; } }
.posts-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--fg-18); padding-top: 1rem; }
.posts-label { display: flex; align-items: center; gap: 0.5rem; font-size: var(--font-size-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); }
.posts-label .star-glyph { color: var(--star); }
.posts-title { margin-top: 2.5rem; max-width: 40rem; }
.posts { margin-top: 2.5rem; display: grid; gap: 2rem 1.5rem; }
@media (min-width: 640px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: flex; flex-direction: column; gap: 1rem; color: inherit; }
.post-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-glass-raised); }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter var(--duration-slow) var(--ease-glide), scale var(--duration-slow) var(--ease-glide); }
.post-card:hover .post-card-img img { filter: grayscale(0); scale: 1.04; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: var(--font-size-caption); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.post-meta .cat { color: var(--star); }
.post-title { font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; }
.post-excerpt { font-size: var(--font-size-body); line-height: var(--line-height-copy); letter-spacing: var(--letter-spacing-copy); color: var(--fg-70); }
.post-more { margin-top: auto; }

/* ── Inner pages ────────────────────────────────────────────────────────── */
.page { position: relative; z-index: 50; background: var(--background); color: var(--foreground); }
.page-hero { position: relative; display: grid; gap: 2.5rem; border-bottom: 1px solid var(--fg-10); padding: 9rem 2.5rem 4rem; }
@media (max-width: 767.98px) { .page-hero { padding: 7rem 1.5rem 3rem; } }
@media (min-width: 1024px) { .page-hero { grid-template-columns: 3fr 2fr; align-items: end; } }
.page-eyebrow { display: flex; align-items: center; gap: 0.5rem; font-size: var(--font-size-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--star); }
.page-title { margin-top: 1.25rem; font-size: var(--font-size-display-phone); line-height: 0.92; letter-spacing: var(--letter-spacing-display); }
@media (min-width: 640px) { .page-title { font-size: 7rem; } }
@media (min-width: 1024px) { .page-title { font-size: var(--font-size-display-tablet); } }
.page-lead { margin-top: 2rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.5; letter-spacing: -0.01em; color: color-mix(in oklab, var(--foreground) 80%, transparent); }
@media (min-width: 640px) { .page-lead { font-size: 1.375rem; line-height: 1.4; } }
.page-hero-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-glass-raised); }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-body { display: grid; gap: 5rem; padding: 4rem 2.5rem 6rem; }
@media (max-width: 767.98px) { .page-body { gap: 3.5rem; padding: 3rem 1.5rem 4rem; } }
.prose { max-width: 46rem; }
.prose h2 { margin-bottom: 1.25rem; font-size: var(--font-size-title-phone); text-transform: uppercase; letter-spacing: var(--letter-spacing-title); }
@media (min-width: 640px) { .prose h2 { font-size: var(--font-size-title); } }
.prose p { margin-bottom: 1.25rem; font-size: 1.125rem; line-height: 1.6; letter-spacing: -0.01em; color: color-mix(in oklab, var(--foreground) 82%, transparent); }
.prose p:last-child { margin-bottom: 0; }
.prose a:not(.arrow-link) { text-decoration: underline; text-underline-offset: 0.2em; }
.pull { margin: 2.5rem 0; border-left: 2px solid var(--star); padding-left: 1.5rem; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.02em; text-transform: uppercase; }
@media (min-width: 640px) { .pull { font-size: 1.75rem; } }
.pull cite { display: block; margin-top: 1rem; font-size: var(--font-size-caption); font-style: normal; letter-spacing: var(--letter-spacing-caps); color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.two-col { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; gap: 4rem; } .two-col .figure { position: sticky; top: 6rem; } }
.figure { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-glass-raised); }
.figure.wide { aspect-ratio: 16 / 10; }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure figcaption { padding-top: 0.75rem; font-size: var(--font-size-caption); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.section-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; border-top: 1px solid var(--fg-18); padding-top: 1rem; font-size: var(--font-size-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); }
.section-label .star-glyph { color: var(--star); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery figure { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-glass-raised); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--duration-slow) var(--ease-glide); }
.gallery figure:hover img { scale: 1.04; }
.co-cards { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .co-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.co-card { display: flex; flex-direction: column; gap: 0.75rem; border: 1px solid var(--fg-10); background: var(--surface-glass); padding: 2rem; transition: border-color var(--duration-normal) var(--ease-glide), background-color var(--duration-normal) var(--ease-glide); }
.co-card:hover { border-color: var(--fg-22); background: var(--surface-glass-raised); }
.co-card .name { font-size: 1.5rem; letter-spacing: -0.02em; }
.co-card .kicker { font-size: var(--font-size-caption); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--star); }
.co-card .desc { font-size: var(--font-size-body); line-height: var(--line-height-copy); color: var(--fg-70); }
.co-card .arrow-link { margin-top: 0.5rem; }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--fg-10); padding-top: 3rem; }
.cta-band h2 { max-width: 30rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-star.inline { display: inline-flex; width: fit-content; gap: 1.5rem; }
.btn-ghost.inline { display: inline-flex; width: fit-content; padding: 1.25rem 1.5rem; }
.page-post .page-hero { grid-template-columns: 1fr; }
.page-post .post-meta { margin-bottom: 1.25rem; }
.page-post .page-title { font-size: 3rem; line-height: 1; letter-spacing: -0.03em; }
@media (min-width: 640px) { .page-post .page-title { font-size: 4.5rem; } }
@media (min-width: 1024px) { .page-post .page-title { font-size: 6rem; } }
.post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; border-top: 1px solid var(--fg-10); padding-top: 2rem; }

/* ── The DSRG footer — a 385px band of mono capitals, hairlines that draw in ─ */
:root {
  --size-hero-rule: 2.375rem;
  --size-footer-height: 24.0625rem;
  --size-footer-tagline: 13rem;
  --size-footer-tagline-y: 6.375rem;
  --size-footer-nav-x: 23.9375rem;
  --size-footer-col: 7.625rem;
  --size-footer-contact-x: calc(100% - 16.0625rem);
  --size-footer-rule-top: 12.8125rem;
  --size-footer-row-y: 15.3125rem;
  --size-footer-rule-bottom: 20.1875rem;
  --size-footer-legal-y: 21.6875rem;
  --size-footer-address: 10rem;
  --size-footer-address-b: 37.9375rem;
  --size-footer-address-c: 53.0625rem;
  --size-footer-divider-a: 35.9375rem;
  --size-footer-divider-b: 51.0625rem;
  --size-footer-dot: 0.25rem;
}
@media (min-width: 64rem) and (max-width: 79.98rem) {
  :root {
    --size-footer-nav-x: 26.597vw;
    --size-footer-address-b: 42.153vw;
    --size-footer-address-c: 58.958vw;
    --size-footer-divider-a: 39.931vw;
    --size-footer-divider-b: 56.736vw;
  }
}
.site-footer { position: relative; z-index: 50; display: flex; width: 100%; flex-direction: column; gap: 2rem; overflow: hidden; background: var(--background); padding: 3rem 1.25rem 2rem; font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; text-transform: uppercase; line-height: 1.2; letter-spacing: -0.025em; color: var(--foreground); }
@media (min-width: 640px) { .site-footer { gap: 2.5rem; padding: 3rem 2.5rem; font-size: 1rem; } }
@media (min-width: 1024px) { .site-footer { display: block; height: var(--size-footer-height); padding: 0; } }
.site-footer .dock-sentinel { position: absolute; left: 0; right: 0; top: 0; height: 1px; }
.ft-star { pointer-events: none; position: absolute; top: -6rem; right: -6rem; display: block; width: 34rem; height: 34rem; background: color-mix(in oklab, var(--foreground) 4%, transparent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 12C6 12 12 6 12 0C12 6 18 12 24 12C18 12 12 18 12 24C12 18 6 12 0 12Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 12C6 12 12 6 12 0C12 6 18 12 24 12C18 12 12 18 12 24C12 18 6 12 0 12Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: 0; transform: scale(1.05); }
.ft-logo { display: block; width: max-content; font-size: 1.125rem; font-weight: 700; white-space: nowrap; letter-spacing: -0.02em; clip-path: inset(0 100% 0 0); }
.ft-logo a { transition: color var(--duration-fast) var(--ease-glide); }
.ft-logo a:hover { color: var(--star); }
@media (min-width: 1024px) { .ft-logo { position: absolute; left: 2.5rem; top: 2.5rem; } }
.ft-tagline { margin-top: -1rem; width: var(--size-footer-tagline); font-size: 0.75rem; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
@media (min-width: 1024px) { .ft-tagline { position: absolute; left: 2.5rem; top: var(--size-footer-tagline-y); margin-top: 0; } }
.ft-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2rem; }
@media (min-width: 640px) { .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; } }
@media (min-width: 1024px) { .ft-grid { display: contents; } }
.ft-cols { display: contents; }
@media (min-width: 1024px) { .ft-cols { position: absolute; left: var(--size-footer-nav-x); top: 2.5rem; display: flex; gap: 3rem; } }
.ft-col { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 1024px) { .ft-col { min-width: var(--size-footer-col); } }
.ft-col ul, .ft-contact ul { display: flex; flex-direction: column; gap: 0.375rem; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.ft-sep { display: none; height: 1px; background: var(--fg-10); }
@media (max-width: 639.98px) { .ft-sep { grid-column: span 2; display: block; } }
@media (min-width: 640px) and (max-width: 1023.98px) { .ft-sep { grid-column: span 3; display: block; } }
.ft-contact { display: flex; flex-direction: column; gap: 0.75rem; }
@media (max-width: 639.98px) { .ft-contact { grid-column: span 2; } }
@media (min-width: 1024px) { .ft-contact { position: absolute; left: var(--size-footer-contact-x); top: 2.5rem; } }
.ft-rule { display: block; height: 1px; width: 100%; background: var(--fg-10); transform-origin: left center; transform: scaleX(0); }
@media (min-width: 1024px) { .ft-rule { position: absolute; left: 2.5rem; right: 2.5rem; width: auto; } }
.ft-office { font-size: 0.75rem; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.ft-office .rise-inner { display: flex; align-items: center; gap: 0.375rem; }
@media (min-width: 1024px) { .ft-office { position: absolute; left: 2.5rem; top: var(--size-footer-row-y); } }
.ft-dot { width: var(--size-footer-dot); height: var(--size-footer-dot); flex-shrink: 0; border-radius: 9999px; background: var(--star); }
.ft-row { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .ft-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
@media (min-width: 1024px) { .ft-row { display: contents; } }
.ft-address { font-style: normal; }
@media (min-width: 1024px) { .ft-address { position: absolute; left: var(--size-footer-nav-x); top: var(--size-footer-row-y); width: var(--size-footer-address); } }
.ft-divider { display: none; }
@media (min-width: 1024px) { .ft-divider { position: absolute; top: var(--size-footer-row-y); display: block; height: var(--size-hero-rule); width: 1px; background: color-mix(in oklab, var(--foreground) 35%, transparent); transform-origin: center top; transform: scaleY(0); } }
@media (min-width: 1024px) {
  .ft-link-b { position: absolute; left: var(--size-footer-address-b); top: var(--size-footer-row-y); white-space: nowrap; }
  .ft-link-c { position: absolute; left: var(--size-footer-address-c); top: var(--size-footer-row-y); white-space: nowrap; }
}
.ft-legal { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .ft-legal { flex-direction: row; align-items: baseline; justify-content: space-between; } }
@media (min-width: 1024px) { .ft-legal { display: contents; } }
.ft-copy { white-space: nowrap; font-size: 0.75rem; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
@media (max-width: 639.98px) { .ft-copy { order: 99; margin-top: 0.75rem; border-top: 1px solid var(--fg-10); padding-top: 1.5rem; } }
@media (min-width: 1024px) { .ft-copy { position: absolute; left: 2.5rem; top: var(--size-footer-legal-y); } }
.ft-social, .ft-top { display: block; white-space: nowrap; font-size: 0.75rem; }
@media (min-width: 1024px) {
  .ft-social { position: absolute; left: var(--size-footer-nav-x); top: var(--size-footer-legal-y); }
  .ft-top { position: absolute; left: var(--size-footer-contact-x); top: var(--size-footer-legal-y); }
}
.ft-social .sep { white-space: pre; color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.rise-line { display: block; clip-path: inset(0 0 -4px 0); }
.rise-line > .rise-inner { display: block; transform: translateY(150%); }
.ul-link { color: inherit; transition: color var(--duration-fast) var(--ease-glide); overflow-wrap: anywhere; }
.ul-link:hover { color: var(--foreground); }
@media (min-width: 1024px) { .ft-col .ul-link, .ft-contact .ul-link { white-space: nowrap; } }
.ft-copy .ul-link, .ft-social .ul-link, .ft-top .ul-link { color: color-mix(in oklab, var(--foreground) 50%, transparent); }
.ft-copy .ul-link:hover, .ft-social .ul-link:hover, .ft-top .ul-link:hover { color: var(--foreground); }
.ul-box { position: relative; display: inline-block; }
.ul-clip { position: relative; display: block; clip-path: inset(0); }
.ul-a { display: block; }
.ul-b { position: absolute; inset: 0; display: block; transform: translateY(100%); }
.ul-rule { position: absolute; left: 0; right: 0; bottom: -1px; display: block; height: 1px; background: currentColor; transform-origin: left center; transform: scaleX(0); opacity: 0; }

/* the sheet's current-page marker */
.mm-current { font-size: 1rem; line-height: 1; }
.mm-label.is-current { color: var(--star); }

/* ── Statements: the three word pairs that used to sit over the hero ─────── */
.statements { position: relative; z-index: 50; background: var(--background); color: var(--foreground); padding: 6rem 2.5rem 2rem; }
@media (max-width: 767.98px) { .statements { padding: 4rem 1.5rem 1rem; } }
.statements .posts-label { border-top: 1px solid var(--fg-18); padding-top: 1rem; }
.statement-list { margin-top: 3rem; display: grid; gap: 3rem 2.5rem; }
@media (min-width: 768px) { .statement-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.statement-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.3em; font-size: 2.5rem; line-height: 0.95; letter-spacing: var(--letter-spacing-display); }
@media (min-width: 1024px) { .statement-words { font-size: 3.5rem; } }
.statement-words .statement-join { font-size: 0.55em; color: color-mix(in oklab, var(--foreground) 55%, transparent); }
.statement-text { margin-top: 1.25rem; max-width: 24rem; font-size: var(--font-size-body); line-height: var(--line-height-copy); letter-spacing: var(--letter-spacing-copy); color: var(--fg-70); }

/* ── Instagram: small live photos from the connected account ─────────────── */
.mm-ig .mm-handle { display: block; margin-bottom: 0.625rem; color: var(--foreground); }
.ig-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.375rem; }
.ig-strip[hidden], .ig-grid[hidden] { display: none; }
.ig-strip .ig-item, .ig-grid .ig-item { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 0.125rem; background: var(--surface-glass-raised); }
.ig-strip img, .ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--duration-slow) var(--ease-glide), filter var(--duration-slow) var(--ease-glide); }
.ig-item:active img, .ig-item:hover img { scale: 1.05; }
.ig-handle { font-size: var(--font-size-caption); font-weight: 500; text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--star); }
.ig-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ig-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px) { .ig-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ig-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ig-grid img { filter: grayscale(100%); }
.ig-grid .ig-item:hover img { filter: grayscale(0); }

/* ── Photo strip on the home page ────────────────────────────────────────── */
.photos { position: relative; z-index: 50; background: var(--background); color: var(--foreground); padding: 4rem 2.5rem 6rem; }
@media (max-width: 767.98px) { .photos { padding: 3rem 1.5rem 4rem; } }
.photos .posts-label { border-top: 1px solid var(--fg-18); padding-top: 1rem; }
.photo-strip { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px) { .photo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .photo-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } }
.photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-glass-raised); }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter var(--duration-slow) var(--ease-glide), scale var(--duration-slow) var(--ease-glide); }
.photo:hover img { filter: grayscale(0); scale: 1.04; }

/* ── Projekt och lösningar (Spotdly's Lösningar cards) ───────────────────── */
.projects { display: grid; gap: 1rem; }
.projects-title { font-size: 2.5rem; line-height: 1; letter-spacing: -0.03em; }
@media (min-width: 640px) { .projects-title { font-size: 4rem; } }
.projects-intro { max-width: 46rem; font-size: 1.125rem; line-height: 1.5; color: color-mix(in oklab, var(--foreground) 82%, transparent); }
.proj-grid { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.proj-card article { position: relative; display: flex; height: 100%; flex-direction: column; gap: 0.75rem; overflow: hidden; border-radius: 1.25rem; border: 1px solid rgb(0 0 0 / 0.08); padding: 1.5rem; color: #1c1b22; box-shadow: 0 30px 60px -40px rgb(0 0 0 / 0.6); transition: translate var(--duration-normal) var(--ease-glide); }
.proj-card:hover article { translate: 0 -0.25rem; }
.proj-card.mint article { background: #dff3e6; }
.proj-card.rose article { background: #f7e4e0; }
.proj-card.lavender article { background: #ebe4f5; }
.proj-card.sky article { background: #e2ecf7; }
.proj-card.sand article { background: #f1ebe2; }
.proj-shot { display: block; overflow: hidden; border-radius: 0.75rem; border: 1px solid rgb(0 0 0 / 0.1); background: #fff; }
.proj-shot img { display: block; width: 100%; height: auto; }
.proj-kicker { font-family: "Space Mono", ui-monospace, monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(0 0 0 / 0.65); }
.proj-name { font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em; }
.proj-body { font-size: 1rem; line-height: 1.5; color: rgb(0 0 0 / 0.8); }
.proj-links { margin-top: auto; padding-top: 0.5rem; font-size: 1rem; }
.proj-links a { text-decoration: underline; text-underline-offset: 4px; }

/* the framed "Följ @jimnano.com" tile after the photos */
/* Follow tile, direction B (2026-09-23): mint frame that walks around the dark tile, text above, handle centred. */
@property --pf-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.photo-follow { --pf-ang: 0deg; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; background: transparent; color: var(--foreground); text-align: center; padding: 1rem 0.75rem; text-decoration: none; }
.photo-follow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: conic-gradient(from var(--pf-ang), var(--star) 0 25%, color-mix(in oklab, var(--star) 25%, transparent) 40% 60%, var(--star) 75% 100%); animation: pf-spin 7s linear infinite; }
.photo-follow::after { content: ""; position: absolute; inset: 3px; z-index: -1; background: var(--raw-color-neutral-900); transition: background-color var(--duration-normal) var(--ease-glide); }
.photo-follow:hover::after { background: color-mix(in oklab, var(--star) 10%, var(--raw-color-neutral-900)); }
.photo-follow-top { font-family: "Space Mono", ui-monospace, monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.3; color: var(--star); }
.photo-follow-text { font-weight: 500; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; font-size: 1.35rem; }
@media (min-width: 640px) { .photo-follow-text { font-size: clamp(1.05rem, 1.9vw, 1.75rem); } }
.photo-follow-hint { display: inline-flex; align-items: center; gap: 0.45rem; font-family: "Space Mono", ui-monospace, monospace; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklab, var(--foreground) 55%, transparent); }
.photo-follow-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--star); animation: pf-pulse 2s ease-out infinite; }
.photo-follow-arrow { display: inline-block; transition: transform var(--duration-normal) var(--ease-glide); }
.photo-follow:hover .photo-follow-arrow { transform: translateX(0.35rem); }
@keyframes pf-spin { to { --pf-ang: 360deg; } }
@keyframes pf-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--star) 60%, transparent); } 100% { box-shadow: 0 0 0 0.75rem transparent; } }
@media (prefers-reduced-motion: reduce) { .photo-follow::before, .photo-follow-dot { animation: none; } }

/* ── Bokning (Spotdlys "Boka tid": pitch till vänster, formulär till höger) ─── */
.booking { display: grid; gap: 2.5rem; border: 1px solid var(--fg-10); background: var(--surface-glass); padding: 2.5rem; }
@media (max-width: 767.98px) { .booking { padding: 1.5rem; } }
@media (min-width: 1024px) { .booking { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 3.5rem; padding: 3rem; } }
.booking-title { margin-top: 1rem; font-size: 2rem; line-height: 1.05; letter-spacing: -0.03em; }
@media (min-width: 640px) { .booking-title { font-size: 2.75rem; } }
.booking-meta { margin-top: 1rem; font-size: var(--font-size-caption); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--fg-70); }
.booking-body { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.55; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.booking-points { margin-top: 1.5rem; border-top: 1px solid var(--fg-18); }
.booking-points li { display: flex; gap: 0.75rem; border-bottom: 1px solid var(--fg-18); padding: 0.75rem 0; font-size: 0.9375rem; line-height: 1.45; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.booking-points li span { color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.booking-form { display: flex; flex-direction: column; gap: 1.5rem; }
.bf-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .bf-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.bf-field { display: flex; flex-direction: column; gap: 0.25rem; }
.bf-field > span, .bf-chips legend { font-size: var(--font-size-caption); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); color: var(--fg-70); }
.bf-field input, .bf-field select, .bf-field textarea { width: 100%; border: 0; border-bottom: 1px solid color-mix(in oklab, var(--foreground) 25%, transparent); border-radius: 0; background: transparent; padding: 0.625rem 0; font: inherit; font-size: 1rem; line-height: 1.2; color: var(--foreground); outline: none; }
.bf-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: 1rem; padding-right: 1.5rem; }
.bf-field select option { color: #111; }
.bf-field input::placeholder, .bf-field textarea::placeholder { color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.bf-field input:focus-visible, .bf-field select:focus-visible, .bf-field textarea:focus-visible { border-bottom-color: var(--star); }
.bf-field textarea { resize: none; }
.bf-chips { display: flex; flex-direction: column; gap: 0.5rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.bf-chips legend { margin-bottom: 0.5rem; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip { position: relative; cursor: pointer; border: 1px solid color-mix(in oklab, var(--foreground) 30%, transparent); padding: 0.5rem 0.75rem; font-size: 0.8125rem; line-height: 1; color: var(--foreground); transition: background-color var(--duration-normal) var(--ease-glide), color var(--duration-normal) var(--ease-glide), border-color var(--duration-normal) var(--ease-glide), scale var(--duration-normal) var(--ease-glide); }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chip:hover { border-color: var(--foreground); }
.chip:active { scale: 0.97; }
.chip:has(input:checked) { background: var(--star); border-color: var(--star); color: #000; }
.chip:has(input:focus-visible) { outline: 2px solid var(--star); outline-offset: 2px; }
.chips:empty::after { content: "Laddar dagar…"; font-size: 0.8125rem; color: var(--fg-70); }
.bf-honung { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bf-status { min-height: 1.5em; font-size: 0.9375rem; line-height: 1.5; color: var(--star); }
.bf-status.is-error { color: #f0a3a3; }
.booking-form.is-sent .bf-grid, .booking-form.is-sent .bf-chips, .booking-form.is-sent .bf-field, .booking-form.is-sent #booking-submit { display: none; }
.booking-form.is-sent .bf-status { border: 1px solid var(--star); padding: 1.5rem; font-size: 1.0625rem; }
.booking-form button[disabled] { opacity: 0.6; cursor: wait; }

/* Dock bar frame (Jim, 2026-09-23): the same mint ring as the follow tile, walking clockwise around the menu. */
@property --db-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.dock-bar { --db-ang: 0deg; position: relative; isolation: isolate; border-color: transparent; }
.dock-bar:hover { border-color: transparent; }
.dock-bar::before { content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; padding: 2px; background: conic-gradient(from var(--db-ang), var(--star) 0 25%, color-mix(in oklab, var(--star) 25%, transparent) 40% 60%, var(--star) 75% 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: db-spin 7s linear infinite; }
@keyframes db-spin { to { --db-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .dock-bar::before { animation: none; } }