/* H2Studio — palette sampled from the reference paintings and the PFP.
   The page is the same sky the illustrations are drawn on, so the banners
   have no visible edge at the top and bottom; only the cream plaque and the
   accent bookmark spine separate one project from the next. */

:root {
  --sky:      #ACD2E0;
  --sky-2:    #C3D4E4;
  --paper:    #F6EFE3;
  --ink:      #223B42;
  --ink-soft: #3F5B64;
  --rust:     #C0573F;
  --ochre:    #E0A64A;
  --sage:     #7E9370;
  --teal:     #2F6E7B;

  --rule: 1.5px solid var(--ink);
  --shelf-w: 1180px;
  --tab: 28px;          /* how far the bookmark tab sticks out */
  --tab-hover: 52px;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.5;
  /* room for the tabs that stick out past the shelf on the right */
  padding: 0 clamp(26px, 5vw, 72px);
}

a { color: inherit; }

:focus-visible {
  outline: 2.5px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- masthead ---------- */

.masthead {
  max-width: var(--shelf-w);
  margin: clamp(34px, 7vw, 84px) auto clamp(26px, 5vw, 60px);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* The PFP already sits on this exact sky, so no frame is needed — the
   character just stands on the page. */
.mark {
  width: clamp(54px, 6.5vw, 78px);
  height: auto;
  display: block;
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 6.4vw, 60px);
  letter-spacing: -0.025em;
  line-height: 1;
}

/* ---------- the shelf of bookmarks ---------- */

.shelf {
  max-width: var(--shelf-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 4vw, 46px);
}

.card {
  --accent: var(--ink);
  position: relative;
  display: block;
  text-decoration: none;
  background: var(--paper);
  border: var(--rule);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .22s cubic-bezier(.22,.61,.36,1),
              box-shadow .22s cubic-bezier(.22,.61,.36,1);
}

/* the accent spine down the binding edge */
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 14px;
  background: var(--accent);
  border-right: var(--rule);
  z-index: 2;
}

/* the tab that pokes out of the opposite edge */
.card::after {
  content: "";
  position: absolute;
  top: 38px;
  left: 100%;
  width: var(--tab);
  height: 92px;
  background: var(--accent);
  border: var(--rule);
  border-left: 0;
  /* the swallowtail notch that makes it read as a bookmark, not a flag */
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
  transition: width .22s cubic-bezier(.22,.61,.36,1);
}

.card:hover,
.card:focus-visible {
  transform: translate(3px, -3px);
  box-shadow: 8px 8px 0 var(--ink);
}

.card:hover::after,
.card:focus-visible::after { width: var(--tab-hover); }

/* ---------- the illustrated half ---------- */

/* Every drawing is trimmed to its subject and stands on a ground line at its
   own bottom edge, so bottom-aligning them makes all four share one floor —
   and the plaque's top border becomes that floor. */
.scene {
  margin-left: 14px;            /* clear the spine */
  aspect-ratio: 37 / 20;
  overflow: hidden;
  border-bottom: var(--rule);
  background: var(--scene-sky, var(--sky));
  display: flex;
  align-items: flex-end;
  gap: clamp(12px, 2vw, 40px);
  padding: 0 clamp(16px, 3vw, 46px) 0 clamp(8px, 1.6vw, 26px);
}

.scene img.art {
  height: 100%;
  width: auto;
  max-width: 62%;
  object-fit: contain;
  object-position: left bottom;
  display: block;
}

/* The screenshot is pinned into the open sky the drawing leaves beside it:
   cream mat, ink keyline, a degree off square. */
.shot {
  margin: 0 0 0 auto;
  align-self: center;
  margin-top: 4%;               /* sits just below the drawing's eye line */
  flex: 0 0 auto;
  width: clamp(180px, 38%, 420px);
  transform: rotate(-1.4deg);
  background: var(--paper);
  border: var(--rule);
  padding: 6px;
  box-shadow: 4px 4px 0 rgba(34, 59, 66, .3);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- the plaque ---------- */

.plaque {
  margin-left: 14px;
  padding: 24px clamp(20px, 2.6vw, 32px) 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px clamp(16px, 3vw, 34px);
  align-items: baseline;
}

.name {
  margin: 0;
  grid-column: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 37px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.line {
  grid-column: 1;
  margin: 8px 0 16px;
  max-width: 64ch;
  font-size: clamp(16.5px, 1.45vw, 20px);
  line-height: 1.45;
  text-wrap: pretty;
  color: var(--ink);
}

.tags {
  grid-column: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tags li {
  font-family: var(--display);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1;
  padding: 6px 10px 7px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}

/* the first tag names the chain and picks up the project's colour on its
   keyline, tying the plaque back to the spine */
.tags li:first-child {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.domain {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: end;
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  color: var(--ink-soft);
  border-bottom: 1.5px dotted var(--ink-soft);
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}

.card:hover .domain,
.card:focus-visible .domain {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- footer ---------- */

.footer {
  max-width: var(--shelf-w);
  margin: clamp(46px, 8vw, 92px) auto clamp(40px, 8vw, 80px);
  padding-top: 20px;
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
}

.colophon {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .15s;
}

.handle:hover { color: var(--ink); }

/* ---------- narrow ---------- */

@media (max-width: 760px) {
  :root { --tab: 15px; --tab-hover: 24px; }

  body { font-size: 16px; }

  /* On a phone there is no room beside the drawing, so the screenshot drops
     below it rather than covering the subject. */
  .scene {
    aspect-ratio: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 10px 12px;
  }

  .scene img.art {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .shot {
    width: 46%;
    max-width: 172px;
    margin: 10px 0 0 auto;
    padding: 4px;
  }

  .plaque {
    grid-template-columns: minmax(0, 1fr);
    padding: 15px 16px 18px;
  }

  .domain {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}