/* ==========================================================================
   Claire Victoria Guffey — portfolio
   Layout after martaprats.es: a 1024px design that scales with the window,
   Times New Roman throughout, a fixed Info column on the left and the Work
   column on the right, each project a click-to-advance slideshow.
   ========================================================================== */

:root {
  --u: calc(100vw / 1024);           /* one design pixel; JS refines it to exclude the scrollbar */
  --fs: 12px;                        /* Times New Roman, size 12, everywhere */
  --head-h: 60px;                    /* measured by JS: the header's real height */
  --lh: 1.2;
  --ink: #000;
  --paper: #fff;
  --rule: rgba(0, 0, 0, .35);
  --serif: "Times New Roman", Times, "Nimbus Roman", serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 8px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: var(--fs); line-height: var(--lh); font-weight: 400;
  -webkit-font-smoothing: auto;
}
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2 { margin: 0; }
h2 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
i { font-style: italic; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.skip { position: fixed; top: .5rem; left: .5rem; z-index: 100; padding: .4rem .8rem; background: var(--ink); color: var(--paper); transform: translateY(-200%); }
.skip:focus { transform: none; }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* --------------------------------------------------------------------------
   Page: 12u side margin; left column 312u, 12u gutter, right column 676u
   -------------------------------------------------------------------------- */
.page { position: relative; min-height: 100vh; padding: 0 calc(12 * var(--u)); }

/* vertical divider at x = 330u, like the template's rotated hairline */
.page::before {
  content: ""; position: fixed; top: 0; bottom: 0; left: calc(330 * var(--u));
  border-left: 1px solid var(--rule); pointer-events: none;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  padding: calc(17 * var(--u)) calc(12 * var(--u)) 0;
  display: grid; grid-template-columns: calc(312 * var(--u)) 1fr; column-gap: calc(12 * var(--u));
  background: var(--paper);
}
.head__left, .head__right {
  display: grid; grid-template-columns: calc(165 * var(--u)) 1fr; align-items: end;
  padding-bottom: calc(5 * var(--u)); border-bottom: 1px solid var(--rule);
}
.head__right { grid-template-columns: 1fr; }
.head__name img { width: 130px; height: auto; transform: translateY(2px); }
.head__link { line-height: inherit; }
.head__link:hover { text-decoration: underline; }
.head__link[aria-expanded="true"] { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Info column (fixed)
   -------------------------------------------------------------------------- */
.info {
  position: fixed; top: calc(var(--head-h) + 10px); left: calc(12 * var(--u)); width: calc(312 * var(--u));
  bottom: 0; overflow: auto; z-index: 10;
  animation: fade .5s ease;
}
.info[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.info__inner { display: flex; flex-direction: column; }
.info__label { margin-top: calc(18 * var(--u)); color: rgba(0, 0, 0, .55); }
.info__text { margin-top: calc(9 * var(--u)); }
.info__list { list-style: none; margin: calc(9 * var(--u)) 0 0; padding: 0; }
.info__list li { list-style: none; padding-left: 0; }
.info__list li::marker { content: none; }
.info__photo { margin: calc(40 * var(--u)) 0 calc(22 * var(--u)); display: flex; justify-content: center; }
.info__photo img { width: calc(122 * var(--u)); min-width: 108px; height: auto; }
.info__cols { display: grid; grid-template-columns: calc(144 * var(--u)) 1fr; column-gap: calc(12 * var(--u)); }
.info .rule { margin-top: calc(18 * var(--u)); }
.info__contact { display: flex; flex-wrap: wrap; gap: 0 calc(24 * var(--u)); }
.info a { text-decoration: underline; text-underline-offset: .12em; }

/* --------------------------------------------------------------------------
   Work column
   -------------------------------------------------------------------------- */
.work {
  margin-left: calc(324 * var(--u));
  padding-top: calc(var(--head-h) + 10px); padding-bottom: calc(60 * var(--u));
}
.project {
  display: grid; grid-template-columns: calc(156 * var(--u)) 1fr; align-items: start;
  margin-bottom: calc(96 * var(--u));
}
.project__title { padding-right: calc(12 * var(--u)); }
.project__body { width: calc(514 * var(--u)); max-width: 100%; }

/* slideshow: one image at a time; click the right half for the next, the left half to go back */
.show__frame {
  position: relative; display: block; width: 100%; aspect-ratio: 514 / 362; overflow: hidden;
}
.show__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%;
  opacity: 0; transition: opacity .55s ease;
}
.show__img.is-on { opacity: 1; }
.show__zone { position: absolute; top: 0; bottom: 0; width: 50%; }
.show__zone--prev {
  left: 0;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14'%3E%3Cpath d='M26 7H2M8 1L2 7l6 6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 13 7, w-resize;
}
.show__zone--next {
  right: 0;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14'%3E%3Cpath d='M0 7h24M18 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 13 7, e-resize;
}
.show__zone:focus-visible { outline-offset: -2px; }
/* small grey hint on the first image */
.show__hint {
  position: absolute; top: 0; right: 0; z-index: 2; pointer-events: none;
  font-size: 8px; line-height: 1; color: rgba(0, 0, 0, .4); letter-spacing: .02em;
}
.show__meta { display: flex; gap: calc(10 * var(--u)); margin-top: calc(5 * var(--u)); color: rgba(0, 0, 0, .55); }
.show__count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.project__text { margin-top: calc(14 * var(--u)); max-width: calc(408 * var(--u)); }
.project__role { margin-top: calc(6 * var(--u)); max-width: calc(408 * var(--u)); font-style: italic; }

.work__end { margin-top: calc(40 * var(--u)); margin-left: calc(156 * var(--u)); }
.work__end img { width: calc(156 * var(--u)); min-width: 108px; height: auto; }

/* --------------------------------------------------------------------------
   Narrow screens: columns stack, type set in absolute sizes
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  :root { --u: 1px; --fs: 12px; --lh: 1.25; }
  .page { padding: 0 14px; }
  .page::before { display: none; }
  .head { position: sticky; top: 0; padding: 12px 14px 0; grid-template-columns: 1fr auto; column-gap: 14px; }
  .head__left { grid-template-columns: 1fr auto; column-gap: 14px; }
  .head__left, .head__right { border-bottom: 0; padding-bottom: 8px; }
  .head::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; border-top: 1px solid var(--rule); }
  .info { position: static; width: auto; padding-top: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
  .info__cols { grid-template-columns: 1fr; }
  .work { margin-left: 0; padding-top: 24px; }
  .project { grid-template-columns: 1fr; row-gap: 8px; margin-bottom: 56px; }
  .project__body { width: 100%; }
  .project__text { max-width: none; }
  .work__end { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .info { animation: none; opacity: 1; }
  .show__img { transition: none; }
}