:root { --cream: #f5f0e7; --ink: #203127; --sage: #637565; --line: #d7d4c8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--cream); color: var(--ink); font-family: "DM Sans", sans-serif; }
button, input { font: inherit; }
header { height: 78px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.monogram { color: inherit; text-decoration: none; font: 22px "Italiana", serif; letter-spacing: .08em; }
.monogram i { font-size: 14px; }
header button { border: 0; background: transparent; color: var(--sage); cursor: pointer; text-decoration: underline; }
main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.login { width: min(440px, 100%); margin: 11vh auto 60px; text-align: center; }
.eyebrow { margin: 0 0 20px; color: var(--sage); text-transform: uppercase; letter-spacing: .3em; font-size: 10px; font-weight: 600; }
h1 { margin: 0; font: 400 clamp(48px, 7vw, 76px)/1 "Italiana", serif; letter-spacing: -.03em; }
.login > p:not(.eyebrow, .status) { margin: 24px 0 34px; color: #6d766f; line-height: 1.7; }
form { display: grid; gap: 10px; text-align: left; }
label { margin-top: 8px; font-size: 12px; font-weight: 600; }
input { width: 100%; padding: 14px 15px; border: 1px solid var(--line); background: white; color: var(--ink); }
form button { margin-top: 12px; min-height: 52px; border: 0; background: var(--ink); color: white; cursor: pointer; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; }
form button:disabled { cursor: wait; opacity: .6; }
.status { min-height: 22px; color: #8f3f37; font-size: 13px; }
.gallery { padding: 70px 0; }
.gallery[hidden], .login[hidden], .reservations[hidden], .admin-tabs[hidden], header button[hidden] { display: none; }
.admin-tabs { display:flex; gap:8px; padding-top:28px; border-bottom:1px solid var(--line); }
.admin-tabs button { padding:13px 18px; border:0; border-bottom:2px solid transparent; background:transparent; color:#788179; cursor:pointer; }
.admin-tabs button.active { border-bottom-color:var(--ink); color:var(--ink); }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.gallery-heading .eyebrow { margin-bottom: 10px; }
.gallery-heading > p { color: var(--sage); }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.photo { position: relative; overflow: hidden; background: #e2e3dc; }
.photo-view { width:100%; aspect-ratio:1; padding:0; border:0; background:transparent; cursor:zoom-in; }
.photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition:transform .2s ease; }
.photo-view:hover img { transform:scale(1.025); }
.photo-view:focus-visible { outline:3px solid var(--ink); outline-offset:-3px; }
.photo a { position: absolute; right: 10px; bottom: 10px; padding: 9px 12px; background: rgba(32,49,39,.88); color: white; text-decoration: none; font-size: 11px; }
.photo .photo-uploader { min-height:42px; margin:0; padding:12px 84px 12px 12px; background:white; color:var(--ink); font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lightbox { width:100vw; max-width:none; height:100vh; max-height:none; margin:0; padding:0; border:0; background:rgba(13,20,16,.96); color:white; }
.lightbox[open] { display:grid; grid-template-columns:minmax(48px,90px) minmax(0,1fr) minmax(48px,90px); align-items:center; }
.lightbox::backdrop { background:rgba(13,20,16,.96); }
.lightbox figure { min-width:0; max-height:100vh; margin:0; padding:54px 0 34px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.lightbox img { display:block; max-width:100%; max-height:calc(100vh - 100px); object-fit:contain; }
.lightbox figcaption { color:#d7d4c8; font-size:12px; }
.lightbox button { z-index:1; border:0; background:rgba(255,255,255,.1); color:white; cursor:pointer; }
.lightbox-close { position:fixed; top:14px; right:14px; width:44px; height:44px; border-radius:50%; font-size:32px; line-height:1; }
.lightbox-nav { width:48px; height:64px; justify-self:center; border-radius:4px; font-size:46px; line-height:1; }
.lightbox button:hover,.lightbox button:focus-visible { background:rgba(255,255,255,.22); outline:2px solid white; }
.reservations { padding:70px 0; }
.totals { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:28px; }
.total { padding:20px; border:1px solid var(--line); background:rgba(255,255,255,.4); }
.total strong,.total span { display:block; }.total strong { font:36px "Italiana",serif; }.total span { margin-top:5px; color:var(--sage); font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); background:rgba(255,255,255,.45); }
table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; }
th,td { padding:14px 16px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:top; }
th { color:var(--sage); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
td.notes { min-width:220px; max-width:360px; white-space:normal; }.yes{color:#37623f;font-weight:600}.no{color:#8f3f37;font-weight:600}
@media (max-width: 760px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } .gallery-heading { align-items: start; flex-direction: column; } }
@media (max-width: 760px) { .totals { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 440px) { main { width: min(100% - 24px, 1180px); } .photo-grid { gap: 7px; } }
@media (max-width: 600px) { .lightbox[open] { grid-template-columns:48px minmax(0,1fr) 48px; } .lightbox-nav { width:40px; height:56px; font-size:38px; } }