/* ============================================================
   THE LOTUS EATER — pop gallery
   Howard Arkley colour · Lichtenstein keylines & halftone ·
   Memphis confetti · McQueen spray · floral accents
   ============================================================ */

:root{
  --paper:   #F5F1E6;     /* warm gallery wall */
  --paper-2: #FBF8F0;
  --ink:     #15110E;     /* bold black keyline / text */
  --ink-soft:#4A433C;

  --green:   #2FB24A;
  --yellow:  #FFC400;
  --pink:    #FF3DA0;
  --blue:    #1E86E0;
  --teal:    #14B3C4;
  --orange:  #FF6A2C;
  --violet:  #6B4BD0;
  --magenta: #C8156E;     /* floral */

  --maxw: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --kl: 3px;              /* keyline weight */
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0; min-height:100vh;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:clamp(16px,.55vw+14px,17px);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}

/* halftone dot texture */
.halftone{
  background-image:radial-gradient(var(--dot,rgba(0,0,0,.16)) 22%, transparent 23%);
  background-size:10px 10px;
}

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px); }

.display{ font-family:"Syne","Inter",sans-serif; font-weight:800; line-height:.94; letter-spacing:-.015em; margin:0; }
.label{ font-family:"Syne",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; }

a{ color:inherit; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:60; background:var(--paper); border-bottom:var(--kl) solid var(--ink); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding:16px clamp(20px,5vw,56px); gap:16px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.brand .mark{ width:34px; height:26px; flex:none; }
.brand .word{ font-family:"Syne",sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:1rem; white-space:nowrap; }
.nav-links{ display:flex; gap:10px; }
.nav-links a{
  font-family:"Syne",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  font-size:.76rem; text-decoration:none; color:var(--ink);
  padding:.5em .9em; border:2px solid transparent; border-radius:100px; transition:background .2s var(--ease), color .2s var(--ease);
}
.nav-links a:hover{ background:var(--ink); color:var(--paper); }
.nav-links a.active{ background:var(--pink); color:var(--ink); border-color:var(--ink); }

/* ---------- pop buttons ---------- */
.btn{
  --fill:var(--yellow); --fg:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:"Syne",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:.82rem; text-decoration:none; cursor:pointer;
  color:var(--fg); background:var(--fill);
  padding:.95em 1.6em; border:var(--kl) solid var(--ink); border-radius:100px;
  box-shadow:5px 5px 0 0 var(--ink);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease), background .2s var(--ease);
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--ink); }
.btn:active{ transform:translate(5px,5px); box-shadow:0 0 0 0 var(--ink); }
.btn-green{ --fill:var(--green); --fg:#08210F; }
.btn-pink{ --fill:var(--pink); --fg:#2A0418; }
.btn-blue{ --fill:var(--blue); --fg:#fff; }
.btn-violet{ --fill:var(--violet); --fg:#fff; }

/* ---------- art frame (gallery hang) ---------- */
.art{ position:relative; display:inline-block; }
.art .matte{ background:var(--paper-2); border:var(--kl) solid var(--ink); padding:12px; box-shadow:10px 10px 0 0 var(--shadow,var(--blue)); }
.art img{ display:block; width:100%; height:auto; }
.art .placard{
  position:absolute; left:18px; bottom:-16px;
  background:var(--ink); color:var(--paper);
  font-family:"Syne",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.62rem;
  padding:.5em .9em; border-radius:2px;
}

/* ---------- confetti (memphis) ---------- */
.confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.confetti svg{ position:absolute; }

/* ---------- footer ---------- */
.foot{ border-top:var(--kl) solid var(--ink); margin-top:clamp(56px,9vw,110px); background:var(--paper); }
.foot .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 30px; padding-top:30px; padding-bottom:36px; }
.foot .q{ font-family:"Syne",sans-serif; font-weight:600; font-size:1.15rem; line-height:1.3; margin:0; max-width:36ch; }
.foot .q em{ display:block; font-style:normal; font-family:"Inter",sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:.14em; font-size:.64rem; color:var(--ink-soft); margin-top:.7em; }
.foot .ends{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.foot .ends a{ font-family:"Syne",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; text-decoration:none; padding:.3em 0; border-bottom:2px solid transparent; transition:border-color .2s var(--ease); }
.foot .ends a:hover{ border-color:var(--ink); }
.foot .meta{ font-family:"Syne",sans-serif; font-weight:700; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- focus ---------- */
a:focus-visible,.btn:focus-visible,input:focus-visible,textarea:focus-visible{ outline:3px solid var(--violet); outline-offset:3px; }

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

@media (max-width:560px){
  .nav .wrap{ padding-left:18px; padding-right:18px; }
  .brand .word{ font-size:.86rem; }
  .nav-links a{ font-size:.68rem; padding:.45em .7em; }
  .foot .wrap{ flex-direction:column; align-items:flex-start; }
}