@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#fcfcfc;color:#000;min-height:100vh;
  font-family:"Satoshi",-apple-system,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:#00218f;color:#fff}
a{color:#00218f;text-decoration:none}

/* ---- top nav (shared chrome, same palette) ---- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:20px 5vw;background:rgba(252,252,252,.86);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);border-bottom:1px solid #ddd}
.nav .home{display:flex;align-items:center;gap:10px;font-family:"Poiret One",cursive;
  text-transform:lowercase;font-size:24px;color:#00218f;line-height:1}
.nav .home .spin{display:inline-block;animation:spin 14s linear infinite;font-size:18px}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.nav .links{display:flex;gap:26px;text-transform:uppercase;font-size:12px;letter-spacing:2px;color:#272727}
.nav .links a{color:#272727;transition:color .3s}
.nav .links a:hover,.nav .links a.here{color:#00218f}
@media(max-width:640px){.nav .links{gap:15px;font-size:10.5px;letter-spacing:1.5px}}

/* ---- shared page wrap + headings (gallery tokens) ---- */
.wrap{max-width:1920px;margin:0 auto;padding:64px 5vw 120px}
.eyebrow{display:flex;align-items:center;gap:14px;text-transform:uppercase;
  font-size:12px;letter-spacing:2px;color:#272727}
.eyebrow .spin{display:inline-block;color:#00218f;font-size:18px;animation:spin 14s linear infinite}
.title{font-family:"Poiret One",cursive;font-weight:400;text-transform:lowercase;
  color:#00218f;line-height:.95;font-size:clamp(58px,11vw,176px);margin:18px 0 10px}
.title .word{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.title .line{display:block;transform:translateY(115%);animation:lineUp 1s cubic-bezier(.19,.66,.22,1) forwards}
@keyframes lineUp{to{transform:translateY(0)}}
.sub{text-transform:uppercase;font-size:13px;letter-spacing:2px;line-height:1.7;
  color:#747474;max-width:620px;margin:26px 0 0}
.rule{border:none;border-top:1px solid #ddd;margin:56px 0 48px}

/* ---- landing path cards ---- */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:8px}
.path{background:#fff;border:1px solid #ddd;border-radius:40px 0;padding:2rem 1.8rem;
  display:flex;flex-direction:column;gap:.8rem;transition:ease all .5s;color:#000}
.path:hover{transform:scale(1.02);box-shadow:#00008b33 0 7px 29px}
.path .pn{font-family:"Poiret One",cursive;text-transform:lowercase;font-size:34px;color:#00218f;line-height:1}
.path .pd{text-transform:uppercase;font-size:12px;letter-spacing:1.5px;line-height:1.75;color:#272727}
.path .pgo{margin-top:auto;text-transform:uppercase;font-size:11px;letter-spacing:2px;color:#747474}

/* ---- gallery grid (verbatim from #view-gallery) ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:32px}
.card{background:#fff;border:1px solid #ddd;border-radius:40px 0;padding:1.8rem;
  display:flex;flex-direction:column;gap:1.1rem;transition:ease all .5s}
.card:hover{transform:scale(1.02);box-shadow:#00008b33 0 7px 29px}
.card .img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:26px 0;
  background:#eee;filter:grayscale(1);transition:ease filter .5s,ease transform .5s}
.card:hover .img{filter:grayscale(0)}
.card .name{font-family:"Poiret One",cursive;font-weight:400;text-transform:lowercase;
  color:#000;font-size:32px;line-height:1.05}
.card .brief{text-transform:uppercase;font-size:12.5px;letter-spacing:1.5px;line-height:1.75;color:#272727}
.card .meta{border-top:1px solid #ddd;padding-top:.9rem;margin-top:auto;
  display:flex;justify-content:space-between;gap:10px;text-transform:uppercase;
  font-size:11px;letter-spacing:2px;color:#747474}
.cta{display:flex;justify-content:center;align-items:center;gap:.6rem;
  background:#00218f;color:#fff !important;text-transform:uppercase;font-weight:700;
  font-size:13px;letter-spacing:2px;padding:1.05rem .5rem;border-radius:20px 0;
  transition:ease all .4s}
.cta:hover{box-shadow:#00008b33 0 7px 29px;transform:scale(1.02)}
.card .imgwrap{position:relative;display:block;width:100%;padding:0;border:none;
  background:none;cursor:zoom-in;overflow:hidden;border-radius:26px 0;font:inherit}
.card .count{position:absolute;top:12px;left:12px;background:#00218f;color:#fff;
  text-transform:uppercase;font-size:10px;letter-spacing:1.5px;font-weight:700;
  padding:6px 10px;border-radius:12px 0;pointer-events:none}
.card .zoom{position:absolute;bottom:12px;right:12px;background:#fff;color:#00218f;
  text-transform:uppercase;font-size:10px;letter-spacing:1.5px;font-weight:700;
  padding:6px 10px;border-radius:12px 0;opacity:0;transform:translateY(6px);
  transition:ease all .4s;pointer-events:none}
.card:hover .zoom{opacity:1;transform:none}
.empty{text-transform:uppercase;font-size:13px;letter-spacing:2px;line-height:2;color:#747474;max-width:640px}
.empty b{color:#00218f}

/* ---- lightbox (verbatim) ---- */
#lightbox{position:fixed;inset:0;z-index:1000;display:none;
  background:rgba(250,250,248,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  grid-template-columns:96px 1fr 96px;grid-template-rows:1fr auto;
  align-items:center;justify-items:center;padding:3.2vh 2vw}
#lightbox.on{display:grid;animation:lbFade .3s ease}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
#lightbox .lb-stage{grid-column:2;grid-row:1;display:flex;align-items:center;
  justify-content:center;width:100%;height:100%;margin:0;overflow:hidden;cursor:zoom-out}
#lightbox .lb-img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:26px 0;
  box-shadow:#00008b22 0 20px 60px;cursor:default}
#lightbox.on .lb-img{animation:lbIn .45s cubic-bezier(.19,.66,.22,1)}
@keyframes lbIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
#lightbox .lb-nav{grid-row:1;background:none;border:none;color:#00218f;cursor:pointer;
  font-family:"Poiret One",cursive;font-size:60px;line-height:1;width:78px;height:78px;
  border-radius:50%;transition:ease all .3s}
#lightbox .lb-nav:hover{background:#00218f;color:#fff}
#lightbox .lb-prev{grid-column:1}
#lightbox .lb-next{grid-column:3}
#lightbox .lb-close{position:absolute;top:20px;right:28px;background:none;border:none;
  color:#000;font-size:42px;line-height:1;cursor:pointer;font-family:"Poiret One",cursive;
  transition:ease color .3s;z-index:2}
#lightbox .lb-close:hover{color:#00218f}
#lightbox .lb-bar{grid-column:1/4;grid-row:2;display:flex;flex-direction:column;
  align-items:center;gap:12px;width:100%;padding-top:16px}
#lightbox .lb-title{font-family:"Poiret One",cursive;text-transform:lowercase;
  font-size:26px;color:#000;line-height:1}
#lightbox .lb-count{text-transform:uppercase;letter-spacing:2px;font-size:11px;color:#747474}
#lightbox .lb-thumbs{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;max-width:860px}
#lightbox .lb-th{width:56px;height:70px;object-fit:cover;border-radius:10px 0;cursor:pointer;
  filter:grayscale(1);opacity:.5;transition:ease all .3s;border:none;padding:0}
#lightbox .lb-th:hover{opacity:1;filter:grayscale(0)}
#lightbox .lb-th.on{opacity:1;filter:grayscale(0);outline:2px solid #00218f;outline-offset:2px}
@media(max-width:640px){
  #lightbox{grid-template-columns:54px 1fr 54px;padding:2vh 1vw}
  #lightbox .lb-nav{font-size:40px;width:48px;height:48px}
  #lightbox .lb-img{max-height:64vh}
}

/* ---- forms (same palette) ---- */
.form{max-width:680px;display:flex;flex-direction:column;gap:20px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{text-transform:uppercase;font-size:11px;letter-spacing:2px;color:#272727}
.field input,.field textarea,.field select{font-family:inherit;font-size:15px;color:#000;
  background:#fff;border:1px solid #ddd;border-radius:18px 0;padding:14px 16px;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:#00218f}
.field textarea{resize:vertical;min-height:130px}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.field.two{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button.submit{align-self:flex-start;background:#00218f;color:#fff;border:none;cursor:pointer;
  text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:2px;
  padding:1.05rem 2.2rem;border-radius:20px 0;transition:ease all .4s}
button.submit:hover{box-shadow:#00008b33 0 7px 29px;transform:scale(1.02)}
button.submit:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.formnote{text-transform:uppercase;font-size:11px;letter-spacing:1.5px;line-height:1.9;color:#747474}
.formnote b{color:#00218f}
.formstatus{font-size:14px;line-height:1.6;color:#00218f;min-height:1.2em}

/* ---- gated shop notice ---- */
.gate{background:#fff;border:1px solid #ddd;border-radius:40px 0;padding:2.6rem 2.2rem;max-width:760px}
.gate .gh{font-family:"Poiret One",cursive;text-transform:lowercase;font-size:40px;color:#00218f;line-height:1;margin-bottom:1rem}
.gate p{text-transform:uppercase;font-size:12.5px;letter-spacing:1.5px;line-height:2;color:#272727}

/* ---- footer ---- */
.foot{border-top:1px solid #ddd;margin:90px 5vw 0;padding:40px 0 80px;display:flex;
  flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  font-family:"Poiret One",cursive;text-transform:lowercase;font-size:18px;color:#747474}
.foot .pili{display:flex;gap:10px;opacity:.35;font-size:15px;color:#00218f}
.foot .fl{display:flex;gap:22px;font-size:16px}
.foot .fl a{color:#747474}.foot .fl a:hover{color:#00218f}
.indicate{display:inline-block;animation:indicate 2.2s ease-in-out infinite}
@keyframes indicate{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}