/* =========================================================
   MARU - Can you get into it?
   Palette is lifted from the photographs; photography leads.
   ========================================================= */
:root{
  --cream:#F3EEE5;
  --carpet:#EDE6DA;          /* the carpet tone the hero sits on */
  --cardboard:#C99A5A;
  --walnut:#6E4027;
  --white:#FAF8F3;
  --charcoal:#282421;
  --tabby:#786451;
  --rose:#C98F87;            /* dusty rose, from Maru nose */
  --line:rgba(40,36,33,.12);
  --shadow:0 1px 2px rgba(40,36,33,.06),0 8px 24px rgba(40,36,33,.07);
  --shadow-lift:0 2px 6px rgba(40,36,33,.08),0 18px 40px rgba(40,36,33,.12);
  --head:"Anton","Archivo Black","Arial Narrow",Impact,sans-serif;
  --body:"Inter","Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","Noto Sans Mono",ui-monospace,SFMono-Regular,monospace;
  --wrap:1200px;
  --pad:clamp(20px,5vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--charcoal);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--walnut);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--charcoal);
  color:var(--white);padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--head);font-weight:400;letter-spacing:.005em;line-height:1.02;
  margin:0;text-wrap:balance}
h2{font-size:clamp(30px,4.6vw,54px)}
h3{font-size:clamp(19px,2vw,23px);line-height:1.15}
p{margin:0 0 1.1em}
.lede{font-size:clamp(17px,1.55vw,20px);color:var(--tabby);max-width:62ch}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cardboard);margin:0 0 14px}
.section{padding:clamp(64px,9vw,120px) 0}
.section--warm{background:var(--white)}
.section__head{max-width:70ch;margin-bottom:clamp(32px,4.5vw,56px)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:90;background:rgba(243,238,229,.94);
  border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(6px)){.hdr{backdrop-filter:saturate(140%) blur(6px)}}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:66px;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand__mark{width:26px;height:26px;flex:none;color:var(--walnut)}
.brand__name{font-family:var(--head);font-size:23px;letter-spacing:.09em}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav a{font-size:15px;text-decoration:none;color:var(--tabby);padding:6px 0;
  border-bottom:1.5px solid transparent;transition:color .18s,border-color .18s}
.nav a:hover{color:var(--charcoal);border-bottom-color:var(--cardboard)}
.nav .is-x{font-weight:600;color:var(--charcoal)}
.menu{display:none}
.menu>summary{list-style:none;cursor:pointer;padding:9px 12px;border:1px solid var(--line);
  border-radius:8px;font-size:14px;background:var(--white)}
.menu>summary::-webkit-details-marker{display:none}

/* ---------- hero : exact 3:1, filled edge to edge with photography ---------- */
.hero{position:relative;background:var(--carpet)}
.hero__media{position:relative;width:100%;aspect-ratio:3/1;overflow:hidden;background:var(--carpet)}
.hero__img{position:absolute;top:0;height:100%;object-fit:cover}
/* Frame A keeps its native square so the carpet under the cats survives the
   crop; frame B carries the carpet across the middle. Both feather into the
   shared carpet tone, so the two photographs meet without a vertical edge. */
.hero__img--a{left:0;width:auto;object-position:50% 50%;
  -webkit-mask-image:linear-gradient(to right,#000 52%,transparent 99%);
          mask-image:linear-gradient(to right,#000 52%,transparent 99%)}
.hero__img--b{right:0;width:54%;object-position:50% 62%;
  -webkit-mask-image:linear-gradient(to left,#000 62%,transparent 100%);
          mask-image:linear-gradient(to left,#000 62%,transparent 100%)}
.hero__copy{position:absolute;inset:0;
  padding:0 var(--pad) clamp(20px,3.8vw,52px);
  display:flex;flex-direction:column;justify-content:center}
/* the type lands on open carpet, clear of both cats and of Maru's face */
.hero__inner{margin-left:30%;max-width:30%}
.hero h1{font-size:clamp(22px,3.5vw,60px);color:var(--charcoal);
  text-shadow:0 1px 0 rgba(250,248,243,.55)}
.hero__sub{font-style:italic;font-weight:500;
  font-size:clamp(13px,1.5vw,26px);color:var(--walnut);margin:clamp(8px,1.1vw,18px) 0 0}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(14px,1.8vw,28px)}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-size:15px;font-weight:600;text-decoration:none;
  padding:11px 20px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;
  font-family:var(--body);transition:transform .18s,background .18s,border-color .18s,color .18s}
.btn--solid{background:var(--charcoal);color:var(--white)}
.btn--solid:hover{background:var(--walnut)}
.btn--ghost{background:rgba(250,248,243,.82);color:var(--charcoal);border-color:rgba(40,36,33,.28)}
.btn--ghost:hover{background:var(--white);border-color:var(--walnut)}
.btn:hover{transform:translateY(-1px)}
.hero .btn{font-size:clamp(12px,.95vw,15px);padding:clamp(7px,.75vw,12px) clamp(12px,1.3vw,22px)}

/* ---------- meet maru ---------- */
.meet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,72px);align-items:center}
.meet__fig{margin:0}
.meet__fig img{width:100%;border-radius:12px;box-shadow:var(--shadow)}

/* ---------- box lab ---------- */
.cards{display:grid;gap:clamp(18px,2.4vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.card{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card__img{aspect-ratio:1/1;overflow:hidden;background:var(--carpet)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .card__img img{transform:scale(1.025)}
.card__body{padding:20px 22px 24px}
.card__no{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cardboard);display:block;margin-bottom:7px}
.spec{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:13px;line-height:1.75;color:var(--tabby)}
.spec b{font-weight:400;color:var(--tabby);display:inline-block;min-width:82px}
.spec span{color:var(--charcoal)}
.card__note{margin:14px 0 0;font-size:15px;color:var(--tabby);font-style:italic}

/* ---------- liquid ---------- */
.liquid{display:grid;gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(262px,1fr))}
.liquid figure{margin:0;background:var(--cream);border-radius:12px;overflow:hidden;
  border:1px solid var(--line);transition:transform .22s ease,box-shadow .22s ease}
.liquid figure:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.liquid img{width:100%;height:auto}
.liquid figcaption{padding:16px 18px 20px;font-family:var(--mono);font-size:12.5px;
  line-height:1.9;color:var(--tabby)}
.liquid figcaption b{font-weight:400;display:inline-block;min-width:76px;white-space:nowrap}
.liquid figcaption span{color:var(--charcoal)}
.jp{font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",var(--body)}

/* ---------- gallery ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,36px)}
.filter{font-family:var(--body);font-size:14px;font-weight:500;padding:8px 16px;cursor:pointer;
  background:transparent;color:var(--tabby);border:1.5px solid var(--line);border-radius:999px;
  transition:background .18s,color .18s,border-color .18s}
.filter:hover{border-color:var(--cardboard);color:var(--charcoal)}
.filter[aria-pressed="true"]{background:var(--charcoal);border-color:var(--charcoal);color:var(--white)}
.grid{columns:4 240px;column-gap:clamp(12px,1.5vw,18px)}
.shot{break-inside:avoid;margin:0 0 clamp(12px,1.5vw,18px);position:relative;
  border-radius:10px;overflow:hidden;background:var(--carpet);display:block;
  text-decoration:none;
  transition:transform .22s ease,box-shadow .22s ease}
.shot:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.shot img{width:100%;height:auto;transition:transform .4s ease}
.shot:hover img{transform:scale(1.02)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  font-size:13.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65);
  background:linear-gradient(to top,rgba(24,20,17,.66),transparent);
  opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease}
.shot:hover figcaption,.shot:focus-visible figcaption{opacity:1;transform:none}
.shot[hidden]{display:none}

/* ---------- formula ---------- */
.formula{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:repeat(3,minmax(0,1fr))}
.step{margin:0}
.step img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}
.step__n{font-family:var(--head);font-size:38px;color:var(--cardboard);display:block;
  margin:18px 0 4px;line-height:1}
.step p{margin:0;font-size:16.5px;color:var(--tabby)}
.closing{font-family:var(--head);font-size:clamp(24px,3.4vw,42px);text-align:center;
  margin:clamp(44px,6vw,72px) auto 0;max-width:22ch;line-height:1.12}

/* ---------- friends ---------- */
.friends{display:grid;gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.friends figure{margin:0}
.friends img{width:100%;border-radius:12px;box-shadow:var(--shadow)}
.friends figcaption{margin-top:12px;font-size:14.5px;color:var(--tabby)}

/* ---------- social ---------- */
.social{background:var(--walnut);color:var(--white)}
.social .eyebrow{color:var(--cardboard)}
.social h2{color:var(--white)}
.social__bio{font-family:var(--mono);font-size:15px;line-height:1.8;color:#EBDCCB;
  border-left:2px solid var(--cardboard);padding-left:20px;margin:26px 0 30px;max-width:60ch}
.social__links{display:flex;flex-wrap:wrap;gap:12px}
.social .btn--solid{background:var(--cream);color:var(--charcoal)}
.social .btn--solid:hover{background:#fff}
.social .btn--ghost{background:transparent;color:var(--white);border-color:rgba(250,248,243,.42)}
.social .btn--ghost:hover{background:rgba(250,248,243,.12);border-color:var(--cream)}

/* ---------- buy / contract address ---------- */
.btn--buy{padding:9px 18px;font-size:14px}
.hdr .btn--buy{background:var(--cardboard);color:var(--charcoal)}
.hdr .btn--buy:hover{background:var(--walnut);color:var(--white)}
.ca{margin-top:clamp(34px,4.5vw,52px);background:rgba(250,248,243,.09);
  border:1px solid rgba(250,248,243,.2);border-radius:12px;padding:clamp(20px,2.6vw,28px)}
.ca__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.ca__field{min-width:0;flex:1 1 300px}
.ca__actions{display:flex;flex-wrap:wrap;gap:10px;flex:none}
.ca__label{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cardboard);margin:0 0 6px}
.ca__value{font-family:var(--mono);font-size:clamp(15px,1.7vw,19px);color:var(--white);
  margin:0;word-break:break-all}
.ca__status{margin:12px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--cardboard);
  min-height:1.2em}
.social .ca__copy{border-color:rgba(250,248,243,.42)}
.ca__buy{flex:none}
.ca__note{margin:16px 0 0;font-size:13.5px;line-height:1.7;color:#D6C6B4;max-width:66ch}

/* ---------- footer ---------- */
.ftr{background:var(--charcoal);color:#CFC7BC;padding:clamp(48px,6vw,72px) 0 36px;font-size:14.5px}
.ftr a{color:#CFC7BC;text-decoration:none;border-bottom:1px solid transparent}
.ftr a:hover{color:#fff;border-bottom-color:var(--cardboard)}
.ftr__top{display:grid;gap:32px;grid-template-columns:1.4fr 1fr 1fr;align-items:start}
.ftr__name{font-family:var(--head);font-size:30px;letter-spacing:.09em;color:var(--white)}
.ftr__tag{margin:10px 0 0;color:#A79C8F}
.ftr__h{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8C8175;margin:0 0 12px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr__legal{margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid rgba(250,248,243,.14);
  color:#8C8175;font-size:13px;line-height:1.8}
.ftr__legal p{margin:0 0 .5em;max-width:88ch}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;border:0;padding:0;width:100%;height:100%;
  max-width:100%;max-height:100%;background:rgba(24,20,17,.95);color:var(--white)}
.lb::backdrop{background:rgba(24,20,17,.95)}
.lb__in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(56px,7vw,78px) clamp(16px,7vw,96px)}
.lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-height:100%;min-height:0}
.lb__fig img{max-width:100%;max-height:72vh;width:auto;height:auto;border-radius:6px;
  object-fit:contain}
.lb__cap{font-size:15px;text-align:center;max-width:62ch;color:#E3DACE}
.lb__cap b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cardboard);font-weight:400;margin-bottom:6px}
.lb__btn{position:absolute;background:rgba(250,248,243,.1);border:1px solid rgba(250,248,243,.3);
  color:var(--white);width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:20px;
  line-height:1;display:grid;place-items:center;transition:background .18s}
.lb__btn:hover{background:rgba(250,248,243,.24)}
.lb__prev{left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.lb__next{right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.lb__close{top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px)}
.lb__count{position:absolute;top:clamp(20px,2.4vw,30px);left:clamp(16px,3vw,34px);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:#9C9184}

/* ---------- reveal on scroll ---------- */
.rev{opacity:0;transform:translateY(14px)}
.rev.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.no-js .rev{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .nav{display:none}
  .menu{display:block;position:relative}
  .menu[open] .nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    position:absolute;right:0;top:calc(100% + 10px);background:var(--white);
    border:1px solid var(--line);border-radius:10px;padding:10px 6px;min-width:200px;
    box-shadow:var(--shadow-lift)}
  .menu[open] .nav a{padding:9px 16px;width:100%;border-bottom:0}
  .meet{grid-template-columns:1fr}
  .meet__fig{order:-1;max-width:460px}
  .formula{grid-template-columns:1fr}
  .step{display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:center}
  .step__n{margin-top:0}
  .ftr__top{grid-template-columns:1fr 1fr}
}
/* Mobile: its own 4:5 crop of an original frame - never the 3:1 squeezed down */
@media (max-width:760px){
  body{font-size:16px}
  .hero__media{aspect-ratio:4/5}
  .hero__img--a{display:none}
  /* mobile keeps Maru's face and the box opening in frame and leaves the
     lower carpet clear, so the headline never lands on him */
  .hero__img--b{left:0;right:auto;width:100%;object-position:50% 24%;
    -webkit-mask-image:none;mask-image:none}
  .hero__copy{justify-content:flex-end;padding-bottom:clamp(22px,6vw,40px)}
  .hero__inner{margin-left:0;max-width:100%}
  .hero h1{font-size:clamp(30px,8.6vw,46px)}
  .hero__sub{font-size:clamp(15px,3.6vw,19px)}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero .btn{text-align:center;font-size:15px;padding:12px 18px}
  .grid{columns:2 150px}
  .ftr__top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
}
@media print{.hdr,.lb,.hero__cta,.filters{display:none}}