/* Frame: a fixed 1000×562 "screen" on black, like danieldaniel.us */
:root {
  --frame-w: 1000px;
  --frame-h: 562px;
  --gutter: 12px; /* space between text and the frame edges */
  --ink: #fff;
  --void: #000;
  --espresso: #261a12; /* page background: dark walnut */
  --hand: 'Nothing You Could Do', 'Bradley Hand', cursive;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--espresso);
  color: var(--ink);
  font: 11px/1.35 Arial, Helvetica, sans-serif;
  letter-spacing: -.04em;
}

.frame {
  position: relative;
  overflow: hidden;
  width: var(--frame-w);
  height: var(--frame-h);
  margin: 25px auto;
}

a { color: var(--ink); text-decoration: none; }
/* Hover highlight: site.js picks gold, green or red at random, with whichever text color reads best */
a:hover, a:focus-visible,
.langs button:hover, .langs button:focus-visible,
.js-form button:hover, .js-form button:focus-visible {
  color: var(--hl-fg, var(--void));
  background: var(--hl-bg, var(--ink));
  outline: none;
}

h3 {
  position: relative;
  z-index: 3;
  margin: 16px 0 3px;
  font-size: 11px;
  font-weight: bold;
}
h3:first-child { margin-top: 0; }

ul { list-style: none; margin: 0; padding: 0; }

/* Left column (not positioned on the homepage, so previews anchor to the frame) */
.column {
  width: 560px;
  padding: var(--gutter) 0 0 var(--gutter);
}
.column li a { position: relative; z-index: 3; }

/* Homepage hover previews slide in from the right */
.preview {
  position: absolute;
  top: 0;
  left: var(--frame-w);
  z-index: 1;
  width: var(--frame-w);
  height: var(--frame-h);
  object-fit: cover;
  transition: left 1s;
}
li a:hover + .preview,
li a:focus-visible + .preview { left: 0; }

/* Headshot + handwritten name, same width, centered in the right half of the frame, nudged 80px left */
.portrait {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 80px);
  right: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.portrait .headshot, .portrait .signature { width: 203px; }
.headshot {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
}
.signature {
  position: relative;
  z-index: 2;
  font-family: var(--hand);
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  pointer-events: none;
}
.signature span { display: inline-block; font-size: 96px; }
.signature img { display: block; width: 100%; height: auto; }
.portrait .signature { margin-top: 7px; text-align: center; }

/* ---------- Project pages ---------- */

.carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.strip {
  display: flex;
  width: max-content;
  height: 100%;
  transition: transform .9s ease-in-out;
}
.strip img {
  display: block;
  flex: none; /* width comes from the width attribute: full frame for horizontal photos */
  height: 100%;
  object-fit: cover;
}

/* A project with a single photo just sits still */
.carousel.still img { width: 100%; height: 100%; object-fit: cover; }


.project .column {
  position: absolute;
  top: 0;
  bottom: var(--gutter);
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 440px;
}
.team-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 14px 28px 0;
  line-height: 1.5;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.5) transparent;
}
.team-list li { padding-left: 1.2em; text-indent: -1.2em; }
.name { text-transform: uppercase; white-space: nowrap; }
.name + .name { margin-left: .9em; }

.project-head { display: flex; align-items: baseline; gap: 14px; }
.close { font-weight: bold; font-size: 12px; padding: 0 3px; }

.pager {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  z-index: 3;
  display: flex;
  gap: 28px;
}

/* Laurels or quotes in the bottom-right corner */
.corner {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 2;
}

/* Character name: vertically centered on the right side */
.signature.character {
  position: absolute;
  top: 50%;
  right: var(--gutter); /* site.js centers it over the laurels/quotes */
  max-width: 300px;
  transform: translateY(-50%);
}

.laurels {
  display: grid;
  grid-template-columns: repeat(var(--cols), 118px);
  gap: 8px 10px;
}
.laurel { display: block; width: 100%; height: auto; }
.laurel .leaves { fill: var(--ink); color: var(--ink); }
.laurel .words {
  fill: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  text-anchor: middle;
  letter-spacing: .25px;
}

.press {
  width: 420px;
  max-height: 215px;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.5) transparent;
}
.press blockquote { margin: 0 0 14px; }
.press blockquote:last-child { margin-bottom: 0; }
.press p { margin: 0 0 3px; font-size: 11px; line-height: 1.45; }
.press cite { font-style: normal; font-weight: bold; text-transform: uppercase; }

/* ---------- Info ---------- */

.info { width: 540px; }
.info .bio { margin-top: 16px; }
.bio p { max-width: 64ch; margin: 0 0 10px; font-size: 12px; line-height: 1.55; }
.bio-text[lang="ko"] p { line-height: 1.75; word-break: keep-all; }

.langs { margin-top: 16px; font-weight: bold; }
.langs button {
  padding: 0 1px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: normal;
  cursor: pointer;
}
.langs button[aria-pressed="true"] { font-weight: bold; }
.sep { margin: 0 8px; }

.reach { margin-top: 26px; font-size: 12px; line-height: 1.6; }

/* ---------- Forms ---------- */

.lede { margin: 8px 0 22px; font-size: 12px; }
.js-form { width: 380px; margin-top: 20px; }
.lede + .js-form { margin-top: 0; }
.js-form label {
  display: block;
  margin-bottom: 16px;
  font-weight: bold;
}
.js-form .optional { font-weight: normal; }
.js-form input:not([type="checkbox"]),
.js-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 12px/1.4 Arial, Helvetica, sans-serif;
  resize: vertical;
}
.js-form textarea { border: 1px solid var(--ink); padding: 6px 8px; }
.js-form input:focus-visible,
.js-form textarea:focus-visible,
.js-form button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.js-form label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  cursor: pointer;
}
.js-form input[type="checkbox"] { margin: 0; accent-color: var(--ink); }
.js-form button {
  padding: 6px 14px;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  font: bold 11px Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.js-form button:disabled { opacity: .5; cursor: default; }
.status { min-height: 1.4em; margin: 14px 0 0; font-size: 12px; }
.hp, .js-form [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .preview { transition: none; }
  .strip { transition: none; }
}

/* Phones and tablets: every piece of text at the same (larger) size.
   The page keeps its fixed 1000px frame on phones, so this targets touch screens rather than screen width. */
@media (hover: none) and (pointer: coarse) {
  body, h3, .close, .press p, .bio p, .reach, .lede, .status,
  .js-form input:not([type="checkbox"]), .js-form textarea, .js-form button { font-size: 12px; }
}