*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#ece9e1;color:#111;
  font-family:Arial,Helvetica,sans-serif;
  padding:54px 5.2vw 76px;
}
a{color:inherit;text-decoration:none}
.top{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:54px;
}
.brand{
  display:block;font-size:clamp(38px,3.55vw,56px);
  line-height:.83;font-weight:800;letter-spacing:-.065em;
}
.meta{display:flex;flex-direction:column;align-items:flex-start;
  font-size:15px;line-height:1.25;letter-spacing:.025em;padding-top:5px}
.meta small{font-size:13px;opacity:.58;margin-top:4px}
.portfolio{width:100%}
.row{
  display:grid;grid-template-columns:140px minmax(0,1fr);
  column-gap:34px;border-top:1px solid rgba(17,17,17,.12);
  padding:11px 0;align-items:stretch;
}
.label{display:flex;flex-direction:column;align-items:flex-start;padding-top:13px}
.num{font-size:15px;margin-bottom:19px}
.label strong{font-size:25px;line-height:1;font-weight:700;letter-spacing:-.035em;margin-bottom:19px}
.arrow{font-size:22px}
.cover{margin:0;overflow:hidden;width:100%;background:#d8d3c9}
.cover-frame{aspect-ratio:2.35/1}
.cover-frames{aspect-ratio:2/1}
.cover-rolo{aspect-ratio:2.35/1;background:transparent}
.cover-analog{aspect-ratio:2.35/1;background:#111}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.cover-frame img{object-position:center 54%}
.cover-frames img{object-position:center 44%}

/* ROLO: borderless source crop, ceiling favored, no hover sharpening/zoom. */
.cover-analog img{width:100%;height:100%;object-fit:cover;object-position:center 52%;display:block}

.cover-rolo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:none!important;
  display:block;
}

/* BIO: intentionally breaks the wide rhythm.
   Original ratio is preserved; smaller and almost centered, but deliberately off by a little. */
.cover-bio{
  width:100%;
  aspect-ratio:2.20/1;
  justify-self:stretch;
  transform:none;
  overflow:hidden;
  background:#d8d3c9;
  align-self:stretch;
}
.cover-bio img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 48%;
  display:block;
}

@media (hover:hover) and (pointer:fine){
  .cover-frame img,.cover-frames img{transition:transform .4s ease}
  .row:hover .cover-frame img,.row:hover .cover-frames img{transform:scale(1.004)}
}
@media(max-width:700px){
  body{padding:24px 20px 42px}
  .top{margin-bottom:38px}
  .brand{font-size:36px}
  .meta{font-size:12px;padding-top:2px}
  .meta small{font-size:11px}
  .row{grid-template-columns:78px minmax(0,1fr);column-gap:15px;padding:10px 0}
  .label{padding-top:7px}
  .num{font-size:11px;margin-bottom:10px}
  .label strong{font-size:18px;margin-bottom:10px}
  .arrow{font-size:16px}
  .cover-frame{aspect-ratio:2.2/1}
  .cover-frames{aspect-ratio:1.95/1}
  .cover-rolo{aspect-ratio:2.2/1}
  .cover-analog{aspect-ratio:2.2/1}
  .cover-bio{
    width:100%;
    aspect-ratio:2.05/1;
    transform:none;
  }
}



/* ===== MELI-MELO BACKGROUND ONLY ===== */
/* Keeps all photography untouched; these layers sit behind the site content. */
body{
  position:relative;
  overflow-x:hidden;
  background:#eee9df;
}

/* paper / offset-print texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 11%, rgba(20,18,15,.055) 0 .55px, transparent .75px) 0 0/7px 7px,
    radial-gradient(circle at 68% 44%, rgba(20,18,15,.035) 0 .45px, transparent .7px) 0 0/11px 11px,
    repeating-linear-gradient(
      0deg,
      rgba(56,45,34,.018) 0px,
      rgba(56,45,34,.018) 1px,
      transparent 1px,
      transparent 4px
    );
  opacity:.34;
}

/* oversized 80s pink printed polygon, now on its own layer for subtle parallax */
.bg-polygon{
  position:fixed;
  z-index:0;
  pointer-events:none;
  width:82vw;
  height:118vh;
  left:-25vw;
  top:-9vh;
  background:rgba(219,103,145,.29);
  clip-path:polygon(12% 4%, 76% 0%, 99% 71%, 57% 97%, 0% 47%);
  transform:translate3d(0,0,0) rotate(-8deg);
  transform-origin:45% 48%;
  mix-blend-mode:multiply;
  will-change:transform;
}

/* diagonal registration / print line — no photo filters */
.top::before{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  width:145vw;
  height:1px;
  left:-20vw;
  top:43vh;
  background:rgba(25,22,20,.22);
  transform:rotate(-13deg);
  transform-origin:center;
}

/* second faint broken registration line */
.top::after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  width:135vw;
  height:1px;
  left:-14vw;
  bottom:13vh;
  background:rgba(25,22,20,.11);
  transform:rotate(2.5deg);
  transform-origin:center;
}

.top,.portfolio{
  position:relative;
  z-index:1;
}

@media(max-width:700px){
  .bg-polygon{
    width:112vw;
    height:112vh;
    left:-44vw;
    top:-4vh;
    transform:translate3d(0,0,0) rotate(-9deg);
  }
  .top::before{
    width:170vw;
    left:-35vw;
    top:41vh;
    transform:rotate(-14deg);
  }
}
/* ===== END MELI-MELO BACKGROUND ===== */