/* ==========================================================================
   MODERN CSS RESET
   ========================================================================== */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* ==========================================================================
   GLOBAL VARIABLES & THEMES
   ========================================================================== */
:root {
  --background-color: hsl(30, 8%, 97%);
  --background-color-alt: hsl(30, 6%, 91%);
  --background-color-input: hsl(30, 6%, 99%);
  --accent-color: #F97316;
  --text-color: hsl(20, 8%, 12%);
  --text-color-alt: hsl(20, 5%, 28%);
  --text-color-muted: hsl(20, 4%, 40%);

  --error-color: #D93025;
  --success-color: #188038;
  --warning-color: #E37400;

  --font-serif: "Merriweather", Georgia, serif;
  --font-sans: "NotoSans", Arial, sans-serif;


  --layout-max-width: clamp(50rem, 90vw, 90rem);
  --layout-padding: clamp(0.5rem, 4vw, 3rem);
  --layout-gap: clamp(0.5rem, 2vw, 2.5rem);
  --layout-breakpoint-sm: 40rem;
  --layout-breakpoint-md: 40rem;
  --layout-breakpoint-lg: 64rem;

  --button-radius: clamp(0.5rem, 1vw, 1rem);

  /* Typoskala (Utopia-Methode: Minor Third → Major Third, 320px → 1440px)
     step--1 → Captions / Kleinsttext
     step-0  → Fließtext
     step-1  → h4
     step-2  → h3
     step-3  → h2
     step-4  → h1 */
  --step--1: clamp(0.833rem, calc(0.83rem + 0.02vw),  0.9rem);
  --step-0:  clamp(1rem,     calc(0.96rem + 0.18vw),  1.125rem);
  --step-1:  clamp(1.2rem,   calc(1.14rem + 0.29vw),  1.406rem);
  --step-2:  clamp(1.44rem,  calc(1.35rem + 0.45vw),  1.758rem);
  --step-3:  clamp(1.728rem, calc(1.59rem + 0.67vw),  2.197rem);
  --step-4:  clamp(2.074rem, calc(1.88rem + 0.96vw),  2.747rem);
}

/* Dark Mode */
html.dark {
  --background-color: hsl(20, 5%, 8%);
  --background-color-alt: hsl(20, 4%, 13%);
  --background-color-input: hsl(20, 4%, 11%);
  --text-color: hsl(30, 6%, 93%);
  --text-color-alt: hsl(30, 4%, 78%);
  --text-color-muted: hsl(25, 4%, 55%);
}

/* ==========================================================================
   FONT-FACES & BASE TYPOGRAPHY
   ========================================================================== */
@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/Merriweather.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-variation-settings: "opsz" 12, "wdth" 100, "wght" 400;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/Merriweather-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-variation-settings: "opsz" 12, "wdth" 100, "wght" 400;
  font-display: swap;
}

@font-face {
  font-family: 'NotoSans';
  src: url('/assets/fonts/NotoSans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-display: swap;
}

@font-face {
  font-family: 'NotoSans';
  src: url('/assets/fonts/NotoSans-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-display: swap;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { font-size: var(--step-0); }

body {
  line-height: 1.5;
  font-family: var(--font-sans);
  color: var(--text-color);
  background-color: var(--background-color);
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  line-height: 1.1;
  font-weight: 900;
  margin-block-start: calc(var(--layout-padding) * 2);
}

h4 {
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1.1;
  font-weight: 700;
}

em {
  font-family: var(--font-serif);
  font-style: italic;
}

strong {
  font-weight: 600;
}

del {
text-decoration: line-through;
}


h1 {
  max-width: 15ch;
}

h2,
h3 {
  max-width: 30ch;
}

p {
  max-width: 60ch;
  text-align: left;
  text-wrap: pretty;
}

a {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  color: var(--text-color);
  transition: color 0.2s ease;
}


a:hover,
a:focus,
a:active {
  text-decoration: underline;
  text-underline-offset: 0.35rem;
}



a[href^="http"]:not([href*="tomasik.xyz"])::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url('/img/external-link.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

a[href^="http"]:not([href*="tomasik.xyz"]) {
  padding-inline-end: 1em;
  text-decoration: underline;
}



/* ==========================================================================
   SKIP LINK
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background-color: var(--accent-color);
  color: #fff;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  border-radius: var(--button-radius);
}

.skip-link:focus {
  top: 1rem;
  text-decoration: none;
}

/* ==========================================================================
   COMPOSITION (High-level Page Layout)
   ========================================================================== */
main {
  flex: 1;
}

.wrapper {
  display: flex;
  flex-direction: column;
  max-width: var(--layout-max-width);
  min-height: 100vh;
  padding-inline: var(--layout-padding);
  padding-block-start: var(--layout-padding);
  margin: 0 auto;
}

.site-header {
  display: grid;
  grid-template-areas: "site-header-logo site-header-logo"
                        "site-header-tag site-header-tag"
                        "site-header-byline site-nav-controls"
                        "site-nav-list site-nav-list"
                        "site-nav-list site-nav-list";
  grid-template-columns: 1fr;
  gap: var(--layout-padding);
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color-alt);
  padding: var(--layout-padding);
  margin-block-start: calc(var(--layout-padding)*2);
}

.site-footer p {
  max-width: fit-content;
  flex-wrap: wrap;
  text-align: center;
}

.album-description {
  margin-block: var(--layout-padding);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.icon {
  fill: var(--text-color);
  width: 1em;
  height: 1em;
  display: inline-block;
}

.toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark-mode-toggle {
  display: none;
}

.toggle-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 4rem;
  height: 2rem;
  background-color: var(--background-color-alt);
  border-radius: 2rem;
  transition: background-color 0.3s ease-in-out;
  overflow: hidden;
}

.toggle-icon {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text-color);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.moon {
  left: 0.25rem;
  transform: translateX(0);
  opacity: 1;
}

.sun {
  right: 0.25rem;
  transform: translateX(-2rem);
  opacity: 0;
}

.dark-mode-toggle:focus-visible + .toggle-label {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.dark-mode-toggle:checked + .toggle-label {
  background-color: var(--text-color-muted);
}

.dark-mode-toggle:checked + .toggle-label::before {
  transform: translateX(-2rem);
  background-color: var(--text-color);
}

.dark-mode-toggle:checked + .toggle-label .moon {
  transform: translateX(2rem);
  opacity: 0;
}

.dark-mode-toggle:checked + .toggle-label .sun {
  transform: translateX(0);
  opacity: 1;
}

.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: hsl(from var(--background-color-alt) h s l / 0.75);
  color: var(--text-color);
  border: 2px solid var(--text-color-muted);
  border-radius: 50%; 
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 1000;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background-color: var(--accent-color);
  color: var(--background-color);
  border-color: var(--text-color);
}

.scroll-to-top:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* ==========================================================================
   GLOBAL FOCUS STYLES
   ========================================================================== */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.polaroid-album:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 4px;
  border-radius: 0.75rem;
}

.lqip-anchor:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* ==========================================================================
   BLOCKS (Components)
   ========================================================================== */
.site-header-logo {
  grid-area: site-header-logo;
  display: flex;
  align-items: center;
  width: minmax(100px, 20vw);
}

.ju-initial {
  display: flex;
  width: clamp(4rem, 15vw, 8rem);
  height: clamp(4rem, 15vw, 8rem);
  border-radius: 50%;
  background-color: var(--accent-color);
  color: var(--background-color);
  align-self: center;
  justify-content: center;
  margin: 0 auto;
 }

 .ju-initial-svg path {
  fill: var(--text-color);
  transition: fill 0.3s ease-in-out;
}

.site-header-tag {
  grid-area: site-header-tag;
  font-family: var(--font-sans-italic);
  color: var(--text-color-alt);
  display: flex;
  align-items: center;
}
.site-header-byline {
  grid-area: site-header-byline;
  font-family: var(--font-sans-italic);
  color: var(--text-color-alt);
  display: flex;
  align-items: center;
  justify-self: start;
}

.site-nav-list {
  grid-area: site-nav-list;
  display: flex;
  align-items: center;
}

.site-nav-list ul {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 200px;
  list-style-type: none;
  justify-content: space-between;
  padding: 0;
  gap: calc(var(--layout-gap, 1rem) * 2.5);
}

.site-nav-list ul li {
  font-weight: 500;
}


.site-nav-list a.active {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.35rem;
  text-decoration-thickness: 0.175rem;
  text-decoration-color: var(--accent-color);
}

.site-nav-controls {
  grid-area: site-nav-controls;
  display: flex;
  align-items: center;
  justify-self: end;
  justify-content: end;
  width: 100%;
}

.site-nav-controls ul {
  color: var(--text-color-alt);
  display: flex;
  gap: var(--layout-gap);
  justify-content: flex-end;
  list-style-type: none;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  padding: 1rem;
  margin-block: var(--layout-gap);
}

.masonry-grid {
  column-width: 320px;
  column-gap: var(--layout-gap);
  margin-block-start: calc(var(--layout-gap) * 2); 
}

.masonry-grid .masonry-item {
  break-inside: avoid;
  margin-block-end: var(--layout-gap);
  display: block;
}

.masonry-grid .masonry-item img {
  width: 100%;
  height: auto; 
  display: block;
}

.masonry-grid a.masonry-item {
  text-decoration: none;
  text-underline-offset: 0;
  display: block;
  line-height: 0;
  position: static; 
}

.polaroid-album {
  text-decoration: none;
  color: var(--text-color);
  display: block;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 0.75rem;
}

.polaroid-album:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.polaroid-album figure {
  margin: 0;
  background-color: var(--background-color-input);
  padding: 1rem;
  padding-bottom: 3.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  position: relative;
  border-radius: 0.75rem;
}

.polaroid-album figcaption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 800;
}

.lqip-container {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  background-color: var(--dominant-color);
}

.lqip-anchor {
  display: block;
  break-inside: avoid;
  margin-block-end: var(--layout-gap);
  text-decoration: none;
  line-height: 0;
  transition: transform 0.2s ease-in-out;
}

.lqip-anchor:hover {
  transform: scale(1.03);
}

.lqip-anchor::before {
  content: none;
}

.polaroid-album .lqip-container {
  aspect-ratio: 1 / 1;
}
.masonry-grid .lqip-container {
  aspect-ratio: var(--aspect-ratio);
}

.polaroid-album .lqip-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lqip-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 400ms ease-in-out;
}

.lqip-image.loaded {
  opacity: 1;
}

.masonry-grid .lqip-anchor {
  display: block;
  break-inside: avoid;
  margin-block-end: var(--layout-gap);
  text-decoration: none;
  line-height: 0;
}

.masonry-grid .lqip-anchor:hover {
  transform: scale(1.03);
}

.masonry-grid .lqip-anchor::before {
  content: none;
}

.album-nav {
  margin-block: calc(var(--layout-gap) * 2);
}

.album-nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  gap: calc(var(--layout-gap, 1rem) * 2);
}

.album-nav ul li {
  font-weight: 500;
}

.album-nav__prev,
.album-nav__next {
  flex: 1 1 0;
  min-width: 0;
}

.album-nav__next {
  text-align: right;
}

.album-nav__overview {
  flex: 0 0 auto;
}

.album-nav__overview svg {
  vertical-align: -0.15em;
}

/* ==========================================================================
    EXCEPTIONS
    ========================================================================== */

.masonry-grid a.lqip-anchor::before {
  content: none;
}

.masonry-grid a.lqip-anchor:hover,
.masonry-grid a.lqip-anchor:focus {
  transform: scale(1.03);
  transition: transform 0.2s ease-in-out;
}

.masonry-grid a.lqip-anchor:hover::before,
.masonry-grid a.lqip-anchor:focus::before {
    transform: scaleX(0); 
    background-color: transparent; 
}

.album-grid a.polaroid-album::before {
  content: none;
}

/* ==========================================================================
   LIGHTBOX OVERRIDES (baguetteBox)
   ========================================================================== */
#baguetteBox-overlay {
  background-color: var(--background-color) !important;
}

#baguetteBox-overlay .full-image figure {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  margin: 0 !important;
  max-width: 65vw !important;
  max-height: 80vh !important;
  height: auto !important;
  vertical-align: middle !important;
}

#baguetteBox-overlay .full-image img {
  order: 1 !important;
  max-width: 100% !important;
  max-height: 70vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  box-shadow: none !important;
}

#baguetteBox-overlay .full-image figcaption {
  order: 2 !important;
  position: static !important;
  display: block !important;
  max-width: 66% !important;
  margin: 1.25rem 0 0 !important;
  padding: 0 !important;
  text-align: right !important;
  white-space: normal !important;
  background: none !important;
  color: var(--text-color-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
}

#baguetteBox-overlay .full-image .baguetteBox-spinner {
  order: 1 !important;
}

.baguetteBox-button {
  background-color: transparent !important;
}

.baguetteBox-button svg polyline,
.baguetteBox-button svg line {
  stroke: var(--text-color) !important;
}

.baguetteBox-button:focus,
.baguetteBox-button:hover {
  background-color: transparent !important;
}

.baguetteBox-button:focus-visible {
  outline: none !important;
}

.baguetteBox-button#close-button {
  top: 1.5rem !important;
  right: 1.5rem !important;
}

@media (max-width: 40rem) {
  #baguetteBox-overlay .full-image figure {
    max-width: 85vw !important;
    max-height: 75vh !important;
  }

  #baguetteBox-overlay .full-image img {
    max-height: 65vh !important;
  }
}

/* ==========================================================================
   VIEW TRANSITIONS
   ========================================================================== */
@view-transition {
  navigation: auto;
}

.ju-initial {
  view-transition-name: site-logo;
}

::view-transition-old(site-logo),
::view-transition-new(site-logo) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(site-logo),
  ::view-transition-new(site-logo) {
    animation-duration: 0.01ms;
  }
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes intro-fade-up {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes intro-scale {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   SCROLL-TRIGGERED ANIMATIONS (animation-timeline: view())
   ========================================================================== */
main h1,
main h2,
main h3,
main p,
.site-footer {
  animation: fade-up ease both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

.polaroid-album {
  animation: fade-up ease both;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

.masonry-grid .lqip-anchor {
  animation: fade-up ease both;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}

/* ==========================================================================
   PAGE-LOAD INTRO ANIMATIONS
   ========================================================================== */
.site-header-logo {
  animation: intro-scale 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.site-header-tag {
  animation: intro-fade-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

.site-header-byline {
  animation: intro-fade-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

.site-nav-list {
  animation: intro-fade-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

.site-nav-controls {
  animation: intro-fade-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s both;
}

/* ==========================================================================
   ACCESSIBILITY: REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* Desktop */
@media (min-width: 64rem) {
  .site-header {
    grid-template-areas: "site-header-logo site-header-tag site-header-byline"
                          "site-nav-list site-nav-list site-nav-controls";
    grid-template-columns: 1fr 1fr 1fr;
  }

.site-nav-list ul li {
display: block;
padding: 0;
}

  .site-header-byline {
    justify-self: end;
  }

  .site-nav-controls {
    justify-content: end;
  }
  
}

/* Tablet */
@media (min-width: 40rem) and (max-width: 64rem) {
  .site-header {
    grid-template-areas: "site-header-logo site-header-logo"
                          "site-header-tag site-header-tag"
                          "site-header-byline site-nav-controls"
                          "site-nav-list site-nav-list";
    grid-template-columns: 1fr 1fr;
  }

  .site-header-byline {
    justify-self: start;
  }

  .site-nav-controls {
    justify-self: end;
  }
}