/* Samma system: one design language for teosamma.com and sammaproductions.com.
   Built on Apple's web conventions: SF Pro via the system stack, Apple's type scale and colours,
   pill buttons, stepped corner radii, glass controls. Footage lives on black; information lives on light.
   Colour roles: blue means pressable; Samma purple (#5e2ad3, from his logo tile) means signed. */

:root {
  /* dark (footage) */
  --black: #000;
  --tile: #1d1d1f;
  --fg: #f5f5f7;
  --fg-2: #a1a1a6;
  --link: #2997ff;
  /* light (information) */
  --paper: #f5f5f7;
  --paper-tile: #fff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --link-light: #0066cc;
  --rule-light: #d2d2d7;
  /* shared */
  --blue: #0071e3;
  --blue-hover: #0062c3;     /* darker than Apple's #0077ed so white text keeps 4.5:1 */
  --samma: #5e2ad3;
  --rule: rgb(255 255 255 / 0.14);

  /* side gutter: 6.25vw, or the notch / rounded corner in landscape when that is wider */
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gutter: max(6.25vw, calc(var(--safe-x) + 16px));
  --w-text: min(980px, 87.5vw, calc(100vw - 2 * var(--gutter)));
  --w-wide: min(1260px, 87.5vw, calc(100vw - 2 * var(--gutter)));
  --pad-section: clamp(80px, 11vw, 160px);
  --r-lg: clamp(18px, 2vw, 28px);
  --r-md: 18px;
  --r-sm: 12px;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);   /* Apple's standard ease */

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--black); color: var(--fg);
  font-family: var(--font); font-size: 17px; line-height: 1.47059; font-weight: 400; letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  caret-color: var(--blue);
}
::selection { background: var(--samma); color: #fff; }
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration: underline; text-underline-offset: 0.18em; } }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; box-shadow: 0 0 0 2px #fff; border-radius: 4px; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 980px; background: var(--blue); color: #fff; font-size: 14px; }
.skip:focus { top: 8px; }
/* taps: no double-tap zoom delay; the grey iOS flash is replaced by each control's own :active state */
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.button, .motion-toggle, summary { -webkit-user-select: none; user-select: none; } /* a long press on a control should not select its label */

/* ---------- type: Apple's scale ---------- */
.t-hero { font-size: clamp(44px, 7.4vw, 96px); line-height: 1.04167; font-weight: 600; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.t-headline { font-size: clamp(40px, 5vw, 64px); line-height: 1.0625; font-weight: 600; letter-spacing: -0.009em; margin: 0; text-wrap: balance; }
.t-title { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: 0; margin: 0; text-wrap: balance; }
.t-intro { font-size: clamp(19px, 1.7vw, 21px); line-height: 1.381; font-weight: 400; letter-spacing: 0.011em; margin: 0; color: var(--fg-2); text-wrap: pretty; }
.t-intro strong, .t-body strong { color: var(--fg); font-weight: 600; }
.t-body { font-size: 17px; line-height: 1.47059; letter-spacing: -0.022em; margin: 0; color: var(--fg-2); text-wrap: pretty; }
.t-caption { font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; color: var(--fg-2); margin: 0; }
.t-num { font-variant-numeric: tabular-nums; }

/* ---------- buttons & links ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 11px 22px; border-radius: 980px;
  background: var(--blue); color: #fff; font-size: 17px; line-height: 1.17648; font-weight: 400; letter-spacing: -0.022em;
  white-space: nowrap; transition: background-color 0.2s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--blue-hover); text-decoration: none; } }
.button:active, .tile:active, .more:active, .reel:active, .nav-links a:active { opacity: 0.72; }
.button--small { min-height: 0; padding: 4px 11px; font-size: 13px; line-height: 1.33337; letter-spacing: -0.01em; }
.more { display: inline-flex; align-items: center; gap: 0.25em; font-size: 17px; color: var(--link); }
.more::after { content: ""; width: 0.42em; height: 0.42em; margin-top: 0.05em; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; margin-top: 28px; }
.actions--left { justify-content: flex-start; }

/* ---------- glass (Liquid Glass-style material) ---------- */
.glass {
  background: rgb(42 42 45 / 0.62);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.07), 0 8px 24px rgb(0 0 0 / 0.32);
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: 52px;
  background: rgb(0 0 0 / 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.nav-inner { width: var(--w-wide); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.nav-brand { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--fg); font-size: 19px; font-weight: 600; letter-spacing: 0.012em; }
.nav-brand:hover { text-decoration: none; }
.nav-brand img { height: 22px; width: auto; }
.nav-brand .sub { font-weight: 400; color: #a1a1a6; }
.nav-links { display: flex; gap: 24px; font-size: 13px; letter-spacing: -0.01em; }
.nav-links a { color: #d2d2d7; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.lang { display: flex; gap: 2px; font-size: 13px; }
.lang a { color: #d2d2d7; padding: 3px 6px; border-radius: 6px; }
.lang a[aria-current="true"] { color: #fff; background: rgb(255 255 255 / 0.12); }
.lang a:hover { text-decoration: none; color: #fff; }
/* small nav controls keep their look but get a 44 px tall hit area */
.nav .lang a, .nav .button--small { position: relative; }
.nav .lang a::after, .nav .button--small::after { content: ""; position: absolute; inset: -13px -1px; }
.nav .button--small::after { inset: -10px -4px; }
.nav-menu { display: none; position: relative; }
.nav-menu > summary { list-style: none; width: 44px; height: 44px; margin-right: -10px; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary span { display: block; width: 18px; height: 1.5px; background: var(--fg); border-radius: 1px; transition: transform 0.3s var(--ease); }
.nav-menu[open] > summary span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-menu[open] > summary span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.nav-menu-panel { position: absolute; right: -6px; top: 50px; min-width: 220px; padding: 10px; border-radius: var(--r-md); display: grid; }
/* a blur inside the nav's blur shows the page through the links */
.nav-menu-panel.glass { background: rgb(28 28 30 / 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-menu-panel a { color: var(--fg); font-size: 17px; padding: 12px 14px; border-radius: var(--r-sm); }
.nav-menu-panel a:hover { background: rgb(255 255 255 / 0.08); text-decoration: none; }

/* ---------- sections ---------- */
.section { padding: var(--pad-section) 0; position: relative; }
.section--light { background: var(--paper); color: var(--ink); color-scheme: light; }
.section--light .t-intro, .section--light .t-body, .section--light .t-caption { color: var(--ink-2); }
.section--light .t-intro strong, .section--light .t-body strong { color: var(--ink); }
.section--light a { color: var(--link-light); }
.section--light .button { color: #fff; }
/* whole-tile links keep the ink colour; only their "more" link is blue (Apple tile pattern) */
.section--light a.tile, .section--light a.tile:hover { color: var(--ink); text-decoration: none; }
.section--light a.tile .more { color: var(--link-light); }
a.tile:hover .more { text-decoration: underline; }
/* consecutive sections of the same tone share their gap instead of doubling it */
.section:not(.section--light) + .section:not(.section--light),
.section--light + .section--light { padding-top: calc(var(--pad-section) * 0.4); }
/* adjacent paper sections overlap by a pixel, so a fractional boundary never shows the black page behind */
.section--light + .section--light { box-shadow: 0 -1px 0 var(--paper); }
.wrap { width: var(--w-text); margin: 0 auto; }
.wrap-wide { width: var(--w-wide); margin: 0 auto; }
.section-head { width: var(--w-text); margin: 0 auto clamp(40px, 5vw, 64px); }
.section-head--center { text-align: center; }
.section-head .t-intro { margin-top: 18px; max-width: 46ch; }
.section-head .case-meta { margin-top: 14px; max-width: 70ch; }
.section-head--center .t-intro { margin-left: auto; margin-right: auto; }

/* ---------- hero (full-bleed footage, Apple product hero) ---------- */
.hero { position: relative; height: calc(100svh - 52px); min-height: 560px; overflow: hidden; background: var(--black); }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.55) 38%, rgb(0 0 0 / 0.05) 68%); }
.hero-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(48px, 8vh, 96px); text-align: center; padding: 0 var(--gutter); }
.hero-copy .t-intro { margin: 14px auto 0; color: rgb(245 245 247 / 0.9); max-width: 40ch; }
.hero-copy h1 { margin: 0; }
.hero-name { display: block; margin: 0 auto 12px; height: clamp(26px, 3.2vw, 40px); width: auto; }
.motion-toggle { position: absolute; z-index: 3; right: calc((100vw - var(--w-wide)) / 2); bottom: 24px; width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--fg); display: grid; place-items: center; cursor: pointer; }
.motion-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.motion-toggle .i-play, .g-play .i-play { display: none; }
.motion-toggle[aria-pressed="true"] .i-pause, .g-play[aria-pressed="true"] .i-pause { display: none; }
.motion-toggle[aria-pressed="true"] .i-play, .g-play[aria-pressed="true"] .i-play { display: block; }
/* the same switch, set inline next to a row of loops */
.motion-toggle--inline { position: static; flex: none; background: rgb(44 44 46); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* glass controls: lighter on hover, a touch dimmer while pressed */
.motion-toggle, .g-play, .sound, .reel-close { transition: background-color 0.2s var(--ease); }
@media (hover: hover) {
  .motion-toggle:hover, .g-play:hover, .sound:not([aria-pressed="true"]):hover, .reel-close:hover { background: rgb(72 72 76 / 0.72); }
  .g-dot:not([aria-current="true"]):hover::before { background: rgb(245 245 247 / 0.72); }
  .sound[aria-pressed="true"]:hover { background: var(--blue-hover); }
}
.motion-toggle:active, .g-play:active, .sound:active, .reel-close:active, .g-dot:active::before { opacity: 0.72; }

/* ---------- tiles & bento ---------- */
.tile { position: relative; background: var(--tile); border-radius: var(--r-lg); overflow: hidden; }
.section--light .tile { background: var(--paper-tile); }
.tile-copy { position: relative; z-index: 2; padding: clamp(28px, 3.4vw, 48px); }
.tile-copy .t-body { margin-top: 10px; }
.tile-copy .more { margin-top: 16px; }
.bento { width: var(--w-wide); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }

/* ---------- gallery (Apple highlights gallery) ---------- */
.gallery {
  display: flex; gap: clamp(12px, 1.6vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 0 calc((100vw - var(--w-wide)) / 2);
  scroll-padding: 0 calc((100vw - var(--w-wide)) / 2);
}
.gallery::-webkit-scrollbar { display: none; }
.g-item { position: relative; flex: 0 0 min(1120px, 80vw); aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--tile); scroll-snap-align: start; margin: 0; }
.g-item video { width: 100%; height: 100%; object-fit: cover; }
.g-item::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 45%; z-index: 1; background: linear-gradient(to bottom, rgb(0 0 0 / 0.55), transparent); pointer-events: none; }
.g-cap { position: absolute; z-index: 2; left: clamp(22px, 3.2vw, 44px); top: clamp(22px, 3vw, 40px); right: 40%; margin: 0; color: var(--fg); font-size: clamp(19px, 1.9vw, 24px); line-height: 1.2; font-weight: 600; letter-spacing: 0.009em; text-wrap: balance; }
.g-cap span { display: block; margin-top: 4px; font-weight: 400; color: rgb(245 245 247 / 0.82); font-size: clamp(14px, 1.2vw, 17px); letter-spacing: -0.01em; }
.g-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; }
.g-dots { display: flex; align-items: center; gap: 0; height: 56px; padding: 0 12px; border-radius: 980px; }
.g-dot { position: relative; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.g-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 980px; background: rgb(245 245 247 / 0.42); }
.g-dot[aria-current="true"] { width: 56px; }
.g-dot[aria-current="true"]::before { width: 44px; background: rgb(245 245 247 / 0.3); }
.g-dot[aria-current="true"]::after { content: ""; position: absolute; left: 6px; top: 50%; height: 8px; width: 44px; margin-top: -4px; transform: scaleX(var(--prog, 0)); transform-origin: left; border-radius: 980px; background: var(--fg); }
.g-play { width: 56px; height: 56px; border: 0; border-radius: 50%; color: var(--fg); display: grid; place-items: center; cursor: pointer; }
.g-play svg { width: 18px; height: 18px; fill: currentColor; }

/* vertical reels row */
.reels { display: flex; gap: clamp(12px, 1.4vw, 18px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 0 calc((100vw - var(--w-wide)) / 2); scroll-padding: 0 calc((100vw - var(--w-wide)) / 2); }
.reels::-webkit-scrollbar { display: none; }
/* keyboard focus on a scrolling row: a ring just inside its edge (arrow keys then scroll it) */
.reels:focus-visible, .gallery:focus-visible { outline-offset: -2px; box-shadow: none; border-radius: var(--r-md); }
.reel { position: relative; flex: 0 0 clamp(200px, 22vw, 290px); aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden; background: var(--tile); scroll-snap-align: start; margin: 0; }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; font-size: 14px; line-height: 1.3; color: rgb(245 245 247 / 0.86); }
.reel figcaption b { display: block; color: var(--fg); font-weight: 600; font-size: 17px; }
.reel::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(transparent, rgb(0 0 0 / 0.6)); pointer-events: none; }

/* ---------- spec rows (Apple "tech specs" style) ---------- */
.specs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.specs > li, .specs > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.section--light .specs, .section--light .specs > li, .section--light .specs > div { border-color: var(--rule-light); }
.specs dt, .specs .k { font-size: clamp(21px, 2vw, 24px); font-weight: 600; letter-spacing: 0.009em; line-height: 1.17; }
.specs dd, .specs .v { margin: 0; color: var(--fg-2); }
.section--light .specs dd, .section--light .specs .v { color: var(--ink-2); }

/* ---------- media figure with sound (glass control) ---------- */
.voice-tile { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--tile); margin: 0; }
.voice-tile video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.voice-tile video::cue { font-family: var(--font); font-size: 17px; background: rgb(0 0 0 / 0.66); color: #fff; }
.sound { position: absolute; z-index: 3; left: 20px; top: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 980px; color: var(--fg); font: 400 15px/1 var(--font); letter-spacing: -0.01em; cursor: pointer; }
.sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound .wave { opacity: 0.35; transition: opacity 0.2s; }
.sound[aria-pressed="true"] { background: var(--blue); box-shadow: none; }
.sound[aria-pressed="true"] .wave { opacity: 1; }

/* ---------- quote ---------- */
.quote { margin: 0; text-align: center; }
.quote p { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.003em; }
.quote footer { margin-top: 14px; color: var(--fg-2); font-size: 17px; }
.section--light .quote footer { color: var(--ink-2); }

/* ---------- contact: the same close on both sites, on light, signed in purple ---------- */
.contact { background: var(--paper); }
.contact .t-intro { margin-top: 16px; }
.contact .actions { margin-top: 28px; }
.mail { display: inline-block; margin-top: 32px; color: var(--ink); font-size: clamp(28px, 4.2vw, 60px); line-height: 1.08; font-weight: 600; letter-spacing: -0.012em; }
.section--light .mail { color: var(--ink); }
.section--light .mail:hover { color: var(--link-light); text-decoration: none; }

/* ---------- footer (Apple light footer) ---------- */
.footer { position: relative; box-shadow: 0 -1px 0 var(--paper); background: var(--paper); color: var(--ink-2); color-scheme: light; font-size: 13px; line-height: 1.38462; letter-spacing: -0.01em; padding: 18px 0 max(22px, env(safe-area-inset-bottom)); }
.footer .wrap-wide { display: grid; gap: 14px; }
.footer a { color: #424245; display: inline-block; min-height: 24px; padding: 4px 0; }
.footer-note { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-light); margin: 0; }
.footer-mark { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; padding: 6px 0 14px; border-bottom: 1px solid var(--rule-light); }
.footer-cols h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.footer .lang a { color: #424245; padding: 4px 0 4px 14px; background: none; }
.footer .lang a[aria-current="true"] { color: var(--ink); font-weight: 600; background: none; }

/* ---------- motion paused (WCAG 2.2.2): every loop holds its poster ---------- */
.motion-paused .g-dot[aria-current="true"]::after { transform: scaleX(0); }

/* ---------- responsive ---------- */
@media (max-width: 1068px) {
  .bento { grid-template-columns: 1fr; }
}
@media (max-width: 734px) {
  .nav-links { display: none; }
  .nav-menu { display: block; }
  .nav-brand .sub { display: none; }
  .nav-inner { gap: 14px; }
  .g-item { flex-basis: 82vw; aspect-ratio: 4 / 5; }
  .g-cap { right: 22px; }
  .specs > li, .specs > div { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .motion-toggle { right: var(--gutter); bottom: 16px; }
}

/* 404 */
.notfound { min-height: 100svh; display: grid; place-content: center; text-align: center; padding: 0 var(--gutter); }
.notfound .t-intro { margin-top: 14px; }
.notfound-mark { height: 30px; width: auto; margin: 0 auto 32px; }

/* showreel with sound, on request */
.reel-dialog { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; overscroll-behavior: contain; }
.reel-dialog::backdrop { background: #000; }
.reel-dialog video { width: 100%; height: 100%; object-fit: contain; }
.reel-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--fg); display: grid; place-items: center; cursor: pointer; }
.reel-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* fingers need 44 px */
@media (pointer: coarse) {
  .nav-brand, .more, .lang a, .footer a { min-height: 44px; display: inline-flex; align-items: center; }
  .lang a { min-width: 32px; justify-content: center; }
}

/* the viewer's system settings win over the look */
@media (prefers-reduced-transparency: reduce) {
  .glass, .nav { background: rgb(28 28 30); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --fg-2: var(--fg); --ink-2: var(--ink); }
}