@layer reset, styles, prewind, site;

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

@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); }
  .desktop-navigation > a { position:relative; }
  .navigation-indicator { display:none; }
  .desktop-navigation .navigation-indicator {
    display:block;
    position:absolute;
    inset:auto 0 -1px;
    height:var(--border);
    background:var(--olive-700);
    opacity:0;
    pointer-events:none;
  }
  .desktop-navigation > a:hover { color:var(--olive-950); }
  .desktop-navigation > a[aria-current="page"] .navigation-indicator { opacity:1; }
  .navigation-arrow { display:none; }
  @media (min-width:1121px) and (prefers-reduced-motion:no-preference) {
    .desktop-navigation > a[aria-current="page"] .navigation-indicator { view-transition-name:navigation-indicator; }
  }
  .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(23rem,calc(100% - 1rem)); height:calc(100dvh - var(--flea-toolbar-height,0px)); overflow:auto; padding:clamp(1.5rem,4vw,2rem); border:0; background:var(--ivory-50); color:var(--olive-950); flex-direction:column; }
  #mobile-navigation:popover-open { display:flex; }
  #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 {
      transform:translateX(100%);
      transition:transform var(--motion-menu-exit) ease-in;
    }
    #mobile-navigation:popover-open {
      transform:translateX(0);
      transition-duration:var(--motion-menu-enter);
      transition-timing-function:var(--ease-out);
    }
    #mobile-navigation::backdrop { transition:opacity var(--motion-menu-exit) ease; }
    #mobile-navigation:popover-open::backdrop { transition-duration:var(--motion-menu-enter); }
    #mobile-navigation[data-state="closing"] {
      transform:translateX(100%);
      transition-duration:var(--motion-menu-exit);
      transition-timing-function:ease-in;
    }
    #mobile-navigation[data-state="closing"]::backdrop { opacity:0; transition-duration:var(--motion-menu-exit); }
    @starting-style {
      #mobile-navigation:popover-open { transform:translateX(100%); }
      #mobile-navigation:popover-open::backdrop { opacity:0; }
    }
  }
  .mobile-navigation__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem; }
  .mobile-navigation__head strong { font-family:var(--font-heading); font-size:1.25rem; font-weight:400; }
  #mobile-navigation nav { display:flex; flex-direction:column; margin-bottom:2.5rem; }
  #mobile-navigation nav a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    min-height:4rem;
    padding-block:.85rem;
    border-bottom:var(--border) solid var(--rule);
    color:var(--olive-900);
    font-family:var(--font-heading);
    font-size:clamp(1.5rem,5vw,1.75rem);
    font-weight:400;
    line-height:1.25;
    text-decoration:none;
  }
  #mobile-navigation nav a[aria-current="page"] { color:var(--olive-700); font-style:italic; }
  #mobile-navigation nav a:hover { color:var(--olive-600); }
  #mobile-navigation .navigation-arrow { display:block; flex-shrink:0; stroke-width:1.25; }
  .mobile-navigation__footer { margin-top:auto; }
  .mobile-navigation__footer .home-button { width:100%; }
  .mobile-navigation__contact { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.25rem; }
  .mobile-navigation__contact a { display:inline-flex; align-items:center; min-height:2.75rem; font-size:.875rem; color:var(--olive-700); text-decoration:none; }
  .mobile-navigation__contact a:hover { text-decoration:underline; }
  /* Client marks are a complete static list before motion is enabled. */
  .home-brands { --brand-width:9rem; --brand-gap:3rem; padding-block:clamp(2rem,4vw,3rem); border-bottom:var(--border) solid var(--rule); }
  .home-brands__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; margin-bottom:1.75rem; }
  .home-brands__label { margin:0; font-family:var(--font-heading); font-size:clamp(1.35rem,1.1rem + .75vw,1.75rem); font-weight:400; letter-spacing:-.015em; line-height:1.25; color:var(--olive-900); }
  .home-brands__actions { display:flex; align-items:center; gap:1.5rem; }
  .home-brands__actions > a { display:inline-flex; align-items:center; gap:.5rem; min-height:2.75rem; font-size:.875rem; text-decoration:none; }
  .home-brands__actions > a:hover { text-decoration:underline; }
  .home-brands__list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; gap:2rem; max-width:none; margin:0; padding:0; list-style:none; }
  .home-brands__list[aria-hidden="true"] { display:none; }
  .home-brands__list li { display:flex; align-items:center; justify-content:center; min-width:0; height:6rem; background:var(--ivory); isolation:isolate; }
  .home-brands__list img { display:block; width:100%; max-width:9rem; height:4.5rem; object-fit:contain; mix-blend-mode:multiply; filter:grayscale(1); opacity:.75; transition:filter 160ms ease,opacity 160ms ease; }
  .home-brands__list img:hover { filter:grayscale(0); opacity:1; }
  @media (prefers-reduced-motion:no-preference) {
    @keyframes brands-scroll { to { transform:translateX(-50%); } }
    .home-brands[data-motion] .home-brands__viewport { overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 1.5rem,#000 calc(100% - 1.5rem),transparent); }
    .home-brands[data-motion] .home-brands__track { display:flex; width:max-content; animation:brands-scroll 48s linear infinite; animation-play-state:paused; }
    .home-brands[data-motion] .home-brands__list { display:flex; flex:none; gap:var(--brand-gap); padding-inline-end:var(--brand-gap); }
    .home-brands[data-motion] .home-brands__list li { flex:0 0 var(--brand-width); width:var(--brand-width); }
    .home-brands[data-in-view] .home-brands__track { animation-play-state:running; }
    .home-brands[data-motion] .home-brands__viewport:hover .home-brands__track { animation-play-state:paused; }
  }
  @media (max-width:640px) {
    .home-brands { --brand-width:8rem; --brand-gap:2rem; }
    .home-brands__head { gap:.5rem; }
    .home-brands__list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  }
  #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; }
  }
  .contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:var(--space-xl); }
  @media (max-width: 760px) { .contact-layout { grid-template-columns:minmax(0,1fr); } }
  .team-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-md); }
  .team-grid article > :last-child > p:last-child { margin-bottom:0; }
  @media (max-width: 900px) { .team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width: 560px) { .team-grid { grid-template-columns:minmax(0,1fr); } }
  /* 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); }
  }
}