/* ============================================================
   Al Funoon Studio — theme.css
   Single source of truth for colors, type, and spacing —
   INCLUDING which fonts get loaded (see @import below). Every
   page and shared component (topbar.js, footer.js) should
   reference these variables only — never hardcode a hex value,
   font name, or spacing number in page-level CSS.

   To change a font: edit the @import URL below AND the matching
   --font-* variable. That's it — nothing in any .html file needs
   to change, since every page already links this one file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600&family=Source+Sans+3:wght@600;700&display=swap');

:root {
  /* ---- Color ----
     Palette pulled from Fatema's own pattern work (the deep plum
     of the floral collection, the warm ochre running through the
     kangaroo + wildflower tiles) rather than a generic brand kit —
     the site chrome stays quiet in ink/paper so the patterns stay
     the loudest thing on the page, with ochre as the one accent. */
  --color-ink: #1a1613;         /* primary text, logo, nav */
  --color-ink-soft: #4a433c;    /* secondary text, captions */
  --color-paper: #ffffff;       /* page background */
  --color-paper-alt: #f6f5f2;   /* alternating section background */
  --color-accent: #b5792c;      /* ochre — links, focus states, small accents */
  --color-accent-soft: #e4d3b3; /* accent tints (hover backgrounds) */
  --color-plum: #3e2a3e;        /* secondary accent, reserved for private portfolio */
  --color-line: #e4dcc9;        /* hairline borders/dividers */
  --color-paper-on-ink: #faf6ef;/* text color when sitting on --color-ink */

  /* ---- Type ----
     Two structural fonts, both serif, so the chrome stays in step
     with the illustrated, botanical patterns instead of competing
     with them. Lora carries body copy — warm and readable at length.
     Fraunces is the structural voice — nav, buttons, headings, and
     the "let's work together" moment.

     --font-logo is the one deliberate exception: a bold sans-serif
     reserved ONLY for the "Al Funoon Studio" wordmark beside the
     logo mark in the topbar, matching the sans used on the logo
     itself in the portfolio PDF. Don't reuse it elsewhere. */
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --font-ui: "Fraunces", Georgia, "Times New Roman", serif;
  --font-logo: "Source Sans 3", "Source Sans Pro", Arial, Helvetica, sans-serif; /* Google Fonts serves the "Source Sans Pro" family under the name "Source Sans 3" */

  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.875rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.25rem;
  --fs-script: 2.75rem;

  --lh-body: 1.7;
  --lh-tight: 1.15;

  --tracking-wide: 0.14em;
  --tracking-mid: 0.06em;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 5.5rem;
  --space-2xl: 8rem;

  /* ---- Layout ---- */
  --max-text: 40rem;      /* prose columns — bio, licensing copy */
  --max-content: 72rem;   /* grids, wide sections */
  --radius-sm: 2px;
  --radius-md: 6px;

  --nav-height: 4.5rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Respect reduced-motion preferences site-wide */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ============================================================
   Typography
   ============================================================ */
h1,
h2,
h3 {
  font-family: var(--font-ui);
  font-weight: 500;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-sm);
  letter-spacing: var(--tracking-mid);
}

h1 {
  font-size: var(--fs-3xl);
}

h2 {
  font-size: var(--fs-2xl);
}

h3 {
  font-size: var(--fs-lg);
}

p {
  margin: 0 0 var(--space-sm);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-soft);
}

/* The one emphasis moment (e.g. "let's work together") — use
   sparingly, never for body copy or repeated UI labels (see
   topbar.js / footer.js, which don't use it). Class name is
   historical; this no longer renders as a script — it's the
   site's UI serif (Fraunces), just set large and light. */
.script-accent {
  font-family: var(--font-ui);
  font-size: var(--fs-script);
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--tracking-mid);
}

.prose {
  max-width: var(--max-text);
}

/* ============================================================
   Blog list
   ============================================================ */
.blog-list {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  max-width: var(--max-text);
}

.blog-list__item + .blog-list__item {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-paper-alt);
}

.blog-list__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-list__title {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: 500;
}

.blog-list__link:hover .blog-list__title {
  text-decoration: underline;
}

.blog-list__excerpt {
  display: block;
  margin-top: var(--space-xs);
  color: var(--color-ink-soft);
}

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-xl) 0;
}

.section--alt {
  background: var(--color-paper-alt);
}

.grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 720px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }
  :root {
    --fs-3xl: 2.25rem;
    --fs-2xl: 1.875rem;
    --fs-script: 2rem;
  }
}

/* ============================================================
   Pattern grid tiles (portfolio.html, index.html preview)
   ============================================================ */
.pattern-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-paper-alt);
}

.pattern-tile__frame {
  aspect-ratio: 1;
  overflow: hidden;
}

.pattern-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.pattern-tile:hover img {
  transform: scale(1.045);
}

.pattern-tile__caption {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-mid);
  color: var(--color-ink-soft);
  padding-top: var(--space-2xs);
}

/* ============================================================
   Private portfolio (private.html)
   ============================================================ */
.palette-strip {
  display: flex;
  gap: var(--space-2xs);
  margin: var(--space-sm) 0;
}

.palette-swatch {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.collection-hero {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.collection-hero img {
  width: 100%;
  height: auto;
}

.application-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

@media (max-width: 720px) {
  .application-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.private-divider {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 0;
}

.private-not-found {
  padding: var(--space-2xl) 0;
  text-align: center;
}

/* ============================================================
   Lightbox (click-to-enlarge on pattern tiles)
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(26, 22, 19, 0.92);
}

.lightbox--open {
  display: flex;
}

.lightbox__figure {
  width: min(80vw, 40rem);
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox__caption {
  color: var(--color-paper-on-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-mid);
  margin-top: var(--space-2xs);
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: transparent;
  border: 1px solid var(--color-paper-on-ink);
  color: var(--color-paper-on-ink);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: var(--fs-md);
  line-height: 1;
}

.lightbox__close:hover {
  background: var(--color-paper-on-ink);
  color: var(--color-ink);
}

.pattern-tile {
  cursor: zoom-in;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-mid);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-ink);
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-paper-on-ink);
}

.btn--primary:hover,
.btn--primary:active {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
}

.btn--outline:hover {
  background: var(--color-ink);
  color: var(--color-paper-on-ink);
}

/* ============================================================
   Top navigation (structure filled in by topbar.js)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
}

.site-header__bar {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.site-header__logo img {
  height: 2.25rem;
  width: 2.25rem;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-header__nav a:not(.btn) {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-mid);
  color: var(--color-ink-soft);
  padding: var(--space-3xs) 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.site-header__nav a:not(.btn):hover {
  color: var(--color-ink);
}

.site-header__nav a:not(.btn)[aria-current="page"] {
  color: var(--color-ink);
  border-color: var(--color-accent);
}

.site-header__toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-2xs);
}

.site-header__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  margin: 5px 0;
}

@media (max-width: 720px) {
  .site-header__toggle {
    display: block;
  }
  .site-header__nav {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-line);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-2xs) var(--space-md) var(--space-sm);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .site-header__nav a {
    padding: var(--space-2xs) 0;
    width: 100%;
  }
  .site-header--open .site-header__nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ============================================================
   Footer (structure filled in by footer.js)
   ============================================================ */
.site-footer {
  background: var(--color-ink);
  color: var(--color-paper-on-ink);
  padding: var(--space-lg) 0 var(--space-md);
}

.site-footer a {
  color: var(--color-paper-on-ink);
  opacity: 0.85;
}

.site-footer a:hover {
  opacity: 1;
  color: var(--color-accent-soft);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(250, 246, 239, 0.15);
}

.site-footer__legal {
  max-width: var(--max-text);
  font-size: var(--fs-sm);
  opacity: 0.7;
  margin-top: var(--space-md);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  opacity: 0.6;
  margin-top: var(--space-md);
}