/* projects.css — Projects section.
   The homepage offsets its colour field down-right behind the card;
   here the same layered-radial field is shifted up-LEFT, framing a
   lighter field. Shared motif, opposite direction. */

:root{
  --pj-bg:#f4f6f8;
  --pj-paper:#ffffff;
  --pj-ink:#1f2c38;
  --pj-dim:#71818d;
  --pj-line:#d9e0e6;
  --pj-accent:#b84a2b;
  --pj-link:#304f65;
  --pj-muted:#536775;
  --pj-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --pj-sans:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--pj-bg);
  color:var(--pj-ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--pj-ink);color:#fff}

/* ---------- chrome ---------- */
.pj-top{
  max-width:1060px;margin:64px auto 0;padding:0 24px;
  display:flex;justify-content:space-between;align-items:baseline;
}
.pj-crumbs{
  font-family:var(--pj-sans);
  font-size:.8125rem;color:var(--pj-muted);
}
.pj-crumbs a{color:var(--pj-muted)}
.pj-crumbs a:hover{color:var(--pj-ink)}
.nb{white-space:nowrap}

/* ---------- hero: gradient rect shifted up-left, white title ---------- */
.pj-hero{
  position:relative;max-width:1060px;
  margin:52px auto 0;padding:0 24px;
}
.pj-hero-visual{
  position:relative;
  width:min(680px,84%);
  aspect-ratio:16/8;
  overflow:hidden;
  transform:translate(-24px,-24px);
}
.pj-hero-visual>svg{display:block;width:100%;height:100%}
.pj-hero-inner{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;
  padding:0 24px 34px 40px;
}
.pj-title{
  margin:0;
  font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans",sans-serif;
  font-size:clamp(4.2rem,11vw,7.8rem);
  font-weight:700;letter-spacing:-.045em;line-height:.92;
  color:#f7f5ef;
}
.pj-title--long{font-size:clamp(3rem,7.2vw,5.2rem)}

/* ---------- achievements ---------- */
.pj-ach{max-width:1060px;margin:64px auto 0;padding:0 24px}
.pj-tag{
  margin:0 0 26px;
  font-family:var(--pj-mono);font-size:.9375rem;letter-spacing:.02em;
  color:#3c4a55;
}
.pj-reports{
  list-style:disc;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px 24px;
  font-family:var(--pj-mono);font-size:.875rem;
}
.pj-reports li{list-style-position:outside;padding-left:.55em;color:var(--pj-ink)}
.pj-reports a{color:var(--pj-ink)}
.pj-reports a:hover{text-decoration:underline}
.pj-reports .more{list-style:none;padding-left:0;color:var(--pj-dim)}

/* ---------- projects index: the field itself, names in white ---------- */
.pj-index{min-height:100svh;display:flex;flex-direction:column}
.pj-field{position:fixed;inset:0;z-index:-1}
.pj-field>svg{display:block;width:100%;height:100%}
.pj-shelf{
  flex:1;width:100%;max-width:1060px;margin:0 auto;padding:96px 24px 0;
  display:flex;align-items:flex-end;
}
.pj-shelf-list{list-style:none;margin:0;padding:0}
.pj-shelf-list li + li{margin-top:44px}
.pj-shelf-list a{display:inline-block;color:#f7f5ef}
.pj-shelf-list .n{
  display:block;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(3.6rem,9vw,6.6rem);
  font-weight:700;letter-spacing:-.045em;line-height:.95;
}
.pj-shelf-list .d{
  display:block;margin-top:14px;
  font-family:var(--pj-mono);font-size:.875rem;letter-spacing:.01em;
}
.pj-shelf-list a:hover .n{text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.1em}
.pj-index .pj-top{width:100%}
.pj-index .pj-foot{margin:64px auto 48px;width:100%}
.pj-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- footer ---------- */
.pj-foot{
  max-width:1060px;margin:90px auto 64px;padding:0 24px;
  font-family:var(--pj-sans);font-size:.8125rem;color:var(--pj-muted);
}
.pj-foot nav{display:flex;gap:26px}
.pj-foot a{color:var(--pj-link)}

/* ---------- noscript: no JS = no gradient svg, keep structure ---------- */
.pj-hero-visual:empty{background:linear-gradient(135deg,#6fa6cd 0%,#82b8ab 40%,#e3a76c 75%,#8ba4d6 100%)}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .pj-hero{margin-top:36px}
  .pj-hero-visual{width:94%;transform:translate(-12px,-12px)}
  .pj-hero-inner{padding:0 12px 22px 24px}
  .pj-reports{grid-template-columns:1fr}
  .pj-ach{margin-top:44px}
}
@media(max-width:560px){
  .pj-title{font-size:4.4rem}
  .pj-title--long{font-size:2.9rem}
}