/* ============================================================
   Layer order — explicit cascade, top to bottom in specificity.
   Declare once here; define anywhere below or in future files.
   ============================================================ */

@layer reset, tokens, base, layout, components, utilities;


/* ============================================================
   RESET
   Inspired by Josh Comeau (joshwcomeau.com/css/custom-css-reset)
   and Andy Bell (piccalil.li/blog/a-more-modern-css-reset).
   Goal: sensible, minimal — not opinionated beyond correctness.
   ============================================================ */

@layer reset {

  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    /* Prevent font size inflation on mobile (Sara Soueidan, Smashing) */
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    /* Smooth scrolling — respect user preference */
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  body {
    min-block-size: 100dvh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  /* Remove list style only when list is explicitly role=list (Kevin Powell) */
  :where(ul, ol)[role="list"] {
    list-style: none;
    padding: 0;
  }

  /* Skip link — visually hidden until focused */
  .skip-link {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    padding: 0.5em 1em;
    background: Canvas;
    color: CanvasText;
    z-index: 100;
    transform: translateY(-100%);
    transition: transform 0.2s;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

}


/* ============================================================
   TOKENS
   Design decisions expressed as CSS custom properties.
   All values live here — nowhere else.
   ============================================================ */

@layer tokens {

  :root {
    /* --- Type scale (fluid, via clamp) --- */
    --text-sm:   clamp(0.8rem,   0.17vi + 0.76rem, 0.89rem);
    --text-base: clamp(1rem,     0.34vi + 0.91rem, 1.19rem);
    --text-md:   clamp(1.25rem,  0.61vi + 1.1rem,  1.58rem);
    --text-lg:   clamp(1.56rem,  1vi + 1.31rem,    2.11rem);
    --text-xl:   clamp(1.95rem,  1.56vi + 1.56rem, 2.81rem);
    --text-2xl:  clamp(2.44rem,  2.38vi + 1.85rem, 3.75rem);

    /* --- Spacing scale (fluid) --- */
    --space-3xs: clamp(0.25rem, 0.23vi + 0.19rem, 0.38rem);
    --space-2xs: clamp(0.5rem,  0.46vi + 0.38rem, 0.75rem);
    --space-xs:  clamp(0.75rem, 0.69vi + 0.57rem, 1.13rem);
    --space-s:   clamp(1rem,    0.92vi + 0.77rem,  1.5rem);
    --space-m:   clamp(1.5rem,  1.38vi + 1.15rem, 2.25rem);
    --space-l:   clamp(2rem,    1.84vi + 1.53rem,  3rem);
    --space-xl:  clamp(3rem,    2.77vi + 2.31rem,  4.5rem);
    --space-2xl: clamp(4rem,    3.69vi + 3.07rem,  6rem);

    /* --- Colour --- */
    --color-brand:      hsl(0 0% 100%);

    --color-text:       hsl(0 0% 92%);
    --color-text-muted: hsl(0 0% 55%);
    --color-bg:         hsl(0 0% 7%);
    --color-surface:    hsl(0 0% 11%);
    --color-border:     hsl(0 0% 18%);

    /* --- Radii --- */
    --radius-s: 0.25rem;
    --radius-m: 0.5rem;
    --radius-l: 1rem;

    /* --- Typography --- */
    --font-sans: system-ui, sans-serif;
    --font-mono: ui-monospace, monospace;

    /* --- Transitions --- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
  }

  /* Studio is dark by default. Light mode override if ever needed. */

}


/* ============================================================
   BASE
   Element-level styles only. No classes. Inheritable properties
   set here cascade down so components don't have to re-declare.
   (Harry Roberts: low-specificity defaults, high-specificity
   components; the cascade does the work.)
   ============================================================ */

@layer base {

  html {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
  }

  h1 { font-size: var(--text-2xl); line-height: 1.1; }
  h2 { font-size: var(--text-xl);  line-height: 1.2; }
  h3 { font-size: var(--text-lg);  line-height: 1.3; }
  h4 { font-size: var(--text-md);  line-height: 1.4; }
  h5, h6 { font-size: var(--text-base); }

  p + p {
    margin-block-start: var(--space-s);
  }

  a {
    color: var(--color-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }

  a:hover {
    color: var(--color-brand-dark);
  }

  :focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
  }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  hr {
    border: none;
    border-block-start: 1px solid var(--color-border);
  }

}


/* ============================================================
   LAYOUT
   Structural primitives. No visual decoration here.
   Add components and utilities as the project grows.
   ============================================================ */

@layer layout {

  /* The Stack — vertical rhythm (Every Layout) */
  .stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .stack > * + * {
    margin-block-start: var(--stack-space, var(--space-s));
  }

  /* The Wrapper — max-width container, auto margins */
  .wrapper {
    max-inline-size: var(--wrapper-max, 70ch);
    margin-inline: auto;
    padding-inline: var(--space-s);
  }

  /* The Cluster — horizontal grouping, wraps naturally */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-s));
    align-items: var(--cluster-align, center);
  }

}


/* ============================================================
   COMPONENTS
   Named things. Grow this as the site grows.
   ============================================================ */

@layer components {

  /* ----------------------------------------------------------
     Site header
     ---------------------------------------------------------- */

  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-s);
    padding-block: var(--space-xs);
    position: sticky;
    inset-block-start: 0;
    background-color: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
    z-index: 10;
    background-color: #fff;
  }

  .logo img {
    block-size: 4rem;
    inline-size: auto;
    display: block;
  }

  .site-header nav a {
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-bg);
  }

  .site-header nav a:hover {
    color: var(--color-text);
  }

  /* ----------------------------------------------------------
     Hero
     ---------------------------------------------------------- */

  .hero {
    min-block-size: 80svh;
    display: flex;
    align-items: flex-end;
    padding-block: var(--space-xl);
    border-block-end: 1px solid var(--color-border);
    background: transparent url("../assets/images/cgx_cover_faded.jpg") top center no-repeat;
    background-size: cover;
  }

  .hero h1 {
    font-size: var(--text-2xl);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  .hero-roster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-s);
    padding: 0;
    list-style: none;
  }

  .hero-roster li {
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* Bullet separator between names, not after last */
  .hero-roster li + li::before {
    content: "·";
    margin-inline-end: var(--space-s);
    color: var(--color-border);
  }

  .hero-sub {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
  }

  .cta {
    display: inline-flex;
    align-items: center;
    padding-block: 0.75em;
    padding-inline: 1.5em;
    background-color: var(--color-text);
    color: var(--color-bg);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .cta:hover {
    opacity: 0.85;
    color: var(--color-bg);
  }

  /* ----------------------------------------------------------
     Artists
     ---------------------------------------------------------- */

  #artists {
    padding-block: var(--space-xl);
    border-block-end: 1px solid var(--color-border);
  }

  .artists-roster {
    list-style: none;
    padding: 0;
  }

  .artist {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block: var(--space-m);
    border-block-end: 1px solid var(--color-border);
  }

  .artist:first-child {
    border-block-start: 1px solid var(--color-border);
  }

  .artist-name {
    font-size: var(--text-xl);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .artist-ig {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .artist-ig:hover {
    color: var(--color-text);
  }

  /* ----------------------------------------------------------
     Contact
     ---------------------------------------------------------- */

  #contact {
    padding-block: var(--space-xl);
    border-block-end: 1px solid var(--color-border);
  }

  #contact h2 {
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  #contact address {
    font-style: normal;
  }

  .hours {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap-inline: var(--space-m);
    gap-block: var(--space-3xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .hours dt {
    font-weight: 600;
    color: var(--color-text);
  }

  .walk-in {
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .map-link {
    display: inline-flex;
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    text-underline-offset: 0.2em;
  }

  .map-link:hover {
    color: var(--color-text);
  }

  /* ----------------------------------------------------------
     Footer
     ---------------------------------------------------------- */

  .site-footer {
    padding-block: var(--space-m);
  }

  .site-footer .cluster {
    justify-content: space-between;
  }

  .site-footer small,
  .site-footer a {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .site-footer a {
    text-decoration: none;
    letter-spacing: 0.04em;
  }

  .site-footer a:hover {
    color: var(--color-text);
  }

}


/* ============================================================
   UTILITIES
   Single-purpose. !important is correct here by design —
   a utility class is an explicit override, not a mistake.
   Keep this layer small and honest.
   ============================================================ */

@layer utilities {

  .sr-only {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .not-sr-only {
    position: static !important;
    inline-size: auto !important;
    block-size: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
  }

}