@layer reset, styles, prewind;

@import url("theme.css");
@import url("typography.css");
@import url("forms.css");
@import url("ui.css");
@import url("https://unpkg.com/prewindcss@1.3.1");

@layer styles {
  /* Shared proportions for the small, single-purpose owner screens. */
  .admin-access { max-width:29rem; margin:clamp(0rem,4vh,3rem) auto; padding:var(--space-lg); border:1px solid var(--light); border-radius:var(--rounded-lg); background:var(--white); box-shadow:0 8px 32px rgb(0 0 0 / .035); }
  .admin-access > h1 { letter-spacing:-.035em; }
  .admin-access > p { font-size:var(--text-base); }
  .admin-access > p:last-child { font-size:max(.875rem,var(--text-sm)); }
  .container { min-width:0; max-width:100%; }
  .admin-access form { margin-block:var(--space-lg); }
  .admin-access .form-field { margin-bottom:var(--space-md); font-size:var(--text-sm); }
  .admin-access input { font-size:max(1rem,var(--text-base)); }
  .admin-access .code-input { max-width:none; }
  .admin-access [role="alert"],.admin-access [role="status"] { padding:var(--space-sm); border:1px solid var(--light); border-radius:var(--rounded-lg); background:var(--lighter); }
  main > .container > h1 { max-width:20ch; }
  main > .container > h1:first-child { margin-top:0; }
  main > .container > p { max-width:58ch; }
  .desktop-navigation { display:flex; gap:var(--space-md); }
  .mobile-menu-toggle { display:none; align-items:center; justify-content:center; width:48px; height:48px; padding:8px; border:0; background:transparent; color:var(--black); }
  .mobile-menu-toggle:hover { background:transparent; }
  .mobile-menu-toggle span { display:block; width:30px; height:22px; background:linear-gradient(currentColor,currentColor) top/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 2px no-repeat; }
  #mobile-navigation { margin:0 0 0 auto; inset:var(--flea-toolbar-height,0px) 0 0; width:min(22rem,100%); height:calc(100dvh - var(--flea-toolbar-height,0px)); overflow:auto; padding:var(--space-md); border:0; background:var(--white); color:var(--black); opacity:0; transform:translateX(24px); }
  #mobile-navigation:popover-open { opacity:1; transform:translateX(0); }
  #mobile-navigation::backdrop { inset:var(--flea-toolbar-height,0px) 0 0; background:#0005; opacity:0; }
  #mobile-navigation:popover-open::backdrop { opacity:1; }
  @media (prefers-reduced-motion:no-preference) {
    #mobile-navigation { transition:opacity 180ms ease,transform 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete; }
    #mobile-navigation::backdrop { transition:opacity 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete; }
    @starting-style {
      #mobile-navigation:popover-open { opacity:0; transform:translateX(24px); }
      #mobile-navigation:popover-open::backdrop { opacity:0; }
    }
  }
  #mobile-navigation nav { display:flex; flex-direction:column; gap:var(--space-md); }
  #mobile-navigation button[popovertargetaction="hide"] { position:relative; width:44px; height:44px; padding:0; border:0; background:transparent; color:inherit; font-size:0; }
  #mobile-navigation button[popovertargetaction="hide"]::before,
  #mobile-navigation button[popovertargetaction="hide"]::after { content:""; position:absolute; top:50%; left:50%; width:24px; height:2px; background:currentColor; transform:translate(-50%,-50%) rotate(45deg); }
  #mobile-navigation button[popovertargetaction="hide"]::after { transform:translate(-50%,-50%) rotate(-45deg); }
  @media (max-width: 640px) {
    .desktop-navigation,header > nav > a[href="/admin"] { display:none; }
    .mobile-menu-toggle { display:inline-flex; margin-left:auto; }
  }
  /* Global styles go here */
  nav > a,.desktop-navigation > a {
    text-decoration: none;
    color: var(--darker);
  }

  /* Full-height shell with independently scrolling navigation and editing. */
  .admin-shell { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .admin-main { min-height: 0; overflow: auto; }
  .admin-workspace { height: 100%; display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
  .admin-sidebar { display: flex; flex-direction: column; min-height: 0; }
  .admin-page-list { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
  .admin-page-list a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
  .admin-page-list a[aria-current="page"] { background: var(--white); color: var(--black); font-weight: var(--font-semibold); }
  .admin-content { min-width: 0; overflow-y: auto; }
  .admin-panel { max-width: 56rem; }
  @media (max-width: 640px) { .admin-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 30dvh) minmax(0, 1fr); } }

  /* ============================================================
     Nave's - dive bar
     ============================================================ */

  h2, h3, h4 { text-transform: uppercase; }
  h2 { letter-spacing: 0.01em; }
  h3 { letter-spacing: 0.02em; }

  .ui-button { text-decoration: none; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
  .ui-ghost { background: transparent; border-color: rgb(244 234 217 / 0.35); color: var(--black); }
  .ui-ghost:hover { border-color: var(--brand-3); color: var(--brand-3); }

  /* Header */
  .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--lighter) 84%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--light); }
  .site-header-inner { display: flex; align-items: center; gap: var(--space-lg); padding-block: var(--space-sm); }
  .site-brand { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--black); text-decoration: none; }
  .site-brand-logo { height: 52px; width: auto; display: block; flex: none; }
  @media (max-width: 640px) { .site-brand-logo { height: 44px; } }
  .site-brand-name { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; color: #fff; }
  .site-header .desktop-navigation { margin-inline-start: auto; align-items: center; gap: var(--space-lg); }
  .site-header nav a { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-sm); font-weight: 500; text-decoration: none; color: var(--darker); padding-block: var(--space-2xs); }
  .site-header nav a:hover { color: var(--brand-3); }
  .site-call { flex: none; margin-inline-start: var(--space-sm); min-height: 2.5rem; padding-block: var(--space-2xs); font-size: var(--text-sm); }
  @media (max-width: 640px) { .site-call { display: none; } }

  /* Hero */
  .hero { position: relative; isolation: isolate; color: var(--black); }
  .hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(13 10 8 / 0.5) 0%, rgb(13 10 8 / 0.72) 45%, rgb(13 10 8 / 0.97) 100%); }
  .hero-inner { padding-block: var(--space-3xl); max-width: 44rem; }
  .eyebrow { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.2em; font-size: var(--text-sm); font-weight: 600; margin: 0; color: var(--brand-3); }
  .hero h1 { color: #fff; margin-block: var(--space-sm) var(--space-md); font-size: var(--text-4xl); text-transform: uppercase; text-shadow: 0 0 22px rgb(214 58 36 / 0.55); }
  .hero-lead { font-size: var(--text-lg); color: #ece0cc; max-width: 48ch; margin: 0; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); align-items: center; }

  /* Neon marquee strip */
  .marquee { background: var(--brand-1); color: #fff; border-block: 3px solid #7c1f13; }
  .marquee-inner { padding-block: var(--space-sm); text-align: center; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.22em; font-size: var(--text-sm); font-weight: 600; }

  /* Sections */
  .section { padding-block: var(--space-2xl); }
  .section-alt { background: var(--brand-2-light); }
  .section-red { background: var(--brand-1); color: #fff; }
  .section-red h2, .section-red h3 { color: #fff; }
  .section-red .eyebrow-muted { color: #ffd9d1; }
  .section-red .lead { color: #ffeae4; }
  .lead { font-size: var(--text-lg); color: var(--darker); }
  .eyebrow-muted { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.2em; font-size: var(--text-sm); font-weight: 600; color: var(--brand-3); }
  .section-head { max-width: 46rem; margin-bottom: var(--space-xl); }

  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; }
  .split.reverse > *:first-child { order: 2; }
  @media (max-width: 820px) {
    .split { grid-template-columns: minmax(0, 1fr); }
    .split.reverse > *:first-child { order: 0; }
  }

  .media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--rounded); border: 1px solid var(--light); box-shadow: var(--shadow-lg); }
  .media-frame.wide img { aspect-ratio: 16 / 11; }
  .media-frame.tall img { aspect-ratio: 4 / 5; }
  .media-frame.square img { aspect-ratio: 1 / 1; }

  /* The wall - photo mosaic */
  .wall-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 6px; }
  .wall-grid figure { margin: 0; overflow: hidden; border-radius: 2px; border: 1px solid var(--light); }
  .wall-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
  .wall-grid figure:hover img { transform: scale(1.06); }
  .wall-grid .g-wide { grid-column: span 2; }
  .wall-grid .g-tall { grid-row: span 2; }
  @media (max-width: 720px) {
    .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
    .wall-grid .g-tall { grid-row: span 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wall-grid img { transition: none; }
    .wall-grid figure:hover img { transform: none; }
  }

  /* Feature strip */
  .feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
  @media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } }
  .feature { border-top: 2px solid var(--brand-1); padding-top: var(--space-md); }
  .feature h3 { margin: 0 0 var(--space-2xs); font-size: var(--text-lg); }
  .feature p { color: var(--dark); margin: 0; }
  .feature .feature-icon { color: var(--brand-3); margin-bottom: var(--space-xs); }

  /* Quotes */
  .quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
  @media (max-width: 900px) { .quotes { grid-template-columns: minmax(0, 1fr); } }
  .quote { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border: 1px solid var(--light); border-left: 4px solid var(--brand-1); border-radius: 2px; background: var(--brand-2-light); }
  .quote blockquote { margin: 0; padding: 0; border: 0; font-family: var(--font-heading); text-transform: none; font-size: var(--text-lg); line-height: 1.3; color: #fff; max-width: none; }
  .quote cite { font-style: normal; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-sm); color: var(--brand-3); }

  /* Info cards */
  .info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
  @media (max-width: 720px) { .info-grid { grid-template-columns: minmax(0, 1fr); } }
  .info-card { background: var(--brand-2-light); border: 1px solid var(--light); border-radius: var(--rounded); padding: var(--space-lg); }
  .info-card h3 { margin-top: 0; color: #fff; }

  .badge { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-sm); font-weight: 600; color: var(--brand-3); border: 1px solid var(--brand-3); border-radius: 999px; padding: var(--space-3xs) var(--space-sm); }

  /* CTA band */
  .cta-band { background: var(--brand-1); color: #fff; }
  .cta-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-xl); }
  .cta-band h2 { color: #fff; margin: 0; }
  .cta-band p { color: #ffd9d1; margin: var(--space-2xs) 0 0; }

  /* Footer */
  .site-footer { background: var(--brand-2); color: var(--dark); margin-top: auto; border-top: 3px solid var(--brand-1); }
  .site-footer a { color: var(--darker); text-decoration: none; }
  .site-footer a:hover { color: var(--brand-3); }
  .site-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); padding-block: var(--space-xl); }
  @media (max-width: 820px) { .site-footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); } }
  .site-footer h3 { margin-top: 0; color: var(--brand-3); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.16em; }
  .footer-brand-name { font-family: var(--font-display); font-size: var(--text-xl); color: #fff; margin: 0 0 var(--space-sm); }
  .site-footer ul { list-style: none; padding: 0; margin: 0; max-width: none; }
  .site-footer li + li { margin-top: var(--space-2xs); }
  .site-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-md); border-top: 1px solid var(--light); font-size: var(--text-sm); color: var(--midtone); }

  .ui-light { background: #f4ead9; border-color: #f4ead9; color: #14100d; }
  .page-hero { background: var(--brand-2-light); border-bottom: 3px solid var(--brand-1); }
  .page-hero-inner { padding-block: var(--space-2xl); max-width: 46rem; }
  .page-hero h1 { color: #fff; margin-block: var(--space-sm) var(--space-md); }
  .page-hero p { color: var(--darker); font-size: var(--text-lg); margin-bottom: 0; }
}