/*
  Cally Clark Art: main stylesheet

  CONCEPT: A moonlit sketchbook. Hand-inked, a little wicked and a lot of fun.
  Pictures are framed like old mirrors and archways, and the crescent moon
  turns up in the logo, the list markers and the picture placeholders.

  PALETTE (text pairs checked against WCAG AA)
  --ink         #1E1424  dark bands: header, hero, featured work, footer (parchment text ~15:1)
  --ink-2       #2A1D33  surfaces on dark, picture placeholders (parchment text ~13:1)
  --parchment   #F4EBDD  main light background, text on dark (text ~15:1 on ink)
  --paper       #FBF6EE  form fields on light
  --linen       #EADCC6  alternate light band (text ~12:1)
  --text        #241A2B  body text on light (~15:1 on parchment)
  --muted       #5A4A63  secondary text on light (~6:1 on parchment)
  --moss        #365D44  accent on light: numbers, links (~6:1 on parchment)
  --rose        #B3305A  action: buttons with white text (~6:1)
  --rose-deep   #8F2246  button and link hover (~8:1 with white)
  --gold        #E8B65B  accent on dark: numbers, moon, focus rings (~9.5:1 on ink)
  --muted-dark  #CDBFD6  secondary text on dark (~10:1 on ink)
  --plum        #5B2C6F  picture placeholder tint only

  TYPE
  Fraunces (display, soft and a little wonky) for headings and the big quote.
  Figtree (text, clean and friendly) for body copy, buttons and labels.
  Weights used: 400 and 600 only.

  MOTIF
  The crescent moon (logo, placeholder art, list markers) and arch-topped picture frames.
*/

:root {
  --ink: #1E1424;
  --ink-2: #2A1D33;
  --parchment: #F4EBDD;
  --paper: #FBF6EE;
  --linen: #EADCC6;
  --text: #241A2B;
  --muted: #5A4A63;
  --muted-dark: #CDBFD6;
  --moss: #365D44;
  --rose: #B3305A;
  --rose-deep: #8F2246;
  --gold: #E8B65B;
  --plum: #5B2C6F;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --text-h1: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);
  --text-hero: clamp(2.6rem, 1.6rem + 4.2vw, 5rem);
  --text-h2: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-quote: clamp(1.9rem, 1.2rem + 3vw, 3.5rem);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;

  --radius: 8px;
  --arch: 999px 999px 12px 12px;
  --container: 1120px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
}

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

img {
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

p {
  margin: 0 0 var(--space-2);
  max-width: 65ch;
}

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

a:hover {
  color: var(--rose-deep);
}

:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 10;
  padding: var(--space-1) var(--space-2);
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-2);
}

/* ---------- Header and navigation ---------- */

.site-header {
  background: var(--ink);
  color: var(--parchment);
  padding-block: var(--space-2);
}

.site-header :focus-visible {
  outline-color: var(--gold);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration: none;
}

.brand:hover {
  color: var(--parchment);
}

.brand-moon {
  width: 28px;
  height: 28px;
  color: var(--gold);
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-block;
  padding-block: 0.625rem;
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
  color: var(--parchment);
  border-bottom-color: var(--gold);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.button:active {
  transform: translateY(1px);
}

.button-primary {
  background: var(--rose);
  color: #fff;
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--rose-deep);
  color: #fff;
}

.button-secondary {
  background: transparent;
  color: var(--parchment);
  border-color: var(--gold);
}

.button-secondary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* Sections, bands and their text colours */

.section {
  padding-block: var(--space-8);
}

@media (min-width: 760px) {
  .section {
    padding-block: var(--space-12);
  }
}

.section-ink {
  background: var(--ink);
  color: var(--parchment);
}

.section-ink h2,
.section-ink h3 {
  color: var(--parchment);
}

.section-ink a:not(.button) {
  color: var(--gold);
}

.section-ink a:not(.button):hover {
  color: var(--parchment);
}

.section-ink .button-primary,
.section-ink .button-primary:hover {
  color: #fff;
}

.section-ink :focus-visible {
  outline-color: var(--gold);
}

.section-linen {
  background: var(--linen);
  color: var(--text);
}

.section-linen a:not(.button):hover {
  color: var(--rose-deep);
}

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

.hero {
  padding-block: var(--space-6) var(--space-8);
}

@media (min-width: 760px) {
  .hero {
    padding-block: var(--space-12);
  }
}

.hero-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 860px) {
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-8);
  }
}

.hero h1 {
  max-width: 14ch;
  font-size: var(--text-hero);
  color: var(--parchment);
}

.lead {
  max-width: 36ch;
  margin-bottom: var(--space-4);
  font-size: var(--text-lead);
  color: var(--muted-dark);
}

.section-ink .lead {
  color: var(--muted-dark);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Picture frames and photo slots ---------- */

.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--arch);
  background: var(--ink-2);
  color: var(--parchment);
}

.photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  text-align: center;
}

.photo-placeholder svg {
  width: 36%;
  max-width: 120px;
  height: auto;
  color: var(--gold);
}

.photo-placeholder .sparkle {
  width: 14%;
  max-width: 48px;
}

.photo-placeholder p {
  margin: 0;
  max-width: 22ch;
  font-size: 0.95rem;
  line-height: 1.4;
  color: inherit;
}

.photo.tint-moss { background: var(--moss); }
.photo.tint-rose { background: var(--rose); }
.photo.tint-plum { background: var(--plum); }
.photo.tint-linen {
  background: var(--linen);
  color: var(--text);
}
.photo.tint-linen .photo-placeholder svg { color: var(--moss); }
.photo.tint-gold {
  background: var(--gold);
  color: var(--ink);
}
.photo.tint-gold .photo-placeholder svg { color: var(--ink); }

/* A customer's own picture fills the frame */
[data-photo-slot] > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.work {
  margin: 0;
}

.work figcaption {
  margin-top: var(--space-2);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--muted);
}

.section-ink .work figcaption {
  color: var(--muted-dark);
}

.hero .photo {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
}

@media (min-width: 860px) {
  .hero .photo {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- Strands (four numbered themes) ---------- */

.section-intro {
  max-width: 40rem;
}

.strand-list {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .strand-list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-8);
  }
}

.strand-list li {
  padding-top: var(--space-3);
  border-top: 1px solid var(--text);
}

.strand-num {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  color: var(--moss);
}

/* ---------- Featured work (asymmetric grid) ---------- */

.featured-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.featured-grid {
  display: grid;
  gap: var(--space-4);
}

.featured-grid .photo {
  aspect-ratio: 4 / 3;
}

.featured-grid > .work:first-child .photo {
  aspect-ratio: 4 / 5;
}

@media (min-width: 760px) {
  .featured-grid {
    grid-template-columns: 1.2fr 1fr;
    column-gap: var(--space-4);
    align-items: start;
  }

  .featured-grid > .work:first-child {
    grid-row: span 2;
  }
}

/* ---------- Statement (one big quote) ---------- */

.statement blockquote {
  margin: 0;
}

.statement p {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-quote);
  font-weight: 600;
  line-height: 1.15;
  color: var(--moss);
}

/* ---------- Split layouts and lists ---------- */

.split {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 860px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }
}

.checklist {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  max-width: 60ch;
  margin-bottom: var(--space-2);
  padding-left: var(--space-4);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--moss);
  border-radius: 50%;
  box-shadow: inset -0.3rem 0 0 0 var(--moss);
}

/* ---------- Inner page heads ---------- */

.page-head {
  padding-block: var(--space-8) var(--space-6);
  background: var(--ink);
  color: var(--parchment);
}

@media (min-width: 760px) {
  .page-head {
    padding-block: var(--space-12) var(--space-8);
  }
}

.page-head h1 {
  max-width: 16ch;
  color: var(--parchment);
}

.page-head .lead {
  color: var(--muted-dark);
}

/* ---------- Gallery ---------- */

.gallery-grid {
  display: grid;
  gap: var(--space-6) var(--space-4);
}

@media (min-width: 560px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- About portrait ---------- */

.portrait {
  max-width: 480px;
  width: 100%;
}

/* ---------- Contact form and details ---------- */

.contact-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 860px) {
  .contact-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }
}

.form {
  display: grid;
  gap: var(--space-3);
  max-width: 40rem;
}

.field {
  display: grid;
  gap: var(--space-1);
}

.field label {
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 2px solid var(--text);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--text);
  font: inherit;
}

.field textarea {
  min-height: 176px;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 2px;
  border-color: var(--rose);
}

.details dt {
  margin-top: var(--space-3);
  font-weight: 600;
}

.details dt:first-child {
  margin-top: 0;
}

.details dd {
  margin: 0;
  max-width: 40ch;
}

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

.site-footer {
  padding-block: var(--space-8) var(--space-3);
  background: var(--ink);
  color: var(--muted-dark);
}

.site-footer :focus-visible {
  outline-color: var(--gold);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-8);
  }
}

.footer-brand {
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--parchment);
}

.footer-title {
  margin-bottom: var(--space-1);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  color: var(--parchment);
}

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

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

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--space-1);
}

.footer-base {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink-2);
  font-size: 0.9rem;
}

.footer-base p {
  margin: 0;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}