/*
 * ------------------------------------------------------------
 * Home page
 * ------------------------------------------------------------
 */

.home-page {
  width: calc(100% - 52px);

  max-width: 1100px;

  margin: 55px auto;
}


/*
 * ------------------------------------------------------------
 * Main layout
 * ------------------------------------------------------------
 *
 * Left:
 *   generated nameplate
 *
 * Right:
 *   editable homepage content
 * ------------------------------------------------------------
 */

.home-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.2fr);

  gap: 12px;

  align-items: start;
}


.home-content {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 25px;
}


/*
 * ------------------------------------------------------------
 * Generic home section
 * ------------------------------------------------------------
 */

.home-section {
  min-width: 0;
}


.home-section > .section-label {
  margin-bottom: 8px;
}


/*
 * ------------------------------------------------------------
 * Nameplate
 * ------------------------------------------------------------
 */

.nameplate {
  position: relative;

  width: 100%;
  height: 1050px;

  overflow: hidden;

  background:
    var(--color-dark);

  isolation: isolate;
}


.nameplate-text {
  position: absolute;

  top: 49%;
  right: -0.40em;

  margin: 0;

  transform:
    translateY(-50%)
    rotate(-90deg);

  transform-origin: center;

  z-index: 1;

  color:
    var(--color-bright);

  font-size:
    clamp(
      8rem,
      14vw,
      226px
    );

  font-weight: 700;

  line-height: 0.8;

  white-space: nowrap;

  pointer-events: none;

  user-select: none;
}


.nameplate #nameplate-canvas {
  position: absolute;

  inset: 0;

  display: block;

  width: 100% !important;
  height: 100% !important;

  margin: 0;
  padding: 0;

  z-index: 2;

  background:
    transparent !important;

  pointer-events: auto;

  mix-blend-mode: normal;
}


.nameplate-cursor {
  position: absolute;

  left: 0;
  top: 0;

  width: 63px;
  height: 63px;

  box-sizing: border-box;

  border:
    1.5px solid
    var(--color-bright);

  border-radius: 50%;

  z-index: 3 !important;

  pointer-events: none;

  opacity: 0;

  transform:
    translate(-50%, -50%);

  will-change:
    width,
    height,
    opacity,
    transform;
}


/*
 * ------------------------------------------------------------
 * Editable About section
 * ------------------------------------------------------------
 */

.home-about-section {
  border:
    1px solid
    var(--color-border);

  padding: 28px;

  background:
    var(--color-dark);
}


.home-about-section h2 {
  margin:
    0 0 22px;

  font-size: 28px;

  line-height: 1.05;

  color:
    var(--color-bright);
}


.home-about-content {
  display: flex;

  flex-direction: column;

  gap: 16px;
}


.home-about-content p {
  margin: 0;

  font-size: 14px;

  line-height: 1.65;

  color:
    var(--color-bright);
}


/*
 * ------------------------------------------------------------
 * Interests
 * ------------------------------------------------------------
 */

.home-interests-section {
  border:
    1px solid
    var(--color-border);

  padding: 28px;

  background:
    var(--color-dark);
}


.home-interests-section h2 {
  margin:
    0 0 22px;

  font-size: 24px;

  line-height: 1.05;

  color:
    var(--color-bright);
}


.home-interest-groups {
  display: flex;

  flex-direction: column;
}


.home-interest-group {
  display: grid;

  grid-template-columns:
    110px
    minmax(0, 1fr)
    auto;

  gap: 10px;

  align-items: start;

  padding:
    10px 0;

  border-bottom:
    1px solid
    var(--color-border);
}


.home-interest-group:first-child {
  padding-top: 0;
}


.home-interest-group:last-child {
  border-bottom: none;

  padding-bottom: 0;
}


.home-interest-name {
  padding-top: 4px;

  font-size: 11px;

  color:
    var(--color-muted);
}


.home-interest-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;
}


.home-interest-tag {
  appearance: none;

  border:
    1px solid
    var(--color-border);

  background:
    transparent;

  color:
    var(--color-bright);

  padding:
    4px 7px;

  font-family: inherit;

  font-size: 10px;

  font-weight: 700;

  line-height: 1.1;

  cursor: pointer;

  transition:
    transform 120ms ease,
    opacity 120ms ease,
    background-color 120ms ease;
}


.home-interest-tag:hover {
  transform:
    translateY(-1px);

  opacity: 0.7;
}


.home-interest-actions {
  display: flex;

  gap: 0;

  white-space: nowrap;
}


.home-interest-actions button,
.resume-skill-actions button {
  appearance: none;

  border:
    1px solid
    var(--color-border);

  background:
    var(--color-bright);

  color:
    var(--color-dark);

  padding:
    3px 7px;

  font-family: inherit;

  font-size: 11px;

  cursor: pointer;
}


.home-interest-actions button:hover,
.resume-skill-actions button:hover {
  opacity: 0.75;
}


/*
 * ------------------------------------------------------------
 * Add group
 * ------------------------------------------------------------
 */

.home-add-interest {
  appearance: none;

  display: block;

  margin-top: 16px;

  border:
    1px solid
    var(--color-border);

  background:
    var(--color-bright);

  color:
    var(--color-dark);

  padding:
    5px 9px;

  font-family: inherit;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;
}


.home-add-interest:hover {
  opacity: 0.75;
}


/*
 * ------------------------------------------------------------
 * Contact
 * ------------------------------------------------------------
 */

.home-contact-section {
  padding: 28px;

  background:
    var(--color-bright);

  color:
    var(--color-dark);
}


.home-contact-section h2 {
  margin:
    0 0 20px;

  font-size: 24px;

  line-height: 1.05;

  color:
    var(--color-dark);
}


.home-contact-links {
  display: flex;

  flex-direction: column;
}


.home-contact-item {
  display: flex;

  flex-direction: column;

  gap: 4px;

  padding:
    11px 0;

  border-bottom:
    1px solid
    var(--color-border);
}


.home-contact-item:first-child {
  padding-top: 0;
}


.home-contact-item:last-child {
  border-bottom: none;

  padding-bottom: 0;
}


.home-contact-label {
  font-size: 12px;

  font-weight: 700;

  color:
    var(--color-dark);
}


.home-contact-item a {
  color:
    var(--color-dark);

  font-size: 11px;

  text-decoration: none;

  opacity: 0.7;
}


.home-contact-item a:hover {
  opacity: 1;
}


/*
 * ------------------------------------------------------------
 * Latest thoughts / projects
 * ------------------------------------------------------------
 */

.home-card-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.home-card {
  border:
    1px solid
    var(--color-border);

  padding: 16px;

  min-height: 180px;

  display: flex;

  flex-direction: column;

  background:
    var(--color-bright);

  color:
    var(--color-dark);

  box-shadow:
    4px 4px 0
    var(--color-dark);

  cursor: pointer;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}


.home-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    6px 6px 0
    var(--color-dark);
}


.home-card h2 {
  margin:
    8px 0 8px;

  font-size: 18px;

  line-height: 1.05;
}


.home-card p {
  margin: 0;

  font-size: 13px;

  line-height: 1.45;
}


.home-card .card-date {
  font-size: 11px;

  letter-spacing: 1px;

  color:
    var(--color-muted);
}


.home-card .card-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: auto;

  padding-top: 15px;
}


.home-card .card-tag {
  display: inline-block;

  border:
    1px solid
    var(--color-border);

  padding:
    3px 6px;

  font-size: 10px;

  font-weight: bold;

  color: inherit;

  text-decoration: none;

  transition:
    transform 120ms ease,
    opacity 120ms ease;
}


.home-card .card-tag:hover {
  transform:
    translateY(-1px);

  opacity: 0.7;
}


.home-card a {
  color: inherit;

  text-decoration: none;
}


.home-card a:hover {
  opacity: 0.7;
}


/*
 * ------------------------------------------------------------
 * Featured thought
 * ------------------------------------------------------------
 */

.thoughts-grid .home-card:first-child {
  grid-row:
    span 2;
}


/*
 * ------------------------------------------------------------
 * Projects
 * ------------------------------------------------------------
 */

#latest-projects .home-card {
  min-height: 190px;
}


/*
 * ------------------------------------------------------------
 * Admin controls
 * ------------------------------------------------------------
 */

.home-admin {
  margin-top: 22px;
}


.home-admin-button {
  appearance: none;

  border:
    1px solid
    var(--color-border);

  background:
    transparent;

  color:
    var(--color-bright);

  padding:
    5px 9px;

  font-family: inherit;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;
}


.home-admin-button:hover {
  background:
    var(--color-bright);

  color:
    var(--color-dark);
}


.home-admin-panel {
  margin-top: 14px;

  padding-top: 18px;

  border-top:
    1px solid
    var(--color-border);
}


/*
 * ------------------------------------------------------------
 * Admin forms
 * ------------------------------------------------------------
 */

.home-editor-form {
  display: flex;

  flex-direction: column;

  gap: 12px;
}


.home-editor-form .section-label {
  margin-bottom: 4px;
}


.home-editor-form label {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


.home-editor-form label > span {
  font-size: 11px;

  color:
    var(--color-muted);
}


.home-editor-form input,
.home-editor-form textarea,
.home-editor-form select {
  box-sizing: border-box;

  width: 100%;

  border:
    1px solid
    var(--color-border);

  border-radius: 0;

  background:
    var(--color-dark);

  color:
    var(--color-bright);

  padding:
    8px;

  font-family: inherit;

  font-size: 12px;

  outline: none;
}


.home-editor-form input:focus,
.home-editor-form textarea:focus,
.home-editor-form select:focus {
  border-color:
    var(--color-bright);
}


.home-editor-form textarea {
  min-height: 110px;

  resize: vertical;

  line-height: 1.5;
}


.home-form-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 4px;
}


.home-form-actions button {
  appearance: none;

  border:
    1px solid
    var(--color-border);

  background:
    var(--color-bright);

  color:
    var(--color-dark);

  padding:
    6px 10px;

  font-family: inherit;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;
}


.home-form-actions button:hover {
  opacity: 0.75;
}


.home-form-actions
.home-form-cancel {
  background:
    transparent;

  color:
    var(--color-bright);
}


/*
 * ------------------------------------------------------------
 * Contact admin
 * ------------------------------------------------------------
 *
 * The contact panel uses a bright background, so its admin
 * controls need the inverse colour treatment.
 * ------------------------------------------------------------
 */

.home-contact-section
.home-admin-button {
  border-color:
    var(--color-dark);

  color:
    var(--color-dark);
}


.home-contact-section
.home-admin-button:hover {
  background:
    var(--color-dark);

  color:
    var(--color-bright);
}


.home-contact-section
.home-admin-panel {
  border-color:
    var(--color-dark);
}


.home-contact-section
.home-editor-form label > span {
  color:
    var(--color-dark);
}


.home-contact-section
.home-editor-form input,
.home-contact-section
.home-editor-form textarea,
.home-contact-section
.home-editor-form select {
  background:
    var(--color-bright);

  color:
    var(--color-dark);

  border-color:
    var(--color-dark);
}


.home-contact-section
.home-editor-form input:focus,
.home-contact-section
.home-editor-form textarea:focus,
.home-contact-section
.home-editor-form select:focus {
  border-color:
    var(--color-dark);
}


.home-contact-section
.home-form-actions button {
  background:
    var(--color-dark);

  color:
    var(--color-bright);

  border-color:
    var(--color-dark);
}


.home-contact-section
.home-form-actions
.home-form-cancel {
  background:
    transparent;

  color:
    var(--color-dark);
}


/*
 * ------------------------------------------------------------
 * Empty states
 * ------------------------------------------------------------
 */

.empty-state {
  margin: 0;

  color:
    var(--color-muted);

  font-size: 13px;
}


/*
 * ------------------------------------------------------------
 * Loading / error text
 * ------------------------------------------------------------
 */

#home-about > p,
#home-interests > p,
#home-contact > p {
  margin: 0;

  font-size: 12px;

  color:
    var(--color-muted);
}


/*
 * ------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------
 */

@media (max-width: 800px) {

  .home-page {
    width:
      calc(100% - 30px);

    margin:
      30px auto;
  }


  .home-layout {
    grid-template-columns:
      1fr;

    gap: 20px;
  }


  .nameplate {
    height: 500px;
  }


  .nameplate-text {
    font-size:
      clamp(
        6rem,
        25vw,
        150px
      );
  }


  .home-card-grid {
    grid-template-columns:
      1fr;
  }


  .thoughts-grid
  .home-card:first-child {
    grid-row:
      auto;
  }


  .home-interest-group {
    grid-template-columns:
      1fr;
  }


  .home-interest-name {
    padding-top: 0;
  }


  .home-interest-actions {
    justify-content: flex-start;
  }


  .home-about-section,
  .home-interests-section,
  .home-contact-section {
    padding: 20px;
  }
}


/*
 * ------------------------------------------------------------
 * Small mobile
 * ------------------------------------------------------------
 */

@media (max-width: 500px) {

  .home-page {
    width:
      calc(100% - 24px);

    margin:
      20px auto;
  }


  .nameplate {
    height: 380px;
  }


  .nameplate-text {
    font-size:
      clamp(
        5rem,
        23vw,
        110px
      );
  }


  .home-card {
    min-height: 150px;
  }


  #latest-projects .home-card {
    min-height: 160px;
  }
}