/* Home page: two big tiles (UltraDense, then fotonet Studio as a visual twin of the app), then wide
   pill links to everything else. On desktop each big tile fills one screen, whole. Loads after
   site.css. */

.home { background: var(--black); }

/* Tiles run edge to edge, with square corners and a thin seam between them. */
.tiles { display: grid; gap: 2px; background: #1d1d1f; }

.tile {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 72px 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px;
  text-align: center;
  background: var(--black); color: var(--text);
}
.tile[data-theme="light"] { background: var(--light); color: var(--light-ink); }
.tile[data-theme="light"] .dim { color: var(--text-3); }

.tile-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 760px; }
.tile-eyebrow { font-size: 17px; font-weight: 600; color: var(--text-2); }
.tile[data-theme="light"] .tile-eyebrow { color: var(--text-3); }
.tile-title { font-size: 64px; line-height: 1.07; font-weight: 600; letter-spacing: -0.005em; }
.tile-title-logo { display: inline-flex; align-items: center; gap: 16px; }
.tile-title-logo img { width: 56px; height: 56px; }
.tile-tagline { font-size: 28px; line-height: 1.14; letter-spacing: .007em; }
.tile-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin-top: 18px; }

/* UltraDense: the chrome word over the dot grid, whole */
.tile-hero { background: radial-gradient(ellipse 60% 45% at 50% 100%, rgba(59, 91, 219, .28), transparent 70%), var(--black); }
.art-ultra { position: relative; width: 100%; display: flex; justify-content: center; padding: 8px 0 0; }
.art-grid {
  position: absolute; inset: -60px 0 -72px; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .3) 1px, transparent 1.6px);
  background-size: 26px 26px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 60%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 60%, #000 0%, transparent 75%);
}
.art-ultra-word { font-size: clamp(120px, 21vw, 320px); line-height: .92; font-weight: 800; letter-spacing: -0.045em; }

/* ------------------------------------------------------------------ fotonet Studio, a visual twin
   The tile is Studio's window on the Label tab: the image list on the left, the classes on the
   right, the heading where the picture would be, and the tab bar docked at the bottom, greyed out
   because nothing here works. Decoration only (aria-hidden), after the native app's look. */
.tile-studio { background: #f4f4f6; }
.twin { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.twin-island {
  position: absolute; top: 36px; bottom: 36px; width: clamp(230px, 17vw, 300px);
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border-radius: 28px; overflow: hidden;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 12px 40px rgba(0, 0, 0, .07);
  color: #1d1d1f; font-size: 12px; line-height: 1.3; text-align: left;
}
.twin-left { left: 36px; }
.twin-right { right: 36px; }
.twin-seg { align-self: center; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(120, 120, 128, .12); }
.twin-seg span { padding: 6px 12px; border-radius: 999px; color: #6e6e73; white-space: nowrap; }
.twin-seg .on { background: #fff; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.twin-search { display: flex; gap: 8px; }
.twin-search span { flex: 1; padding: 8px 12px; border-radius: 10px; background: rgba(120, 120, 128, .1); color: #8e8e93; }
.twin-count { font-size: 11px; color: #98989d; }
.twin-files, .twin-classes {
  flex: 1; min-height: 0; overflow: hidden; display: grid; align-content: start; gap: 2px;
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent);
}
.twin-files li { display: grid; grid-template-columns: 6px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; color: #3a3a3c; }
.twin-files li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34c759; }
.twin-files li.on { background: rgba(59, 91, 219, .1); }
.twin-files b { display: flex; gap: 3px; }
.twin-files b i, .twin-classes i { width: 7px; height: 7px; border-radius: 50%; }
.twin-classes li { display: grid; grid-template-columns: 7px 1fr 64px; align-items: center; gap: 10px; padding: 8px 10px; color: #3a3a3c; }
.twin-classes em { height: 4px; width: var(--w); justify-self: end; border-radius: 2px; background: rgba(120, 120, 128, .28); }
.twin-foot { display: flex; gap: 8px; }
.twin-foot span { padding: 8px 14px; border-radius: 999px; background: rgba(120, 120, 128, .12); color: #3a3a3c; }

/* Studio's tab bar (ui.rs layout: 52 px tabs, at least 64 px, 4 px rim), every tab at 40%, the way
   the app shows a tab that does not work */
.twin-tabbar {
  position: absolute; left: 50%; bottom: 36px; z-index: 1; transform: translateX(-50%);
  display: flex; padding: 4px; border-radius: 999px; pointer-events: none;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(3px) saturate(140%); backdrop-filter: blur(3px) saturate(140%);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 8px 26px rgba(0, 0, 0, .12);
}
.twin-tabbar span { display: grid; justify-items: center; align-content: start; min-width: 64px; height: 52px; padding: 6px 12px 0; border-radius: 999px; color: rgba(29, 29, 31, .4); font-size: 10px; line-height: 12px; white-space: nowrap; }
.twin-tabbar svg { width: 24px; height: 24px; margin-bottom: 4px; }
.twin-tabbar .on { background: rgba(120, 120, 128, .12); color: rgba(5, 66, 128, .4); }

/* ------------------------------------------------------------------ everything else: wide pills */
.destinations { padding: 120px var(--gutter); background: var(--black); }
.dest-list { width: min(1180px, 100%); margin: 0 auto; display: grid; gap: 14px; }
.dest {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px;
  min-height: 84px; padding: 14px 30px 14px 14px; border-radius: 999px;
  background: var(--alt); color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: background-color .2s, transform .2s var(--ease);
}
.dest:hover { background: #2a2a2d; text-decoration: none; }
.dest:active { transform: scale(.995); }
.dest-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgba(167, 207, 250, .12); color: var(--glacier-l); }
.dest-icon svg { width: 26px; height: 26px; }
.dest-text { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.dest-text b { font-size: 21px; font-weight: 600; white-space: nowrap; }
.dest-text span { overflow: hidden; font-size: 17px; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.dest-go svg { width: 22px; height: 22px; color: var(--text-3); transition: color .2s, transform .2s var(--ease); }
.dest:hover .dest-go svg { color: var(--text); transform: translateX(3px); }

/* Desktop: each big tile is one screen (the first one under the nav) */
@media (min-width: 1069px) {
  .tile { min-height: var(--screen); }
  .tile-hero { min-height: calc(var(--screen) - 44px); }
}

/* Smaller screens: the twin keeps its tab bar and drops the side islands */
@media (max-width: 1068px) {
  .tile-title { font-size: 48px; }
  .tile-tagline { font-size: 24px; }
  .twin-island { display: none; }
  .tile-studio { padding-bottom: 132px; }
  .twin-tabbar { bottom: 28px; max-width: calc(100% - 32px); }
  .twin-tabbar span { flex: 1 1 0; min-width: 0; padding: 6px 4px 0; }
}

@media (max-width: 734px) {
  .tile { padding: 56px 20px; gap: 32px; }
  .tile-studio { padding-bottom: 120px; }
  .tile-title { font-size: 36px; }
  .tile-tagline { font-size: 21px; }
  .tile-title-logo img { width: 40px; height: 40px; }
  .twin-tabbar { width: calc(100% - 24px); max-width: none; }
  .twin-tabbar span { font-size: 9px; }
  .twin-tabbar svg { width: 20px; height: 20px; }
  .destinations { padding: 64px 16px; }
  .dest { min-height: 68px; gap: 14px; padding: 10px 18px 10px 10px; }
  .dest-icon { width: 48px; height: 48px; }
  .dest-icon svg { width: 22px; height: 22px; }
  .dest-text { flex-direction: column; align-items: flex-start; gap: 2px; }
  .dest-text b { font-size: 17px; }
  .dest-text span { font-size: 13px; white-space: normal; }
}