@font-face {
    font-family: "Dirtyline";
    src: url("../fonts/Dirtyline36Daysoftype2022/woff/Dirtyline 36daysoftype 2022.woff2") format("woff2"),
         url("../fonts/Dirtyline36Daysoftype2022/woff/Dirtyline 36daysoftype 2022.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MangoGrotesqueLight';
    src: url('../fonts/HUMANE/Humane-Light.woff2') format('woff2'),
         url('../fonts/HUMANE/Humane-Light.otf') format('opentype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "Absans";
    src: url("../fonts/Absans/Absans-Regular.woff2") format("woff2"),
         url("../fonts/Absans/Absans-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Wagon";
    src: url("../fonts/Heming/Heming%20Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Wagon";
    src: url("../fonts/Wagon/Wagon-ExtraLight.otf") format("opentype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Wagon";
    src: url("../fonts/Wagon/Wagon-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Wagon";
    src: url("../fonts/Wagon/Wagon-ExtraLightItalic.otf") format("opentype");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}







.site-wrap {
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* Navbar styles live in global.css (shared with contact.css) */





/* MAIN */
.about-main {
  flex:1;
  padding:clamp(3rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem);
  padding-top:clamp(4.5rem, 11vw, 8.5rem);
  max-width:1200px;
  width:100%;
  margin:0 auto;
  opacity:0;
  animation:fadeUp 0.8s 0.2s forwards;
}

.about-body {
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(180px, 1fr);
  gap:3rem 4rem;
  align-items:start;
}

.about-heading .quote-mark {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 1.25em;
  line-height: 0;
  margin: 0 0.08em;
  vertical-align: -0.08em;
}

/* The Dirtyline "?" carries little right-side ink, so the
   closing mark needs extra room to mirror the opening gap */
.about-heading .quote-mark:last-child {
  margin-left: 0.28em;
}

.about-heading {
  grid-column:1 / -1;
  text-wrap: balance;
  font-family: "Dirtyline", var(--font-serif);
  text-transform: none;
  font-size:clamp(2.2rem, 9vw, 6.5rem);
  font-weight:normal;
  font-style:italic;
  line-height:0.95;
  letter-spacing:-0.04em;
  max-width:900px;
  margin-bottom: 0.5rem;
}

.about-text { min-width:0; }

.about-para {
  font-family:"Absans", var(--font-sans);
  font-size:clamp(1.5rem, 5vw, 2.25rem);
  font-weight:400;
  line-height:1.55;
}

.about-aside {
  padding-top:0.5rem;
}

.aside-cta {
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

.btn-outline {
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.6rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--black);
  text-decoration:none;
  border:1px solid var(--black);
  padding:0.7rem 1.4rem;
  transition:all var(--transition);
  text-align:center;
}

.btn-outline:hover {
  background:var(--black);
  color:var(--white);
}

button.btn-outline {
  cursor:pointer;
  background:transparent;
  width:100%;
}

/* MODAL */
.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(10,10,10,0.55);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}

.modal-overlay.open {
  opacity:1;
  pointer-events:all;
}

.modal {
  background:var(--white);
  padding:2.5rem;
  width:100%;
  max-width:400px;
  position:relative;
  transform:translateY(16px);
  transition:transform 0.3s ease;
}

.modal-overlay.open .modal { transform:translateY(0); }

.modal-close {
  position:absolute;
  top:1.2rem;
  right:1.5rem;
  background:transparent;
  border:none;
  font-size:1.4rem;
  color:var(--grey-400);
  cursor:pointer;
  line-height:1;
}

.modal-label,
.modal-success {
  font-family:var(--font-mono);
  font-size:0.55rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--grey-400);
}

.modal-label { margin-bottom:0.75rem; }

.modal-text {
  font-family:var(--font-serif);
  font-size:1rem;
  font-weight:300;
  line-height:1.6;
  margin-bottom:2rem;
}

.modal-fields {
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--black);
}

.modal-input {
  flex:1;
  font-family:var(--font-mono);
  font-size:0.65rem;
  background:transparent;
  border:none;
  outline:none;
  padding:0.6rem 0;
  min-width:0;
}

.modal-submit {
  font-family:var(--font-mono);
  font-size:0.55rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--grey-400);
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0.6rem 0 0.6rem 1rem;
  white-space:nowrap;
}

/* RESPONSIVE */
@media (max-width:900px) {
  .about-body {
    grid-template-columns:1fr;
  }

  .about-aside {
    max-width:260px;
  }
}

@media (max-width:600px) {
  .about-main {
    padding-top:4.25rem;
  }

  .about-heading {
    font-size:clamp(2.4rem, 16vw, 4.8rem);
  }

  .modal {
    padding:2rem 1.5rem;
  }

  .modal-fields {
    flex-direction:column;
    align-items:stretch;
    gap:0.5rem;
    border-bottom:none;
  }

  .modal-input {
    border-bottom:1px solid var(--black);
  }

  .modal-submit {
    padding-left:0;
    text-align:left;
  }
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}

/* ==========================================
   PAGE CONTENT TRANSITIONS
========================================== */

.page-content {
    flex: 1;
    display: flex;
    flex-direction: column;

    opacity: 0;
    transform: translateY(10px);
    animation: contentFadeIn .45s cubic-bezier(.22,1,.36,1) forwards;
}

.page-content.page-exit {
    animation: contentFadeOut .25s ease forwards;
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes contentFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}