/*
 * tailwind-compiled.css
 * Self-hosted replacement for the Tailwind Play CDN.
 *
 * Generated by manual extraction from:
 *   index.html, work.html, exhibitions.html, studio.html,
 *   classes.html, contact.html
 *
 * Covers all utility classes used across those pages.
 * Custom colour/font tokens (bg-surface, font-display, etc.)
 * are resolved via CSS custom properties in tokens.css —
 * they appear here as declarations using var(--…).
 *
 * Tailwind "forms" plugin reset — only the input/textarea/select
 * base resets actually used on contact.html are included.
 *
 * No container-queries plugin classes are used on any page.
 */

/* ── 1. Box-sizing & base reset (Tailwind Preflight subset) ── */
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

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

b, strong {
  font-weight: bolder;
}

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub  { bottom: -0.25em; }
sup  { top: -0.5em; }

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, select {
  text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

button, [role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

img, video {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none;
}

/* ── 2. Tailwind forms plugin — minimal reset for contact.html ── */
[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
textarea,
select {
  appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

[type="text"]:focus,
[type="email"]:focus,
[type="url"]:focus,
[type="password"]:focus,
[type="number"]:focus,
[type="date"]:focus,
[type="datetime-local"]:focus,
[type="month"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="time"]:focus,
[type="week"]:focus,
textarea:focus,
select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  border-color: #2563eb;
}

/* ── 3. CSS custom property foundations ── */
:root {
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ── 4. Utility classes ── */

/* --- Layout --- */
.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.grid         { display: grid; }
.hidden       { display: none; }

.fixed        { position: fixed; }
.absolute     { position: absolute; }
.relative     { position: relative; }

.inset-0      { inset: 0; }
.top-0        { top: 0; }
.top-8        { top: 2rem; }
.left-8       { left: 2rem; }
.z-0          { z-index: 0; }
.z-10         { z-index: 10; }
.z-50         { z-index: 50; }

/* --- Display --- */
.overflow-hidden   { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }

/* --- Sizing --- */
.h-full           { height: 100%; }
.h-auto           { height: auto; }
.h-1\/2           { height: 50%; }
.h-48             { height: 12rem; }
.h-64             { height: 16rem; }
.h-px             { height: 1px; }
.h-\[1px\]        { height: 1px; }
.h-\[200px\]      { height: 200px; }
.h-\[380px\]      { height: 380px; }
.h-\[400px\]      { height: 400px; }
.h-\[44px\]       { height: 44px; }
.h-\[563px\]      { height: 563px; }
.h-\[600px\]      { height: 600px; }
.h-\[614px\]      { height: 614px; }
.h-\[870px\]      { height: 870px; }

.w-full           { width: 100%; }
.w-12             { width: 3rem; }
.w-16             { width: 4rem; }
.w-64             { width: 16rem; }
.w-1\/3           { width: 33.333333%; }

.min-h-screen     { min-height: 100vh; }
.min-h-\[512px\]  { min-height: 512px; }
.min-h-\[716px\]  { min-height: 716px; }
.min-h-\[819px\]  { min-height: 819px; }

.max-w-2xl        { max-width: 42rem; }
.max-w-3xl        { max-width: 48rem; }
.max-w-4xl        { max-width: 56rem; }
.max-w-5xl        { max-width: 64rem; }
.max-w-6xl        { max-width: 72rem; }
.max-w-7xl        { max-width: 80rem; }
.max-w-screen-xl  { max-width: 1280px; }
.max-w-screen-2xl { max-width: 1536px; }
.max-w-\[1800px\] { max-width: 1800px; }
.max-w-\[36ch\]   { max-width: 36ch; }
.max-w-\[38ch\]   { max-width: 38ch; }
.max-w-\[45ch\]   { max-width: 45ch; }
.max-w-\[50ch\]   { max-width: 50ch; }
.max-w-\[65ch\]   { max-width: 65ch; }

.flex-1           { flex: 1 1 0%; }
.flex-col         { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-grow        { flex-grow: 1; }
.flex-shrink-0    { flex-shrink: 0; }
.flex-wrap        { flex-wrap: wrap; }

.items-baseline   { align-items: baseline; }
.items-center     { align-items: center; }
.items-end        { align-items: flex-end; }
.items-start      { align-items: flex-start; }
.justify-between  { justify-content: space-between; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }

.grid-cols-1      { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-2            { gap: 0.5rem; }
.gap-4            { gap: 1rem; }
.gap-6            { gap: 1.5rem; }
.gap-8            { gap: 2rem; }
.gap-10           { gap: 2.5rem; }
.gap-12           { gap: 3rem; }
.gap-16           { gap: 4rem; }
.gap-20           { gap: 5rem; }
.gap-24           { gap: 6rem; }
.gap-x-12         { column-gap: 3rem; }
.gap-y-6          { row-gap: 1.5rem; }
.gap-y-12         { row-gap: 3rem; }

.mx-auto          { margin-left: auto; margin-right: auto; }
.mb-1             { margin-bottom: 0.25rem; }
.mb-2             { margin-bottom: 0.5rem; }
.mb-3             { margin-bottom: 0.75rem; }
.mb-4             { margin-bottom: 1rem; }
.mb-6             { margin-bottom: 1.5rem; }
.mb-8             { margin-bottom: 2rem; }
.mb-10            { margin-bottom: 2.5rem; }
.mb-12            { margin-bottom: 3rem; }
.mb-16            { margin-bottom: 4rem; }
.mb-32            { margin-bottom: 8rem; }
.mt-1             { margin-top: 0.25rem; }
.mt-2             { margin-top: 0.5rem; }
.mt-4             { margin-top: 1rem; }
.mt-16            { margin-top: 4rem; }

.px-4             { padding-left: 1rem; padding-right: 1rem; }
.px-6             { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8             { padding-left: 2rem; padding-right: 2rem; }
.px-10            { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-12            { padding-left: 3rem; padding-right: 3rem; }
.py-2             { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3             { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4             { padding-top: 1rem; padding-bottom: 1rem; }
.py-6             { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8             { padding-top: 2rem; padding-bottom: 2rem; }
.py-12            { padding-top: 3rem; padding-bottom: 3rem; }
.py-16            { padding-top: 4rem; padding-bottom: 4rem; }
.py-20            { padding-top: 5rem; padding-bottom: 5rem; }
.py-24            { padding-top: 6rem; padding-bottom: 6rem; }
.py-32            { padding-top: 8rem; padding-bottom: 8rem; }
.pt-8             { padding-top: 2rem; }
.pt-16            { padding-top: 4rem; }
.pt-24            { padding-top: 6rem; }
.pt-32            { padding-top: 8rem; }
.pt-40            { padding-top: 10rem; }
.pt-\[88px\]      { padding-top: 88px; }
.pb-1             { padding-bottom: 0.25rem; }
.pb-4             { padding-bottom: 1rem; }
.pb-8             { padding-bottom: 2rem; }
.pb-16            { padding-bottom: 4rem; }
.pb-20            { padding-bottom: 5rem; }
.pb-24            { padding-bottom: 6rem; }
.pl-8             { padding-left: 2rem; }
.p-0              { padding: 0; }
.p-12             { padding: 3rem; }

.box-border       { box-sizing: border-box; }
.aspect-\[4\/5\]  { aspect-ratio: 4 / 5; }

/* --- Typography --- */
.font-body        { font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif); }
.font-display     { font-family: var(--font-display, 'EB Garamond', Georgia, serif); }
.font-headline    { font-family: var(--font-display, 'EB Garamond', Georgia, serif); }
.font-label       { font-family: var(--font-label, 'Manrope', ui-sans-serif, sans-serif); }

.font-light       { font-weight: 300; }
.font-medium      { font-weight: 500; }
.font-bold        { font-weight: 700; }
.italic           { font-style: italic; }

.text-xs          { font-size: 0.75rem; line-height: 1rem; }
.text-sm          { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg          { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl          { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl         { font-size: 1.5rem; line-height: 2rem; }
.text-3xl         { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl         { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl         { font-size: 3rem; line-height: 1; }
.text-7xl         { font-size: 4.5rem; line-height: 1; }

/* Arbitrary text sizes */
.text-\[1\.375rem\]  { font-size: 1.375rem; }
.text-\[1\.5rem\]    { font-size: 1.5rem; }
.text-\[11px\]       { font-size: 11px; }
.text-\[12px\]       { font-size: 12px; }
.text-\[13px\]       { font-size: 13px; }
.text-\[16px\]       { font-size: 16px; }
.text-\[18px\]       { font-size: 18px; }
.text-\[20px\]       { font-size: 20px; }
.text-\[22px\]       { font-size: 22px; }
.text-\[24px\]       { font-size: 24px; }
.text-\[48px\]       { font-size: 48px; }
.text-\[4rem\]       { font-size: 4rem; }
.text-\[56px\]       { font-size: 56px; }
.text-\[64px\]       { font-size: 64px; }
.text-\[72px\]       { font-size: 72px; }

.text-center      { text-align: center; }
.uppercase        { text-transform: uppercase; }
.underline        { text-decoration-line: underline; }
.underline-offset-4 { text-underline-offset: 4px; }

.leading-none     { line-height: 1; }
.leading-tight    { line-height: 1.25; }
.leading-relaxed  { line-height: 1.625; }
.leading-\[1\.5\] { line-height: 1.5; }
.leading-\[1\.7\] { line-height: 1.7; }

.tracking-tight   { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.tracking-\[0\.2em\]  { letter-spacing: 0.2em; }
.tracking-\[0\.3em\]  { letter-spacing: 0.3em; }

/* Spacing helpers */
.space-y-0    > * + *  { margin-top: 0; }
.space-y-2    > * + *  { margin-top: 0.5rem; }
.space-y-3    > * + *  { margin-top: 0.75rem; }
.space-y-4    > * + *  { margin-top: 1rem; }
.space-y-6    > * + *  { margin-top: 1.5rem; }
.space-y-8    > * + *  { margin-top: 2rem; }
.space-y-12   > * + *  { margin-top: 3rem; }
.space-x-8    > * + *  { margin-left: 2rem; }

/* --- Colours — mapped to CSS custom properties from tokens.css --- */

/* Background colours */
.bg-background              { background-color: var(--color-background, #FDF6F0); }
.bg-surface                 { background-color: var(--surface, #F5EDE3); }
.bg-surface\/80             { background-color: color-mix(in srgb, var(--surface, #F5EDE3) 80%, transparent); }
.bg-surface\/90             { background-color: color-mix(in srgb, var(--surface, #F5EDE3) 90%, transparent); }
.bg-surface-container       { background-color: var(--surface-container, #FDF6F0); }
.bg-surface-container\/80   { background-color: color-mix(in srgb, var(--surface-container, #FDF6F0) 80%, transparent); }
.bg-surface-container-high\/80 { background-color: color-mix(in srgb, var(--surface-container, #FDF6F0) 80%, transparent); }
.bg-surface-container-low   { background-color: var(--surface-container-low-ds, #1A2E2A); }
.bg-surface-container-lowest { background-color: color-mix(in srgb, var(--surface-container, #FDF6F0) 70%, white); }
.bg-surface-container-lowest\/80 { background-color: color-mix(in srgb, var(--surface-container, #FDF6F0) 80%, transparent); }
.bg-surface-container-highest { background-color: color-mix(in srgb, var(--surface-container, #FDF6F0) 110%, #c0b0a0); }
.bg-transparent             { background-color: transparent; }
.bg-black\/20               { background-color: rgba(0, 0, 0, 0.2); }

/* Named palette backgrounds (defined in local <style> on work/studio pages) */
.bg-terracotta   { background-color: #A63D20; }
.bg-teal         { background-color: #1B6B65; }
.bg-blush        { background-color: #7D3B4A; }
.bg-kiln         { background-color: #A93F17; }

/* Gradient backgrounds */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.from-terracotta\/20 { --tw-gradient-from: rgba(166,61,32,0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(166,61,32,0)); }
.to-terracotta\/5  { --tw-gradient-to: rgba(166,61,32,0.05); }
.from-eucalyptus\/20 { --tw-gradient-from: rgba(27,107,101,0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(27,107,101,0)); }
.to-eucalyptus\/5  { --tw-gradient-to: rgba(27,107,101,0.05); }
.from-blush\/20  { --tw-gradient-from: rgba(125,59,74,0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(125,59,74,0)); }
.to-blush\/5     { --tw-gradient-to: rgba(125,59,74,0.05); }

/* Arbitrary bg colours */
.bg-\[\#E89E18\]             { background-color: #E89E18; }
.bg-\[var\(--color-blush-deep\)\] { background-color: var(--color-blush-deep, #3E1520); }
.bg-\[var\(--fg\)\]          { background-color: var(--fg, #1A2E2A); }
.bg-\[var\(--surface\)\]     { background-color: var(--surface); }

/* Text colours — mapped to CSS vars */
.text-on-background          { color: var(--color-text, #1A2E2A); }
.text-on-surface             { color: var(--fg, #1A2E2A); }
.text-on-surface\/70         { color: color-mix(in srgb, var(--fg, #1A2E2A) 70%, transparent); }
.text-on-surface-variant     { color: var(--fg-secondary, #3D5A52); }
.text-on-surface-variant\/60 { color: color-mix(in srgb, var(--fg-secondary, #3D5A52) 60%, transparent); }
.text-primary                { color: var(--color-primary, #A63D20); }
.text-on-primary             { color: #FDF6F0; }
.text-on-primary-container   { color: #1A2E2A; }

/* Named text colours (defined in local <style> blocks) */
.text-porcelain             { color: #FDF6F0; }
.text-porcelain-muted       { color: rgba(253, 246, 240, 0.85); }
.text-terracotta-accessible { color: #DA7A56; }
.text-sage                  { color: #C8D8CC; }
.text-secondary             { color: #1B6B65; }

/* Arbitrary text colours */
.text-\[\#1A2E2A\]          { color: #1A2E2A; }
.text-\[\#1A2E2A\]\/40      { color: rgba(26, 46, 42, 0.4); }
.text-\[\#1A2E2A\]\/50      { color: rgba(26, 46, 42, 0.5); }
.text-\[\#1A2E2A\]\/60      { color: rgba(26, 46, 42, 0.6); }
.text-\[\#1A2E2A\]\/70      { color: rgba(26, 46, 42, 0.7); }
.text-\[\#1A2E2A\]\/80      { color: rgba(26, 46, 42, 0.8); }
.text-\[\#A63D20\]          { color: #A63D20; }
.text-\[\#C8D8CC\]          { color: #C8D8CC; }
.text-\[\#DA7A56\]          { color: #DA7A56; }
.text-\[\#FDF6F0\]          { color: #FDF6F0; }
.text-\[\#FDF6F0\]\/60      { color: rgba(253, 246, 240, 0.6); }
.text-\[var\(--accent\)\]   { color: var(--accent, #A63D20); }
.text-\[var\(--fg\)\]       { color: var(--fg, #1A2E2A); }
.text-\[var\(--fg\)\]\/70   { color: color-mix(in srgb, var(--fg, #1A2E2A) 70%, transparent); }
.text-\[var\(--fg\)\]\/80   { color: color-mix(in srgb, var(--fg, #1A2E2A) 80%, transparent); }
.text-\[var\(--fg-secondary\)\] { color: var(--fg-secondary, #3D5A52); }
.text-\[var\(--surface-raised\)\] { color: var(--surface-raised, #FDF6F0); }

/* text-label-md utility (used in index.html header) */
.text-label-md              { font-size: 0.8125rem; }

/* --- Borders --- */
.border                     { border-width: 1px; }
.border-0                   { border-width: 0; }
.border-b                   { border-bottom-width: 1px; }
.border-b-2                 { border-bottom-width: 2px; }
.border-b-\[0\.5px\]        { border-bottom-width: 0.5px; }
.border-t                   { border-top-width: 1px; }
.border-t-\[0\.5px\]        { border-top-width: 0.5px; }
.border-l-2                 { border-left-width: 2px; }
.border-\[0\.5px\]          { border-width: 0.5px; }

.border-transparent         { border-color: transparent; }
.border-primary             { border-color: var(--color-primary, #A63D20); }
.border-primary\/20         { border-color: color-mix(in srgb, var(--color-primary, #A63D20) 20%, transparent); }
.border-primary\/30         { border-color: color-mix(in srgb, var(--color-primary, #A63D20) 30%, transparent); }
.border-primary\/40         { border-color: color-mix(in srgb, var(--color-primary, #A63D20) 40%, transparent); }
.border-outline-variant\/20 { border-color: color-mix(in srgb, var(--color-border, #D8CFC5) 20%, transparent); }
.border-terracotta\/40      { border-color: rgba(166, 61, 32, 0.4); }
.border-terracotta\/50      { border-color: rgba(166, 61, 32, 0.5); }
.border-eucalyptus          { border-color: #1B6B65; }
.border-blush               { border-color: #7D3B4A; }
.border-porcelain\/10       { border-color: rgba(253, 246, 240, 0.1); }
.border-\[\#57423c\]\/30    { border-color: rgba(87, 66, 60, 0.3); }
.border-\[0\.5px\]          { border-width: 0.5px; }
.border-\[var\(--accent\)\]  { border-color: var(--accent, #A63D20); }
.border-\[var\(--fg\)\]\/20  { border-color: color-mix(in srgb, var(--fg, #1A2E2A) 20%, transparent); }
.border-\[var\(--fg\)\]\/40  { border-color: color-mix(in srgb, var(--fg, #1A2E2A) 40%, transparent); }
.border-\[var\(--fg\)\]\/60  { border-color: color-mix(in srgb, var(--fg, #1A2E2A) 60%, transparent); }

/* border-thin helper (defined locally in studio.html, replicated here) */
.border-thin                { border-width: 0.5px; }

/* --- Opacity --- */
.opacity-20  { opacity: 0.2; }
.opacity-60  { opacity: 0.6; }
.opacity-80  { opacity: 0.8; }
.opacity-85  { opacity: 0.85; }

/* --- Mix blend --- */
.mix-blend-overlay    { mix-blend-mode: overlay; }
.mix-blend-multiply   { mix-blend-mode: multiply; }
.mix-blend-luminosity { mix-blend-mode: luminosity; }

/* --- Object fit --- */
.object-cover         { object-fit: cover; }

/* --- Backdrop --- */
.backdrop-blur-md     { backdrop-filter: blur(12px); }

/* --- Transitions & animation --- */
.transition-all       { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors    { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-opacity   { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.duration-300         { transition-duration: 300ms; }
.duration-500         { transition-duration: 500ms; }
.duration-700         { transition-duration: 700ms; }
.ease-out             { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

/* --- Antialiasing --- */
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Text rendering --- */
.resize-none    { resize: none; }
.rounded-none   { border-radius: 0; }

/* --- Selection colours --- */
.selection\:bg-primary-container *::selection,
.selection\:bg-primary-container::selection    { background-color: color-mix(in srgb, var(--color-primary, #A63D20) 20%, white); }
.selection\:text-on-primary-container *::selection,
.selection\:text-on-primary-container::selection { color: #1A2E2A; }
.selection\:bg-terracotta\/30 *::selection,
.selection\:bg-terracotta\/30::selection       { background-color: rgba(166, 61, 32, 0.3); }
.selection\:text-porcelain *::selection,
.selection\:text-porcelain::selection          { color: #FDF6F0; }
.selection\:text-on-primary *::selection,
.selection\:text-on-primary::selection         { color: #FDF6F0; }
.selection\:bg-surface *::selection,
.selection\:bg-surface::selection              { background-color: var(--surface); }

/* --- Placeholder --- */
.placeholder\:text-\[var\(--fg-secondary\)\]\/50::placeholder { color: color-mix(in srgb, var(--fg-secondary, #3D5A52) 50%, transparent); }

/* --- Focus utilities --- */
.focus\:ring-0:focus        { --tw-ring-shadow: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow,0 0 #0000); }
.focus\:border-\[var\(--fg\)\]:focus { border-color: var(--fg, #1A2E2A); }

/* --- Group hover --- */
.group:hover .group-hover\:opacity-100  { opacity: 1; }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }

/* --- Hover states --- */
.hover\:bg-\[var\(--accent\)\]:hover    { background-color: var(--accent, #A63D20); }
.hover\:bg-\[var\(--fg\)\]:hover        { background-color: var(--fg, #1A2E2A); }
.hover\:bg-primary:hover                { background-color: var(--color-primary, #A63D20); }
.hover\:border-\[var\(--accent\)\]:hover { border-color: var(--accent, #A63D20); }
.hover\:border-primary:hover            { border-color: var(--color-primary, #A63D20); }
.hover\:mix-blend-normal:hover          { mix-blend-mode: normal; }
.hover\:opacity-80:hover                { opacity: 0.8; }
.hover\:opacity-100:hover               { opacity: 1; }
.hover\:text-\[\#A63D20\]:hover         { color: #A63D20; }
.hover\:text-\[var\(--accent\)\]:hover  { color: var(--accent, #A63D20); }
.hover\:text-\[var\(--surface-raised\)\]:hover { color: var(--surface-raised, #FDF6F0); }
.hover\:text-on-primary:hover           { color: #FDF6F0; }
.hover\:text-on-surface:hover           { color: var(--fg, #1A2E2A); }
.hover\:text-porcelain:hover            { color: #FDF6F0; }
.hover\:text-primary:hover              { color: var(--color-primary, #A63D20); }
.hover\:text-terracotta-accessible:hover { color: #DA7A56; }
.hover\:underline:hover                 { text-decoration-line: underline; }

/* --- Responsive: md breakpoint (768px) --- */
@media (min-width: 768px) {
  .md\:border-l     { border-left-width: 1px; }
  .md\:col-span-5   { grid-column: span 5 / span 5; }
  .md\:col-span-7   { grid-column: span 7 / span 7; }
  .md\:flex         { display: flex; }
  .md\:flex-row     { flex-direction: row; }
  .md\:gap-32       { gap: 8rem; }
  .md\:grid         { display: grid; }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:hidden       { display: none; }
  .md\:h-\[520px\]  { height: 520px; }
  .md\:h-full       { height: 100%; }
  .md\:items-start  { align-items: flex-start; }
  .md\:mt-0         { margin-top: 0; }
  .md\:pl-8         { padding-left: 2rem; }
  .md\:pt-0         { padding-top: 0; }
  .md\:px-12        { padding-left: 3rem; padding-right: 3rem; }
  .md\:px-16        { padding-left: 4rem; padding-right: 4rem; }
  .md\:px-24        { padding-left: 6rem; padding-right: 6rem; }
  .md\:py-32        { padding-top: 8rem; padding-bottom: 8rem; }
  .md\:text-\[1\.875rem\] { font-size: 1.875rem; }
  .md\:text-\[6rem\]      { font-size: 6rem; }
  .md\:text-\[72px\]      { font-size: 72px; }
  .md\:text-2xl     { font-size: 1.5rem; line-height: 2rem; }
  .md\:text-5xl     { font-size: 3rem; line-height: 1; }
  .md\:text-6xl     { font-size: 3.75rem; line-height: 1; }
  .md\:text-9xl     { font-size: 8rem; line-height: 1; }
  .md\:text-left    { text-align: left; }
  .md\:text-right   { text-align: right; }
  .md\:w-\[200px\]  { width: 200px; }
  .md\:w-\[40\%\]   { width: 40%; }
  .md\:w-\[60\%\]   { width: 60%; }
  .md\:w-2\/5       { width: 40%; }
  .md\:w-3\/5       { width: 60%; }
}

/* --- Responsive: lg breakpoint (1024px) --- */
@media (min-width: 1024px) {
  .lg\:gap-32       { gap: 8rem; }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:h-auto       { height: auto; }
  .lg\:px-24        { padding-left: 6rem; padding-right: 6rem; }
}

/* --- Responsive: sm breakpoint (640px) --- */
@media (min-width: 640px) {
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 5. Page-specific helpers defined in local <style> blocks ──
   (Replicated here so they work without Tailwind CDN resolving them.
    These are NOT standard Tailwind utility names — the CDN runtime
    generated them from the tailwind.config custom colours.)
*/

/* work.html / studio.html local class aliases */
.text-terracotta    { color: #A63D20; }
.border-terracotta  { border-color: #A63D20; }
.bg-terracotta      { background-color: #A63D20; }

/* exhibitions.html uses these colour names in gradient-to classes */
/* from-eucalyptus/20, to-eucalyptus/5 — handled above */
/* border-eucalyptus, border-blush — handled above */