/* Shared page shell — dark background + basic typography for every page
   in the site (the keychains demo and the 4 category pages). */

/* Page-to-page fade: see transition.css/transition.js (shared across all
   5 pages) — a plain JS-driven opacity crossfade instead of the
   Chromium-only View Transitions API, so it actually works regardless
   of which browser this is viewed in. */

@font-face {
  font-family: "Ouma Devanagari";
  src: url("assets/font1/fonnts.com-Ouma_Devanagari_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ouma Devanagari";
  src: url("assets/font1/fonnts.com-Ouma_Devanagari_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh;
}

body {
  /* Four layers, front to back: a faint film-grain tile (blended via
     "overlay" so it reads as texture, not a visible pattern), a soft
     vignette that darkens the edges, a warm, low, soft glow sitting
     roughly behind the keychain hero (like one large studio light
     source), and the photo itself. Solid fallback color is a warm
     charcoal rather than a nearly-black navy — richer and less cold,
     and on aspect ratios narrower than the photo (which "cover" would
     otherwise zoom/crop hard to fill) any sliver left uncovered reads
     as more background instead of a crop. Only safe down to roughly a
     1.2 aspect ratio — narrower than that (phones in portrait) needs
     plain cover instead, see the media query below. */
  background-color: #17140f;
  background-image:
    url("assets/grain.svg"),
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(8, 7, 6, 0.5) 100%),
    radial-gradient(circle at 76% 20%, rgba(255, 232, 205, 0.08), transparent 55%),
    url("assets/page-bg.webp");
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 200px 200px, 100% 100%, 100% 100%, 130% auto;
  background-position: 0 0, center, center, center;
  background-blend-mode: overlay, normal, normal, normal;
  background-attachment: fixed, fixed, fixed, fixed;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #f2f2f7;
}

@media (max-width: 600px) {
  body {
    background-size: 200px 200px, 100% 100%, 100% 100%, cover;
  }
}

.back-link {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 60;
  color: #f2f2f7;
  text-decoration: none;
  font-size: 0.95rem;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.back-link:hover,
.back-link:focus-visible {
  opacity: 1;
}

.page-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 8rem 2rem 6rem;
}

.page-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin: 0 0 1.5rem;
  letter-spacing: -0.02em;
}

.page-content p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(242, 242, 247, 0.75);
  max-width: 60ch;
}

/* Home page intro/contact call-outs — plain text blocks (no border/fill)
   sitting on top of the background photo. Held back (opacity/translateY)
   until body carries .kc-settled — added by keychain-cluster.js once the
   hero's entrance swing has settled — so the text only breathes in once
   the object it's introducing feels stable, instead of appearing at the
   same time as everything else. */
/* One colour for everything in these two blocks, and it is the exact
   background of the category pages — so the words that introduce the
   work are already the colour of the ground the work sits on. Stated
   here rather than on each piece of text: heading, paragraphs, button
   and subtitle were each carrying their own value, some of them at
   different opacities, which is why they read as slightly different
   colours from one another. */
.info-box {
  position: fixed;
  z-index: 40;
  color: #ececee;
  /* The measure is chosen for the rag, and both paragraphs share it, so
     it is one setting serving both. Narrowed from 26rem to stop lines
     ending on stranded words: at the old width they finished on
     "…everything in", "…where every", "…with character," and "…social,
     and". The band where all four fall to the next line instead is
     344–368px, and this sits in the middle of it — wide enough that a
     font rendering a shade wide or narrow can't tip the composition
     back. Both paragraphs stay three lines, so the block's height is
     unchanged. */
  max-width: min(22.25rem, calc(100vw - 4rem));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

body.kc-settled .info-box {
  opacity: 1;
  transform: translateY(0);
}

body.kc-settled .contact-box {
  transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .info-box {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.info-heading {
  font-family: "Ouma Devanagari", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 1.15rem;
}

.hello-box {
  top: 16vh;
  left: 60px;
}

.hello-box p {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.65;
}

.hello-box p:last-child {
  margin-bottom: 0;
}

/* An aside rather than a third point: set smaller so it sits below the
   introduction instead of continuing it. Not dimmed to get there — the
   two blocks are deliberately one colour (see .info-box) and size alone
   carries the difference. */
/* Qualified with .hello-box, because the rule setting the paragraph
   size above is `.hello-box p` — a class *and* an element — and a bare
   class on its own loses to it. Unqualified, this silently did nothing. */
.hello-box p.hello-note {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  margin-top: 1.5rem;
}

.contact-box {
  right: 60px;
  bottom: 13vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
}

.contact-button {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  /* An anchor doesn't inherit colour on its own — the browser's own
     stylesheet gives every link its default blue, and that beats
     anything inherited from an ancestor. Said explicitly here, or the
     button and its ring both come out blue. */
  color: inherit;
  /* currentColor, so the ring can never drift from the word inside it. */
  border: 1.3px solid currentColor;
  border-radius: 999px;
  background-color: rgba(236, 236, 238, 0);
  text-decoration: none;
  cursor: pointer;
  transform: scale(1);
  transition: font-weight 0.25s ease,
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-button:hover,
.contact-button:focus-visible {
  transform: scale(1.035);
  background-color: rgba(236, 236, 238, 0.08);
}

.contact-button:active {
  transform: scale(0.965);
  transition-duration: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .contact-button,
  .contact-button:hover,
  .contact-button:focus-visible,
  .contact-button:active {
    transform: none;
    transition: font-weight 0.25s ease, background-color 0.25s ease;
  }
}

.contact-label {
  font-family: "Ouma Devanagari", sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: font-weight 0.25s ease;
}

.contact-button:hover .contact-label,
.contact-button:focus-visible .contact-label {
  font-weight: 700;
}

.contact-subtitle {
  margin: 0;
  font-size: 0.85rem;
  text-align: right;
}

/* Mobile home layout — a phone doesn't have the spare room for the
   desktop's fixed-corner composition, so below 600px everything drops
   into normal document flow and stacks in a single centered column
   (hero, then intro, then contact), in that order because that's
   already the order they appear in the markup. Desktop rules above are
   untouched; this only overrides what's needed for the narrow layout. */
@media (max-width: 600px) {
  .info-box {
    position: static;
    z-index: auto;
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    padding: 0 1.75rem;
  }

  .info-heading {
    font-size: clamp(1.6rem, 7vw, 2.1rem);
    text-align: center;
    margin: 0 0 1.5rem;
  }

  .hello-box {
    margin-top: 1.25rem;
  }

  .hello-box p {
    text-align: center;
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 0 1.35rem;
  }

  /* Kept proportionally smaller here too — the rule above would
     otherwise pull it back up to full size on a phone. */
  .hello-box p.hello-note {
    font-size: 0.82rem;
    margin-top: 1.75rem;
  }

  .contact-box {
    align-items: center;
    text-align: center;
    margin: 4rem auto 4.5rem;
    gap: 1.1rem;
  }

  .contact-button {
    padding: 0.85rem 1.85rem;
  }

  .contact-label {
    font-size: 0.95rem;
  }

  .contact-subtitle {
    text-align: center;
    font-size: 0.95rem;
  }
}