/* Home v0.3 — deliberately one viewport, with an editorial/photo-essay composition.
   Photos are visual references; the Chrysler card is typography, not a false photo. */

.home-page {
  background: #272727;
  color: #e6e6e2;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.home-page .site-header {
  height: 66px;
  padding: 0 3.6%;
  background: #272727;
}
.home-page .site-name {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: .09em;
}
.home-page .header-nav {
  gap: 41px;
}
.home-page .header-nav a {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .16em;
}
.home-page .home-scene {
  position: relative;
  height: calc(100vh - 66px);
  height: calc(100dvh - 66px);
  width: 100%;
  overflow: hidden;
}
.home-page .home-item {
  position: absolute;
  z-index: 2;
  display: block;
  color: #dfded9;
  width: fit-content;
  transition: opacity .3s ease;
}
.home-page .home-item:hover {
  opacity: .72;
}
.home-page .home-picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #343937;
}
.home-page .home-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.65) contrast(.91);
}
.home-page .home-item .item-label {
  display: flex;
  gap: 7px;
  align-items: center;
  position: static;
  padding-top: 9px;
  font-size: 9px;
  line-height: 1.25;
  color: #b0b1a9;
  font-weight: 400;
  letter-spacing: .12em;
  white-space: nowrap;
}
.home-page .home-item .item-label i {
  font-style: normal;
  color: #71736e;
}
.image-a { top: 3.8%; left: 10.9%; width: min(21.5vw, 310px)!important; }
.photo-a { aspect-ratio: 1.64; }
.image-b { top: 14%; right: 10.4%; width: min(18.1vw, 268px)!important; }
.photo-b { aspect-ratio: 1.3; }
.image-c { top: 57.5%; left: 4.25%; width: min(12.2vw, 169px)!important; }
.photo-c { aspect-ratio: .93; }
.conquest-item { top: 59.5%; right: 6%; width: min(14.5vw, 211px)!important; }
.conquest-image {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #766155;
  color: #eee8df;
  width: 100%;
  aspect-ratio: 1.05;
  padding: 16px 17px 15px;
  overflow: hidden;
}
.conquest-year {
  display: flex;
  gap: 13px;
  align-items: center;
  font-size: clamp(26px, 3.1vw, 43px);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -.055em;
}
.year-rule { display: block; flex: 1; height: 1px; background: #dbd2c7; opacity: .5; }
.conquest-type {
  font-size: clamp(13px, 1.15vw, 18px);
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 1.25;
}
.conquest-small {
  font-size: 7px;
  letter-spacing: .14em;
  white-space: nowrap;
}
.home-central {
  position: absolute;
  z-index: 5;
  width: min(520px, 43vw);
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.home-introline {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .18em;
  color: #bdbdb5;
  margin-bottom: 30px;
}
.home-introline span {
  display: inline-block;
  color: #8b8d86;
  padding: 0 10px;
}
.home-central h1 {
  font-size: clamp(40px, 4.5vw, 66px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.05em;
  margin: 0;
}
.home-central .heading-end { color: #b3b0a6; }
.home-line {
  font-size: 13px;
  font-weight: 300;
  color: #c5c4bd;
  line-height: 1.75;
  letter-spacing: .01em;
  margin: 27px 0 31px;
}
.home-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: 10px;
  letter-spacing: .13em;
  border: 1px solid #898b83;
  color: #edece6;
  min-width: 146px;
  height: 43px;
  padding: 0 14px;
  border-radius: 0;
  font-weight: 400;
  transition: background .22s, color .22s;
}
.home-enter:hover { background: #e8e8e1; color: #292929; }
.home-enter span { font-size: 18px; letter-spacing: 0; font-weight: 300; }
.home-notice {
  position: absolute;
  z-index: 2;
  left: 35%;
  bottom: 10.8%;
  width: 260px;
  border-top: 1px solid #696b63;
  display: grid;
  grid-template-columns: 1fr 23px;
  gap: 10px 10px;
  padding-top: 10px;
  color: #deded9;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 300;
}
.home-notice .notice-index {
  grid-column: 1 / -1;
  font-size: 9px;
  line-height: 1.1;
  color: #a3a49b;
  letter-spacing: .13em;
  font-weight: 400;
}
.home-notice a { text-align: right; font-size: 19px; font-weight: 300; align-self: end; }
.home-notice a:hover { color: #fff; }
.home-aside { position: absolute; bottom: 3%; font-size: 9px; font-weight: 400; letter-spacing: .16em; color: #878980; }
.home-aside-left { left: 3.6%; }
.home-aside-right { right: 3.6%; }

/* Moderate landscape screens */
@media (max-width: 1100px) {
  .image-a { left: 7.2%; width: 23vw!important; }
  .image-b { right: 7.2%; width: 20.4vw!important; }
  .image-c { left: 4%; width: 15.3vw!important; }
  .conquest-item { right: 4%; width: 17vw!important; }
  .home-central { width: 50vw; }
  .home-notice { left: 33%; }
}
@media (max-width: 760px) {
  .home-page .site-header { height: 59px; padding: 0 5%; }
  .home-page .site-name { font-size: 15px; }
  .home-page .header-nav { gap: 25px; }
  .home-page .home-scene { height: calc(100vh - 59px); height: calc(100dvh - 59px); }
  .image-a { top: 6%; left: 8%; width: 37vw!important; }
  .image-b { top: 14%; right: 7%; width: 29vw!important; }
  .image-c { top: 68%; left: 6%; width: 24vw!important; }
  .conquest-item { top: 67%; right: 7%; width: 27vw!important; }
  .conquest-image { padding: 11px; }
  .conquest-year { font-size: 29px; }
  .conquest-type { font-size: 13px; }
  .conquest-small { font-size: 6px; letter-spacing: .06em; }
  .home-central { width: 84vw; top: 46%; }
  .home-central h1 { font-size: clamp(41px, 7vw, 60px); }
  .home-introline { font-size: 9px; margin-bottom: 19px; }
  .home-line { margin: 17px 0 23px; font-size: 12px; }
  .home-enter { height: 41px; font-size: 9px; min-width: 139px; }
  .home-notice { display: none; }
  .home-aside { bottom: 2%; font-size: 8px; }
  .home-aside-right { display: none; }
  .home-page .home-item .item-label { font-size: 7px; padding-top: 7px; }
}
@media (max-width: 480px) {
  .image-a { top: 7%; left: 6%; width: 44vw!important; }
  .image-b { top: 13%; right: 5%; width: 29vw!important; }
  .image-c { top: 68%; left: 5.5%; width: 30vw!important; }
  .conquest-item { top: 69%; right: 5.5%; width: 34vw!important; }
  .home-central { top: 45%; width: 92vw; }
  .home-central h1 { font-size: clamp(39px, 9.5vw, 53px); }
  .home-introline { font-size: 8px; }
  .home-line { font-size: 12px; }
  .conquest-type { font-size: 12px; }
}
@media (max-height: 730px) and (min-width: 761px) {
  .image-a { top: 0; width: 18vw!important; }
  .image-b { top: 4%; width: 16.5vw!important; }
  .image-c { top: 59%; width: 10vw!important; }
  .conquest-item { top: 57%; width: 13vw!important; }
  .home-central { top: 48%; }
  .home-central h1 { font-size: clamp(38px, 4vw, 54px); }
  .home-introline { margin-bottom: 13px; }
  .home-line { margin: 16px 0; }
  .home-notice { bottom: 5%; width: 220px; }
}
@media (max-height: 650px) and (max-width: 760px) {
  .image-a { top: 1%; width: 30vw!important; }
  .image-b { top: 2%; width: 26vw!important; }
  .image-c, .conquest-item { top: 73%; width: 17vw!important; }
  .home-central { top: 46%; }
  .home-central h1 { font-size: clamp(33px, 7vw, 47px); }
  .home-introline { margin-bottom: 10px; }
  .home-line { margin: 10px 0 16px; }
  .home-page .home-item .item-label { display: none; }
  .home-aside { display: none; }
}
@media (max-height: 460px) {
  .home-notice, .image-c, .conquest-item, .home-aside { display: none; }
}

/* v0.4.0 — Warm archival finish; the name appears once, at the center. */
.home-page {
  background: linear-gradient(145deg, #302e2b 0%, #2b2926 46%, #252423 100%);
  color: #e7e2d9;
  isolation: isolate;
}
.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 24;
  background: url("/grain.svg") repeat;
  background-size: 320px 320px;
  mix-blend-mode: soft-light;
  opacity: .23;
  pointer-events: none;
}
.home-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  background: radial-gradient(ellipse at 50% 47%, transparent 30%, rgba(8, 7, 5, .22) 100%);
  pointer-events: none;
}
.home-page .site-header {
  background: transparent;
}
.home-page .header-index {
  color: #aaa69e;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .22em;
}
.home-page .home-picture img {
  filter: saturate(.52) sepia(.16) contrast(.9) brightness(.91);
}
.home-page .home-central {
  top: 45.5%;
  width: min(530px, 46vw);
}
.home-page .home-introline {
  font-size: 9px;
  color: #c4bdb2;
  letter-spacing: .3em;
  margin-bottom: 26px;
}
.home-page .home-central h1 {
  font-family: "Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: clamp(65px, 6.8vw, 105px);
  font-weight: 400;
  letter-spacing: .13em;
  text-indent: .13em;
  line-height: 1.04;
  color: #e8e2d7;
  margin: 0;
}
.home-page .home-central h1 span {
  display: block;
  white-space: nowrap;
}
.home-page .home-central h1 .given-name {
  margin-bottom: 5px;
}
.home-page .home-line {
  margin: 27px 0 25px;
  color: #aaa69e;
  font-size: 11px;
  letter-spacing: .055em;
}
.home-page .home-enter {
  border-radius: 50%;
  min-width: 94px;
  width: 94px;
  height: 44px;
  font-size: 9px;
  gap: 9px;
  border-color: #98938a;
  padding: 0 7px;
  background: transparent;
  color: #ddd9d1;
}
.home-page .home-enter:hover {
  background: #d6d0c6;
  color: #292722;
}
.home-page .home-item .item-label,
.home-page .home-aside,
.home-page .home-notice .notice-index {
  color: #a9a49a;
}
.home-page .conquest-image {
  background: #66564e;
}
@media (max-width: 1100px) {
  .home-page .home-central { width: 52vw; }
  .home-page .home-central h1 { font-size: clamp(59px, 6.4vw, 86px); }
}
@media (max-width: 760px) {
  .home-page .home-central { top: 45.5%; width: 88vw; }
  .home-page .home-central h1 { font-size: clamp(55px, 10.2vw, 76px); }
  .home-page .home-introline { margin-bottom: 16px; font-size: 8px; }
  .home-page .home-line { margin: 19px 0 20px; }
}
@media (max-width: 480px) {
  .home-page .home-central { width: 94vw; }
  .home-page .home-central h1 { font-size: clamp(50px, 12.5vw, 67px); }
  .home-page .home-central h1 .given-name { margin-bottom: 1px; }
  .home-page .header-index { font-size: 9px; }
  .home-page .home-enter { width: 86px; min-width: 86px; height: 40px; }
}
@media (max-height: 730px) and (min-width: 761px) {
  .home-page .home-central { top: 46%; }
  .home-page .home-central h1 { font-size: clamp(52px, 6vw, 73px); }
  .home-page .home-introline { margin-bottom: 12px; }
  .home-page .home-line { margin: 14px 0 18px; }
}
@media (max-height: 650px) and (max-width: 760px) {
  .home-page .home-central { top: 49%; }
  .home-page .home-central h1 { font-size: clamp(38px, 7vw, 52px); }
  .home-page .home-introline { margin-bottom: 9px; }
  .home-page .home-line { margin: 10px 0 13px; }
}


/* v0.4.2 — greener analogue charcoal. No decorative terminal UI. */
.home-page {
  background:
    radial-gradient(ellipse 72% 78% at 19% 18%, rgba(107,134,97,.19) 0%, transparent 72%),
    radial-gradient(ellipse 68% 78% at 81% 74%, rgba(96,119,84,.13) 0%, transparent 74%),
    radial-gradient(ellipse at 49% 43%, rgba(61,87,60,.1), transparent 70%),
    linear-gradient(148deg, #343b33 0%, #2e352e 42%, #252d27 100%);
  color: #e4e9da;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 24;
  background: url("/grain.svg") repeat;
  background-size: 320px 320px;
  mix-blend-mode: soft-light;
  opacity: .31;
  pointer-events: none;
}
.home-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  background: radial-gradient(ellipse 78% 85% at 50% 48%, transparent 18%, rgba(13,19,13,.26) 100%);
  pointer-events: none;
}
.home-page .site-header { background: transparent; }
.home-page .header-index,
.home-page .header-nav a,
.home-page .home-introline,
.home-page .home-line,
.home-page .home-enter,
.home-page .home-notice,
.home-page .home-aside,
.home-page .home-item .item-label {
  font-family: "JetBrains Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
}
.home-page .header-index { color: #b9c3b1; letter-spacing: .13em; }
.home-page .header-nav a { color: #e0e6d9; letter-spacing: .09em; }
.home-page .home-picture img {
  filter: saturate(.59) sepia(.07) contrast(.91) brightness(.9);
}
.home-page .home-introline {
  color: #b6c0ae;
  letter-spacing: .19em;
  font-size: 9px;
}
.home-page .home-central h1 {
  font-family: "JetBrains Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-weight: 400;
  font-size: clamp(58px, 6.2vw, 93px);
  letter-spacing: .065em;
  text-indent: .065em;
  line-height: 1.08;
  color: #e7eadc;
  margin: 0;
}
.home-page .home-line {
  color: #bfc8b7;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .025em;
}
.home-page .home-enter {
  color: #e6e9dd;
  background: rgba(224,235,213,.025);
  border-color: rgba(212,224,203,.43);
  border-radius: 50%;
  letter-spacing: .09em;
}
.home-page .home-enter:hover {
  background: #dfe7d5;
  color: #263125;
}
.home-page .home-item .item-label,
.home-page .home-aside,
.home-page .home-notice .notice-index { color: #b7c0af; }
.home-page .home-notice {
  border-color: rgba(193,207,185,.45);
  color: #d9e0d3;
}
.home-page .conquest-image { background: #687465; color: #edf0e6; }
.home-page .year-rule { background: #d1ddcb; }
@media (max-width: 1100px) {
  .home-page .home-central h1 { font-size: clamp(53px, 6vw, 82px); }
}
@media (max-width: 760px) {
  .home-page .home-central h1 { font-size: clamp(43px, 9.1vw, 69px); }
}
@media (max-width: 480px) {
  .home-page .home-central h1 { font-size: clamp(37px, 10.1vw, 51px); }
  .home-page .home-introline { font-size: 8px; }
}
@media (max-height: 730px) and (min-width: 761px) {
  .home-page .home-central h1 { font-size: clamp(46px, 5.4vw, 70px); }
}
@media (max-height: 650px) and (max-width: 760px) {
  .home-page .home-central h1 { font-size: clamp(33px, 7vw, 48px); }
}


/* v0.4.4: near-black spruce palette with restrained analogue grain */
.home-page {
  background:
    radial-gradient(ellipse 80% 75% at 18% 17%, rgba(67,89,72,.08), transparent 75%),
    radial-gradient(ellipse 74% 81% at 82% 78%, rgba(48,73,55,.055), transparent 76%),
    linear-gradient(148deg, #1d2c23 0%, #16231d 48%, #101712 100%);
  color: #e7e9dd;
}
.home-page::before {
  opacity: .16;
}
.home-page::after {
  background: radial-gradient(ellipse 80% 84% at 50% 49%, transparent 19%, rgba(3,7,4,.20) 100%);
}
.home-page .header-index,
.home-page .header-nav a,
.home-page .home-item .item-label,
.home-page .home-aside,
.home-page .home-notice .notice-index {
  color: #b8c7b8;
}
.home-page .home-picture img {
  filter: saturate(.52) sepia(.04) contrast(.93) brightness(.82);
}
.home-page .home-central {
  width: min(430px, 36vw);
  left: 50%;
  top: 45.5%;
  transform: translate(-50%, -50%);
  text-align: left;
}
.home-page .home-central h1 {
  font-family: "JetBrains Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-weight: 500;
  font-size: clamp(58px, 6vw, 88px);
  line-height: 1.025;
  letter-spacing: .012em;
  text-indent: 0;
  color: #ebece1;
  margin: 0;
  text-align: left;
}
.home-page .home-introline {
  font-size: 9px;
  letter-spacing: .15em;
  color: #bfcebf;
  margin-bottom: 19px;
}
.home-page .home-line {
  color: #c4d0c3;
  font-size: 11px;
  line-height: 1.7;
  margin: 25px 0 24px;
}
.home-page .home-enter {
  border: 1px solid rgba(221,233,220,.4);
  border-radius: 999px;
  color: #edf0e6;
  background: rgba(223,235,219,.02);
  width: 100px;
  min-width: 100px;
  height: 41px;
}
.home-page .home-enter:hover {
  background: #e4e9da;
  color: #24372b;
}
.home-page .home-notice {
  color: #dce5d9;
  border-color: rgba(202,221,202,.34);
}
.home-page .conquest-image { background: #384b3d; }
@media (max-width: 1100px) {
  .home-page .home-central { width: 40vw; }
  .home-page .home-central h1 { font-size: clamp(51px, 5.7vw, 76px); }
}
@media (max-width: 760px) {
  .home-page .home-central { width: 76vw; top: 46%; }
  .home-page .home-central h1 { font-size: clamp(44px, 8.8vw, 67px); }
}
@media (max-width: 480px) {
  .home-page .home-central { width: 82vw; }
  .home-page .home-central h1 { font-size: clamp(39px, 9.8vw, 52px); }
}
@media (max-height: 730px) and (min-width: 761px) {
  .home-page .home-central h1 { font-size: clamp(48px, 5.4vw, 69px); }
}
@media (max-height: 650px) and (max-width: 760px) {
  .home-page .home-central h1 { font-size: clamp(33px, 7vw, 48px); }
}