/* Arcmill Studio landing page. Every value comes from tokens.css; this file holds
   structure only. The breakpoint (900px) is the one literal, because a custom property
   cannot be read inside a media query. */

/* ---- fonts (self-hosted, SIL OFL 1.1; licences beside the files) ---- */

@font-face { font-family: Manrope; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/manrope-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/manrope-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

/* ---- base ---- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

img { display: block; max-width: 100%; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-olive); }

a:focus-visible, button:focus-visible {
  outline: var(--focus-ring) solid var(--color-rust);
  outline-offset: var(--focus-offset);
}

section[id] { scroll-margin-top: var(--scroll-offset); }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---- shared pieces ---- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--gap-eyebrow);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--round);
  background: var(--color-rust);
}

.h2 {
  margin-top: var(--space-eyebrow-to-h2);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

.role {
  margin-top: var(--space-h2-to-role);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--gap-prose);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-85);
  text-wrap: pretty;
}

.pill {
  display: inline-flex;
  gap: var(--gap-cta-icon);
  padding: var(--pill-pad-block) var(--pill-pad-inline);
  border-radius: var(--pill-radius);
  background: var(--color-rust);
  color: var(--color-paper-raised);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}
.pill:hover { background: var(--color-rust-hover); color: var(--color-paper-raised); }

.title-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--title-bar-height);
}
.title-bar::before {
  content: "";
  position: absolute;
  left: var(--title-bar-bleed);
  right: var(--title-bar-bleed);
  top: 50%;
  height: var(--title-bar-stroke);
  transform: translateY(-50%);
  background: var(--color-rust);
}
.title-bar span {
  position: relative;
  padding-right: var(--title-bar-pad);
  font-family: var(--font-mono);
  font-size: var(--text-title-bar);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-title-bar);
  line-height: var(--title-bar-height);
  text-transform: uppercase;
}

.portrait {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: var(--portrait-max);
  aspect-ratio: var(--portrait-ratio);
  padding: var(--portrait-pad);
  border: var(--hairline) solid var(--color-rule-page);
  background: repeating-linear-gradient(
    var(--stripe-angle),
    var(--color-accent-soft) 0 var(--stripe-a),
    var(--color-stripe) var(--stripe-a) var(--stripe-b)
  );
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caption);
  color: var(--color-accent);
}

/* ---- 1. header ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-paper-85);
  backdrop-filter: blur(var(--header-blur));
  border-bottom: var(--hairline) solid var(--color-rule);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-header);
  height: var(--header-height);
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: var(--logo-header); width: auto; }

.menu-toggle { display: none; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--gap-nav);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-nav);
}
.site-nav a { color: var(--color-ink-soft); }
.site-nav a:hover { color: var(--color-ink); }
.site-nav .site-nav__contact {
  padding: var(--nav-pill-pad-block) var(--nav-pill-pad-inline);
  border-radius: var(--pill-radius);
  background: var(--color-rust);
  color: var(--color-paper-raised);
  font-family: var(--font-mono);
  font-size: var(--text-nav-pill);
}
.site-nav .site-nav__contact:hover { background: var(--color-rust-hover); color: var(--color-paper-raised); }

/* ---- 2. hero ---- */

.hero { border-bottom: var(--hairline) solid var(--color-rule-page); }
.hero__inner {
  position: relative;
  padding-top: var(--space-hero-top);
  padding-bottom: var(--space-hero-bottom);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  text-wrap: balance;
}
.hero h1 span { color: var(--color-olive); }
.hero__copy {
  margin-top: var(--space-hero-copy);
  max-width: var(--measure-hero);
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  color: var(--color-ink-75);
  text-wrap: pretty;
}
.hero__logo {
  position: absolute;
  right: var(--hero-logo-right);
  bottom: var(--hero-logo-bottom);
  width: var(--hero-logo-width);
  height: auto;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-actions);
  margin-top: var(--space-hero-actions);
}

/* ---- 3. studio ---- */

.studio {
  padding-block: var(--space-section);
  display: grid;
  grid-template-columns: var(--grid-5-7);
  gap: var(--gap-grid);
}
.prose__lead {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

/* ---- 4. projects ---- */

.projects { background: var(--color-accent); color: var(--color-on-dark); }
.projects__head {
  padding-top: var(--space-section);
  padding-bottom: var(--space-projects-head-end);
}
.projects .title-bar span { background: var(--color-accent); color: var(--color-accent-soft); }
.projects__h2 { margin-top: var(--space-projects-h2); max-width: var(--measure-projects-h2); }
.projects__list {
  margin-top: var(--space-projects-list-start);
  padding-bottom: var(--space-projects-list-end);
}
.project, .projects__end { border-top: var(--hairline) solid var(--color-accent-tint-30); }

.project__row {
  display: grid;
  grid-template-columns: var(--grid-project-row);
  gap: var(--gap-project-row);
  align-items: start;
  padding-block: var(--space-project-row);
  cursor: pointer;
}
.project__row:hover { background: var(--color-accent-soft-06); }
.project__meta {
  display: flex;
  align-items: center;
  gap: var(--gap-project-meta);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-tint);
}
.project__name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-project-name);
  line-height: var(--leading-project-name);
  letter-spacing: var(--tracking-h2);
}
.project__tagline {
  margin-top: var(--space-tagline);
  font-size: var(--text-tagline);
  line-height: var(--leading-tagline);
  color: var(--color-on-dark-85);
  text-wrap: pretty;
}
.project__description {
  margin-top: var(--space-description);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-on-dark-72);
}
.project__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-eyebrow);
  margin-top: var(--space-read-more);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-small);
  color: var(--color-on-dark);
  cursor: pointer;
}
.project__toggle::before {
  content: "";
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--round);
  background: var(--color-rust-soft);
}

.project__panel {
  display: grid;
  grid-template-columns: var(--grid-project-panel);
  gap: var(--gap-project-panel);
  padding-bottom: var(--space-project-panel-end);
}
.project__panel[hidden] { display: none; }
.project__panel > div {
  padding-top: var(--space-panel-label-pad);
  border-top: var(--hairline) solid var(--color-accent-tint-40);
}
.project__label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-tint);
}
.project__panel p {
  margin-top: var(--space-panel-text);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--color-on-dark-85);
}
.project__talk {
  display: inline-block;
  margin-top: var(--space-panel-link);
  padding-bottom: var(--space-underline);
  border-bottom: var(--hairline) solid var(--color-on-dark);
  font-size: var(--text-small);
  color: var(--color-on-dark);
}
.project__talk:hover { color: var(--color-on-dark); }

/* ---- 5. team bar ---- */

.team { background: var(--color-accent-soft); color: var(--color-accent); }
.team .container { padding-block: var(--space-section-team); }
.team .title-bar span { background: var(--color-accent-soft); color: var(--color-accent); }

/* ---- 6. founder ---- */

.founder {
  padding-block: var(--space-section-founder);
  display: grid;
  grid-template-columns: var(--grid-5-7);
  gap: var(--gap-grid);
}
.founder .portrait { margin-top: var(--space-portrait-top); }
.pull {
  padding-top: var(--space-pull-pad);
  border-top: var(--hairline) solid var(--color-rule-page);
  font-family: var(--font-display);
  font-size: var(--text-pull);
  font-weight: var(--weight-medium);
  line-height: var(--leading-pull);
  color: var(--color-ink);
}

/* ---- 7. joely ---- */

.joely { padding-bottom: var(--space-section-joely); }
.joely__grid {
  display: grid;
  grid-template-columns: var(--grid-7-5);
  grid-template-rows: var(--grid-rows-head-fill);
  grid-template-areas: "head portrait" "bio portrait";
  column-gap: var(--gap-grid);
  row-gap: var(--gap-prose);
  padding-top: var(--space-section-joely);
  border-top: var(--hairline) solid var(--color-rule-page);
}
.joely__head { grid-area: head; display: flex; flex-direction: column; gap: var(--gap-prose); }
.joely__head .h2, .joely__head .role { margin-top: 0; }
.joely .portrait { grid-area: portrait; justify-self: end; }
.joely .prose { grid-area: bio; padding-top: var(--space-joely-role-to-bio); }

/* ---- 8. work with arcmill ---- */

.work {
  background: var(--color-accent-soft);
  border-block: var(--hairline) solid var(--color-rule-page);
}
.work__grid {
  padding-block: var(--space-section);
  display: grid;
  grid-template-columns: var(--grid-5-7);
  gap: var(--gap-grid);
}
.work .eyebrow { color: var(--color-accent); }
.work .prose { padding-top: var(--space-work-prose-top); color: var(--color-ink); }
.work__link {
  display: inline-flex;
  gap: var(--gap-cta-icon);
  padding-bottom: var(--space-underline);
  border-bottom: var(--hairline) solid var(--color-ink);
  font-size: var(--text-small);
  color: var(--color-ink);
}
.work__link:hover { color: var(--color-ink); opacity: var(--hover-fade); }

/* ---- 9. contact ---- */

.contact {
  padding-block: var(--space-section);
  display: grid;
  grid-template-columns: var(--grid-half);
  gap: var(--gap-grid);
}
.contact__h2 {
  font-size: var(--text-h2-contact);
  line-height: var(--leading-h2-contact);
  letter-spacing: var(--tracking-h2-contact);
  text-wrap: initial;
}
.contact__lede {
  margin-top: var(--space-contact-lede);
  max-width: var(--measure-lede);
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
  color: var(--color-ink-75);
}
.contact__actions-col { padding-top: var(--space-contact-actions-top); }
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-actions);
}
.contact__email {
  padding-bottom: var(--space-underline);
  border-bottom: var(--hairline) solid var(--color-accent-tint);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-ink);
}
.contact__email:hover { color: var(--color-ink); }
.contact__note {
  margin-top: var(--space-contact-note);
  max-width: var(--measure-note);
  font-size: var(--text-small);
  line-height: var(--leading-note);
  color: var(--color-ink-soft);
}

/* ---- 10. footer ---- */

.site-footer { border-top: var(--hairline) solid var(--color-rule-page); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-footer);
  padding-top: var(--space-footer-top);
  padding-bottom: var(--space-footer-bottom);
  font-size: var(--text-small);
  color: var(--color-ink-soft);
}
.site-footer__brand { display: flex; align-items: center; gap: var(--gap-footer-brand); }
.site-footer__brand img { height: var(--logo-footer); width: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--gap-footer-links); }
.site-footer nav a { color: var(--color-ink-soft); }
.site-footer nav a:hover { color: var(--color-ink); }

/* ---- mobile layout (390px design) ---- */

@media (max-width: 900px) {
  /* header: solid bar, hamburger, full-width menu on menuOpen */
  .site-header { background: var(--color-paper); backdrop-filter: none; }
  .site-header__bar { flex-wrap: wrap; height: auto; gap: 0; }
  .site-header__logo { height: var(--header-height); }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--menu-bar-gap);
    width: var(--tap-target);
    height: var(--tap-target);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle span {
    width: var(--menu-bar-width);
    height: var(--menu-bar-height);
    background: var(--color-ink);
  }

  .site-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex-basis: calc(100% + var(--container-pad) * 2);
    margin-inline: calc(var(--container-pad) * -1);
    padding: var(--space-menu-top) var(--container-pad) var(--space-menu-bottom);
    border-top: var(--hairline) solid var(--color-rule);
    background: var(--color-paper);
    font-size: var(--text-menu);
  }
  .site-header[data-menu-open="true"] .site-nav { display: flex; }
  .site-nav a {
    padding-block: var(--space-menu-link);
    border-bottom: var(--hairline) solid var(--color-rule);
    color: var(--color-ink);
  }
  .site-nav .site-nav__contact {
    margin-top: var(--space-menu-pill);
    padding: var(--pill-pad-block) var(--pill-pad-inline);
    border-bottom: 0;
    text-align: center;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
  }

  /* hero: logo drops into the flow, CTA goes full width */
  .hero__copy { max-width: none; }
  .hero__logo {
    position: static;
    margin: var(--space-hero-logo) 0 0 auto;
  }
  .hero__actions { display: block; }
  .pill--wide {
    display: flex;
    justify-content: center;
    padding-block: var(--pill-pad-block-wide);
  }

  /* every grid collapses to one column */
  .studio, .founder, .work__grid, .contact { display: block; }
  .studio .prose, .founder .prose, .work .prose { margin-top: var(--space-prose-top); }
  .work .prose { padding-top: 0; }

  .project__row { display: block; }
  .project__name { margin-top: var(--space-project-name); }
  .project__toggle { min-height: var(--tap-target); }
  .project__panel { display: flex; flex-direction: column; }

  .founder .portrait, .joely .portrait { max-width: none; }

  .joely__grid { display: block; }
  .joely__head { display: block; }
  .joely__head .h2 { margin-top: var(--space-eyebrow-to-h2); }
  .joely__head .role { margin-top: var(--space-h2-to-role); }
  .joely .portrait { margin-top: var(--space-portrait-top); }
  .joely .prose { margin-top: var(--space-prose-top); padding-top: 0; }

  .work__link { align-items: center; min-height: var(--tap-target); padding-bottom: 0; }

  .contact__actions-col { padding-top: 0; }
  .contact__actions { display: block; margin-top: var(--space-contact-cta); }
  .contact__email { display: inline-block; margin-top: var(--space-contact-email); }

  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer nav a { display: flex; align-items: center; min-height: var(--tap-target); }
}