/* ==========================================================================
   Özün Çağan Altun — print stylesheet
   Loaded with media="print" AFTER style.css, so plain top-level rules here
   override the screen styles by source order. Goal: clean, ink-friendly,
   CV-like output on US Letter or A4.
   ========================================================================== */

@page {
  margin: 18mm;
}

/* ---------- print-safe token overrides ---------- */

:root {
  --paper: #ffffff;
  --paper-2: #f0f0f0;
  --klein: #1a1a1a;
  --klein-deep: #1a1a1a;
  --klein-wash: transparent;
  --klein-line: #aaaaaa;

  --ink: #111111;
  --ink-2: #111111;
  --ink-3: #444444;
  --ink-4: #666666;

  
  
  --hairline: #cccccc;
  --hairline-2: #aaaaaa;

  

  --nav-h: 0px;
}

/* ---------- global flattening: no glow, no motion, no chrome ---------- */

*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html {
  scroll-behavior: auto;
}

body {
  background: #ffffff;
  color: #111111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10.5pt;
  line-height: 1.5;
  overflow-x: visible;
  orphans: 3;
  widows: 3;
}

a {
  color: #111111;
  text-decoration: none;
}

strong {
  color: #111111;
}

.container {
  max-width: 100%;
  padding-inline: 0;
}

/* scroll-reveal states must never hide content on paper */
html.js .reveal,
html.js .reveal.is-in {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- removed entirely ---------- */

.aurora,
.nav,
.skip-link,
.hero__scroll,
.hero__actions,
.player {
  display: none !important;
}

/* ---------- hero → CV masthead ---------- */

.hero {
  min-height: 0;
  display: block;
  padding: 0 0 10pt;
  border-bottom: 2px solid #111111;
  margin-bottom: 14pt;
}

.hero__overline {
  font-size: 8.5pt;
  color: #444444;
  margin-bottom: 6pt;
}

.hero__name {
  display: block;
  font-size: 28pt;
  line-height: 1.1;
  color: #111111;
}

.hero__line {
  display: inline;
}

.hero__line--ghost {
  color: #111111;
  -webkit-text-stroke: 0;
  margin-left: 0;
}

.hero__meta {
  margin-top: 8pt;
  max-width: none;
}

.hero__roles {
  font-size: 11pt;
  color: #111111;
  line-height: 1.5;
}

.hero__now {
  margin-top: 4pt;
  font-size: 10pt;
  color: #444444;
}

/* ---------- sections ---------- */

.section {
  padding-block: 14pt;
}

.section__head {
  gap: 10pt;
  margin-bottom: 12pt;
  padding-bottom: 4pt;
  border-bottom: 1px solid #999999;
  break-after: avoid;
  page-break-after: avoid;
}

.section__index {
  font-size: 9pt;
  color: #666666;
}

.section__title {
  font-size: 16pt;
  color: #111111;
}

.sub-title {
  font-size: 12pt;
  color: #111111;
  margin-bottom: 8pt;
  break-after: avoid;
  page-break-after: avoid;
}

h2, h3, h4 {
  break-after: avoid;
  page-break-after: avoid;
}

/* ---------- about ---------- */

.about {
  gap: 14pt;
}

.about__lead {
  font-size: 13pt;
  color: #111111;
  margin-bottom: 8pt;
}

.about__body p + p {
  margin-top: 8pt;
}

.about__facts {
  background: transparent;
  border: 1px solid #cccccc;
  border-radius: 4pt;
  padding: 10pt 12pt;
  page-break-inside: avoid;
  break-inside: avoid;
}

.fact {
  padding-block: 5pt;
}

.fact + .fact {
  border-top-color: #dddddd;
}

.fact dt {
  font-size: 8.5pt;
  color: #666666;
}

.fact dd,
.fact dd a {
  font-size: 9.5pt;
  color: #111111;
  border-bottom: 0;
}

/* ---------- faders (top tracks + skills): meaningful in gray ---------- */

.fader {
  padding-block: 6pt;
  page-break-inside: avoid;
  break-inside: avoid;
}

.fader + .fader {
  border-top-color: #e0e0e0;
}

.fader__rank {
  font-size: 8.5pt;
  color: #666666;
}

.fader__label {
  font-size: 10pt;
  color: #111111;
}

.fader__year {
  font-size: 8.5pt;
  color: #666666;
}

.fader__track {
  height: 5px;
  background: #e0e0e0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.fader__fill {
  background: #333333;
  /* transform: scaleX(var(--level)) is inherited from style.css and prints fine */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* fills must not be stuck at scaleX(0) when the reveal never fired */
html.js .reveal:not(.is-in) .fader__fill {
  transform: scaleX(var(--level)) !important;
}

.fader__value {
  font-size: 9.5pt;
  color: #111111;
}

.fader--skill .fader__label {
  font-size: 9.5pt;
  color: #111111;
}

.fader--skill .fader__value {
  font-size: 8.5pt;
  color: #444444;
}

/* ---------- board ---------- */

.board {
  background: transparent;
  border: 1px solid #cccccc;
  border-radius: 4pt;
  padding: 10pt 12pt;
  margin-bottom: 14pt;
  page-break-inside: avoid;
  break-inside: avoid;
}

.board__head {
  margin-bottom: 4pt;
}

.board__title {
  font-size: 12pt;
  color: #111111;
}

.board__unit {
  font-size: 8.5pt;
  color: #666666;
}

/* ---------- discography: no giant ink squares ---------- */

.disco {
  margin-bottom: 14pt;
}

.disco__grid {
  gap: 8pt;
}

.release {
  page-break-inside: avoid;
  break-inside: avoid;
  border: 1px solid #cccccc;
  border-radius: 4pt;
  padding: 8pt 10pt;
}

.release__art {
  display: none;
}

.release__info {
  padding-top: 0;
}

.release__kind {
  font-size: 7.5pt;
  color: #666666;
}

.release__title {
  font-size: 11pt;
  color: #111111;
  margin-top: 2pt;
}

.release__tracks {
  font-size: 8.5pt;
  color: #444444;
  margin-top: 3pt;
}

/* ---------- curation ---------- */

.curation {
  margin-bottom: 14pt;
}

.curation__grid {
  gap: 8pt;
}

.playlist {
  background: transparent;
  border: 1px solid #cccccc;
  border-radius: 4pt;
  padding: 10pt 12pt;
  page-break-inside: avoid;
  break-inside: avoid;
}

.playlist__likes {
  font-size: 8.5pt;
  color: #444444;
}

.playlist__number {
  font-size: 16pt;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #111111;
  color: #111111;
}

.playlist__name {
  font-size: 11pt;
  color: #111111;
  margin-top: 6pt;
}

.playlist__count {
  font-size: 9pt;
  color: #444444;
}

.curation__more {
  margin-top: 8pt;
  font-size: 9.5pt;
  color: #444444;
}

.curation__more em {
  color: #111111;
}

/* ---------- radio odin ---------- */

.odin {
  background: transparent;
  border: 1px solid #cccccc;
  border-radius: 4pt;
  padding: 10pt 12pt;
  page-break-inside: avoid;
  break-inside: avoid;
}

.odin::before {
  background: #999999;
  width: 2px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.odin__title {
  font-size: 12pt;
  color: #111111;
  margin-bottom: 4pt;
}

.odin__body em {
  color: #111111;
}

/* ---------- experience timeline ---------- */

.timeline {
  margin-bottom: 14pt;
}

.entry {
  padding-block: 8pt;
  padding-left: 14pt;
  page-break-inside: avoid;
  break-inside: avoid;
}

.entry + .entry {
  border-top-color: #dddddd;
}

.entry::before {
  top: 8pt;
  background: #cccccc;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.entry::after {
  top: calc(8pt + 0.4em);
  background: #666666;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.entry--current::after {
  background: #111111;
}

.entry__dates {
  font-size: 9.5pt;
  color: #444444;
}

.entry--current .entry__dates {
  color: #111111;
  font-weight: 600;
}

.entry__role {
  font-size: 12pt;
  color: #111111;
}

.entry__org {
  font-size: 9.5pt;
  color: #444444;
  margin-top: 2pt;
}

.entry__org a {
  border-bottom: 0;
  color: #111111;
}

.entry__points {
  margin-top: 5pt;
  gap: 3pt;
}

.entry__points li {
  font-size: 10pt;
  color: #111111;
  padding-left: 12pt;
}

.entry__points li::before {
  background: #333333;
  top: 0.55em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---------- education & certs ---------- */

.edu {
  gap: 14pt;
}

.school {
  background: transparent;
  border: 1px solid #cccccc;
  border-radius: 4pt;
  padding: 10pt 12pt;
  page-break-inside: avoid;
  break-inside: avoid;
}

.school__name {
  font-size: 12pt;
  color: #111111;
}

.school__degree {
  font-size: 9.5pt;
  color: #444444;
  margin-top: 2pt;
}

.school__note {
  font-size: 9.5pt;
  color: #111111;
  margin-top: 6pt;
}

.cert {
  padding-block: 5pt;
  page-break-inside: avoid;
  break-inside: avoid;
}

.cert + .cert {
  border-top-color: #dddddd;
}

.cert__name {
  font-size: 10pt;
  color: #111111;
}

.cert__org {
  font-size: 8.5pt;
  color: #444444;
}

/* ---------- skills channels ---------- */

.channels {
  gap: 8pt;
}

.channel {
  background: transparent;
  border: 1px solid #cccccc;
  border-radius: 4pt;
  padding: 8pt 10pt;
  page-break-inside: avoid;
  break-inside: avoid;
}

.channel__name {
  font-size: 11pt;
  color: #111111;
  margin-bottom: 2pt;
}

/* ---------- contact ---------- */

.section--contact {
  padding-bottom: 14pt;
}

.contact__lead {
  font-size: 12pt;
  color: #111111;
}

.contact__email {
  margin-top: 8pt;
  font-size: 16pt;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #111111;
  color: #111111;
  border-bottom: 1px solid #999999;
  padding-bottom: 2pt;
}

.contact__links {
  margin-top: 10pt;
  display: block;
}

.contact__links li {
  padding-block: 2pt;
}

.contact__links a {
  display: inline;
  min-height: 0;
  font-size: 10pt;
  color: #111111;
  border-bottom: 0;
}

/* URLs after external links — ONLY contact section + entry orgs.
   Fragment links and mailto (the visible text is already the address)
   are excluded. */
.section--contact a:not([href^="#"]):not([href^="mailto:"])::after,
.entry__org a:not([href^="#"]):not([href^="mailto:"])::after {
  content: " (" attr(href) ")";
  font-size: 8pt;
  font-weight: 400;
  color: #555555;
  word-break: break-all;
}

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

.footer {
  border-top-color: #cccccc;
  padding-block: 8pt;
}

.footer p {
  font-size: 8pt;
  color: #666666;
}

/* ---------- polish-layer elements have no print form ---------- */

.fx-progress,
.fx-toast,
.contact__copy,
.tool__share,
.lang {
  display: none !important;
}

/* a modest headshot on the printed CV, not a full-page portrait */
.about__portrait {
  max-width: 150px;
  border: 1px solid #cccccc !important;
  break-inside: avoid;
}