/* ==========================================================================
   Diana Tarot — responsive hardening
   Loaded after colors_and_type.css + the inline <style>, so it wins.
   The prototype was authored at a fixed phone width; these rules make it
   fluid and mobile-perfect across 320px → desktop.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }

/* `hidden` must always win — even over the flex display rule below, which
   would otherwise keep the seeking view visible after it's toggled off. */
[hidden] { display: none !important; }

/* Opening screen fills the viewport and centres its content vertically.
   The prototype intended this (its child has flex:1 + justify-content:center),
   but the growing flex parent was lost when the framework was stripped out. */
.view-seeking { flex: 1 1 auto; display: flex; flex-direction: column; }

/* The revealed card caps at the design's 272px and shrinks on tiny phones,
   instead of holding a fixed width that can crowd a 320px screen. */
.card-frame { width: 100% !important; max-width: 272px !important; }

/* Warm the deep card art so it sits inside the site's linen/clay/gold palette
   instead of reading as a dark block on the page. Non-destructive — the source
   images are untouched; this is a display-time tint only. ("Warm lift".) */
[data-el="cardImg"] {
  filter: brightness(1.22) contrast(0.84) saturate(1.12) hue-rotate(-6deg);
}

/* A little more breathing room on the smallest phones. */
@media (max-width: 360px) {
  .page-pad { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Respect the home-indicator / notch safe area at the bottom. */
@supports (padding: max(0px)) {
  .page-pad { padding-bottom: max(60px, env(safe-area-inset-bottom)) !important; }
}