@layer reset, styles, prewind;

@import url("theme.css");
@import url("typography.css");
@import url("forms.css");
@import url("ui.css");
@import url("navigation.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; }
  }
  .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); } }
  /* Shared marketing surfaces. Layout utilities handle ordinary spacing. */
  html { scroll-behavior:smooth; scroll-padding-top:7rem; }
  ::selection { background:#f6d49d; color:var(--black); }
  :focus-visible { outline-width:3px; }
  a,button { -webkit-tap-highlight-color:#f6d49d; }
  header { z-index:30; border-bottom:1px solid var(--light); }
  .brand img { width:197px; height:auto; }
  .desktop-navigation > a:not(.ui-button) { padding-block:.75rem; }
  .skip-link { position:fixed; inset:0 auto auto 1rem; z-index:100; padding:.75rem 1rem; background:var(--black); color:var(--white); transform:translateY(-150%); }
  .skip-link:focus { transform:translateY(0); }
  .opening { display:grid; grid-template-columns:1.02fr 1fr; gap:0; }
  .opening-copy { position:relative; z-index:1; padding-bottom:2.5rem; }
  .opening h1 { margin:0; font-size:var(--text-3xl); line-height:.99; letter-spacing:-.04em; text-wrap:initial; }
  .opening h1 span { color:var(--brand-1); }
  .opening-problem { max-width:36ch; margin-block:1.5rem 0; font-size:var(--text-lg); line-height:1.45; color:var(--darker); }
  .opening-answer { margin-top:1.75rem; padding-top:1.5rem; }
  .opening-answer::before { content:""; position:absolute; width:12rem; height:1px; background:var(--light); margin-top:-1.5rem; }
  .opening-answer h2 { margin:0; font-size:clamp(1.5rem,2.6vw,2.3rem); letter-spacing:-.035em; }
  .opening-answer > p:not(.terms) { margin-block:.5rem 1.4rem; font-size:var(--text-lg); line-height:1.4; }
  .opening-answer .ui-button { min-width:14rem; min-height:3.5rem; font-size:1.15rem; }
  .terms { margin-block:.65rem 0; font-size:.95rem; }
  .owner-illustration { align-self:end; }
  .reassurance { padding-block:2.5rem; background:var(--lighter); border-block:1px solid var(--light); }
  .reassurance h2 { font-size:clamp(1.45rem,2.9vw,2.5rem); margin-bottom:.5rem; }
  .reassurance p { max-width:72ch; font-size:var(--text-lg); line-height:1.5; }
  .promise-mark { flex:none; padding-right:var(--space-lg); border-right:1px solid #b8ad9f; }
  .section-intro { display:grid; grid-template-columns:1.05fr 1fr; gap:var(--space-xl); align-items:start; margin-bottom:var(--space-xl); }
  .section-intro > p { margin-top:0; }
  .plan li { display:grid; grid-template-columns:5rem 1fr; gap:var(--space-lg); border-top:1px solid var(--light); padding-block:var(--space-lg); margin:0; }
  .plan li > div { display:grid; grid-template-columns:1fr 1.2fr; gap:var(--space-xl); align-items:start; }
  .plan-number { font:400 2rem/1 var(--font-heading); color:var(--brand-1); padding-top:.25rem; }
  .founder-section { background:var(--lighter); padding-block:var(--space-xl); }
  .founder-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--space-xl); align-items:center; }
  .founder-layout > img { width:100%; height:auto; max-height:36rem; object-fit:cover; object-position:center; border-radius:2px; }
  .founder-layout p { color:var(--darker); }
  .participation-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-xl); align-items:start; }
  details { border-block-start:1px solid var(--light); }
  summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); padding-block:1.4rem; cursor:pointer; list-style:none; font-weight:var(--font-bold); font-size:var(--text-lg); }
  summary::-webkit-details-marker { display:none; }
  summary svg { flex:none; transition:transform 180ms ease-out; }
  details[open] summary svg { transform:rotate(45deg); }
  details > p { margin-block:0 1.5rem; padding-right:2rem; }
  .week { background:#f6e8c8; border:0; padding:var(--space-lg); }
  .week summary { padding-top:0; font-size:1.15rem; }
  .week[open] summary svg { transform:rotate(180deg); }
  .week-content p:first-child { margin-top:0; }
  .week li { padding-block:.5rem; }
  .week-resolution { font-weight:var(--font-bold); border-top:1px solid #c5b58c; padding-top:1rem; margin-bottom:0; }
  .scope-section { background:var(--lighter); }
  .price { font:400 clamp(3.5rem,5.5vw,5rem)/1 var(--font-heading); margin:0; letter-spacing:-.04em; }
  .price span { font:500 1.25rem var(--font-body); letter-spacing:normal; }
  .scope-list { margin:0; }
  .scope-list > div { display:grid; grid-template-columns:1fr 1.25fr; gap:var(--space-xl); padding-block:var(--space-md); border-top:1px solid var(--light); }
  dt { font-weight:var(--font-bold); font-size:var(--text-lg); }
  dd { margin:0; color:var(--darker); }
  .scope-note { margin-block:var(--space-lg); max-width:70ch; color:var(--dark); }
  .questions { max-width:1100px; }
  .questions h2 { margin-bottom:var(--space-lg); }
  .questions details:last-child { border-bottom:1px solid var(--light); }
  .start-section { background:#f3e8dc; border-top:1px solid var(--light); }
  .inquiry .form-field:first-of-type { margin-top:0; }
  .inquiry textarea { min-height:9rem; }
  .form-hint { max-width:48ch; }
  footer a { text-decoration:none; }
  @media (max-width:1000px) {
    .opening h1 { font-size:clamp(2.6rem,5.7vw,4.6rem); }
    .opening-problem { font-size:1.125rem; }
    .section-intro,.participation-layout { gap:var(--space-lg); }
    .plan li > div { grid-template-columns:1fr; gap:var(--space-xs); }
  }
  @media (max-width:760px) {
    .opening { grid-template-columns:minmax(0,1fr); }
    .opening h1 { font-size:clamp(2.4rem,8.9vw,4.8rem); max-width:14ch; }
    .desktop-break { display:none; }
    .opening-problem { max-width:38ch; margin-top:1.25rem; }
    .opening-answer { margin-top:1.4rem; padding-top:1.3rem; }
    .opening-answer::before { margin-top:-1.3rem; }
    .opening-answer h2 { font-size:clamp(1.4rem,5.7vw,2rem); }
    .opening-answer > p:not(.terms) { font-size:1.125rem; margin-bottom:1.1rem; }
    .opening-answer .ui-button { width:100%; }
    .opening-copy { padding-bottom:1.5rem; }
    .terms { text-align:center; }
    .owner-illustration { max-width:34rem; width:100%; justify-self:center; }
    .reassurance { padding-block:1.75rem; }
    .reassurance > div { flex-direction:column; gap:1rem; text-align:center; }
    .promise-mark { padding-right:0; border-right:0; }
    .promise-mark svg { width:48px; height:48px; }
    .reassurance p { font-size:1rem; }
    .section-intro,.founder-layout,.participation-layout { grid-template-columns:minmax(0,1fr); gap:var(--space-lg); }
    .section-intro { margin-bottom:var(--space-lg); }
    .section-intro h2 { margin-bottom:0; }
    .founder-layout > img { max-width:25rem; }
    .founder-layout > div { order:-1; }
    .scope-list > div { grid-template-columns:minmax(0,1fr); gap:.5rem; }
    .plan li { grid-template-columns:2rem 1fr; gap:1rem; }
    .plan-number { font-size:1.5rem; }
    .week { padding:1.5rem; }
    .brand img { width:174px; }
  }
  @media (prefers-reduced-motion:no-preference) {
    details::details-content { interpolate-size:allow-keywords; height:0; overflow:clip; transition:height 240ms cubic-bezier(.16,1,.3,1),content-visibility 240ms allow-discrete; }
    details[open]::details-content { height:auto; }
  }
  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    summary svg { transition:none; }
  }

  /* Global styles go here */
  nav > a:not(.ui-button),.desktop-navigation > a:not(.ui-button) {
    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); }
  }
  .blog-public { max-width: 52rem; }
  .blog-cover { display:block; width:100%; height:auto; margin-block:var(--space-lg); }
  .blog-body { overflow-wrap:anywhere; }
  .blog-post-list { list-style:none; padding:0; }
  .blog-post-list li { display:flex; justify-content:space-between; gap:var(--space-md); padding-block:var(--space-md); border-bottom:1px solid var(--light); }
  .blog-format { display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-block:var(--space-sm); }
  .blog-format button { font-size:var(--text-sm); }
  .blog-rich-editor { min-height:18rem; padding:var(--space-md); background:var(--white); border:1px solid var(--light); border-radius:var(--rounded); overflow-wrap:anywhere; }
  .blog-rich-editor:focus-visible { outline:2px solid var(--brand-1); outline-offset:2px; }
  .blog-cover-field { margin-block:var(--space-lg); padding:var(--space-md); border:1px solid var(--light); }
  .blog-cover-preview { display:block; max-width:100%; width:20rem; max-height:15rem; object-fit:contain; margin-block:var(--space-sm); }
  .blog-cover-preview[hidden] { display:none; }
  .blog-library { width:min(44rem,calc(100vw - 2rem)); max-height:80dvh; overflow:auto; padding:var(--space-lg); border:0; border-radius:var(--rounded); background:var(--white); }
  .blog-library::backdrop { background:#0005; }
  .blog-photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(8rem,1fr)); gap:var(--space-sm); margin-block:var(--space-md); }
  .blog-photo-grid img { display:block; width:100%; height:6rem; object-fit:cover; }
  .blog-photo-grid button { overflow-wrap:anywhere; }

  #blog-editor { max-width:none; }
  #blog-editor [hidden] { display:none; }
  #blog-actions { position:sticky; bottom:0; background:var(--bg-color); border-top:1px solid var(--light); }

}