/* Layout values follow the archived noyan.online/WELCOME page.
   Content, customer assets and destinations remain in CMS. */
.personal-site { zoom: .9; }
.logo__image { text-align:center; height:100%; width:100%; }
.personal-logo { margin:auto; width:77%; box-shadow:inset 0 0 12px 5px rgb(152 133 187); border-radius:20px; padding:17px; }
.personal-name { display:block; text-align:center; }
.avatar__image { text-align:center; opacity:.7; }
.personal-specialty { font-size:1.4rem; }
.personal-role { color:#dfbcc8; margin-top:10px; }
.personal-location { margin-bottom:15px; margin-top:10px; }
.personal-location h6 { font-size:1.7rem; }
.personal-location .top { margin-top:18px; display:contents; font-size:1.4rem; }
#soundcheck { background-color:#e0bbc8fa; border:none; }
#soundcheck i { color:black; font-size:25px; display:block; }
#headline .h2__subtitle { margin-bottom:2rem; }
.headline__title { max-width:800px; font-size:4rem !important; }
.changing-text { font-size:56px; }
.personal-prose > p { margin-top:2rem; font-size:2rem; }
@media (min-width:1400px) { .personal-prose > p { margin-top:2.2rem; font-size:2.2rem; } }
@media (min-width:1600px) { .personal-prose > p { margin-top:2.1rem; font-size:2rem; } }
.personal-block-last { margin-bottom:0; }
#creations .h2__title { padding-bottom:10px; }
.creations-aside { padding:14px; border-radius:18px; background:rgba(255,255,255,.04); }
.zoom-img { object-fit:contain; max-width:90%; margin:10px; }
#creations .cards__image { justify-content:center; }
#creations .cards__text p { color:inherit; font-size:1.6rem; line-height:1.6; }
.iframe-wrapper { max-width:100%; flex-shrink:1; }
.iframe-wrapper .webframe { display:block; }
.iframe-wrapper[data-provider="youtube"] { width:100%; height:260px; border-radius:12px; box-shadow:none; background:#000; }
.iframe-wrapper[data-provider="drive"] { height:auto; border-radius:12px; box-shadow:none; background:#000; }
/* A real sizing child preserves 9:16 inside flex also in Safari, where an
   aspect-ratio box with only an absolute iframe can collapse to zero. */
.iframe-wrapper[data-provider="drive"]::before { content:""; display:block; padding-top:177.777778%; }
.iframe-wrapper .mediaframe { display:block; border:0; width:100%; height:100%; }
.iframe-wrapper[data-provider="drive"] .mediaframe { position:absolute; inset:0; }
.personal-project-note { font-size:1.3rem; padding:0 20px; color:var(--t-medium); }
.creations-grid { grid-template-columns:240px minmax(0,1fr); }
.cs-card { min-width:0; }
.cs-viewport { touch-action:pan-y; }
.cs-card[hidden], [hidden] { display:none !important; }
.cs-nav:disabled { opacity:.3; cursor:default; }
.cards__text p, .resume-lines__descr p { font:inherit; }
.story-status:empty { display:none; }
.story-status { font-size:1.3rem; margin-top:8px; }
.vd-card { aspect-ratio:1; }
.vd-poster { position:relative; }
.vd-video { height:100%; object-fit:contain; pointer-events:none; }
.personal-footer { display:flex; justify-content:space-between; gap:20px; padding:30px 0; font-size:1.4rem; }
.skip-link { position:fixed; left:1rem; top:-10rem; z-index:999; padding:1rem; background:#111; color:#fff; }
.skip-link:focus { top:1rem; }
:focus-visible { outline:2px solid #dfbcc8; outline-offset:4px; }
.spotify-page { margin:0; min-width:0; min-height:100svh; display:grid; place-items:center; padding:24px 16px; }
.spotify-card { width:100%; max-width:560px; padding:28px; border:1px solid var(--stroke-elements); border-radius:24px; background:var(--base-tint); }
.spotify-card a { color:var(--t-bright); }
.spotify-card h1 { font-size:clamp(28px,6vw,40px); }
.spotify-card p { font-size:16px; line-height:1.6; }
.spotify-card [hidden] { display:none !important; }
.spotify-actions { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.spotify-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 20px; border:1px solid var(--stroke-elements); border-radius:24px; font-size:16px; }
.spotify-actions [data-spotify-app] { background:var(--t-accent); color:var(--t-opp-bright); }
.spotify-card .spotify-note, .spotify-card [data-spotify-help] { font-size:14px; }
.spotify-home { display:inline-flex; align-items:center; min-height:44px; font-size:16px; }
html { touch-action:manipulation; }
@media (max-width:768px) {
  .creations-grid { grid-template-columns:1fr; }
  .personal-site { zoom:1; }
  .headline__title { overflow-wrap:anywhere; }
  .changing-text { min-height:120px; }
}
/* The original had a 360px minimum body and a 384px bottom bar.
   Preserve its geometry above that, make smaller phones usable. */
@media (max-width:389px) {
  body.personal-site { min-width:0; }
  .content { min-width:0; }
  .header { width:calc(100% - 16px); }
  .header__navigation, .menu, .menu__list { width:100%; }
  .menu__item { flex:1; min-width:0; margin:0; }
  .menu__link { margin:auto; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}