/* HAMILTON HUSTLE: clean boho meets dark academia.
   Night = old library: walnut, black marble, gold veins. Day = parchment, white marble, ink.
   Morgan's six colors carry the accents; each page leans on one. Everything set in caps. */
:root{
  --bg:#F1EADC; --surface:#FAF6EE; --ink:#2B211B; --muted:#6B5D51; --line:#D6C9B3;
  --teal:#1F7A72; --magenta:#A12D6B; --orange:#B4541F; --sage:#5F7754; --seafoam:#2F8C7C; --mustard:#946E0C;
  --wood:#7A5538; --wood-ink:#F5EBDA; --marble-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='0.0035 0.009' numOctaves='5' seed='23'/%3E%3CfeColorMatrix values='0 0 0 0 0.33 0 0 0 0 0.45 0 0 0 0 0.43 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 .9 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.55'/%3E%3C/svg%3E"); --stone:#F7F3EC;
  --accent:var(--teal); --accent-ink:#FFFFFF;
  --display:"Cinzel","Trajan Pro",Georgia,serif;
  --body:"Cormorant Garamond","Garamond",Georgia,serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#17120F; --surface:#211913; --ink:#EFE5D0; --muted:#B5A68F; --line:#3B2F26;
  --teal:#4FB8AC; --magenta:#DD5FA0; --orange:#E3803F; --sage:#AFC39C; --seafoam:#93DBC9; --mustard:#E4B843;
  --wood:#3A271B; --wood-ink:#EFE5D0; --marble-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='0.0035 0.009' numOctaves='5' seed='23'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.7 0 0 0 0 0.36 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 .9 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.42'/%3E%3C/svg%3E"); --stone:#141110;
  --accent-ink:#17120F; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#17120F; --surface:#211913; --ink:#EFE5D0; --muted:#B5A68F; --line:#3B2F26;
  --teal:#4FB8AC; --magenta:#DD5FA0; --orange:#E3803F; --sage:#AFC39C; --seafoam:#93DBC9; --mustard:#E4B843;
  --wood:#3A271B; --wood-ink:#EFE5D0; --marble-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='0.0035 0.009' numOctaves='5' seed='23'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.7 0 0 0 0 0.36 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 .9 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.42'/%3E%3C/svg%3E"); --stone:#141110;
  --accent-ink:#17120F; color-scheme:dark}

body[data-page="gallery"]{--accent:var(--magenta)}
body[data-page="revive"]{--accent:var(--teal)}
body[data-page="bar"]{--accent:var(--orange)}
body[data-page="vans"]{--accent:var(--seafoam)}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:500 1.2rem/1.6 var(--body);letter-spacing:.04em;text-transform:uppercase;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
input,textarea,select,option{text-transform:none;letter-spacing:normal}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;line-height:1.08;letter-spacing:.04em;text-wrap:balance}
p{margin:0}
img{max-width:100%}
:focus-visible{outline:2px solid var(--mustard);outline-offset:3px;border-radius:3px}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* textures */
.marble{background-color:var(--stone);background-image:var(--marble-img);background-size:800px 800px}
.wood{background-color:var(--wood);color:var(--wood-ink);background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='300'%3E%3Cfilter id='w'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='0.0025 0.09' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.03 0 0 0 0 0.01 0 0 0 1.4 -0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size:900px 300px}

/* nav */
.nav{border-bottom:3px double var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:16px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.12em;text-decoration:none}
.brand span{color:var(--accent)}
.links{display:flex;gap:2px;align-items:center;flex-wrap:wrap;max-width:100%}
.links a,.theme{white-space:nowrap;text-decoration:none;font:600 .78rem var(--display);letter-spacing:.14em;text-transform:uppercase;padding:8px 11px;color:var(--muted);background:none;border:0;cursor:pointer;border-radius:999px}
.links a:hover,.links a[aria-current]{color:var(--accent)}
.theme{border:1px solid var(--line);color:var(--ink)}

/* shared bits */
.eyebrow{font:600 .78rem var(--display);letter-spacing:.24em;color:var(--accent)}
.lede{color:var(--muted);max-width:52ch;font-size:1.3rem}
.ornament{display:flex;align-items:center;gap:14px;color:var(--mustard);font-family:var(--display);font-size:.8rem;letter-spacing:.3em}
.ornament::before,.ornament::after{content:"";flex:1;max-width:80px;height:1px;background:currentColor}
section.block{padding-block:clamp(56px,8vw,104px);border-top:3px double var(--line)}
.head{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,48px);max-width:64ch}
.head.center{justify-items:center;text-align:center;margin-inline:auto}
.head h2{font-size:clamp(2rem,5.5vw,3.4rem)}
.head p{color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 .82rem var(--display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:15px 24px;border-radius:999px;border:1.5px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn:hover{filter:brightness(1.08)}
.row{display:flex;gap:12px;flex-wrap:wrap}

/* boho arch */
.arch{border-radius:999px 999px 18px 18px;overflow:hidden}

/* swatch stripe, her six colors */
.stripe{display:grid;grid-template-columns:repeat(6,1fr);height:8px}
.stripe i:nth-child(1){background:var(--teal)}.stripe i:nth-child(2){background:var(--magenta)}.stripe i:nth-child(3){background:var(--orange)}
.stripe i:nth-child(4){background:var(--sage)}.stripe i:nth-child(5){background:var(--seafoam)}.stripe i:nth-child(6){background:var(--mustard)}

/* forms */
.form{display:grid;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,30px);color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.f2{grid-template-columns:1fr}}
.fld{display:grid;gap:6px;border:0;margin:0;padding:0;min-width:0}
.fld > span,.fld legend{font:600 .72rem var(--display);letter-spacing:.18em;color:var(--muted);padding:0}
.fld input,.fld textarea,.fld select{width:100%;font:500 1.1rem var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:6px}
.checks label{display:flex;gap:8px;align-items:center;font-size:1rem;padding:8px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer}
.checks input{accent-color:var(--accent);width:16px;height:16px}
.status{font:600 .82rem var(--display);letter-spacing:.1em;min-height:1.2em}
.status.ok{color:var(--teal)}
.status.err{color:var(--magenta)}

/* footer */
footer.wood{padding-block:30px;font:600 .74rem var(--display);letter-spacing:.18em}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
footer a{text-decoration:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}