/* ============================================================
   MARTIN GROUP — Editorial "Lookbook" frontend
   Warm stone paper · electric cobalt · high-contrast fashion serif
   ============================================================ */
:root {
  --paper: #e7e3d9;
  --paper-2: #f3efe6;
  --cream: #f7f3ea;
  --ink: #16150f;
  --muted: #6d6a5e;
  --line: #cdc7b8;
  --blue: #1f2ce0;         /* electric cobalt — signature */
  --blue-ink: #eae7ff;
  --serif: "Fraunces", "Playfair Display", Georgia, serif;
  --sans: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ar: "El Messiri", "Cairo", "Tajawal", sans-serif;
  --ar-body: "Cairo", "Tajawal", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[dir="rtl"] body { font-family: var(--ar-body); }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
.container { width: min(1320px, 92%); margin: 0 auto; }
::selection { background: var(--blue); color: #fff; }
.serif { font-family: var(--serif); font-weight: 400; }
[dir="rtl"] .serif { font-family: var(--ar); font-weight: 600; }

/* ---------- topline ---------- */
.topline {
  border-bottom: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; padding: .5rem 0;
}
.topline .container { display: flex; align-items: center; justify-content: space-between; width: min(1320px,92%); }
.topline .dot { width: 7px; height: 7px; background: var(--blue); border-radius: 50%; display: inline-block; margin-inline-end: .5rem; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--ink); }
.site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 74px; gap: 1rem; }
.nav-left { display: flex; gap: 1.6rem; }
.nav-left a { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: var(--muted); transition: .2s; }
.nav-left a:hover { color: var(--blue); }
.brand { display: flex; align-items: center; justify-content: center; gap: .55rem; }
.brand img { height: 30px; }
.brand .bname { font-family: var(--serif); font-size: 1.7rem; letter-spacing: .01em; white-space: nowrap; }
[dir="rtl"] .brand .bname { font-family: var(--ar); font-weight: 700; }
.brand .badge { width: 30px; height: 30px; background: var(--blue); color: #fff; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1rem; }
.header-right { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }
.lang-btn { background: var(--ink); color: var(--paper); border: none; padding: .5rem 1rem; border-radius: 999px; font-weight: 600; cursor: pointer; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; transition: .2s; }
.lang-btn:hover { background: var(--blue); }
@media (max-width: 900px) { .site-header .bar { grid-template-columns: auto 1fr auto; } .nav-left { display: none; } .brand { justify-content: flex-start; } }

/* ---------- hero ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.hero .eyebrow { font-size: .76rem; text-transform: uppercase; letter-spacing: .22em; color: var(--blue); font-weight: 700; margin-bottom: 1.4rem; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 9vw, 7.4rem); line-height: .94; letter-spacing: -.015em; }
[dir="rtl"] .hero h1 { font-family: var(--ar); font-weight: 700; line-height: 1.05; }
.hero h1 .it { font-style: italic; color: var(--blue); }
[dir="rtl"] .hero h1 .it { font-style: normal; }
.hero .lead { color: var(--muted); font-size: 1.1rem; max-width: 34ch; margin: 1.6rem 0 2rem; line-height: 1.6; }
.hero .cta-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; border: none; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; padding: 1rem 1.8rem; border-radius: 999px; transition: .2s; font-family: var(--sans); }
[dir="rtl"] .btn { font-family: var(--ar-body); }
.btn-solid { background: var(--blue); color: #fff; }
.btn-solid:hover { background: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* hero feature image */
.hero-feature { position: relative; }
.hero-feature .frame { position: relative; border: 1px solid var(--ink); background: var(--cream); aspect-ratio: 4/5; overflow: hidden; }
.hero-feature .frame img, .hero-feature .frame video { width: 100%; height: 100%; object-fit: cover; }
.hero-feature .ph { width: 100%; height: 100%; background:
  linear-gradient(135deg, var(--blue) 0%, #4a3fe8 45%, #101024 100%); display: grid; place-items: center; }
.hero-feature .ph span { font-family: var(--serif); font-style: italic; color: rgba(255,255,255,.85); font-size: 1.4rem; }
.hero-feature .sticker {
  position: absolute; bottom: -18px; inset-inline-start: -18px; z-index: 3;
  background: var(--blue); color: #fff; border-radius: 50%; width: 108px; height: 108px;
  display: grid; place-items: center; text-align: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; transform: rotate(-8deg);
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-feature { max-width: 420px; } }

/* ---------- index strip ---------- */
.indexstrip { border-block: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.indexstrip .container { display: flex; flex-wrap: wrap; }
.indexstrip .it { flex: 1 1 0; min-width: 160px; padding: 1.1rem 0; display: flex; align-items: baseline; gap: .6rem; border-inline-start: 1px solid #33322a; }
.indexstrip .it:first-child { border: none; }
.indexstrip .it .n { font-family: var(--serif); color: var(--blue); font-size: 1rem; }
.indexstrip .it .t { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 600; }

/* ---------- section head ---------- */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ink); padding-bottom: 1rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.sec-head .l { display: flex; align-items: baseline; gap: 1rem; }
.sec-head .l .idx { font-family: var(--serif); font-style: italic; color: var(--blue); font-size: 1.2rem; }
.sec-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1; }
[dir="rtl"] .sec-head h2 { font-family: var(--ar); font-weight: 700; }
.sec-head p { color: var(--muted); font-size: .92rem; max-width: 36ch; }

/* ---------- about (magazine) ---------- */
.about { background: var(--cream); border-block: 1px solid var(--ink); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.about-grid .display { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.12; }
[dir="rtl"] .about-grid .display { font-family: var(--ar); font-weight: 700; }
.about-grid .display em { font-style: italic; color: var(--blue); }
[dir="rtl"] .about-grid .display em { font-style: normal; }
.about-grid .body p { color: #38362c; font-size: 1.02rem; line-height: 1.8; }
.about-grid .body p::first-letter { font-family: var(--serif); font-size: 3.2rem; float: inline-start; line-height: .8; padding-inline-end: .5rem; color: var(--blue); font-weight: 600; }
[dir="rtl"] .about-grid .body p::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; }
.stats { display: flex; gap: 2.4rem; margin-top: 2rem; flex-wrap: wrap; }
.stats .s .n { font-family: var(--serif); font-size: 2.6rem; line-height: 1; }
.stats .s .l { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: .3rem; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- lookbook gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2vw, 26px); }
.tile { position: relative; grid-column: span 4; }
.tile .shot { position: relative; overflow: hidden; background: var(--cream); border: 1px solid var(--ink); aspect-ratio: 3/4; }
.tile:nth-child(5n+1) { grid-column: span 6; }
.tile:nth-child(5n+1) .shot { aspect-ratio: 4/5; }
.tile:nth-child(5n+2) { grid-column: span 6; }
.tile:nth-child(5n+2) .shot { aspect-ratio: 4/5; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.tile:hover img, .tile:hover video { transform: scale(1.05); }
.tile .meta { display: flex; align-items: baseline; justify-content: space-between; padding-top: .7rem; gap: .6rem; }
.tile .meta .look { font-family: var(--serif); font-style: italic; font-size: 1rem; }
.tile .meta .name { text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-weight: 600; color: var(--muted); text-align: end; }
.tile .play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,20,15,.28); color: #fff; font-size: 2.4rem; pointer-events: none; }
.tile .tag { position: absolute; top: 0; inset-inline-start: 0; background: var(--blue); color: #fff; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; z-index: 2; font-weight: 700; }
@media (max-width: 720px) { .tile, .tile:nth-child(5n+1), .tile:nth-child(5n+2) { grid-column: span 6; } .tile .shot, .tile:nth-child(5n+1) .shot, .tile:nth-child(5n+2) .shot { aspect-ratio: 3/4; } }
@media (max-width: 460px) { .tile, .tile:nth-child(5n+1), .tile:nth-child(5n+2) { grid-column: span 12; } }
.empty-state { text-align: center; color: var(--muted); padding: 4rem 1rem; border: 1px solid var(--ink); text-transform: uppercase; letter-spacing: .1em; font-family: var(--serif); font-style: italic; }

/* lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(20,19,12,.92); z-index: 200; display: none; align-items: center; justify-content: center; padding: 4vw; }
.lightbox.open { display: flex; }
.lightbox .content img, .lightbox .content video { max-width: 92vw; max-height: 88vh; border: 1px solid #fff; }
.lightbox .close { position: absolute; top: 20px; inset-inline-end: 26px; background: var(--blue); color: #fff; border: none; width: 46px; height: 46px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; }

/* ---------- footer ---------- */
.site-footer { background: var(--blue); color: #fff; }
.footer-top { padding: clamp(3rem, 7vw, 5rem) 0 2rem; border-bottom: 1px solid rgba(255,255,255,.25); }
.footer-brand { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 13vw, 10rem); line-height: .9; letter-spacing: -.01em; }
[dir="rtl"] .footer-brand { font-family: var(--ar); font-weight: 700; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding: 2.5rem 0; }
.site-footer h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; opacity: .8; margin-bottom: 1rem; }
.site-footer p, .site-footer a { color: rgba(255,255,255,.9); font-size: .95rem; margin: .4rem 0; display: block; }
.site-footer a:hover { text-decoration: underline; }
.socials { display: flex; gap: .6rem; margin-top: .8rem; }
.socials a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.socials a:hover { background: #fff; color: var(--blue); }
.copyright { padding: 1.4rem 0; text-align: center; font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; opacity: .8; border-top: 1px solid rgba(255,255,255,.25); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s, transform .8s; }
.reveal.in { opacity: 1; transform: none; }