/* Phone/tablet layout for the dc pages.
   Pages are built with inline styles (see CLAUDE.md), so every rule here needs !important
   to win. Hooks are the yy-* classes on the wrapper, header, sections and grids. */

/* The home page "Object in Focus" grid: never ask for more than the viewport width. */
.yy-find { grid-template-columns:repeat(auto-fit, minmax(min(340px, 100%), 1fr)) !important; }

@media (max-width: 900px) {
  /* Outer parchment gutter: the desktop page floats in a wide margin; on small screens use a thin one. */
  .yy-page { padding-left:clamp(8px, 2vw, 40px) !important; padding-right:clamp(8px, 2vw, 40px) !important; }

  /* The engraved border-image frames: shrink the slices so content isn't drawn over them. */
  .yy-frame { inset:10px !important; border-width:44px 34px !important; }
  .yy-section { padding-left:clamp(26px, 6vw, 72px) !important; padding-right:clamp(26px, 6vw, 72px) !important; }
}

@media (max-width: 760px) {
  /* Paint cost. Phones repaint the whole section on scroll, so drop the 1px repeating stripe
     (keep one soft radial), the four-layer grid behind the pages, and the blend/blur layers. */
  .yy-page { background-image:none !important; }
  .yy-section, [style*="repeating-linear-gradient"] { background-image:radial-gradient(circle at 20% 10%, rgba(255,255,255,.22), transparent 46%) !important; }
  .yy-header { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  [style*="mix-blend-mode"] { mix-blend-mode:normal !important; }
  .yy-cover > img { filter:none !important; }

  /* Header: logo on its own row, links beneath, no longer sticky (it would eat a third of the screen). */
  .yy-header { position:static !important; }
  .yy-nav { grid-template-columns:1fr auto 1fr !important; gap:8px 12px !important; padding:14px 14px 10px !important; }
  .yy-nav-logo { grid-column:1 / -1 !important; grid-row:1 !important; }
  .yy-nav-logo > span:first-child { font-size:30px !important; }
  .yy-nav-l, .yy-nav-r { grid-row:2 !important; }
  .yy-nav-l { grid-column:1 !important; }
  .yy-nav-r { grid-column:3 !important; }
  .yy-nav-l > div, .yy-nav-r { flex-wrap:wrap !important; gap:6px 14px !important; }
  .yy-nav-l, .yy-nav-l > div, .yy-nav-r { font-size:10px !important; }
  .yy-nav-links { gap:6px 18px !important; padding:9px 14px 9px !important; font-size:10px !important; }
  .yy-stamp { width:84% !important; }

  .yy-frame { inset:8px !important; border-width:34px 26px !important; }
  .yy-section { padding:58px clamp(22px, 7vw, 40px) 60px !important; }
  .yy-section-tight { padding-top:48px !important; padding-bottom:48px !important; }

  /* Home: cover becomes a single centred column. */
  .yy-cover { grid-template-columns:minmax(0, 1fr) !important; gap:22px !important; }
  .yy-cover > img { justify-self:center !important; max-width:min(78vw, 360px) !important; }
  .yy-cover > div { max-width:none !important; align-items:center !important; text-align:center !important; }
  .yy-cover > div > a { margin-top:12px !important; }

  /* Home: the three plates stack. */
  .yy-plates { grid-template-columns:minmax(0, 1fr) !important; gap:34px !important; max-width:400px !important; }

  /* Home: Object in Focus. */
  .yy-find > div:first-child { min-height:0 !important; aspect-ratio:4 / 3; border-right:0 !important; border-bottom:1px solid #1d1a15 !important; }
  .yy-find > div:last-child { padding:36px 24px !important; }

  /* Collection: two tighter columns of plates, then a stacked catalogue list. */
  .yy-plates-cols { column-gap:12px !important; }
  .yy-plates-cols > a { margin-bottom:14px !important; }
  .yy-row { grid-template-columns:34px minmax(0, 1fr) auto !important; gap:4px 12px !important; padding:18px 0 !important; align-items:start !important; }
  .yy-row > :nth-child(1) { grid-column:1; grid-row:1; font-size:19px !important; }
  .yy-row > :nth-child(2) { grid-column:2 / 4; grid-row:1; }
  .yy-row > :nth-child(2) > div:first-child { font-size:21px !important; }
  .yy-row > :nth-child(3) { grid-column:2 / 4; grid-row:2; font-size:14px !important; }
  .yy-row > :nth-child(4) { grid-column:2; grid-row:3; align-self:center; }
  .yy-row > :nth-child(5) { grid-column:3; grid-row:3; text-align:right; }
  .yy-row > :nth-child(6) { display:none !important; }

  /* Object page. */
  .yy-obj-title { font-size:15px !important; letter-spacing:.2em !important; }
  .yy-hero { margin-bottom:30px !important; }
  .yy-gallery { position:static !important; justify-content:center !important; gap:10px !important; margin-top:12px; }
  .yy-gallery figure { width:calc((100% - 20px) / 3) !important; max-width:112px; }
  .yy-details { grid-template-columns:minmax(0, 1fr) !important; gap:30px !important; }
  .yy-related { gap:12px !important; }
  .yy-related > a > div:nth-child(2) { font-size:8px !important; letter-spacing:.1em !important; }
  .yy-related > a > div:last-child { font-size:14px !important; }
  .yy-artist { grid-template-columns:minmax(0, 1fr) !important; gap:26px !important; margin-top:0 !important; }
  .yy-artist figure { max-width:360px; margin:0 auto !important; }
  .yy-maker { font-size:30px !important; }

  /* Search and small pages. */
  .yy-main { padding:40px 18px 80px !important; }
  .yy-search-input { font-size:19px !important; }
  .yy-result { grid-template-columns:72px minmax(0, 1fr) !important; gap:16px !important; }
  .yy-result > div:first-child { width:72px !important; height:72px !important; }
  .yy-result-title { font-size:22px !important; }

  /* Long copy reads better a touch smaller on a phone. */
  .yy-section p { font-size:17px; }
  .yy-section p[style*="font-size:19px"] { font-size:17px !important; }
}

@media (max-width: 420px) {
  .yy-nav-logo > span:first-child { font-size:26px !important; }
  .yy-section { padding-left:18px !important; padding-right:18px !important; }
  .yy-frame { border-width:28px 20px !important; }
}