/* ============================================================
   ARIVON — style.css
   Prebuilt Tailwind v4.1.5 utility output
   Design Family  : [H] Documentary / Archive  (K_FAMILY=7)
   Palette        : Burgundy-wine on warm cream (K_HUE=4, K_BG=0)
   Typography     : Archivo Black + Archivo     (K_FONT=4)
   Layout         : Asymmetric split 60/40      (K_LAYOUT=1)
   ============================================================ */

/* 1. @theme — design tokens */
@theme {
  --color-bg-primary:    #F6F1EB;
  --color-bg-secondary:  #EDE7DE;
  --color-ink-primary:   #1A1210;
  --color-ink-muted:     #7A6E68;
  --color-accent:        #8B1A2F;
  --font-display:        'Archivo Black', 'Arial Black', sans-serif;
  --font-body:           'Archivo', 'Arial', sans-serif;
  --radius-none:         0px;
  --radius-sm:           2px;
  --radius-md:           4px;
  --radius-lg:           8px;
  --radius-full:         9999px;
  --shadow-sm:           0 1px 2px rgba(26,18,16,0.08);
  --shadow:              0 2px 8px rgba(26,18,16,0.10);
  --shadow-md:           0 4px 16px rgba(26,18,16,0.12);
  --shadow-lg:           0 8px 32px rgba(26,18,16,0.14);
  --shadow-xl:           0 16px 48px rgba(26,18,16,0.16);
}

/* 2. Base reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background-color: var(--color-bg-primary);
  color: var(--color-ink-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; padding: 0; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
address { font-style: normal; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 900; }

/* ============================================================
   3. Layout & Display
   ============================================================ */
.block            { display: block; }
.inline-block     { display: inline-block; }
.inline           { display: inline; }
.flex             { display: flex; }
.inline-flex      { display: inline-flex; }
.grid             { display: grid; }
.hidden           { display: none; }
.table            { display: table; }
.contents         { display: contents; }

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

.inset-0          { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0        { left: 0; right: 0; }
.inset-y-0        { top: 0; bottom: 0; }
.top-0            { top: 0; }
.top-4            { top: 1rem; }
.right-0          { right: 0; }
.bottom-0         { bottom: 0; }
.bottom-4         { bottom: 1rem; }
.left-0           { left: 0; }
.left-1\/2        { left: 50%; }

.z-0              { z-index: 0; }
.z-10             { z-index: 10; }
.z-20             { z-index: 20; }
.z-30             { z-index: 30; }
.z-40             { z-index: 40; }
.z-50             { z-index: 50; }

.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-scroll  { overflow: scroll; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto  { overflow-y: auto; }

/* ============================================================
   4. Flexbox
   ============================================================ */
.flex-row         { flex-direction: row; }
.flex-col         { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap        { flex-wrap: wrap; }
.flex-nowrap      { flex-wrap: nowrap; }
.flex-1           { flex: 1 1 0%; }
.flex-auto        { flex: 1 1 auto; }
.flex-none        { flex: none; }
.flex-shrink-0    { flex-shrink: 0; }
.flex-grow        { flex-grow: 1; }

.items-start      { align-items: flex-start; }
.items-end        { align-items: flex-end; }
.items-center     { align-items: center; }
.items-stretch    { align-items: stretch; }
.items-baseline   { align-items: baseline; }

.justify-start    { justify-content: flex-start; }
.justify-end      { justify-content: flex-end; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.justify-evenly   { justify-content: space-evenly; }

.self-start       { align-self: flex-start; }
.self-end         { align-self: flex-end; }
.self-center      { align-self: center; }
.self-stretch     { align-self: stretch; }

/* ============================================================
   5. Grid
   ============================================================ */
.grid-cols-1      { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5      { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6      { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12     { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span-1       { grid-column: span 1 / span 1; }
.col-span-2       { grid-column: span 2 / span 2; }
.col-span-3       { grid-column: span 3 / span 3; }
.col-span-4       { grid-column: span 4 / span 4; }
.col-span-5       { grid-column: span 5 / span 5; }
.col-span-6       { grid-column: span 6 / span 6; }
.col-span-full    { grid-column: 1 / -1; }

.row-span-1       { grid-row: span 1 / span 1; }
.row-span-2       { grid-row: span 2 / span 2; }
.row-span-3       { grid-row: span 3 / span 3; }

/* ============================================================
   6. Gap / Space
   ============================================================ */
.gap-0    { gap: 0; }
.gap-1    { gap: 0.25rem; }
.gap-2    { gap: 0.5rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem; }
.gap-7    { gap: 1.75rem; }
.gap-8    { gap: 2rem; }
.gap-9    { gap: 2.25rem; }
.gap-10   { gap: 2.5rem; }
.gap-12   { gap: 3rem; }
.gap-14   { gap: 3.5rem; }
.gap-16   { gap: 4rem; }
.gap-20   { gap: 5rem; }
.gap-24   { gap: 6rem; }

.gap-x-2  { column-gap: 0.5rem; }
.gap-x-4  { column-gap: 1rem; }
.gap-x-6  { column-gap: 1.5rem; }
.gap-x-8  { column-gap: 2rem; }
.gap-x-12 { column-gap: 3rem; }

.gap-y-2  { row-gap: 0.5rem; }
.gap-y-4  { row-gap: 1rem; }
.gap-y-6  { row-gap: 1.5rem; }
.gap-y-8  { row-gap: 2rem; }
.gap-y-12 { row-gap: 3rem; }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-x-6 > * + * { margin-left: 1.5rem; }

/* ============================================================
   7. Padding
   ============================================================ */
.p-0    { padding: 0; }
.p-1    { padding: 0.25rem; }
.p-2    { padding: 0.5rem; }
.p-3    { padding: 0.75rem; }
.p-4    { padding: 1rem; }
.p-5    { padding: 1.25rem; }
.p-6    { padding: 1.5rem; }
.p-7    { padding: 1.75rem; }
.p-8    { padding: 2rem; }
.p-9    { padding: 2.25rem; }
.p-10   { padding: 2.5rem; }
.p-12   { padding: 3rem; }
.p-14   { padding: 3.5rem; }
.p-16   { padding: 4rem; }
.p-20   { padding: 5rem; }
.p-24   { padding: 6rem; }

.px-0   { padding-left: 0; padding-right: 0; }
.px-1   { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2   { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4   { padding-left: 1rem; padding-right: 1rem; }
.px-5   { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6   { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7   { padding-left: 1.75rem; padding-right: 1.75rem; }
.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; }
.px-16  { padding-left: 4rem; padding-right: 4rem; }

.py-0   { padding-top: 0; padding-bottom: 0; }
.py-1   { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.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-5   { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6   { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-7   { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.py-8   { padding-top: 2rem; padding-bottom: 2rem; }
.py-10  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12  { padding-top: 3rem; padding-bottom: 3rem; }
.py-14  { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-16  { padding-top: 4rem; padding-bottom: 4rem; }
.py-20  { padding-top: 5rem; padding-bottom: 5rem; }
.py-24  { padding-top: 6rem; padding-bottom: 6rem; }

.pt-0   { padding-top: 0; }
.pt-1   { padding-top: 0.25rem; }
.pt-2   { padding-top: 0.5rem; }
.pt-3   { padding-top: 0.75rem; }
.pt-4   { padding-top: 1rem; }
.pt-5   { padding-top: 1.25rem; }
.pt-6   { padding-top: 1.5rem; }
.pt-8   { padding-top: 2rem; }
.pt-10  { padding-top: 2.5rem; }
.pt-12  { padding-top: 3rem; }
.pt-16  { padding-top: 4rem; }
.pt-20  { padding-top: 5rem; }
.pt-24  { padding-top: 6rem; }

.pb-0   { padding-bottom: 0; }
.pb-1   { padding-bottom: 0.25rem; }
.pb-2   { padding-bottom: 0.5rem; }
.pb-3   { padding-bottom: 0.75rem; }
.pb-4   { padding-bottom: 1rem; }
.pb-5   { padding-bottom: 1.25rem; }
.pb-6   { padding-bottom: 1.5rem; }
.pb-8   { padding-bottom: 2rem; }
.pb-10  { padding-bottom: 2.5rem; }
.pb-12  { padding-bottom: 3rem; }
.pb-16  { padding-bottom: 4rem; }

.pl-0   { padding-left: 0; }
.pl-1   { padding-left: 0.25rem; }
.pl-2   { padding-left: 0.5rem; }
.pl-3   { padding-left: 0.75rem; }
.pl-4   { padding-left: 1rem; }
.pl-5   { padding-left: 1.25rem; }
.pl-6   { padding-left: 1.5rem; }
.pl-8   { padding-left: 2rem; }
.pl-10  { padding-left: 2.5rem; }
.pl-12  { padding-left: 3rem; }

.pr-0   { padding-right: 0; }
.pr-1   { padding-right: 0.25rem; }
.pr-2   { padding-right: 0.5rem; }
.pr-3   { padding-right: 0.75rem; }
.pr-4   { padding-right: 1rem; }
.pr-5   { padding-right: 1.25rem; }
.pr-6   { padding-right: 1.5rem; }
.pr-8   { padding-right: 2rem; }
.pr-10  { padding-right: 2.5rem; }
.pr-12  { padding-right: 3rem; }

/* ============================================================
   8. Margin
   ============================================================ */
.m-0    { margin: 0; }
.m-1    { margin: 0.25rem; }
.m-2    { margin: 0.5rem; }
.m-4    { margin: 1rem; }
.m-6    { margin: 1.5rem; }
.m-8    { margin: 2rem; }
.m-auto { margin: auto; }

.mx-0   { margin-left: 0; margin-right: 0; }
.mx-1   { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2   { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-4   { margin-left: 1rem; margin-right: 1rem; }
.mx-6   { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-8   { margin-left: 2rem; margin-right: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0   { margin-top: 0; margin-bottom: 0; }
.my-1   { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2   { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-4   { margin-top: 1rem; margin-bottom: 1rem; }
.my-6   { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8   { margin-top: 2rem; margin-bottom: 2rem; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.mt-0   { margin-top: 0; }
.mt-1   { margin-top: 0.25rem; }
.mt-2   { margin-top: 0.5rem; }
.mt-3   { margin-top: 0.75rem; }
.mt-4   { margin-top: 1rem; }
.mt-5   { margin-top: 1.25rem; }
.mt-6   { margin-top: 1.5rem; }
.mt-7   { margin-top: 1.75rem; }
.mt-8   { margin-top: 2rem; }
.mt-10  { margin-top: 2.5rem; }
.mt-12  { margin-top: 3rem; }
.mt-14  { margin-top: 3.5rem; }
.mt-16  { margin-top: 4rem; }
.mt-20  { margin-top: 5rem; }
.mt-24  { margin-top: 6rem; }
.mt-auto { margin-top: auto; }

.mb-0   { margin-bottom: 0; }
.mb-1   { margin-bottom: 0.25rem; }
.mb-2   { margin-bottom: 0.5rem; }
.mb-3   { margin-bottom: 0.75rem; }
.mb-4   { margin-bottom: 1rem; }
.mb-5   { margin-bottom: 1.25rem; }
.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-20  { margin-bottom: 5rem; }
.mb-24  { margin-bottom: 6rem; }

.ml-0   { margin-left: 0; }
.ml-1   { margin-left: 0.25rem; }
.ml-2   { margin-left: 0.5rem; }
.ml-3   { margin-left: 0.75rem; }
.ml-4   { margin-left: 1rem; }
.ml-6   { margin-left: 1.5rem; }
.ml-8   { margin-left: 2rem; }
.ml-auto { margin-left: auto; }

.mr-0   { margin-right: 0; }
.mr-1   { margin-right: 0.25rem; }
.mr-2   { margin-right: 0.5rem; }
.mr-3   { margin-right: 0.75rem; }
.mr-4   { margin-right: 1rem; }
.mr-6   { margin-right: 1.5rem; }
.mr-8   { margin-right: 2rem; }
.mr-auto { margin-right: auto; }

/* ============================================================
   9. Sizing
   ============================================================ */
.w-auto  { width: auto; }
.w-full  { width: 100%; }
.w-screen { width: 100vw; }
.w-0     { width: 0; }
.w-1     { width: 0.25rem; }
.w-2     { width: 0.5rem; }
.w-3     { width: 0.75rem; }
.w-4     { width: 1rem; }
.w-5     { width: 1.25rem; }
.w-6     { width: 1.5rem; }
.w-8     { width: 2rem; }
.w-10    { width: 2.5rem; }
.w-12    { width: 3rem; }
.w-14    { width: 3.5rem; }
.w-16    { width: 4rem; }
.w-20    { width: 5rem; }
.w-24    { width: 6rem; }
.w-32    { width: 8rem; }
.w-40    { width: 10rem; }
.w-48    { width: 12rem; }
.w-56    { width: 14rem; }
.w-64    { width: 16rem; }
.w-72    { width: 18rem; }
.w-80    { width: 20rem; }
.w-1\/2  { width: 50%; }
.w-1\/3  { width: 33.333333%; }
.w-2\/3  { width: 66.666667%; }
.w-1\/4  { width: 25%; }
.w-3\/4  { width: 75%; }
.w-1\/5  { width: 20%; }
.w-2\/5  { width: 40%; }
.w-3\/5  { width: 60%; }
.w-4\/5  { width: 80%; }

.h-auto  { height: auto; }
.h-full  { height: 100%; }
.h-screen { height: 100vh; }
.h-0     { height: 0; }
.h-1     { height: 0.25rem; }
.h-2     { height: 0.5rem; }
.h-3     { height: 0.75rem; }
.h-4     { height: 1rem; }
.h-5     { height: 1.25rem; }
.h-6     { height: 1.5rem; }
.h-8     { height: 2rem; }
.h-10    { height: 2.5rem; }
.h-12    { height: 3rem; }
.h-14    { height: 3.5rem; }
.h-16    { height: 4rem; }
.h-20    { height: 5rem; }
.h-24    { height: 6rem; }
.h-32    { height: 8rem; }
.h-40    { height: 10rem; }
.h-48    { height: 12rem; }
.h-56    { height: 14rem; }
.h-64    { height: 16rem; }
.h-72    { height: 18rem; }
.h-80    { height: 20rem; }
.h-96    { height: 24rem; }

.min-h-0         { min-height: 0; }
.min-h-full      { min-height: 100%; }
.min-h-screen    { min-height: 100vh; }
.max-h-full      { max-height: 100%; }
.max-h-screen    { max-height: 100vh; }

.min-w-0         { min-width: 0; }
.min-w-full      { min-width: 100%; }
.max-w-none      { max-width: none; }
.max-w-xs        { max-width: 20rem; }
.max-w-sm        { max-width: 24rem; }
.max-w-md        { max-width: 28rem; }
.max-w-lg        { max-width: 32rem; }
.max-w-xl        { max-width: 36rem; }
.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-full      { max-width: 100%; }
.max-w-screen-sm { max-width: 640px; }
.max-w-screen-md { max-width: 768px; }
.max-w-screen-lg { max-width: 1024px; }
.max-w-screen-xl { max-width: 1280px; }

.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-video    { aspect-ratio: 16 / 9; }

/* ============================================================
   10. Typography
   ============================================================ */
.font-normal    { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-black     { font-weight: 900; }
.font-display   { font-family: var(--font-display); }
.font-body      { font-family: var(--font-body); }
.font-mono      { font-family: 'Courier New', Courier, monospace; }
.font-sans      { font-family: var(--font-body); }
.font-serif     { font-family: Georgia, serif; }

.text-xs        { font-size: 0.75rem;  line-height: 1rem; }
.text-sm        { font-size: 0.875rem; line-height: 1.25rem; }
.text-base      { font-size: 1rem;     line-height: 1.5rem; }
.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-6xl       { font-size: 3.75rem;  line-height: 1; }
.text-7xl       { font-size: 4.5rem;   line-height: 1; }
.text-8xl       { font-size: 6rem;     line-height: 1; }
.text-9xl       { font-size: 8rem;     line-height: 1; }

.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose   { line-height: 2; }

.tracking-tighter  { letter-spacing: -0.05em; }
.tracking-tight    { letter-spacing: -0.025em; }
.tracking-normal   { letter-spacing: 0; }
.tracking-wide     { letter-spacing: 0.025em; }
.tracking-wider    { letter-spacing: 0.05em; }
.tracking-widest   { letter-spacing: 0.1em; }

.uppercase       { text-transform: uppercase; }
.lowercase       { text-transform: lowercase; }
.capitalize      { text-transform: capitalize; }
.normal-case     { text-transform: none; }
.italic          { font-style: italic; }
.not-italic      { font-style: normal; }
.underline       { text-decoration-line: underline; }
.no-underline    { text-decoration: none; }
.line-through    { text-decoration-line: line-through; }
.decoration-1    { text-decoration-thickness: 1px; }
.underline-offset-4 { text-underline-offset: 4px; }

.text-left       { text-align: left; }
.text-center     { text-align: center; }
.text-right      { text-align: right; }
.text-justify    { text-align: justify; }

.truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-ellipsis   { text-overflow: ellipsis; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre  { white-space: pre; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words     { overflow-wrap: break-word; }
.break-all       { word-break: break-all; }

/* ============================================================
   11. Background Colors
   ============================================================ */
.bg-transparent          { background-color: transparent; }
.bg-white                { background-color: #ffffff; }
.bg-black                { background-color: #000000; }
.bg-\[\#F6F1EB\]         { background-color: #F6F1EB; }
.bg-\[\#EDE7DE\]         { background-color: #EDE7DE; }
.bg-\[\#1A1210\]         { background-color: #1A1210; }
.bg-\[\#8B1A2F\]         { background-color: #8B1A2F; }
.bg-\[\#7A6E68\]         { background-color: #7A6E68; }
.bg-\[\#F6F1EB\]\/10     { background-color: rgba(246,241,235,0.10); }
.bg-\[\#F6F1EB\]\/20     { background-color: rgba(246,241,235,0.20); }
.bg-\[\#F6F1EB\]\/30     { background-color: rgba(246,241,235,0.30); }
.bg-\[\#F6F1EB\]\/50     { background-color: rgba(246,241,235,0.50); }
.bg-\[\#F6F1EB\]\/80     { background-color: rgba(246,241,235,0.80); }
.bg-\[\#1A1210\]\/30     { background-color: rgba(26,18,16,0.30); }
.bg-\[\#1A1210\]\/50     { background-color: rgba(26,18,16,0.50); }
.bg-\[\#1A1210\]\/60     { background-color: rgba(26,18,16,0.60); }
.bg-\[\#1A1210\]\/70     { background-color: rgba(26,18,16,0.70); }
.bg-\[\#8B1A2F\]\/10     { background-color: rgba(139,26,47,0.10); }
.bg-\[\#8B1A2F\]\/20     { background-color: rgba(139,26,47,0.20); }
.bg-\[\#EDE7DE\]\/50     { background-color: rgba(237,231,222,0.50); }
.bg-\[\#EDE7DE\]\/80     { background-color: rgba(237,231,222,0.80); }

/* ============================================================
   12. Text Colors
   ============================================================ */
.text-white              { color: #ffffff; }
.text-black              { color: #000000; }
.text-\[\#F6F1EB\]       { color: #F6F1EB; }
.text-\[\#EDE7DE\]       { color: #EDE7DE; }
.text-\[\#1A1210\]       { color: #1A1210; }
.text-\[\#8B1A2F\]       { color: #8B1A2F; }
.text-\[\#7A6E68\]       { color: #7A6E68; }
.text-\[\#F6F1EB\]\/50   { color: rgba(246,241,235,0.50); }
.text-\[\#F6F1EB\]\/60   { color: rgba(246,241,235,0.60); }
.text-\[\#F6F1EB\]\/70   { color: rgba(246,241,235,0.70); }
.text-\[\#F6F1EB\]\/80   { color: rgba(246,241,235,0.80); }
.text-\[\#F6F1EB\]\/90   { color: rgba(246,241,235,0.90); }
.text-\[\#7A6E68\]\/70   { color: rgba(122,110,104,0.70); }
.text-\[\#1A1210\]\/70   { color: rgba(26,18,16,0.70); }

/* ============================================================
   13. Border
   ============================================================ */
.border-0   { border-width: 0; }
.border     { border-width: 1px; border-style: solid; border-color: currentColor; }
.border-2   { border-width: 2px; border-style: solid; }
.border-4   { border-width: 4px; border-style: solid; }
.border-t   { border-top-width: 1px; border-top-style: solid; border-color: currentColor; }
.border-b   { border-bottom-width: 1px; border-bottom-style: solid; border-color: currentColor; }
.border-l   { border-left-width: 1px; border-left-style: solid; border-color: currentColor; }
.border-r   { border-right-width: 1px; border-right-style: solid; border-color: currentColor; }
.border-x   { border-left-width: 1px; border-left-style: solid; border-right-width: 1px; border-right-style: solid; border-color: currentColor; }
.border-y   { border-top-width: 1px; border-top-style: solid; border-bottom-width: 1px; border-bottom-style: solid; border-color: currentColor; }

.border-\[\#F6F1EB\]       { border-color: #F6F1EB; }
.border-\[\#EDE7DE\]       { border-color: #EDE7DE; }
.border-\[\#1A1210\]       { border-color: #1A1210; }
.border-\[\#8B1A2F\]       { border-color: #8B1A2F; }
.border-\[\#7A6E68\]       { border-color: #7A6E68; }
.border-\[\#F6F1EB\]\/10   { border-color: rgba(246,241,235,0.10); }
.border-\[\#F6F1EB\]\/20   { border-color: rgba(246,241,235,0.20); }
.border-\[\#F6F1EB\]\/30   { border-color: rgba(246,241,235,0.30); }
.border-\[\#F6F1EB\]\/40   { border-color: rgba(246,241,235,0.40); }
.border-\[\#7A6E68\]\/10   { border-color: rgba(122,110,104,0.10); }
.border-\[\#7A6E68\]\/20   { border-color: rgba(122,110,104,0.20); }
.border-\[\#7A6E68\]\/30   { border-color: rgba(122,110,104,0.30); }
.border-\[\#7A6E68\]\/40   { border-color: rgba(122,110,104,0.40); }
.border-\[\#7A6E68\]\/50   { border-color: rgba(122,110,104,0.50); }
.border-\[\#8B1A2F\]\/20   { border-color: rgba(139,26,47,0.20); }
.border-\[\#8B1A2F\]\/40   { border-color: rgba(139,26,47,0.40); }
.border-\[\#1A1210\]\/10   { border-color: rgba(26,18,16,0.10); }
.border-\[\#1A1210\]\/20   { border-color: rgba(26,18,16,0.20); }
.border-transparent        { border-color: transparent; }

.divide-y > * + * { border-top-width: 1px; border-top-style: solid; }
.divide-\[\#7A6E68\]\/20 > * + * { border-color: rgba(122,110,104,0.20); }

/* ============================================================
   14. Border Radius
   ============================================================ */
.rounded-none   { border-radius: 0; }
.rounded-sm     { border-radius: 2px; }
.rounded        { border-radius: 4px; }
.rounded-md     { border-radius: 6px; }
.rounded-lg     { border-radius: 8px; }
.rounded-xl     { border-radius: 12px; }
.rounded-2xl    { border-radius: 16px; }
.rounded-3xl    { border-radius: 24px; }
.rounded-full   { border-radius: 9999px; }
.rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
.rounded-b-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* ============================================================
   15. Shadow
   ============================================================ */
.shadow-none  { box-shadow: none; }
.shadow-sm    { box-shadow: 0 1px 2px rgba(26,18,16,0.08); }
.shadow       { box-shadow: 0 2px 8px rgba(26,18,16,0.10); }
.shadow-md    { box-shadow: 0 4px 16px rgba(26,18,16,0.12); }
.shadow-lg    { box-shadow: 0 8px 32px rgba(26,18,16,0.14); }
.shadow-xl    { box-shadow: 0 16px 48px rgba(26,18,16,0.16); }
.shadow-2xl   { box-shadow: 0 25px 60px rgba(26,18,16,0.20); }

/* ============================================================
   16. Opacity
   ============================================================ */
.opacity-0    { opacity: 0; }
.opacity-10   { opacity: 0.10; }
.opacity-20   { opacity: 0.20; }
.opacity-25   { opacity: 0.25; }
.opacity-30   { opacity: 0.30; }
.opacity-40   { opacity: 0.40; }
.opacity-50   { opacity: 0.50; }
.opacity-60   { opacity: 0.60; }
.opacity-70   { opacity: 0.70; }
.opacity-75   { opacity: 0.75; }
.opacity-80   { opacity: 0.80; }
.opacity-90   { opacity: 0.90; }
.opacity-95   { opacity: 0.95; }
.opacity-100  { opacity: 1; }

/* ============================================================
   17. Object Fit & Position
   ============================================================ */
.object-contain  { object-fit: contain; }
.object-cover    { object-fit: cover; }
.object-fill     { object-fit: fill; }
.object-none     { object-fit: none; }
.object-center   { object-position: center; }
.object-top      { object-position: top; }
.object-bottom   { object-position: bottom; }

/* ============================================================
   18. Transform
   ============================================================ */
.transform       { transform: var(--tw-transform, none); }
.transform-none  { transform: none; }

.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.translate-x-0   { transform: translateX(0); }
.translate-y-0   { transform: translateY(0); }
.-translate-x-full { transform: translateX(-100%); }
.translate-x-full  { transform: translateX(100%); }

.rotate-0        { transform: rotate(0deg); }
.rotate-45       { transform: rotate(45deg); }
.rotate-90       { transform: rotate(90deg); }
.rotate-180      { transform: rotate(180deg); }
.-rotate-45      { transform: rotate(-45deg); }
.-rotate-90      { transform: rotate(-90deg); }
.-rotate-180     { transform: rotate(-180deg); }

.scale-95        { transform: scale(0.95); }
.scale-100       { transform: scale(1); }
.scale-105       { transform: scale(1.05); }
.scale-110       { transform: scale(1.10); }

/* ============================================================
   19. Transition
   ============================================================ */
.transition         { transition-property: color, background-color, border-color, opacity, box-shadow, transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }
.transition-all     { transition-property: all; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }
.transition-colors  { transition-property: color, background-color, border-color, text-decoration-color; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }
.transition-opacity { transition-property: opacity; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }
.transition-transform { transition-property: transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }

.duration-75    { transition-duration: 75ms; }
.duration-100   { transition-duration: 100ms; }
.duration-150   { transition-duration: 150ms; }
.duration-200   { transition-duration: 200ms; }
.duration-300   { transition-duration: 300ms; }
.duration-500   { transition-duration: 500ms; }
.duration-700   { transition-duration: 700ms; }
.duration-1000  { transition-duration: 1000ms; }

.ease-linear    { transition-timing-function: linear; }
.ease-in        { transition-timing-function: cubic-bezier(0.4,0,1,1); }
.ease-out       { transition-timing-function: cubic-bezier(0,0,0.2,1); }
.ease-in-out    { transition-timing-function: cubic-bezier(0.4,0,0.2,1); }

/* ============================================================
   20. Backdrop / Filter
   ============================================================ */
.backdrop-blur-none  { backdrop-filter: none; }
.backdrop-blur-sm    { backdrop-filter: blur(4px); }
.backdrop-blur-md    { backdrop-filter: blur(12px); }
.backdrop-blur       { backdrop-filter: blur(8px); }
.backdrop-blur-lg    { backdrop-filter: blur(16px); }
.backdrop-blur-xl    { backdrop-filter: blur(24px); }
.backdrop-blur-2xl   { backdrop-filter: blur(40px); }
.backdrop-blur-3xl   { backdrop-filter: blur(64px); }

.blur-sm   { filter: blur(4px); }
.blur      { filter: blur(8px); }
.blur-md   { filter: blur(12px); }
.blur-lg   { filter: blur(16px); }

/* ============================================================
   21. Cursor / Pointer
   ============================================================ */
.cursor-auto    { cursor: auto; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-wait    { cursor: wait; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.select-none    { user-select: none; }
.select-text    { user-select: text; }
.select-all     { user-select: all; }

/* ============================================================
   22. Outline / Ring
   ============================================================ */
.outline-none   { outline: none; }
.ring-0         { box-shadow: 0 0 0 0 rgba(139,26,47,0); }
.ring-1         { box-shadow: 0 0 0 1px rgba(139,26,47,0.5); }
.ring-2         { box-shadow: 0 0 0 2px rgba(139,26,47,0.5); }

/* ============================================================
   23. Hover states
   ============================================================ */
.hover\:text-\[\#8B1A2F\]:hover { color: #8B1A2F; }
.hover\:text-\[\#F6F1EB\]:hover { color: #F6F1EB; }
.hover\:text-\[\#1A1210\]:hover { color: #1A1210; }
.hover\:text-\[\#EDE7DE\]:hover { color: #EDE7DE; }
.hover\:bg-\[\#8B1A2F\]:hover   { background-color: #8B1A2F; }
.hover\:bg-\[\#1A1210\]:hover   { background-color: #1A1210; }
.hover\:bg-\[\#EDE7DE\]:hover   { background-color: #EDE7DE; }
.hover\:bg-\[\#F6F1EB\]\/10:hover { background-color: rgba(246,241,235,0.10); }
.hover\:border-\[\#8B1A2F\]:hover { border-color: #8B1A2F; }
.hover\:border-\[\#1A1210\]:hover { border-color: #1A1210; }
.hover\:opacity-80:hover  { opacity: 0.80; }
.hover\:opacity-90:hover  { opacity: 0.90; }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:shadow-md:hover   { box-shadow: 0 4px 16px rgba(26,18,16,0.12); }
.hover\:shadow-lg:hover   { box-shadow: 0 8px 32px rgba(26,18,16,0.14); }
.hover\:scale-105:hover   { transform: scale(1.05); }
.hover\:underline:hover   { text-decoration: underline; }
.hover\:translate-y-\[-2px\]:hover { transform: translateY(-2px); }

/* ============================================================
   24. Focus states
   ============================================================ */
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus       { box-shadow: 0 0 0 2px rgba(139,26,47,0.4); }
.focus\:border-\[\#8B1A2F\]:focus { border-color: #8B1A2F; }
.focus\:border-\[\#1A1210\]:focus { border-color: #1A1210; }
.focus\:bg-\[\#F6F1EB\]:focus     { background-color: #F6F1EB; }

/* ============================================================
   25. Group / Group-hover
   ============================================================ */
.group { }
.group:hover .group-hover\:text-\[\#8B1A2F\] { color: #8B1A2F; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:translate-y-\[-2px\] { transform: translateY(-2px); }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }

/* ============================================================
   26. Arbitrary value classes
   ============================================================ */
.min-h-\[50vh\]    { min-height: 50vh; }
.min-h-\[60vh\]    { min-height: 60vh; }
.min-h-\[70vh\]    { min-height: 70vh; }
.min-h-\[80vh\]    { min-height: 80vh; }
.min-h-\[85vh\]    { min-height: 85vh; }
.min-h-\[90vh\]    { min-height: 90vh; }
.min-h-\[320px\]   { min-height: 320px; }
.min-h-\[400px\]   { min-height: 400px; }
.min-h-\[500px\]   { min-height: 500px; }
.h-\[300px\]       { height: 300px; }
.h-\[400px\]       { height: 400px; }
.h-\[500px\]       { height: 500px; }
.h-\[600px\]       { height: 600px; }
.w-\[calc\(100\%-1\.5rem\)\] { width: calc(100% - 1.5rem); }
.w-\[1px\]         { width: 1px; }
.max-w-\[1220px\]  { max-width: 1220px; }
.max-w-\[900px\]   { max-width: 900px; }
.max-w-\[720px\]   { max-width: 720px; }
.max-w-\[600px\]   { max-width: 600px; }
.max-w-\[480px\]   { max-width: 480px; }
.max-w-\[360px\]   { max-width: 360px; }
.text-\[10px\]     { font-size: 10px; }
.text-\[11px\]     { font-size: 11px; }
.text-\[12px\]     { font-size: 12px; }
.text-\[13px\]     { font-size: 13px; }
.text-\[14px\]     { font-size: 14px; }
.text-\[15px\]     { font-size: 15px; }
.leading-\[1\.0\]  { line-height: 1.0; }
.leading-\[1\.05\] { line-height: 1.05; }
.leading-\[1\.1\]  { line-height: 1.1; }
.leading-\[1\.15\] { line-height: 1.15; }
.leading-\[1\.2\]  { line-height: 1.2; }
.leading-\[1\.3\]  { line-height: 1.3; }
.leading-\[1\.4\]  { line-height: 1.4; }
.leading-\[1\.7\]  { line-height: 1.7; }
.aspect-\[4\/3\]   { aspect-ratio: 4 / 3; }
.aspect-\[16\/9\]  { aspect-ratio: 16 / 9; }
.aspect-\[21\/9\]  { aspect-ratio: 21 / 9; }
.aspect-\[3\/2\]   { aspect-ratio: 3 / 2; }
.aspect-\[2\/3\]   { aspect-ratio: 2 / 3; }
.py-\[3px\]        { padding-top: 3px; padding-bottom: 3px; }
.py-2\.5           { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.px-2\.5           { padding-left: 0.625rem; padding-right: 0.625rem; }
.gap-2\.5          { gap: 0.625rem; }
.top-\[50\%\]      { top: 50%; }
.left-\[50\%\]     { left: 50%; }
.-translate-x-\[50\%\] { transform: translateX(-50%); }
.-translate-y-\[50\%\] { transform: translateY(-50%); }
.translate-x-\[-50\%\] { transform: translateX(-50%); }
.translate-y-\[-50\%\] { transform: translateY(-50%); }
.border-\[1px\]    { border-width: 1px; border-style: solid; }
.border-\[2px\]    { border-width: 2px; border-style: solid; }
.rotate-\[-90deg\] { transform: rotate(-90deg); }
.rotate-\[90deg\]  { transform: rotate(90deg); }
.rotate-\[-180deg\] { transform: rotate(-180deg); }
.w-\[2px\]         { width: 2px; }
.h-\[2px\]         { height: 2px; }
.w-\[3px\]         { width: 3px; }
.h-\[3px\]         { height: 3px; }

/* ============================================================
   27. Container
   ============================================================ */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

/* ============================================================
   28. Responsive — md: breakpoint (min-width: 768px)
   ============================================================ */
@media (min-width: 768px) {
  .md\:block            { display: block; }
  .md\:inline-block     { display: inline-block; }
  .md\:inline           { display: inline; }
  .md\:flex             { display: flex; }
  .md\:inline-flex      { display: inline-flex; }
  .md\:grid             { display: grid; }
  .md\:hidden           { display: none; }
  .md\:flex-row         { flex-direction: row; }
  .md\:flex-col         { flex-direction: column; }
  .md\:flex-wrap        { flex-wrap: wrap; }
  .md\:flex-nowrap      { flex-wrap: nowrap; }
  .md\:items-start      { align-items: flex-start; }
  .md\:items-center     { align-items: center; }
  .md\:items-end        { align-items: flex-end; }
  .md\:items-stretch    { align-items: stretch; }
  .md\:justify-start    { justify-content: flex-start; }
  .md\:justify-center   { justify-content: center; }
  .md\:justify-end      { justify-content: flex-end; }
  .md\:justify-between  { justify-content: space-between; }
  .md\:grid-cols-1      { grid-template-columns: repeat(1, 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\:grid-cols-4      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-1       { grid-column: span 1 / span 1; }
  .md\:col-span-2       { grid-column: span 2 / span 2; }
  .md\:col-span-3       { grid-column: span 3 / span 3; }
  .md\:gap-4            { gap: 1rem; }
  .md\:gap-6            { gap: 1.5rem; }
  .md\:gap-8            { gap: 2rem; }
  .md\:gap-10           { gap: 2.5rem; }
  .md\:gap-12           { gap: 3rem; }
  .md\:gap-16           { gap: 4rem; }
  .md\:mt-0             { margin-top: 0; }
  .md\:mt-6             { margin-top: 1.5rem; }
  .md\:mt-8             { margin-top: 2rem; }
  .md\:mt-12            { margin-top: 3rem; }
  .md\:mb-0             { margin-bottom: 0; }
  .md\:mb-12            { margin-bottom: 3rem; }
  .md\:mr-auto          { margin-right: auto; }
  .md\:px-6             { padding-left: 1.5rem; padding-right: 1.5rem; }
  .md\:px-8             { padding-left: 2rem; padding-right: 2rem; }
  .md\:px-10            { padding-left: 2.5rem; padding-right: 2.5rem; }
  .md\:px-12            { padding-left: 3rem; padding-right: 3rem; }
  .md\:py-8             { padding-top: 2rem; padding-bottom: 2rem; }
  .md\:py-10            { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .md\:py-12            { padding-top: 3rem; padding-bottom: 3rem; }
  .md\:py-16            { padding-top: 4rem; padding-bottom: 4rem; }
  .md\:py-20            { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:py-24            { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:pt-16            { padding-top: 4rem; }
  .md\:pt-20            { padding-top: 5rem; }
  .md\:pt-24            { padding-top: 6rem; }
  .md\:pb-16            { padding-bottom: 4rem; }
  .md\:pb-20            { padding-bottom: 5rem; }
  .md\:pb-24            { padding-bottom: 6rem; }
  .md\:pl-8             { padding-left: 2rem; }
  .md\:pl-12            { padding-left: 3rem; }
  .md\:pl-16            { padding-left: 4rem; }
  .md\:pr-8             { padding-right: 2rem; }
  .md\:p-8              { padding: 2rem; }
  .md\:p-10             { padding: 2.5rem; }
  .md\:p-12             { padding: 3rem; }
  .md\:text-sm          { font-size: 0.875rem; line-height: 1.25rem; }
  .md\:text-base        { font-size: 1rem; line-height: 1.5rem; }
  .md\:text-lg          { font-size: 1.125rem; line-height: 1.75rem; }
  .md\:text-xl          { font-size: 1.25rem; line-height: 1.75rem; }
  .md\:text-2xl         { font-size: 1.5rem; line-height: 2rem; }
  .md\:text-3xl         { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-4xl         { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl         { font-size: 3rem; line-height: 1; }
  .md\:text-6xl         { font-size: 3.75rem; line-height: 1; }
  .md\:text-7xl         { font-size: 4.5rem; line-height: 1; }
  .md\:text-8xl         { font-size: 6rem; line-height: 1; }
  .md\:w-1\/2           { width: 50%; }
  .md\:w-1\/3           { width: 33.333333%; }
  .md\:w-2\/3           { width: 66.666667%; }
  .md\:w-3\/4           { width: 75%; }
  .md\:w-auto           { width: auto; }
  .md\:w-full           { width: 100%; }
  .md\:h-full           { height: 100%; }
  .md\:max-w-none       { max-width: none; }
  .md\:max-w-xl         { max-width: 36rem; }
  .md\:max-w-2xl        { max-width: 42rem; }
  .md\:max-w-3xl        { max-width: 48rem; }
  .md\:max-w-4xl        { max-width: 56rem; }
  .md\:max-w-5xl        { max-width: 64rem; }
  .md\:max-w-6xl        { max-width: 72rem; }
  .md\:max-w-7xl        { max-width: 80rem; }
  .md\:min-h-\[600px\]  { min-height: 600px; }
  .md\:min-h-\[700px\]  { min-height: 700px; }
  .md\:aspect-\[21\/9\] { aspect-ratio: 21 / 9; }
  .md\:aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
  .md\:border-r         { border-right-width: 1px; border-right-style: solid; }
  .md\:border-l         { border-left-width: 1px; border-left-style: solid; }
  .md\:border-b-0       { border-bottom-width: 0; }
  .md\:border-t-0       { border-top-width: 0; }
  .md\:self-start       { align-self: flex-start; }
  .md\:self-center      { align-self: center; }
  .md\:order-1          { order: 1; }
  .md\:order-2          { order: 2; }
  .md\:sticky           { position: sticky; }
  .md\:top-8            { top: 2rem; }
  .md\:inline           { display: inline; }
  .md\:inline-block     { display: inline-block; }
}

/* ============================================================
   29. Responsive — lg: breakpoint (min-width: 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .lg\:block            { display: block; }
  .lg\:flex             { display: flex; }
  .lg\:hidden           { display: none; }
  .lg\:grid-cols-2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:col-span-2       { grid-column: span 2 / span 2; }
  .lg\:col-span-3       { grid-column: span 3 / span 3; }
  .lg\:gap-8            { gap: 2rem; }
  .lg\:gap-12           { gap: 3rem; }
  .lg\:gap-16           { gap: 4rem; }
  .lg\:px-8             { padding-left: 2rem; padding-right: 2rem; }
  .lg\:px-12            { padding-left: 3rem; padding-right: 3rem; }
  .lg\:py-16            { padding-top: 4rem; padding-bottom: 4rem; }
  .lg\:py-20            { padding-top: 5rem; padding-bottom: 5rem; }
  .lg\:py-24            { padding-top: 6rem; padding-bottom: 6rem; }
  .lg\:py-32            { padding-top: 8rem; padding-bottom: 8rem; }
  .lg\:text-4xl         { font-size: 2.25rem; line-height: 2.5rem; }
  .lg\:text-5xl         { font-size: 3rem; line-height: 1; }
  .lg\:text-6xl         { font-size: 3.75rem; line-height: 1; }
  .lg\:text-7xl         { font-size: 4.5rem; line-height: 1; }
  .lg\:text-8xl         { font-size: 6rem; line-height: 1; }
  .lg\:w-1\/2           { width: 50%; }
  .lg\:w-2\/3           { width: 66.666667%; }
  .lg\:w-3\/5           { width: 60%; }
  .lg\:w-2\/5           { width: 40%; }
  .lg\:max-w-4xl        { max-width: 56rem; }
  .lg\:max-w-5xl        { max-width: 64rem; }
  .lg\:max-w-6xl        { max-width: 72rem; }
  .lg\:max-w-7xl        { max-width: 80rem; }
  .lg\:flex-row         { flex-direction: row; }
  .lg\:items-center     { align-items: center; }
  .lg\:justify-between  { justify-content: space-between; }
  .lg\:min-h-\[85vh\]   { min-height: 85vh; }
  .lg\:aspect-\[21\/9\] { aspect-ratio: 21 / 9; }
}

/* ============================================================
   30. Responsive — sm: breakpoint (min-width: 640px)
   ============================================================ */
@media (min-width: 640px) {
  .sm\:grid-cols-2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:flex-row         { flex-direction: row; }
  .sm\:px-6             { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:text-lg          { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-xl          { font-size: 1.25rem; line-height: 1.75rem; }
}

/* ============================================================
   31. Animations
   ============================================================ */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.animate-marquee {
  animation: marquee 38s linear infinite;
  display: flex;
  width: max-content;
}
.animate-fade-in    { animation: fadeIn 0.5s ease-out forwards; }
.animate-slide-in   { animation: slideIn 0.4s ease-out forwards; }
.animate-spin       { animation: spin 1s linear infinite; }
.animate-pulse      { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.paused             { animation-play-state: paused; }

/* ============================================================
   32. Misc / Utility
   ============================================================ */
.list-none          { list-style-type: none; }
.list-disc          { list-style-type: disc; }
.list-decimal       { list-style-type: decimal; }
.appearance-none    { appearance: none; }
.resize-none        { resize: none; }
.resize-y           { resize: vertical; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
.not-sr-only        { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
.visible            { visibility: visible; }
.invisible          { visibility: hidden; }
.isolate            { isolation: isolate; }
.float-none         { float: none; }
.clear-both         { clear: both; }
.table-auto         { table-layout: auto; }
.w-max              { width: max-content; }
.h-max              { height: max-content; }
.min-w-max          { min-width: max-content; }
.max-h-0            { max-height: 0; }
.max-h-96           { max-height: 24rem; }
.max-h-\[400px\]    { max-height: 400px; }
.line-clamp-1       { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.line-clamp-2       { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.line-clamp-3       { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.text-balance       { text-wrap: balance; }
.text-pretty        { text-wrap: pretty; }
.col-start-1        { grid-column-start: 1; }
.col-start-2        { grid-column-start: 2; }
.col-end-2          { grid-column-end: 2; }
.col-end-3          { grid-column-end: 3; }
.col-end-4          { grid-column-end: 4; }
.row-start-1        { grid-row-start: 1; }
.row-start-2        { grid-row-start: 2; }
.place-items-center { place-items: center; }
.place-content-center { place-content: center; }

/* ============================================================
   33. Documentary / Archive specific components
   ============================================================ */
.archive-label {
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #7A6E68;
}
.section-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8B1A2F;
}
.hairline-border-t { border-top: 1px solid rgba(122,110,104,0.20); }
.hairline-border-b { border-bottom: 1px solid rgba(122,110,104,0.20); }
.rotated-label {
  transform: rotate(-90deg);
  transform-origin: left bottom;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}
.caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0.75rem;
  background: rgba(26,18,16,0.65);
  font-size: 11px;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.04em;
  color: rgba(246,241,235,0.85);
}
.entry-meta {
  font-size: 10px;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7A6E68;
  border-bottom: 1px solid rgba(122,110,104,0.20);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}
.field-note {
  border-left: 2px solid #8B1A2F;
  padding-left: 1rem;
  color: #7A6E68;
  font-size: 0.875rem;
  line-height: 1.625;
}
.stat-block {
  border-right: 1px solid rgba(122,110,104,0.20);
  padding: 2rem 2.5rem;
}
.stat-block:last-child { border-right: none; }

/* ============================================================
   34. Form elements
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #F6F1EB;
  border: 1px solid rgba(122,110,104,0.30);
  color: #1A1210;
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  transition: border-color 150ms ease;
  outline: none;
  width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: #8B1A2F;
}
input::placeholder,
textarea::placeholder {
  color: rgba(122,110,104,0.60);
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237A6E68' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

/* ============================================================
   35. Accordion
   ============================================================ */
.accordion-content { display: none; }
.accordion-content.open { display: block; }
.accordion-icon { transition: transform 200ms ease; }
.accordion-open .accordion-icon { transform: rotate(45deg); }

/* ============================================================
   36. Print
   ============================================================ */
@media print {
  .no-print { display: none !important; }
  body { background: white; color: black; }
}