/* ==========================================================================
   Sebastian Sarabia — Photography
   Editorial layout: centred wordmark, drawer menu in three columns,
   collage home, dense category grids. Ink is Sanzo Wada "Deep Slate Green".
   ========================================================================== */

:root{
  --ink:      #112f2c;
  --ink-2:    #3f544d;
  --muted:    #6f7d77;
  --paper:    #ffffff;
  --sand:     #f6f4ee;
  --drawer:   #ece8d3;
  --hair:     rgba(17,47,44,.16);

  --wrap:     1208px;
  --side:     clamp(16px, 2.8vw, 36px);
  --gap:      24px;
  --tight:    10px;
  --row:      clamp(56px, 8vw, 100px);
  --radius:   clamp(10px, 1.2vw, 16px);

  --ui:      "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --text:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mark:    "League Spartan", Futura, "Avenir Next", Inter, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.45 var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-home{ background:var(--sand); }
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,p,ul,ol,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }

.skip{ position:absolute; left:-9999px; top:0; }
.skip:focus{ left:var(--side); top:8px; background:var(--paper); padding:6px 10px; z-index:100; }

.ui{ font-family:var(--ui); font-size:clamp(14px,1.45vw,19px); letter-spacing:.06em; text-transform:uppercase; }
.wrap{ width:100%; max-width:calc(var(--wrap) + var(--side)*2); margin:0 auto; padding:0 var(--side); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.top{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  padding:18px var(--side) 0;
  min-height:clamp(96px, 12vw, 150px);
}
.top__menu, .top__mono{ font-family:var(--ui); font-size:clamp(14px,1.45vw,19px); letter-spacing:.06em; text-transform:uppercase; padding:2px 0; }
.top__mono{ justify-self:end; }
.top__menu{ justify-self:start; }
.top__menu:hover, .top__mono:hover{ opacity:.62; }

.wordmark{
  display:flex; flex-direction:column; align-items:center;
  font-family:var(--mark); font-weight:700;
  font-size:clamp(30px, 5.2vw, 66px);
  line-height:.92;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-top:12px;
  padding-left:.14em; /* optically recentre the tracking */
}

/* slim bar that follows you down the page */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:12px var(--side);
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
  transform:translateY(-100%);
  transition:transform .32s ease;
}
body.is-home .bar{ background:color-mix(in srgb, var(--sand) 94%, transparent); }
.bar.is-on{ transform:none; }
.bar__name{ font-family:var(--mark); font-weight:700; letter-spacing:.14em; font-size:15px; text-transform:uppercase; }
.bar .top__mono{ justify-self:end; }
.bar__cats{ grid-column:1 / -1; display:flex; justify-content:center; gap:4px 24px; padding-top:9px;
  font-family:var(--ui); font-size:12px; letter-spacing:.07em; text-transform:uppercase; }
.bar__cats a{ padding:2px 0; opacity:.8; white-space:nowrap; }
.bar__cats a:hover, .bar__cats a[aria-current="page"]{ opacity:1; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
@media (max-width:760px){
  /* one swipeable line on a phone instead of three wrapped ones */
  .bar__cats{ justify-content:flex-start; gap:0 18px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin:0 calc(var(--side) * -1); padding:9px var(--side) 0; }
  .bar__cats::-webkit-scrollbar{ display:none; }
}

/* Category bar under the wordmark */
.catbar{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 26px; padding:0 var(--side) clamp(18px,2.6vw,30px); font-family:var(--ui); font-size:clamp(12px,1.15vw,15px); letter-spacing:.07em; text-transform:uppercase; }
.catbar a{ padding:2px 0; opacity:.85; }
.catbar a:hover{ opacity:1; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.catbar a[aria-current="page"]{ opacity:1; text-decoration:underline; text-underline-offset:5px; }
@media (max-width:760px){ .catbar{ gap:4px 16px; } }

/* Lightbox story link */
.lb__top a[data-lb-story]{ font-family:var(--ui); letter-spacing:.04em; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--hair); margin-left:auto; margin-right:16px; }
.lb__top a[data-lb-story]:hover{ text-decoration-color:var(--ink); }

/* --------------------------------------------------------------------------
   Drawer menu
   -------------------------------------------------------------------------- */
.drawer{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:var(--drawer);
  max-height:100vh; overflow:auto;
  padding:18px var(--side) clamp(36px,6vw,72px);
  transform:translateY(-100%);
  transition:transform .42s cubic-bezier(.2,.7,.2,1);
  visibility:hidden;
}
.drawer.is-open{ transform:none; visibility:visible; }
.drawer:focus{ outline:none; }
.drawer__head{ display:grid; grid-template-columns:1fr auto 1fr; align-items:start; margin-bottom:clamp(28px,5vw,64px); }
.drawer__head .wordmark{ font-size:clamp(22px,3vw,34px); margin-top:0; }
.drawer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); max-width:var(--wrap); margin:0 auto; }
.drawer__col h2{ font-family:var(--ui); font-weight:400; font-size:clamp(14px,1.5vw,20px); letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.drawer__col a{ display:block; font-size:clamp(22px,2.5vw,32px); line-height:1.4; letter-spacing:-.005em; }
.drawer__col a:hover, .drawer__col a[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.scrim{ position:fixed; inset:0; z-index:55; background:rgba(17,47,44,.28); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.scrim.is-on{ opacity:1; pointer-events:auto; }
@media (max-width:760px){
  .drawer__cols{ grid-template-columns:1fr; gap:34px; }
}

/* --------------------------------------------------------------------------
   Page
   -------------------------------------------------------------------------- */
.page{ min-height:60vh; padding-bottom:var(--row); }
.page-title{ font-family:var(--ui); font-weight:400; font-size:clamp(14px,1.45vw,19px); letter-spacing:.02em; margin:0 0 clamp(20px,3vw,36px); }

/* Editorial grid (home, stories, about) */
.ed{ display:flex; flex-direction:column; gap:var(--row); }
.ed__row{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); align-items:start; }
.ed__item{ min-width:0; }
.ed__item.is-end{ align-self:end; }
.ed__item.is-mid{ align-self:center; }

.ph{ position:relative; overflow:hidden; background:rgba(17,47,44,.06); border-radius:var(--radius); }
.ph img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; }
.ph img.is-loaded{ opacity:1; }
.ph[data-zoom]{ cursor:zoom-in; }
.cap{ display:none; }
a.cap:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Home canvas: free placement, positions as fractions of the width */
.canvas{ position:relative; min-height:40vh; }
.cv{ position:absolute; left:calc(var(--x) * 100%); top:calc(var(--y) * var(--W, 1208px)); width:calc(var(--w) * 100%); min-width:0; }
.cv.say{ display:block; }
@media (max-width:760px){
  /* the phone shows the same composition at scale; statements drop to a readable phone size */
  .cv-t .say__text{ font-size:18px; }
  .cv-t .say__label{ font-size:12px; margin-bottom:8px; }
}

/* About hero */
.about-hero{ display:grid; grid-template-columns:5fr 7fr; gap:var(--gap); align-items:end; }
.about-hero.no-photo{ grid-template-columns:1fr; }
.about-hero .portrait{ min-width:0; }
.about-hero .bio{ font-size:clamp(18px,1.9vw,24px); line-height:1.32; max-width:34em; }
.about-hero .bio p + p{ margin-top:.7em; }
@media (max-width:760px){ .about-hero{ grid-template-columns:1fr; align-items:start; } }

/* Statements */
.say{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); }
.say__label{ grid-column:1 / -1; font-family:var(--ui); font-weight:400; font-size:clamp(14px,1.45vw,19px); letter-spacing:.03em; text-transform:uppercase; margin-bottom:14px; }
.say__text{ grid-column:1 / -1; font-size:clamp(22px,2.8vw,36px); line-height:1.2; letter-spacing:-.01em; font-weight:400; }
.say__text p + p{ margin-top:.7em; }

/* Story head */
.story-head{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gap); row-gap:10px; }
.story-head h1{ grid-column:1 / 7; font-family:var(--ui); font-weight:400; font-size:clamp(14px,1.45vw,19px); letter-spacing:.02em; }
.story-head .meta{ grid-column:7 / -1; font-family:var(--ui); font-size:14px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 18px; justify-content:flex-end; }
.story-head .lede{ grid-column:1 / 10; font-size:clamp(18px,1.9vw,24px); line-height:1.3; margin-top:10px; }
@media (max-width:760px){
  .story-head h1, .story-head .meta, .story-head .lede{ grid-column:1 / -1; justify-content:flex-start; }
}

.next{ display:flex; justify-content:space-between; gap:var(--gap); font-family:var(--ui); font-size:clamp(14px,1.45vw,19px); letter-spacing:.02em; border-top:1px solid var(--hair); padding-top:18px; }
.next a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* Dense grid (categories, archive) */
.dense{ display:flex; flex-direction:column; gap:var(--tight); }
.dense__row{ display:grid; gap:var(--tight); }
.dense__row.n1{ grid-template-columns:1fr; }
.dense__row.n2{ grid-template-columns:repeat(2,1fr); }
.dense__row.n3{ grid-template-columns:repeat(3,1fr); }
.dense__row.n4{ grid-template-columns:repeat(4,1fr); }
.dense .ph .over{
  position:absolute; inset:auto 0 0 0; padding:10px 12px; color:#fff;
  font-family:var(--ui); font-size:13px; letter-spacing:.02em;
  background:linear-gradient(to top, rgba(0,0,0,.45), transparent);
  opacity:0; transition:opacity .25s ease;
}
.dense .ph:hover .over{ opacity:1; }
@media (max-width:760px){
  /* keep each row as designed; four across is too small on a phone, so 2 x 2 */
  .dense__row.k1{ grid-template-columns:1fr; }
  .dense__row.k2{ grid-template-columns:repeat(2,1fr); }
  .dense__row.k3{ grid-template-columns:repeat(3,1fr); }
  .dense__row.k4{ grid-template-columns:repeat(2,1fr); }
}

/* About / contact */
.list-big li{ font-size:clamp(20px,2.4vw,32px); line-height:1.25; padding:14px 0; border-top:1px solid var(--hair); display:grid; grid-template-columns:minmax(120px,2fr) 7fr; gap:var(--gap); }
.list-big li:last-child{ border-bottom:1px solid var(--hair); }
.list-big .k{ font-family:var(--ui); font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding-top:.5em; }
.list-big small{ display:block; font-size:clamp(15px,1.4vw,18px); color:var(--ink-2); margin-top:6px; line-height:1.4; }
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.cols3 h3{ font-family:var(--ui); font-weight:400; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.cols3 li{ font-size:clamp(17px,1.7vw,22px); line-height:1.45; }
@media (max-width:760px){ .cols3{ grid-template-columns:1fr; } .list-big li{ grid-template-columns:1fr; gap:4px; } }
.contact-big a{ display:block; font-size:clamp(26px,4.4vw,56px); line-height:1.15; letter-spacing:-.015em; }
.contact-big a:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px; }

/* Privacy policy */
.legal{ max-width:44em; margin:0 auto; font-size:clamp(16px,1.3vw,18px); line-height:1.6; }
.legal h1{ font-family:var(--ui); font-weight:400; font-size:clamp(22px,2.8vw,36px); line-height:1.2; margin-bottom:6px; }
.legal__updated{ color:var(--muted); font-size:14px; margin-bottom:clamp(24px,4vw,48px); }
.legal h2{ font-family:var(--ui); font-weight:500; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin:36px 0 10px; }
.legal p, .legal ul{ margin:0 0 12px; }
.legal ul{ list-style:disc; padding-left:1.2em; }
.legal li + li{ margin-top:6px; }
.legal a{ text-decoration:underline; text-underline-offset:3px; }

/* Footer */
.foot{ background:var(--drawer); padding:clamp(28px,4vw,48px) 0; font-family:var(--ui); font-size:14px; }
.foot .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.foot .wordmark{ font-size:20px; align-items:flex-start; margin:0; padding:0; }
.foot a:hover{ text-decoration:underline; text-underline-offset:3px; }
.foot p{ color:var(--ink-2); line-height:1.6; }
@media (max-width:760px){ .foot .wrap{ grid-template-columns:1fr 1fr; } }

/* Lightbox */
.lb{ position:fixed; inset:0; z-index:90; background:var(--paper); }
.lb[hidden]{ display:none; }
.lb__top, .lb__bot{ display:flex; justify-content:space-between; align-items:center; padding:16px var(--side); font-family:var(--ui); font-size:14px; letter-spacing:.04em; }
.lb__top button, .lb__bot button{ text-transform:uppercase; letter-spacing:.06em; }
.lb__top button:hover, .lb__bot button:hover{ opacity:.6; }
.lb__top{ position:absolute; top:0; left:0; right:0; z-index:2; }
/* same padding top and bottom, so the photo is centred on the screen whatever its shape */
.lb__stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:60px calc(var(--side) + 104px); }
/* previous / next pinned to the vertical middle of the screen: they never move with the photo */
.lb__bot{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:2; padding:0 var(--side); pointer-events:none; }
.lb__bot button{ pointer-events:auto; padding:12px 0; }
.lb__bot [data-lb-cap]{ display:none; }
@media (max-width:760px){
  .lb__stage{ padding:60px var(--side); }
  .lb__bot{ padding:0 6px; }
  .lb__bot button{ width:42px; height:42px; padding:0; border-radius:50%; font-size:0; color:var(--ink);
    background:color-mix(in srgb, var(--paper) 86%, transparent); box-shadow:0 2px 10px rgba(0,0,0,.14); display:grid; place-items:center; }
  .lb__bot button::before{ font-size:26px; line-height:1; margin-top:-3px; }
  .lb__bot [data-lb-prev]::before{ content:"\2039"; }
  .lb__bot [data-lb-next]::before{ content:"\203A"; }
}
.lb__stage img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:var(--radius); }

/* Mobile collapse of the editorial grid */
@media (max-width:760px){
  .ed__row{ grid-template-columns:repeat(2,1fr); row-gap:var(--gap); }
  .ed__item{ grid-column:auto / span 2 !important; margin-top:0 !important; }
  .ed__item.m-half{ grid-column:auto / span 1 !important; }
  .top{ min-height:0; padding-bottom:20px; grid-template-columns:auto 1fr auto; column-gap:12px; }
  .top .wordmark{ font-size:clamp(20px,6.4vw,30px); letter-spacing:.1em; padding-left:.1em; margin-top:6px; }
  .bar__name{ font-size:12px; letter-spacing:.1em; }
}

/* Reveal on scroll: each block rises into place as it enters the viewport. */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .62s cubic-bezier(.2,.65,.2,1), transform .62s cubic-bezier(.2,.65,.2,1); transition-delay:var(--d,0ms); will-change:opacity,transform; }
.rv.is-in{ opacity:1; transform:none; }
body.is-editing .rv{ opacity:1; transform:none; transition:none; }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .ph img{ opacity:1; }
  .rv{ opacity:1; transform:none; }
}