/* "Make it yours" (#yours): two feature tiles. Photos on the map sits on a warm sand, Widgets on the night navy of the story cards.
   Maps are canvases drawn by yours.js. Class names are prefixed y- / yw- because bento-art.css has global rules. Satoshi, never heavier than Medium. */

.yours { --y-sand: #e9e9df; --y-navy: #020d1b; --y-paper: #f7f7f2; }
.y-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.y-tile {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 580px; padding: 40px; border-radius: 36px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--border);
}
.y-photos { background: var(--y-sand); color: var(--fg); }
.y-widgets {
  background: radial-gradient(90% 120% at 100% 0%, #0c233e 0%, #08182a 38%, #03101e 70%, #010b17 100%);
  border-color: rgba(216, 216, 203, 0.12);
}

.y-copy { position: relative; z-index: 3; max-width: 330px; }
.y-copy h3 { font-size: clamp(30px, 3.1vw, 42px); line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.y-copy p { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* a stage holds a map or a scene; it never takes clicks away from the tile's copy */
.y-stage { position: absolute; z-index: 1; }

/* ───────── 1. photos on the map ───────── */
.y-photos .y-stage { left: 0; right: 0; top: 0; aspect-ratio: 1.69; container-type: inline-size; }
.y-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); }
.y-pins { position: absolute; inset: 0; pointer-events: none; }
.y-pin { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 0; height: 0; margin: 0; pointer-events: auto; }
.y-bub { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; }
.y-photo { position: relative; display: block; width: clamp(42px, 11.4cqw, 66px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--y-paper); background: var(--y-paper); transition: transform 0.35s cubic-bezier(.2,.8,.2,1); }
.y-photo img { width: 100%; height: 100%; object-fit: cover; }
.y-bub::after { content: ""; width: 0; height: 0; margin-top: -1px; border: 7px solid transparent; border-top-color: var(--y-paper); border-bottom-width: 0; }
.y-tag { order: -1; margin-bottom: 7px; padding: 4px 11px 5px; border-radius: 999px; white-space: nowrap;
  font-size: clamp(10.5px, 2.35cqw, 13px); line-height: 1.2; color: var(--y-navy); background: var(--y-paper); }
.y-pin:hover .y-photo { transform: scale(1.1); }
.y-credit { position: absolute; z-index: 3; right: 28px; bottom: 22px; font-size: 12px; color: var(--faint); }

.js .y-bub { opacity: 0; }
.js .y-photos.on .y-bub { animation: y-drop 0.7s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(1s + var(--d, 0) * 0.23s); }
@keyframes y-drop {
  from { opacity: 0; transform: translateY(-18px) scale(0.72); }
  to { opacity: 1; transform: none; }
}

/* ───────── 2. widgets on a home screen ─────────
   .y-scale is a fixed 568 x 640 design pinned to the top right of the tile, scaled by --s (yours.js).
   Sizes follow the app's real widgets (small 158 x 158 pt, medium 338 x 158 pt) at about 0.78. */
.y-widgets .y-stage { inset: 0; overflow: hidden; --s: 1; --dw: 568; }
.y-widgets .y-copy { max-width: 236px; }
.y-widgets .y-copy h3 { font-size: clamp(28px, 2.7vw, 36px); }
.y-scale { position: absolute; right: 0; top: 0; width: 568px; height: 640px; transform-origin: 100% 0; transform: scale(var(--s)); }
.y-phone {
  position: absolute; right: -18px; top: 30px; width: 300px; height: 640px; padding: 18px 14px 0;
  border-radius: 50px 50px 0 0; background: #0a1627; border: 7px solid #1b2c43; border-bottom: 0;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.y-island { display: block; width: 78px; height: 22px; margin: 0 auto; border-radius: 99px; background: #01060d; }
/* the home screen fades out toward the copy under it (an overlay, not a mask, so the widgets can hang over the phone's edge) */
.y-screen { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 57px; gap: 10px; margin-top: 30px; }
.y-phone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 22, 39, 0), #0a1627 78%); }
.y-ic { border-radius: 14px; background: #12263d; }
.y-ic:nth-child(3n) { background: #162d48; }
.y-ic.app { background: #020d1b; overflow: hidden; }
.y-ic.app img { width: 100%; height: 100%; object-fit: cover; }

.y-w { position: relative; overflow: hidden; border-radius: 22px; color: #d8d8cb;
  background: linear-gradient(180deg, #022855 0%, #021d3d 55%, #00050e 100%);
  box-shadow: 0 22px 34px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(216, 216, 203, 0.07); }
.yw-map { position: absolute; display: block; }
.yw-num { display: flex; align-items: baseline; gap: 4px; }
.yw-num b { font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }

/* small: the number on top, the map along the bottom. Lifted off the grid and turned a little, as widgets are when you place them. */
.y-w-s { grid-column: 1 / 3; grid-row: 1 / 3; transform: translate(-28px, 10px) rotate(-6deg) scale(1.22); z-index: 2; }
.y-w-s .yw-top { position: absolute; left: 11px; top: 10px; right: 11px; }
.y-w-s .yw-top b { display: block; font-size: 31px; font-weight: 500; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.y-w-s .yw-top > span { display: block; margin-top: 3px; font-size: 10.5px; color: rgba(216, 216, 203, 0.62); white-space: nowrap; }
.y-w-s .yw-map { left: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 1.85; }

/* medium: the number, a progress bar and the share of the world on the left, the map on the right */
.y-w-m { grid-column: 1 / -1; grid-row: 3 / 5; transform: translate(-4px, 24px) rotate(2.5deg) scale(1.12); z-index: 2; }
.y-w-m .yw-map { right: 0; top: 50%; translate: 0 -50%; width: 72%; height: auto; aspect-ratio: 1.85; }
.yw-side { position: absolute; left: 12px; top: 10px; bottom: 10px; width: 44%; display: flex; flex-direction: column; }
.yw-brand { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #c6f24e; }
.yw-side .yw-num { margin-top: auto; }
.yw-side .yw-num b { font-size: 41px; }
.yw-side .yw-num span { font-size: 11px; color: #d8d8cb; }
.yw-bar { display: block; width: 88px; height: 4px; margin: 5px 0 4px; border-radius: 99px; background: rgba(216, 216, 203, 0.2); overflow: hidden; }
.yw-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: #c6f24e; transform-origin: 0 50%; transform: scaleX(0.1827); }
.yw-pct { font-size: 9px; color: rgba(216, 216, 203, 0.62); white-space: nowrap; }

/* ───────── narrower screens: art on top, copy under it ───────── */
@media (max-width: 960px) {
  .y-grid { grid-template-columns: 1fr; }
  .y-tile { min-height: 0; justify-content: flex-start; padding: 28px; }
  .y-stage { position: relative; margin: -28px -28px 18px; }
  .y-photos .y-stage { left: auto; right: auto; top: auto; width: auto; }
  .y-widgets .y-stage { inset: auto; width: auto; height: calc(380px * var(--s)); }
  .y-copy, .y-widgets .y-copy { max-width: 520px; }
  .y-credit { position: static; display: block; margin-top: 16px; }
  /* stacked: the phone and its widgets sit in the middle of the art */
  .y-widgets .y-scale { right: 50%; translate: 50% 0; transform-origin: 50% 0; }
  .y-widgets .y-phone { right: 134px; }
}
@media (max-width: 760px) {
  .y-photos .y-stage { aspect-ratio: 1.38; } /* taller on a phone: room above the northern pins */
  .y-tile { border-radius: 28px; padding: 22px; }
  .y-stage { margin: -22px -22px 16px; }
  .y-copy p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .y-bub { opacity: 1; animation: none; }
  .y-phone, .y-photo { transition: none; }
}