* { box-sizing: border-box; }
:root {
  --banner-height: 156px;
  --banner-crop: calc(185.5px - var(--banner-height));
  --sketch-height: 94px;
  --sketch-extra-height: calc(var(--sketch-height) - 50px);
  --magazine-cover-height: 211px;
  --magazine-extra-height: calc(var(--magazine-cover-height) + 27px - 145px);
  /* One shared zoom and page position, based on the Photos layout. */
  --layout-height: 652px;
  --layout-offset: -16px;
  --viewport-inset: 24px;
  --layout-scale: calc(.95 * min(1.6, calc((100vw - 24px) / 650px), calc((100dvh - var(--viewport-inset)) / var(--layout-height))));
  --login-height: 320px;
  --login-scale: min(1.6, max(1, var(--layout-scale)), calc((100vw - 32px) / 395px), calc((100dvh - 32px) / var(--login-height)));
}
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
body { display: grid; place-items: start center; height: 100dvh; padding-top: 3px; color: #ccc; font: 10px/12px Verdana, Geneva, sans-serif; -webkit-font-smoothing: antialiased; }
.page {
  position: relative;
  top: calc(var(--layout-offset) - 4px / var(--layout-scale));
  width: 650px;
  height: var(--layout-height);
  margin: 0;
  /* Shared viewport fit, reduced by 5% on every page. */
  zoom: var(--layout-scale);
}
.worldwide { position: absolute; left: 102px; top: 48px; color: #777; line-height: 14px; white-space: nowrap; }
.masthead > [hidden] { display: none; }
.profile-link { text-decoration: none; }
.profile-link:hover, .profile-link[aria-current="page"] { text-decoration: underline; }
.profile-link:focus-visible { outline: 1px dotted #ccc; outline-offset: 3px; }
.brand { position: absolute; z-index: 2; left: 486px; top: 23px; width: 157px; height: 67px; }
.brand img { display: block; object-fit: contain; transform: rotate(-5deg); transform-origin: center; }
.primary-nav { position: absolute; left: 11px; top: 73px; width: 70px; color: #fff; font-size: 11px; line-height: 16px; letter-spacing: .3px; }
.primary-nav > .item { display: flex; justify-content: flex-end; align-items: center; gap: 8px; height: 16px; }
.primary-nav > [hidden] { display: none; }
.primary-nav > a.item { color: inherit; text-decoration: none; }
.primary-nav > a.item:hover .taller-text, .primary-nav > [aria-current="page"] .taller-text { text-decoration: underline; }
.primary-nav > a.item:focus-visible, .brand:focus-visible { outline: 1px dotted #ccc; outline-offset: 2px; }
.primary-nav > button.item { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.primary-nav > button.item:hover .taller-text { text-decoration: underline; }
.primary-nav > button.item:focus-visible { outline: 1px dotted #ccc; outline-offset: 2px; }
.folder-icon { position: relative; flex: 0 0 10px; height: 14px; background: url("assets/folder.svg") center / 10px 14px no-repeat; }
.primary-nav > [href="photos.html"] .folder-icon::after { content: ""; position: absolute; left: 4px; top: 9px; width: 1.5px; height: 1.5px; border-radius: 50%; background: #555; }
.news-layout { position: absolute; left: 97px; top: 73px; width: 530px; height: calc(538px + var(--sketch-extra-height) - var(--banner-crop) + var(--magazine-extra-height)); }
.news-layout::before { content: ""; position: absolute; top: 29px; bottom: 0; left: -4px; width: 393px; box-sizing: border-box; border: 1px solid #333; pointer-events: none; }
h1, h2, p { margin: 0; font-weight: normal; }
h1 { position: absolute; top: 0; left: 0; width: 385px; height: 22px; padding: 2px 3px; background: #666; color: #eee; font: 15px/18px Arial, Helvetica, sans-serif; }
.related-heading { position: absolute; top: 0; left: 395px; width: 135px; height: 22px; padding: 3px 5px; background: #333; color: #aaa; font: 12.5px/16px Arial, Helvetica, sans-serif; }
.story { position: absolute; left: -4px; width: 393px; padding-right: 4px; padding-left: 4px; }
.story-xbox { top: 35px; }
.story-magazines { top: calc(272px - var(--banner-crop)); }
.story-press { top: calc(417px - var(--banner-crop) + var(--magazine-extra-height)); height: calc(121px + var(--sketch-extra-height)); padding-top: 7px; }
.story-heading { width: 385px; height: 77px; padding: 5px 5px 0; background: #333; }
.story-heading img { display: block; width: 375px; height: 50px; }
.story-xbox .story-heading { height: auto; padding-bottom: 1px; }
.story-magazines .story-heading { height: auto; padding-bottom: 1px; }
.magazine-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: var(--magazine-cover-height); background: #080808; }
.magazine-cover { position: relative; min-width: 0; overflow: hidden; }
.magazine-cover + .magazine-cover { border-left: 1px solid #333; }
.story-magazines .magazine-cover img { width: 100%; height: calc(100% + 2px); object-fit: cover; object-position: center top; transform: translateY(-2px); }
/* Fill the column with the cover itself, excluding the scan's white margins. */
.story-magazines .magazine-cover-issue-4 img { position: absolute; top: -2px; left: 50%; width: max(153%, calc(var(--magazine-cover-height) * 1000 / 930)); height: auto; max-width: none; transform: translate(-50%, -3.5%); }
.banner-image { width: 375px; height: var(--banner-height); overflow: hidden; }
.story-xbox .story-heading img { height: var(--banner-height); object-fit: cover; object-position: center -19px; transform: translateX(3px) scale(1.02); transform-origin: center top; }
.story-press .story-heading { height: calc(77px + var(--sketch-extra-height)); }
.story-press .story-heading img { height: var(--sketch-height); object-fit: cover; object-position: center 89%; }
.story-heading h2 { margin-top: 2px; margin-left: -1px; color: #eee; font: 15px/19px Arial, Helvetica, sans-serif; transform: scale(.98, 1.08); transform-origin: left center; }
.story p { margin-top: 15px; width: 385px; line-height: 12px; }
.text-line { display: block; white-space: nowrap; color: #ddd; transform: scaleY(1); transform-origin: left 10px; }
.story p .item { color: #fff; -webkit-font-smoothing: auto; }
.story-xbox p, .story-press p { margin-top: 7px; }
.related { position: absolute; left: 400px; width: 130px; color: #fff; font-size: 10px; line-height: 15px; }
.related > .item { display: block; padding-left: 15px; color: inherit; text-decoration: none; white-space: nowrap; background: url("assets/file.svg") 0 2px / 8px 10px no-repeat; }
.related > a.item:focus-visible { outline: 1px dotted #ccc; outline-offset: 2px; }
.related-xbox { top: 33px; }
.street-photo { position: absolute; left: 395px; top: 95px; width: 135px; margin: 0; }
.street-photo img { display: block; width: 100%; height: auto; border: 2px solid #333; }
.street-photo figcaption { margin-top: 5px; color: #999; font-size: 9px; line-height: 12px; }
.label { display: inline-block; transform: scaleY(.98); transform-origin: left 9px; }
.taller-text { display: inline-block; transform: scaleY(1.08); transform-origin: left center; }
.related .label { -webkit-font-smoothing: auto; }

.text-layout { position: absolute; left: 97px; top: 73px; width: 530px; height: 575px; }
.text-panel { position: absolute; left: -4px; top: 29px; width: 393px; padding: 5px 4px 4px; border: 1px solid #333; }
.text-panel > h2 { padding: 4px 5px; background: #333; color: #eee; font: 15px/20px Arial, Helvetica, sans-serif; }
.text-panel-copy { padding: 13px 5px 10px; color: #ddd; font-size: 10px; line-height: 16px; }
.text-panel-copy p + p { margin-top: 13px; }
.bench-address { color: #eee; }
.text-panel-copy a { color: #eee; text-underline-offset: 2px; }
.text-panel-copy a:hover { color: #fff; }
.text-panel-copy a:focus-visible { outline: 1px dotted #ccc; outline-offset: 3px; }
.profile-flag-label { display: block; margin-bottom: 5px; color: #999; }
.profile-flag-value { display: block; padding: 8px; border: 1px solid #444; background: #111; color: #eee; font: 11px/17px monospace; overflow-wrap: anywhere; user-select: all; }

.login-dialog {
  width: 395px;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 5px;
  border: 1px solid #444;
  background: #000;
  color: #ccc;
  font: 10px/14px Verdana, Geneva, sans-serif;
  zoom: var(--login-scale);
}
.login-dialog::backdrop { background: rgb(0 0 0 / 78%); }
.login-heading { display: flex; align-items: center; justify-content: space-between; height: 22px; padding-left: 4px; background: #666; color: #eee; }
.login-heading h2 { font: 15px/18px Arial, Helvetica, sans-serif; }
.login-dialog button { cursor: pointer; }
.login-close { align-self: stretch; width: 24px; padding: 0; border: 0; border-left: 1px solid #777; background: #555; color: #eee; font: 18px/20px Arial, Helvetica, sans-serif; }
.login-close:hover { background: #777; }
.login-form { padding: 16px 14px 12px; }
.login-intro { margin-bottom: 18px; color: #aaa; }
.login-field + .login-field { margin-top: 13px; }
.login-field label { display: block; margin-bottom: 5px; color: #ddd; }
.login-field input { display: block; width: 100%; height: 26px; min-width: 0; border: 1px solid #444; border-radius: 0; padding: 4px 6px; background: #111; color: #eee; font: 11px/16px Verdana, Geneva, sans-serif; caret-color: #eee; }
.login-field input:focus { outline: none; border-color: #aaa; }
.login-field input[aria-invalid="true"] { border-color: #ee6565; }
.login-password { display: flex; }
.login-password input { flex: 1; }
.login-reveal { width: 44px; padding: 0; border: 1px solid #444; border-left: 0; background: #222; color: #bbb; font: 10px/14px Verdana, Geneva, sans-serif; }
.login-reveal:hover { color: #fff; background: #333; }
.login-status { min-height: 14px; margin-top: 10px; color: #aaa; }
.login-status[data-error] { color: #ee6565; }
.login-actions { display: flex; justify-content: flex-end; align-items: center; gap: 17px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #333; }
.login-cancel { border: 0; padding: 0; background: none; color: #999; font: 10px/14px Verdana, Geneva, sans-serif; }
.login-cancel:hover { color: #ddd; }
.login-submit { display: flex; align-items: center; justify-content: space-between; width: 83px; height: 25px; border: 1px solid #777; padding: 0 8px; background: #555; color: #fff; font: 11px/16px Verdana, Geneva, sans-serif; }
.login-submit:hover { background: #666; }
.login-dialog button:disabled, .primary-nav button:disabled { cursor: wait; opacity: .65; }
.login-submit span { font: 18px/18px Arial, Helvetica, sans-serif; }
.login-dialog button:focus-visible { outline: 1px dotted #eee; outline-offset: 2px; }
.login-dialog [hidden] { display: none; }
.login-processing { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.login-spinner { display: block; width: 32px; height: 32px; border: 3px solid #333; border-top-color: #ddd; border-radius: 50%; animation: gear-turn .8s linear infinite; }
.login-dialog[data-stage="processing"] .login-intro,
.login-dialog[data-stage="processing"] .login-form > .login-field { visibility: hidden; }
.login-loading { display: flex; align-items: center; gap: 8px; min-height: 26px; margin-top: 12px; color: #bbb; }
.login-gear { width: 22px; height: 22px; animation: gear-turn 2s linear infinite; }
@keyframes gear-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .login-spinner { animation-duration: 2s; }
  .login-gear { animation-duration: 4s; }
}
.login-secret-panel { margin-top: 15px; border: 1px solid #444; padding: 12px; background: #111; }
.login-secret-panel label { font: 15px/20px Arial, Helvetica, sans-serif; color: #eee; }
.login-secret-panel .login-hint { margin: 7px 0 10px; color: #bbb; line-height: 16px; }
.login-hint span { display: block; margin-top: 4px; color: #ddd; }