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

:root{
  --paper:#faf8f5;
  --paper-soft:#f0ebe4;
  --ink:#1d1b18;
  --muted:#71695f;
  --accent:#987047;
  --dark:#1b1917;
  --line:rgba(29,27,24,.18);
  --max:1220px;
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html{
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:#a78d69 transparent;
}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,Arial,sans-serif;
  line-height:1.65;
}

body.modal-open{
  overflow:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-7%;
  z-index:-2;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.88),transparent 34%),
    radial-gradient(circle at 76% 70%,rgba(166,132,94,.07),transparent 35%),
    var(--paper);
  animation:paperLight 11s ease-in-out infinite alternate;
}

@keyframes paperLight{
  to{transform:scale(1.025);filter:brightness(1.025)}
}

body::-webkit-scrollbar{width:4px}
body::-webkit-scrollbar-track{background:transparent}
body::-webkit-scrollbar-thumb{background:#a78d69;border-radius:999px}

img{display:block;max-width:100%}

a,
a:visited,
a:hover,
a:active{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
  color:inherit;
}

h1,h2,h3,blockquote{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
}

.paper-noise{
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  opacity:.12;
  background:repeating-radial-gradient(circle at 20% 20%,rgba(0,0,0,.028) 0 1px,transparent 1px 4px);
}

.reading-progress{
  position:fixed;
  top:0;
  right:6px;
  bottom:0;
  z-index:70;
  width:2px;
  background:rgba(167,141,105,.14);
}

.reading-progress span{
  display:block;
  width:100%;
  height:0;
  background:#a78d69;
}

/* Header */
.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px clamp(20px,4vw,62px);
  background:rgba(250,248,245,.98);
  border-bottom:1px solid rgba(29,27,24,.08);
}

.brand{
  font-family:"Cormorant Garamond",serif;
  font-size:23px;
  letter-spacing:.18em;
}

.main-nav{
  display:flex;
  gap:26px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.17em;
}

.menu-toggle{
  display:none;
  border:0;
  background:none;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  cursor:pointer;
}

/* Shared typography */
.eyebrow,
.meta-label{
  margin:0 0 18px;
  color:var(--accent);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.2em;
}

.section-heading{
  max-width:760px;
  margin-bottom:55px;
}

.section-heading h2{
  margin:0;
  font-size:clamp(32px,4vw,56px);
  line-height:.98;
}

/* Hero */
.hero{
  min-height:100vh;
  max-width:var(--max);
  margin:auto;
  padding:120px clamp(24px,6vw,86px) 70px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:80px;
}

h1{
  margin:0 0 34px;
  font-size:clamp(58px,7.2vw,105px);
  line-height:.8;
}

.hero-intro{
  color:#4b463f;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.28;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  margin-top:38px;
}

.text-link{
  display:inline-flex;
  gap:12px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.buy-button{
  min-height:50px;
  padding:0 25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  color:white!important;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.15em;
  transition:.25s;
}

.buy-button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}

.hero-cover{position:relative}

.cover-light{
  position:absolute;
  inset:10% 14%;
  background:rgba(255,255,255,.8);
  filter:blur(65px);
}

.hero-cover img{
  position:relative;
  width:min(420px,80%);
  margin:auto;
  box-shadow:0 42px 75px rgba(31,27,22,.19);
  opacity:0;
  transform:translateY(45px);
  animation:coverAppear 1.5s .3s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes coverAppear{
  to{opacity:1;transform:none}
}

/* Book intro */
.intro-book{
  max-width:var(--max);
  margin:auto;
  padding:120px clamp(24px,7vw,100px);
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:90px;
  border-top:1px solid var(--line);
}

.book-meta{
  display:flex;
  flex-direction:column;
  gap:12px;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.15em;
}

.book-copy{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.25;
}

.book-copy p{margin-top:0}

/* Shared content sections */
.content-section{
  max-width:var(--max);
  margin:auto;
  padding:120px clamp(24px,5vw,70px);
}

/* Carnet */
.carnet-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.carnet-card{
  min-height:250px;
  padding:30px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  background:rgba(255,255,255,.3);
}

.carnet-card h3{
  margin:18px 0;
  font-size:29px;
}

.carnet-open{
  margin-top:auto;
  padding:0;
  border:0;
  background:none;
  text-align:left;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.15em;
  cursor:pointer;
}

.carnet-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:130;
  overflow:auto;
  padding:75px 24px;
  background:#f8f5f0;
}

.carnet-modal.open{display:block}

.carnet-article{
  position:relative;
  max-width:780px;
  margin:auto;
}

.carnet-article h3{
  margin:22px 0 34px;
  font-size:clamp(42px,5vw,74px);
  line-height:.95;
}

.carnet-article p{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.45;
}

.modal-close{
  position:fixed;
  top:22px;
  right:28px;
  border:0;
  background:none;
  font-size:38px;
  cursor:pointer;
}

/* Map */
.book-map{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.map-layout{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:80px;
  align-items:center;
}

.map-list{
  position:relative;
  display:grid;
  gap:26px;
}

.map-list::before{
  content:"";
  position:absolute;
  top:22px;
  bottom:22px;
  left:21px;
  width:1px;
  background:var(--line);
}

.map-stop{
  position:relative;
  z-index:1;
  padding:0;
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  gap:18px;
  border:0;
  background:none;
  color:var(--muted);
  text-align:left;
  font-family:"Cormorant Garamond",serif;
  font-size:34px;
  cursor:pointer;
  transition:.25s;
}

.map-stop span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  font-family:Inter,Arial,sans-serif;
  font-size:9px;
}

.map-stop.active,
.map-stop:hover{color:var(--ink)}

.map-stop.active span{
  background:var(--ink);
  color:white;
}

.map-text{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(24px,2.8vw,40px);
  line-height:1.1;
}

/* Fragments */
.fragment-stage{
  min-height:360px;
  padding:48px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.28);
}

.fragment-slide{display:none}

.fragment-slide.active{
  display:block;
  animation:pageTurn .55s ease both;
}

@keyframes pageTurn{
  from{opacity:0;transform:translateX(18px)}
  to{opacity:1;transform:none}
}

.fragment-slide blockquote{
  max-width:850px;
  margin:24px 0;
  font-size:clamp(22px,2.7vw,34px);
  line-height:1.22;
}

.fragment-slide p{
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.fragment-controls{
  margin-top:40px;
  padding-top:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
}

.fragment-controls button{
  border:0;
  background:none;
  font-size:24px;
  cursor:pointer;
}

.fragment-counter{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.16em;
}

/* Audio cards */
.audio-section{
  padding:120px max(24px,calc((100vw - var(--max))/2 + 70px));
  background:var(--paper-soft);
}

.audio-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.audio-card-open{
  width:100%;
  height:300px;
  min-height:300px;
  padding:26px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border:1px solid var(--line);
  background:rgba(255,255,255,.3);
  text-align:left;
  cursor:pointer;
}

.audio-title{
  margin-top:0;
  font-family:"Cormorant Garamond",serif;
  font-size:27px;
  line-height:1.05;
}

.audio-duration{
  margin-top:7px;
  color:var(--muted);
  font-size:12px;
}

.vinyl{
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:repeating-radial-gradient(circle,#171615 0 2px,#2b2824 3px 6px);
  box-shadow:0 8px 18px rgba(0,0,0,.10);

overflow:visible;

position:relative;
  transform-origin:center;
}

.small-vinyl{
  width:138px;
  height:138px;
  margin-bottom:22px;
  transition:.3s;
}

.audio-card-open:hover .small-vinyl{
  transform:scale(1.025) rotate(2deg);
  box-shadow:0 20px 34px rgba(0,0,0,.22);
}

.css-play{
  position:relative;
  width:48px;
  height:48px;
  display:block;
  border-radius:50%;
  background:#c8a074;
}

.css-play::before{
  content:"";
  position:absolute;
  top:50%;
  left:53%;
  transform:translate(-40%,-50%);
  width:0;
  height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:14px solid #171615;
}

/* Audio full-screen reader */
.audio-reader{
  display:none;
  position:fixed;
  inset:0;
  z-index:120;
  overflow:auto;
  padding:24px clamp(20px,4vw,56px) 30px;
  background:#f8f5f0;
}

.audio-reader.open{display:block}

.reader-header{
  padding-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.15em;
}

.reader-close{
  padding:0;
  border:0;
  background:none;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.15em;
  cursor:pointer;
}

.reader-body{
  min-height:calc(100vh - 185px);
  max-width:1100px;
  margin:auto;
  padding:50px 0;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:clamp(50px,8vw,120px);
  align-items:center;
}

.reader-vinyl-column{

  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;

}
.reader-meta{

    margin-top:24px;

    text-align:center;

}

.reader-label{

    color:var(--accent);

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:.18em;

}
.turntable-stage{
  position:relative;
  width:300px;
  height:240px;
  margin-bottom:14px;
}

.turntable-stage .large-vinyl{
  position:absolute;
  left:0;
  top:10px;
  z-index:2;
  margin:0;
}

.vinyl-shadow{
  position:absolute;
  left:18px;
  top:30px;
  width:205px;
  height:205px;
  border-radius:50%;
  background:rgba(0,0,0,.18);
  filter:blur(16px);
  transform:translateY(10px) scale(.94);
  z-index:1;
  pointer-events:none;
}

.tonearm{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  z-index:3;
  pointer-events:none;
}

.tonearm-base,
.tonearm-arm,
.tonearm-rest{
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.22));
}

.tonearm-arm{
  transform-origin:254px 36px;
  transform-box:view-box;
  transform:rotate(var(--tonearm-angle, 0deg));
  transition:transform .72s cubic-bezier(.22,.72,.18,1);
  will-change:transform;
}

/* The needle rests outside the record until the first Play. */
.tonearm.is-engaged .tonearm-arm{
  transform:rotate(var(--tonearm-angle, 20deg));
}

/* A tiny vertical cue makes the needle feel lowered while audio is playing. */
.tonearm.is-playing .tonearm-arm{
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.25));
}

@media (prefers-reduced-motion: reduce){
  .tonearm-arm{transition:none}
}

.large-vinyl{
  width:220px;
  height:220px;
  margin-bottom:14px;
}


.vinyl-play{

    padding:0;

    border:0;

    appearance:none;

    -webkit-appearance:none;

    cursor:pointer;

    transition:

        transform .25s ease,

        box-shadow .25s ease;

}
.vinyl-play:hover{

    box-shadow:0 22px 42px rgba(0,0,0,.20);

}
.vinyl-play:hover .track-number{

    transform:scale(1.05);

}

.vinyl-play:active{

    transform:scale(.985);

}
.vinyl-play:focus{

    outline:none;

}
.vinyl-play:focus-visible{

    outline:2px solid var(--accent);

    outline-offset:8px;

}

.track-number{

    width:54px;

    height:54px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#c8a074;

    color:#171615;

    font-size:15px;

    letter-spacing:.08em;

    transition:transform .25s ease;

}

.large-vinyl.spinning{
  animation:vinylSpin 5s linear infinite;
}
.vinyl-play.spinning{

    cursor:pause;

}
@keyframes vinylSpin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}


.player-play{

    width:44px;

    height:44px;

    padding:0;

    display:grid;

    place-items:center;

    border:0;

    border-radius:50%;

    background:#c8a074;

    cursor:pointer;

}

.control-icon{
  position:relative;
  width:22px;
  height:22px;
  display:block;
}

.control-icon::before{
  content:"";
  position:absolute;
  top:50%;
  left:52%;
  transform:translate(-40%,-50%);
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:12px solid #171615;
}

.is-playing .control-icon::before{
  top:2px;
  left:4px;
  width:4px;
  height:17px;
  transform:none;
  border:0;
  background:#171615;
  box-shadow:10px 0 0 #171615;
}

.replay-button{
  display:none;
  margin-top:18px;
  border:0;
  background:none;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
  cursor:pointer;
}

.replay-button.visible{display:block}

.reader-text{

  position:relative;

  min-height:360px;

  display:flex;

  align-items:center;

  justify-content:flex-start;

}

.audio-paragraph{

  position:absolute;

  inset:0;

  width:100%;

  max-width:760px;

  margin:0;

  display:flex;

  align-items:center;

  opacity:0;

  transform:translateY(12px);

  transition:

    opacity .35s cubic-bezier(.22,.8,.22,1),

    transform .35s cubic-bezier(.22,.8,.22,1);

  pointer-events:none;

  font-family:"Cormorant Garamond",serif;

  font-size:clamp(30px,3vw,46px);

  line-height:1.28;

  text-align:left;

}

.audio-paragraph.active{

  opacity:1;

  transform:none;

}

.audio-paragraph.previous{

  opacity:0;

  transform:translateY(-6px);

}

.audio-paragraph.fading{

  opacity:0;

}

.player{
  max-width:1100px;
  margin:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.transport{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
}

.transport .seek-back,
.transport .seek-forward{
  min-width:48px;
  padding:8px 0;
  border:0;
  background:none;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}

.timeline{
  margin-top:14px;
  display:grid;
  grid-template-columns:auto minmax(120px,1fr) auto;
  align-items:center;
  gap:14px;
}

.current-time,
.duration{
  color:var(--muted);
  font-size:10px;
  font-variant-numeric:tabular-nums;
}

.player-progress{
  height:2px;
  background:#c8bdb0;
  cursor:pointer;
}

.player-progress span{
  display:block;
  width:0;
  height:100%;
  background:var(--ink);
}

/* Author */
.author-section{
  max-width:var(--max);
  margin:auto;
  padding:130px clamp(24px,5vw,70px);
  display:grid;
  grid-template-columns:.9fr 1fr;
  gap:100px;
  align-items:center;
}

.portrait img{
  width:100%;
  box-shadow:0 30px 60px rgba(26,23,20,.16);
}

.author-copy h2{
  margin:25px 0 38px;
  font-size:clamp(44px,5vw,76px);
  line-height:.85;
}

.author-copy p{
  color:#514b44;
  font-family:"Cormorant Garamond",serif;
  font-size:24px;
}

.socials{
  margin-top:35px;
  display:flex;
  gap:25px;
  flex-wrap:wrap;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
}

/* Order */
.order-section{
  padding:100px 24px;
  background:var(--paper-soft);
}

.order-inner{
  width:min(920px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:190px 1fr;
  gap:55px;
  align-items:center;
}

.order-cover img{
  width:100%;
  box-shadow:0 20px 38px rgba(27,24,20,.16);
}

.order-copy h2{
  margin:18px 0 28px;
  font-size:clamp(40px,4.5vw,62px);
  line-height:.82;
}

.order-copy>p:not(.eyebrow){color:var(--muted)}

.buy-button-large{
  min-width:280px;
  min-height:58px;
  margin-top:24px;
  font-size:11px;
}

.order-links{
  margin-top:30px;
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
}

/* Colophon */
.colophon{
  padding:70px clamp(24px,6vw,90px);
  background:var(--dark);
  color:#eee8df;
}

.colophon-title{
  margin-bottom:32px;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(38px,4.6vw,62px);
  line-height:.85;
}

.colophon-line{
  padding:24px 0;
  display:grid;
  grid-template-columns:repeat(7,max-content);
  justify-content:space-between;
  align-items:center;
  gap:24px;
  border-top:1px solid rgba(255,255,255,.2);
  border-bottom:1px solid rgba(255,255,255,.2);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.14em;
}

/* Ambience */
.ambience{
  position:fixed;
  left:22px;
  bottom:22px;
  z-index:60;
}
.ambience {

    display: none;

}

.ambience-toggle{
  padding:11px 15px;
  border:1px solid var(--line);
  background:rgba(250,248,245,.97);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.15em;
  cursor:pointer;
}

.ambience-panel{
  display:none;
  position:absolute;
  left:0;
  bottom:48px;
  width:155px;
  padding:10px;
  border:1px solid var(--line);
  background:white;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}

.ambience-panel.open{display:grid}

.ambience-panel button{
  padding:9px;
  border:0;
  background:none;
  text-align:left;
  cursor:pointer;
}

/* Reveal */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s ease,transform .85s ease;
}

.reveal.visible{
  opacity:1;
  transform:none;
}

/* Tablet */
@media(max-width:1000px){
  .colophon-line{
    grid-template-columns:repeat(4,max-content);
    justify-content:start;
  }
}

@media(max-width:900px){
  .menu-toggle{display:block}

  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:28px 22px 34px;
    display:flex;
    flex-direction:column;
    gap:19px;
    border-top:1px solid rgba(29,27,24,.08);
    border-bottom:1px solid var(--line);
    background:#faf8f5;
    box-shadow:0 18px 40px rgba(0,0,0,.12);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:.25s ease;
  }

  .main-nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }

  .hero,
  .intro-book,
  .author-section{
    grid-template-columns:1fr;
  }

  .hero{text-align:center}
  .hero-actions{justify-content:center}
  .hero-cover{margin-top:30px}
  .intro-book{gap:35px}
  .book-meta{align-items:center}

  .carnet-grid,
  .audio-grid{
    grid-template-columns:1fr;
  }

  .carnet-card,
  .audio-card-open{
    width:min(520px,100%);
    margin:auto;
  }

  .map-layout{
    grid-template-columns:1fr;
    gap:45px;
  }

  .reader-body{
    grid-template-columns:1fr;
    gap:35px;
  }

  .reader-text{
    min-height:280px;
    align-items:flex-start;
  }

  .turntable-stage{
    width:232px;
    height:186px;
  }

  .turntable-stage .large-vinyl,
  .large-vinyl{
    width:165px;
    height:165px;
  }

  .turntable-stage .large-vinyl{
    top:8px;
  }

  .vinyl-shadow{
    left:14px;
    top:23px;
    width:154px;
    height:154px;
    filter:blur(13px);
  }

  .portrait{
    max-width:500px;
    margin:auto;
  }

  .author-copy{text-align:center}
  .socials{justify-content:center}
}

/* Mobile */
@media(max-width:700px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .site-header{
    padding:17px 20px;
    padding-top:calc(17px + env(safe-area-inset-top));
  }

  .brand{font-size:20px}

  .hero{
    padding:110px 28px 70px;
  }

  h1{font-size:64px}

  .hero-actions{
    flex-direction:column;
  }

  .buy-button{
    width:100%;
  }

  .intro-book,
  .content-section,
  .audio-section,
  .author-section,
  .order-section{
    padding-left:28px;
    padding-right:28px;
  }

  .fragment-stage{
    min-height:0;
    padding:28px;
  }

  .fragment-slide blockquote{
    font-size:28px;
  }

  .map-stop{font-size:29px}
  .map-text{font-size:32px}

  .audio-card-open{
    height:260px;
    min-height:260px;
    padding:24px;
  }

  .small-vinyl{
    width:126px;
    height:126px;
    margin-bottom:18px;
  }

  .audio-title{font-size:26px}

  .audio-reader{
    padding:20px 18px calc(24px + env(safe-area-inset-bottom));
  }

  .reader-body{
    min-height:auto;
    padding:28px 0 38px;
    gap:28px;
  }

  .turntable-stage{
    width:220px;
    height:176px;
    margin-bottom:18px;
  }

  .turntable-stage .large-vinyl,
  .large-vinyl{
    width:156px;
    height:156px;
  }

  .turntable-stage .large-vinyl{
    top:7px;
  }

  .vinyl-shadow{
    left:13px;
    top:22px;
    width:145px;
    height:145px;
    filter:blur(12px);
  }

  .track-number{
    width:46px;
    height:46px;
    font-size:13px;
  }

  .reader-text{

    min-height:230px;

}

.audio-paragraph{

    font-size:30px;

}

.transport{

    gap:22px;

}

  .timeline{
    gap:10px;
  }

  .order-section{
    overflow:hidden;
  }

  .order-inner{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:28px;
  }

  .order-cover{
    width:150px;
    max-width:45%;
  }

  .order-copy{
    width:100%;
    min-width:0;
  }

  .buy-button-large{
    width:100%;
    min-width:0;
    max-width:100%;
    padding:0 16px;
    white-space:normal;
    text-align:center;
  }

  .order-links{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .colophon-line{
    display:flex;
    flex-wrap:wrap;
    gap:16px 22px;
  }

  .ambience{
    left:auto;
    right:18px;
    bottom:calc(18px + env(safe-area-inset-bottom));
  }

  .carnet-modal{
    padding:75px 22px 50px;
  }

  .carnet-article h3{font-size:43px}
  .carnet-article p{font-size:23px}
}
/* ===========================================

   INLINE VIDEO

=========================================== */

.inline-video{

    position:relative;

    width:100%;

    max-width:420px;

    margin:60px auto;

    aspect-ratio:9/16;

}

.inline-video-card,

.inline-video-player{

    position:absolute;

    inset:0;

    border-radius:18px;

    overflow:hidden;

}

.inline-video-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:34px;

    background:rgba(255,255,255,.94);

    border:1px solid var(--line);

    cursor:pointer;

    transition:

        opacity .45s ease,

        transform .6s cubic-bezier(.22,.8,.22,1),

        box-shadow .45s ease;

    z-index:2;

}

.inline-video-card:hover{

    transform:scale(1.02);

    box-shadow:0 24px 50px rgba(0,0,0,.12);

}

.inline-video-copy{

    text-align:left;

}

.inline-video-copy h4{

    margin:10px 0;

    font-family:"Cormorant Garamond",serif;

    font-size:38px;

    font-weight:400;

}

.inline-video-copy p{

    margin:0;

    color:var(--muted);

    font-size:15px;

}

.inline-video-play{

    position:absolute;

    right:28px;

    bottom:28px;

    width:64px;

    height:64px;

    border:1px solid var(--ink);

    border-radius:50%;

}

.inline-video-play::before{

    content:"";

    position:absolute;

    top:50%;

    left:54%;

    transform:translate(-40%,-50%);

    width:0;

    height:0;

    border-top:11px solid transparent;

    border-bottom:11px solid transparent;

    border-left:18px solid var(--ink);

}

.inline-video-player{

    opacity:0;

    transform:scale(.97);

    transition:

        opacity .55s ease,

        transform .6s cubic-bezier(.22,.8,.22,1);

    z-index:1;

}

.inline-video-player video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    background:#000;

}

.inline-video.open .inline-video-card{

    opacity:0;

    transform:scale(1.04);

    pointer-events:none;

}

.inline-video.open .inline-video-player{

    opacity:1;

    transform:scale(1);

    z-index:3;

}

@media (max-width:700px){

.inline-video-copy h4{

    font-size:30px;

}

.inline-video-card{

    padding:24px;

}

.inline-video-play{

    width:56px;

    height:56px;

}

}
/* =========================================================

   TRACES — VISUAL ARCHIVE

   ========================================================= */

.archive-section{

  max-width:var(--max);

  margin:auto;

  padding:120px clamp(24px,5vw,70px);

}

.archive-heading{

  margin-bottom:58px;

  display:grid;

  grid-template-columns:1fr minmax(240px,380px);

  align-items:end;

  gap:50px;

}

.archive-heading h2{

    margin:0;

    font-family:"Cormorant Garamond",Georgia,serif;

    font-weight:400;

    font-size:clamp(32px,4vw,56px);

    line-height:.98;

}

.archive-intro{

  margin:0;

  color:var(--muted);

  font-family:"Cormorant Garamond",Georgia,serif;

  font-size:22px;

  line-height:1.35;

}

/* Archive grid */

.archive-grid{

  display:grid;

  grid-template-columns:repeat(12,minmax(0,1fr));

  grid-auto-flow:dense;

  grid-auto-rows:55px;

  gap:8px;

}

.archive-item{

  position:relative;

  min-width:0;

  padding:0;

  overflow:hidden;

  border:0;

  background:#e9e3db;

  text-align:left;

  cursor:zoom-in;

  isolation:isolate;

}

.archive-item-tall{

  grid-column:span 4;

  grid-row:span 10;

}

.archive-item-wide{

  grid-column:span 5;

  grid-row:span 6;

}

.archive-item-square{

  grid-column:span 3;

  grid-row:span 6;

}

.archive-item-portrait{

  grid-column:span 3;

  grid-row:span 10;

}

.archive-item img,

.archive-item video{

  width:100%;

  height:100%;

  display:block;

  object-fit:cover;

  transition:

    transform .8s cubic-bezier(.2,.75,.2,1),

    filter .45s ease;

}

.archive-item video{

  pointer-events:none;

}

.archive-item::after{

  content:"";

  position:absolute;

  inset:0;

  z-index:1;

  pointer-events:none;

  background:

    linear-gradient(

      to top,

      rgba(17,15,13,.52) 0,

      rgba(17,15,13,.05) 33%,

      transparent 55%

    );

  opacity:.55;

  transition:opacity .4s ease;

}

.archive-item:hover img,

.archive-item:hover video{

  transform:scale(1.025);

}

.archive-item:hover::after{

  opacity:.8;

}

/* Archive caption */

.archive-caption{

  position:absolute;

  left:18px;

  right:18px;

  bottom:16px;

  z-index:3;

  color:#fff;

  font-size:9px;

  text-transform:uppercase;

  letter-spacing:.16em;

  opacity:0;

  transform:translateY(7px);

  transition:

    opacity .35s ease,

    transform .35s ease;

}

.archive-item:hover .archive-caption,

.archive-item:focus-visible .archive-caption{

  opacity:1;

  transform:none;

}

/* Video marker */

.archive-media-label{

  position:absolute;

  top:16px;

  left:16px;

  z-index:3;

  padding:7px 9px;

  border:1px solid rgba(255,255,255,.55);

  background:rgba(20,18,16,.28);

  color:#fff;

  font-size:8px;

  line-height:1;

  text-transform:uppercase;

  letter-spacing:.18em;

  backdrop-filter:blur(8px);

  -webkit-backdrop-filter:blur(8px);

}

.archive-video-mark{

  position:absolute;

  top:50%;

  left:50%;

  z-index:4;

  width:70px;

  height:70px;

  border:1px solid rgba(255,255,255,.9);

  border-radius:50%;

  background:rgba(20,18,16,.18);

  transform:translate(-50%,-50%);

  transition:

    transform .35s ease,

    background .35s ease;

  backdrop-filter:blur(5px);

  -webkit-backdrop-filter:blur(5px);

}

.archive-video-mark::before{

  content:"";

  position:absolute;

  top:50%;

  left:54%;

  width:0;

  height:0;

  transform:translate(-40%,-50%);

  border-top:10px solid transparent;

  border-bottom:10px solid transparent;

  border-left:17px solid #fff;

}

.archive-item-video{

  cursor:pointer;

}

.archive-item-video:hover .archive-video-mark{

  background:rgba(20,18,16,.42);

  transform:translate(-50%,-50%) scale(1.07);

}

/* Keypad access */

.archive-item:focus-visible{

  outline:2px solid var(--accent);

  outline-offset:4px;

}

/* Full screen */

.media-lightbox{

  position:fixed;

  inset:0;

  z-index:200;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:

    max(30px,env(safe-area-inset-top))

    max(30px,env(safe-area-inset-right))

    max(30px,env(safe-area-inset-bottom))

    max(30px,env(safe-area-inset-left));

  background:rgba(20,18,16,.96);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:

    opacity .35s ease,

    visibility .35s ease;

}

.media-lightbox.open{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

}

.media-lightbox-stage{

  width:100%;

  height:100%;

  min-height:0;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

}

.media-lightbox-image,

.media-lightbox-video{

  display:none;

  max-width:min(1200px,100%);

  max-height:calc(100vh - 115px);

  width:auto;

  height:auto;

  object-fit:contain;

  box-shadow:0 30px 80px rgba(0,0,0,.38);

}

.media-lightbox.show-image .media-lightbox-image{

  display:block;

}

.media-lightbox.show-video .media-lightbox-video{

  display:block;

}

.media-lightbox-caption{

  min-height:18px;

  margin:18px 0 0;

  color:rgba(255,255,255,.7);

  font-size:9px;

  text-transform:uppercase;

  letter-spacing:.17em;

}

.media-lightbox-close{

  position:fixed;

  top:max(20px,env(safe-area-inset-top));

  right:max(24px,env(safe-area-inset-right));

  z-index:202;

  width:48px;

  height:48px;

  padding:0;

  display:grid;

  place-items:center;

  border:1px solid rgba(255,255,255,.38);

  border-radius:50%;

  background:rgba(20,18,16,.3);

  color:#fff;

  font-family:Inter,Arial,sans-serif;

  font-size:30px;

  font-weight:300;

  line-height:1;

  cursor:pointer;

  backdrop-filter:blur(8px);

  -webkit-backdrop-filter:blur(8px);

}

body.media-lightbox-open{

  overflow:hidden;

}

/* Tablette */

@media(max-width:900px){

  .archive-heading{

    grid-template-columns:1fr;

    gap:22px;

  }

  .archive-intro{

    max-width:520px;

  }

  .archive-grid{

    grid-template-columns:repeat(6,minmax(0,1fr));

    grid-auto-rows:52px;

  }

  .archive-item-tall{

    grid-column:span 3;

    grid-row:span 9;

  }

  .archive-item-wide{

    grid-column:span 3;

    grid-row:span 6;

  }

  .archive-item-square{

    grid-column:span 3;

    grid-row:span 6;

  }

  .archive-item-portrait{

    grid-column:span 3;

    grid-row:span 9;

  }

  .archive-caption{

    opacity:1;

    transform:none;

  }

}

/* Mobile */

@media(max-width:700px){

  .archive-section{

    padding:90px 28px;

  }

  .archive-heading{

    margin-bottom:40px;

  }

  .archive-heading h2{

    font-size:clamp(32px,4vw,56px);

  }

  .archive-intro{

    font-size:20px;

  }

  .archive-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

    grid-auto-rows:68px;

    gap:6px;

  }

  .archive-item-tall,

  .archive-item-portrait{

    grid-column:span 1;

    grid-row:span 5;

  }

  .archive-item-square{

    grid-column:span 1;

    grid-row:span 3;

  }

  .archive-item-wide{

    grid-column:span 2;

    grid-row:span 3;

  }

  .archive-caption{

    left:12px;

    right:12px;

    bottom:11px;

    font-size:7px;

  }

  .archive-media-label{

    top:10px;

    left:10px;

    padding:6px 7px;

    font-size:7px;

  }

  .archive-video-mark{

    width:52px;

    height:52px;

  }

  .archive-video-mark::before{

    border-top-width:8px;

    border-bottom-width:8px;

    border-left-width:13px;

  }

  .media-lightbox{

    padding:

      max(65px,env(safe-area-inset-top))

      16px

      max(28px,env(safe-area-inset-bottom));

  }

  .media-lightbox-image,

  .media-lightbox-video{

    max-height:calc(100vh - 125px);

  }

  .media-lightbox-close{

    width:42px;

    height:42px;

    font-size:27px;

  }

}
/* Purchase selector */
.purchase-open{
  border:0;
  cursor:pointer;
  font-family:inherit;
}

.order-format-link{
  appearance:none;
  border:0;
  padding:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-transform:inherit;
  letter-spacing:inherit;
  cursor:pointer;
}

.order-format-link:hover,
.order-format-link:focus-visible,
.order-links-refined a:hover,
.order-links-refined a:focus-visible{
  opacity:.55;
}

.purchase-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(22,20,17,.48);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease;
}

.purchase-modal.open{
  opacity:1;
  visibility:visible;
}

.purchase-dialog{
  position:relative;
  width:min(760px,100%);
  max-height:min(820px,calc(100vh - 48px));
  overflow:auto;
  padding:50px;
  background:var(--paper-soft);
  box-shadow:0 30px 90px rgba(17,15,12,.24);
  transform:translateY(14px) scale(.985);
  transition:transform .28s ease;
}

.purchase-modal.open .purchase-dialog{
  transform:translateY(0) scale(1);
}

.purchase-close{
  position:absolute;
  top:18px;
  right:22px;
  width:38px;
  height:38px;
  border:0;
  background:transparent;
  color:var(--ink);
  font:300 30px/1 Arial,sans-serif;
  cursor:pointer;
}

.purchase-header h2{
  max-width:560px;
  margin:16px 0 12px;
  font-size:clamp(38px,5vw,58px);
  line-height:.95;
}

.purchase-intro{
  max-width:560px;
  margin:0;
  color:var(--muted);
}

.purchase-formats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:36px;
}

.purchase-format{
  min-height:108px;
  padding:20px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.purchase-format:hover:not(.active),
.purchase-format:focus-visible:not(.active){
  border-color:rgba(29,27,24,.42);
  transform:translateY(-2px);
}

.purchase-format:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.purchase-format.active{
  border-color:var(--ink);
  background:var(--ink);
  color:var(--paper-soft);
}

.purchase-format-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.purchase-format-name,
.purchase-format-note{
  display:block;
}

.purchase-format-name{
  padding-top:2px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.purchase-format-note{
  margin-top:11px;
  font-size:12px;
  opacity:.68;
}

.format-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  opacity:.72;
  transform-origin:center;
  transition:opacity .2s ease,transform .2s ease;
}

.format-icon svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

.format-icon path,
.format-icon rect{
  fill:none;
  stroke:currentColor;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.purchase-format:hover .format-icon,
.purchase-format:focus-visible .format-icon{
  opacity:1;
  transform:translateY(-1px) scale(1.035);
}

.purchase-format.active .format-icon{
  opacity:.9;
}

.purchase-stores{
  margin-top:34px;
}

.purchase-panel-title{
  margin:0 0 12px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}

.store-list{
  border-top:1px solid var(--line);
}

.store-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:58px;
  border-bottom:1px solid var(--line);
  font-size:15px;
  text-decoration:none;
  transition:padding .18s ease,opacity .18s ease;
}

.store-link:hover,
.store-link:focus-visible{
  padding-left:8px;
}

.store-link[href="#"]{
  opacity:.42;
  cursor:not-allowed;
}
/* SVG icon */
.store-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex-shrink:0;
  transition:transform .18s ease;
}
.store-icon svg{
  width:18px;
  height:18px;
  display:block;
  overflow:visible;
}
.store-icon path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.store-link:hover .store-icon,
.store-link:focus-visible .store-icon{
  transform:translate(2px,-2px);
}
.purchase-note{
  margin:26px 0 0;
  color:var(--muted);
  font-size:11px;
}

@media (max-width:700px){
  .purchase-modal{
    align-items:flex-end;
    padding:0;
  }

  .purchase-dialog{
    width:100%;
    max-height:88vh;
    padding:42px 22px 28px;
    border-radius:18px 18px 0 0;
    transform:translateY(28px);
  }

  .purchase-formats{
    grid-template-columns:1fr;
    gap:8px;
    margin-top:28px;
  }

  .purchase-format{
    min-height:82px;
    padding:16px 18px;
  }

  .purchase-format-note{
    margin-top:6px;
  }

  .format-icon{
    width:25px;
    height:25px;
    flex-basis:25px;
  }
}


/* Media kit page */
.media-hero{
  min-height:92vh;
  max-width:var(--max);
  margin:auto;
  padding:140px clamp(24px,6vw,86px) 90px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:80px;
}
.media-hero h1{

  margin-bottom:34px;

  font-size:clamp(34px, 3.8vw, 56px);

  line-height:.9;

}
.media-hero-cover{position:relative}
.media-hero-cover img{
  position:relative;
  width:min(360px,76%);
  margin:auto;
  box-shadow:0 42px 75px rgba(31,27,22,.19);
}
.media-intro{
  max-width:var(--max);
  margin:auto;
  padding:105px clamp(24px,7vw,100px);
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:90px;
  border-top:1px solid var(--line);
}
.media-resources{border-top:1px solid var(--line)}
.media-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.media-card{
  min-height:360px;
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid var(--line);
  background:rgba(255,255,255,.3);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.media-card:hover{
  transform:translateY(-4px);
  border-color:rgba(29,27,24,.34);
  box-shadow:0 18px 42px rgba(31,27,22,.08);
}
.media-card h3{
  margin:18px 0 16px;
  font-size:clamp(28px,2.5vw,36px);
  line-height:1;
}
.media-card p{margin:0;color:var(--muted);font-size:14px}
.media-download{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.15em;
}
.media-download span:last-child{font-size:18px;transition:transform .2s ease}
.media-download:hover span:last-child{transform:translateY(4px)}
.media-information{
  max-width:var(--max);
  margin:auto;
  padding:120px clamp(24px,5vw,70px);
  border-top:1px solid var(--line);
}
.media-facts{margin:0;border-top:1px solid var(--line)}
.media-facts div{
  display:grid;
  grid-template-columns:minmax(150px,.45fr) 1fr;
  gap:30px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.media-facts dt{
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.media-facts dd{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:23px;
  line-height:1.15;
}
.media-contact{
  padding:110px 24px;
  background:var(--paper-soft);
  border-top:1px solid var(--line);
}
.media-contact-inner{max-width:760px;margin:auto;text-align:center}
.media-contact h2{margin:0 0 22px;font-size: clamp(24px, 3vw, 34px); line-height:1.1}
.media-contact p:not(.eyebrow){max-width:620px;margin:0 auto 30px;color:var(--muted)}
.media-page .colophon a[aria-current="page"]{color:var(--accent)}

@media(max-width:900px){
  .media-hero{grid-template-columns:1fr;gap:45px;min-height:auto;padding-top:125px}
  .media-hero-cover img{width:min(330px,70%)}
  .media-intro{grid-template-columns:1fr;gap:35px}
  .media-grid{grid-template-columns:1fr}
  .media-card{min-height:290px}
}
@media(max-width:700px){
  .media-hero{padding:115px 22px 72px}
  .media-hero h1{font-size:clamp(54px,18vw,78px)}
  .media-hero-cover img{width:min(280px,78%)}
  .media-intro,.media-information{padding:82px 22px}
  .media-resources{padding:82px 22px}
  .media-facts div{grid-template-columns:1fr;gap:7px}
  .media-facts dd{font-size:21px}
  .media-contact{padding:82px 22px}
}
.publisher-logo{

    display:flex;

    justify-content:center;

    margin:0 auto 22px;

}

.publisher-logo img{

    width:96px;

    height:auto;

    display:block;

}

@media(max-width:768px){

    .publisher-logo img{

        width:72px;

    }

}