album.css

* { box-sizing: border-box }
a { text-underline-offset: 1pc }
[rel] { font-size: 1.618em }
[href^="#"] { text-decoration-style: dotted }
:focus { outline: thick groove }
.fun { font: unset }

html {
  font-family: sans-serif;
  font-size: max(26px, 2vmax + 2vmin);
  line-height: 1.618;
}

body {
  margin: 0;
  overflow-wrap: anywhere;
}

article {
  align-items: flex-start;
  contain: layout;
  display: flex;
  flex-flow: column;
  padding: 10vh 10vw;
}

aside { 
  align-items: flex-start;
  contain: layout;
  display: flex;
  flex-flow: column;
  gap: 1ex;
  margin-bottom: 1em;
}

footer {
  margin-block: 3em 1em;
}

nav {
  contain: layout;
  display: flex;
  gap: 1ch;
  margin-bottom: 1em;
}

p { 
  margin: 0;
  padding: 1ch 1ex;
}

h1 {
  font-size: 2.618rem;
  margin: auto auto 1ex;
}

hr {
  all: unset;
  display: block;
  margin-block: 1em;
}

@media (orientation: portrait) {
  h1 {
    margin-block-end: 10vw;
    margin-top: 0;
    margin-bottom: 2ch;
    writing-mode: vertical-rl;
  }
}