:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: #626262; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
.page { position: relative; min-height: max(1080px, 115vh); overflow: clip; }
.back-link { display: inline-block; margin-bottom: 6px; color: #8b8b8b; font-size: 14px; font-weight: 400; }
.back-link:hover, .back-link:focus-visible { color: #222; }
main { position: relative; width: min(490px, calc(100% - 48px)); margin: 0 auto; padding: 125px 0 210px; z-index: 2; pointer-events: none; }
main > * { pointer-events: auto; }
header { position: relative; }
.brand-text { transition: color 180ms; }
.brand-text.is-active { color: #222; }
.local-time { color: #b0b0b0; font-variant-numeric: tabular-nums; }
.local-time::before { content: '·'; margin-right: 6px; }
h1 { margin: 0; font-size: 17px; font-weight: 550; letter-spacing: -.035em; color: #222; }
p { margin: 0; }
.intro { margin-top: 3px; color: #858585; }
a, .detail-name { color: #242424; font-weight: 550; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color 180ms, color 180ms; }
a:hover, a:focus-visible, a.is-active, summary:hover .detail-name, summary:focus-visible .detail-name, details[open] .detail-name { text-decoration-color: currentColor; color: #000; }
a:focus-visible, summary:focus-visible { outline: 1px solid #777; outline-offset: 5px; border-radius: 2px; }
.timeline { list-style: none; padding: 0; margin: 60px 0 0; }
.entry { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; margin-bottom: 28px; }
.date { color: #8b8b8b; font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.entry-now { margin-bottom: 28px; }
.entry-now .date { color: #303030; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.detail-copy { margin-top: 10px; font-size: 14px; color: #858585; }
footer { margin: 65px 0 0 88px; font-size: 14px; }
footer::before { content: ''; display: block; width: 30px; height: 1px; background: #e6e6e6; margin-bottom: 26px; }
.footer-faq { margin-left: 44px; }
.faq { list-style: none; padding: 0; margin: 18px 0 0; }
.faq-page main { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.faq li { margin-bottom: 22px; }
.mobile-break { display: none; }
.pin { position: absolute; top: 50%; display: block; z-index: 1; opacity: .5; translate: 0 calc(-50% + var(--y, 0px)); transform: translateY(calc(var(--drift, 0) * var(--depth, 1) * 1px)); filter: drop-shadow(0 1px .5px rgb(0 0 0 / .26)) drop-shadow(1px 5px 5px rgb(0 0 0 / .13)); transition: opacity 240ms ease; text-decoration: none; }
.pin-left { right: calc(100% + max(16px, min(var(--gap), (100vw - 100%) / 2 - var(--w) - 20px))); }
.pin-right { left: calc(100% + max(16px, min(var(--gap), (100vw - 100%) / 2 - var(--w) - 20px))); }
.pin-art { display: block; width: var(--w); height: auto; overflow: visible; rotate: var(--angle, 0deg); transition: scale 240ms ease; }
/* A loose pinboard around the column: each pin hangs off its own line, nudged up or down to fill the edges.
   Pins keep 16px clear of the text; in a narrow window they run off the edge of the screen instead. */
.pin-superwhisper { --w: 210px; --gap: 140px; --y: -116px; --angle: -2deg; --depth: 1; }
.pin-canada { --w: 70px; --gap: 250px; --y: -46px; --angle: 9deg; --depth: .45; }
.pin-opg { --w: 108px; --gap: 64px; --y: -26px; --angle: -7deg; --depth: .7; }
.pin-tsn { --w: 130px; --gap: 210px; --y: -26px; --angle: 6deg; --depth: .85; }
.pin-bardown { --w: 86px; --gap: 140px; --y: 138px; --angle: 8deg; --depth: .55; }
.pin-waterloo { --w: 96px; --gap: 150px; --y: 118px; --angle: -9deg; --depth: .6; }
/* Corner pins hang off the page itself, measured from the same 490px column. */
.pin-corner { top: auto; translate: none; }
.pin-cn-tower { --w: 44px; --gap: 300px; --angle: -6deg; --depth: .4; bottom: -96px; right: calc(50% + max(261px, min(245px + var(--gap), 50vw - var(--w) - 20px))); }
.pin-camera { --w: 112px; --gap: 110px; --angle: 7deg; --depth: .75; bottom: 9vh; left: calc(50% + max(261px, min(245px + var(--gap), 50vw - var(--w) - 20px))); }
.pin:hover, .pin:focus-visible, .pin.is-active { opacity: 1; z-index: 3; }
.pin:hover .pin-art, .pin:focus-visible .pin-art, .pin.is-active .pin-art { scale: 1.06; }
@media (min-width: 701px) and (min-height: 600px) {
  .home { height: 100dvh; overflow: hidden; }
  .home .page { height: 100dvh; min-height: 0; display: flex; align-items: center; }
  .home main { padding: 0; }
  .home .timeline { margin-top: clamp(26px, 5.5vh, 60px); }
  .home .entry, .home .entry-now { margin-bottom: clamp(10px, 2.4vh, 26px); }
  .home footer { margin-top: clamp(26px, 5vh, 60px); }
  .home footer::before { margin-bottom: clamp(14px, 2.6vh, 26px); }
}
.archive-page { min-height: 100vh; }
.archive-main { width: min(1100px, calc(100% - 72px)); margin: 0 auto; padding: 115px 0 72px; }
.archive-header { margin-bottom: 32px; }
.archive-header h1 { font-size: 17px; }
.archive-header p { margin-top: 3px; color: #858585; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.photo-grid a { display: block; overflow: hidden; border-radius: 18px; background: #f4f4f4; }
.photo-grid img { display: block; width: 100%; height: auto; }
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: clamp(54px, 7vw, 96px); background: rgba(255, 255, 255, .98); overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(255, 255, 255, .96); }
.lightbox-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-close { position: fixed; top: 23px; right: 32px; z-index: 2; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; color: #222; font: 300 39px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; cursor: pointer; }
.lightbox-close:hover, .lightbox-close:focus-visible { color: #000; }
.lightbox-close:focus-visible { outline: 1px solid #777; outline-offset: 2px; }
.project-page { min-height: 100vh; }
.project-main { width: min(980px, calc(100% - 72px)); margin: 0 auto; padding: 126px 0 90px; }
.project-header { width: min(540px, 100%); margin-bottom: 58px; }
.project-header h1 { margin-top: 4px; font-size: clamp(34px, 5vw, 58px); font-weight: 550; }
.project-role { margin-top: 2px; color: #858585; }
.project-hero { display: block; width: 100%; height: auto; }
.project-story { width: min(600px, 100%); margin: 72px auto; font-size: 18px; line-height: 1.65; color: #4d4d4d; }
.project-story p + p { margin-top: 24px; }
.project-figure { margin: 0; }
.project-figure img { display: block; width: 100%; height: auto; }
.project-figure figcaption { margin-top: 9px; color: #8b8b8b; font-size: 13px; }
.project-figure-tall { width: min(760px, 100%); margin: 0 auto; }
.project-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.project-pair .project-figure:last-child img { aspect-ratio: 1125 / 1500; object-fit: cover; object-position: top; }
.project-footer { margin: 90px 0 0; font-size: 14px; }
@media (max-width: 700px) {
  body { font-size: 15px; }
  main { width: min(440px, calc(100% - 44px)); padding-top: 86px; padding-bottom: 72px; }
  .page { min-height: 0; }
  .timeline { margin-top: 46px; }
  .entry { grid-template-columns: 62px minmax(0, 1fr); gap: 10px; margin-bottom: 27px; }
  .entry-now { margin-bottom: 34px; }
  .date { font-size: 12px; }
  footer { margin-left: 72px; margin-top: 48px; }
  /* Phones stay clean: only the Canada flag, fully opaque, at the far right of the name. */
  .pin { display: none; }
  .pin-canada { display: block; opacity: 1; right: 0; left: auto; --w: 54px; --y: -21px; --angle: 8deg; }
  .archive-main { width: calc(100% - 28px); padding-top: 86px; }
  .archive-header { margin-left: 8px; margin-bottom: 24px; }
  .photo-grid { gap: 7px; }
  .photo-grid a { border-radius: 10px; }
  .lightbox { padding: 62px 14px 22px; }
  .lightbox-close { top: 12px; right: 12px; }
  .project-main { width: calc(100% - 28px); padding-top: 86px; }
  .project-header { margin: 0 8px 34px; width: calc(100% - 16px); }
  .project-story { margin: 48px auto; padding: 0 8px; font-size: 16px; }
  .project-pair { grid-template-columns: 1fr; gap: 32px; }
  .project-footer { margin: 64px 8px 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }