/* ============================================================
   Robin K. Bareng — responsive professional CV website
   1. Fonts and tokens   2. Base and accessibility
   3. Header             4. Hero and contact details
   5. CV sections        6. Contact and footer
   7. Responsive layouts 8. Print and reduced motion
   ============================================================ */
@font-face {
  font-family:'Newsreader';
  font-weight:500;
  font-style:normal;
  src:url(../fonts/font-01.woff2) format('woff2');
}

@font-face {
  font-family:'Newsreader';
  font-weight:600;
  font-style:normal;
  src:url(../fonts/font-02.woff2) format('woff2');
}

@font-face {
  font-family:'Newsreader';
  font-weight:400;
  font-style:normal;
  src:url(../fonts/font-03.woff2) format('woff2');
}

@font-face {
  font-family:'Source Sans 3';
  font-weight:400;
  font-style:normal;
  src:url(../fonts/font-04.woff2) format('woff2');
}

@font-face {
  font-family:'Source Sans 3';
  font-weight:600;
  font-style:normal;
  src:url(../fonts/font-05.woff2) format('woff2');
}

@font-face {
  font-family:'Source Sans 3';
  font-weight:700;
  font-style:normal;
  src:url(../fonts/font-06.woff2) format('woff2');
}

@font-face {
  font-family:'Source Sans 3';
  font-weight:400;
  font-style:italic;
  src:url(../fonts/font-07.woff2) format('woff2');
}

/* 1. Design tokens: change these values to customize the theme. */
:root {
  --navy: #1b365d;
  --ink: #202834;
  --muted: #56677d;
  --surface: #ffffff;
  --background: #f4f7fb;
  --line: #dce4ef;
  --radius: 12px;
  --container: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
}
/* 2. Base styles and keyboard accessibility. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--background); font: 17px/1.65 'Source Sans 3', 'Segoe UI', sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--navy); }
button { font: inherit; cursor: pointer; }
img, svg { max-width: 100%; }
img { display: block; }
h1, h2, h3, p { margin-top: 0; }
a, p, li { overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible { outline: 3px solid #bb8539; outline-offset: 5px; }
section, #top { scroll-margin-top: 100px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px; background: white; }
.skip-link:focus { top: 12px; }
/* 3. Sticky site header; navigation collapses below 1024px. */
.site-header { position: sticky; top: 0; z-index: 20; background: #fffffff5; border-bottom: 1px solid var(--line); }
.site-bar { max-width: var(--container); margin: auto; padding: 16px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--navy); flex-shrink: 0; }
.brand-icon { width: 46px; height: 46px; border-radius: 8px; }
.brand strong { display: block; font-size: 19px; line-height: 1.3; }
.brand small { display: block; color: var(--muted); font-size: 12px; }
.site-menu { display: flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 600; }
.site-menu a:hover { text-decoration: underline; text-underline-offset: 5px; }
.menu-toggle { display: none; padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--navy); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 20px; border: 1px solid var(--navy); border-radius: 6px; background: var(--navy); color: white; font-size: 15px; font-weight: 600; line-height: 1.4; }
.button:hover { background: #294c79; color: white; }
.button.secondary { background: transparent; color: var(--navy); border-color: #acbbcf; }
.button.secondary:hover { background: #e7edf5; }
/* 4. Introduction, credentials, contact links and primary actions. */
#top { background: linear-gradient(125deg, #eaf0f8, #fbfcfe); border-bottom: 1px solid var(--line); padding: clamp(40px, 7vw, 84px) max(var(--gutter), calc((100% - 1080px) / 2)); }
.eyebrow { margin-bottom: 18px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin-bottom: 0; color: var(--navy); font: 500 clamp(38px, 6vw, 72px)/1.12 'Newsreader', Georgia, serif; letter-spacing: -.015em; }
.hero-credentials { font-size: .6em; font-weight: 400; white-space: nowrap; }
.contact-details { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 28px; font-size: 15px; }
.contact-details a { display: inline-flex; align-items: flex-start; gap: 8px; max-width: 100%; min-width: 0; }
.contact-details svg { flex: 0 0 17px; margin-top: 4px; }
.hero-subtitle { margin: 24px 0 0; color: var(--muted); font: 24px/1.5 'Newsreader', Georgia, serif; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* 5. Shared content layout: label column + flexible content column. */
main { max-width: var(--container); margin: auto; padding: 36px var(--gutter) 40px; }
.cv-section { display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 36px; margin-bottom: 24px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 4px 20px #1b365d04; }
.section-content { min-width: 0; }
.section-heading h2 { margin: 0; color: var(--navy); font-size: 14px; line-height: 1.5; letter-spacing: .07em; }
#profile p { margin: 0; font: clamp(20px, 2.3vw, 25px)/1.55 'Newsreader', Georgia, serif; }
.content-placeholder { background: #fff1a8; color: inherit; padding: 1px 3px; border-radius: 3px; }
ul { margin: 14px 0 0; padding-left: 22px; }
li { margin-bottom: 10px; }
.skill-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.skill-list li { max-width: 100%; margin: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; background: #f5f8fc; font-size: 15px; }
.education-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.education-grid li { margin: 0; padding: 22px; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; }
.education-grid b { display: block; margin-bottom: 8px; color: var(--navy); font: 600 20px/1.35 'Newsreader', Georgia, serif; }
.experience-entry { padding: 28px 0; border-top: 1px solid var(--line); }
.experience-entry:first-of-type { padding-top: 0; border-top: 0; }
.experience-entry:last-of-type { padding-bottom: 0; }
.experience-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; }
.experience-heading h3 { margin: 0; font-size: 21px; line-height: 1.35; flex: 1 1 260px; }
.experience-heading > span { color: var(--muted); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.experience-location { color: var(--muted); font-style: italic; margin: 6px 0 0; }
#credentials ul, #selected-work ul { margin-top: 0; }
/* 6. Contact call to action and three-column footer. */
.contact-panel { max-width: 1080px; margin: 0 auto 56px; padding: 36px; border-radius: var(--radius); background: var(--navy); color: white; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.contact-panel h2 { margin-bottom: 8px; font: 500 32px/1.2 'Newsreader', Georgia, serif; }
.contact-panel p { margin: 0; color: #d8e1ed; }
.contact-panel .button { flex-shrink: 0; background: white; color: var(--navy); }
.site-footer { background: #112640; color: #d8e1ed; }
.footer-grid { max-width: var(--container); margin: auto; padding: 48px var(--gutter); display: grid; grid-template-columns: 1.7fr 1fr 1.3fr; gap: 36px; }
.footer-grid > * { min-width: 0; }
.footer-grid h2 { color: white; font: 500 25px/1.3 'Newsreader', Georgia, serif; margin-bottom: 12px; }
.footer-grid h3 { color: white; font-size: 16px; margin-bottom: 14px; }
.footer-grid p, .footer-grid a { font-size: 15px; margin-bottom: 10px; }
.footer-grid a { display: block; }
.site-footer a:hover { color: white; text-decoration: underline; }
.footer-bottom { max-width: 1080px; margin: auto; padding: 20px 0; border-top: 1px solid #ffffff25; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }
/* 7. Breakpoints preserve readability without fixed content widths. */
@media (max-width: 1199px) {
  .site-menu { gap: 12px; font-size: 13px; }
  .brand small { display: none; }
  .contact-panel { margin-left: var(--gutter); margin-right: var(--gutter); }
  .footer-bottom { margin-left: var(--gutter); margin-right: var(--gutter); }
}
@media (max-width: 1023px) {
  .site-bar { flex-wrap: wrap; gap: 12px; }
  .menu-toggle { display: block; }
  .site-menu { display: none; width: 100%; align-items: stretch; flex-direction: column; gap: 0; font-size: 16px; max-height: 65vh; overflow-y: auto; }
  .site-menu.open { display: flex; }
  .site-menu a { padding: 10px 12px; min-height: 44px; }
  .site-menu .button { margin-top: 8px; }
  .cv-section { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 767px) {
  .cv-section { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .contact-panel { flex-direction: column; align-items: flex-start; padding: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .hero-subtitle { font-size: 22px; }
}
@media (max-width: 479px) {
  body { font-size: 16px; }
  .brand strong { font-size: 17px; }
  .brand-icon { width: 38px; height: 38px; }
  .site-bar { padding-top: 12px; padding-bottom: 12px; }
  .contact-details { flex-direction: column; }
  .hero-credentials { display: block; margin-top: 8px; }
  .hero-actions .button { width: 100%; }
  main { padding-top: 24px; }
  .cv-section { padding: 22px 18px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child { grid-column: auto; }
}
/* 8. Motion preferences and a compact paper-friendly CV. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .site-header, .hero-actions, .contact-panel, .site-footer, .skip-link { display: none; }
  body { background: white; color: black; font-size: 11pt; }
  #top { padding: 20px 0; background: white; }
  h1 { font-size: 32pt; }
  main { max-width: none; padding: 0; }
  .cv-section { display: block; padding: 18px 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .section-heading { margin-bottom: 12px; }
  .experience-entry { break-inside: avoid; }
  a { color: inherit; }
}

/* ============================================================
   MODERN 3D EDITION — layered geometry, glass, soft light.
   This override follows the shared responsive base stylesheet.
   ============================================================ */
:root {
  --navy: #153e53;
  --ink: #183544;
  --muted: #5a737d;
  --background: #eef5f5;
  --line: #d7e5e7;
  --radius: 18px;
}
body { background: radial-gradient(ellipse at 10% 10%, #e4f0ed, transparent 45%), #f2f6f6; }
.site-header { background: #ffffffeb; backdrop-filter: blur(18px); }
.brand-icon { box-shadow: 0 5px 14px #153e5320; }
.button { border-radius: 9px; box-shadow: 0 6px 16px #153e5316; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
#top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  overflow: hidden;
  padding-top: 78px;
  padding-bottom: 78px;
  background: radial-gradient(ellipse at 88% 20%, #cce9e7 0, transparent 48%), linear-gradient(120deg, #f6f9f8, #e7f0f3);
}
.hero-copy { min-width: 0; position: relative; z-index: 2; }
.eyebrow { color: #40847d; }
h1 { font-size: clamp(42px, 5vw, 68px); letter-spacing: -.03em; }
.hero-credentials { display: block; font-family: 'Source Sans 3', sans-serif; font-size: 20px; letter-spacing: .12em; margin-top: 16px; color: #617a88; }
.hero-subtitle { font-size: 24px; }
.contact-details { font-size: 14px; gap: 10px 20px; }
/* CSS-only sculptural rings sit behind the dimensional identity card. */
.hero-art { position: relative; min-width: 0; height: 450px; perspective: 1000px; }
.orbit { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; border: 30px solid #a1cdc7; border-radius: 50%; box-shadow: inset 12px 8px 20px #ffffffb0, inset -8px -10px 20px #3c8f8a65, 20px 24px 32px #153e5320; }
.orbit-one { transform: translate(-50%, -50%) rotateY(55deg) rotateZ(-25deg); }
.orbit-two { width: 310px; height: 310px; border-width: 22px; border-color: #b4ccd9; transform: translate(-50%, -50%) rotateX(62deg) rotateZ(30deg); }
.orbit-three { width: 180px; height: 180px; border-width: 18px; border-color: #e1c49a; transform: translate(-40%, -90%) rotateY(-48deg); opacity: .8; }
.glass-card { background: linear-gradient(145deg, #ffffffed, #ffffffa6); border: 1px solid #ffffff; border-radius: 24px; backdrop-filter: blur(16px); box-shadow: 0 28px 50px #204d6026, 3px 3px 0 #ffffff80; }
.identity-card { position: absolute; width: 250px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotateY(-12deg) rotateZ(-6deg); padding: 28px; text-align: center; transition: transform .5s; }
.hero-art:hover .identity-card { transform: translate(-50%, -50%) rotateY(0) rotateZ(-2deg); }
.art-label { display: block; font-size: 10px; letter-spacing: .17em; color: #497776; }
.art-monogram { display: grid; place-items: center; width: 112px; height: 112px; margin: 20px auto; color: white; font: 44px 'Newsreader', Georgia, serif; border-radius: 28px; background: linear-gradient(145deg, #306f77, #153e53); box-shadow: 8px 12px 20px #153e5330, inset 1px 1px 1px #ffffff80; }
.art-name { display: block; font: 24px 'Newsreader', Georgia, serif; }
.art-caption { display: block; font-size: 12px; color: #63818c; line-height: 1.6; margin-top: 6px; }
.art-rule { height: 1px; background: #d9e5e8; margin: 18px 0; }
.floating-badge { position: absolute; z-index: 3; border: 1px solid white; border-radius: 14px; background: #fffffff0; box-shadow: 0 14px 28px #1835441c; padding: 14px 18px; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.badge-top { right: 0; top: 58px; transform: rotate(4deg); }
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #408e7f; box-shadow: 0 0 0 5px #408e7f15; }
.badge-bottom { left: 0; bottom: 42px; transform: rotate(-3deg); }
.badge-bottom strong { font: 42px 'Newsreader', Georgia, serif; color: #286a70; }
.badge-bottom span { line-height: 1.4; color: var(--muted); }
/* Layered content surfaces: subtle depth keeps the long CV readable. */
main { padding-top: 48px; }
.cv-section { border: 1px solid #ffffff; box-shadow: 0 8px 30px #21495808, 0 1px 1px #153e5310; background: #ffffffef; }
.section-number { display: block; font: 38px/1 'Newsreader', Georgia, serif; color: #b1c9cc; margin-bottom: 14px; }
.section-heading h2 { color: #2c7479; font-size: 12px; }
.skill-list li { border-radius: 9px; background: linear-gradient(145deg,#f6faf9,#eef4f4); border-color: #e1ebeb; }
.education-grid li { background: linear-gradient(145deg,#fbfdfd,#edf4f4); border-color: #e2ecec; }
.experience-entry { position: relative; padding-left: 20px; border-left: 2px solid #e0ecec; }
.experience-entry::before { content: ''; position: absolute; left: -6px; top: 33px; width: 10px; height: 10px; border-radius: 50%; background: #508a8c; border: 2px solid white; }
.experience-entry:first-of-type::before { top: 8px; }
.contact-panel { position: relative; overflow: hidden; background: linear-gradient(120deg,#153e53,#246d73); box-shadow: 0 18px 34px #153e531b; }
.contact-panel::after { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 28px solid #ffffff08; right: 15%; top: -120px; pointer-events: none; }
.site-footer { background: #12313f; }
@media (max-width: 1023px) {
  #top { gap: 20px; }
  .hero-art { height: 390px; }
  .orbit { width: 300px; height: 300px; }
  .identity-card { width: 220px; padding: 24px; }
  .badge-top { right: -8px; top: 24px; font-size: 10px; padding: 12px; }
  .badge-bottom { bottom: 14px; }
}
@media (max-width: 767px) {
  #top { grid-template-columns: minmax(0, 1fr); padding-top: 46px; padding-bottom: 30px; }
  .hero-art { width: min(100%, 400px); height: 390px; margin: 0 auto; }
  .badge-top { right: 0; }
  .section-heading { display: flex; align-items: center; gap: 14px; }
  .section-number { font-size: 28px; margin: 0; }
}
@media (max-width: 479px) {
  .hero-art { height: 360px; }
  .orbit { width: 260px; height: 260px; border-width: 24px; }
  .orbit-three { width: 155px; height: 155px; border-width: 16px; }
  .identity-card { width: 205px; padding: 22px; }
  .art-monogram { width: 95px; height: 95px; }
  .badge-top { font-size: 9px; padding: 10px; top: 8px; }
  .badge-bottom { bottom: 4px; font-size: 10px; padding: 10px 14px; }
  .badge-bottom strong { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .identity-card { transition: none; }
  .button:hover { transform: none; }
}
@media print {
  #top { display: block; padding: 20px 0; background: white; }
  .hero-art, .section-number { display: none; }
  .cv-section { box-shadow: none; border: none; }
  .experience-entry { border-left: none; padding-left: 0; }
  .experience-entry::before { display: none; }
}

/* ============================================================
   SCROLL DEPTH — JavaScript applies transforms only after setup.
   Content stays visible if JavaScript or observers are unavailable.
   ============================================================ */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #347e83, #d4b488);
  z-index: 100;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
  pointer-events: none;
}
.scroll-effects .hero-art {
  transform: translate3d(0, var(--hero-shift, 0px), 0);
}
.scroll-effects .hero-copy {
  transform: translate3d(0, var(--copy-shift, 0px), 0);
}
.scroll-effects .orbit-one {
  transform: translate(-50%, -50%) rotateY(55deg) rotateZ(calc(-25deg + var(--ring-turn, 0deg)));
}
.scroll-effects .orbit-two {
  transform: translate(-50%, -50%) rotateX(62deg) rotateZ(calc(30deg - var(--ring-turn, 0deg)));
}
.scroll-effects .cv-section,
.scroll-effects .contact-panel {
  transition: opacity .65s ease, transform .85s cubic-bezier(.2,.7,.2,1);
  transform-origin: center top;
}
.scroll-effects .depth-pending {
  opacity: 0;
  transform: perspective(1000px) translate3d(0, 45px, -30px) rotateX(5deg);
}
.scroll-effects .depth-visible {
  opacity: 1;
  transform: perspective(1000px) translate3d(0, 0, 0) rotateX(0);
}
@media (max-width: 767px) {
  .scroll-effects .depth-pending {
    transform: perspective(900px) translate3d(0, 24px, -12px) rotateX(2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .scroll-effects .hero-art, .scroll-effects .hero-copy,
  .scroll-effects .cv-section, .scroll-effects .contact-panel {
    transform: none;
    transition: none;
    opacity: 1;
  }
}
@media print {
  .scroll-progress { display: none; }
  .scroll-effects .depth-pending, .scroll-effects .depth-visible,
  .scroll-effects .hero-copy {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== ANIMATION EDITION: continuous motion and scroll-linked depth ===== */
@keyframes float-card {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -16px; }
}
@keyframes float-badge {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
@keyframes ring-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 10px -14px; }
}
.identity-card { animation: float-card 5s ease-in-out infinite; }
.floating-badge { animation: float-badge 4.5s ease-in-out infinite; }
.badge-bottom { animation-delay: -2s; }
.orbit { animation: ring-drift 7s ease-in-out infinite; }
.orbit-two { animation-delay: -3s; }
.scroll-effects .cv-section {
  transform: perspective(1200px) translate3d(0, var(--section-y, 0px), 0)
    rotateX(var(--section-tilt, 0deg)) rotateY(var(--section-turn, 0deg))
    scale(var(--section-scale, 1));
  opacity: var(--section-opacity, 1);
  transition: box-shadow .3s;
  transform-origin: center center;
  backface-visibility: hidden;
}
.cv-section:hover { box-shadow: 0 24px 48px #153e5318; }
@media (prefers-reduced-motion: reduce) {
  .identity-card, .floating-badge, .orbit { animation: none; }
  .scroll-effects .cv-section { transform: none; opacity: 1; }
}
@media print {
  .identity-card, .floating-badge, .orbit { animation: none; }
  .scroll-effects .cv-section { transform: none; opacity: 1; }
}

.contact-panel {
  background: #17365d !important;
  border-color: #17365d !important;
  color: #fff !important;
}

.contact-panel h2,
.contact-panel p {
  color: #fff !important;
}

.contact-panel .button {
  background: #fff !important;
  border-color: #fff !important;
  color: #17365d !important;
}

.contact-panel .button:hover {
  background: #edf2f8 !important;
}