@source "../src";




/*
 * Design system definition.
 *
 * The @theme inline block maps CSS custom properties to Tailwind utility
 * classes (e.g. --color-primary -> bg-primary, text-primary).
 *
 * The :root and .dark blocks define the actual color values using oklch.
 * All colors MUST use oklch format.
 *
 * To add a new semantic color:
 * 1. Add the variable to :root (light value) and .dark (dark value)
 * 2. Register it in @theme inline as --color-<name>: var(--<name>)
 */



 :root {
  --radius: 0.25rem;
  --background: oklch(0 0 0);
  --foreground: oklch(0.81 0.018 80);
  --card: oklch(0.12 0.012 305);
  --card-foreground: var(--foreground);
  --popover: oklch(0.13 0.01 305);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.77 0.09 78);
  --primary-foreground: oklch(0.13 0.012 78);
  --secondary: oklch(0.19 0.075 305);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.15 0.008 305);
  --muted-foreground: oklch(0.62 0.023 78);
  --accent: oklch(0.23 0.09 305);
  --accent-foreground: var(--primary);
  --destructive: oklch(0.72 0.12 25);
  --destructive-foreground: var(--background);
  --border: oklch(0.77 0.09 78 / 0.2);
  --input: oklch(0.77 0.09 78 / 0.3);
  --ring: var(--primary);
  --gold-light: oklch(0.86 0.075 82);
  --gold-dark: oklch(0.64 0.088 75);
  --gold-gradient: linear-gradient(115deg, var(--gold-dark), var(--gold-light), var(--primary));
  --font-sans: 'Playfair Display', Georgia, serif;
}
@layer base {
  * { border-color: var(--border); box-sizing: border-box; }
  body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 20px; -webkit-font-smoothing: antialiased; }
  h1,h2,h3,p { margin: 0; }
  h1,h2,h3 { font-weight: 400; color: var(--primary); }
  a { text-decoration: none; }
  button,input { font-family: inherit; }
  ::selection { background: var(--secondary); color: var(--gold-light); }
}
.house-header { height: 108px; padding: 0 5.5%; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--border); }
.nav-brand { display: block; height: 92px; width: 110px; }
.nav-brand img { width: 100%; height: 100%; object-fit: cover; }
.house-nav { display: flex; align-items: center; gap: 36px; font-size: 15px; }
.house-nav > a { color: var(--foreground); transition: color 500ms; }
.house-nav > a:hover,.house-nav > a[data-status=active] { color: var(--primary); }
.button-gold { background: var(--gold-gradient); color: var(--primary-foreground); border: 1px solid var(--primary); border-radius: 0; box-shadow: none; transition: filter 600ms, transform 600ms; }
.button-gold:hover { filter: brightness(1.13); transform: translateY(-2px); }
.viewing-link { height: 60px; padding: 0 30px; font-size: 17px; gap: 24px; font-weight: 500; }
.viewing-link.compact { height: 43px; padding: 0 22px; font-size: 13px; gap: 20px; }
.menu-toggle { display: none; color: var(--primary); }
.home-hero { position: relative; text-align: center; padding: 30px 24px 68px; }
.hero-logo { width: 440px; height: 373px; object-fit: cover; object-position: center; margin: 0 auto 34px; }
.hero-title { font-size: 62px; line-height: 1.14; letter-spacing: -0.005em; }
.hero-title span { display: block; margin-top: 28px; font-size: 40px; font-style: italic; color: var(--gold-light); letter-spacing: 0.02em; line-height: 1.4; }
.hero-description { max-width: 710px; margin: 25px auto 30px; font-size: 18px; line-height: 1.8; }
.admission { margin-top: 15px; font-style: italic; font-size: 13px; color: var(--muted-foreground); }
.hero-end { width: 1px; height: 52px; background: var(--border); margin: 38px auto 0; }
.house-section { padding: 160px 8%; border-top: 2px solid var(--border); }
.section-inner { max-width: 1130px; margin: auto; }
.section-label { display: flex; align-items: center; gap: 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0; color: var(--muted-foreground); margin-bottom: 42px; }
.label-line { width: 34px; height: 1px; background: var(--primary); opacity: 0.5; }
.house-section h2 { font-size: 52px; line-height: 1.22; margin-bottom: 32px; }
.house-section p { line-height: 1.9; font-size: 21px; }
.house-section p + p { margin-top: 24px; }
.section-copy { max-width: 760px; }
.section-eyebrow { font-size: 15px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--primary); margin-bottom: 22px; }
.house-section strong { color: var(--gold-light); font-weight: 500; }
.split-section { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: start; }
.split-section .section-label { margin-bottom: 0; }
.purple-section { background: var(--secondary); }
.idea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 90px; }
.idea-grid article { border-top: 2px solid var(--border); padding-top: 28px; }
.idea-grid h3 { font-size: 29px; margin-bottom: 16px; }
.idea-grid p { font-size: 19px; }
.ownership-list { list-style: none; padding: 0; margin: 0 0 45px; }
.ownership-list li { display: flex; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--border); line-height: 1.8; }
.ownership-list li::before { content: '◇'; color: var(--primary); }
.statement { color: var(--gold-light); font-style: italic; font-size: 27px !important; }
.viewing-section { text-align: center; }
.viewing-section .section-label { justify-content: center; }
.viewing-section .section-copy { margin: auto; }
.viewing-section .viewing-link { margin-top: 40px; }
.closing { text-align: center; }
.closing h2 { font-size: 54px; }
.closing .closing-tagline { margin-top: 16px; font-style: italic; font-size: 27px; color: var(--gold-light); letter-spacing: 0.01em; }
.closing p { font-size: 17px; color: var(--muted-foreground); }
.closing .closing-intro { font-size: 21px; line-height: 1.9; max-width: 760px; margin: 0 auto 64px; }
.closing h2 + h2 { margin-top: 64px; }
.faq-accordion { margin: 48px 0; }
.faq-statement { margin-top: 24px; color: var(--gold-light); font-weight: 500; }
.house-footer { border-top: 2px solid var(--border); padding: 60px 5.5% 35px; }
.footer-main { display: flex; justify-content: space-between; align-items: center; padding-bottom: 40px; }
.footer-brand { color: var(--primary); font-size: 28px; }
.footer-brand sup { font-size: 11px; vertical-align: top; }
.footer-bottom { border-top: 2px solid var(--border); padding-top: 25px; display: flex; gap: 70px; align-items: flex-end; color: var(--muted-foreground); font-size: 11px; line-height: 1.9; }
.footer-email { color: var(--muted-foreground); font-size: 13px; white-space: nowrap; transition: color 500ms; }
.footer-email:hover { color: var(--primary); }
.footer-bottom p { max-width: 780px; }
.footer-bottom span { white-space: nowrap; }
.page-section { min-height: 75vh; padding: 100px 8% 160px; }
.page-content { max-width: 980px; margin: auto; }
.page-section h1 { font-size: 66px; line-height: 1.15; margin-bottom: 28px; }
.page-intro { font-size: 21px; line-height: 1.8; max-width: 720px; margin-bottom: 60px; }
.page-section .section-label { margin-bottom: 30px; }
.faq-empty { padding: 48px 0; border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); margin-bottom: 44px; color: var(--muted-foreground); }
.writings-list { margin-top: 80px; }
.writing-item { display: grid; grid-template-columns: 90px 1fr 50px; gap: 24px; align-items: center; border-top: 2px solid var(--border); padding: 48px 0; color: var(--foreground); }
.writing-item:last-child { border-bottom: 2px solid var(--border); }
.writing-number { color: var(--muted-foreground); font-size: 18px; }
.writing-category { font-size: 12px; color: var(--muted-foreground); margin-bottom: 14px; }
.writing-item h2 { font-size: 34px; margin-bottom: 16px; }
.writing-item p { font-size: 18px; line-height: 1.7; }
.writing-item svg { color: var(--primary); transition: transform 500ms; }
.writing-item:hover svg { transform: translateX(8px); }
.article-body { max-width: 760px; margin-top: 60px; }
.article-body p { font-size: 22px; line-height: 1.9; margin-bottom: 28px; }
.back-link { display: inline-flex; align-items: center; gap: 16px; font-size: 16px; color: var(--primary); margin-bottom: 70px; }
.placeholder-tag { font-size: 12px; color: var(--muted-foreground); margin: 18px 0; }
.viewing-form { max-width: 760px; margin-top: 65px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 40px; }
.field:first-child { grid-column: 1 / -1; }
.field label { display: block; font-size: 15px; color: var(--primary); margin-bottom: 13px; }
.field input { width: 100%; height: 54px; background: var(--muted); border: 1px solid var(--input); border-radius: 0; padding: 10px 16px; color: var(--foreground); font-size: 18px; outline: none; }
.field input:focus { border-color: var(--primary); }
.field-error,.form-error { font-size: 14px; color: var(--destructive); margin-top: 10px; }
.form-submit { margin-top: 42px; }
.form-honeypot { display: none; }
.confirmation { padding: 65px 0; border-top: 2px solid var(--border); margin-top: 65px; }
.confirmation h2 { font-size: 38px; margin-bottom: 24px; }
.confirmation p { line-height: 1.8; }
.reveal-ready:not(.is-visible) { opacity: 0; }
.reveal.is-visible { animation: arrival 1600ms ease both; }
@keyframes arrival { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .reveal,.reveal.is-visible,.reveal-ready:not(.is-visible) { animation: none; opacity: 1; } * { scroll-behavior: auto !important; transition: none !important; } }
@media (min-width: 1500px) { .home-hero { padding-bottom: 80px; } .hero-logo { width: 470px; height: 398px; } }
@media (max-width: 900px) {
  .house-header { height: 85px; padding: 0 6%; }
  .nav-brand { height: 76px; width: 90px; }
  .menu-toggle { display: inline-flex; }
  .house-nav { display: none; }
  .house-nav.is-open { display: flex; position: absolute; top: 85px; left: 0; right: 0; flex-direction: column; background: var(--background); padding: 38px 24px; border-bottom: 1px solid var(--border); z-index: 20; }
  .hero-title { font-size: 46px; }
  .hero-title span { font-size: 26px; margin-top: 20px; }
  .split-section { grid-template-columns: 1fr; gap: 44px; }
  .house-section { padding: 100px 7%; }
  .idea-grid { gap: 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 600px) {
  body { font-size: 18px; }
  .home-hero { padding: 8px 24px 24px; }
  .hero-logo { width: 292px; height: 247px; margin-bottom: 22px; }
  .hero-title { font-size: 32px; line-height: 1.22; }
  .hero-title span { font-size: 19px; margin-top: 16px; letter-spacing: 0.02em; }
  .hero-description { font-size: 16px; line-height: 1.7; margin: 18px auto 24px; }
  .hero-end { height: 24px; margin-top: 20px; }
  .viewing-link { height: 56px; font-size: 15px; padding: 0 24px; gap: 22px; }
  .house-section { padding: 85px 7%; }
  .house-section h2 { font-size: 38px; }
  .house-section p { font-size: 18px; }
  .idea-grid { grid-template-columns: 1fr; }
  .idea-grid h3 { font-size: 27px; }
  .statement { font-size: 23px !important; }
  .closing h2 { font-size: 36px; }
  .closing .closing-tagline { font-size: 20px; margin-top: 14px; }
  .footer-main { flex-direction: column; align-items: flex-start; gap: 24px; }
  .house-footer { padding: 45px 7% 30px; }
  .page-section { padding: 75px 7% 100px; }
  .page-section h1 { font-size: 43px; }
  .page-intro { font-size: 18px; }
  .form-grid { grid-template-columns: 1fr; gap: 28px; }
  .writing-item { grid-template-columns: 1fr 24px; gap: 12px; padding: 34px 0; }
  .writing-number { display: none; }
  .writing-item h2 { font-size: 28px; }
  .writing-item p { font-size: 16px; }
  .article-body p { font-size: 19px; }
}

/* Plain CSS replacements for prior component-library utilities */
.viewing-link {display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer} .viewing-link svg{width:18px;height:18px} .menu-toggle{background:transparent;border:0;cursor:pointer} .menu-toggle svg{width:24px;height:24px} .faq-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--foreground);text-align:left;cursor:pointer;font-size:20px;padding:28px 0} .faq-trigger svg{width:19px;flex-shrink:0;transition:transform .2s} .faq-trigger[aria-expanded=true] svg{transform:rotate(180deg)} .faq-answer{font-size:18px;line-height:1.8;padding:22px 0 30px} .faq-answer p{margin:0} .faq-answer p+p{margin-top:20px} .writing-item>svg{width:24px;height:24px} .field input[aria-invalid=true]{border-color:var(--destructive)} .form-submit{font-family:inherit} [hidden]{display:none!important}