/* ============================================================
   onurerdemol.com — stylesheet
   Plain CSS. No build step, no framework, no preprocessor.
   Everything you are likely to want to change lives in :root.
   ============================================================ */

:root {
  /* --- colours (taken from the Wix site's computed styles) --- */
  --bg:    #f6f6f6;  /* page background */
  --ink:   #281a39;  /* all text: a very dark purple, not black */
  --panel: #f1f0f1;  /* the three Team Coach cards */
  --rule:  #d9d7dc;  /* hairline dividers */

  /* --- type ---
     The original used Avenir LT W01 85 Heavy, which is licensed to Wix
     and cannot be redistributed. This stack renders as real Avenir on
     macOS and iOS, and falls back sensibly everywhere else. */
  --font: Avenir, "Avenir Next", "Avenir Next LT Pro", -apple-system,
          BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;

  /* --- layout --- */
  --wide:   1080px;  /* project grid */
  --narrow:  900px;  /* services + team coach */
  --text:    620px;  /* the intro paragraph */
  --gutter:   32px;
}

/* ---------- reset ---------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;          /* the original set everything in a heavy weight */
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; }

/* ---------- shared containers ---------- */

.wrap        { max-width: var(--wide);   margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--narrow); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: 72px 0; }

/* Centred, underlined section title — "Dual Native Stack Boost", "Team Coach" */
.section-title {
  margin: 0 0 56px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 96px;
}

.identity {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.identity img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* The <h1>. On the Wix site this text was positioned at x:-98px and
   clipped off the left edge of the viewport; here it simply sits in
   the header where it belongs. */
.site-name {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---------- social / contact icons ---------- */

.social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  transition: opacity 0.15s ease;
}

.social a:hover,
.social a:focus-visible { opacity: 0.72; }

.social svg { width: 16px; height: 16px; }

/* Two icon styles so neither needs fiddly even-odd path winding */
.social .ico-fill { fill: currentColor; }
.social .ico-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- intro ---------- */

.intro {
  max-width: var(--text);
  margin: 0 auto;
  padding: 64px var(--gutter) 8px;
  font-size: 19px;
  line-height: 1.4;
  text-align: center;
}

.intro p { margin: 0; }

/* ---------- project grid ---------- */

.projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
  padding: 56px 0 0;
}

.project-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 28px;
}

.project-card img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 18%;
  margin-bottom: 20px;
}

.project-card h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Matches the Wix cards, which clipped the blurb to four lines and put
   the full text on the project page. The whole blurb is still in the
   HTML — it is only visually clamped. Delete these four lines to show
   all of it. */
.project-card p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card:hover h3,
.project-card:focus-visible h3 { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- two- and three-column copy blocks ---------- */

.columns {
  display: grid;
  gap: 48px;
}

.columns-2 { grid-template-columns: repeat(2, 1fr); }
.columns-3 { grid-template-columns: repeat(3, 1fr); }

/* Apple / Android */
.stack-item { text-align: center; }

.stack-item img {
  width: 121px;
  height: 121px;
  margin: 0 auto 24px;
}

.stack-item h3 {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.stack-item p { margin: 0; }

/* Leadership Excellence / Coaching Engineers / Process Mindset */
.coach-item {
  background: var(--panel);
  padding: 34px 28px;
  text-align: center;
}

.coach-item h3 {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.coach-item p { margin: 0; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 40px;
}

.site-footer .wrap {
  display: flex;
  justify-content: flex-end;
  padding-top: 26px;
  padding-bottom: 26px;
  font-size: 17px;
}

/* ============================================================
   Project pages
   ============================================================ */

/* The Wix project pages had no header and no footer — landing on one from
   a search result left you with no way into the site. This single link is
   the only thing added to them. Delete it from the six project pages if
   you want them exactly as they were. */
.backlink {
  display: inline-block;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 32px var(--gutter) 0;
  width: 100%;
  font-size: 15px;
  text-decoration: none;
}

.backlink:hover,
.backlink:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.project {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 80px var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 420px);
  gap: 64px;
  align-items: start;
}

.project h1 {
  margin: 0 0 40px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.meta { margin: 0; }

.meta dt {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 4px;
}

.meta dd {
  margin: 0 0 24px;
  font-weight: 700;
  opacity: 0.85;
}

.project-body { margin: 0; padding-top: 4px; }

/* "My work" — the paragraph under the app's own store description.
   The store blurb says what the app is; this says what I did on it. */
.work-title {
  margin: 30px 0 10px;
  font-size: 15px;
  font-weight: 800;
}

.work-body { margin: 0; }

/* ---------- screenshot strip ----------
   One row of store screenshots per project page. Every image on a given
   page comes from the same store listing, so they share an aspect ratio
   and the row stays level without any cropping. Add or remove <li>
   elements freely — the row divides the width by however many there are. */
.shots-wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 64px var(--gutter) 0;
}

.shots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
}

.shots li { flex: 1 1 0; min-width: 0; }

.shots img {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 10px;
}

/* Where the screenshots came from, and when. The date matters on the
   three pages whose listing has since been replaced. */
.shots-note {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.65;
}

/* previous / next / home */
.project-nav {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 80px var(--gutter) 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.project-nav a { text-decoration: none; }

.project-nav a:hover,
.project-nav a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.project-nav .spacer { flex: 1; }

/* ---------- 404 ---------- */

.center-page {
  min-height: 70vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  gap: 20px;
}

.center-page h1 { margin: 0; font-size: 40px; font-weight: 800; letter-spacing: -0.02em; }
.center-page p  { margin: 0; font-size: 17px; }

/* ---------- focus ---------- */

a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   Responsive — two breakpoints, that is all
   ============================================================ */

@media (max-width: 860px) {
  .projects  { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
  .columns-3 { grid-template-columns: 1fr; gap: 20px; }
  .project   { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; }
  .project h1 { margin-bottom: 28px; font-size: 34px; }
  .section   { padding: 56px 0; }
  .shots-wrap { padding-top: 48px; }
  .shots     { gap: 10px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .projects   { grid-template-columns: 1fr; gap: 44px; }
  .columns-2  { grid-template-columns: 1fr; gap: 44px; }
  /* a full-width app icon on a phone is most of a screen — cap it */
  .project-card img { width: 240px; max-width: 65%; }
  .intro      { font-size: 17px; padding-top: 48px; }
  .site-name  { font-size: 17px; }
  .section-title { font-size: 24px; margin-bottom: 40px; }
  .project-nav { padding-top: 56px; }
  /* five thumbnails across a phone is unreadable — become a swipeable
     strip instead, at a size you can actually see */
  .shots    { overflow-x: auto; padding-bottom: 8px; }
  .shots li { flex: 0 0 148px; }
}

/* ============================================================
   Print — mostly so the page prints without a grey wash
   ============================================================ */

@media print {
  body { background: #fff; font-weight: 400; }
  .social, .project-nav { display: none; }
  .project-card { break-inside: avoid; }
  .shots-wrap { break-inside: avoid; }
}