/* Berke Ceylan, portfolio. Plain CSS, no build step.
   Character comes from three typefaces, not from colour:
   serif headings, sans body, monospace metadata. */

:root {
  --bg:     #ffffff;
  --alt:    #faf9f7;
  --line:   #e3e1dd;
  --text:   #1a1917;
  --soft:   #56534e;
  --mute:   #8a867f;
  --accent: #9c4f2e;
  --tint:   #f6efea;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap:  980px;
}

html[data-theme="dark"] {
  --bg:     #111213;
  --alt:    #17181a;
  --line:   #2b2c2f;
  --text:   #eae8e5;
  --soft:   #a8a49e;
  --mute:   #79756f;
  --accent: #d08a63;
  --tint:   #221b17;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.24; }
h1 { font-family: var(--serif); font-size: 2.7rem; font-weight: 400; letter-spacing: -.015em; }
h3 { font-family: var(--serif); font-size: 1.17rem; font-weight: 600; letter-spacing: -.005em; }
p  { margin: 0 0 .7rem; }

.mono { font-family: var(--mono); font-size: .8rem; letter-spacing: -.01em; }
.sep  { color: var(--line); font-weight: 400; padding: 0 .15em; }

a { color: var(--text); text-decoration: underline;
    text-underline-offset: 3px; text-decoration-color: var(--line); text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }

code { font-family: var(--mono); font-size: .86em; color: var(--accent); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
        background: var(--text); color: var(--bg); padding: .6rem 1rem; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid transparent; }
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: 1.4rem; height: 58px; }
.nav__brand { font-family: var(--serif); font-size: 1.02rem; text-decoration: none; }
.nav__links { margin-left: auto; display: flex; gap: 1.5rem; }
.nav__links a { font-family: var(--mono); font-size: .78rem; color: var(--soft); text-decoration: none; }
.nav__links a:hover { color: var(--text); }
.nav__links a.is-active { color: var(--accent); }
@media (max-width: 680px) { .nav__links { display: none; } }

.toggle { margin-left: auto; background: none; border: 0; padding: 4px; cursor: pointer;
          color: var(--mute); display: grid; place-items: center; }
@media (min-width: 681px) { .toggle { margin-left: 0; } }
.toggle:hover { color: var(--accent); }
.toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.icon-moon { display: none; }
html[data-theme="dark"] .icon-sun  { display: none; }
html[data-theme="dark"] .icon-moon { display: block; fill: currentColor; stroke: none; }

/* Intro, portrait on the left */
.intro { padding: 3.6rem 0 2.4rem; }
.intro__inner { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 2.4rem; align-items: start; }
@media (max-width: 700px) { .intro__inner { grid-template-columns: 116px minmax(0, 1fr); gap: 1.4rem; } }
.portrait { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.role { font-family: var(--mono); font-size: .84rem; color: var(--accent); margin: -.25rem 0 .9rem; }
.lede { color: var(--soft); max-width: 62ch; font-size: 1.02rem; }
.place { font-family: var(--mono); font-size: .78rem; color: var(--mute); margin: .8rem 0 0; }

.links { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 1rem 0 0; font-size: .92rem; }
.links a { text-decoration-color: var(--mute); }
.links--lg { font-size: 1rem; gap: 1.4rem; }

/* Keyword chips, each jumps to the project it came from */
.keys { display: flex; flex-wrap: nowrap; justify-content: center; gap: .4rem; margin-top: 2.2rem;
        padding-top: 1.6rem; border-top: 1px solid var(--line); }
.keys a {
  font-family: var(--mono); font-size: .77rem; line-height: 1.35;
  color: var(--soft); text-decoration: none; text-align: center;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 2px; padding: .42rem .6rem;
  transition: color .12s, border-color .12s, background .12s;
}
/* Six chips cannot share one line on a narrow screen, let them wrap there */
@media (max-width: 820px) { .keys { flex-wrap: wrap; } }
.keys a:hover { color: var(--accent); border-color: var(--accent); background: var(--tint); }

/* Sections */
.section { padding: 3.2rem 0; border-top: 1px solid var(--line); }
.section--alt { background: var(--alt); }

h2 {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em; color: var(--soft);
  margin: 0 0 2rem;
}
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.num { font-family: var(--mono); color: var(--accent); font-weight: 400; letter-spacing: 0; }

.sub { font-family: var(--sans); font-size: .78rem; font-weight: 600; text-transform: uppercase;
       letter-spacing: .11em; color: var(--mute); margin-bottom: .9rem; }

/* Fact lists, used by education, skills and certifications */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; gap: 2rem; } }
.facts { list-style: none; padding: 0; margin: 0; }
.facts li { padding: 0 0 .85rem; margin-bottom: .85rem; border-bottom: 1px solid var(--line); }
.facts li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.facts strong { display: block; font-weight: 600; font-size: .95rem; }
.facts .mono { display: block; color: var(--mute); margin: .12rem 0 .2rem; }
.facts span:not(.mono) { display: block; color: var(--soft); font-size: .91rem; }
/* A second heading inside a column, such as certifications under education */
.facts + .sub { margin-top: 1.7rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }

/* Two short entries sharing the width of one column, used by certifications.
   Each cell is about 212px, which the titles only clear at .88rem, and which
   the provider text only clears once the year moves to its own line. */
.facts--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: 1.3rem; align-items: start; }
.facts--pair li { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.facts--pair strong { font-size: .88rem; line-height: 1.35; }
.facts--pair .mono { font-size: .70rem; margin: .1rem 0 0; }
@media (max-width: 880px) { .facts--pair { grid-template-columns: 1fr; gap: .9rem; } }

/* Pinned cards, in the shape of GitHub pins */
.pins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .pins { grid-template-columns: 1fr; } }
.pin {
  display: flex; flex-direction: column; gap: .55rem;
  border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.1rem;
  background: var(--bg); text-decoration: none;
  transition: border-color .14s, background .14s;
}
.pin:hover { border-color: var(--accent); background: var(--tint); }
.pin__top { display: flex; align-items: center; gap: .5rem; }
.pin__icon { width: 15px; height: 15px; fill: var(--mute); flex-shrink: 0; }
.pin__name { font-family: var(--mono); font-size: .88rem; font-weight: 600; color: var(--accent); }
.pin__desc { color: var(--soft); font-size: .875rem; line-height: 1.5; flex: 1; }
.pin__foot { display: flex; align-items: center; gap: .42rem;
             font-family: var(--mono); font-size: .74rem; color: var(--mute); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot--py { background: #3572a5; }
.dot--ts { background: #3178c6; }

/* Experience. Direct child selector, so nested elements keep their own layout. */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline > li {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1.5rem;
  padding: 1.3rem 0; border-top: 1px solid var(--line);
}
.timeline > li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 700px) { .timeline > li { grid-template-columns: 1fr; gap: .25rem; } }
.when { color: var(--mute); margin: .3rem 0 0; }
.org { color: var(--accent); font-size: .88rem; margin-bottom: .45rem; }
.timeline p:not(.org):not(.when):not(.tech) { color: var(--soft); font-size: .93rem; margin-bottom: 0; }

/* Projects */
.project {
  display: flex; gap: 2rem; align-items: flex-start;
  padding: 1.7rem 0 1.7rem 1.1rem; border-top: 1px solid var(--line);
  border-left: 2px solid transparent; scroll-margin-top: 84px;
  transition: border-left-color .2s, background .2s;
}
.project:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .project { flex-direction: column; gap: 1rem; } }

/* Arriving from a keyword or a pin marks the target */
.project:target { border-left-color: var(--accent); background: var(--tint); }

.project__text { flex: 1; min-width: 0; }
.project__text > p:not(.meta):not(.tech):not(.links):not(.note) { color: var(--soft); font-size: .95rem; max-width: 72ch; }
.project__fig { width: 288px; flex-shrink: 0; border: 1px solid var(--line); background: var(--bg); }
@media (max-width: 760px) { .project__fig { width: 100%; } }
.project__fig img, .project__fig video { width: 100%; height: auto; display: block; }

.meta { color: var(--mute); margin-bottom: .3rem; }
.tech { color: var(--mute); margin: .6rem 0 0; }
.note { font-size: .86rem; color: var(--mute); margin: .7rem 0 0; }
.project .links { font-size: .9rem; margin-top: .8rem; }

/* Footer */
.footer { border-top: 1px solid var(--line); }
.footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
                 padding-block: 1.4rem; font-size: .84rem; color: var(--mute); }

/* Print */
@media print {
  .nav, .toggle, .keys, .pins, .footer { display: none; }
  body { font-size: 10.5pt; }
  .section, .section--alt, .project, .project__fig { background: #fff; }
  a { text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .78em; color: #666; }
}