/* Kristin Stonecipher — site styles.
   Most layout lives inline in each page; this file holds the shared basics,
   animations, and the phone-size adjustments. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FAFAF7; }
img { max-width: 100%; }
a { color: #111111; }
a:hover { color: #D41F29; }
:focus-visible { outline: 3px solid #D41F29; outline-offset: 3px; }

/* Skip link for keyboard users */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 12px 18px; background: #111111; color: #FFFFFF; border-radius: 999px; font-family: 'Inter Tight', system-ui, sans-serif; text-decoration: none; }
.skip-link:focus { top: 16px; color: #FFFFFF; }

/* Scrolling brand strip */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { animation: marquee 40s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee a:hover, .marquee a:focus-visible { background: #FFFFFF; color: #111111 !important; }

/* Scroll-driven timeline and look book (Chrome, Edge, Safari 26+; others see it static) */
@keyframes tlgrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tlin { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes tldot { from { background: #FAFAF7; } to { background: currentColor; } }
@keyframes rise { from { opacity: 0; transform: translateY(60px) rotate(var(--r, 0deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } }
@supports (animation-timeline: view()) {
  .tl-fill { transform-origin: top; animation: tlgrow linear both; animation-timeline: view(); animation-range: entry 30% exit 40%; }
  .tl-item { animation: tlin linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .tl-dot { animation: tldot linear both; animation-timeline: view(); animation-range: entry 60% contain 10%; }
  .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
}

/* Contact form route buttons */
.route-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: 1.5px solid #111111; background: #FFFFFF; color: #111111; }
.route-btn[aria-pressed="true"] { background: #111111; color: #FFFFFF; }
#contact-form input:invalid[data-touched], #contact-form [aria-invalid="true"] { border-color: #D41F29 !important; }
[hidden] { display: none !important; }

/* Photo slots waiting for an image */
.photo-slot { display: flex; align-items: center; justify-content: center; background: #D9D5CF; color: #55524E; font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 16px; }

/* Tablet and phone */
@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: 1fr !important; }
  .reviews-wide { grid-column: auto !important; }
}
@media (max-width: 760px) {
  .comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
  .comp-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  section[style*="padding: 120px"], section[style*="padding: 100px"] { padding-top: 72px !important; }
  section[style*="padding: 64px"], article[style*="padding: 72px"] { padding-top: 40px !important; }
  .cover { min-height: 640px !important; }
  .cover-right { text-align: left !important; }
  .cover-sticker { top: 64px !important; right: 16px !important; width: 88px !important; height: 88px !important; font-size: 10px !important; }
  .site-nav a { padding: 12px 0 !important; }
  .site-nav { gap: 4px 18px !important; }
  .cover-lines { padding-top: 24px !important; gap: 20px !important; }

  .site-ig { display: none !important; }
  .site-nav { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
  .cover-sticker { display: none !important; }
  .cover-extra { display: none !important; }
  .cover-lines p { font-size: 24px !important; }
  .cover-lines .cover-tag { font-size: 15px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee, .tl-fill, .tl-item, .tl-dot, .rise { animation: none; }
}