/* The visitor chooses the order; the works keep their own proportions. */
.carnet-page .topbar { position: relative; }
.carnet-page main { overflow: clip; }
.carnet-page [hidden] { display: none !important; }
.carnet-opening { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 9vw; padding: 90px var(--gutter) 75px; }
.carnet-opening h1 { font-size: clamp(100px, 12.7vw, 205px); line-height: .82; letter-spacing: -.078em; }
.carnet-opening-note { max-width: 330px; padding-bottom: 3px; }
.carnet-opening-note > p:first-child { font: italic 300 clamp(27px, 2.7vw, 42px)/1.1 Cormorant, Georgia, serif; }
#carnet-summary { margin-top: 30px; font-size: 12px; }
.carnet-storage-note { font-size: 10px; color: var(--muted); margin: 9px 0 18px; }
.carnet-link { display: inline-flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 40px; border-bottom: 1px solid currentColor; font-size: 12px; }
.carnet-link > span:last-child { font-size: 22px; }
.carnet-state { padding-inline: var(--gutter); font-size: 12px; }
.carnet-state:has(#carnet-status:empty):has(#carnet-retry[hidden]) { display: none; }
#carnet-status:not(:empty) { padding-block: 20px; }
#carnet-retry { min-height: 44px; text-decoration: underline; margin-bottom: 30px; }
.carnet-empty { padding: 55px var(--gutter) 110px; border-top: 1px solid var(--line); }
.carnet-empty-intro { display: flex; justify-content: space-between; gap: 45px; align-items: end; margin-bottom: 60px; }
.carnet-empty-intro h2 { font-size: clamp(35px, 4.2vw, 66px); }
.carnet-empty-intro p { max-width: 325px; font-size: 12px; line-height: 1.8; }
.carnet-starts { display: grid; grid-template-columns: 1.45fr .75fr .8fr; gap: 5vw; align-items: start; }
.carnet-start:nth-child(2) { margin-top: 105px; }
.carnet-start:nth-child(3) { margin-top: 35px; }
.carnet-start-image { display: block; }
.carnet-start-image img { width: 100%; height: auto; }
.carnet-start-caption { margin-top: 17px; }
.carnet-start h3 { font-size: 15px; font-weight: 400; letter-spacing: -.03em; }
.carnet-no-script { font-size: 12px; max-width: 450px; margin-top: 40px; }
.carnet-no-script a { text-decoration: underline; }
.carnet-hanging { padding: 0 var(--gutter) 120px; }
.carnet-actions { display: flex; align-items: center; gap: 30px; border-top: 1px solid var(--line); padding: 15px 0 45px; font-size: 11px; }
.carnet-actions p { margin-right: auto; color: var(--muted); }
.carnet-actions button { min-height: 44px; }
.carnet-actions button:hover { text-decoration: underline; }
#carnet-works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 110px 9vw; align-items: start; }
.carnet-piece { min-width: 0; }
.carnet-piece-visual { margin: 0; }
.carnet-piece-visual a { display: block; }
.carnet-piece img { width: 100%; height: auto; max-height: 80svh; object-fit: contain; object-position: left bottom; }
.carnet-piece:nth-child(3n) { margin-top: 125px; }
.carnet-piece[data-format=landscape] { grid-column: 1 / -1; margin-top: 0; }
.carnet-piece[data-format=landscape] img { max-height: none; }
.carnet-piece-caption { display: grid; grid-template-columns: 35px 1fr; align-items: baseline; gap: 4px 12px; padding-top: 22px; }
.carnet-piece-number { grid-column: 1; grid-row: 1 / 3; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.carnet-piece-title { grid-column: 2; font-size: clamp(25px, 2.9vw, 43px); line-height: 1.1; }
.carnet-piece-medium { grid-column: 2; font-size: 11px; color: var(--muted); }
.carnet-piece-controls { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0 25px; padding-top: 6px; }
.carnet-piece-caption button { min-height: 44px; font-size: 10px; }
.carnet-piece-caption button:hover { text-decoration: underline; }
.carnet-piece-caption > button { grid-column: 2; justify-self: start; }
.carnet-piece.is-opening { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(230px, .65fr); align-items: end; gap: 7vw; margin-top: 0; }
.carnet-piece.is-opening .carnet-piece-caption { display: block; padding: 0 0 10px; }
.carnet-piece.is-opening .carnet-piece-number { display: block; margin-bottom: 25px; }
.carnet-piece.is-opening .carnet-piece-title { font-size: clamp(38px, 4.1vw, 68px); }
.carnet-piece.is-opening .carnet-piece-medium { margin-top: 15px; }
.carnet-piece.is-opening .carnet-piece-controls { margin-top: 30px; }
.carnet-piece.is-opening[data-format=landscape] { display: block; }
.carnet-piece.is-opening[data-format=landscape] .carnet-piece-caption { display: grid; grid-template-columns: 35px 1fr auto; padding-top: 25px; }
.carnet-piece.is-opening[data-format=landscape] .carnet-piece-number { margin: 0; }
.carnet-piece.is-opening[data-format=landscape] .carnet-piece-medium { margin-top: 5px; }
.carnet-piece.is-opening[data-format=landscape] .carnet-piece-controls { grid-column: 3; grid-row: 1 / 3; margin: 0; }
.carnet-undo { position: fixed; z-index: 20; bottom: max(20px, env(safe-area-inset-bottom)); left: var(--gutter); right: var(--gutter); margin-inline: auto; max-width: 520px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px 20px; border: 1px solid var(--line); background: var(--white); font-size: 12px; }
.carnet-undo button { min-height: 44px; text-decoration: underline; }
.carnet-continue { background: var(--black); color: var(--white); padding: 85px var(--gutter) 100px; display: flex; justify-content: space-between; gap: 50px; align-items: end; }
.carnet-continue h2 { font-size: clamp(46px, 5.5vw, 85px); }
.carnet-continue > div { display: flex; flex-direction: column; gap: 20px; }
.carnet-footer { display: flex; align-items: center; gap: 30px; padding: 30px var(--gutter) 80px; font-size: 11px; }
.carnet-footer > span { margin-right: auto; color: var(--muted); }
.carnet-footer > a { min-height: 44px; display: flex; align-items: center; }
@media (max-width: 900px) {
  .carnet-opening { gap: 5vw; }
  .carnet-opening h1 { font-size: 14vw; }
  .carnet-starts { gap: 4vw; }
  .carnet-start-caption .carnet-keep { font-size: 10px; }
  .carnet-piece.is-opening { grid-template-columns: minmax(0, 1.3fr) minmax(200px, .7fr); gap: 5vw; }
}
@media (max-width: 700px) {
  .carnet-opening { display: block; padding-block: 55px 45px; }
  .carnet-opening h1 { font-size: 24vw; line-height: .85; }
  .carnet-opening-note { margin: 32px 0 0 auto; max-width: 260px; }
  .carnet-opening-note > p:first-child { font-size: 30px; }
  #carnet-summary { margin-top: 20px; font-size: 11px; }
  .carnet-empty { padding-block: 40px 65px; }
  .carnet-empty-intro { display: block; margin-bottom: 35px; }
  .carnet-empty-intro h2 { font-size: 10vw; }
  .carnet-empty-intro p { font-size: 11px; margin-top: 20px; max-width: 290px; }
  .carnet-starts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .carnet-start:first-child { grid-column: 1 / -1; }
  .carnet-start:nth-child(2) { margin-top: 0; }
  .carnet-start:nth-child(3) { margin-top: 55px; }
  .carnet-start-caption { margin-top: 12px; }
  .carnet-start h3 { font-size: 13px; }
  .carnet-start .carnet-keep { font-size: 10px; }
  .carnet-hanging { padding-bottom: 65px; }
  .carnet-actions { flex-wrap: wrap; gap: 0 25px; padding: 12px 0 30px; font-size: 10px; }
  .carnet-actions p { width: 100%; margin-bottom: 8px; }
  #carnet-works { display: block; }
  .carnet-piece, .carnet-piece:nth-child(3n), .carnet-piece.is-opening { display: block; margin: 0 0 60px; }
  .carnet-piece img { max-height: 78svh; }
  .carnet-piece[data-format=landscape] img { max-height: none; }
  .carnet-piece-caption, .carnet-piece.is-opening .carnet-piece-caption, .carnet-piece.is-opening[data-format=landscape] .carnet-piece-caption { display: grid; grid-template-columns: 28px 1fr; padding-top: 18px; gap: 3px 8px; }
  .carnet-piece.is-opening .carnet-piece-number { margin: 0; }
  .carnet-piece-title, .carnet-piece.is-opening .carnet-piece-title { font-size: 8vw; }
  .carnet-piece-medium, .carnet-piece.is-opening .carnet-piece-medium { margin-top: 4px; font-size: 10px; }
  .carnet-piece-controls, .carnet-piece.is-opening .carnet-piece-controls, .carnet-piece.is-opening[data-format=landscape] .carnet-piece-controls { grid-column: 2; grid-row: auto; margin-top: 0; gap: 0 23px; }
  .carnet-undo { font-size: 11px; gap: 15px; padding-inline: 14px; }
  .carnet-continue { display: block; padding-block: 55px 65px; }
  .carnet-continue h2 { font-size: 12vw; }
  .carnet-continue > div { align-items: flex-start; margin-top: 35px; }
  .carnet-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 15px; font-size: 10px; }
  .carnet-footer > span { text-align: right; margin: 0; }
  .carnet-footer > a:last-child { justify-self: end; }
}
@media print {
  :root { --gutter: 0; --white: #fff; --black: #000; }
  .carnet-page .topbar, .carnet-footer, .carnet-continue, .carnet-actions, .carnet-piece-controls, .carnet-link, .carnet-undo, .carnet-storage-note, .carnet-state, .carnet-page .skip { display: none !important; }
  .carnet-page main { overflow: visible; }
  .carnet-opening { display: flex; justify-content: space-between; padding: 0 0 12mm; gap: 15mm; }
  .carnet-opening h1 { font-size: 48pt; }
  .carnet-opening-note { margin: 0; }
  .carnet-opening-note > p:first-child { font-size: 18pt; }
  .carnet-opening-note > p:first-child br { display: none; }
  #carnet-summary { font-size: 10pt; margin-top: 5mm; }
  .carnet-hanging { padding: 0; }
  #carnet-works { display: block; }
  .carnet-piece, .carnet-piece.is-opening { display: block !important; break-inside: avoid; page-break-inside: avoid; margin: 0 0 15mm !important; }
  .carnet-piece img { max-height: 170mm !important; object-position: center; }
  .carnet-piece-caption, .carnet-piece.is-opening .carnet-piece-caption { display: block !important; padding-top: 5mm !important; }
  .carnet-piece-number { display: none !important; }
  .carnet-piece-title, .carnet-piece.is-opening .carnet-piece-title { font-size: 18pt !important; }
  .carnet-piece-medium { font-size: 10pt; margin-top: 2mm !important; }
  @page { margin: 15mm; }
}