/* Blue Tomato Studio — website styles
   A design house, so the site should look like something was drawn by hand
   rather than assembled. Bright white paper. Wonky Fraunces for the headings,
   Kalam for the little handwritten notes, and boxes whose corners are all
   slightly different so nothing looks stamped out by a machine.
   Every colour here was lifted off the painted tomato.

   There is no dark mode, on purpose. The painting is a bright thing on white
   paper and it does not survive being inverted, so the site stays light
   whatever the reader's Mac is set to. Do not add a prefers-color-scheme
   block back in. */

/* ---- fonts ----
   Fraunces and Kalam, the same two the aloud site uses, so the family reads as
   one hand. Fraunces runs with its WONK axis on, which is the setting that
   gives it the odd curled leg on the g and the k. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-VF.woff2") format("woff2");
  font-weight: 300 650; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("fonts/Kalam-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- the colour vocabulary, all of it off the painting ---- */
:root {
  --paper:  #FFFFFF;   /* bright white */
  --wash:   #EAF4FD;   /* the softest blue, for the halo behind the tomato */
  --wash2:  #F3F9FE;   /* fainter still, for a card that wants to sit back */
  --ink:    #16202B;   /* text. a deep blue-grey, never black */
  --ink2:   #4C5A68;
  --muted:  #6B7887;   /* fine print. dark enough to pass AA on white */
  --line:   #DCE7F1;
  --line2:  #BED2E4;
  --blue:   #0071C7;   /* links and buttons. the painting's blue, held down
                          enough to read as text on white */
  --sky:    #0F8CE8;   /* the painting's bright blue. big shapes only */
  --leaf:   #5E7817;   /* the green off the stem */
  --on-blue:#FFFFFF;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --hand: "Kalam", "Bradley Hand", "Segoe Print", cursive;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --wrap: 1080px;
  --gutter: clamp(20px, 5vw, 44px);

  /* hand-drawn corners: eight different radii, so no two are the same */
  --wobble:  22px 44px 26px 38px / 38px 24px 42px 28px;
  --wobble2: 42px 24px 40px 26px / 24px 40px 28px 44px;
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
::selection { background: var(--wash); color: var(--ink); }

a { color: var(--blue); text-underline-offset: 3px; text-decoration-color: var(--line2); }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 60;
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}
h1 { font-size: clamp(42px, 7vw, 68px); }
h2 { font-size: clamp(28px, 4.2vw, 38px); }
h3 { font-size: 21px; letter-spacing: -0.008em; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.lead { font-size: clamp(18px, 2.1vw, 20px); color: var(--ink2); }
.small { font-size: 15px; }
.muted { color: var(--muted); }

/* the handwritten label above each section, set on a slight slant like
   something pencilled into a margin */
.eyebrow {
  font-family: var(--hand);
  font-size: 20px;
  color: var(--sky);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 10px;
  display: inline-block;
  transform: rotate(-1.4deg);
}

section { padding: clamp(44px, 6vw, 76px) 0; }

/* ---- header ----
   No tomato up here. It hangs in the hero instead, where there is room to see
   it, and the bar stays out of the way. */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.stuck { border-bottom-color: var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; }

.wordmark {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 20;
  font-size: 19px; font-weight: 620; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.wordmark .b { color: var(--sky); }

.nav { display: flex; align-items: center; gap: 24px; font-family: var(--hand); font-size: 19px; }
.nav a { color: var(--ink2); text-decoration: none; }
.nav a:hover { color: var(--sky); }

/* ---- hero ----
   The painting hangs on the right with a soft blue halo behind it, the way a
   picture sits on a white wall. Nothing else competes for that side. */
.hero { padding-top: clamp(16px, 2.5vw, 34px); padding-bottom: clamp(14px, 2vw, 26px); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
}
.hero h1 { max-width: 12ch; }
.hero h1 .soft { color: var(--sky); }
.hero .lead { max-width: 33ch; margin-top: 16px; }

/* The marker swipe under "design house". It is a painted SVG stroke set as a
   background image rather than a pseudo-element, so it always sits behind the
   letters without any z-index wrangling, and it survives a line break. */
.marker {
  white-space: nowrap;
  background-image: url("img/marker.svg");
  background-repeat: no-repeat;
  background-size: 105% 0.76em;
  background-position: -2.5% 74%;
  padding: 0 .06em;
}

.art { position: relative; display: flex; justify-content: center; }
.art::before {
  content: ""; position: absolute; inset: 6% 4% 10% 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 46% 42%, var(--wash), transparent 68%);
}
/* Only the painting, never a sticker. A bare `.art img` here would out-rank
   .sticker on position and let the flex box stretch the sticker tall. */
.art .art-img { position: relative; z-index: 1; width: min(100%, 380px); height: auto; }

/* ---- the hand-drawn stickers ----
   Farhan's own drawings, the same set as the aloud app. They peek out from
   behind things. Always decorative, never carrying meaning, so they are all
   aria-hidden and none of them get alt text.

   Always the -solid files. Those have the inside of the animal filled with
   paper. The plain outline versions let a card edge run straight through the
   middle of a face. */
.sticker {
  position: absolute;
  width: 58px;
  height: auto;
  aspect-ratio: 1;          /* every sticker is square. never let a flex parent stretch one */
  pointer-events: none;
  z-index: 2;
  opacity: .92;
}

/* the bean stands behind the tomato and leans out when you look at it */
.bean {
  z-index: 0;
  transform: rotate(-9deg);
  transition: transform .35s ease;
}
@keyframes bean-lean {
  0%, 100% { transform: rotate(-9deg)  translate(0, 0); }
  30%      { transform: rotate(-17deg) translate(-5px, -8px); }
  65%      { transform: rotate(-2deg)  translate(3px, -3px); }
}
.art:hover .bean { animation: bean-lean 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .art:hover .bean { animation: none; } }

/* ---- the app cards ----
   Each card is one link out to that app's own site. This page is a signpost,
   not a shop. The corners wobble, and they wobble differently on hover, so the
   whole thing feels drawn rather than printed. */
.apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 24px;   /* wide enough that the second pen line never touches its neighbour */
}

.app {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--wobble);
  padding: 24px 24px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform .22s ease, border-color .22s ease, border-radius .22s ease;
}
.app:nth-child(even) { border-radius: var(--wobble2); }

/* the second pass of the pen. Anyone drawing a box by hand goes round twice,
   and the two lines never quite meet, so this one sits a few pixels out and
   leans the other way. */
.app::before,
.hello::before {
  content: "";
  position: absolute; inset: -7px;
  border: 2px solid var(--line);
  border-radius: var(--wobble2);
  opacity: .5;
  transform: rotate(.35deg);
  pointer-events: none;
}
.app:nth-child(even)::before { border-radius: var(--wobble); transform: rotate(-.35deg); }
.app:hover::before { opacity: .85; }
.app:hover {
  transform: translateY(-4px) rotate(-.5deg);
  border-color: var(--line2);
  border-radius: var(--wobble2);
}
.app:nth-child(even):hover { transform: translateY(-4px) rotate(.5deg); border-radius: var(--wobble); }
.app:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.app .icon {
  width: 72px; height: 72px;
  border-radius: 22.4%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(22, 32, 43, .07);
  margin-bottom: 18px;
}
.app .icon img { width: 100%; height: 100%; object-fit: cover; }
/* Slate ships its icon with a transparent margin already baked in, so it needs
   a nudge to sit the same size as the two that are full-bleed. */
.app .icon--slate { box-shadow: none; }
.app .icon--slate img { transform: scale(1.1); }

.app .row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.app h3 { color: var(--ink); }

/* the platform label, handwritten, tilted, like a note on a contact sheet */
.chip {
  font-family: var(--hand);
  font-size: 16px;
  color: var(--sky);
  transform: rotate(-2deg);
  white-space: nowrap;
}

.app p { color: var(--ink2); font-size: 16px; line-height: 1.58; margin: 0 0 18px; }
.app .go {
  margin-top: auto;
  font-size: 15px; font-weight: 500; color: var(--blue);
  display: inline-flex; align-items: center; gap: 7px;
}
.app .go svg { width: 15px; height: 15px; transition: transform .2s ease; }
.app:hover .go svg { transform: translateX(4px) rotate(-4deg); }

/* ---- contact ---- */
.hello {
  position: relative;
  border: 2px solid var(--line);
  border-radius: var(--wobble);
  background: var(--wash2);
  padding: clamp(26px, 4vw, 42px);
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: var(--on-blue);
  border-radius: 16px 22px 18px 20px / 20px 16px 22px 18px;
  padding: 13px 22px;
  font-size: 16px; font-weight: 550;
  text-decoration: none;
  transition: transform .16s ease, opacity .16s ease;
}
.btn:hover { transform: translateY(-2px) rotate(-1deg); opacity: .93; color: var(--on-blue); }

/* ---- footer ---- */
.site-footer { border-top: 2px dashed var(--line); padding: 30px 0 44px; }
.foot-grid { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--hand); font-size: 19px; }
.foot-links a { color: var(--ink2); text-decoration: none; }
.foot-links a:hover { color: var(--sky); }
.foot-note { font-size: 14px; color: var(--muted); margin: 14px 0 0; }

/* ---- small screens ---- */
@media (max-width: 760px) {
  /* the painting goes above the words, smaller, still the first thing you see */
  .hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .art { order: -1; }
  .art img { width: min(62%, 250px); }
  .hero h1, .hero .lead { max-width: none; }
  .sticker { width: 46px; }
}

@media (max-width: 620px) {
  .hide-sm { display: none; }
  .nav { gap: 18px; }
  .foot-grid { flex-direction: column; gap: 22px; }
}

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