/* Marco Palou · Patrons page
   Two looks, one page. "site" matches marcopalou.com inner pages. "deck" matches the patronage deck.
   Change colors and fonts here only. */
:root,[data-theme="site"]{
  --bg:#0B0B0D;--fg:#ECE6D8;--fg2:#DED7C6;--muted:#B0A890;--accent:#E4C77E;--on-accent:#14110A;
  --rule:#34301F;--card:#111114;--band:#0C2419;--band-fg:#ECE6D8;--band-accent:#E4C77E;--band-rule:#1E4A36;
  --plaque:#D8BC74;--plaque-fg:#1A1608;--photo:#63301F;
  --head:'Cormorant Garamond',Georgia,serif;--body:'EB Garamond',Georgia,serif;--lab:'Jost',Helvetica,Arial,sans-serif;
  --head-w:600;--head-track:.005em;--head-lh:1.04;--lab-track:.18em;--lab-size:12px;--body-size:20px;--h1:clamp(42px,5.2vw,76px);--h2:clamp(36px,4.4vw,58px);
}
[data-theme="deck"]{
  --bg:#FDF9EE;--fg:#B8301F;--fg2:#B8301F;--muted:#B8301F;--accent:#B8301F;--on-accent:#FDF9EE;
  --rule:#E2B9AE;--card:#FDF9EE;--band:#96130F;--band-fg:#FDF9EE;--band-accent:#FDF9EE;--band-rule:#96130F;
  --plaque:#B8301F;--plaque-fg:#FDF9EE;--photo:#63301F;
  --head:'Inter Tight',Helvetica,Arial,sans-serif;--body:'Inter Tight',Helvetica,Arial,sans-serif;--lab:'Inter Tight',Helvetica,Arial,sans-serif;
  --head-w:700;--head-track:-.022em;--head-lh:1;--lab-track:.06em;--lab-size:13px;--body-size:19px;--h1:clamp(40px,4.9vw,70px);--h2:clamp(36px,4.6vw,62px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg2);font-family:var(--body);font-size:var(--body-size);line-height:1.55;transition:background .4s ease,color .4s ease}
h1,h2,h3,p,ul{margin:0}ul{padding:0;list-style:none}
a{color:var(--accent)}a:hover{opacity:.82}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.label{font-family:var(--lab);font-size:var(--lab-size);font-weight:500;letter-spacing:var(--lab-track);text-transform:uppercase;color:var(--accent)}
h1,h2,h3{font-family:var(--head);font-weight:var(--head-w);letter-spacing:var(--head-track);line-height:var(--head-lh);color:var(--fg)}
h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:30px;line-height:1.1}

/* preview bar: remove this block and the .preview element before any public version */
.preview{background:#1b1b20;color:#ECE6D8;font:500 13px/1.3 Helvetica,Arial,sans-serif;padding:8px 16px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center}
.preview a{color:#E4C77E}
.preview button{font:inherit;min-height:32px;padding:0 12px;background:transparent;color:#ECE6D8;border:1px solid #6b6654;cursor:pointer}
.preview button[aria-pressed="true"]{background:#E4C77E;color:#14110A;border-color:#E4C77E}

header.top{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;padding:22px 32px}
header.top a{text-decoration:none;font-family:var(--lab);font-size:12px;letter-spacing:var(--lab-track);text-transform:uppercase;color:var(--muted)}
header.top .name{color:var(--fg);font-weight:500;letter-spacing:.28em}
[data-theme="deck"] header.top .name{letter-spacing:.02em;font-size:16px;text-transform:none;font-weight:700}
header.top nav{display:flex;flex-wrap:wrap;gap:22px}
header.top .here{color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:2px}

.hero{display:flex;flex-wrap:wrap;align-items:stretch;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hero .copy{flex:1 1 540px;min-width:0;padding:40px 48px 44px max(32px,calc((100vw - 1160px)/2 + 32px));display:flex;flex-direction:column;gap:24px;justify-content:center}
.hero .sub{font-size:21px;max-width:580px}
.hero .invite{font-family:var(--head);font-style:italic;font-size:28px;color:var(--fg)}
[data-theme="deck"] .hero .invite{font-weight:400;font-size:24px}
.hero .photo{flex:1 1 400px;min-width:0;height:clamp(460px,calc(100vh - 104px),740px);background:var(--photo);overflow:hidden}
.hero .photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.star{width:30px;height:30px;display:none}
[data-theme="deck"] .star{display:block}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;font-family:var(--lab);font-size:13px;font-weight:500;letter-spacing:var(--lab-track);text-transform:uppercase;text-decoration:none;border:1.5px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease,opacity .2s ease}
[data-theme="deck"] .btn{text-transform:none;font-size:15px;font-weight:600;letter-spacing:.02em}
.btn:hover{opacity:.88}.btn:active{transform:scale(.98)}
.btn.line{background:transparent;color:var(--accent)}
.btn.line:hover{background:var(--accent);color:var(--on-accent);opacity:1}

section.block{padding:112px 0 0}
.head{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;max-width:780px}
.prose{display:flex;flex-direction:column;gap:18px;max-width:720px}
.note{font-size:17px;color:var(--muted);max-width:760px}

.works{display:flex;flex-wrap:wrap;gap:20px}
.work{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--fg2)}
.work .ph{aspect-ratio:4/5;border:1px dashed var(--muted);display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-family:var(--lab);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.work:hover{opacity:1}.work:hover .ph{transform:translateY(-4px)}
.work b{font-family:var(--head);font-weight:var(--head-w);font-size:22px;color:var(--fg);line-height:1.15}
.work span{font-size:16px}
.bio{margin-top:36px;max-width:760px;font-size:18px}

.cards{display:flex;flex-wrap:wrap;gap:20px}
.card{flex:1 1 calc(50% - 10px);min-width:0;border:1px solid var(--rule);background:var(--card);padding:30px;display:flex;flex-direction:column;gap:14px;transition:opacity .7s ease,transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s ease}
[data-theme="deck"] .card{border:1.5px solid var(--accent)}
.card.in:hover{transform:translateY(-4px);border-color:var(--accent)}
.card p{flex-grow:1}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding-top:6px}
.meta b{font-family:var(--head);font-weight:var(--head-w);font-size:30px;color:var(--fg)}
details{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
summary{cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--lab);font-size:20px;color:var(--accent);transition:transform .25s ease}
details[open] summary::after{transform:rotate(45deg)}
details ul{padding:2px 0 14px;font-size:17px}
details li{display:flex;align-items:center;gap:14px;padding:6px 0}
details li span:first-child{flex:1;min-width:0}
.mini{font-family:var(--lab);font-size:12px;font-weight:500;letter-spacing:.04em;min-height:36px;padding:0 12px;background:transparent;color:var(--accent);border:1px solid var(--accent);cursor:pointer}
.mini:hover{background:var(--accent);color:var(--on-accent)}
.role{font-size:16px;color:var(--muted);padding-bottom:14px}
@media (max-width:700px){details li{flex-wrap:wrap}.mini{min-height:44px}}
details li span:last-child{white-space:nowrap;color:var(--fg)}
.legend{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:28px;font-size:16px;color:var(--muted)}
.legend b{color:var(--fg);font-weight:500}

.band{margin-top:112px;background:var(--band);color:var(--band-fg);padding:92px 0;border-top:1px solid var(--band-rule);border-bottom:1px solid var(--band-rule)}
.band h2{color:var(--band-fg)}.band .label{color:var(--band-accent)}
.cols{display:flex;flex-wrap:wrap;gap:48px 64px;align-items:center}
.cols>div{flex:1 1 380px;min-width:0}
.tiers{display:flex;flex-wrap:wrap;gap:14px}
.tier{flex:1 1 110px;min-height:104px;background:var(--bg);color:var(--fg);border:1px solid var(--band-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-family:inherit;transition:transform .2s ease,background .2s ease}
.tier b{font-family:var(--head);font-weight:var(--head-w);font-size:27px}
.tier .label{color:var(--accent)}
.tier:hover{transform:translateY(-3px)}.tier:active{transform:scale(.98)}
.band .btn.line{border-color:var(--band-accent);color:var(--band-accent);width:100%;margin-top:14px}
.band .btn.line:hover{background:var(--band-accent);color:var(--band)}
.band .small{font-size:16px;margin-top:16px}.band .small a{color:var(--band-accent)}

.ledger>div{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--rule)}
.ledger .t{color:var(--fg)}
.colhead{padding-bottom:12px;border-bottom:1px solid var(--accent)}
.example{display:inline-block;font-family:var(--lab);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px dashed var(--muted);color:var(--muted);padding:2px 8px;margin-left:10px;vertical-align:middle}

.plaques{display:flex;flex-wrap:wrap;gap:14px}
.plaque{flex:1 1 200px;min-height:74px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 16px;background:var(--plaque);color:var(--plaque-fg);font-family:var(--head);font-weight:600;font-size:21px;letter-spacing:.05em}
.plaque.anon{background:transparent;color:var(--fg2);border:1px solid var(--accent);font-weight:400;font-style:italic;letter-spacing:0}

.large{border:1px solid var(--accent);padding:52px 40px;display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.large>div{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:12px}
.large h2{font-size:clamp(30px,3.4vw,44px)}
.terms{max-width:760px;display:flex;flex-direction:column;gap:12px;font-size:17px}

footer{margin-top:112px;border-top:1px solid var(--rule);padding:36px 32px 44px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;font-family:var(--lab);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
footer a{text-decoration:none;color:var(--fg2)}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--fg);color:var(--bg);padding:12px 18px;font-family:var(--lab);font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;max-width:calc(100vw - 32px);text-align:center;z-index:10}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* thank-you and pending screens */
.state{min-height:calc(100vh - 140px);display:flex;align-items:center}
.state .inner{max-width:760px;margin:0 auto;padding:72px 32px;display:flex;flex-direction:column;gap:24px}
.sig{font-family:var(--head);font-style:italic;font-size:30px;color:var(--fg)}
.opt{border-top:1px solid var(--rule);padding-top:22px;display:flex;flex-direction:column;gap:12px;font-size:17px}
.opt label{display:flex;gap:12px;align-items:flex-start;min-height:44px;cursor:pointer}
.opt input{width:20px;height:20px;margin-top:5px;accent-color:var(--accent)}

/* motion: small, once, and off for people who ask for less */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.cards .rv:nth-child(2),.works .rv:nth-child(2),.plaques .rv:nth-child(2),.tiers .rv:nth-child(2){transition-delay:.08s}
.cards .rv:nth-child(3),.works .rv:nth-child(3),.plaques .rv:nth-child(3),.tiers .rv:nth-child(3){transition-delay:.16s}
.cards .rv:nth-child(4),.works .rv:nth-child(4),.plaques .rv:nth-child(4){transition-delay:.24s}
.works .rv:nth-child(5),.plaques .rv:nth-child(5){transition-delay:.32s}
.star{animation:turn 40s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.hero .copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .copy>*:nth-child(3){animation-delay:.08s}.hero .copy>*:nth-child(4){animation-delay:.18s}.hero .copy>*:nth-child(5){animation-delay:.28s}.hero .copy>*:nth-child(6){animation-delay:.38s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .photo img{animation:settle 1.6s ease both}
@keyframes settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* open foldable and small tablets */
@media (max-width:1000px){.hero .photo{height:600px}.hero .copy{padding:64px 32px 72px}.work{flex-basis:calc(33% - 14px)}}
/* phones */
@media (max-width:700px){
body{font-size:18px}
.wrap{padding:0 20px}
header.top{padding:16px 20px}header.top nav{gap:16px}
.hero{flex-direction:column-reverse}
.hero .photo{flex:none;width:100%;height:112vw;max-height:520px}
.hero .copy{flex:none;padding:36px 20px 52px;gap:18px}
.hero .sub{font-size:20px}.hero .invite{font-size:24px}
.btns{flex-direction:column}.btn{width:100%;min-height:54px}
section.block{padding-top:76px}.band{margin-top:76px;padding:64px 0}
.head{margin-bottom:28px}
.work{flex-basis:calc(50% - 10px)}
.card{flex-basis:100%;padding:22px}
.tier{min-height:88px}
.large{padding:32px 22px}
.plaque{flex-basis:calc(50% - 7px);min-height:64px;font-size:18px}.plaque.anon{flex-basis:100%}
footer{margin-top:76px;padding:28px 20px 36px}
.state .inner{padding:48px 20px}
}

.band .perk{font-size:18px;border-left:3px solid var(--band-accent);padding-left:16px;margin-top:22px}