/* The About workspace shares Home's autumn artwork without changing its content. */
body[data-page=about]{
  --about-accent:#ff971f;
  --about-paper:#f5e8d5;
  background-color:#050302;
  background-image:linear-gradient(#05030299,#050302bd 50%,#050302e8),url('/autumn-home-scene.png');
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:scroll;
  color:var(--about-paper);
  color-scheme:dark;
}
body[data-page=about]::before{opacity:.08}
body[data-page=about] .frame>.nav{background:#040201ed;border-color:#e3d2bca3;color:var(--about-paper)}
body[data-page=about] .nav .links a.active{color:var(--about-accent);border-color:var(--about-accent)}
body[data-page=about] .nav a:focus-visible,body[data-page=about] .mobile-menu-toggle:focus-visible{outline-color:var(--about-accent)}

body[data-page=about] #about.contact-page{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:clamp(32px,4.5vw,64px) 32px 112px;
  text-align:center;
  color:var(--about-paper);
}
#about.contact-page>h1{color:var(--about-paper);text-shadow:0 3px 12px #000;overflow-wrap:anywhere}
#about.contact-page>.lead{margin:0 auto 14px;max-width:620px;color:#f0ddc5;text-wrap:pretty}
#about.contact-page>.placeholder{margin:0 auto 28px;max-width:620px;color:#d2b99b;text-wrap:pretty}
#about #contact-surface{max-width:720px;margin:0 auto;text-align:left}
#about .contact-form{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding:28px;
  border:1px solid #bd78375e;
  border-radius:18px;
  background:#080503ed;
  box-shadow:0 18px 50px #0006;
  text-align:left;
}
#about .contact-form label{color:#f0ddc5}
#about .contact-form input,#about .contact-form textarea{background:#100c08;color:var(--about-paper);border-color:#b082535e;text-align:left}
#about .contact-form input:focus,#about .contact-form textarea:focus{outline-color:var(--about-accent);border-color:var(--about-accent)}
#about .contact-send-row{justify-content:center;flex-wrap:wrap;text-align:center}
#about .contact-send{background:var(--about-accent);color:#180b02;border:1px solid var(--about-accent)}
#about .contact-send:hover:not(:disabled){background:#ffb45a;border-color:#ffb45a}
#about .contact-send:focus-visible,#about #view-calendar:focus-visible{outline-color:var(--about-accent)}
#about .contact-status{color:#ffca9b;overflow-wrap:anywhere}
#about .request-success{grid-column:1/-1;text-align:center;color:var(--about-paper)}
#about .request-success h3{color:var(--about-paper)}

#about .about-calendar-entry{margin:36px auto 0;border-color:#bd78375e;padding-top:28px;text-align:center}
#about .about-calendar-entry>h2{color:var(--about-paper)}
#about .about-calendar-entry>p{color:#d2b99b}
#about #view-calendar{background:#100903;color:#ffb96d;border-color:#da8c376f;min-height:48px;padding:12px 22px}
#about #view-calendar:hover{background:#34200c;border-color:var(--about-accent)}
/* Only the entry is centered: the existing appointment grid keeps its own layout. */
#about #calendar.about-calendar-section{text-align:left}

/* Owner inbox surfaces remain usable against the shared dark About backdrop. */
#about .contact-inbox{max-width:none;margin:0 auto;text-align:left;color:var(--about-paper)}
#about .inbox-heading p,#about .inquiry-card time{color:#c5b29c}
#about .contact-inbox button{color:#eddbc6;border-color:#a46c3d70;background:#100b07}
#about .contact-inbox button:hover{background:#34200c}
#about .contact-inbox button[aria-pressed=true]{background:#e6a34e;color:#180b02;border-color:#e6a34e}
#about .inquiry-card{background:#100c08;border-color:#94684366}
#about .inquiry-card.unread{border-color:#e6a34e}
#about .inquiry-state{background:#2e251b;color:#e4c29d}
#about .unread .inquiry-state{background:#513410;color:#ffcf8b}
#about .inquiry-excerpt,#about .inbox-empty{color:#d2b99b}
#about .inquiry-body{border-color:#94684366}
#about .inquiry-body a{color:#ffc27d}
#about .inbox-empty{border-color:#94684388;background:#080503de}
#about .inbox-error{color:#ffb392}
#about .contact-inbox button:focus-visible,#about .inquiry-card summary:focus-visible{outline-color:var(--about-accent)}

@media(max-width:700px){
  body[data-page=about]{background-image:linear-gradient(#05030277,#050302bc 50%,#050302ed),url('/autumn-home-mobile.png');background-size:cover;background-position:center top}
  body[data-page=about] #about.contact-page{padding:30px 18px calc(112px + env(safe-area-inset-bottom))}
  #about.contact-page>.placeholder{margin-bottom:22px}
  #about .contact-form{padding:20px 16px;border-radius:14px;gap:18px}
  #about .about-calendar-entry{margin-top:28px;padding-top:24px}
}