/* Hamek Studios — brand tokens */
:root {
  --ink: #14171c;
  --ink-soft: #3a404a;
  --mute: #6b7380;
  --line: #d5dae2;
  --paper: #f3f5f8;
  --paper-deep: #e6eaf0;
  --silver: #9aa3b0;
  --silver-bright: #c8d0db;
  --accent: #8c5333;
  --accent-soft: #a86b45;
  --white: #ffffff;
  --danger: #8b3a3a;

  --font-display: "Syne", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  --max: 68rem;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent);
}

button,
input,
textarea {
  font: inherit;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: 0.5rem 1rem;
  z-index: 100;
}

.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* —— Header —— */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  color: var(--white);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-solid {
  color: var(--ink);
  background: rgba(243, 245, 248, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65rem;
  color: inherit;
  text-decoration: none;
}

.logo:hover {
  color: inherit;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  color: inherit;
}

.logo-mark svg {
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  fill: currentColor;
}

.logo-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.28em;
  line-height: 1;
  margin-right: -0.28em;
}

.logo-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0.68;
  margin-right: -0.34em;
}

.nav {
  display: flex;
  gap: 1.5rem;
}

.nav a {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.85;
  color: inherit;
}

.nav a:hover {
  opacity: 1;
  color: inherit;
}

/* —— Hero —— */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  color: var(--white);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transform: scale(1.04);
  animation: hero-drift 18s var(--ease) forwards;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 16, 22, 0.38) 0%, rgba(12, 16, 22, 0.18) 35%, rgba(12, 16, 22, 0.78) 100%),
    linear-gradient(90deg, rgba(12, 16, 22, 0.45) 0%, transparent 55%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, var(--max));
  margin: 0 auto;
  padding: 0 0 clamp(3.5rem, 10vh, 6rem);
}

.brand-lockup {
  --lockup-size: clamp(3.5rem, 14vw, 8.5rem);

  margin: 0 0 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.18em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--lockup-size);
  line-height: 0.9;
  letter-spacing: 0.2em;
}

/* The optical indent lives on the stack so HAMEK and Studios share one left
   edge; putting it on the word alone would shift only the H. */
.brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0.02em;
}

.brand-lockup .logo-mark--hero svg {
  width: 0.62em;
  height: 0.62em;
}

/* Sized in em so the halo tracks the lockup as it scales. Only the hero mark
   gets it — at header and favicon sizes a glow just reads as blur. */
.logo-mark--hero {
  filter:
    drop-shadow(0 0 0.05em rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 0.16em rgba(150, 190, 255, 0.4));
}

.brand-sub {
  /* Flex aligns the two boxes, but the H carries ~0.077em of left side bearing
     at display size while the S carries almost none, so the ink edges still
     disagree. Nudge by the difference, measured against the lockup's size so it
     holds at every viewport rather than the sub's own much smaller em. */
  margin: 0.5em 0 0 calc(var(--lockup-size) * 0.072);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: max(0.72rem, 0.15em);
  line-height: 1;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.hero h1 {
  margin: 0 0 0.85rem;
  max-width: 22ch;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1.65rem, 3.6vw, 2.75rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  overflow: visible;
  padding-bottom: 0.15em;
}

.hero-lede {
  margin: 0 0 1.75rem;
  max-width: 42rem;
  font-size: clamp(1rem, 1.45vw, 1.125rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn:hover {
  color: inherit;
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--white);
  color: var(--ink);
}

.btn-primary:hover {
  background: var(--silver-bright);
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-ghost:hover {
  border-color: var(--white);
  color: var(--white);
}

/* —— Sections —— */
.section {
  padding: var(--space-2xl) clamp(1.25rem, 4vw, 2.5rem);
}

.section-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.section-label {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.section h2 {
  margin: 0 0 1rem;
  max-width: 20ch;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  overflow: visible;
  padding-bottom: 0.2em;
}

.section-intro {
  margin: 0 0 var(--space-lg);
  max-width: 42ch;
  color: var(--ink-soft);
  font-size: 1.125rem;
}

.studio {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(140, 83, 51, 0.1), transparent 55%),
    linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
  overflow: visible;
}

.focus-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.focus-item {
  display: grid;
  grid-template-columns: minmax(0, 12rem) 1fr;
  gap: 1.5rem 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.focus-item h3 {
  margin: 0;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  overflow: visible;
}

.focus-item p {
  margin: 0;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* Contact */
.contact {
  background:
    linear-gradient(180deg, var(--paper-deep), var(--paper) 40%),
    var(--paper);
}

.contact-layout {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 860px) {
  .contact-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4rem;
    align-items: start;
  }
}

.contact-aside p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  max-width: 34ch;
}

.contact-meta {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--mute);
}

.contact-form {
  display: grid;
  gap: 1rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field-row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 560px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}

.field label .optional {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--silver);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(140, 83, 51, 0.15);
}

.field textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.hp {
  position: absolute;
  left: -10000px;
  opacity: 0;
  pointer-events: none;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.25rem;
}

.contact-form .btn-primary {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.contact-form .btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.contact-form .btn-primary:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

.form-status {
  margin: 0;
  font-size: 0.9rem;
  color: var(--mute);
  min-height: 1.35em;
}

.form-status[data-state="ok"] {
  color: var(--accent);
}

.form-status[data-state="error"] {
  color: var(--danger);
}

/* Footer */
.site-footer {
  padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 2.25rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.footer-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-size: 0.85rem;
  color: var(--mute);
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

/* Motion — opacity only. Transforms on text clip Syne descenders in Chromium. */
.reveal {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  overflow: visible;
}

.reveal.is-visible {
  opacity: 1;
}

.hero-content > * {
  opacity: 0;
  animation: rise 0.9s var(--ease) forwards;
}

.hero-content > *:nth-child(1) {
  animation-delay: 0.1s;
}

.hero-content > *:nth-child(2) {
  animation-delay: 0.22s;
}

.hero-content > *:nth-child(3) {
  animation-delay: 0.34s;
}

.hero-content > *:nth-child(4) {
  animation-delay: 0.46s;
}

.hero-content > *:nth-child(5) {
  animation-delay: 0.58s;
}

@keyframes rise {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hero-drift {
  to {
    transform: scale(1);
  }
}

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

  .reveal,
  .hero-content > *,
  .hero-media img {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 719px) {
  .focus-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .nav {
    gap: 1rem;
  }
}