/* Property Helpline. Every page is a fixed 3:4 sheet; all type is sized in container
   units (cqw) so a page reads identically as a thumbnail, on a phone or as a desktop
   spread. --fit is lowered by the reader when copy overruns the frame. */

.pg {
  container-type: inline-size; position: relative; aspect-ratio: 3 / 4; width: 100%;
  background: #fbfbf9; color: #14182a; overflow: hidden;
  font-family: var(--serif);
}
.pg-inner { position: absolute; inset: 6.5cqw 7cqw 9cqw; overflow: hidden; --fit: 1; display: flex; flex-direction: column; }
.pg .kicker { font: 700 calc(1.9cqw) / 1 var(--ui); color: var(--red); letter-spacing: .02em; padding-bottom: 1.6cqw; border-bottom: .35cqw solid #14182a; margin-bottom: 3cqw; }
.pg .art-title { font: 600 calc(6.4cqw * var(--fit)) / 1.02 var(--display); letter-spacing: -.02em; margin: 0 0 2cqw; }
.pg .art-title.big { font-size: calc(9.6cqw * var(--fit)); font-weight: 500; }
.pg .dek { font: italic 400 calc(3cqw * var(--fit)) / 1.3 var(--serif); color: #3a4059; margin: 0 0 2cqw; }
.pg .byline { font: 600 calc(1.8cqw * var(--fit)) / 1.2 var(--ui); color: #6b7189; margin: 0 0 3cqw; }
.pg .body { font-size: calc(2.28cqw * var(--fit)); line-height: 1.5; hyphens: auto; -webkit-hyphens: auto; }
.pg .body p { margin: 0 0 .7em; text-align: justify; text-justify: inter-word; }
.pg .body h3 { font: 700 1.05em/1.2 var(--ui); margin: 1em 0 .35em; break-after: avoid; color: var(--cobalt-deep); }
.pg .body ul, .pg .body ol { margin: 0 0 .8em; padding-left: 1.2em; }
.pg .body li { margin-bottom: .35em; }
.pg .cols-2 { column-count: 2; column-gap: 4cqw; column-rule: .15cqw solid #d8dae3; flex: 1; min-height: 0; }
.pg .dropcap::first-letter { float: left; font: 600 4.1em/.8 var(--display); padding: .06em .08em 0 0; color: var(--red); }
.pg .ed-todo { font: italic 1em/1.45 var(--ui); background: #fff4cf; color: #5c4300; padding: .6em .8em; border-left: .6cqw solid var(--saffron); text-align: left !important; }
.folio { position: absolute; bottom: 3.6cqw; left: 7cqw; right: 7cqw; display: flex; justify-content: space-between; font: 500 1.6cqw/1 var(--ui); color: #7a8098; border-top: .15cqw solid #d8dae3; padding-top: 1.6cqw; }
.folio.left span:first-child { order: 0; }
.folio.right { flex-direction: row-reverse; }
.folio span:first-child { font-weight: 700; color: #14182a; }

/* ------------------------------------------------------------ cover */
.pg.cover { background: var(--cpaper); color: var(--cink); font-family: var(--ui); }
.cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-photo + .cover-top { color: #fff; }
.cover-top { position: absolute; top: 3.4cqw; left: 5cqw; right: 5cqw; display: flex; justify-content: space-between; font: 600 1.9cqw/1 var(--ui); z-index: 2; }
.masthead { position: absolute; top: 7.5cqw; left: 4cqw; right: 4cqw; z-index: 2; line-height: .8; }
.masthead .mh-1 { display: block; font: 500 7.4cqw/1 var(--display); letter-spacing: .32em; text-transform: uppercase; color: var(--band); padding-left: .6cqw; }
.masthead .mh-2 { display: block; font: 900 21.5cqw/.84 var(--display); letter-spacing: -.045em; color: var(--band); margin-left: -1cqw; }
.cover-strap { position: absolute; top: 36.5cqw; left: 5cqw; right: 5cqw; z-index: 2; font: 600 2.1cqw/1 var(--ui); padding: 1.3cqw 0; border-top: .4cqw solid var(--cink); border-bottom: .15cqw solid var(--cink); }
.cover-art { position: absolute; left: 30cqw; right: -6cqw; bottom: 7cqw; height: 66cqw; z-index: 1; display: flex; justify-content: flex-end; }
.cover-art svg { width: 100%; height: 100%; }
.cover-story { position: absolute; left: 5cqw; bottom: 12cqw; width: 42cqw; z-index: 3; }
.cover-story h2 { font: 500 9.4cqw/.95 var(--display); letter-spacing: -.02em; margin: 0 0 2.4cqw; color: var(--cink); }
.cover-story ul { list-style: none; margin: 0; padding: 0; }
.cover-story li { font: 600 2.35cqw/1.25 var(--ui); padding: 1.1cqw 0; border-top: .15cqw solid color-mix(in srgb, var(--cink) 30%, transparent); }
.cover-story li:first-child { border-top: .5cqw solid var(--caccent); }
.cover-photo ~ .cover-story h2, .cover-photo ~ .cover-story li { color: #fff; text-shadow: 0 .2cqw 1.2cqw rgba(0,0,0,.45); }
.cover-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 7cqw; background: var(--band); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 5cqw; font: 600 1.9cqw/1 var(--ui); z-index: 3; }
.postal-label {
  position: absolute; right: 4cqw; bottom: 10cqw; z-index: 4; width: 30cqw; transform: rotate(-4deg);
  background: #fff; color: #222; font: 400 2.2cqw/1.35 "Courier New", monospace; padding: 2cqw 2.4cqw;
  box-shadow: 0 .6cqw 1.8cqw rgba(0,0,0,.25); display: grid;
}
.postal-label b { font: 700 1.9cqw/1 var(--ui); border: .3cqw solid #b01e10; color: #b01e10; padding: .8cqw; margin-bottom: 1.2cqw; justify-self: start; }

/* ------------------------------------------------------------ contents, letter, data, brief, qa, promo */
.pg.contents .contents-title { font: 500 12cqw/.9 var(--display); margin: 0 0 3cqw; letter-spacing: -.03em; }
.toc { list-style: none; margin: 0; padding: 0; flex: 1; }
.toc a { display: grid; grid-template-columns: 9cqw 1fr; grid-template-rows: auto auto; column-gap: 2cqw; padding: 1.9cqw 0; border-top: .15cqw solid #d8dae3; color: inherit; text-decoration: none; }
.toc a:hover .toc-title { color: var(--cobalt); }
.toc-pg { grid-row: span 2; font: 500 6cqw/1 var(--display); color: var(--red); }
.toc-sec { font: 700 1.7cqw/1.2 var(--ui); color: #6b7189; }
.toc-title { font: 600 3.1cqw/1.15 var(--display); }
.imprint { font: 1.65cqw/1.45 var(--ui); color: #4b5068; border-top: .35cqw solid #14182a; padding-top: 2cqw; }
.imprint b { font: 700 2cqw/1 var(--display); color: #14182a; }
.imprint p { margin: .5cqw 0 0; }
.pg.letter .body { font-size: calc(2.7cqw * var(--fit)); flex: 1; }
.pg.letter .signoff { font: italic 500 4.4cqw/1 var(--display); text-align: right; color: var(--cobalt-deep); }
.pg.data { background: #f4f6fb; }
.mag-table { width: 100%; border-collapse: collapse; font: calc(2.05cqw * var(--fit)) / 1.2 var(--ui); font-variant-numeric: tabular-nums; }
.mag-table th { text-align: left; font-weight: 700; color: #6b7189; border-bottom: .3cqw solid #14182a; padding: 1cqw 0; }
.mag-table td { border-bottom: .15cqw solid #d8dae3; padding: calc(1.05cqw * var(--fit)) 0; }
.mag-table td:nth-child(2) { display: flex; align-items: center; gap: 1.5cqw; }
.mag-table .mbar { flex: 1; height: 1.4cqw; background: #e2e6f0; }
.mag-table .mbar i { display: block; height: 100%; background: linear-gradient(90deg, #1627c9, #8fa8ff); }
.mag-table b { width: 9cqw; text-align: right; }
.mag-table .r { text-align: right; }
.mag-table .up { color: var(--green); } .mag-table .down { color: var(--red); }
.mag-source { font: italic 1.6cqw/1.4 var(--ui); color: #6b7189; margin-top: 2cqw; }
.pg.brief .checklist ul { list-style: none; padding: 0; }
.pg.brief .checklist li { position: relative; padding: 1.3cqw 0 1.3cqw 6cqw; border-top: .15cqw solid #d8dae3; margin: 0; }
.pg.brief .checklist li::before { content: ""; position: absolute; left: 0; top: 1.5cqw; width: 3cqw; height: 3cqw; border: .35cqw solid var(--cobalt); }
.pg.brief .checklist p { font-style: italic; }
.pg.qa .body strong { font-family: var(--display); color: var(--red); font-size: 1.1em; }
.pg.qa .body p { break-inside: avoid; }
.pg.promo { background: var(--ink); color: #fff; }
.pg.promo .kicker { color: var(--saffron); border-color: #fff; }
.pg.promo .dek { color: #c4cbe3; }
.pg.promo .body { flex: 1; }
.pg.promo .bars-motif { height: 16cqw; gap: 1.6cqw; margin: 2cqw 0 4cqw; }
.pg.promo .bars-motif i { width: 7cqw; }
.promo-cta { font: 700 2.2cqw/1 var(--ui); color: var(--ink); background: var(--saffron); padding: 2.4cqw 3cqw; text-decoration: none; align-self: flex-start; }
.pg.feature.cont .running { font: italic 1.8cqw/1 var(--display); color: #6b7189; margin-bottom: 3cqw; }
.pg .pull { font: italic 500 calc(5.2cqw * var(--fit)) / 1.12 var(--display); margin: 0 0 3cqw; padding: 2.4cqw 0; border-top: .5cqw solid var(--red); border-bottom: .15cqw solid #14182a; color: #14182a; }
.feature-photo { width: 100%; height: 38%; object-fit: cover; }
.feature-photo + .pg-inner { top: 42%; }
.pg.backcover { background: #fff; display: grid; place-items: center; align-content: center; gap: 5cqw; padding: 10cqw; }
.pg.backcover img { width: 78cqw; }
.pg.backcover .bc-line { font: 2.6cqw/1.45 var(--ui); text-align: center; color: #3a4059; max-width: 60cqw; margin: 0; }
.pg.notes .ruled { flex: 1; background: repeating-linear-gradient(#fbfbf9 0 5.4cqw, #d8dae3 5.4cqw calc(5.4cqw + .15cqw)); }
.muted-page { font: italic 2.2cqw/1.3 var(--serif); color: #7a8098; }

/* ------------------------------------------------------------ issue rack */
.mag-home { padding: clamp(36px, 6vw, 72px) 0; }
.mag-head { max-width: 760px; margin-bottom: 44px; }
.masthead-line { line-height: .85; margin-bottom: 20px; }
.masthead-line .mh-1 { display: block; font: 500 clamp(16px, 2.2vw, 26px)/1 var(--display); letter-spacing: .32em; text-transform: uppercase; color: var(--cobalt); }
.masthead-line .mh-2 { display: block; font: 900 clamp(64px, 11vw, 150px)/.85 var(--display); letter-spacing: -.045em; color: var(--cobalt); }
.mag-head p { font: 19px/1.55 var(--serif); color: var(--ink-2); }
.issue-rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 40px 28px; }
.issue-card { text-decoration: none; color: inherit; display: grid; gap: 12px; }
.issue-cover { box-shadow: 0 2px 4px rgba(16,28,63,.1), 0 14px 30px rgba(16,28,63,.16); transition: transform .3s ease, box-shadow .3s ease; }
.issue-card:hover .issue-cover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(16,28,63,.1), 0 22px 40px rgba(16,28,63,.22); }
.issue-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.issue-meta span { color: var(--ink-3); }

/* hero cover on the home page */
.hero-cover .pg { box-shadow: 0 2px 6px rgba(16,28,63,.12), 0 30px 60px rgba(16,28,63,.22); transform: rotate(2.2deg); }
.hero-cover::before { content: ""; position: absolute; inset: 3% -4% -3% 6%; background: var(--mist); transform: rotate(-3deg); z-index: -1; border-radius: 2px; }

/* ------------------------------------------------------------ reader */
body.in-reader .sitefoot { display: none; }
.reader { background: #1b2238; color: #e6e9f3; min-height: calc(100vh - 57px); display: flex; flex-direction: column; }
.reader:fullscreen { min-height: 100vh; }
.reader-bar { display: flex; align-items: center; gap: 16px; padding: 10px var(--gutter); border-bottom: 1px solid rgba(255,255,255,.1); }
.rb-back { color: #c4cbe3; text-decoration: none; font-size: 14px; }
.rb-back::before { content: "‹ "; }
.rb-title { flex: 1; text-align: center; font-size: 15px; }
.rb-title b { font: 700 18px/1 var(--display); }
.rb-title span { color: #9aa3c2; margin-left: 8px; }
.rb-tools { display: flex; gap: 8px; }
.rb-btn { background: transparent; color: #e6e9f3; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 7px 12px; font: 500 14px var(--ui); cursor: pointer; }
.rb-btn:hover { background: rgba(255,255,255,.08); }
.desk { flex: 1; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; padding: 24px 12px; }
.turn { background: none; border: 0; color: #e6e9f3; font: 300 54px/1 var(--display); cursor: pointer; height: 100%; opacity: .7; }
.turn:hover:not(:disabled) { opacity: 1; }
.turn:disabled { opacity: .15; cursor: default; }
.book { perspective: 2600px; display: grid; place-items: center; }
.spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, calc((100vh - 190px) * 1.5)); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.spread.one { grid-template-columns: 1fr; width: min(100%, calc((100vh - 170px) * .75)); }
.leaf { position: relative; }
.leaf.blank { visibility: hidden; }
.leaf.left .pg::after, .leaf.right .pg::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none; z-index: 9; }
.leaf.left .pg::after { right: 0; background: linear-gradient(90deg, transparent, rgba(0,0,0,.14)); }
.leaf.right .pg::after { left: 0; background: linear-gradient(270deg, transparent, rgba(0,0,0,.16)); }
.flipper { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; z-index: 5; animation: .72s cubic-bezier(.45, .05, .35, 1) forwards; }
.flipper.fwd { left: 50%; transform-origin: left center; animation-name: turn-fwd; }
.flipper.back { left: 0; transform-origin: right center; animation-name: turn-back; }
.flipper .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flipper .face.rear { transform: rotateY(180deg); }
@keyframes turn-fwd { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes turn-back { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.slide-in-r { animation: slide-r .32s ease-out; }
.slide-in-l { animation: slide-l .32s ease-out; }
@keyframes slide-r { from { transform: translateX(24px); opacity: .3; } }
@keyframes slide-l { from { transform: translateX(-24px); opacity: .3; } }
.reader-foot { text-align: center; padding: 0 0 18px; color: #9aa3c2; font-size: 14px; font-variant-numeric: tabular-nums; }
.thumbs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(16, 20, 38, .97); padding: 16px var(--gutter); display: flex; gap: 14px; overflow-x: auto; border-top: 1px solid rgba(255,255,255,.12); }
.thumb { flex: none; width: 96px; background: none; border: 0; padding: 0; color: #c4cbe3; cursor: pointer; font: 13px var(--ui); display: grid; gap: 6px; }
.thumb-pg { pointer-events: none; }
.thumb:hover .thumb-pg, .thumb:focus-visible .thumb-pg { outline: 2px solid var(--saffron); }
@media (max-width: 900px) {
  .desk { grid-template-columns: 1fr; padding: 12px 16px; }
  .turn { display: none; }
  .spread.one { width: min(100%, calc((100vh - 150px) * .75)); }
  .rb-title span { display: none; }
}