@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------*/
/* ========= About ========= */
/*--------------------------------------------*/
.about__content { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: var(--space-08_64px); align-items: start; margin-bottom: var(--space-08_64px); }

.about__image-inner { position: relative; overflow: hidden; border: var(--border__hair); background-color: var(--color__paper-dark); }
.about__image-inner::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(var(--color__ink-rgb), 0.15); pointer-events: none; }
.about__image-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.about__text { display: flex; flex-direction: column; gap: var(--space-04_16px); padding-top: var(--space-02_8px); }
.about__text-name { font-family: var(--font-family__en); font-size: var(--font-size-2xl_32px); font-weight: var(--font-weight__medium); letter-spacing: 0.06em; }
.about__text-name::after { content: ""; display: block; width: 64px; height: 3px; margin-top: var(--space-03_12px); background-color: var(--color__red); }
.about__text-body { max-width: 90ch; font-size: var(--font-size-md_16px); line-height: var(--line-height__loose); }

/* == Subsection == */
.about__social,
.about__biography,
.about__affiliation { padding-top: var(--space-06_32px); border-top: 1px dashed var(--color__ochre); margin-top: var(--space-06_32px); }

.about__social-title,
.about__biography-title,
.about__affiliation-title { margin-bottom: var(--space-04_16px); font-family: var(--font-family__en); font-size: var(--font-size-sm_14px); font-weight: var(--font-weight__medium); letter-spacing: 0.16em; color: var(--color__olive); text-transform: uppercase; }

.about__social-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-04_16px); }
.about__social-card { padding: var(--space-04_16px); border: 1px solid rgba(var(--color__ink-rgb), 0.25); background-color: var(--color__paper); }
.about__social-card-label { font-family: var(--font-family__en); font-size: var(--font-size-xs_12px); letter-spacing: 0.1em; color: var(--color__ochre); text-transform: uppercase; }
.about__social-card-value a { display: inline-block; margin-top: var(--space-01_4px); font-size: var(--font-size-sm_14px); word-break: break-all; transition: color var(--motion__fast) var(--motion__ease); }
.about__social-card-value a:hover, .about__social-card-value a:focus-visible { color: var(--color__red); }

.about__biography-list { display: flex; flex-direction: column; }
.about__biography-card { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-04_16px); align-items: baseline; padding-block: var(--space-04_16px); border-top: 1px solid rgba(var(--color__ink-rgb), 0.2); }
.about__biography-card:last-child { border-bottom: 1px solid rgba(var(--color__ink-rgb), 0.2); }
.about__biography-card-year { font-family: var(--font-family__en); font-size: var(--font-size-lg_18px); font-weight: var(--font-weight__medium); color: var(--color__red); }
.about__biography-card-title { font-size: var(--font-size-md_16px); font-weight: var(--font-weight__medium); }
.about__biography-card-title a { transition: color var(--motion__fast) var(--motion__ease); }
.about__biography-card-title a:hover, .about__biography-card-title a:focus-visible { color: var(--color__red); }
.about__biography-card-role { grid-column: 2; font-size: var(--font-size-xs_12px); color: var(--color__olive); }

.about__affiliation-content { padding: var(--space-06_32px); border: var(--border__hair); background-color: var(--color__paper-dark); }
.about__affiliation-name { font-family: var(--font-family__en); font-size: var(--font-size-lg_18px); font-weight: var(--font-weight__medium); letter-spacing: 0.1em; }
.about__affiliation-text { margin-top: var(--space-03_12px); font-size: var(--font-size-sm_14px); line-height: var(--line-height__loose); }
.about__affiliation-divider { width: 100%; height: 1px; margin-block: var(--space-05_24px); background-color: var(--color__ink); opacity: 0.3; }
.about__affiliation-list { display: flex; flex-wrap: wrap; gap: var(--space-06_32px); }
.about__affiliation-card-label { font-family: var(--font-family__en); font-size: var(--font-size-xs_12px); letter-spacing: 0.1em; color: var(--color__ochre); text-transform: uppercase; }
.about__affiliation-card-value a { display: inline-block; margin-top: var(--space-01_4px); font-size: var(--font-size-sm_14px); font-weight: var(--font-weight__medium); border-bottom: 1px solid currentColor; transition: color var(--motion__fast) var(--motion__ease); }
.about__affiliation-card-value a:hover, .about__affiliation-card-value a:focus-visible { color: var(--color__red); }

@media (max-width: 1023px) {
  .about__content { grid-template-columns: 240px 1fr; gap: var(--space-06_32px); }
}
@media (max-width: 639px) {
  .about__content { grid-template-columns: 1fr; }
  .about__image-inner { max-width: 240px; }
  .about__biography-card { grid-template-columns: 56px 1fr; }
}

/*--------------------------------------------*/
/* ========= Artwork Grid ========= */
/*--------------------------------------------*/
.artwork-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-06_32px); counter-reset: artwork-count; }

.artwork-grid__card { position: relative; counter-increment: artwork-count; }
.artwork-grid__card-image { position: relative; overflow: hidden; border: var(--border__hair); background-color: var(--color__paper-dark); }
.artwork-grid__card-image img { width: 100%; height: auto; transition: transform var(--motion__normal) var(--motion__ease); }
.artwork-grid__card-image::before { content: counter(artwork-count, decimal-leading-zero); position: absolute; top: var(--space-02_8px); left: var(--space-02_8px); z-index: 2; padding: 2px 6px; font-family: var(--font-family__en); font-size: var(--font-size-xs_12px); font-weight: var(--font-weight__medium); color: var(--color__paper); background-color: var(--color__ink); }
.artwork-grid__card-title { margin-top: var(--space-03_12px); font-family: var(--font-family__en); font-size: var(--font-size-sm_14px); font-weight: var(--font-weight__medium); letter-spacing: 0.06em; opacity: 0; transform: translateY(4px); transition: opacity var(--motion__fast) var(--motion__ease), transform var(--motion__fast) var(--motion__ease); }

@media (hover: hover) {
  .artwork-grid__card:hover .artwork-grid__card-image img,
  .artwork-grid__card:focus-within .artwork-grid__card-image img { transform: scale(1.02); }
  .artwork-grid__card:hover .artwork-grid__card-title,
  .artwork-grid__card:focus-within .artwork-grid__card-title { opacity: 1; transform: translateY(0); }
}
@media (hover: none) {
  .artwork-grid__card-title { opacity: 1; transform: none; }
}

@media (max-width: 1023px) {
  .artwork-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-05_24px); }
}
@media (max-width: 639px) {
  .artwork-grid { grid-template-columns: 1fr; gap: var(--space-06_32px); }
}

/*--------------------------------------------*/
/* ========= Commission Grid ========= */
/*--------------------------------------------*/
.section--commissioned .section__label::after { content: "COMMISSIONED WORK"; margin-left: var(--space-03_12px); font-family: var(--font-family__en); font-size: var(--font-size-xs_12px); font-weight: var(--font-weight__medium); letter-spacing: 0.14em; color: var(--color__olive); vertical-align: middle; }

.commission-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-06_32px); counter-reset: commission-count; }

.commission-grid__card { position: relative; counter-increment: commission-count; padding: var(--space-04_16px); border: 1px dashed var(--color__olive); background-color: rgba(var(--color__paper-rgb), 0.4); }
.commission-grid__card-image { position: relative; overflow: hidden; border: var(--border__hair); }
.commission-grid__card-image img { width: 100%; height: auto; transition: transform var(--motion__normal) var(--motion__ease); }
.commission-grid__card-image::before { content: "COMMISSION No." counter(commission-count, decimal-leading-zero); position: absolute; top: var(--space-02_8px); left: var(--space-02_8px); z-index: 2; padding: 2px 6px; font-family: var(--font-family__en); font-size: var(--font-size-xs_12px); font-weight: var(--font-weight__medium); color: var(--color__paper); background-color: var(--color__olive); }
.commission-grid__card-title { margin-top: var(--space-03_12px); font-family: var(--font-family__en); font-size: var(--font-size-sm_14px); font-weight: var(--font-weight__medium); letter-spacing: 0.06em; }

@media (hover: hover) {
  .commission-grid__card:hover .commission-grid__card-image img,
  .commission-grid__card:focus-within .commission-grid__card-image img { transform: scale(1.02); }
}

@media (max-width: 639px) {
  .commission-grid { grid-template-columns: 1fr; }
}

/*--------------------------------------------*/
/* ========= Contact ========= */
/*--------------------------------------------*/
.section--contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-08_64px); }
.section--contact .section__label,
.section--contact .section__lead { grid-column: 1 / -1; }

.contact__personal,
.contact__corporate { min-width: 0; padding: var(--space-06_32px); border: var(--border__hair); background-color: var(--color__paper); }
.contact__corporate { border-color: var(--color__olive); }

.contact__personal-title,
.contact__corporate-title { margin-bottom: var(--space-03_12px); font-family: var(--font-family__en); font-size: var(--font-size-lg_18px); font-weight: var(--font-weight__medium); letter-spacing: 0.08em; text-transform: uppercase; }
.contact__personal-title::before { content: "▸ "; color: var(--color__red); }
.contact__corporate-title::before { content: "▸ "; color: var(--color__olive); }

.contact__personal-lead,
.contact__corporate-lead { margin-bottom: var(--space-04_16px); font-size: var(--font-size-sm_14px); line-height: var(--line-height__loose); }
.contact__personal-value,
.contact__corporate-lead { overflow-wrap: anywhere; }

.contact__personal-list { display: flex; flex-direction: column; gap: var(--space-01_4px); padding-block: var(--space-03_12px); border-top: 1px dashed rgba(var(--color__ink-rgb), 0.3); }
.contact__personal-label { font-family: var(--font-family__en); font-size: var(--font-size-xs_12px); letter-spacing: 0.1em; color: var(--color__ochre); text-transform: uppercase; }
.contact__personal-value a { font-weight: var(--font-weight__medium); color: var(--color__red); border-bottom: 1px solid currentColor; }
.contact__personal-value a:hover, .contact__personal-value a:focus-visible { opacity: 0.7; }

.contact__corporate-lead a { font-weight: var(--font-weight__medium); color: var(--color__olive); border-bottom: 1px solid currentColor; transition: color var(--motion__fast) var(--motion__ease); }
.contact__corporate-lead a:hover, .contact__corporate-lead a:focus-visible { color: var(--color__red); }

@media (max-width: 1023px) {
  .section--contact { grid-template-columns: 1fr; gap: var(--space-06_32px); }
}

/* ================ WORK MODAL ================ */
.work-modal__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: zoom-in;
}

.work-modal__trigger:focus-visible {
  outline: 2px solid var(--color__red);
  outline-offset: 4px;
}

.work-modal__trigger img {
  display: block;
  width: 100%;
  height: auto;
}

.work-modal {
  width: min(92vw, 1400px);
  max-width: none;
  max-height: 92vh;
  margin: auto;
  padding: 0;
  border: var(--border__hair);
  background-color: var(--color__paper);
  color: var(--color__ink);
  box-shadow: 6px 6px 0 var(--color__ink);
  overflow: visible;
}

.work-modal::backdrop {
  background: rgba(20, 18, 15, 0.78);
}

.work-modal__inner {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 20vh;
  max-height: 92vh;
  padding: var(--space-06_32px);
}

.work-modal__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: calc(92vh - (var(--space-06_32px) * 2));
  margin: 0;
}

.work-modal__image img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(92vh - (var(--space-06_32px) * 2));
  height: auto;
  object-fit: contain;
}

.work-modal__title {
  position: absolute;
  left: var(--space-06_32px);
  bottom: var(--space-04_16px);
  margin: 0;
  padding: 4px 8px;
  font-family: var(--font-family__en);
  font-size: var(--font-size-xs_12px);
  letter-spacing: 0.08em;
  background-color: var(--color__paper);
}

.work-modal__close {
  position: absolute;
  top: var(--space-03_12px);
  right: var(--space-03_12px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--border__hair);
  background-color: var(--color__paper);
  color: var(--color__ink);
  box-shadow: 2px 2px 0 var(--color__ink);
  cursor: pointer;
  transition: background-color var(--motion__fast) var(--motion__ease), color var(--motion__fast) var(--motion__ease), transform var(--motion__fast) var(--motion__ease);
}

.work-modal__close span {
  position: absolute;
  width: 20px;
  height: 1px;
  background-color: currentColor;
}

.work-modal__close span:first-child { transform: rotate(45deg); }
.work-modal__close span:last-child { transform: rotate(-45deg); }

.work-modal__close:hover,
.work-modal__close:focus-visible {
  background-color: var(--color__red);
  color: var(--color__paper);
  transform: translate(-1px, -1px);
}

.work-modal__close:focus-visible {
  outline: 2px solid var(--color__red);
  outline-offset: 3px;
}

@media (max-width: 639px) {
  .work-modal {
    width: calc(100vw - (var(--space-03_12px) * 2));
    max-height: 90vh;
  }

  .work-modal__inner {
    max-height: 90vh;
    padding: var(--space-04_16px);
  }

  .work-modal__image,
  .work-modal__image img {
    max-height: calc(90vh - (var(--space-04_16px) * 2));
  }

  .work-modal__title {
    left: var(--space-04_16px);
    bottom: var(--space-03_12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-modal__close,
  .work-modal__trigger img {
    transition: none;
  }
}