/* lee jaeho — ABC Areal Regular 14 / 16.8, one size throughout */
@font-face {
  font-family: "ABC Areal";
  src: url("fonts/ABCAreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --row: 16.8px;
  --m: 56px;                       /* page margin (20 mm at 1440 × 900) */
  --top: calc(50% - var(--row) * 4.5 - 2.5px);   /* name … works sit in the middle of the page (as laid out) */
  --ease: cubic-bezier(.76, 0, .18, 1);
  --soft: cubic-bezier(.33, 0, .2, 1);
  --fg: #000;
  --bg: #fff;
  --faint: rgba(0, 0, 0, .14);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 14px/var(--row) "ABC Areal", Arial, "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a, button, input { color: inherit; font: inherit; letter-spacing: inherit; }
a { text-decoration: none; }
button { background: none; border: 0; cursor: pointer; text-align: left; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
img { display: block; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
input { -webkit-user-select: text; user-select: text; }

#app { position: fixed; inset: 0; height: 100dvh; overflow: hidden; }

/* ---------- picture layers ---------- */
.layer img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .2s linear;
  user-select: none; -webkit-user-drag: none;
}
.layer img.in { opacity: 1; }
.layer img.out { opacity: 0; }

#bleed { position: absolute; inset: 0; pointer-events: none; }
#bleed img { object-fit: cover; }

#stage {
  position: absolute; top: var(--m); bottom: var(--m); right: var(--m);
  left: calc(400 / 1440 * 100%);
  transition: top 1.1s var(--ease), bottom 1.1s var(--ease);
}
#stage img { object-fit: contain; object-position: right center; }
.gal #stage { cursor: zoom-in; }
@media (hover: none) { .gal #stage { cursor: default; } }
.focus #stage { cursor: zoom-out; }
#stage:not(.has) { pointer-events: none; }

#scatter { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#scatter .srow { position: absolute; left: 0; top: 0; height: 0; will-change: transform; }
#scatter img {
  position: absolute; top: 0; object-fit: cover; opacity: 0; cursor: pointer;
  transition: opacity .2s linear; pointer-events: none;
}
#scatter img.in { opacity: 1; pointer-events: auto; }

/* ---------- the text ---------- */
#block { position: absolute; left: 0; right: 0; top: var(--top); transition: opacity .9s var(--soft); pointer-events: none; }
#block .mv { pointer-events: auto; }
.ln, .row { width: max-content; margin-left: auto; margin-right: auto; }
.gap { height: var(--row); }
.left .ln, .left .row { margin-left: var(--m); margin-right: 0; }
.mv { will-change: transform; }

/* white boxes behind each line: invisible on white, they keep text readable over pictures */
.bx {
  display: inline-block; background: var(--bg); white-space: nowrap;
  padding: 0 5px; margin-left: calc(var(--ind, 0px) - 5px); margin-right: -5px;
  transition: opacity .2s linear, margin-left .35s var(--ease), color .2s linear;
}
.hid { opacity: 0; }

.row { position: relative; left: -9.8px; }   /* as laid out: "works" at 701.4 of 1440 */
.left .row { left: 0; }
/* the arrow turns about its own middle; "works" starts 19.6 after the margin */
.ar { display: inline-block; width: 14px; transform-origin: 5.4px 56%; transition: transform .35s var(--ease); }
.works-btn u { margin-left: 5.6px; }
.open .ar { transform: rotate(90deg); }
.works-btn u, .works-btn:hover u { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.list { position: absolute; left: calc(100% + 26.3px); top: 0; }
.left .list { left: calc(100% + 16.4px); }
.list:not(.on) .mv { pointer-events: none; }
.li { width: max-content; }
.li.on .bx, .li.near .bx { --ind: 10px; }
@media (hover: hover) { .li:hover .bx { --ind: 10px; } }
/* the item moves 10px right when it's hovered or chosen; its click area reaches back over where it was, so the click still lands */
.li a, .pdf-btn { position: relative; }
.li a::before, .pdf-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -16px; right: -6px; }
.pdf-btn { text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { .pdf-btn:hover { text-decoration: underline; } }

.form { display: none; margin-left: 36.3px; }   /* 166.3 in the layout: the list column + 36.3 */
.fl { height: var(--row); }
.fl.pr { height: auto; }
.form.on { display: block; }
.form input {
  width: 220px; height: calc(var(--row) + 6px); margin-left: 1.6px; vertical-align: top;
  border: 0; border-bottom: 1px solid var(--fg); border-radius: 0; background: transparent;
  padding: 0 0 6px 11.7px; line-height: var(--row); outline: none; caret-color: var(--fg);
}
.form input::placeholder { color: rgba(0, 0, 0, .28); }
.chk .box { display: inline-block; width: 1em; }
.pol { text-decoration: none; }
@media (hover: hover) { .pol:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }
.privacy { max-width: 330px; }
.privacy .bx { white-space: normal; }
.dots { display: inline-block; min-width: 1.2em; }
.dl-btn { text-decoration: none; }
@media (hover: hover) { .dl-btn:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }
.status.soft .bx { color: rgba(0, 0, 0, .4); }

/* ---------- gallery ---------- */
/* two white boxes, the size they are in the layout: 111.7 × 30.5 and 111.7 × 155 */
#gnav { position: absolute; top: var(--top); left: calc(574 / 1440 * 100%); pointer-events: none; }
#gnav { --gbt: .6px; }
#gnav .gb { position: absolute; left: 0; width: 111.7px; background: var(--bg); transition: opacity .2s linear; }
#gnav .gc { top: var(--gbt, 0px); height: 30.5px; }
#gnav .gn { top: calc(var(--gbt, 0px) + 134.1px); height: 155px; }
#gnav .gb > div { position: absolute; left: 0; top: calc(0px - var(--gbt, 0px)); }
.gal #gnav .gb:not(.hid) { pointer-events: auto; }
#gnav .off { opacity: .14; cursor: default; }
/* the index button: 3 × 3 squares at the foot of the previous / next box; in the index they close up into one */
#gnav .ixb {
  position: absolute; left: 0; bottom: 5px; box-sizing: content-box; width: 11px; height: 11px;
  padding: 6px; margin: -6px;                      /* a larger area to click */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; transition: gap .35s var(--ease);
}
#gnav .ixb i { background: var(--fg); }
#gnav .ixb.on { gap: 0; }

/* index: the work's pictures, right of the boxes, all at once */
#index {
  position: absolute; top: var(--m); bottom: var(--m); right: var(--m);
  left: calc(574 / 1440 * 100% + 111.7px + 40px);
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none; pointer-events: none;
}
#index::-webkit-scrollbar { display: none; }
#index.on { pointer-events: auto; }
#index .ig {
  display: grid; grid-template-columns: repeat(var(--cols), var(--cell));
  gap: var(--g); justify-content: end; align-content: center; align-items: start; min-height: 100%;
}
/* every picture the width of a vertical one, all hanging from the top of their row */
#index .ic { display: block; cursor: pointer; }
#index img { opacity: 0; transition: opacity .2s linear; }
#index img.in { opacity: 1; }
.fly { position: absolute; transform-origin: 0 0; object-fit: cover; pointer-events: none; will-change: transform; }

/* at the first / last picture: a label in place of the cursor */
#edge { position: fixed; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .15s linear; z-index: 5; }
#edge .bx { transform: translate(-50%, -50%); margin: 0; }
#edge.on { opacity: 1; }
@media (hover: none) { #edge { display: none; } }

#return { position: absolute; top: var(--m); left: var(--m); }
#return:not(.on) { pointer-events: none; }
.focus #block { opacity: .12; pointer-events: none; }
.focus #gnav .gb { pointer-events: none; }

/* ---------- privacy policy: where the picture would be, from the counter's column, in lines like the rest ---------- */
#doc {
  position: absolute; top: calc(var(--top) - .6px); bottom: 0; right: var(--m);
  left: calc(574 / 1440 * 100%);
  overflow-y: auto; scrollbar-width: none; padding-bottom: var(--m);
}
#doc::-webkit-scrollbar { display: none; }
#doc[hidden] { display: none; }
.doc-in { max-width: 472px; }
#doc .bx { white-space: normal; -webkit-user-select: text; user-select: text; }
#doc .dh .bx { text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
#doc .dd .bx { color: rgba(0, 0, 0, .4); }
#doc a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { .doc-back:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  :root { --m: 20px; }
  .gal { --top: 20px; }
  #stage { left: var(--m); }
  .gal #stage { top: calc(20px + var(--listend, calc(var(--row) * 14)) + 28px); }
  .gal.focus #stage { top: calc(var(--m) + var(--row) * 2); }
  #stage img { object-position: left top; }
  #gnav { left: auto; right: calc(var(--m) + 111.7px); }
  #gnav .gb { background: transparent; }
  .gal.formopen #stage { top: calc(20px + var(--listend, calc(var(--row) * 14)) + var(--row) * 7 + 28px); }
  .form { margin-left: 0; margin-top: var(--row); }
  .list { width: max-content; }
  .li { width: auto; }
  .li .bx { white-space: normal; }        /* long titles wrap inside the screen (width set in app.js) */
  .focus #block { opacity: 0; }
  #index { left: var(--m); top: calc(20px + var(--listend, calc(var(--row) * 14)) + 28px); bottom: var(--m); }
  #gnav .ixb { bottom: auto; top: calc(var(--row) * 2 + 10px); }   /* under next →, clear of the list */
  #doc { left: var(--m); top: calc(20px + var(--listend, calc(var(--row) * 14)) + 28px); }
  .formopen #doc { top: calc(20px + var(--listend, calc(var(--row) * 14)) + var(--row) * 7 + 28px); }
  #index .ig { justify-content: start; align-content: start; }
}

/* menus and titles in capitals, a little apart (body text, contact and the form stay as they are) */
.name a, .works-btn u, .li a, .pdf-btn, .dl-btn, #gnav, #gnav button, #return .bx, #edge .bx {
  text-transform: uppercase; letter-spacing: .04em; font-size: 13px;
}

/* the Push + Proof button is not part of the editor's preview */
.pp-preview .pp-proof { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0ms !important; }
}