/* ReschStudios — Studio Site v1
   Minimal. Quiet. Intentional. */

/* =========================
   Variables
   ========================= */

:root{
  --bg: #0b0c0f;
  --fg: #f2f3f5;
  --muted: rgba(242, 243, 245, 0.58);
  --muted-hover: rgba(242, 243, 245, 0.82);
  --ghost: rgba(242, 243, 245, 0.10);
  --ghost-hover: rgba(242, 243, 245, 0.40);


  --max: 62rem;
  --pad: clamp(24px, 6vw, 72px);
}

/* =========================
   Base
   ========================= */

*{
  box-sizing: border-box;
}

html,
body{
  height: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================
   Home layout
   ========================= */

.stage{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--pad);
}

.center{
  width: 100%;
  max-width: var(--max);
}

/* =========================
   Typography
   ========================= */

.statement{
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(36px, 6vw, 72px);
}

/* =========================
   Meta / Etsy
   ========================= */

.meta{
  margin: 64px 0 0 0;
  font-size: 13px;
}

.etsy{
  color: var(--ghost);
  text-decoration: none;
  display: inline-block;
  padding: 6px 0;
}

.etsy:hover,
.etsy:focus-visible{
  color: var(--ghost-hover);
  outline: none;
}

/* =========================
   Accessibility
   ========================= */

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

/* =========================
   Secondary pages
   ========================= */

.page{
  min-height: 100vh;
  padding: var(--pad);
}

.wrap{
  width: 100%;
  max-width: var(--max);
}

.title{
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(28px, 4vw, 44px);
}

.text{
  margin-top: 32px;
  max-width: 38ch;
  color: var(--fg);
}

.text p{
  margin: 0 0 20px 0;
}

.list{
  margin-top: 40px;
}

.list-item{
  margin-bottom: 28px;
  max-width: 34ch;
}

/* =========================
   Contact
   ========================= */

.contact{
  margin-top: 32px;
  font-size: 16px;
}

/* =========================
   Menu
   ========================= */

.menu-toggle{
  all: unset;
  position: fixed;
  top: 24px;
  left: 24px;

  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  z-index: 100;
}

.menu-toggle:hover,
.menu-toggle:focus-visible{
  color: var(--fg);
  outline: none;
}

.menu{
  position: fixed;
  top: 56px;
  left: 24px;

  display: none !important;
  flex-direction: column;
  gap: 10px;

  z-index: 99;
}

.menu.open{
  display: flex !important;
}

.menu a,
.menu a:visited{
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

.menu a:hover,
.menu a:focus-visible{
  color: var(--fg);
  outline: none;
}

/* Offset secondary pages to avoid menu overlap */

.page .wrap{
  padding-left: 5em;
}

/* Pieces */

.pieces-intro{
  font-size: 14px;
  color: var(--muted);
  max-width: 34ch;
  margin-bottom: 56px;
}

.piece{
  margin-bottom: 72px;
}

.piece-title{
  margin: 0 0 12px 0;
  font-weight: 500;
}

.piece-text{
  margin: 0 0 16px 0;
  max-width: 32ch;
}