*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:#141414; line-height:1.65;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif,-apple-system,"Segoe UI",Arial,sans-serif;
  background:#F7F7F8;
}
:root{
  --ink:#141414; --muted:#666; --card:#fff; --border:#e7e7e7;
  --shadow:0 10px 24px rgba(0,0,0,.08); --radius:.9rem;

  --swift-green:#5eb298; --swift-orange:#e46c32;
  --lover:#ff8db3; --evermore:#b46a3c; --folklore:#647066;
  --midnights:#0f1938; --fearless:#d0a84b; --ttpd:#2b2b2b;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s6:3rem;
  --step-0:clamp(1rem,1vw+.7rem,1.15rem);
  --step-1:clamp(1.25rem,2vw+.6rem,1.6rem);
  --step-2:clamp(1.56rem,3vw+.6rem,2rem);
  --step-3:clamp(1.95rem,4vw+.6rem,2.6rem);
}
header,main,footer{padding-inline:clamp(16px,5vw,64px)}
header{padding-block:32px 18px}
footer{padding-block:24px 48px;color:var(--muted)}
h1,h2,h3{line-height:1.25;margin:0 0 .55em}
p{margin:0 0 1em}
blockquote{margin:.75rem 0 1rem;padding-left:1rem;border-left:3px solid var(--border);color:var(--muted)}
:focus-visible{outline:2px solid var(--swift-orange);outline-offset:2px}


.site-nav{margin-top:14px;display:flex;flex-wrap:wrap;gap:.6rem 1rem}
.site-nav a{
  text-decoration:none;color:var(--ink);padding:.35rem .7rem;
  border:1px solid var(--border);border-radius:999px;font-size:.96rem;
  transition:background .15s,transform .15s
}
.site-nav a:hover{background:#fff;transform:translateY(-1px)}
a{color:var(--swift-green);text-decoration:underline;text-underline-offset:.18em;transition:color .2s,text-underline-offset .2s}
a:hover,a:focus-visible{color:var(--swift-orange);text-underline-offset:.35em;outline:none}


footer p{margin:.25rem 0}
footer .nextlink{margin-top:.25rem}
.webring{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.6rem 1rem}
.webring a{
  text-decoration:none;color:var(--ink);
  border:1px solid var(--border);padding:.3rem .6rem;border-radius:999px
}


.home .site-nav{display:none}
.home .home-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
  margin:2rem 0 1rem;
}
.home .big-link{
  display:inline-block;text-decoration:none;color:var(--ink);
  font-size:2rem;line-height:1;background:#fff;
  padding:.9rem 1.2rem;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  transition:transform .15s,box-shadow .15s
}
.home .big-link:hover,.home .big-link:focus-visible{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 14px 30px rgba(0,0,0,.1);outline:none
}


.emoji-cloud{
  margin:1rem 0 2rem;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(44px,1fr));
  gap:.75rem .9rem;justify-items:center
}
.emoji{font-size:1.9rem;line-height:1;user-select:none;opacity:.92}
.emoji--active{
  text-decoration:none;cursor:pointer;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.08));
  transition:transform .12s,filter .12s,opacity .12s
}
.emoji--active:hover,.emoji--active:focus-visible{
  transform:translateY(-2px) scale(1.1) rotate(-2deg);
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.12));outline:none
}

.twist1{transform:rotate(-8deg) scale(1.05)}
.twist2{transform:rotate(6deg) scale(0.95)}
.twist3{transform:rotate(-4deg)}
.twist4{transform:rotate(9deg) scale(1.08)}
.twist5{transform:rotate(-12deg) scale(0.97)}


.lyricbox{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(13,13,16,.75);
  align-items:center;justify-content:center;padding:4vw
}
.lyricbox:target{display:flex}


.envelope-card{
  position:relative;width:min(720px,92vw);
  border-radius:.9rem;overflow:hidden;box-shadow:var(--shadow);
  background:#fff;
}
.envelope-card .flap{
  height:86px;background:#ddd;
  clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)
}
.envelope-card .paper{
  background:#fff;padding:1.25rem 1.5rem 1.5rem;
  border:1px solid var(--border);border-top:none
}
.envelope-card h3{margin:.25rem 0 .4rem}
.envelope-card blockquote{margin:.3rem 0 .6rem;font-style:italic;color:#222}
.envelope-card .notes{color:var(--ink)}
.envelope-card .close{
  position:absolute;top:10px;right:12px;
  text-decoration:none;color:#fff;font-size:1.6rem;line-height:1;
  background:rgba(0,0,0,.28);padding:.1rem .5rem;border-radius:.4rem
}

.envelope-card.lover .flap{background:linear-gradient(135deg,#ffd1e2,#ff8db3)}
.envelope-card.evermore .flap{background:linear-gradient(135deg,#e2c9b3,#b46a3c)}
.envelope-card.folklore .flap{background:linear-gradient(135deg,#dde2de,#647066)}
.envelope-card.midnights .flap{background:linear-gradient(135deg,#20305e,#0f1938)}
.envelope-card.fearless .flap{background:linear-gradient(135deg,#f1e2b6,#d0a84b)}
.envelope-card.ttpd .flap{background:linear-gradient(135deg,#444,#1f1f1f)}

.envelope-card.lover h3{color:var(--lover)}
.envelope-card.evermore h3{color:var(--evermore)}
.envelope-card.folklore h3{color:var(--folklore)}
.envelope-card.midnights h3{color:#5ea3ff}
.envelope-card.fearless h3{color:var(--fearless)}
.envelope-card.ttpd h3{color:var(--ttpd)}

@media(max-width:520px){
  .emoji{font-size:1.6rem}
  .lyricbox{padding:5vw}
  .envelope-card .paper{padding:1rem 1.1rem}
}


.cinema{display:grid;gap:1rem;grid-template-columns:280px 1fr}
.col-caption{position:sticky;top:16px;align-self:start}
.columns{display:grid;grid-template-columns:1fr;gap:1rem}
.col{
  height:78vh;overflow-y:auto;padding:.5rem;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow)
}
.col figure{margin:0 0 .8rem}
.col img{width:100%;height:auto;display:block;border-radius:.5rem}


.lightbox{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.8);
  align-items:center;justify-content:center;padding:2vw
}
.lightbox:target{display:flex}
.lightbox figure{margin:0;max-width:min(92vw,1100px)}
.lightbox figure img{width:100%;border-radius:.5rem}
.lightbox figcaption{color:#fff;margin-top:.6rem;text-align:center}
.lightbox .close{
  position:fixed;top:16px;right:16px;text-decoration:none;
  font-size:2rem;color:#fff;background:rgba(255,255,255,.15);
  padding:.2rem .6rem;border-radius:.5rem
}


.collection-grid{column-count:3;column-gap:1rem}
.collection-grid figure{
  break-inside:avoid;display:inline-block;width:100%;margin:0 0 1rem;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:.6rem
}
.collection-grid img{width:100%;border-radius:.5rem}
.collection-grid figcaption{font-size:.95rem;color:var(--muted);margin-top:.4rem}
.collection-grid details summary{cursor:pointer;margin-top:.25rem}
@media(max-width:1000px){.collection-grid{column-count:2}}
@media(max-width:640px){.collection-grid{column-count:1}}


@font-face {
  font-family: "FearlessFont";
  src: url("../fonts/FEARLESS.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "FolkloreEvermoreFont";
  src: url("../fonts/folklore-evermore.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "LoverFont";
  src: url("../fonts/lover.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "MidnightsFont";
  src: url("../fonts/MIDNIGHTS.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "RedFont";
  src: url("../fonts/RED.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "ReputationFont";
  src: url("../fonts/REPUTATION.TTF") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "SpeakNowFont";
  src: url("../fonts/SPEAKNOW.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "TTPDFont";
  src: url("../fonts/TTPD.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "DebutFont";
  src: url("../fonts/self-titled.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Nineteen89Font";
  src: url("../fonts/1989.ttf") format("truetype");
  font-display: swap;
}


.envelope-card.lover h3,
.envelope-card.lover blockquote{ font-family:"LoverFont", "Times New Roman", serif; }

.envelope-card.fearless h3,
.envelope-card.fearless blockquote{ font-family:"FearlessFont", Georgia, serif; }

.envelope-card.evermore h3,
.envelope-card.evermore blockquote,
.envelope-card.folklore h3,
.envelope-card.folklore blockquote{ font-family:"FolkloreEvermoreFont", Georgia, serif; }

.envelope-card.midnights h3,
.envelope-card.midnights blockquote{ font-family:"MidnightsFont", Arial, sans-serif; }

.envelope-card.ttpd h3,
.envelope-card.ttpd blockquote{ font-family:"TTPDFont", Georgia, serif; }

.envelope-card.red h3,
.envelope-card.red blockquote{ font-family:"RedFont", Georgia, serif; }

.envelope-card.reputation h3,
.envelope-card.reputation blockquote{ font-family:"ReputationFont", Arial, sans-serif; }

.envelope-card.speaknow h3,
.envelope-card.speaknow blockquote{ font-family:"SpeakNowFont", Georgia, serif; }

.envelope-card.debut h3,
.envelope-card.debut blockquote{ font-family:"DebutFont", Georgia, serif; }

.envelope-card.nineteen89 h3,
.envelope-card.nineteen89 blockquote{ font-family:"Nineteen89Font", Arial, sans-serif; }



.home .home-links { gap: 1.2rem; }
.home .big-link{
  font-size: clamp(2.2rem, 1.2vw + 2rem, 2.8rem); 
  padding: 1.1rem 1.4rem;                         
  border-radius: 1rem;
}

.cinema .columns{
  display: grid;
  justify-content: center;         
}
.cinema .columns .col{
  width: min(420px, 90vw);          
  height: 78vh;                     
  overflow-y: auto;
}

.cinema .columns .col figure{ margin: 0 0 1.2rem; }  
.cinema .columns .col img{ border-radius: .6rem; }   

.lightbox figure img{
  max-height: 80vh;   
  width: auto;      
  height: auto;      
  object-fit: contain;
  margin: 0 auto;    
}

header, main, footer {
  max-width: 900px;    
  margin-inline: auto; 
  padding-inline: 1.5rem;
}

main img, .envelope-card, .col, .collection-grid {
  max-width: 100%;
  margin-inline: auto;
}


@keyframes sparkle {
  0% { background-position: 0 0; }
  100% { background-position: 200% 200%; }
}

header, footer, main {
  background: linear-gradient(135deg,
              #fff4f9 0%, #fcefff 25%, #f9fcff 50%, #fffdf4 75%, #fff4f9 100%);
  background-size: 200% 200%;
  border-radius: 12px;
  padding-block: 2rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

main {
  position: relative;
  background: linear-gradient(135deg,
              #f9fcff 0%, #fffdf4 40%, #fcefff 80%, #fff4f9 100%);
  background-size: 300% 300%;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  margin: 2rem auto;
  overflow: hidden;
}

main > * {
  max-width: 850px;
  margin-inline: auto;
}

body.gallery .cinema {
  grid-template-columns: 1fr auto; 
  justify-content: space-between;
}
body.gallery .columns {
  justify-content: end;  
}

footer .closing , blockquote{
    margin-bottom: 2rem;
    color: #666;
    font-family: 'Pinyon Script', cursive;
}


footer .closing cite {
  font-size: 0.9rem;
  color: #666;
}

.album-row .alb-lover::after{ font-family: "LoverFont", serif; }
.album-row .alb-fearless::after{ font-family: "FearlessFont", serif; }
.album-row .alb-folklore::after{ font-family: "FolkloreEvermoreFont", serif; }
.album-row .alb-evermore::after{ font-family: "FolkloreEvermoreFont", serif; }
.album-row .alb-midnights::after{ font-family: "MidnightsFont", sans-serif; }
.album-row .alb-ttpd::after{ font-family: "TTPDFont", serif; }
.album-row .alb-reputation::after{ font-family: "ReputationFont", sans-serif; }
.album-row .alb-speaknow::after{ font-family: "SpeakNowFont", serif; }
.album-row .alb-red::after{ font-family: "RedFont", serif; }
.album-row .alb-1989::after{ font-family: "Nineteen89Font", sans-serif; }
.album-row .alb-debut::after{ font-family: "DebutFont", serif; }

.emoji-cloud{
  max-width: 1000px;
  margin: 0 auto 1.5rem;
  display: flex;
  flex-wrap: nowrap;          
  justify-content: center;   
  align-items: center;
  gap: 1.4rem;               
  overflow-x: auto;           
  -webkit-overflow-scrolling: touch;
  padding-block: .25rem;
}

.emoji-cloud .emoji{
  font-size: clamp(2.2rem, 3vw, 2.8rem);
  line-height: 1;
  text-decoration: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.08));
  transition: transform .15s ease, filter .15s ease;
}
.emoji-cloud .emoji:hover,
.emoji-cloud .emoji:focus-visible{
  transform: translateY(-3px) scale(1.06);
  outline: none;
}

.album-row{
  max-width: 1000px;
  margin: 3rem auto 0;  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

.album-row .album{
  font-size: clamp(1rem, 1.4vw, 1.6rem);
  position: relative;
  cursor: pointer;
  transition: transform .15s ease;
  text-decoration: none;
}
.album-row .album:hover{
  transform: scale(1.15);
}

.album-row .album::after{
  content: attr(data-title);
  position: absolute;
  bottom: 130%;                 
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 115, 199, 0.85);
  color: #fff;
  font-size: 0.95rem;           
  white-space: nowrap;
  padding: .3rem .6rem;
  border-radius: .4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.album-row .album:hover::after{
  opacity: 1;
  transform: translateX(-50%) translateY(-3px);
}