/* ============================================================
   lashes-serum.co.uk — Scandi editorial design system
   ============================================================ */

:root{
  --paper:#f6f5f3;
  --paper-2:#efedea;
  --paper-3:#e7e4e0;
  --blush:#e3d3cf;
  --blush-deep:#cbb3ae;
  --ink:#3b3a38;
  --ink-soft:#6f6d69;
  --ink-faint:#9b9894;
  --line:#dedbd6;
  --line-strong:#c9c5bf;
  --white:#fdfdfc;

  --display:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --body:'Inter',-apple-system,'Segoe UI',sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.75;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 16px;}

/* ---------- type ---------- */
.d1,.d2,.d3{font-family:var(--display);font-weight:300;letter-spacing:.06em;line-height:1.02;margin:0;text-transform:uppercase;}
.d1{font-size:clamp(3.2rem,11vw,9rem);letter-spacing:.1em;}
.d2{font-size:clamp(2.1rem,5.4vw,4.4rem);}
.d3{font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:.08em;}
.kicker{font-family:var(--display);text-transform:uppercase;letter-spacing:.34em;font-size:.68rem;color:var(--ink-faint);margin:0 0 1.6rem;}
.lead{font-size:clamp(1rem,1.35vw,1.12rem);color:var(--ink-soft);max-width:62ch;}
p{margin:0 0 1.15em;}
.mono{font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;font-size:.7rem;color:var(--ink-faint);}

.link{
  display:inline-block;font-family:var(--display);letter-spacing:.14em;text-transform:lowercase;
  font-size:.86rem;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;
  transition:opacity .25s, letter-spacing .25s;
}
.link:hover{opacity:.55;letter-spacing:.2em;}
.link--up{text-transform:uppercase;font-size:.72rem;letter-spacing:.24em;}

.arrow-down{width:1px;height:64px;background:var(--line-strong);position:relative;margin:2.4rem 0;}
.arrow-down::after{content:"";position:absolute;bottom:0;left:-4px;width:9px;height:9px;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);transform:rotate(45deg);}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:60;background:rgba(246,245,243,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:72px;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
.brand{font-family:var(--display);text-transform:uppercase;letter-spacing:.3em;font-size:.86rem;text-decoration:none;}
.nav{display:flex;gap:1.9rem;}
.nav a{font-family:var(--display);font-size:.82rem;letter-spacing:.1em;text-decoration:none;color:var(--ink-soft);transition:color .2s;}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink);font-style:italic;border-bottom:1px solid var(--ink);}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;}
.burger span{display:block;width:22px;height:1px;background:var(--ink);margin:5px 0;transition:.3s;}
.head__cta{font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;}

@media(max-width:900px){
  .nav,.head__cta{display:none;}
  .burger{display:block;}
  .nav.open{
    display:flex;flex-direction:column;position:fixed;inset:72px 0 auto 0;background:var(--paper-2);
    padding:2.4rem var(--gut) 3rem;gap:1.1rem;border-bottom:1px solid var(--line);
  }
  .nav.open a{font-size:1.5rem;letter-spacing:.04em;text-transform:lowercase;}
}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--line);}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;min-height:74vh;}
.hero__left{padding:clamp(3rem,7vw,6rem) var(--gut);display:flex;flex-direction:column;justify-content:space-between;background:var(--paper-2);}
.hero__right{background:var(--white);display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,4vw,4rem) var(--gut) 0;}
.hero__right .d1{align-self:flex-end;text-align:right;}
.hero__img{margin-top:auto;}
.hero__img img{width:100%;height:clamp(190px,26vw,320px);object-fit:cover;}
.hero__social{display:flex;flex-direction:column;gap:.4rem;}
.hero__social a{font-family:var(--display);font-size:.82rem;letter-spacing:.06em;text-decoration:none;color:var(--ink-soft);}
.hero__social a:hover{color:var(--ink);}
@media(max-width:820px){
  .hero__grid{grid-template-columns:1fr;}
  .hero__right{order:-1;padding-top:3rem;}
  .hero__right .d1{align-self:flex-start;text-align:left;}
  .hero__left{padding-bottom:3rem;}
}

/* ---------- sections ---------- */
.sec{padding:clamp(4rem,9vw,8rem) 0;}
.sec--alt{background:var(--paper-2);}
.sec--white{background:var(--white);}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.4rem,5vw,4rem);}

/* editorial image grid (screenshot 3) */
.edit-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2.2vw,28px);align-items:start;}
.edit-grid figure{margin:0;}
.edit-grid img{width:100%;object-fit:cover;}
.eg-a{grid-column:span 3;}
.eg-a img{aspect-ratio:1/1;}
.eg-b{grid-column:span 3;margin-top:2.6rem;}
.eg-b img{aspect-ratio:4/5;}
.eg-c{grid-column:span 6;}
.eg-c img{aspect-ratio:16/13;}
.eg-note{grid-column:span 3;padding-top:1rem;}
figcaption{font-family:var(--display);letter-spacing:.14em;font-size:.72rem;color:var(--ink-faint);margin-top:.7rem;text-transform:lowercase;}
@media(max-width:820px){
  .eg-a,.eg-b{grid-column:span 6;margin-top:0;}
  .eg-c,.eg-note{grid-column:span 12;}
}

/* ---------- top pick ---------- */
.pick{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
.pick__media{background:var(--paper-3);padding:clamp(2rem,4vw,3.4rem);display:flex;align-items:center;justify-content:center;position:relative;}
.pick__media img{max-height:360px;width:auto;mix-blend-mode:multiply;}
.pick__badge{position:absolute;top:0;left:0;background:var(--ink);color:var(--paper);font-family:var(--display);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;padding:.6rem 1.1rem;}
.pick__score{font-family:var(--display);font-size:clamp(3rem,7vw,5.4rem);font-weight:300;line-height:1;letter-spacing:.02em;}
.pick__score small{display:block;font-size:.66rem;letter-spacing:.26em;color:var(--ink-faint);margin-top:.6rem;}
.tickset{list-style:none;margin:1.8rem 0;padding:0;}
.tickset li{padding:.55rem 0 .55rem 1.7rem;border-bottom:1px solid var(--line);position:relative;font-size:.95rem;color:var(--ink-soft);}
.tickset li::before{content:"";position:absolute;left:0;top:1.35em;width:9px;height:1px;background:var(--blush-deep);}
@media(max-width:820px){.pick{grid-template-columns:1fr;}}

/* ---------- ranking cards ---------- */
.rank-list{display:flex;flex-direction:column;}
.rank{
  display:grid;grid-template-columns:74px 200px 1fr 220px;gap:clamp(1.2rem,3vw,2.6rem);
  padding:clamp(2rem,4vw,3.2rem) 0;border-top:1px solid var(--line);align-items:start;
}
.rank:last-child{border-bottom:1px solid var(--line);}
.rank--top{background:linear-gradient(90deg,rgba(227,211,207,.34),rgba(227,211,207,0));}
.rank__no{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.4rem);color:var(--blush-deep);letter-spacing:.04em;padding-left:clamp(0px,1vw,14px);}
.rank__shot{background:var(--white);border:1px solid var(--line);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:1.2rem;}
.rank__shot img{max-height:100%;width:auto;mix-blend-mode:multiply;}
.rank__name{font-family:var(--display);font-size:1.5rem;letter-spacing:.03em;font-weight:400;margin:0 0 .2rem;}
.rank__meta{font-size:.78rem;letter-spacing:.06em;color:var(--ink-faint);margin:0 0 1rem;}
.rank__body{font-size:.96rem;color:var(--ink-soft);margin:0 0 1.2rem;}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;}
.tags li{font-family:var(--display);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-strong);padding:.34rem .7rem;color:var(--ink-soft);}
.tags li.is-warn{border-color:var(--blush-deep);color:var(--blush-deep);}
.rank__side{border-left:1px solid var(--line);padding-left:clamp(1rem,2vw,1.8rem);}
.rank__score{font-family:var(--display);font-size:2.6rem;line-height:1;}
.rank__score span{font-size:.64rem;letter-spacing:.24em;color:var(--ink-faint);display:block;margin-top:.4rem;text-transform:uppercase;}
.bar{height:2px;background:var(--paper-3);margin:1.3rem 0 .5rem;}
.bar i{display:block;height:100%;background:var(--blush-deep);}
.bar-l{font-size:.72rem;letter-spacing:.12em;color:var(--ink-faint);font-family:var(--display);}
.price{font-family:var(--display);font-size:1.05rem;letter-spacing:.06em;margin:1.2rem 0 .3rem;}
.price small{display:block;font-size:.7rem;letter-spacing:.14em;color:var(--ink-faint);margin-top:.2rem;}
@media(max-width:1040px){
  .rank{grid-template-columns:56px 150px 1fr;}
  .rank__side{grid-column:2/-1;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:1.4rem;margin-top:.4rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:end;}
  .bar{grid-column:1/-1;}
}
@media(max-width:620px){
  .rank{grid-template-columns:44px 1fr;}
  .rank__shot{grid-column:2;max-width:190px;}
  .rank__main{grid-column:2;}
  .rank__side{grid-column:1/-1;}
}

/* ---------- table ---------- */
.table-scroll{overflow-x:auto;border-top:1px solid var(--line-strong);}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:760px;}
th,td{text-align:left;padding:1rem .8rem;border-bottom:1px solid var(--line);}
th{font-family:var(--display);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-weight:400;}
tbody tr:hover{background:var(--paper-2);}
td:first-child{font-family:var(--display);color:var(--blush-deep);}

/* ---------- steps / criteria ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.6rem,3.4vw,3rem);}
.col h3{font-family:var(--display);font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;margin:0 0 .8rem;padding-top:1.2rem;border-top:1px solid var(--ink);}
.col p{font-size:.92rem;color:var(--ink-soft);margin:0;}
.col .num{font-family:var(--display);font-size:.7rem;letter-spacing:.24em;color:var(--blush-deep);display:block;margin-bottom:.3rem;}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;list-style:none;padding:1.5rem 2.5rem 1.5rem 0;position:relative;
  font-family:var(--display);font-size:1.08rem;letter-spacing:.02em;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:1.35rem;font-family:var(--display);font-size:1.3rem;color:var(--ink-faint);transition:transform .3s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .ans{padding:0 clamp(0px,6vw,90px) 1.7rem 0;color:var(--ink-soft);font-size:.96rem;}

/* ---------- hashtag band ---------- */
.band{padding:clamp(3.4rem,7vw,6rem) 0;text-align:left;border-top:1px solid var(--line);}
.band .d1{font-size:clamp(2.2rem,8.6vw,7rem);}

/* ---------- notes / callout ---------- */
.note{border-left:1px solid var(--blush-deep);padding:.2rem 0 .2rem 1.4rem;color:var(--ink-soft);font-size:.92rem;max-width:70ch;}

/* ---------- forms ---------- */
.form{display:grid;gap:1.4rem;max-width:560px;}
label{font-family:var(--display);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:.5rem;}
input,textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-strong);
  padding:.7rem 0;font-family:var(--body);font-size:1rem;color:var(--ink);font-weight:300;
}
input:focus,textarea:focus{outline:none;border-color:var(--ink);}
button.btn{
  justify-self:start;background:var(--ink);color:var(--paper);border:0;cursor:pointer;
  font-family:var(--display);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;padding:1rem 2.4rem;
  transition:opacity .25s;
}
button.btn:hover{opacity:.82;}

/* ---------- footer ---------- */
.foot{background:var(--paper-3);padding:clamp(3rem,6vw,4.6rem) 0 2rem;}
.foot__top{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.foot__nav{display:flex;gap:1.6rem;flex-wrap:wrap;}
.foot__nav a{font-family:var(--display);font-size:.86rem;letter-spacing:.06em;text-decoration:none;color:var(--ink-soft);}
.foot__nav a:hover{color:var(--ink);}
.foot__soc{display:flex;flex-direction:column;gap:.3rem;text-align:right;}
.foot__soc span{font-family:var(--display);font-size:.8rem;color:var(--ink-faint);}
.foot__bot{margin-top:clamp(2.2rem,5vw,3.4rem);padding-top:1.4rem;border-top:1px solid var(--line-strong);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.74rem;color:var(--ink-faint);letter-spacing:.04em;}
.foot__dis{max-width:70ch;font-size:.74rem;color:var(--ink-faint);margin-top:1.6rem;line-height:1.7;}

/* ---------- breadcrumb ---------- */
.crumb{padding:1.6rem 0 0;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;color:var(--ink-faint);}
.crumb a{text-decoration:none;}
.crumb a:hover{color:var(--ink);}

/* ---------- page header ---------- */
.phead{padding:clamp(2.4rem,5vw,4.4rem) 0 clamp(2.4rem,5vw,4rem);border-bottom:1px solid var(--line);}

/* ---------- prose ---------- */
.prose{max-width:74ch;}
.prose h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:1.25rem;margin:2.8rem 0 1rem;}
.prose h3{font-family:var(--display);font-weight:400;letter-spacing:.05em;font-size:1.08rem;margin:2rem 0 .6rem;}
.prose ul{padding-left:1.1rem;color:var(--ink-soft);}
.prose li{margin-bottom:.5rem;}
.prose a{color:var(--ink);}

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