/* ============================================================
   ARTISTIC AREA CLUB
   Monochrome · DM Sans · zero radius · zero strokes
   ============================================================ */

:root{
  --bg:      #0A0A0A;
  --raise:   #131313;
  --fg:      #F8F7F4;
  --fg-2:    rgba(248,247,244,.60);
  --fg-3:    rgba(248,247,244,.36);
  --line:    rgba(248,247,244,.13);

  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: 20px;
  --nav: 56px;
  --film: 112px;

  --ease: cubic-bezier(.22,1,.36,1);
}
@media (min-width:760px){ :root{ --pad:32px; --nav:64px; --film:132px; } }
@media (min-width:1280px){ :root{ --pad:44px; --nav:68px; } }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; border-radius:0 !important; }
html{ -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font); font-size:14px; font-weight:400;
  line-height:1.5; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; user-select:none; -webkit-user-drag:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--fg); color:var(--bg); }
::-webkit-scrollbar{ width:7px; height:7px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(248,247,244,.14); }

/* ---------- type ---------- */
.t-xs{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; }
.t-sm{ font-size:13px; line-height:1.55; }
.t-md{ font-size:15px; line-height:1.5; }
@media (min-width:760px){ .t-md{ font-size:16px; } }
.num{ font-variant-numeric:tabular-nums; }
.d2{ color:var(--fg-2); }
.d3{ color:var(--fg-3); }

/* ---------- links: plain underline on hover, no animation ---------- */
.u:hover, .u.on{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.b{
  display:inline-block;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-2);
}
.b:hover{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   LOADER — Apple boot
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:1000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(30px,5vh,46px);
  transition:opacity .8s var(--ease), visibility .8s;
}
#loader.done{ opacity:0; visibility:hidden; }
.ld-mark{ width:clamp(96px,13vw,140px); }
.ld-bar{ width:min(56vw, 210px); height:3px; background:rgba(248,247,244,.17); overflow:hidden; }
.ld-bar i{ display:block; height:100%; width:0; background:var(--fg); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200; height:var(--nav);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  pointer-events:none; mix-blend-mode:difference;
}
.nav > *{ pointer-events:auto; }
.nav-logo{ width:clamp(62px,6vw,86px); display:block; }
.nav-links{ display:flex; gap:20px; }
@media (min-width:760px){ .nav-links{ gap:32px; } }

/* ============================================================
   ROWS — small label left, text right (vican.design)
   ============================================================ */
.rows{ display:grid; gap:clamp(28px,3.4vw,44px); }
.row{
  display:grid; align-items:start;
  grid-template-columns:minmax(88px,30%) minmax(0,1fr);
  gap:clamp(14px,2.4vw,34px);
}
@media (min-width:1080px){ .row{ grid-template-columns:minmax(120px,20%) minmax(0,1fr); } }
.row > :first-child{ color:var(--fg-3); }
.row p + p{ margin-top:1.1em; }
.row li + li{ margin-top:1px; }
.row .lim{ max-width:56ch; }

.sec{ padding:clamp(56px,9vw,132px) var(--pad); }
.hair{ height:1px; background:var(--line); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; height:100svh; min-height:520px;
  overflow:hidden; cursor:pointer; background:var(--raise);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .85s var(--ease);
}
.hero-media img.on{ opacity:1; }
/* per-photo focal point, desktop only */
@media (min-width:760px){ .hero-media img[data-focus]{ object-position:var(--focus); } }
.hero-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(6,6,6,.42) 0%, rgba(6,6,6,.14) 34%, rgba(6,6,6,.55) 100%);
}
.hero-in{
  position:relative; z-index:2; height:100%;
  display:grid; grid-template-rows:1fr auto;
  padding:var(--nav) var(--pad) calc(var(--pad) + 4px);
}
.hero-mid{ display:flex; align-items:center; justify-content:center; text-align:center; }
.hero-coords{ display:grid; gap:7px; }
.hero-bar{ display:flex; justify-content:flex-end; }

/* ============================================================
   TIMELINE
   ============================================================ */
.lbl{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:0 var(--pad) 20px;
}
.event{ padding-top:clamp(40px,6vw,86px); }
.ev-head{
  display:grid; gap:5px 22px; grid-template-columns:1fr;
  padding:16px var(--pad) 22px; border-top:1px solid var(--line);
}
@media (min-width:880px){
  .ev-head{ grid-template-columns:32px minmax(0,1fr) 120px 190px; align-items:baseline; }
}
.ev-title{ font-size:15px; letter-spacing:.03em; text-transform:uppercase; font-weight:400; }
@media (min-width:880px){ .ev-title{ font-size:17px; } }
/* dates and coordinates never break mid-value */
.ev-head .num, .gb-head .num, .hero-coords .num{ white-space:nowrap; }
@media (max-width:400px){ .ev-head .num, .gb-head .num{ font-size:10px; letter-spacing:.1em; } }

.strip{
  display:flex; gap:10px;
  overflow-x:auto; overflow-y:hidden;
  padding-left:var(--pad);
  scroll-padding-left:var(--pad);          /* snap must respect the gutter */
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  scrollbar-width:none; cursor:grab;
  -webkit-overflow-scrolling:touch;
}
@media (min-width:760px){ .strip{ gap:14px; } }
.strip::-webkit-scrollbar{ display:none; }
.strip::after{ content:""; flex:0 0 var(--pad); }
.strip.drag{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }

.shot{
  position:relative; flex:0 0 auto; cursor:pointer;
  height:52vw; max-height:520px; min-height:210px;
  min-width:120px;
  background:var(--raise); overflow:hidden; scroll-snap-align:start;
}
@media (min-width:760px){ .shot{ height:44vh; } }
.shot img{ height:100%; width:auto; max-width:none; object-fit:cover; opacity:0; transition:opacity .8s var(--ease); }
.shot img.ok{ opacity:1; }

.strip-foot{ display:flex; align-items:center; gap:16px; padding:16px var(--pad) 0; }
.pbar{ position:relative; flex:1; height:1px; background:var(--line); }
.pbar i{ position:absolute; left:0; top:0; height:1px; background:var(--fg); display:block; }
@media (min-width:760px){                       /* line indicator: mobile only */
  .pbar{ display:none; }
  .strip-foot{ justify-content:flex-end; }
}
.snav{ display:flex; gap:16px; }
.snav button{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.snav button:hover{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
.snav button[disabled]{ opacity:.3; pointer-events:none; }
@media (max-width:759px){ .snav{ display:none; } }

/* filename + download overlay on every photo */
.ov{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:30px 10px 9px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  background:linear-gradient(to top, rgba(5,5,5,.8), transparent);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  pointer-events:none;
}
.ov b{ font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov a{ pointer-events:auto; white-space:nowrap; color:var(--fg); }
.ov a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* ============================================================
   GALLERY
   ============================================================ */
.gal-head{ padding:calc(var(--nav) + clamp(44px,11vh,130px)) var(--pad) clamp(26px,4vw,52px); }
.gal-tools{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:0 var(--pad) clamp(22px,3.4vw,42px);
}
.views{ display:flex; gap:16px; }
@media (min-width:760px){ .views{ gap:22px; } }
.views button{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }
.views button:hover{ color:var(--fg-2); }
.views button.on{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }

.gblock{ padding-bottom:clamp(40px,6vw,96px); }
.gb-head{
  display:grid; gap:5px 22px; grid-template-columns:1fr;
  padding:18px var(--pad) 22px; border-top:1px solid var(--line);
}
@media (min-width:880px){
  .gb-head{ grid-template-columns:32px minmax(0,1fr) 120px 190px; align-items:baseline; }
}

.cols{ padding:0 var(--pad); column-gap:10px; }
@media (min-width:760px){ .cols{ column-gap:16px; } }
.cell{
  position:relative; display:block; width:100%;
  break-inside:avoid; page-break-inside:avoid;
  margin-bottom:10px; background:var(--raise); cursor:pointer; overflow:hidden;
}
@media (min-width:760px){ .cell{ margin-bottom:16px; } }
.cell img{ width:100%; height:auto; opacity:0; transition:opacity .8s var(--ease); }
.cell img.ok{ opacity:1; }

[data-view="1"] .cols{ columns:1; max-width:1120px; margin:0 auto; }
[data-view="2"] .cols{ columns:2; }

/* GRID — a.cre archive: small photos, native aspect ratio, lots of air */
[data-view="g"] .ov{ display:none; }              /* too small to read a filename */
[data-view="g"] .cols{ columns:3; column-gap:clamp(14px,3.4vw,64px); }
@media (min-width:760px){  [data-view="g"] .cols{ columns:5; } }
@media (min-width:1400px){ [data-view="g"] .cols{ columns:7; } }
[data-view="g"] .cell{
  width:var(--w,86%);
  margin-left:var(--x,0%);
  margin-bottom:clamp(26px,4.6vw,92px);
  background:none;
}
[data-view="g"] .cell:hover img{ transform:none; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
#lb{
  position:fixed; inset:0; z-index:900;
  background:rgba(7,7,7,.84);
  backdrop-filter:blur(28px) saturate(.75); -webkit-backdrop-filter:blur(28px) saturate(.75);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
#lb.open{ opacity:1; visibility:visible; }
#lb:fullscreen{ background:#060606; backdrop-filter:none; -webkit-backdrop-filter:none; }
body.lb{ overflow:hidden; }

.lb-top{
  position:absolute; top:0; left:0; right:0; height:var(--nav); z-index:9;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 var(--pad);
  background:linear-gradient(to bottom, rgba(6,6,6,.92) 30%, rgba(6,6,6,0));
}
.lb-tools{ display:flex; gap:16px; }
@media (min-width:760px){ .lb-tools{ gap:24px; } }
.lb-tools button{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2); }
.lb-tools button:hover{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }

.lb-stage{
  position:absolute; left:0; right:0; top:var(--nav); bottom:var(--film); z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding:10px var(--pad);
  touch-action:pan-y;
}
/* click zones — left half = previous, right half = next */
.lb-half{
  position:absolute; top:0; bottom:0; width:50%; z-index:3;
  background:transparent; border:0;
}
.lb-half.p{ left:0;  cursor:w-resize; }
.lb-half.n{ right:0; cursor:e-resize; }
@media (min-width:760px){ .lb-stage{ padding:20px 76px; } }
/* the image is a direct child so max-height:100% resolves against the
   definite stage height — portraits are always shown whole */
.lb-stage > img{
  display:block;
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  object-fit:contain;
  opacity:0; transition:opacity .35s var(--ease);
}
.lb-stage > img.ok{ opacity:1; }
.lb-stage > .ph{ width:min(60vw,460px); height:min(46vh,520px); }

.lb-arw{
  position:absolute; top:50%; transform:translateY(-50%); z-index:8;
  padding:20px 12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
}
.lb-arw:hover{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
.lb-arw.p{ left:6px; } .lb-arw.n{ right:6px; }
@media (max-width:759px){ .lb-arw{ display:none; } }

.lb-bot{
  position:absolute; left:0; right:0; bottom:0; height:var(--film); z-index:9;
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding-bottom:12px;
  background:linear-gradient(to top, rgba(6,6,6,.94) 55%, rgba(6,6,6,0));
}
.lb-cap{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:0 var(--pad); }
.lb-meta{ display:flex; gap:12px; flex-wrap:wrap; align-items:baseline; min-width:0; overflow:hidden; }
@media (max-width:759px){ #lb-t, #lb-c{ display:none; } }
@media (min-width:760px){ .lb-meta{ gap:22px; } }
#lb-dl{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2); white-space:nowrap; }
#lb-dl:hover{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }

.film{
  display:flex; gap:5px; align-items:center;
  overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth;
  padding:0 var(--pad); height:60px;
}
.film::-webkit-scrollbar{ display:none; }
.film button{
  position:relative; flex:0 0 auto; width:30px; height:38px; overflow:hidden;
  background:var(--raise); opacity:.4;
  transition:opacity .25s var(--ease), width .3s var(--ease), height .3s var(--ease);
}
.film button img{ width:100%; height:100%; object-fit:cover; }
.film button:hover{ opacity:.8; }
.film button.on{ opacity:1; width:38px; height:46px; }
@media (min-width:760px){
  .film button{ width:38px; height:46px; }
  .film button.on{ width:46px; height:56px; }
}

/* ============================================================
   FOOTER (Kurppa Hosk layout)
   ============================================================ */
.foot{ padding:clamp(64px,12vh,170px) var(--pad) 0; }
.foot-grid{ display:grid; gap:clamp(24px,3vw,44px) clamp(18px,4vw,60px); grid-template-columns:minmax(88px,30%) minmax(0,1fr); }
@media (min-width:1080px){ .foot-grid{ grid-template-columns:minmax(120px,.8fr) 1.3fr minmax(120px,.8fr) 1.3fr; } }
.foot-grid > :nth-child(odd){ color:var(--fg-3); }
.foot-grid li + li{ margin-top:1px; }

/* copyright — vican.design */
.copy{ margin-top:clamp(56px,10vw,130px); }
.copy-in{ padding:clamp(26px,4vw,44px) var(--pad); text-align:center; }
.copy-in span{
  font-size:min(15px, 3.15vw); letter-spacing:.005em; color:var(--fg);
  white-space:nowrap;                     /* always one line */
}
@media (min-width:620px){ .copy-in span{ font-size:16px; } }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--nav) + 12vh) var(--pad) 10vh; }
/* never breaks onto a second line */
.mail{ font-size:13px; letter-spacing:0; white-space:nowrap; display:inline-block; }
@media (min-width:600px){ .mail{ font-size:clamp(15px,2.1vw,28px); letter-spacing:-.01em; } }

/* ============================================================
   REVEAL
   ============================================================ */
.rv{ opacity:0; transform:translate3d(0,16px,0); }
.rv.in{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}

/* placeholder */
.ph{
  background:repeating-linear-gradient(45deg, rgba(248,247,244,.026) 0 12px, transparent 12px 24px), var(--raise);
  display:flex; align-items:center; justify-content:center; min-height:110px;
}
.shot.ph{ width:min(70vw,280px); }
.cell.ph{ aspect-ratio:4/5; }
.film button.ph{ min-height:0; }
.ph em{ font-style:normal; color:var(--fg-3); font-size:10px; letter-spacing:.1em; text-align:center; padding:0 8px; }