/* Amado Lux: white, ink, navy. See BRAND.md */
:root{
  --white:#FFFFFF;    /* page background */
  --grey:#F4F4F4;     /* placeholders, alternate sections */
  --line:#E2E2E2;     /* dividers, dashed borders */
  --ink:#111111;      /* text, dark blocks */
  --ink-2:#555555;    /* secondary text */
  --accent:#1B2A4A;   /* navy: the one accent */
  --f:"Bricolage Grotesque",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font:400 1.0625rem/1.55 var(--f);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--grey);padding:.5rem}
h2{font-weight:700;font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.05;letter-spacing:-.02em;font-variation-settings:"wdth" 80;margin-bottom:1.5rem}
section{padding:clamp(3.5rem,8vw,6.5rem) clamp(1.25rem,5vw,4rem)}

.top{display:flex;justify-content:space-between;align-items:center;padding:1.25rem clamp(1.25rem,5vw,4rem)}
.studio{font-weight:600;text-decoration:none}
.top nav{display:flex;gap:1.5rem}.top nav a{text-decoration:none}.top nav a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}

/* hero: the name is the memorable thing */
.hero{display:grid;grid-template-columns:1fr 1.25fr;grid-template-areas:"name name" "text strip";gap:2rem 3rem;padding-top:1rem;align-items:end}
.name{grid-area:name;font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(5.5rem,27vw,24rem);line-height:.8;letter-spacing:-.045em;color:var(--accent);margin-left:-.04em}
.hero-text{grid-area:text;max-width:30rem;padding-bottom:1rem}
.lede{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.3;margin-bottom:2rem}
.lede a{text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.button{display:inline-block;background:var(--ink);color:var(--white);text-decoration:none;font-weight:600;padding:.95rem 1.5rem;border-radius:3px}
.button:hover{background:var(--accent)}
.strip{grid-area:strip;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:-4.5rem;position:relative}
.frame{aspect-ratio:3/4;background:var(--grey);position:relative;border-radius:2px;}
.f2{transform:translateY(2.5rem);background-color:var(--grey)}
.f3{transform:translateY(-1rem)}
.note{position:absolute;left:.6rem;bottom:.5rem;right:.6rem;font-size:.85rem;font-weight:500;line-height:1.2}

.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;background:var(--ink);color:var(--white)}
.numbers p{font-size:1rem;max-width:14rem}
.numbers strong{display:block;font-weight:700;font-size:clamp(2.6rem,5vw,4.25rem);line-height:1;letter-spacing:-.03em;font-variation-settings:"wdth" 80;color:var(--white);margin-bottom:.35rem}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:56rem;font-size:1.2rem}
.pending{margin-top:2.5rem;max-width:56rem;border:2px dashed #CFCFCF;padding:1.5rem;color:var(--ink-2)}

.videos{background:var(--grey)}
.reel{display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:.5rem}
.phone{flex:0 0 clamp(200px,24vw,280px);aspect-ratio:9/16;border-radius:22px;background:var(--white);border:2px solid var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:1.25rem}
.phone:first-child{background:var(--ink);color:var(--white)}
.phone p{font-weight:700;font-size:1.25rem;line-height:1.1}

.partners{max-width:60rem}
.partners div{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem 0;border-top:2px solid var(--line);align-items:baseline}
.partners dt{font-weight:700;font-size:clamp(1.5rem,3.4vw,2.5rem);letter-spacing:-.02em;font-variation-settings:"wdth" 80}
.partners dd{font-size:1.05rem}

.hello{background:var(--ink);color:var(--white)}
.hello h2{max-width:20ch;font-size:clamp(2.2rem,5vw,4rem)}
.hello p{max-width:36rem;font-size:1.2rem}
.mail{display:inline-block;margin:2rem 0 1rem;font-weight:700;font-size:clamp(1.3rem,4.4vw,3rem);letter-spacing:-.02em;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:8px;word-break:break-word}
.kit{font-size:1rem!important;opacity:.85}

.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.5rem clamp(1.25rem,5vw,4rem);font-size:.95rem}

@media (max-width:760px){
  .top nav{gap:1rem;font-size:.95rem}
  .hero{grid-template-columns:1fr;grid-template-areas:"name" "strip" "text"}
  .strip{margin-top:0;width:100%}
  .numbers,.cols{grid-template-columns:1fr;gap:1.5rem}
  .partners div{grid-template-columns:1fr;gap:.2rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.facts{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin:-1rem 0 2rem;font-size:1rem}
.facts strong{font-weight:700;font-size:1.35rem;color:var(--accent);letter-spacing:-.01em}
.frame::after{content:"photo";position:absolute;top:.5rem;right:.6rem;font-size:.75rem;opacity:.55}
@media (max-width:760px){.studio{font-size:.95rem}.top nav{gap:.8rem}.f2{transform:translateY(1.2rem)}.hero-text{padding-top:1rem}}

.made-lede{max-width:38rem;font-size:1.15rem;line-height:1.5;margin:0 0 2rem}

/* v6: photos */
.hero{grid-template-columns:1fr 1fr;grid-template-areas:"name name" "text portrait"}
.portrait{grid-area:portrait;margin-top:-6rem;position:relative;justify-self:end;width:min(100%,34rem)}
.portrait img,.album img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 35%;background:var(--grey);border-radius:2px}
.life{padding-top:0}
.album{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;align-items:start}
.album figure{margin:0}
.p1{grid-column:1/6}
.album .p2{grid-column:6/10;margin-top:5rem}
.album .p3{grid-column:10/13;margin-top:10rem}
.album .p4{grid-column:2/6;margin-top:1rem}
.album .p5{grid-column:7/11;margin-top:-2rem}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;grid-template-areas:"name" "portrait" "text"}
  .portrait{margin-top:0;width:100%}
  .album{grid-template-columns:1fr 1fr;gap:.6rem}
  .album figure,.album .p2,.album .p3,.album .p4,.album .p5{grid-column:auto;margin-top:0}
  .album .p1{grid-column:1/3}
  .p3,.p5{transform:translateY(1.5rem)}
}

/* v7 */
.handle{display:inline-block;font-weight:700;font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;margin:-1rem 0 1.75rem}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.text-link{font-weight:600;text-decoration-color:var(--accent);text-underline-offset:4px}
.stats{display:grid;grid-template-columns:repeat(5,auto);justify-content:start;gap:2rem 3.5rem;margin-top:3rem;padding-top:2rem;border-top:2px solid var(--line)}
.stats div{display:flex;flex-direction:column-reverse}
.stats dd{font-weight:700;font-size:clamp(2.2rem,4vw,3.5rem);line-height:1;letter-spacing:-.03em;font-variation-settings:"wdth" 80;color:var(--accent);margin:0 0 .35rem}
.stats dt{font-size:.95rem;color:var(--ink-2);max-width:12rem}
.source{margin-top:1.5rem;font-size:.9rem;color:var(--ink-2)}
.clips{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.clip{display:flex;flex-direction:column;aspect-ratio:9/14;padding:1.25rem;background:var(--white);border:2px solid var(--ink);border-radius:18px;text-decoration:none}
.clip:first-child{background:var(--accent);border-color:var(--accent);color:var(--white)}
.views{font-weight:800;font-size:clamp(2.2rem,3.8vw,3.4rem);line-height:.95;letter-spacing:-.035em;font-variation-settings:"wdth" 75}
.clip-t{margin-top:auto;font-weight:700;font-size:1.2rem;line-height:1.15}
.clip-d{font-size:.95rem;opacity:.8}
.clip-go{margin-top:1rem;font-weight:600;font-size:.95rem;text-decoration:underline;text-underline-offset:4px}
.clip:hover{border-color:var(--accent)}
.clip:not(:first-child):hover .views{color:var(--accent)}
.hello .kit a{color:var(--white);text-underline-offset:4px}
.foot a{text-decoration-color:var(--accent);text-underline-offset:3px;font-weight:600}
@media (max-width:980px){.stats{grid-template-columns:repeat(3,auto)}.clips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stats{grid-template-columns:repeat(2,1fr);gap:1.5rem}.clip{aspect-ratio:auto;min-height:13rem}}
.stats dd a{color:inherit;text-decoration:none}.stats dd a:hover{text-decoration:underline}.partners dd a{text-decoration-color:var(--accent);text-underline-offset:3px}
.aud-line{margin-top:2rem;font-weight:700;font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--accent)}