* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:96px
}
body {
  margin:0;
  background:var(--tnb-paper);
  color:var(--tnb-ink);
  font:1.0625rem/1.55 var(--serif)
}
a {
  color:inherit;
  text-underline-offset:5px
}
button {
  font:inherit;
  cursor:pointer
}
a,button {
  touch-action:manipulation
}
button,a {
  border-radius:0
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--tnb-blue);
  outline-offset:5px
}
.coaching :focus-visible,.colophon :focus-visible {
  outline-color:var(--tnb-paper)
}
img {
  display:block;
  max-width:100%;
  height:auto
}
figure {
  margin:0
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-weight:normal
}
h1,h2,h3 {
  font-family:var(--display);
  line-height:.98;
  letter-spacing:0
}
h1 {
  font-size:clamp(4.5rem,7.2vw,7rem)
}
h2 {
  font-size:clamp(2.6rem,5.3vw,5.5rem)
}
h3 {
  font-size:clamp(2rem,3.2vw,3.5rem)
}
p:last-child {
  margin-bottom:0
}
.section,.masthead,.navigation-inner {
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:48px
}
.section {
  padding-block:64px
}
main {
  overflow:clip
}
.utility,.kicker,.copy-status,.story-note,figcaption,dt {
  font-family:var(--utility)
}
.utility,.kicker {
  font-size:.8125rem;
  line-height:1.4;
  letter-spacing:.075em;
  font-weight:700
}
.kicker {
  color:var(--tnb-blue);
  margin-bottom:16px
}
.copy-status {
  display:block;
  font-size:.75rem;
  line-height:1.45;
  letter-spacing:.025em;
  margin-top:24px
}
.story-note,figcaption {
  font-size:.8125rem;
  line-height:1.5
}
.deck {
  font-size:clamp(1.35rem,2.1vw,1.75rem);
  line-height:1.25
}
.skip-link {
  position:fixed;
  left:16px;
  top:-120px;
  background:var(--tnb-ink);
  color:var(--tnb-paper);
  padding:16px;
  z-index:100
}
.skip-link:focus {
  top:16px
}
.review-note {
  background:var(--tnb-ink);
  color:var(--tnb-paper);
  padding:10px 24px;
  font:12px/1.5 var(--utility);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap
}
.masthead {
  padding-top:24px
}
.masthead-meta {
  display:flex;
  justify-content:space-between;
  color:var(--tnb-blue)
}
.masthead-word {
  display:block;
  font:900 clamp(10rem,32vw,29rem)/.88 var(--utility);
  letter-spacing:-.075em;
  color:var(--tnb-red);
  text-decoration:none;
  padding:8px 0 24px;
  width:max-content;
  max-width:100%
}
.navigation {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--tnb-paper);
  border-block:2px solid var(--tnb-ink)
}
.navigation-inner {
  display:flex;
  align-items:center;
  min-height:64px;
  gap:24px
}
.compact-mark {
  font:900 30px/1 var(--utility);
  letter-spacing:-.09em;
  color:var(--tnb-red);
  text-decoration:none
}
.desktop-nav {
  display:flex;
  gap:24px;
  align-items:center;
  flex:1
}
.desktop-nav a,.work-link,.menu-toggle,.menu-close {
  font:700 .875rem/1.2 var(--utility);
  text-transform:uppercase;
  text-decoration:none
}
.desktop-nav a {
  padding-block:23px
}
.desktop-nav a:hover {
  text-decoration:underline
}
.work-link {
  display:flex;
  gap:16px;
  align-items:center;
  background:var(--tnb-red);
  color:var(--tnb-paper);
  padding:16px;
  min-height:48px
}
.menu-toggle {
  display:none;
  min-height:48px;
  background:transparent;
  border:0
}
.cover {
  padding-top:32px
}
.cover-meta {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--tnb-ink);
  padding-bottom:16px;
  margin-bottom:24px;
  gap:16px
}
.cover-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px
}
.cover-copy {
  grid-column:span 4;
  border-left:var(--rule-graphic) solid var(--tnb-blue);
  padding-left:24px;
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  justify-content:center
}
.cover-copy h1 {
  color:var(--tnb-red);
  margin-bottom:24px
}
.cover-copy .deck {
  max-width:240px
}
.cover-copy .button {
  margin-top:16px
}
.cover-image {
  grid-column:span 8
}
.portrait-window {
  position:relative;
  overflow:hidden;
  aspect-ratio:934/899;
  width:100%;
  background:#c7ba9e
}
.portrait-window img {
  position:absolute;
  max-width:none;
  width:116.2741%;
  height:auto;
  left:-9.9572%;
  top:-35.8176%
}
.cover-image figcaption {
  padding-top:12px;
  max-width:65ch
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  background:var(--tnb-red);
  color:var(--tnb-paper);
  padding:16px 20px;
  font:700 .875rem/1.3 var(--utility);
  text-decoration:none
}
.button:hover {
  background:var(--tnb-ink)
}
.section-heading {
  border-top:2px solid var(--tnb-ink);
  padding-top:24px
}
.section-heading h2 {
  margin-bottom:24px
}
.heading-row {
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:end
}
.heading-row .section-deck {
  margin-bottom:24px
}
.section-deck {
  font-size:1.5rem;
  line-height:1.3
}
.contents {
  padding-top:24px
}
.contents-grid {
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:64px
}
.index-row {
  display:grid;
  grid-template-columns:90px 1fr 30px;
  gap:24px;
  align-items:center;
  padding-block:16px;
  border-bottom:1px solid var(--tnb-blue);
  text-decoration:none;
  min-height:90px
}
.index-number {
  font:4rem/.9 var(--display);
  color:var(--tnb-red)
}
.index-title {
  font:1.5rem var(--utility);
  font-weight:700
}
.index-detail {
  display:block;
  font:1rem var(--serif);
  margin-top:4px
}
.index-arrow {
  font:1.6rem var(--utility)
}
.index-row:hover,.index-row:focus-visible {
  background:var(--tnb-blue);
  color:var(--tnb-paper)
}
.index-row:hover .index-number,.index-row:focus-visible .index-number {
  color:var(--tnb-paper)
}
.index-note {
  border:2px solid var(--tnb-blue);
  color:var(--tnb-blue);
  padding:32px;
  align-self:start;
  margin-top:16px
}
.index-note>p {
  font:clamp(2.5rem,4vw,4.5rem)/1 var(--display);
  margin:32px 0
}
.editorial-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  border-top:2px solid var(--tnb-blue);
  margin-top:24px;
  gap:0 24px
}
.editorial-grid>article {
  padding:32px 0;
  border-bottom:1px solid var(--tnb-blue)
}
.editorial-grid>article p {
  max-width:48ch
}
.editorial-lead {
  grid-column:span 8
}
.editorial-artist {
  grid-column:span 4;
  grid-row:span 2
}
.story-top {
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:var(--tnb-blue);
  margin-bottom:48px
}
.editorial-lead h3 {
  font-size:clamp(3.5rem,6.5vw,6rem);
  color:var(--tnb-red)
}
.editorial-artist figure {
  max-width:310px;
  margin-bottom:24px
}
.editorial-artist img {
  width:100%;
  max-height:340px;
  object-fit:contain;
  object-position:left
}
.editorial-artist figcaption {
  margin-top:12px
}
.editorial-artist h3 {
  color:var(--tnb-blue);
  font-size:2.5rem
}
.editorial-read {
  grid-column:span 3
}
.editorial-field {
  grid-column:span 5;
  padding-inline:24px!important;
  border-left:6px solid var(--tnb-blue)
}
.editorial-notebook {
  grid-column:span 8
}
.editorial-tools {
  grid-column:span 4
}
.editorial-notebook h3 {
  color:var(--tnb-red);
  font-size:clamp(2.5rem,4.5vw,4.75rem)
}
.editorial-tools h3 {
  color:var(--tnb-blue)
}
.paste-up {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:48px 16px 24px;
  gap:0
}
.artifact {
  border:2px solid var(--tnb-ink);
  padding:24px;
  background:var(--tnb-paper);
  box-shadow:0 4px 12px #00000014;
  align-self:start
}
.artifact h3 {
  margin:32px 0 24px
}
.artifact-one {
  transform:rotate(-2deg);
  color:var(--tnb-blue);
  position:relative;
  z-index:1
}
.artifact-two {
  transform:rotate(2deg);
  margin-top:64px;
  border-color:var(--tnb-red)
}
.artifact-two h3 {
  color:var(--tnb-red)
}
.artifact-three {
  transform:rotate(-1deg);
  margin-top:24px;
  background:var(--tnb-blue);
  color:var(--tnb-paper)
}
.artifact-rule {
  height:6px;
  background:var(--tnb-red);
  margin-bottom:24px
}
.artifact dl {
  border-top:1px solid;
  padding-top:16px;
  font-size:.875rem
}
dt {
  font-size:.75rem;
  text-transform:uppercase;
  margin-top:12px
}
dd {
  margin:4px 0 0
}
.studio {
  background:var(--tnb-blue);
  color:var(--tnb-paper)
}
.studio .kicker {
  color:inherit
}
.studio-grid {
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:64px
}
.studio h2 {
  font-size:clamp(3rem,5.5vw,5.8rem)
}
.studio-manifesto {
  font:clamp(1.65rem,2.5vw,2.5rem)/1.2 var(--display);
  border-top:1px solid;
  padding-top:24px
}
.studio-aside img {
  width:128px;
  margin-bottom:24px
}
.studio-aside p {
  font-size:1.375rem;
  line-height:1.45;
  max-width:35ch
}
.text-link {
  display:inline-block;
  font:700 .875rem var(--utility);
  padding:16px 0
}
.studio a:focus-visible {
  outline-color:var(--tnb-paper)
}
.about-block {
  border-top:1px solid;
  margin-top:48px;
  padding-top:32px;
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:64px
}
.about-block p {
  max-width:40ch
}
.coaching {
  background:var(--tnb-red);
  color:var(--tnb-paper);
  margin-top:64px
}
.coaching .kicker {
  color:inherit
}
.coaching h2 {
  font-size:clamp(4rem,9vw,9rem);
  margin-bottom:32px
}
.coaching-grid {
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:64px
}
.coaching .deck {
  font-size:clamp(1.75rem,3vw,2.7rem)
}
.coaching-grid>div>p {
  max-width:38ch
}
.process {
  font:700 .875rem/1.8 var(--utility);
  margin-top:32px
}
.reverse {
  background:var(--tnb-paper);
  color:var(--tnb-red)
}
.reverse:hover {
  background:var(--tnb-ink);
  color:var(--tnb-paper)
}
.conversation {
  border-top:1px solid;
  margin-top:48px;
  padding-top:24px;
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr;
  gap:32px
}
.conversation h3 {
  font-size:1.875rem
}
.conversation>p {
  font: .875rem/1.5 var(--utility)
}
.team h2 {
  font-size:clamp(2.5rem,4.3vw,4.5rem)
}
.team-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:32px;
  border-top:2px solid var(--tnb-blue)
}
.voice {
  padding:24px 20px 16px 0
}
.voice+.voice {
  padding-left:20px;
  border-left:1px solid var(--tnb-blue)
}
.voice h3 {
  font:700 .875rem var(--utility);
  color:var(--tnb-blue)
}
.voice p {
  font-size:1.2rem
}
.colophon {
  background:var(--tnb-ink);
  color:var(--tnb-paper)
}
.colophon .kicker {
  color:inherit
}
.colophon h2 {
  font-size:clamp(4rem,9vw,9rem)
}
.footer-grid {
  display:grid;
  grid-template-columns:1fr 1.5fr 1.5fr;
  gap:48px;
  border-top:1px solid;
  padding-top:32px
}
.footer-grid nav {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.footer-grid nav a {
  font:700 .875rem var(--utility);
  padding:12px 0;
  min-height:44px
}
.footer-grid h3 {
  font:700 .875rem var(--utility)
}
.footer-grid p {
  font-size:1rem
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-top:64px;
  padding-top:24px;
  border-top:1px solid
}
.footer-bottom a {
  padding-block:12px
}
dialog {
  position:fixed;
  inset:0;
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:none;
  margin:0;
  border:0;
  background:var(--tnb-paper);
  color:var(--tnb-ink);
  padding:24px;
  overflow:auto
}
dialog::backdrop {
  background:var(--tnb-ink)
}
body.menu-open {
  overflow:hidden
}
.menu-head {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  border-bottom:2px solid var(--tnb-blue);
  padding-bottom:16px
}
.menu-head h2 {
  font-size:1.5rem;
  margin:0
}
.menu-close {
  background:transparent;
  border:1px solid;
  min-height:48px;
  padding:12px
}
.menu-head+nav {
  margin-block:24px
}
dialog nav a {
  display:flex;
  gap:24px;
  align-items:center;
  text-decoration:none;
  font:2.5rem var(--display);
  border-bottom:1px solid;
  padding-block:16px
}
dialog nav a span {
  color:var(--tnb-red)
}
dialog>.utility {
  margin-top:32px
}
@media(min-width:1440px) {
  .cover-copy h1 {
    font-size:7rem
  }
}
@media(max-width:1023px) {
  .section,.masthead,.navigation-inner {
    padding-inline:24px
  }
  .navigation-inner {
    gap:16px
  }
  .desktop-nav {
    gap:16px
  }
  .desktop-nav a {
    font-size:.75rem
  }
  .cover-copy {
    padding-left:16px
  }
  .cover-copy h1 {
    font-size:clamp(3.3rem,7vw,5rem)
  }
  .contents-grid,.studio-grid,.about-block,.coaching-grid {
    gap:32px
  }
  .index-row {
    grid-template-columns:64px 1fr 24px;
    gap:16px
  }
  .index-title {
    font-size:1.25rem
  }
  .index-number {
    font-size:3.5rem
  }
  .index-note {
    padding:24px
  }
  .artifact {
    padding:20px
  }
  .artifact h3 {
    font-size:2.2rem
  }
  .team-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .voice:nth-child(4) {
    border-left:0;
    padding-left:0
  }
  .voice {
    border-bottom:1px solid var(--tnb-blue)
  }
  .footer-grid {
    gap:24px
  }
  .conversation {
    grid-template-columns:1fr 1fr
  }
  .conversation>p {
    grid-column:1/-1;
    max-width:65ch
  }
}
@media(max-width:767px) {
  html {
    scroll-padding-top:88px
  }
  .section {
    padding-block:48px
  }
  .section,.masthead,.navigation-inner {
    padding-inline:20px
  }
  .review-note {
    padding:8px 20px;
    font-size:12px;
    gap:4px
  }
  .review-note span {
    max-width:30ch
  }
  .masthead-meta {
    font-size:.75rem
  }
  .masthead-meta span:last-child {
    display:none
  }
  .masthead-word {
    font-size:40vw;
    padding-block:12px 20px
  }
  .navigation-inner {
    min-height:64px;
    gap:16px
  }
  .compact-mark {
    margin-right:auto
  }
  .desktop-nav {
    display:none
  }
  .work-link {
    font-size:.75rem;
    padding:12px;
    gap:8px
  }
  .menu-toggle {
    display:block;
    font-size:.8125rem
  }
  .cover {
    padding-top:24px
  }
  .cover-meta {
    font-size:.75rem;
    flex-wrap:wrap;
    gap:8px
  }
  .cover-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px
  }
  .cover-copy,.cover-image {
    grid-column:1/-1
  }
  .cover-copy {
    display:block;
    padding-left:20px
  }
  .cover-copy h1 {
    font-size:clamp(4rem,12vw,6rem);
    margin-bottom:16px
  }
  .cover-copy .deck {
    max-width:26ch
  }
  .cover-copy .copy-status {
    margin-top:16px
  }
  .cover-image figcaption {
    font-size:.75rem
  }
  .contents-grid {
    grid-template-columns:1fr;
    gap:24px
  }
  .index-row {
    grid-template-columns:64px 1fr 24px
  }
  .index-detail {
    font-size:.9375rem
  }
  .index-note {
    margin:0
  }
  .index-note>p {
    font-size:2.8rem;
    line-height:1.1
  }
  .heading-row {
    display:block
  }
  .editorial-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .editorial-grid>article {
    grid-column:1/-1;
    grid-row:auto
  }
  .editorial-lead h3 {
    font-size:clamp(3rem,10vw,5rem)
  }
  .editorial-artist {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
  }
  .editorial-artist>.kicker {
    grid-column:1/-1
  }
  .editorial-artist figure {
    grid-row:span 2;
    margin:0
  }
  .editorial-artist h3 {
    font-size:2rem;
    align-self:end;
    margin:0
  }
  .editorial-artist p {
    font-size:1rem
  }
  .editorial-field {
    border-left-width:6px
  }
  .story-top {
    margin-bottom:24px
  }
  .paste-up {
    grid-template-columns:1fr;
    padding:24px 4px;
    gap:20px
  }
  .artifact {
    transform:rotate(-1deg);
    margin:0;
    padding:24px
  }
  .artifact-two {
    transform:rotate(1deg)
  }
  .artifact h3 {
    font-size:3rem
  }
  .artifact dl {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .artifact dt {
    margin:0
  }
  .artifact dd {
    margin:0
  }
  .studio-grid,.about-block,.coaching-grid {
    grid-template-columns:1fr;
    gap:24px
  }
  .studio h2 {
    font-size:clamp(3rem,10vw,5rem)
  }
  .studio-manifesto {
    font-size:clamp(1.5rem,5.4vw,2.4rem)
  }
  .studio-aside img {
    width:96px
  }
  .studio-aside p {
    font-size:1.25rem
  }
  .about-block {
    margin-top:32px
  }
  .coaching {
    margin-top:32px
  }
  .coaching h2 {
    font-size:clamp(4rem,12vw,6rem)
  }
  .conversation {
    grid-template-columns:1fr;
    gap:24px
  }
  .conversation>p {
    grid-column:auto
  }
  .conversation h3 {
    font-size:2rem
  }
  .team-grid {
    grid-template-columns:1fr
  }
  .voice,.voice+.voice,.voice:nth-child(4) {
    border-left:0;
    padding:24px 0
  }
  .voice p {
    max-width:32ch;
    margin-bottom:0
  }
  .footer-grid {
    grid-template-columns:1fr;
    gap:32px
  }
  .footer-grid nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
  }
  .footer-bottom {
    flex-direction:column;
    gap:8px;
    margin-top:32px
  }
  .colophon h2 {
    font-size:clamp(3.5rem,11vw,6rem)
  }
}
@media(max-width:479px) {
  .section,.masthead,.navigation-inner {
    padding-inline:16px
  }
  .navigation-inner {
    gap:12px
  }
  .work-link {
    padding:12px 10px;
    font-size:.7rem
  }
  .menu-toggle {
    font-size:.75rem
  }
  .editorial-artist {
    grid-template-columns:1fr
  }
  .editorial-artist>.kicker {
    grid-column:auto
  }
  .editorial-artist figure {
    max-width:250px;
    grid-row:auto
  }
  .editorial-artist h3 {
    font-size:2.5rem
  }
  .index-row {
    gap:12px;
    grid-template-columns:52px 1fr 20px
  }
  .index-number {
    font-size:3rem
  }
  .index-title {
    font-size:1.1rem
  }
  .cover-copy h1 {
    font-size:clamp(3.6rem,13vw,5rem)
  }
  .artifact dl {
    display:block
  }
  .artifact dt {
    margin-top:12px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}
@media print {
  .review-note,.navigation,.skip-link,dialog {
    display:none
  }
  .section {
    break-inside:avoid
  }
  .coaching,.studio,.colophon {
    background:white;
    color:black
  }
  body {
    background:white
  }
  .masthead-word {
    font-size:120px
  }
  .section {
    padding:24px
  }
  .copy-status {
    display:block
  }
}

/* Tablet uses the canon's six-column structure. */
@media (min-width:768px) and (max-width:1023px) {
  .cover-grid, .editorial-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .cover-copy { grid-column:span 2; }
  .cover-image { grid-column:span 4; }
  .editorial-lead, .editorial-notebook { grid-column:span 4; }
  .editorial-artist, .editorial-read, .editorial-field, .editorial-tools { grid-column:span 2; }
}
@media (max-width:479px) {
  .work-link { font-size:.75rem; }
}