/* the surface: an ordinary, well-made portfolio. Nothing here says "underground" except the
   hole in the ground line at its foot, and the roots that run from each work into the soil. */
.surface {
  position: relative;
  min-height: calc(100svh - 72px); /* the ground line and its hole show at the foot of the first screen */
  display: flex; flex-direction: column;
  padding: 36px clamp(16px, 6vw, 96px) 96px; /* the bottom keeps clear room above the hole */
  background: var(--air);
  color: #1F2328;
  font-family: var(--plain);
}
/* the logo at the top, no job title beside it. The lead shares the areas' grid, so it
   stands over the OSS column and takes no height of its own; below 1000px it drops under the name */
.surface-head {
  width: 100%; max-width: 1280px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr var(--shaft) 1fr; gap: 8px 0; align-items: center;
}
.surface-lede { grid-column: 3; }
.surface-name img { display: block; width: min(100%, clamp(388px, 30vw, 431px)); height: auto; } /* 80px tall at 1440, 69px at 1024, 67px at 1001; the three lines beside it are 78px at 1440, 121px at 1024 (check/surface.mjs keeps the ground on the first screen) */
.surface-call { display: block; margin-bottom: 4px; color: #1F2328; font-size: clamp(15px, 1.25vw, 17px); font-weight: 500; }
.surface-lede { color: #3A3F45; font-size: 13.5px; line-height: 1.7; line-break: strict; word-break: auto-phrase; text-wrap: pretty; }
.surface-lede .keep { white-space: nowrap; } /* the phrase the name comes from is never split */

/* | the mock | the hole | the OSS |: the middle is kept empty down to the ground, over the hole,
   which mole.ts (src/dig/) digs at the middle of the window (so the grid is centred on it) */
.surface { --shaft: clamp(160px, 16vw, 260px); }
.areas {
  width: 100%; margin: clamp(28px, 6vh, 64px) auto 0; max-width: 1280px;
  display: grid; grid-template-columns: 1fr var(--shaft) 1fr; gap: 20px 0;
}
.area--oss { grid-column: 3; }
.area-name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-bottom: 18px;
  font-size: 18px; font-weight: 650; letter-spacing: 0.02em;
  height: 28px; line-height: 28px; /* fixed, so a Latin-only name (OSS) sits level with a Japanese one */
}
.area-name span { color: #6A6F76; font-size: 13px; font-weight: 400; }

.works { list-style: none; display: grid; gap: 20px; }
.work { position: relative; z-index: 4; } /* above the roots, which start behind each card */
.work a:not(.work-aside) {
  display: flex; flex-direction: column; height: 100%;
  padding: 22px;
  background: #FFF;
  border: 1px solid rgb(31 35 40 / .12);
  border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: border-color 200ms var(--ease), translate 200ms var(--ease);
}
.work a:not(.work-aside):hover { border-color: rgb(31 35 40 / .42); translate: 0 -2px; }
.work a:focus-visible { outline: 2px solid #2F5BD3; outline-offset: 3px; }
.work img { display: block; margin-bottom: 18px; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: 6px; background: #E4E6E2; }
.work-kind { color: #6A6F76; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.work h3 { margin-top: 6px; font-size: 22px; font-weight: 650; letter-spacing: 0.01em; }
.work--lead h3 { font-size: 28px; }
.work:not(.work--lead) h3 { margin-top: auto; padding-top: 24px; } /* kind at the top, the name settles at the foot */
.work p { margin-top: 8px; color: #3A3F45; font-size: 15px; line-height: 1.75; }
.work h3, .work p { line-break: strict; word-break: auto-phrase; text-wrap: pretty; } /* as the other Japanese copy: break between phrases */
/* a tool's card shows how it is used: a keystroke, or a word before and after */
.work .tool-show {
  display: flex; align-items: baseline; gap: 8px;
  margin: 18px 0 4px; min-height: 44px;
  font-size: 22px; color: #1F2328;
}
.tool-show kbd {
  padding: 3px 10px;
  border: 1px solid rgb(31 35 40 / .24); border-bottom-width: 3px; border-radius: 6px;
  font: 500 15px/1.4 var(--plain);
}
.tool-show ruby { ruby-position: over; }
.tool-show rt { font-size: 11px; color: #6A6F76; }
.tool-arrow { color: #6A6F76; font-size: 16px; }
.work--tool > a:not(.work-aside) { height: auto; }
/* the demo link sits on its card, top right, level with the kind: under it, it would keep the card off
   the ground. It is the card's sibling, laid over it, since a link can't hold a link */
.work .work-aside {
  position: absolute; top: 22px; right: 22px; z-index: 1;
  color: #6A6F76; font-size: 13px; line-height: 1.4; text-underline-offset: 3px;
}
.work .work-aside:hover { color: #1F2328; }

/* wide: both areas stand on the ground line. The cards fill down to it and open at the foot */
@media (min-width: 1001px) {
  .surface { padding-bottom: 0; }
  .areas { flex: 1; }
  .area { display: flex; flex-direction: column; justify-content: flex-end; }
  .work:last-child a:not(.work-aside) { border-bottom: 0; border-radius: 12px 12px 0 0; }
  .work:last-child a:not(.work-aside):hover { translate: none; } /* it stands on the ground: it doesn't lift */
}
/* narrow: one column, the hole under it all */
@media (max-width: 1000px) {
  .areas, .surface-head { grid-template-columns: 1fr; }
  .surface-lede, .area--oss { grid-column: auto; }
}

/* the strip log belongs to the dig: it slides in once the ground crosses the middle */
.column { transition: translate 500ms var(--ease); }
html[data-layer="surface"] .column { translate: 100% 0; }
html[data-layer="surface"] .needle { visibility: hidden; } /* its label hangs outside the column */

/* roots: the same 1px engraving as the fossils; under the dark, so deep down only the mole finds them */
.roots {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none; stroke: #8A7F6E; stroke-opacity: .8; stroke-width: 1px;
  stroke-linecap: round; stroke-linejoin: round;
}