/* ==================================================================
   Alp Dogramaci — CV
   Set as a printed document: mono display type, a year gutter, and
   hairline rules doing all the structural work. Warm paper, ink, and
   one accent red.
   ================================================================== */

@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/plex-sans-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plex-mono-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Tokens
------------------------------------------------------------------ */
:root {
  color-scheme: light dark;

  /* Warm paper and ink, with the accent lifted from the red in the portrait. */
  --paper: oklch(0.973 0.008 80);
  --paper-2: oklch(0.945 0.011 80);
  --ink: oklch(0.235 0.012 60);
  --ink-soft: oklch(0.45 0.014 60);
  --ink-faint: oklch(0.6 0.014 60);
  --rule: oklch(0.235 0.012 60 / 0.16);
  --rule-hard: oklch(0.235 0.012 60 / 0.85);
  --accent: oklch(0.52 0.185 26);

  --sans: "Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --text: clamp(1rem, 0.95rem + 0.22vw, 1.18rem);
  --small: clamp(0.82rem, 0.79rem + 0.14vw, 0.94rem);
  --title: clamp(1.14rem, 1.06rem + 0.35vw, 1.42rem);
  --display: clamp(2.3rem, 1.3rem + 5vw, 5.5rem);

  --gutter: 8.5rem;
  --pad: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
}

/* Dark mode: a cool blue-dark, with the text and rules pitched bright enough
   on it to stay easily readable. To make the site dark for everyone, drop the
   media query and keep the declarations inside it. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1b26;
    --paper-2: #23242f;
    --ink: #edeff6;
    --ink-soft: #c5c9d6;
    --ink-faint: #979cae;
    --rule: rgb(237 239 246 / 0.16);
    --rule-hard: rgb(237 239 246 / 0.7);
    --accent: #f1785f;
  }
}

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

* {
  margin: 0;
}

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

body {
  padding: var(--pad);
  font-family: var(--sans);
  font-size: var(--text);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

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

a {
  color: inherit;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

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

::selection {
  background: var(--accent);
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -100vw;
  top: 0.5rem;
  z-index: 10;
  padding: 0.4rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--rule-hard);
  font-family: var(--mono);
  font-size: var(--small);
}

.skip-link:focus-visible {
  inset-inline-start: 0.5rem;
}

.sheet {
  max-width: 84rem;
  margin-inline: auto;
}

/* ------------------------------------------------------------------
   Masthead
------------------------------------------------------------------ */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1.25rem, 0.5rem + 2.5vw, 2.75rem);
  padding-block: clamp(1.75rem, 1rem + 2.5vw, 3.25rem) clamp(1.25rem, 0.8rem + 1.5vw, 2rem);
  border-bottom: 1px solid var(--rule-hard);
}

.masthead__text {
  flex: 1 1 18rem;
}

.masthead h1 {
  font-family: var(--mono);
  font-size: var(--display);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.headline {
  margin-top: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
  max-width: 26ch;
  font-size: var(--title);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}

/* Contact sits hard right so the masthead holds both edges of the sheet,
   the same way the entries below it do. */
.contact {
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: var(--small);
  line-height: 1.75;
  text-align: right;
  color: var(--ink-faint);
}

.contact a {
  color: var(--ink-soft);
}

/* The portrait is a plain rectangle — no circle crop, no ring. The max width
   is held just under the source image's effective width after the 4:5 crop,
   so it is never upscaled. Raise it once a larger source is in place. */
.portrait {
  flex: 0 0 auto;
  width: clamp(7rem, 4rem + 10vw, 9.5rem);
}

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--paper-2);
  border: 1px solid var(--rule-hard);
  filter: saturate(0.94);
}

/* ------------------------------------------------------------------
   Sections
------------------------------------------------------------------ */
section {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.section {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  font-family: var(--mono);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section__num {
  color: var(--accent);
  font-weight: 400;
}

/* ------------------------------------------------------------------
   Entries — dates in the left gutter, role in the middle, place hard
   right, so both outer edges of the sheet are held.
------------------------------------------------------------------ */
.entry {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr) auto;
  gap: 0 1.5rem;
  padding-block: clamp(1.1rem, 0.8rem + 0.8vw, 1.6rem);
  border-top: 1px solid var(--rule);
}

.entries > .entry:first-child {
  border-top: 1px solid var(--rule-hard);
}

.when {
  display: flex;
  flex-direction: column;
  font-family: var(--mono);
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* The em dash hangs off the start date only, so the two lines read as a range.
   A single-date entry (.when--point) gets no dash. */
.when > time:first-child::after {
  content: " \2014";
  color: var(--ink-faint);
}

.when--point > time:first-child::after {
  content: none;
}

.when__end {
  color: var(--ink-faint);
}

.entry--current .when__end {
  color: var(--accent);
}

.what {
  min-width: 0;
}

.what h3 {
  font-size: var(--title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.at {
  margin-top: 0.2rem;
  font-family: var(--mono);
  font-size: var(--small);
  color: var(--ink-soft);
}

.where {
  font-family: var(--mono);
  font-size: var(--small);
  color: var(--ink-faint);
  text-align: right;
  white-space: nowrap;
}

.notes {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.4rem;
  max-width: 68ch;
  color: var(--ink-soft);
}

/* Hanging bullets: the marker sits in the margin so text stays flush. */
.notes li {
  padding-inline-start: 1.05rem;
  text-indent: -1.05rem;
}

.notes li::before {
  content: "\2014";
  display: inline-block;
  width: 1.05rem;
  text-indent: 0;
  color: var(--accent);
}

/* ------------------------------------------------------------------
   Skills — same gutter grid, so labels line up with the year column
------------------------------------------------------------------ */
/* Each dt/dd pair shares one row so the rule runs unbroken across the gap,
   matching the entry rules above. */
.skills > div {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: clamp(1.1rem, 0.8rem + 0.8vw, 1.6rem);
  border-top: 1px solid var(--rule);
}

.skills > div:first-child {
  border-top-color: var(--rule-hard);
}

.skills dt {
  font-family: var(--mono);
  font-size: var(--small);
  color: var(--ink-soft);
}

.skills dd {
  padding-inline-end: clamp(0rem, -6rem + 14vw, 9rem);
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------
   Colophon
------------------------------------------------------------------ */
.colophon {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule-hard);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------
   Narrow screens — the gutter folds above the entry
------------------------------------------------------------------ */
@media (max-width: 52rem) {
  .entry,
  .skills > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .when {
    flex-direction: row;
    gap: 0.4rem;
    order: 1;
  }

  /* Place moves up next to the dates instead of trailing the bullets. */
  .where {
    order: 2;
    margin-bottom: 0.5rem;
    text-align: left;
  }

  .what {
    order: 3;
  }

  .masthead h1 {
    letter-spacing: -0.04em;
  }

  /* Contact drops below the name and reads left with everything else. */
  .contact {
    margin-inline-start: 0;
    flex-basis: 100%;
    text-align: left;
  }

  .skills dd {
    padding-top: 0.35rem;
    padding-inline-end: 0;
  }
}

/* ------------------------------------------------------------------
   Motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------
   Print — this is a CV, so paper is a first-class target
------------------------------------------------------------------ */
@media print {
  @page {
    margin: 14mm 14mm 12mm;
  }

  :root {
    --paper: #fff;
    --paper-2: #fff;
    --ink: #000;
    --ink-soft: #26241f;
    --ink-faint: #55514a;
    --rule: rgba(0, 0, 0, 0.22);
    --rule-hard: rgba(0, 0, 0, 0.75);
    --accent: #000;
    /* Type is pinned in points for print; the on-screen scale is too large
       for paper now that it has been bumped up. */
    --text: 9.2pt;
    --small: 7.8pt;
    --title: 10.4pt;
    --display: 20pt;
    --gutter: 6rem;
  }

  body {
    padding: 0;
    line-height: 1.36;
  }

  .sheet {
    max-width: none;
  }

  .skip-link {
    display: none;
  }

  .masthead {
    padding-block: 0.6rem 0.8rem;
  }

  .portrait {
    width: 5.5rem;
  }

  section {
    margin-top: 1rem;
  }

  .entry,
  .skills > div {
    padding-block: 0.45rem;
    break-inside: avoid;
  }

  .notes {
    margin-top: 0.35rem;
    gap: 0.25rem;
  }

  .section {
    break-after: avoid;
  }

  /* The LinkedIn label is shortened on screen; print the full URL. */
  .contact a[href^="http"]::after {
    content: " (" attr(href) ")";
    color: var(--ink-faint);
  }
}