/* Paper belongs to the document, so its grain travels with the page. */
body { position: relative; }
.grain { position: absolute; background-attachment: scroll; }
.blueprint-hero { background-attachment: scroll; }

.blueprint-hero .explore {
  gap: 13px; padding: 14px 23px; border: 1px solid #74766b45;
  border-radius: 999px; background: #ffffff25;
  transition: color .2s, background .2s, border-color .2s;
}
.explore-grid { width: 17px; height: 17px; flex: none; fill: var(--orange); transition: fill .2s; }
.blueprint-hero .explore:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: none; }
.blueprint-hero .explore:hover .explore-grid { fill: #fff; }

.project-card { height: auto; min-height: 800px; }
.project-card.cookit { min-height: 840px; }
.project-copy { padding: 42px 44px; }
.project-name { margin-top: 44px; }
.project-copy>p { max-width: 440px; margin: 23px 0 28px; }
.cookit .project-copy h3 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.12; }
.project-open {
  gap: 22px; min-height: 54px; padding: 8px 9px 8px 24px;
  background: var(--project-ink); color: var(--project-light);
  border: 1px solid var(--project-ink); border-radius: 999px;
  font-size: 15px; font-weight: 500;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.project-open>span { font-size: inherit; line-height: 1.3; }
.project-open .discover-symbol {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid color-mix(in srgb, var(--project-light) 32%, transparent);
  border-radius: 50%; transition: background .2s, color .2s;
}
.discover-symbol svg { display: block; width: 15px; height: 15px; }
.project-open:hover { background: var(--project-ink); transform: translateY(-2px); box-shadow: 0 5px 16px #00000012; }
.project-open:hover .discover-symbol { background: var(--project-light); color: var(--project-ink); }
.store-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; }
.store-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
  min-height: 42px; font-size: 14px; line-height: 1.3;
}
.store-link img { width: 28px; height: 28px; flex: none; }
.store-link span { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s; }
.store-link:hover span { border-color: currentColor; }
.project-copy>.project-status { display: block; margin-top: 22px; }
.project-copy>.project-legal { margin-top: 20px; }
.detail-head .store-links { margin-top: 25px; }

.index-row { grid-template-columns: 38px 88px 1fr 22px; gap: 28px; padding: 28px 12px; }
.index-row img { width: 80px; height: 80px; border-radius: 18px; object-fit: cover; }

@media (max-width: 1100px) and (min-width: 761px) {
  .project-copy { padding: 36px 32px; }
  .project-card.cookit>.project-legal { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 760px) {
  .blueprint-hero .explore { padding: 13px 20px; }
  .project-card, .project-card.cookit { min-height: 0; }
  .project-copy { padding: 28px 24px 10px; }
  .project-name { margin-top: 32px; }
  .project-copy>p { max-width: 100%; margin: 20px 0 25px; }
  .cookit .project-copy h3 { font-size: 28px; }
  .project-open { font-size: 15px; }
  .store-links { gap: 6px 18px; }
  .store-link { font-size: 13px; }
  .store-link img { width: 26px; height: 26px; }
  .index-row { grid-template-columns: 23px 56px 1fr 18px; gap: 12px; padding: 24px 6px; }
  .index-row img { width: 56px; height: 56px; border-radius: 13px; }
  .index-row .index-name { font-size: 31px; }
}
@media (max-width: 380px) {
  .index-row { grid-template-columns: 20px 48px 1fr 16px; gap: 10px; }
  .index-row img { width: 48px; height: 48px; border-radius: 11px; }
  .index-row .index-name { font-size: 27px; }
}

/* Center the headline in the column beside the drawing. */
.blueprint-hero .hero-title-wrap {
  left: 0; right: auto; width: 37%; top: 29%; padding: 0 24px;
  display: flex; justify-content: center; text-align: center;
}
.blueprint-hero h1 { font-size: clamp(52px, 5.65vw, 94px); }

/* Quiet discovery action; stronger, recognizable download buttons. */
.project-open {
  background: transparent; color: var(--project-ink);
  border-color: color-mix(in srgb, var(--project-ink) 40%, transparent);
  box-shadow: none;
}
.project-open .discover-symbol { border-color: color-mix(in srgb, var(--project-ink) 25%, transparent); }
.project-open:hover {
  background: color-mix(in srgb, var(--project-ink) 6%, transparent); color: var(--project-ink);
  transform: none; box-shadow: none;
}
.project-open:hover .discover-symbol { background: var(--project-ink); color: var(--project-light); }
.store-links { gap: 10px; margin-top: 20px; }
.store-link {
  min-height: 52px; padding: 10px 14px; gap: 10px;
  background: color-mix(in srgb, var(--project-ink) 8%, var(--project-light));
  color: var(--project-ink); border: 1px solid color-mix(in srgb, var(--project-ink) 30%, transparent);
  border-radius: 11px; box-shadow: 0 3px 8px #00000008;
  font-size: 14px; font-weight: 600;
  transition: border-color .2s, box-shadow .2s;
}
.store-link img { width: 30px; height: 30px; }
.store-link span { border: 0; padding: 0; }
.store-link:hover { background: color-mix(in srgb, var(--project-ink) 12%, var(--project-light)); border-color: color-mix(in srgb, var(--project-ink) 55%, transparent); box-shadow: 0 4px 12px #00000012; }
.store-link:hover span { border: 0; }
.project-copy h3, .cookit .project-copy h3 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.12; }

/* Legal documents stay at the bottom, aligned with the left content edge. */
.project-card.cookit { grid-template-rows: minmax(0, 1fr) auto; }
.project-card>.project-legal {
  grid-column: 1 / -1; justify-content: flex-start; margin: 0;
  padding: 20px 44px 24px; position: relative; z-index: 4;
}
#detail-content>.project-legal { justify-content: flex-start; margin: 0; padding: 30px 0 12px; }
.portfolio-legal { justify-content: flex-start; text-align: left; margin-top: 30px; padding: 22px 0 0; }

.project-stage .watermark {
  left: auto; right: 4px; top: 50%; writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg); transform-origin: center;
}

/* Frames from the owner's Apple and Asylab files, with replaceable screens. */
.device {
  border: 0; border-radius: 0; background: transparent; overflow: visible;
  box-shadow: none; filter: drop-shadow(0 24px 22px #11111130);
}
.device::after { display: none; }
.mockup-iphone { aspect-ratio: 1350 / 2760; }
.mockup-pixel { aspect-ratio: 1728 / 3656; }
.device .device-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; border-radius: 0; z-index: 2;
}
.device-screen { position: absolute; display: block; overflow: hidden; z-index: 1; background: var(--project-light); }
.mockup-iphone .device-screen { left: 5.3%; top: 2.6%; width: 89.4%; height: 94.8%; border-radius: 15% / 7.1%; }
.mockup-pixel .device-screen { left: 4.4%; top: 2.1%; width: 90.4%; height: 95.8%; border-radius: 13.2% / 5.9%; }
.device .device-screen img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.device-back { opacity: 1; }

@media (max-width: 1100px) and (min-width: 761px) {
  .blueprint-hero .hero-title-wrap { width: 35%; padding: 0 18px; }
  .blueprint-hero h1 { font-size: 5.5vw; }
  .store-link { padding: 10px 12px; font-size: 13px; gap: 8px; }
}
@media (max-width: 760px) {
  .blueprint-hero .hero-title-wrap { left: 24px; right: 24px; top: 96px; width: auto; padding: 0; }
  .blueprint-hero h1 { font-size: clamp(33px, 9.5vw, 55px); }
  .project-copy h3, .cookit .project-copy h3 { font-size: 28px; }
  .store-link { min-height: 50px; padding: 10px 12px; font-size: 13px; gap: 8px; }
  .store-link img { width: 28px; height: 28px; }
  .device { border: 0; border-radius: 0; }
  .project-stage .watermark { right: 2px; top: 50%; }
  .project-card>.project-legal { padding: 4px 24px 24px; }
  .portfolio-legal { gap: 12px 18px; }
  .portfolio-legal>span { flex-basis: 100%; }
}
@media (max-width: 380px) {
  .blueprint-hero .hero-title-wrap { top: 90px; }
}
/* Hide the old iOS status area in the temporary Pixel capture. */
.mockup-pixel .device-screen img { height: 105.4%; transform: translateY(-5.13%); }

/* A paused project is visible without offering a case study. */
.project-open:disabled, .project-open:disabled:hover {
  cursor: default; opacity: .62; background: transparent;
  color: var(--project-ink); transform: none; box-shadow: none;
}
.project-open:disabled:hover .discover-symbol { background: transparent; color: inherit; }
.index-row:disabled, .index-row:disabled:hover { cursor: default; color: inherit; background: transparent; }
.project-stage { cursor: default; pointer-events: none; overflow: visible; }
.device-screen.is-off { background: linear-gradient(125deg, #1d1e20 0%, #090a0c 38%, #08090a 100%); }
.construction-tapes { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.construction-tape {
  position: absolute; left: 50%; width: var(--tape-length, 160%); top: 50%; height: 54px;
  display: flex; align-items: center; justify-content: center; gap: 35px;
  background: #f4ce3c; color: #181916;
  font-size: clamp(13px, 1.25vw, 18px); font-weight: 700; line-height: 1;
  letter-spacing: .045em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 5px 12px #18191638;
}
.construction-tape::before, .construction-tape::after {
  content: ''; position: absolute; left: 0; right: 0; height: 7px;
  background: repeating-linear-gradient(120deg, #181916 0 13px, #f4ce3c 13px 26px);
}
.construction-tape::before { top: 0; }
.construction-tape::after { bottom: 0; }
.construction-tape>span { flex: none; }
.tape-first { transform: translate(-50%, -50%) rotate(calc(-1 * var(--tape-angle, 14deg))); }
.tape-second { transform: translate(-50%, -50%) rotate(var(--tape-angle, 14deg)); }
@media (max-width: 760px) {
  .construction-tape { height: 46px; font-size: 13px; gap: 24px; }
  .construction-tape::before, .construction-tape::after { height: 6px; }
}

/* The new CookIt capture fits the Pixel screen without the old status crop. */
.cookit .mockup-pixel .device-screen img { height: 100%; transform: none; }