:root { --ink:#17120d; --red:#7c1711; --red-dark:#5d100c; --paper:#e5c692; --sand:#c99956; --cream:#f1d9aa; --green:#0b3832; --line:rgba(23,18,13,.38); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.modal-open { overflow:hidden; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Special Elite", monospace; line-height:1.55; background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.5px), radial-gradient(rgba(52,28,9,.12) 1px, transparent 1.5px), linear-gradient(90deg, rgba(94,48,16,.08), transparent 15%, transparent 85%, rgba(94,48,16,.08)); background-position:0 0, 14px 17px, 0 0; background-size:20px 20px, 23px 23px, 100% 100%; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.18; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:"Rye", serif; font-weight:400; line-height:.92; letter-spacing:.02em; text-transform:uppercase; } h1 span,h2 span,.brand span { color:var(--red); } h1 { font-size:clamp(4.3rem,11vw,9.5rem); } h2 { font-size:clamp(2.6rem,6vw,5.1rem); } h3 { font-family:"Stardos Stencil", serif; font-size:1.45rem; margin:.5rem 0; text-transform:uppercase; } a { color:inherit; }
.skip-link { position:fixed; top:-4rem; left:1rem; z-index:50; background:var(--cream); padding:.75rem; } .skip-link:focus { top:1rem; }
.site-header,.dashboard-header { position:absolute; top:0; width:100%; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:1rem clamp(1rem,5vw,5rem); border-bottom:1px solid rgba(241,217,170,.4); }
.site-header { background:var(--paper); color:var(--ink); box-shadow:0 5px 16px rgba(23,18,13,.2); }
.brand { display:flex; flex-direction:column; text-decoration:none; font-family:"Stardos Stencil", serif; font-size:1.2rem; line-height:1; letter-spacing:.06em; font-weight:bold; } .brand small { margin-top:.28rem; color:var(--red); font-family:"Special Elite",monospace; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; } nav { display:flex; gap:clamp(.75rem,2.5vw,2.5rem); } nav a { color:var(--ink); font-size:.75rem; text-transform:uppercase; text-decoration:none; border-bottom:1px solid transparent; } nav a:hover { border-color:var(--red); }
.hero { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.07fr) minmax(330px,.93fr); overflow:hidden; border-bottom:5px solid var(--ink); } .hero-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:9rem clamp(1.5rem,8vw,9rem) 5rem; position:relative; } .hero-copy::after { content:"✦   ✦   ✦   ✦   ✦"; letter-spacing:1.1em; color:var(--red); font-size:1.2rem; margin-top:clamp(1rem,3vw,3rem); }
.eyebrow { color:var(--red); font-family:"Stardos Stencil", serif; text-transform:uppercase; letter-spacing:.13em; font-size:.79rem; font-weight:bold; } .hero-name { display:block; color:var(--ink); font-size:clamp(1.55rem,3.5vw,3rem); line-height:1.05; } .hero-copy h1 { margin:.25rem 0 0; } .hero-copy h1 strong { display:block; color:var(--red); font:inherit; } .hero-theme { margin:.25rem 0 .8rem; font-family:"Rye",serif; font-size:clamp(3.1rem,7.2vw,6.3rem); line-height:.86; text-transform:uppercase; } .hero-theme span,.hero-theme strong { display:block; } .hero-theme span { color:var(--ink); } .hero-theme strong { color:var(--red); font:inherit; } .hero-intro { font-size:clamp(1rem,1.4vw,1.25rem); max-width:34rem; margin:.7rem 0 1.8rem; }
.button { display:inline-flex; gap:.75rem; justify-content:center; align-items:center; border:2px solid var(--ink); padding:1rem 1.25rem .88rem; cursor:pointer; font-family:"Stardos Stencil", serif; font-size:1rem; text-transform:uppercase; text-decoration:none; transition:transform .18s ease, background .18s ease; box-shadow:4px 4px 0 rgba(23,18,13,.8); } .button:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(23,18,13,.8); } .button:disabled { opacity:.7; cursor:wait; transform:none; box-shadow:4px 4px 0 rgba(23,18,13,.4); } .button-dark { background:var(--ink); color:var(--cream); } .button-red { background:var(--red); color:var(--cream); }
.hero-art { min-height:33rem; position:relative; display:flex; align-items:flex-end; justify-content:center; padding:2rem; overflow:hidden; cursor:zoom-in; background:url("assets/western-poster.jpg") center/cover; } .hero-art::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(23,18,13,.18) 20%,rgba(23,18,13,.58) 100%); } .poster-button { position:relative; z-index:1; border:2px solid var(--cream); background:rgba(23,18,13,.86); color:var(--cream); padding:.8rem 1rem .7rem; font:1rem "Stardos Stencil",serif; text-transform:uppercase; cursor:pointer; box-shadow:3px 3px 0 rgba(23,18,13,.55); transition:transform .18s ease, background .18s ease; } .poster-button:hover,.poster-button:focus-visible { background:var(--red); transform:translateY(-2px); }
.section-shell { padding:clamp(4.2rem,9vw,8rem) clamp(1.5rem,8vw,9rem); } .section-title { text-align:center; margin:auto; max-width:45rem; } .section-title h2 { margin-bottom:3.2rem; }
.details-grid { display:grid; grid-template-columns:repeat(4,1fr); border:2px solid var(--ink); background:rgba(250,226,181,.3); box-shadow:7px 7px 0 var(--red); } .details-grid article { min-height:13.5rem; padding:1.7rem 1.1rem; text-align:center; border-right:1px dashed var(--line); } .details-grid article:last-child { border:0; } .details-grid p { margin:0; font-size:.98rem; } .details-grid strong { display:block; margin-top:.22rem; font-family:"Stardos Stencil",serif; font-size:1.22rem; line-height:1.1; text-transform:uppercase; } .detail-icon { display:block; color:var(--red); font-family:"Rye",serif; font-size:2.5rem; line-height:1; }
.inspiration { display:grid; grid-template-columns:1.1fr .9fr; background:var(--ink); color:var(--cream); border-block:9px double var(--sand); } .inspiration-image { min-height:37rem; overflow:hidden; border-right:3px solid var(--sand); } .inspiration-image img { width:100%; height:100%; object-fit:cover; display:block; filter:sepia(.28) contrast(1.08); } .inspiration-copy { align-self:center; padding:clamp(3rem,7vw,7rem); } .inspiration-copy h2 { color:var(--cream); } .inspiration-copy h2 span { color:var(--sand); } .inspiration-copy .eyebrow { color:#d7a55f; } .tags { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.7rem; } .tags span { border:1px solid var(--sand); color:var(--sand); padding:.4rem .6rem; font-size:.78rem; text-transform:uppercase; }
.rsvp { display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(2rem,6vw,7rem); align-items:center; background:linear-gradient(90deg, rgba(124,23,17,.1), transparent 30%); } .rsvp-stamp { display:grid; place-content:center; width:clamp(9.5rem,18vw,15rem); aspect-ratio:1; border:7px double var(--red); border-radius:50%; color:var(--red); text-align:center; font-family:"Rye",serif; font-size:clamp(2rem,4vw,3.5rem); line-height:.85; transform:rotate(-10deg); } .rsvp-stamp small { font-family:"Stardos Stencil"; font-size:.85rem; letter-spacing:.2em; } .rsvp-content { max-width:43rem; } .rsvp-content h2 { margin-bottom:1.3rem; } form { margin-top:1.6rem; } label { display:block; font-family:"Stardos Stencil", serif; font-size:.82rem; text-transform:uppercase; margin-bottom:.45rem; } input { min-width:0; width:100%; border:2px solid var(--ink); border-radius:0; background:rgba(250,226,181,.6); padding:1rem; color:var(--ink); font:1rem "Special Elite",monospace; outline-color:var(--red); } .form-row { display:flex; gap:.85rem; } .form-row input { flex:1; } .form-message { min-height:1.45rem; margin:.7rem 0 0; font-size:.88rem; } .form-message.success { color:#1d5e32; } .form-message.error { color:var(--red); font-weight:bold; }
footer { padding:2rem 1rem; background:var(--green); color:var(--cream); text-align:center; font-family:"Stardos Stencil",serif; font-size:.85rem; text-transform:uppercase; } footer span { color:var(--sand); margin:0 .7rem; } footer a { display:block; width:max-content; margin:1rem auto 0; color:var(--sand); }
.poster-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:1.2rem; opacity:1; visibility:visible; transition:opacity .22s ease,visibility .22s ease; } .poster-modal[aria-hidden="true"] { opacity:0; visibility:hidden; pointer-events:none; } .poster-modal-backdrop { position:absolute; inset:0; background:rgba(10,7,4,.76); backdrop-filter:blur(4px); } .poster-modal-card { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; width:min(88vw,40rem); max-height:92vh; padding:1rem; background:var(--paper); border:3px solid var(--ink); box-shadow:12px 15px 0 rgba(0,0,0,.48); animation:poster-arrive .42s cubic-bezier(.2,.9,.25,1.15) both; } .poster-modal[aria-hidden="true"] .poster-modal-card { animation:none; } .poster-modal-card .eyebrow { margin:.15rem 2.5rem .75rem; text-align:center; } .poster-modal-card img { display:block; max-width:100%; max-height:calc(92vh - 5.3rem); object-fit:contain; border:1px solid var(--ink); } .poster-close { position:absolute; z-index:2; top:-.75rem; right:-.75rem; width:2.5rem; height:2.5rem; border:2px solid var(--ink); border-radius:50%; background:var(--red); color:var(--cream); font:2.25rem/.9 Arial,sans-serif; cursor:pointer; box-shadow:2px 3px 0 rgba(0,0,0,.45); } @keyframes poster-arrive { from { opacity:0; transform:translateY(3rem) scale(.86) rotate(-2deg); } to { opacity:1; transform:translateY(0) scale(1) rotate(0); } }
.admin-body,.dashboard-body { min-height:100vh; display:grid; place-items:center; padding:1.5rem; background:linear-gradient(rgba(16,12,8,.64),rgba(16,12,8,.7)),url("assets/western-poster.jpg") center/cover fixed; } .login-card { width:min(100%,32rem); padding:clamp(2rem,7vw,4.5rem); background:var(--paper); border:3px solid var(--ink); box-shadow:10px 10px 0 var(--red-dark); } .login-card h1 {font-size:clamp(2.2rem,7vw,4rem); margin:.8rem 0 1.4rem; overflow-wrap:break-word;} .back-link { display:inline-block; margin-bottom:2rem; font-size:.82rem; text-transform:uppercase; } .login-card input { margin-bottom:1.1rem; } .wide-button { width:100%; margin-top:.7rem; }
.dashboard-body { display:block; padding:0; background:var(--paper); } .dashboard-header { position:relative; background:var(--green); color:var(--cream); } .text-button { border:0; border-bottom:1px solid currentColor; color:var(--cream); background:none; padding:0; font:inherit; cursor:pointer; text-transform:uppercase; font-size:.76rem; } .dashboard { padding-top:clamp(4rem,10vw,8rem); min-height:calc(100vh - 70px); } .dashboard h1 { margin-bottom:1.4rem; } .guest-total { display:flex; align-items:center; gap:1rem; margin:0 0 2rem; color:var(--red); } .guest-total strong { font-family:"Rye",serif; font-size:clamp(4rem,10vw,6rem); line-height:1; } .guest-total span { font-family:"Stardos Stencil",serif; text-transform:uppercase; line-height:1.1; } .table-wrap { overflow-x:auto; border:2px solid var(--ink); background:rgba(250,226,181,.45); box-shadow:6px 6px 0 var(--red); } table { width:100%; border-collapse:collapse; min-width:34rem; } th { background:var(--ink); color:var(--cream); font-family:"Stardos Stencil",serif; text-transform:uppercase; letter-spacing:.06em; text-align:left; font-size:.85rem; } th,td { padding:1rem 1.2rem; border-bottom:1px dashed var(--line); } td:first-child { width:5rem; color:var(--red); font-weight:bold; } tr:last-child td { border-bottom:0; } .empty-state { padding:2.2rem; text-align:center; }
@media (max-width:800px) { .site-header { align-items:flex-start; gap:.7rem; padding:.8rem 1rem; } .brand { flex:0 0 auto; font-size:.9rem; } .brand small { font-size:.55rem; } nav { display:flex; flex:1; justify-content:flex-end; gap:.55rem; overflow-x:auto; padding-top:.1rem; } nav a { flex:0 0 auto; font-size:.62rem; } .hero { min-height:0; grid-template-columns:1fr; } .hero-copy { min-height:68vh; padding:7rem 1.5rem 3.4rem; } .hero-art { min-height:24rem; } .details-grid { grid-template-columns:1fr 1fr; } .details-grid article:nth-child(2) { border-right:0; } .details-grid article:nth-child(-n+2) { border-bottom:1px dashed var(--line); } .inspiration { grid-template-columns:1fr; } .inspiration-image { min-height:20rem; border-right:0; border-bottom:3px solid var(--sand); } .rsvp { grid-template-columns:1fr; } .rsvp-stamp { margin:auto; } }
@media (max-width:470px) { .details-grid { grid-template-columns:1fr; } .details-grid article { border-right:0; border-bottom:1px dashed var(--line); min-height:0; } .form-row { flex-direction:column; } .button { width:100%; } .hero-copy::after { letter-spacing:.5em; } .dashboard-header { align-items:flex-start; gap:1rem; } .dashboard-header .brand { max-width:13rem; } }