/* Taylored Labs — "made to measure" editorial system.
   Warm paper, ink type, one clay accent. Stitched hairlines echo the name. */

:root {
  --paper: #f6f1e7;
  --paper-2: #efe7d8;
  --paper-3: #e6dcc8;
  --ink: #142033;
  --ink-2: #3a475c;
  --ink-3: #6b7689;
  --clay: #b5542d;
  --clay-2: #8f3f1f;
  --rule: #d9cfbd;
  --shadow: 20 30 50;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.92rem;
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3.2rem);
  --text-hero: clamp(2.6rem, 1.4rem + 6vw, 6.4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-section: clamp(4rem, 3rem + 6vw, 9rem);

  --radius: 14px;
  --measure: 62ch;
  --duration: 320ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1520;
    --paper-2: #16202e;
    --paper-3: #1f2b3c;
    --ink: #f1ebdf;
    --ink-2: #b4bcc8;
    --ink-3: #8691a3;
    --clay: #e0764a;
    --clay-2: #f0916a;
    --rule: #2a3647;
    --shadow: 0 0 0;
  }
}

:root[data-theme="dark"] {
  --paper: #0f1520;
  --paper-2: #16202e;
  --paper-3: #1f2b3c;
  --ink: #f1ebdf;
  --ink-2: #b4bcc8;
  --ink-3: #8691a3;
  --clay: #e0764a;
  --clay-2: #f0916a;
  --rule: #2a3647;
  --shadow: 0 0 0;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

/* Paper grain: a tiny SVG noise tile, fixed, so the page never looks flat. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--clay) 60%, transparent);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: var(--clay);
}

:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  z-index: 10;
}

.skip-link:focus {
  top: var(--space-3);
}

.wrap {
  width: min(100% - 2rem, 1180px);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .wrap {
    width: min(100% - 4rem, 1180px);
  }
}

/* Type */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-lg);
  font-variation-settings: "opsz" 48, "SOFT" 20;
  line-height: 1.2;
}

p {
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 var(--space-3);
}

.lead {
  font-size: var(--text-lg);
  color: var(--ink-2);
  line-height: 1.5;
}

/* Stitched rule: the tailor's seam that runs through the whole page. */
.seam {
  border: 0;
  border-top: 2px dashed var(--rule);
  margin: 0;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48, "SOFT" 30;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.brand span em {
  font-style: normal;
  color: var(--clay);
}

.site-nav {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  font-size: var(--text-sm);
  font-weight: 500;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink-2);
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--clay);
}

@media (max-width: 480px) {
  .site-nav a:nth-child(2),
  .site-nav a:nth-child(3) {
    display: none;
  }
}

/* Hero */

.hero {
  padding: var(--space-section) 0 var(--space-6);
}

.hero .wrap {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .hero .wrap {
    grid-template-columns: 7fr 5fr;
    align-items: end;
    gap: var(--space-6);
  }
}

.hero h1 {
  font-size: var(--text-hero);
  margin-bottom: var(--space-4);
}

.hero h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--clay);
}

.hero .lead {
  margin-bottom: var(--space-4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease);
}

.button:hover {
  transform: translateY(-2px);
  background: var(--clay);
}

.button:active {
  transform: translateY(0);
}

.button.ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--rule);
}

.button.ghost:hover {
  box-shadow: inset 0 0 0 1.5px var(--clay);
  background: transparent;
  color: var(--clay);
}

/* The portrait sits on a clay block that peeks out behind it, like a swatch
   under a photo on a cutting table. The block lives on the frame around the
   photo (not the whole figure) so it never runs under the caption, and the
   frame is its own stacking context so the block can't slip behind the page. */
.portrait {
  margin: 0;
  justify-self: center;
  /* A little narrower than the column so the swatch's offset stays inside the
     page gutter on phones instead of forcing a sideways scroll. */
  width: min(100% - 1.25rem, 420px);
}

.portrait-frame {
  position: relative;
  isolation: isolate;
}

.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(14px, 14px) rotate(1.5deg);
  background: var(--clay);
  border-radius: var(--radius);
  z-index: -1;
}

.portrait img {
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 24px 60px -24px rgb(var(--shadow) / 0.45);
}

.portrait figcaption {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.portrait figcaption strong {
  color: var(--ink);
  font-weight: 600;
}

/* Sections */

.section {
  padding: var(--space-section) 0;
}

.section-head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: 5fr 7fr;
    align-items: end;
  }

  .section-head .lead {
    margin-bottom: 0.35rem;
  }
}

/* What we do: one large statement, two supporting ones. */
.principles {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .principles {
    grid-template-columns: repeat(2, 1fr);
  }

  .principles > :first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: center;
  }
}

.principle {
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
}

.principle .num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: 3rem;
  line-height: 1;
  color: var(--clay);
  margin-bottom: var(--space-2);
}

.principle p {
  color: var(--ink-2);
  margin-bottom: 0;
}

.principle h3 {
  margin-bottom: var(--space-2);
}

/* Apps: a ledger of rows, not a card grid. */
.apps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px dashed var(--rule);
}

.app {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-3) var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 2px dashed var(--rule);
  transition: transform var(--duration) var(--ease);
}

@media (min-width: 768px) {
  .app {
    grid-template-columns: 72px 2fr 3fr auto;
    align-items: center;
    padding: var(--space-5) 0;
  }

  .app:hover {
    transform: translateX(6px);
  }
}

.app img {
  width: 56px;
  height: 56px;
  border-radius: 13px;
  box-shadow: 0 10px 24px -14px rgb(var(--shadow) / 0.6);
}

@media (min-width: 768px) {
  .app img {
    width: 72px;
    height: 72px;
    border-radius: 17px;
  }
}

.apps-shopify .app img {
  background: #f4efe6;
  border: 1px solid var(--rule);
}

.app-name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "SOFT" 30;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 0;
}

.app-tag {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-3);
  margin-top: 0.2rem;
}

.app p {
  color: var(--ink-2);
  margin: 0;
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .app p {
    grid-column: auto;
  }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--rule);
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
}

.status.live::before,
.status.soon::before {
  background: var(--clay);
}

a.status:hover {
  border-color: var(--clay);
  color: var(--clay);
}

/* From Austin + why: a two-column spread with a large coordinate flourish. */
.spread {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .spread {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

.coords {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
  line-height: 1;
  color: var(--clay);
  margin: var(--space-3) 0 var(--space-4);
}

.quote {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 4px solid var(--clay);
  text-wrap: balance;
  max-width: none;
}

/* Contact */

.contact {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-section) 0;
}

.contact h2,
.contact .label {
  color: var(--paper);
}

.contact .label {
  color: var(--clay-2);
}

:root[data-theme="dark"] .contact,
.contact.dark-aware {
  color: var(--paper);
}

.contact .lead {
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

/* Two inboxes: the address in display type, what it's for in a quiet aside. */
.mails {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.mails li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--space-3);
}

.mails span {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}

.contact a.mail {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "SOFT" 30;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  font-weight: 600;
  text-decoration-color: var(--clay-2);
  color: var(--paper);
  word-break: break-word;
}

/* Footer */

.site-footer {
  padding: var(--space-5) 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  align-items: center;
}

.site-footer nav {
  display: flex;
  gap: var(--space-4);
}

.site-footer a {
  text-decoration: none;
  color: var(--ink-2);
}

.site-footer a:hover {
  color: var(--clay);
}

/* Motion: one staged reveal on load, nothing else moves on its own. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal 700ms var(--ease) forwards;
}

.reveal:nth-child(2) {
  animation-delay: 90ms;
}

.reveal:nth-child(3) {
  animation-delay: 180ms;
}

.reveal:nth-child(4) {
  animation-delay: 270ms;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: none;
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .app,
  .button {
    transition: none;
  }
}

/* Legal page */

.prose {
  max-width: var(--measure);
  padding: var(--space-6) 0 var(--space-section);
}

.prose h1 {
  font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
  margin-bottom: var(--space-4);
}

.prose h2 {
  font-size: var(--text-lg);
  margin: var(--space-5) 0 var(--space-2);
}

.prose ul {
  padding-left: 1.2rem;
  color: var(--ink-2);
}

.prose .meta {
  color: var(--ink-3);
  font-size: var(--text-sm);
}