@font-face {
  font-family:AlbumSans;
  src:local('Arial')
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:25px
}
body {
  margin:0;
  background:#f4f1e9;
  color:#203330;
  font-family:AlbumSans,Arial,sans-serif;
  font-size:14px;
  line-height:1.5
}
button,input,select {
  font:inherit
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.5;
  cursor:default
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
button:focus-visible,a:focus-visible {
  outline:3px solid #e88a55;
  outline-offset:5px
}
input:focus-visible,select:focus-visible {
  outline:2px solid #cd7043;
  outline-offset:2px
}
[hidden] {
  display:none!important
}
.landscape {
  position:absolute;
  inset:0 0 auto;
  height:780px;
  background:linear-gradient(90deg,rgba(15,35,34,.96) 3%,rgba(15,35,34,.78) 43%,rgba(15,35,34,.42)),linear-gradient(0deg,#172d2b00,#172d2b33),url('demo/summit.jpg') center 43%/cover;
  z-index:-2
}
.background-video {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:780px;
  object-fit:cover;
  z-index:-3
}
.grain {
  position:absolute;
  inset:0 0 auto;
  height:780px;
  pointer-events:none;
  opacity:.13;
  z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.35' d='M0 0h180v180H0z'/%3E%3C/svg%3E")
}
.topbar {
  max-width:1440px;
  margin:auto;
  height:105px;
  padding:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#f8f5ed;
  border-bottom:1px solid #ffffff20
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:20px;
  letter-spacing:3.2px;
  font-weight:700;
  line-height:1.2
}
.brand svg {
  width:43px
}
.brand-sub {
  display:block;
  font-size:8px;
  letter-spacing:2.7px;
  font-weight:400;
  margin-top:7px
}
.topbar-right {
  display:flex;
  align-items:center;
  gap:27px
}
.trip-date {
  letter-spacing:2px;
  font-size:10px
}
.private-badge {
  font-size:10px;
  display:flex;
  gap:8px;
  align-items:center;
  border:1px solid #ffffff30;
  border-radius:50px;
  padding:8px 12px;
  color:#e6e9de
}
.private-badge>span {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#c2d8b5
}
.icon-button {
  border:0;
  background:none;
  display:grid;
  place-items:center;
  font-size:25px;
  min-width:40px;
  min-height:40px
}
.logout-form {
  margin-left:-15px
}
.logout {
  color:#e6e9de
}
.hero {
  max-width:1440px;
  min-height:595px;
  position:relative;
  display:flex;
  align-items:center;
  padding:54px 8% 82px;
  color:#f5f1e8;
  overflow:hidden
}
.hero-copy {
  z-index:1
}
.eyebrow {
  font-size:9px;
  letter-spacing:2.4px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 25px
}
.tiny-line {
  height:1px;
  width:26px;
  background:#dd966d
}
.hero h1,.login-story h1 {
  font-family:Arial,sans-serif;
  font-weight:400;
  letter-spacing:-4px;
  line-height:1.02;
  font-size:clamp(70px,7.7vw,110px);
  margin:0 0 28px;
  position:relative
}
.hero h1 em,.login-story h1 em {
  font-weight:400;
  color:#e9b08d
}
.hero-star {
  position:absolute;
  color:#edab78;
  font-size:72px;
  left:440px;
  top:40px;
  transform:rotate(-12deg)
}
.hero-description {
  font-size:13px;
  line-height:1.9;
  color:#d1d6cc
}
.explore-link {
  display:flex;
  align-items:center;
  gap:22px;
  width:max-content;
  font-size:11px;
  margin-top:30px
}
.explore-link span {
  border:1px solid #ffffff50;
  border-radius:50%;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  font-size:16px
}
.hero-postcard {
  margin-left:auto;
  flex-shrink:0;
  position:relative;
  width:260px;
  background:#f4f0e5;
  padding:13px 13px 50px;
  transform:rotate(8deg);
  box-shadow:10px 24px 60px #07161570;
  margin-right:20px;
  margin-top:14px
}
.hero-postcard img {
  width:100%;
  height:245px;
  object-fit:cover;
  display:block;
  filter:saturate(.6)
}
.hero-postcard>span {
  position:absolute;
  bottom:13px;
  width:calc(100% - 26px);
  text-align:center;
  color:#3c4c47;
  font:italic 17px Arial,sans-serif,serif
}
.postcard-tape {
  position:absolute;
  top:-18px;
  left:35%;
  width:95px;
  height:30px;
  background:#d9d4b6b3;
  z-index:1;
  transform:rotate(-6deg);
  clip-path:polygon(2% 0,98% 2%,95% 20%,100% 43%,95% 64%,99% 96%,0 100%,4% 70%,0 50%,5% 25%)
}
.postcard-stamp {
  position:absolute;
  bottom:4px;
  right:-35px;
  width:95px;
  height:95px;
  border:1px solid #e1af7e;
  border-radius:50%;
  transform:rotate(-20deg);
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  font-size:8px;
  line-height:1.8;
  letter-spacing:1px;
  color:#f0c59e;
  background:#18342d55
}
.postcard-stamp strong {
  font:20px Arial,sans-serif
}
.hero-location {
  position:absolute;
  right:5%;
  bottom:27px;
  font-size:8px;
  letter-spacing:1.6px;
  display:flex;
  gap:28px;
  color:#c7d1c4
}
.album {
  padding:62px 6% 0;
  background:#f4f1e9;
  position:relative;
  min-height:700px
}
.album:before {
  content:'';
  position:absolute;
  top:-9px;
  height:10px;
  left:0;
  right:0;
  background:#f4f1e9;
  clip-path:polygon(0 40%,5% 60%,10% 20%,14% 60%,20% 20%,25% 50%,30% 30%,35% 60%,40% 10%,45% 40%,50% 20%,55% 40%,60% 10%,65% 30%,70% 60%,75% 20%,80% 60%,85% 20%,90% 50%,95% 20%,100% 50%,100% 100%,0 100%)
}
.album-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.muted {
  color:#7d857a
}
.album-topline .eyebrow {
  font-size:8px;
  margin-bottom:12px
}
.album h2 {
  font:30px Arial,sans-serif,serif;
  letter-spacing:-.7px;
  margin:0
}
.album h2 span {
  color:#7e877c
}
.button {
  border:0;
  padding:14px 21px;
  display:flex;
  gap:28px;
  align-items:center;
  justify-content:center;
  font-weight:500;
  font-size:11px;
  border-radius:3px;
  transition:background .2s,transform .2s
}
.button:hover:not(:disabled) {
  transform:translateY(-2px)
}
.button-orange {
  background:#e59164;
  color:#20332d
}
.button-orange:hover {
  background:#eca57f
}
.plus {
  font-size:22px;
  font-weight:300;
  line-height:1
}
.button-dark {
  background:#233d35;
  color:#f6f3e8
}
.button-dark:hover {
  background:#345346
}
.button-dark>span {
  margin-left:auto
}
.album-toolbar {
  margin-top:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #d6d8cc;
  padding-bottom:18px;
  gap:12px
}
.day-filters {
  display:flex;
  gap:6px;
  overflow:auto;
  padding:3px
}
.filter {
  border:0;
  background:transparent;
  font-size:11px;
  border-radius:3px;
  padding:9px 13px;
  white-space:nowrap;
  color:#788073
}
.filter.active {
  color:#f6f2e8;
  background:#2d453b
}
.filter>span {
  display:inline-grid;
  place-items:center;
  margin-left:9px;
  background:#ffffff23;
  border-radius:3px;
  font-size:9px;
  min-width:19px;
  padding:0 4px
}
.sort-label {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  color:#7c8478;
  white-space:nowrap
}
.sort-label select {
  border:0;
  background:transparent;
  color:#364d3d;
  font-size:10px;
  max-width:135px
}
.album-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  color:#7e8578;
  margin:24px 0 32px
}
.handwritten {
  font:italic 16px Arial,sans-serif,serif;
  color:#87917d
}
.handwritten span {
  display:inline-block;
  font-size:27px;
  transform:rotate(-10deg);
  margin-left:8px
}
.photo-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:45px 38px;
  max-width:1280px;
  margin:auto;
  padding:5px 14px
}
.polaroid {
  display:block;
  border:0;
  background:#fffdf6;
  box-shadow:0 2px 3px #223c2810,0 9px 18px #27332313;
  padding:12px 12px 0;
  width:100%;
  transform:rotate(var(--rotation));
  transition:transform .35s,box-shadow .35s;
  position:relative;
  text-align:left;
  align-self:start;
  animation:appear .6s both;
  animation-delay:var(--delay)
}
.polaroid:nth-child(3n+2) {
  margin-top:23px
}
.polaroid:nth-child(3n+3) {
  margin-top:4px
}
.polaroid:hover {
  transform:translateY(-8px) rotate(0);
  box-shadow:0 13px 30px #27332327;
  z-index:2
}
.photo-window {
  overflow:hidden;
  aspect-ratio:1.12;
  background:#dce0d6;
  position:relative
}
.photo-window img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .7s;
  filter:saturate(.8)
}
.polaroid:hover img {
  transform:scale(1.04)
}
.photo-index {
  position:absolute;
  top:12px;
  left:12px;
  color:#fff;
  font-size:8px;
  letter-spacing:1px;
  text-shadow:0 1px 5px #0007
}
.photo-expand {
  opacity:0;
  position:absolute;
  bottom:12px;
  right:12px;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f4f1e9d9;
  font-size:17px;
  transition:opacity .2s
}
.polaroid:hover .photo-expand {
  opacity:1
}
.polaroid-caption {
  padding:18px 7px 16px;
  min-height:94px
}
.polaroid-caption p {
  font:italic 17px Arial,sans-serif,serif;
  margin:0 0 12px;
  line-height:1.35;
  color:#42503f
}
.polaroid-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.6px;
  color:#8c9083;
  gap:8px
}
.polaroid-meta>span:last-child {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.polaroid:nth-child(5n+2):before {
  content:'';
  position:absolute;
  top:-12px;
  left:38%;
  height:25px;
  width:77px;
  background:#d7d5b78f;
  z-index:1;
  transform:rotate(-8deg);
  clip-path:polygon(3% 0,100% 3%,96% 33%,100% 62%,96% 100%,0 96%,3% 66%,0 30%)
}
.empty-state {
  text-align:center;
  padding:80px 10px
}
.empty-state>span {
  font-size:35px;
  color:#dc8c60
}
.empty-state h3 {
  font:26px Arial,sans-serif
}
.empty-state p {
  color:#7d857a
}
.text-button {
  border:0;
  background:none;
  padding:10px 0;
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:4px
}
.album-end {
  padding:70px 0 56px;
  text-align:center
}
.album-end>span:first-child {
  color:#8b9a82;
  font-size:30px
}
.album-end p {
  font:italic 24px Arial,sans-serif,serif;
  margin:9px 0
}
.album-end>span:last-child {
  font-size:7px;
  letter-spacing:2px;
  color:#969c8b
}
.footer {
  border-top:1px solid #d6d8cc;
  margin:0 6%;
  padding:25px 0 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  color:#848c7b;
  gap:15px
}
.footer-brand {
  font-size:12px;
  color:#354a3a;
  font-weight:600;
  letter-spacing:1.3px
}
.footer-brand span {
  font-weight:400;
  font-size:10px;
  color:#9ba18d
}
.footer>span {
  font-size:7px;
  letter-spacing:1px
}
.orange {
  color:#e69a6b;
  margin-left:8px;
  font-size:19px
}
.footer p {
  font-family:Arial,sans-serif;
  font-style:italic;
  font-size:13px
}
.login-page {
  min-height:100vh;
  background:#172d2b;
  color:#f5f1e8;
  display:flex;
  flex-direction:column
}
.login-page .landscape,.login-page .grain,.login-page .background-video {
  height:100vh;
  min-height:820px
}
.login-main {
  width:100%;
  max-width:1440px;
  margin:auto;
  flex:1;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:80px;
  padding:80px 8% 100px;
  align-items:center
}
.login-story h1 {
  font-size:clamp(60px,6.1vw,87px);
  letter-spacing:-3px
}
.login-story .eyebrow {
  font-size:8px;
  letter-spacing:1.8px
}
.altitude {
  font-size:8px;
  letter-spacing:2px;
  margin-top:36px;
  color:#b7c8b6
}
.altitude span {
  font-size:25px;
  margin-right:13px;
  vertical-align:middle
}
.login-card {
  background:#f5f1e7;
  color:#293f34;
  padding:36px 32px 28px;
  transform:rotate(1deg);
  box-shadow:6px 15px 50px #0003;
  max-width:410px;
  position:relative
}
.card-note {
  position:absolute;
  top:-21px;
  left:28px;
  font:italic 18px Arial,sans-serif;
  color:#edbd95;
  transform:rotate(-6deg)
}
.lock-illustration {
  font-size:47px;
  line-height:1.2;
  color:#cf8d64
}
.login-card h2 {
  font:27px Arial,sans-serif;
  letter-spacing:-.6px;
  margin:17px 0 12px
}
.login-card>p {
  font-size:12px;
  color:#7e8778;
  line-height:1.8
}
.login-card form {
  margin-top:25px
}
.login-card label {
  display:block;
  font-size:10px;
  margin-bottom:8px
}
.login-card input {
  width:100%;
  background:#fffdf8;
  border:1px solid #d6d9cb;
  border-radius:3px;
  padding:13px 12px;
  font-size:12px
}
.login-card .button {
  width:100%;
  margin-top:13px
}
.login-footnote {
  display:block;
  margin-top:26px;
  color:#939b88;
  font-size:8px;
  text-align:center
}
.login-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:20px 5% 30px;
  font-size:8px;
  letter-spacing:1.2px;
  color:#c0ccbb
}
.login-footer>span:last-child {
  font-family:Arial,sans-serif;
  font-style:italic;
  letter-spacing:0;
  font-size:13px
}
.form-error {
  font-size:11px;
  color:#a43e2e
}
.upload-dialog {
  border:0;
  border-radius:5px;
  background:#f6f3eb;
  color:#2d4235;
  max-width:600px;
  width:calc(100% - 32px);
  max-height:92dvh;
  padding:30px;
  box-shadow:0 20px 100px #0005
}
.upload-dialog::backdrop {
  background:#10221bd9;
  backdrop-filter:blur(7px)
}
.dialog-top {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.dialog-top .eyebrow {
  margin:0;
  font-size:8px
}
.close-dialog {
  margin:-15px -12px 0 0;
  font-size:28px
}
.upload-dialog h2 {
  font:34px Arial,sans-serif;
  letter-spacing:-1px;
  margin:15px 0 10px
}
.upload-dialog h2 em {
  color:#b8764c
}
.dialog-intro {
  font-size:11px;
  color:#85907d;
  margin:0 0 24px
}
.dropzone {
  border:1px dashed #aeb7a2;
  border-radius:4px;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:24px 12px;
  cursor:pointer;
  background:#eeeee3
}
.dropzone.dragging {
  background:#e4e9d7;
  border-color:#405d42
}
.drop-icon {
  font-size:28px;
  color:#768d6d
}
.dropzone strong {
  font-size:13px;
  font-weight:500;
  margin:7px 0
}
.dropzone>span:not(.drop-icon) {
  font-size:11px;
  color:#7d8a72
}
.dropzone small {
  font-size:9px;
  color:#99a08f;
  margin-top:12px
}
.dropzone input {
  width:100%;
  font-size:10px;
  margin-top:12px;
  max-width:265px
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:20px
}
.form-row label,.caption-label {
  font-size:10px;
  display:block
}
.optional {
  font-size:8px;
  color:#98a08e;
  margin-left:4px
}
.form-row input,.form-row select,.caption-label input {
  display:block;
  width:100%;
  margin-top:7px;
  padding:10px;
  border:1px solid #d6d9cb;
  background:#fffdf8;
  color:#3c503d;
  border-radius:3px;
  font-size:11px
}
.caption-label {
  margin-top:16px
}
.upload-hint {
  font-size:9px;
  color:#8a9580;
  line-height:1.7;
  margin:20px 0 0
}
.upload-actions {
  display:flex;
  justify-content:flex-end;
  gap:25px;
  margin-top:22px
}
.upload-queue {
  margin-top:20px;
  max-height:210px;
  overflow:auto
}
.queue-item {
  font-size:10px;
  border-bottom:1px solid #dce0d2;
  padding:11px 0
}
.queue-top {
  display:flex;
  justify-content:space-between;
  gap:12px
}
.queue-name {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:65%
}
.queue-message {
  color:#88957c
}
.queue-item.error .queue-message {
  color:#a34b35
}
.progress-track {
  height:3px;
  background:#e0e3d7;
  margin-top:8px
}
.progress-bar {
  height:3px;
  background:#c98a62;
  transition:width .15s
}
.queue-item.done .progress-bar {
  background:#79966f
}
.queue-cancel {
  border:0;
  background:transparent;
  text-decoration:underline;
  font-size:9px;
  padding:0;
  margin-top:7px;
  color:#8c795f
}
.lightbox {
  position:fixed;
  inset:0;
  border:0;
  background:#10251ef5;
  color:#faf6ec;
  width:100vw;
  max-width:none;
  height:100dvh;
  max-height:none;
  padding:60px 80px 40px;
  overflow:hidden
}
.lightbox::backdrop {
  background:#10251e
}
.lightbox[open] {
  display:flex;
  align-items:center;
  justify-content:center
}
.lightbox figure {
  margin:0;
  max-width:1100px;
  display:flex;
  flex-direction:column;
  max-height:100%;
  min-height:0
}
.lightbox figure>img {
  width:auto;
  max-width:100%;
  max-height:calc(100dvh - 190px);
  object-fit:contain;
  min-height:0
}
.lightbox figcaption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding:17px 0
}
.lightbox figcaption p {
  font:italic 21px Arial,sans-serif;
  margin:0 0 6px
}
.lightbox figcaption span {
  font-size:10px;
  color:#a6b9a4
}
.lightbox-close {
  position:absolute;
  right:20px;
  top:15px;
  font-size:35px
}
.lightbox-prev {
  position:absolute;
  left:12px;
  top:45%
}
.lightbox-next {
  position:absolute;
  right:12px;
  top:45%
}
#lightbox-counter {
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:#b2c1ad
}
.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  background:#2d493a;
  color:#f8f3e8;
  border:1px solid #63785c;
  padding:14px 24px;
  max-width:90vw;
  border-radius:4px;
  font-size:12px;
  z-index:20;
  box-shadow:0 10px 30px #0002
}
.noscript {
  background:#f8ecda;
  color:#543c27;
  padding:25px;
  text-align:center
}
@keyframes appear {
  from {
    opacity:0;
    translate:0 20px
  }
  to {
    opacity:1;
    translate:0 0
  }
}
@media(min-width:1500px) {
  .album {
    padding-left:max(6%,calc((100vw - 1280px)/2));
    padding-right:max(6%,calc((100vw - 1280px)/2))
  }
}
@media(max-width:1050px) {
  .hero {
    padding-left:6%;
    padding-right:6%;
    min-height:570px
  }
  .hero h1 {
    font-size:87px
  }
  .hero-star {
    left:350px;
    font-size:53px
  }
  .hero-postcard {
    width:220px;
    margin-right:0
  }
  .hero-postcard img {
    height:215px
  }
  .photo-grid {
    gap:35px 26px;
    padding:0 6px
  }
  .album h2 {
    font-size:26px
  }
  .polaroid-caption {
    padding:16px 3px 13px
  }
  .polaroid-caption p {
    font-size:15px
  }
  .login-main {
    gap:40px;
    padding:70px 6%
  }
  .login-story h1 {
    font-size:65px
  }
  .album-toolbar {
    align-items:flex-start
  }
  .day-filters {
    gap:2px
  }
  .filter {
    padding:8px 10px
  }
  .sort-label>span {
    display:none
  }
}
@media(max-width:760px) {
  .topbar {
    height:85px;
    padding:0 6%
  }
  .brand {
    font-size:16px;
    letter-spacing:2px
  }
  .brand svg {
    width:35px
  }
  .brand-sub {
    font-size:6px;
    letter-spacing:2px
  }
  .trip-date {
    display:none
  }
  .topbar-right {
    gap:15px
  }
  .private-badge {
    font-size:9px;
    padding:7px 10px
  }
  .hero {
    min-height:540px;
    padding:45px 7% 70px
  }
  .hero h1 {
    font-size:76px
  }
  .hero-star {
    left:300px;
    font-size:42px;
    top:15px
  }
  .hero .eyebrow {
    font-size:8px
  }
  .hero-description {
    font-size:12px
  }
  .hero-postcard {
    position:absolute;
    width:160px;
    right:-65px;
    top:235px;
    opacity:.8;
    transform:rotate(13deg)
  }
  .hero-postcard img {
    height:150px
  }
  .hero-postcard>span {
    font-size:11px;
    bottom:18px
  }
  .postcard-stamp {
    display:none
  }
  .hero-copy {
    max-width:calc(100% - 30px)
  }
  .hero-location {
    right:auto;
    left:7%;
    font-size:7px;
    gap:20px
  }
  .hero-description br {
    display:none
  }
  .hero-description {
    max-width:290px
  }
  .explore-link {
    margin-top:25px
  }
  .album {
    padding:38px 5% 0
  }
  .album-topline {
    align-items:flex-start;
    gap:20px
  }
  .album h2 {
    font-size:25px;
    max-width:220px;
    line-height:1.2
  }
  .album h2 span {
    display:block
  }
  .album-topline .eyebrow {
    font-size:6px;
    letter-spacing:1.5px
  }
  .button-orange {
    font-size:10px;
    padding:12px 13px;
    gap:8px;
    white-space:nowrap;
    margin-top:15px
  }
  .album-toolbar {
    flex-direction:column;
    align-items:stretch;
    margin-top:26px;
    gap:12px;
    padding-bottom:10px
  }
  .day-filters {
    gap:2px;
    margin:0 -5vw;
    padding:3px 5vw
  }
  .filter {
    font-size:10px;
    padding:8px 12px
  }
  .sort-label {
    justify-content:flex-end
  }
  .sort-label>span {
    display:inline
  }
  .album-meta {
    margin:20px 0 27px;
    font-size:8px
  }
  .handwritten {
    font-size:11px
  }
  .handwritten span {
    font-size:20px;
    margin:0
  }
  .photo-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 18px;
    padding:0 4px
  }
  .polaroid {
    padding:8px 8px 0
  }
  .polaroid:nth-child(3n+2),.polaroid:nth-child(3n+3) {
    margin-top:0
  }
  .polaroid:nth-child(2n) {
    margin-top:22px
  }
  .polaroid-caption {
    padding:13px 2px 12px;
    min-height:89px
  }
  .polaroid-caption p {
    font-size:14px;
    margin-bottom:10px
  }
  .polaroid-meta {
    font-size:7px;
    letter-spacing:0;
    gap:3px
  }
  .photo-window {
    aspect-ratio:.92
  }
  .photo-index {
    top:7px;
    left:7px;
    font-size:7px
  }
  .footer {
    flex-wrap:wrap;
    justify-content:center;
    padding-top:23px;
    gap:10px 25px
  }
  .footer>span {
    width:100%;
    text-align:center;
    font-size:6px
  }
  .footer p {
    margin:0
  }
  .album-end {
    padding:50px 0 35px
  }
  .login-main {
    grid-template-columns:1fr;
    gap:40px;
    padding:45px 7% 55px;
    max-width:520px
  }
  .login-story h1 {
    font-size:58px;
    letter-spacing:-2px;
    margin-bottom:20px
  }
  .login-story .eyebrow {
    font-size:7px
  }
  .login-story .hero-description {
    max-width:none
  }
  .altitude {
    display:none
  }
  .login-card {
    margin:0 5px;
    max-width:none;
    padding:25px
  }
  .login-card h2 {
    font-size:25px
  }
  .lock-illustration {
    font-size:35px
  }
  .login-footer {
    justify-content:center;
    padding:0 5% 20px
  }
  .login-footer>span:first-child {
    display:none
  }
  .login-page .landscape,.login-page .grain,.login-page .background-video {
    height:1100px
  }
  .upload-dialog {
    padding:22px
  }
  .upload-dialog h2 {
    font-size:29px
  }
  .dialog-intro {
    font-size:10px
  }
  .form-row {
    gap:10px
  }
  .form-row input,.form-row select {
    font-size:10px;
    padding:9px
  }
  .upload-hint {
    font-size:8px
  }
  .lightbox {
    padding:65px 38px 40px
  }
  .lightbox figure>img {
    max-height:calc(100dvh - 220px)
  }
  .lightbox figcaption p {
    font-size:17px
  }
  .lightbox-prev {
    left:0
  }
  .lightbox-next {
    right:0
  }
  .lightbox figcaption {
    gap:10px
  }
  .lightbox figcaption span {
    font-size:9px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .background-video {
    display:none
  }
}
.has-video .landscape {
  background:linear-gradient(90deg,rgba(15,35,34,.92) 3%,rgba(15,35,34,.72) 43%,rgba(15,35,34,.4))
}
@media(prefers-reduced-motion:reduce) {
  .has-video .landscape {
    background:linear-gradient(90deg,rgba(15,35,34,.96) 3%,rgba(15,35,34,.78) 43%,rgba(15,35,34,.42)),url('demo/summit.jpg') center/cover
  }
}
.hero-star {
  left:550px;
  font-variant-emoji:text
}
.orange {
  font-variant-emoji:text
}
@media(max-width:1050px) {
  .hero-star {
    left:420px
  }
}
@media(max-width:760px) {
  .hero-star {
    left:300px
  }
}
.topbar {
  width:100%
}
.star-icon {
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:middle
}
.hero-star .star-icon {
  display:block
}

.arrow-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -3px;
}

/* Alpine refresh: clear type, full-viewport landscape and touch-first controls. */
:root { --album-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
body,button,input,select,textarea,h1,h2,h3,.handwritten,.card-note,.polaroid-caption p,.lightbox figcaption p,.album-end p { font-family:var(--album-font); }
h1 { font-weight:750; letter-spacing:-.055em; line-height:1.02; }
h1 em,h2 em { font-style:normal; font-weight:400; }
body { overflow-x:clip; }
body.has-video { background:#102e47; isolation:isolate; }
.has-video .background-video,.has-video .landscape,.has-video .grain { position:fixed;inset:0;width:100%;height:100vh;height:100svh; }
.has-video .background-video { object-fit:cover;object-position:50% 61%;z-index:-3; }
.has-video .landscape { z-index:-2;background:linear-gradient(90deg,rgba(6,27,46,.58),rgba(6,27,46,.08) 80%),linear-gradient(0deg,rgba(6,27,46,.18),transparent 65%); }
.has-video .grain { opacity:.03; }
.hero { min-height:calc(100svh - 105px);height:auto; padding-bottom:100px; }
.hero-copy { max-width:620px; }
.hero h1 { font-size:clamp(3.4rem,7vw,7.5rem); }
.album { position:relative;background:#f4f1e9; }
.footer { background:#f4f1e9;flex-wrap:wrap;gap:18px; }
.instructor-polaroids { display:flex;gap:24px;align-items:center;justify-content:center;position:relative;max-width:430px;margin:30px 0 30px auto; }
.instructor { margin:0;background:#fffdf6;padding:9px 9px 15px;width:190px;box-shadow:0 15px 40px #051e3340;transform:rotate(-5deg); }
.instructor:nth-child(2) { transform:rotate(6deg);margin-top:50px; }
.instructor img { display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%; }
.instructor figcaption { color:#203330;font-size:21px;font-weight:700;padding:10px 5px 0; }
.instructor figcaption span { display:block;font-size:11px;font-weight:500; }
.photo-window { position:relative; }
.photo-open { display:block;border:0;background:none;padding:0;width:100%;height:100%; }
.photo-window video { display:block;width:100%;height:100%;object-fit:contain;background:#10251e; }
.photo-window:has(video) .photo-expand,.photo-window:has(video) .photo-index { display:none; }
.photo-index,.photo-expand { pointer-events:none; }
.photo-details { width:100%;padding:12px 6px;margin-bottom:7px;min-height:44px;border:0;border-top:1px solid #20333015;background:transparent;font:600 13px var(--album-font);text-align:left; }
.polaroid-caption p { font-size:19px;font-weight:600;line-height:1.4;overflow-wrap:anywhere; }
.polaroid-meta { flex-wrap:wrap;gap:5px; }
button,input,select { min-height:44px; }
input,select,textarea { font-size:16px;max-width:100%; }
textarea { width:100%;border:1px solid #c9cec3;border-radius:8px;padding:12px;resize:vertical; }
.lightbox { overflow-y:auto;padding:70px 65px 45px; }
.lightbox[open] { display:block; }
.lightbox figure { max-width:950px;max-height:none;margin:auto; }
.lightbox figure>img,.lightbox figure>video { width:100%;max-height:65svh;object-fit:contain;background:#0d211c; }
.lightbox-close { position:fixed;background:#10251e;z-index:3; }
.lightbox-prev,.lightbox-next { position:fixed;background:#10251e;z-index:2; }
#lightbox-counter { position:fixed;pointer-events:none;background:#10251e;padding:4px 9px;border-radius:8px; }
.comments-panel { background:#fffdf6;color:#203330;border-radius:12px;padding:24px;margin:10px 0 30px; }
.comments-panel h3 { margin-top:0;font-size:23px; }
.comment { border-bottom:1px solid #20333020;padding:14px 0; }
.comment p { white-space:pre-wrap;overflow-wrap:anywhere; }
.comment small { display:block;color:#5b6c65; }
#comment-form { display:grid;gap:12px;margin-top:20px; }
#comment-form label { display:grid;gap:6px; }
#comment-form input { padding:10px;border:1px solid #c9cec3;border-radius:8px; }
#comment-form label span { font-size:12px;color:#64726c; }
#comment-error,#admin-error { color:#a63724; }
#admin-dialog { max-width:460px; }
#admin-dialog form { display:grid;gap:16px; }
#admin-dialog label { display:grid;gap:8px; }
#admin-close { float:right; }
@media(max-width:1000px) {
 .hero { display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding-bottom:80px; }
 .instructor-polaroids { margin:15px auto 30px; }
 .hero-copy { max-width:100%; }
}
@media(max-width:600px) {
 .topbar { height:80px;padding:0 20px; }
 .topbar-right { gap:8px; }
 .trip-date { display:none; }
 .hero { min-height:calc(100svh - 80px);padding:30px 22px 80px;display:block; }
 .hero h1 { font-size:clamp(3rem,14vw,5rem); }
 .hero-description { font-size:16px; }
 .hero-description br { display:none; }
 .instructor-polaroids { gap:18px;margin:35px auto 15px;max-width:310px; }
 .instructor { width:135px;padding:7px 7px 10px; }
 .instructor:nth-child(2) { margin-top:25px; }
 .instructor figcaption { font-size:18px; }
 .hero-location { bottom:20px; }
 .album { padding:38px 18px; }
 .album-topline { align-items:stretch;gap:18px; }
 .album-topline h2 { font-size:28px;line-height:1.2; }
 .album-toolbar { display:block; }
 .day-filters { max-width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:12px; }
 .filter { flex-shrink:0; }
 .sort-label { margin-top:10px; }
 .album-meta .handwritten { display:none; }
 .photo-grid { grid-template-columns:minmax(0,1fr);gap:26px;padding:4px 8px; }
 .polaroid,.polaroid:nth-child(2n),.polaroid:nth-child(3n+2),.polaroid:nth-child(3n+3) { margin-top:0;transform:rotate(-.7deg); }
 .polaroid:nth-child(even) { transform:rotate(.7deg); }
 .polaroid-caption p { font-size:20px; }
 .polaroid-meta { font-size:11px; }
 .upload-dialog { width:calc(100% - 20px);max-width:none;max-height:calc(100dvh - 20px);padding:22px 18px;overflow:auto; }
 .form-row { display:grid;grid-template-columns:1fr;gap:12px; }
 .upload-actions { flex-wrap:wrap;gap:12px; }
 .queue-top { flex-wrap:wrap; }
 .queue-name { max-width:100%; }
 .lightbox { padding:65px 12px 45px; }
 .lightbox-prev,.lightbox-next { top:14px;min-width:44px; }
 .lightbox-prev { left:12px; }.lightbox-next { left:64px;right:auto; }
 .lightbox figure>img,.lightbox figure>video { max-height:55svh; }
 .comments-panel { padding:18px; }
 .login-main { padding:35px 22px; }
 .login-card { width:100%;max-width:430px; }
 .login-story h1 { font-size:clamp(3rem,13vw,5rem); }
 .login-page .background-video { object-position:50% 60%; }
 .login-footer { gap:14px;flex-wrap:wrap;padding:20px; }
}
@media(prefers-reduced-motion:reduce) {
 .has-video .landscape { background:linear-gradient(90deg,#061b2e80,#061b2e20),url('background-poster.jpg') 50% 61%/cover;opacity:1; }
}

/* Readable captions and video-shaped Polaroids: no letterboxing or cropping. */
body { font-size:16px; }
.hero-description,.login-story .hero-description { font-size:18px;line-height:1.65; }
.eyebrow { font-size:13px;letter-spacing:.12em; }
.brand-sub { font-size:10px; }
.trip-date,.private-badge,.hero-location { font-size:13px; }
.button { font-size:16px;min-height:48px; }
.filter,.sort-label,.sort-label select { font-size:15px; }
.album-meta,#album-status,.polaroid-meta,.photo-index { font-size:14px;letter-spacing:.02em; }
.polaroid-caption p { font-size:22px;font-style:normal;line-height:1.4; }
.photo-details,.text-button,.explore-link { font-size:16px; }
.instructor figcaption span { font-size:14px; }
.dialog-intro,.login-card p { font-size:16px;line-height:1.6; }
.upload-hint,.dropzone small,.optional,.queue-name,.queue-message,.queue-cancel,.login-footnote,.login-footer,.footer>span,.footer p,.album-end>span { font-size:14px;line-height:1.5; }
.lightbox figcaption span,.comment small,#comment-form label span { font-size:14px; }
.comments-panel { font-size:16px; }
.photo-window:has(video) { aspect-ratio:var(--video-ratio, 4 / 3);height:auto;background:#e8e7df; }
.photo-window video { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center; }
@media(max-width:600px) {
 .album-topline { flex-direction:column; }
 .album-topline>.button { align-self:stretch; }
 .polaroid-meta { gap:8px; }
 .polaroid-meta>span:last-child { max-width:100%; }
 .instructor figcaption span { font-size:12px; }
 .private-badge { font-size:12px; }
 .hero-location { font-size:11px; }
 .brand { font-size:16px;letter-spacing:2px; }
 .brand-sub { font-size:9px;letter-spacing:1.8px; }
 .topbar { padding-inline:16px; }
 .sort-label { display:flex;flex-wrap:wrap;gap:10px; }
 .sort-label select { max-width:100%; }
}

.photo-window video { object-fit:cover; }

/* Video frames keep their native shape within a compact cinema strip. */
.polaroid.filmstrip { --video-aspect:.5625; width:min(100%, calc(320px * var(--video-aspect) + 40px)); justify-self:center; padding:18px 20px 0; background:#17221f; color:#fffdf6; transform:none; border-radius:4px; box-shadow:0 10px 26px #12271d35; }
.polaroid.filmstrip::before,.polaroid.filmstrip::after { content:""; position:absolute; top:10px; bottom:10px; width:8px; background:repeating-linear-gradient(to bottom,#e8e5d9 0 10px,transparent 10px 19px); border-radius:2px; }
.polaroid.filmstrip::before { left:5px; }
.polaroid.filmstrip::after { right:5px; }
.polaroid.filmstrip:hover { transform:translateY(-4px); }
.filmstrip .photo-window { border-radius:2px; background:#000; }
.filmstrip .photo-window video { object-fit:contain; background:#000; }
.filmstrip .polaroid-caption { padding:16px 0 10px; }
.filmstrip .polaroid-caption p { color:#fffdf6; }
.filmstrip .polaroid-meta { color:#c5cec6; flex-wrap:wrap; gap:6px; }
.filmstrip .photo-details { color:#e5eccf; border-color:#ffffff30; font-size:15px; padding:12px 0; }
.background-play { position:fixed; bottom:16px; right:16px; z-index:40; padding:12px 18px; border:1px solid #ffffff70; border-radius:30px; background:#172b24e8; color:white; font:600 15px Arial,sans-serif; cursor:pointer; }
.background-play[hidden] { display:none; }
body.background-motion-enabled .background-video { display:block; }
.polaroid.filmstrip::before,.polaroid.filmstrip::after { height:auto; transform:none; clip-path:none; }
body.background-motion-enabled .landscape { background:linear-gradient(90deg,rgba(15,35,34,.92) 3%,rgba(15,35,34,.72) 43%,rgba(15,35,34,.4)); }