/* SandAndSoul — The Morning Service.
   Starts in black silence. Photography is the only light source.
   Everything moves at breathing pace. Typography is lowercase, thin, reverent.
   One interaction mode: descend through the morning. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500&display=swap');

:root{
  --ink:#050608;
  --ink-2:#0d1016;
  --dusk:#141821;
  --paper:#f8f4ea;
  --paper-dim:#e9e1d0;
  --mute:#55585e;
  --mute-2:#86857f;
  --ember:#c67c5a;              /* warm coral, reads over sunrise images */
  --ember-soft:rgba(198,124,90,.15);
  --rule:rgba(248,244,234,.18);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.75;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto;-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:auto}

/* dark scrim helpers for image-over-text readability */
.scrim-bottom::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;pointer-events:none;background:linear-gradient(to top, rgba(5,6,8,.82) 0%, rgba(5,6,8,.35) 50%, transparent 100%);z-index:1}
.scrim-full::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(5,6,8,.28) 0%, rgba(5,6,8,.48) 55%, rgba(5,6,8,.78) 100%);z-index:1}
.scrim-vignette::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center, transparent 35%, rgba(5,6,8,.55) 100%);z-index:1}

/* watermark on photo detail preview */
.watermark-corner{position:absolute;bottom:16px;right:20px;z-index:3;pointer-events:none;font-family:var(--sans);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:rgba(248,244,234,.8);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.watermark-big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(40px,6vw,80px);color:rgba(248,244,234,.13);letter-spacing:.04em;transform:rotate(-14deg);mix-blend-mode:overlay}
a{color:inherit;text-decoration:none;transition:color .6s ease}
a:hover{color:var(--ember)}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}

/* ───── fixed logo mark ───── */
.mark{
  position:fixed;
  top:32px;left:40px;
  z-index:100;
  width:92px;height:92px;
  display:flex;align-items:center;justify-content:center;
  opacity:.95;
  transition:opacity .8s ease, transform .8s ease;
}
.mark:hover{opacity:1;transform:scale(1.05)}
.mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}

/* ───── fixed nav, barely-there ───── */
.navline{
  position:fixed;
  top:54px;right:48px;
  z-index:99;
  display:flex;gap:38px;
  font-family:var(--sans);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(248,244,234,.78);
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.navline a{color:inherit;transition:color .4s ease}
.navline a:hover{color:var(--ember)}
.navline.inv{color:rgba(5,6,8,.5)}
.navline.inv a:hover{color:var(--ink)}

/* ───── overture: black screen, slow fade to first light ───── */
.overture{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:0 0 14vh 8vw;
  overflow:hidden;
  background:var(--ink);
}
.overture-image{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  animation:dawn 4s ease-out 0.4s forwards;
  z-index:0;
}
.overture::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,6,8,.3) 0%, transparent 35%, transparent 55%, rgba(5,6,8,.78) 100%);
  z-index:1;pointer-events:none;
}
@keyframes dawn{0%{opacity:0}100%{opacity:1}}
.overture .content{position:relative;z-index:2;max-width:960px;animation:textrise 2.4s ease-out 1.6s backwards}
@keyframes textrise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
.overture .salutation{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(18px, 1.6vw, 22px);
  color:var(--ember);
  letter-spacing:-.005em;
  margin-bottom:18px;
}
.overture h1{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(64px, 10.5vw, 180px);
  line-height:.92;
  letter-spacing:-.03em;
  color:#fff;
  max-width:13ch;
  font-variation-settings:"opsz" 144, "SOFT" 50;
}
.overture h1 em{font-style:italic;color:var(--ember);font-weight:300}
.overture .sub{
  margin-top:28px;
  max-width:540px;
  font-size:17px;
  font-weight:300;
  line-height:1.7;
  color:rgba(248,244,234,.72);
}

.descent-cue{
  position:absolute;
  bottom:4vh;left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:.5em;text-transform:uppercase;
  color:rgba(248,244,234,.45);
  animation:pulse 3s ease-in-out infinite;
  z-index:3;
}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.85}}

/* ───── a "movement": full-bleed photograph with text overlay ───── */
.movement{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr;
  background:var(--ink);
}
.movement.diptych{
  grid-template-columns:1fr 1fr;
  min-height:92vh;
}
.movement .image{
  position:relative;
  min-height:70vh;
  background-size:cover;background-position:center;
  overflow:hidden;
}
.movement.full .image{position:absolute;inset:0;min-height:100vh}
.movement.full .caption{position:absolute;z-index:3;bottom:10vh;left:8vw;right:8vw;max-width:680px}
.movement .caption{
  display:flex;flex-direction:column;justify-content:center;
  padding:8vw 7vw;
  background:var(--ink);
  color:var(--paper);
}
.movement .plate{
  font-family:var(--sans);
  font-size:10px;
  font-weight:500;
  letter-spacing:.44em;
  text-transform:uppercase;
  color:var(--ember);
  margin-bottom:24px;
  display:flex;align-items:center;gap:16px;
}
.movement .plate::before{
  content:"";display:inline-block;width:40px;height:1px;background:var(--ember);
}
.movement h2{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(40px, 5vw, 76px);
  line-height:1;
  letter-spacing:-.025em;
  margin-bottom:28px;
  color:var(--paper);
  font-variation-settings:"opsz" 144, "SOFT" 60;
}
.movement h2 em{font-style:italic;color:var(--ember);font-weight:300}
.movement .body-copy{
  font-size:17px;
  font-weight:300;
  line-height:1.8;
  color:rgba(248,244,234,.78);
  max-width:46ch;
  margin-bottom:20px;
}
.movement .meta{
  font-family:var(--sans);
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(248,244,234,.4);font-weight:500;
}
.movement.full.light-caption .caption{background:transparent}
.movement.full.light-caption::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 40%, rgba(5,6,8,.72) 100%);z-index:2;pointer-events:none;
}

/* ───── archive: museum-mode photo wall ───── */
.archive{
  background:var(--ink);
  padding:14vh 0;
}
.archive-intro{
  max-width:920px;margin:0 auto 8vh;padding:0 8vw;
}
.archive-intro .plate{font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:var(--ember);font-weight:500;margin-bottom:20px;display:flex;align-items:center;gap:16px}
.archive-intro .plate::before{content:"";display:inline-block;width:40px;height:1px;background:var(--ember)}
.archive-intro h2{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(44px, 6vw, 88px);line-height:.95;letter-spacing:-.025em;
  color:var(--paper);margin-bottom:26px;max-width:14ch;
}
.archive-intro h2 em{color:var(--ember);font-weight:300}
.archive-intro p{max-width:52ch;color:rgba(248,244,234,.72);font-size:17px;line-height:1.8;font-weight:300}

/* Museum grid — asymmetric, fluid */
.archive-grid{
  padding:0 6vw;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
}
.archive-tile{
  position:relative;
  overflow:hidden;
  background:var(--ink-2);
  display:block;
  text-decoration:none;
}
.archive-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 2s cubic-bezier(.2,.8,.2,1), filter 1.4s ease;filter:grayscale(.2) contrast(1.02)}
.archive-tile:hover img{transform:scale(1.04);filter:grayscale(0) contrast(1.06)}
.archive-tile .label{
  position:absolute;inset:auto 0 0 0;padding:20px 22px;
  background:linear-gradient(180deg, transparent 0%, rgba(5,6,8,.88) 100%);
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ember);
  opacity:0;transition:opacity .6s ease;font-weight:500;
}
.archive-tile:hover .label{opacity:1}
.archive-tile .label h4{font-family:var(--serif);font-style:italic;font-weight:300;font-size:26px;letter-spacing:-.015em;text-transform:none;margin-bottom:4px;color:#fff}
.archive-tile .label span{color:rgba(248,244,234,.72)}

/* Tile sizing variations — breaks the uniform grid */
.archive-tile:nth-child(12n+1){grid-column:span 6;aspect-ratio:3/2}
.archive-tile:nth-child(12n+2){grid-column:span 3;aspect-ratio:3/4}
.archive-tile:nth-child(12n+3){grid-column:span 3;aspect-ratio:3/4}
.archive-tile:nth-child(12n+4){grid-column:span 4;aspect-ratio:1/1}
.archive-tile:nth-child(12n+5){grid-column:span 4;aspect-ratio:1/1}
.archive-tile:nth-child(12n+6){grid-column:span 4;aspect-ratio:1/1}
.archive-tile:nth-child(12n+7){grid-column:span 5;aspect-ratio:4/5}
.archive-tile:nth-child(12n+8){grid-column:span 7;aspect-ratio:3/2}
.archive-tile:nth-child(12n+9){grid-column:span 3;aspect-ratio:3/4}
.archive-tile:nth-child(12n+10){grid-column:span 3;aspect-ratio:3/4}
.archive-tile:nth-child(12n+11){grid-column:span 6;aspect-ratio:4/3}
.archive-tile:nth-child(12n){grid-column:span 4;aspect-ratio:1/1}
@media (max-width:900px){
  .archive-grid{grid-template-columns:repeat(6, 1fr)}
  .archive-tile[class]{grid-column:span 3;aspect-ratio:1/1}
}

/* ───── photo detail / purchase page ───── */
.photo-stage{
  min-height:100vh;
  padding:140px 8vw 60px;
  background:var(--ink);
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:72px;
  align-items:start;
}
.photo-stage .frame{
  position:relative;overflow:hidden;
  background:var(--ink-2);
  box-shadow:0 60px 120px rgba(0,0,0,.6);
}
.photo-stage .frame img{width:100%;display:block}
.photo-stage .aside{
  position:sticky;top:140px;
  color:var(--paper);
}
.photo-stage .aside .plate{
  font-size:10px;letter-spacing:.44em;text-transform:uppercase;
  color:var(--ember);font-weight:500;margin-bottom:22px;
  display:flex;align-items:center;gap:16px;
}
.photo-stage .aside .plate::before{content:"";width:40px;height:1px;background:var(--ember);display:inline-block}
.photo-stage .aside h1{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(42px, 4.5vw, 62px);line-height:.96;letter-spacing:-.02em;
  margin-bottom:10px;
}
.photo-stage .aside .date{
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--mute-2);margin-bottom:30px;font-weight:500;
}
.photo-stage .aside p{color:rgba(248,244,234,.72);font-size:16px;line-height:1.8;margin-bottom:32px;max-width:42ch}

.buy-rule{border:0;height:1px;background:var(--rule);margin:28px 0}

.buy-row{
  display:block;padding:22px 0;color:var(--paper);text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:padding .4s ease, color .4s ease;
}
.buy-row:hover{padding-left:14px;color:var(--ember)}
.buy-row .tag{font-size:9px;letter-spacing:.44em;text-transform:uppercase;color:var(--ember);font-weight:500;margin-bottom:8px;display:block}
.buy-row .row-main{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.buy-row .name{font-family:var(--serif);font-style:italic;font-weight:300;font-size:22px;letter-spacing:-.01em}
.buy-row .price{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--paper)}
.buy-row .note{font-size:11px;color:var(--mute-2);margin-top:8px;letter-spacing:.04em}

.photo-stage .fine{font-size:11px;color:var(--mute);line-height:1.65;margin-top:28px;font-style:italic;font-family:var(--serif)}

/* ───── videos ───── */
.videos-section{background:var(--ink);padding:12vh 0 14vh}
.videos-section .intro{padding:0 8vw;max-width:920px;margin-bottom:6vh}
.videos-section .plate{font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:var(--ember);font-weight:500;margin-bottom:20px;display:flex;align-items:center;gap:16px}
.videos-section .plate::before{content:"";width:40px;height:1px;background:var(--ember);display:inline-block}
.videos-section h2{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(44px, 5.5vw, 82px);line-height:.95;letter-spacing:-.025em;margin-bottom:26px;max-width:16ch;color:var(--paper)}
.videos-section h2 em{color:var(--ember);font-weight:300}
.videos-section p{max-width:52ch;color:rgba(248,244,234,.72);font-size:17px;line-height:1.8;font-weight:300}

.video-feature{padding:0 6vw;margin-bottom:5vh}
.video-feature .player{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2);box-shadow:0 40px 100px rgba(0,0,0,.55)}
.video-feature .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-feature .caption{padding:28px 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.video-feature .caption h3{font-family:var(--serif);font-style:italic;font-weight:300;font-size:32px;letter-spacing:-.015em;color:var(--paper)}
.video-feature .caption .date{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute-2);font-weight:500}

.video-list{padding:0 6vw;display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:48px}
.video-list article{color:var(--paper)}
.video-list .player-sm{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.video-list .player-sm iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-list h3{font-family:var(--serif);font-style:italic;font-weight:300;font-size:24px;margin:18px 0 6px;letter-spacing:-.012em;line-height:1.2}
.video-list .date{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute-2);font-weight:500}

/* ───── practices — text-first reading page ───── */
.practices-section{
  background:var(--paper);
  color:var(--ink);
  padding:14vh 0;
}
.practices-section .intro{padding:0 10vw;max-width:900px;margin-bottom:9vh}
.practices-section .plate{font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:var(--ember);font-weight:500;margin-bottom:22px;display:flex;align-items:center;gap:16px}
.practices-section .plate::before{content:"";width:40px;height:1px;background:var(--ember);display:inline-block}
.practices-section h2{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(44px, 5.5vw, 82px);line-height:.95;letter-spacing:-.025em;margin-bottom:26px;max-width:15ch;color:var(--ink)}
.practices-section h2 em{color:var(--ember);font-weight:300;font-style:italic}
.practices-section > .intro p{max-width:54ch;color:rgba(5,6,8,.72);font-size:17px;line-height:1.8;font-weight:300}

.practice-list{padding:0 10vw}
.practice-item{
  display:grid;grid-template-columns:80px 1fr auto;gap:32px;align-items:baseline;
  padding:34px 0;border-top:1px solid rgba(5,6,8,.12);
  text-decoration:none;color:var(--ink);
  transition:padding .5s ease, background .5s ease;
}
.practice-item:hover{padding-left:22px;background:rgba(212,166,75,.04)}
.practice-item:last-child{border-bottom:1px solid rgba(5,6,8,.12)}
.practice-item .num{font-family:var(--serif);font-style:italic;font-weight:300;font-size:32px;color:var(--ember);line-height:1}
.practice-item .name h3{font-family:var(--serif);font-style:italic;font-weight:300;font-size:36px;line-height:1.05;letter-spacing:-.02em;margin-bottom:6px}
.practice-item .name .subtitle{font-size:15px;color:var(--mute);font-style:italic;font-family:var(--serif);font-weight:300}
.practice-item .duration{font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--mute);font-weight:500;white-space:nowrap}

/* practice detail reading page */
.practice-detail{
  min-height:100vh;
  padding:180px 0 100px;
  background:var(--paper);
  color:var(--ink);
}
.practice-detail .reading{max-width:640px;margin:0 auto;padding:0 28px}
.practice-detail .reading .plate{font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:var(--ember);font-weight:500;margin-bottom:28px;display:flex;align-items:center;gap:16px}
.practice-detail .reading .plate::before{content:"";width:40px;height:1px;background:var(--ember);display:inline-block}
.practice-detail h1{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(46px,6vw,76px);line-height:1;letter-spacing:-.025em;margin-bottom:20px}
.practice-detail h1 em{color:var(--ember);font-weight:300}
.practice-detail .subtitle{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--mute);margin-bottom:50px;font-weight:300;line-height:1.4}
.practice-detail .intro-quote{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:23px;line-height:1.5;margin:40px 0 60px;
  color:var(--ink);padding-left:28px;border-left:2px solid var(--ember);
}
.practice-detail .section-h{font-family:var(--serif);font-style:italic;font-weight:400;font-size:28px;margin:50px 0 20px;letter-spacing:-.015em}
.practice-detail .reading p{font-size:18px;line-height:1.85;color:var(--ink);margin-bottom:22px;font-weight:300}
.practice-detail .reading p strong{font-weight:500;color:var(--ink)}

/* ───── newsletter ───── */
.letter{
  background:var(--ink);
  padding:16vh 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.letter::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center top, var(--ember-soft), transparent 60%);
  pointer-events:none;
}
.letter .inner{max-width:640px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
.letter .plate{font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:var(--ember);font-weight:500;margin-bottom:26px;display:inline-flex;align-items:center;gap:16px}
.letter .plate::before,.letter .plate::after{content:"";width:40px;height:1px;background:var(--ember);display:inline-block}
.letter h2{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(40px,5vw,70px);line-height:1;letter-spacing:-.022em;margin-bottom:26px;color:#fff}
.letter h2 em{color:var(--ember);font-weight:300}
.letter p{color:rgba(248,244,234,.72);font-size:17px;line-height:1.75;margin-bottom:44px;max-width:52ch;margin-left:auto;margin-right:auto;font-weight:300}
.letter form{display:flex;max-width:520px;margin:0 auto;border-bottom:1px solid var(--rule)}
.letter input[type=email]{
  flex:1;padding:18px 0;border:0;background:transparent;color:#fff;
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:22px;outline:none;
}
.letter input::placeholder{color:rgba(248,244,234,.4)}
.letter button{padding:18px 24px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ember);font-weight:500}
.letter button:hover{color:#fff}

/* ───── footer ───── */
footer{
  background:var(--ink);
  padding:70px 8vw 40px;
  font-size:13px;
  color:rgba(248,244,234,.42);
  border-top:1px solid var(--rule);
}
footer .grid{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center}
footer .brand-name{font-family:var(--serif);font-style:italic;font-weight:300;font-size:24px;color:var(--paper);letter-spacing:-.01em}
footer .brand-name em{color:var(--ember);font-weight:300}
footer nav{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
footer nav a{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(248,244,234,.55);font-weight:500}
footer nav a:hover{color:var(--ember)}
footer .copyright{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,244,234,.35);text-align:right;font-weight:500}

/* ───── crumbs ───── */
.crumbs{font-family:var(--sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute-2);margin-bottom:24px;font-weight:500}
.crumbs a{color:var(--mute-2)}
.crumbs a:hover{color:var(--ember);text-decoration:none}
.crumbs span{margin:0 14px;color:var(--mute)}
.practice-detail .crumbs{color:var(--mute)}
.practice-detail .crumbs a{color:var(--mute)}

/* ───── cursor breath (desktop only, subtle) ───── */
@media (hover:hover){
  body{cursor:default}
  a,button{cursor:pointer}
}

/* ───── responsive ───── */
@media (max-width:900px){
  .mark{top:20px;left:22px;width:68px;height:68px}
  .navline{top:32px;right:22px;gap:22px;font-size:11.5px;letter-spacing:.24em}
  .overture{padding:0 0 12vh 6vw}
  .movement.diptych{grid-template-columns:1fr;min-height:auto}
  .movement.diptych .caption{padding:14vw 8vw}
  .movement.full .caption{bottom:6vh;left:6vw;right:6vw}
  .photo-stage{grid-template-columns:1fr;gap:40px;padding:120px 6vw 40px}
  .photo-stage .aside{position:static;top:auto}
  .practice-item{grid-template-columns:50px 1fr;gap:20px}
  .practice-item .duration{grid-column:1/3}
  footer .grid{grid-template-columns:1fr;text-align:center}
  footer .copyright{text-align:center}
}