/* ============================================================
   Mohammed Ismail - R2
   A coded language for the emotional world.
   Minimal gallery portfolio. Art first. Calm. No effects.
   ============================================================ */

:root{
  --bg:#fdfdfb;
  --ink:#1a1a1a;
  --muted:#8c8c87;
  --hair:#e7e6e1;
  --accent:#e0a200;            /* a quiet whisper of yellow, used sparingly */
  --maxw:1140px;
  --lex-maxw:1280px;           /* lexicon walls go a little wider, specimen-sheet feel */
  --gutter:clamp(22px, 6vw, 88px);
  --font:"Inter", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  font-size:clamp(15px,1.04vw,16.5px);
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* small uppercase labels */
.label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:500;
  color:var(--muted);
}

/* ============ HEADER ============ */
.head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:clamp(22px,3vw,34px) var(--gutter);
  max-width:var(--maxw);margin-inline:auto;
}
.head__name{
  font-weight:500;font-size:1rem;letter-spacing:.04em;
}
.head__nav{display:flex;gap:clamp(16px,2.4vw,30px)}
.head__nav a{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
  padding-bottom:2px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.head__nav a:hover{color:var(--ink);border-color:var(--accent)}

/* ============ HERO ============ */
.hero{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(30px,6vw,70px) var(--gutter) clamp(34px,5vw,56px);
  display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,44px);
  align-items:end;
}
.hero__title{
  font-weight:300;
  font-size:clamp(2rem,5.4vw,3.6rem);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:.6rem 0 0;
  max-width:20ch;
}
.hero__art img{width:100%}

/* ============ FULL-BLEED BAND ============ */
.bleed{
  margin:0;
  width:100%;
}
.bleed img{
  width:100%;height:auto;
  object-fit:cover;object-position:center 35%;
}

/* ============ ESSAY (narrative sections) ============ */
.essay{
  max-width:var(--maxw);margin-inline:auto;
  /* the numbered eyebrows were removed at the client's request, so the top padding
     now carries the separation that the label block used to provide. More air above
     than below, so each essay breathes after the image block it follows. */
  padding:clamp(66px,10vw,132px) var(--gutter) clamp(46px,7vw,96px);
}
.essay__body{
  max-width:62ch;            /* measure cap, this is a reading experience */
}
.essay__body p{
  color:#3a3a3a;
  margin:0 0 1.25rem;
}
.essay__body .label{
  display:block;
  margin-bottom:1.8rem;
  color:var(--ink);
  opacity:.55;
}
.essay__solo{
  /* "Nothing." lands alone, generous space above and below */
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:300;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:2.4rem 0 2.4rem !important;
}

/* ============ PULL QUOTE BAND ============ */
.pullquote{
  width:100%;
  padding:clamp(56px,9vw,120px) var(--gutter);
  text-align:center;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  background:#faf9f5;
}
.pullquote p{
  margin:0;
  max-width:none;
  font-weight:300;
  font-size:clamp(1.7rem,4.4vw,3rem);
  line-height:1.18;
  letter-spacing:-.015em;
  color:var(--ink);
}

/* ============ LEXICON WALLS ============ */
/* Uniform cell box: every tile occupies a 3/4 cell, one height per breakpoint.
   Column counts chosen so tile count divides exactly -> last row always full,
   no orphan tiles. Wall A (28): 4/4/7/7. Wall B (27): 3/9/9/9. */
.lexicon{
  max-width:var(--lex-maxw);margin-inline:auto;
  padding:clamp(14px,2vw,26px) var(--gutter) clamp(40px,6vw,72px);
  display:grid;
  gap:8px;
}
.lexicon figure{
  margin:0;
  line-height:0;
  aspect-ratio:3 / 4;                     /* the uniform cell box */
  overflow:hidden;
  border-radius:4px;
  background:#f4f3ee;                     /* gentle fill while lazy-loading */
}
.lexicon img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:opacity .4s ease;
}
.lexicon img[data-src]{opacity:0}         /* fade-in once loaded (still honoured if JS runs) */
.lexicon img.is-loaded{opacity:1}

/* ============ ACQUIRE : PIECE BLOCKS ============ */
.pieces{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(20px,3vw,40px) var(--gutter) clamp(40px,6vw,72px);
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(34px,5vw,60px);
}
.piece{
  margin:0;
  max-width:560px;
  width:100%;
  justify-self:center;
}
.piece__img{
  display:block;width:100%;
  cursor:pointer;
  border-radius:6px;
  overflow:hidden;
  /* uniform box so captions, prices and buttons baseline-align across a trio.
     contain, never cover: these are the saleable works and must not be cropped. */
  aspect-ratio:3 / 4;
}
.piece__img img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.piece__img:hover img{transform:scale(1.012)}
.piece__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.4rem 1rem;
  margin-top:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--hair);
}
.piece__caption{
  font-size:.85rem;color:#555;letter-spacing:.01em;
}
.piece__price{
  font-size:.95rem;font-weight:500;color:var(--ink);
}
.piece__btn{
  display:inline-block;margin-top:1rem;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;font-weight:500;
  padding:.85rem 1.4rem;
  border:1px solid var(--ink);
  border-radius:10px;
  color:var(--ink);background:transparent;
  transition:background .25s,color .25s,border-color .25s;
}
.piece__btn:hover{background:var(--ink);color:var(--bg)}

/* ============ INSTAGRAM ============ */
.instagram{
  max-width:var(--lex-maxw);margin-inline:auto;
  padding:clamp(20px,3vw,36px) var(--gutter) clamp(48px,7vw,88px);
}
.instagram .label{display:block;margin-bottom:1.4rem}
.instagram__shell{
  min-height:0;
}
.instagram__shell[data-loaded="1"]{min-height:auto}
.instagram__fallback{
  display:inline-block;
  font-size:.95rem;font-weight:400;color:var(--ink);
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
  transition:color .25s;
}
.instagram__fallback:hover{color:var(--accent)}
/* neutralise any widget chrome if it does load */
.instagram__shell :is(iframe,div){
  max-width:100%;
}

/* ============ TECHNICAL NOTES ============ */
.tech{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(40px,6vw,72px) var(--gutter);
  border-top:1px solid var(--hair);
}
.tech__inner{max-width:62ch}
.tech .label{display:block;margin-bottom:1.6rem;color:var(--ink);opacity:.6}
.tech__list{
  display:grid;grid-template-columns:auto 1fr;
  gap:.7rem 1.6rem;
  margin:0;
}
.tech__list dt{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--muted);font-weight:500;
  align-self:start;padding-top:.25rem;
}
.tech__list dd{
  margin:0;color:#3a3a3a;
}

/* ============ ABOUT ============ */
.about{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(46px,7vw,90px) var(--gutter);
  border-top:1px solid var(--hair);
  display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,54px);align-items:start;
}
.about__photo img{width:100%;max-width:360px;border-radius:10px}
.about__text p{color:#444;max-width:54ch;margin:0 0 1.1rem}
.about__text .label{margin-bottom:1.2rem}
.about__text a{border-bottom:1px solid var(--accent);transition:color .25s}
.about__text a:hover{color:var(--accent)}

/* ============ CONTACT ============ */
.contact{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(40px,6vw,72px) var(--gutter) clamp(40px,5vw,64px);
  border-top:1px solid var(--hair);
}
.contact .label{margin-bottom:1.6rem}
.contact__rows{display:flex;flex-direction:column;gap:1.05rem;margin-bottom:clamp(34px,5vw,56px)}
.contact__rows a,.contact__loc{
  font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:300;color:var(--ink);
  /* grid, not flex, so the value column lines up on every row including the
     Instagram row, which has a glyph in the label slot instead of a word */
  display:grid;grid-template-columns:108px 1fr;gap:.2rem .9rem;align-items:baseline;
  width:max-content;max-width:100%;
}
.contact__rows a span,.contact__loc span{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:500;
}
/* Instagram row: the glyph sits in the label column, the handle in the value column,
   so it reads at value size and aligns with the email and studio rows above and below */
.contact__ig{align-items:center}
.contact__ig svg{grid-column:1;justify-self:start;opacity:.7;transition:opacity .25s}
.contact__ig:hover svg{opacity:1}
.contact__handle{
  grid-column:2;
  font-size:inherit !important;text-transform:none !important;letter-spacing:.01em !important;
  color:var(--ink) !important;font-weight:300 !important;
}
.contact__rows a{transition:color .25s}
.contact__rows a:hover{color:var(--accent)}
.contact__base{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}

/* ============ ARCHIVE ============ */
.archive{
  max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gutter) clamp(48px,7vw,80px);
  border-top:1px solid var(--hair);
}
.archive details{padding-top:clamp(24px,3vw,36px)}
.archive summary{
  cursor:pointer;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;font-weight:500;
  color:var(--muted);
  list-style:none;
  padding:.4rem 0;
  transition:color .25s;
}
.archive summary::-webkit-details-marker{display:none}
.archive summary::before{content:"+ ";color:var(--accent)}
.archive details[open] summary::before{content:"\2212  "}
.archive summary:hover{color:var(--ink)}
.archive__note{
  font-size:.85rem;color:var(--muted);margin:.6rem 0 1.6rem;
}

/* ============ LEGACY WORK GRID (archive) ============ */
.grid{columns:2;column-gap:clamp(16px,2.4vw,30px)}
.grid .tile{break-inside:avoid;margin:0 0 clamp(16px,2.4vw,30px)}
.tile img{width:100%;border-radius:4px}

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  gap:1rem;
  padding:clamp(20px,4vw,48px);
  background:rgba(20,20,20,.82);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.lightbox[hidden]{display:none}
.lightbox__close{
  position:absolute;top:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);
  width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;
  font-size:1.6rem;line-height:1;
  cursor:pointer;
  transition:background .25s;
}
.lightbox__close:hover{background:rgba(255,255,255,.28)}
.lightbox__inner{
  margin:0;
  max-width:min(1100px,90vw);
  max-height:86vh;
  display:grid;grid-template-rows:1fr auto;
  gap:1rem;
}
.lightbox__img{
  width:auto;height:auto;
  max-width:min(1100px,90vw);
  max-height:72vh;
  object-fit:contain;
  margin-inline:auto;
  border-radius:6px;
  background:#fff;
}
.lightbox__meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.4rem 1.4rem;
  color:#fff;
}
.lightbox__caption{font-size:.9rem;opacity:.85}
.lightbox__price{font-size:1rem;font-weight:500}
.lightbox__btn{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;font-weight:500;
  padding:.7rem 1.2rem;
  border:1px solid #fff;border-radius:10px;color:#fff;background:transparent;
  transition:background .25s,color .25s;
}
.lightbox__btn:hover{background:#fff;color:var(--ink)}

/* ============ BREAKPOINTS ============ */
/* Lexicon column counts: chosen so the wall's tile count divides exactly,
   last row always full. Wall A (28) and Wall B (27) set independently.
   <600:      A=4 (4x7),  B=3 (3x9)
   600-899:   A=4 (4x7),  B=9 (9x3)
   900-1199:  A=7 (7x4),  B=9 (9x3)
   >=1200:    A=7 (7x4),  B=9 (9x3)            */
@media (min-width:600px){
  .lexicon[data-wall="A"]{grid-template-columns:repeat(4,1fr)}
  .lexicon[data-wall="B"]{grid-template-columns:repeat(9,1fr)}
}
@media (min-width:900px){
  .lexicon[data-wall="A"]{grid-template-columns:repeat(7,1fr)}
  .lexicon[data-wall="B"]{grid-template-columns:repeat(9,1fr)}
  .hero{grid-template-columns:1.1fr .9fr}
  .about{grid-template-columns:.8fr 1.2fr;gap:clamp(40px,5vw,70px)}
  .about__photo{position:sticky;top:34px}
  .pieces{grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,44px)}
  .piece{max-width:none;justify-self:stretch}
}

@media (max-width:599px){
  .lexicon[data-wall="A"]{grid-template-columns:repeat(4,1fr)}
  .lexicon[data-wall="B"]{grid-template-columns:repeat(3,1fr)}
  .head__nav{gap:14px}
  .head__nav a{font-size:.64rem;letter-spacing:.12em}
  .grid{columns:2;column-gap:10px}
  .grid .tile{margin-bottom:10px}
}

/* respect reduced motion globally */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* ============ ARCHIVE PAGE ============ */
.archivepage{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(28px,4vw,52px) var(--gutter) clamp(48px,7vw,80px);
}
.archivepage__title{
  font-weight:300;letter-spacing:-.01em;line-height:1.14;
  font-size:clamp(2rem,4.6vw,3.2rem);
  margin:1rem 0 .4rem;
}
.archivepage__note{color:var(--muted);margin:0 0 clamp(28px,4vw,48px)}
.archivepage__back{margin-top:clamp(34px,5vw,56px);font-size:.85rem}
.archivepage__back a{border-bottom:1px solid var(--accent);transition:color .25s}
.archivepage__back a:hover{color:var(--accent)}

/* footer archive link + agency credit */
.contact__archive{border-bottom:1px solid var(--accent);transition:color .25s}
.contact__archive:hover{color:var(--accent)}
.credit{
  margin:clamp(20px,3vw,30px) 0 0;
  font-size:11px;letter-spacing:.06em;color:var(--muted);opacity:.75;
}
.credit a{transition:opacity .25s,color .25s}
.credit a:hover{color:var(--accent);opacity:1}

/* archive grid: single column on phones, two-up thumbs are unreadable at 390px */
@media (max-width:560px){
  .grid{columns:1}
}