/* The Drawing Room — self-hosted stylesheet
   Replaces the runtime Tailwind Play CDN. No external JS required.
   Breakpoint: md = 768px */

/* ---------- Reset / preflight ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid rgba(255,255,255,.1); }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; }
body { min-height: 100vh; line-height: inherit; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; margin: 0; }
button { background: none; cursor: pointer; }
a { color: inherit; text-decoration: inherit; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
ul { list-style: none; padding: 0; }

/* ---------- Design tokens ---------- */
:root {
  --ink: #0b1320;
  --brass: #b08d57;
  --parchment: #f5f1ea;
  --moss: #1f3d2b;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-900: #171717;
  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
}

/* ---------- Typography ---------- */
.font-display { font-family: var(--font-display); }
.font-sans    { font-family: var(--font-sans); }
.font-medium  { font-weight: 500; }
.antialiased  { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.text-sm   { font-size: .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; }

.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.text-center     { text-align: center; }
.underline       { text-decoration-line: underline; }
.decoration-brass\/40 { text-decoration-color: rgba(176,141,87,.4); }

/* ---------- Colour ---------- */
.text-white          { color: #fff; }
.text-ink            { color: var(--ink); }
.text-brass          { color: var(--brass); }
.text-neutral-200    { color: var(--neutral-200); }
.text-neutral-300    { color: var(--neutral-300); }
.text-neutral-400    { color: var(--neutral-400); }
.text-neutral-200\/90{ color: rgba(229,229,229,.9); }

.bg-ink         { background-color: var(--ink); }
.bg-brass       { background-color: var(--brass); }
.bg-neutral-900 { background-color: var(--neutral-900); }
.bg-white\/\[0\.02\] { background-color: rgba(255,255,255,.02); }

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

.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.top-0    { top: 0; }
.z-30     { z-index: 30; }

.mx-auto     { margin-left: auto; margin-right: auto; }
.min-h-screen{ min-height: 100vh; }
.w-full      { width: 100%; }
.h-auto      { height: auto; }
.h-32        { height: 8rem; }

.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; }

/* ---------- Spacing ---------- */
.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; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-16{ padding-top: 4rem; padding-bottom: 4rem; }
.py-20{ padding-top: 5rem; padding-bottom: 5rem; }
.pt-4 { padding-top: 1rem; }
.pt-12{ padding-top: 3rem; }

.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.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; }
.mb-10{ margin-bottom: 2.5rem; }

.gap-2  { gap: .5rem; }
.gap-3  { gap: .75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

.space-y-4 > * + * { margin-top: 1rem; }

/* ---------- Borders, radius, shadow ---------- */
.border            { border-width: 1px; }
.border-t          { border-top-width: 1px; }
.border-white\/10  { border-color: rgba(255,255,255,.1); }
.border-brass\/30  { border-color: rgba(176,141,87,.3); }
.border-brass\/60  { border-color: rgba(176,141,87,.6); }

.rounded-xl   { border-radius: .75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-3xl  { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }

/* ---------- Effects & interaction ---------- */
.backdrop-blur { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .supports-\[backdrop-filter\]\:bg-ink\/70 { background-color: rgba(11,19,32,.7); }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .supports-\[backdrop-filter\]\:bg-ink\/70 { background-color: var(--ink); }
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color,
                       fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: 150ms;
}

.hover\:text-brass:hover   { color: var(--brass); }
.hover\:text-ink:hover     { color: var(--ink); }
.hover\:bg-brass:hover     { background-color: var(--brass); }
.hover\:opacity-90:hover   { opacity: .9; }

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

::placeholder { color: var(--neutral-400); opacity: 1; }

/* ---------- md: breakpoint (768px and up) ---------- */
@media (min-width: 768px) {
  .md\:flex        { display: flex; }
  .md\:inline-flex { display: inline-flex; }
  .md\:hidden      { display: none; }

  .md\:flex-row     { flex-direction: row; }
  .md\:items-center { align-items: center; }

  .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\:col-span-2  { grid-column: span 2 / span 2; }

  .md\:gap-10 { gap: 2.5rem; }
  .md\:gap-16 { gap: 4rem; }

  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
  .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .md\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .md\:mt-16 { margin-top: 4rem; }

  .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-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-\[11rem\] { font-size: 11rem; line-height: 1; }
}

/* ---------- Page furniture (was inline per-page) ---------- */
.paper {
  background:
    radial-gradient(100% 100% at 50% 0%, rgba(176,141,87,.06) 0%, rgba(11,19,32,.03) 100%),
    var(--ink);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .transition { transition-duration: 0.01ms; }
}

.card { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); }
.img-frame { height: 18rem; }
@media (min-width: 768px) { .img-frame { height: 20rem; } }

/* Mobile navigation drawer */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ink);
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav-links.open { display: flex; }
  .nav-links a { color: #fff; }
  .nav-links a:hover { color: var(--brass); }
}