:root {
  --cobalt: #293de0;
  --yellow: #d8ff36;
  --coral: #ff694d;
  --ivory: #fff2d4;
  --violet: #1b1744;
  --divider: #cec3ae;
  color-scheme: light;
  font-family: "IBM Plex Sans", Arial, sans-serif;
  background: var(--violet);
  color: var(--ivory);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .22em; }
a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.identity a:focus-visible { outline-color: var(--coral); }
.project a:focus-visible, .about-content a:focus-visible { outline-color: var(--violet); }
img { display: block; max-width: 100%; height: auto; }
figure, p { margin: 0; }
p { font-size: 1rem; line-height: 1.65; }
p + p { margin-top: 16px; }
h1, h2, h3, h4 { margin: 0; }
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); max-width: 1600px; margin-inline: auto; min-height: 100svh; }
.identity { padding: 24px 20px; border-right: 2px solid var(--violet); }
.identity-inner { position: sticky; top: 24px; }
.nameplate { display: block; position: relative; padding: 18px 14px; border: 2px solid #0b0930; background: var(--cobalt); box-shadow: inset 2px 2px #fff2d445, inset -2px -2px #1b174488, 4px 4px var(--coral); font-family: Michroma, sans-serif; font-size: 20px; line-height: 1.6; letter-spacing: -.04em; text-transform: uppercase; text-decoration: none; }
.nameplate-corner { position: absolute; right: -2px; top: -2px; width: 15px; height: 15px; background: var(--yellow); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.identity-caption { font-family: "IBM Plex Mono", monospace; font-size: 12px; margin: 18px 0 25px; }
nav { display: grid; gap: 5px; margin-bottom: 26px; }
nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px; border: 1px solid transparent; text-decoration: none; font-size: 14px; }
nav a span { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--coral); }
nav a:hover { background: var(--cobalt); border-color: #fff2d444; }
.console-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 52% center; border: 4px solid var(--yellow); box-shadow: 4px 4px var(--coral); }
.console-photo figcaption { margin-top: 16px; font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.65; }
.console-photo figcaption a { display: inline-block; padding-block: 6px; }
main { min-width: 0; padding: 0 clamp(24px, 4vw, 60px); background-color: var(--cobalt); background-image: repeating-linear-gradient(0deg, transparent 0 3px, #1b174408 3px 4px); border-left: 2px solid #fff2d433; }
main:focus { outline: none; }
.intro { padding: 53px 0 56px; }
.eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: .055em; text-transform: uppercase; }
.intro .eyebrow { margin-bottom: 24px; }
h1 { font-family: Michroma, sans-serif; font-weight: 400; font-size: clamp(28px, 3.35vw, 49px); line-height: 1.4; letter-spacing: -.04em; }
h1 span { color: var(--yellow); }
.intro-copy { max-width: 610px; margin: 24px 0 28px; font-size: 19px; line-height: 1.65; }
.primary-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 48px; padding: 11px 18px; border: 2px solid var(--violet); background: var(--yellow); color: var(--violet); box-shadow: inset 2px 2px #ffffff70, inset -2px -2px #1b174435, 3px 3px var(--violet); font-size: 15px; font-weight: 500; text-decoration: none; }
.primary-link:hover { background: var(--ivory); }
.primary-link:active { transform: translate(1px, 1px); box-shadow: inset 2px 2px #1b174430; }
.primary-link span, .text-link span { font-family: "IBM Plex Mono", monospace; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-heading h2 { font-family: "IBM Plex Mono", monospace; font-size: 15px; line-height: 1.6; text-transform: uppercase; letter-spacing: .03em; padding: 9px 16px; background: var(--yellow); color: var(--violet); border: 2px solid var(--violet); box-shadow: 3px 3px var(--coral); }
.project { border: 2px solid var(--violet); background: var(--ivory); color: var(--violet); box-shadow: 4px 4px var(--coral); min-width: 0; }
.project-titleplate { display: flex; align-items: center; gap: 12px; padding: 15px 22px; min-height: 67px; border-bottom: 2px solid var(--violet); background: var(--coral); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.project-titleplate h3 { font-size: 24px; font-weight: 600; line-height: 1.35; }
.project-number { font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.project-category { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.featured-content { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
.project-copy { padding: 28px; }
.project-copy h4 { font-size: 23px; line-height: 1.35; font-weight: 600; margin-bottom: 16px; letter-spacing: -.02em; }
.project-copy .project-credit { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--divider); font-size: 13px; line-height: 1.6; }
.project-visual { padding: 22px 22px 0; }
.project-visual a { display: block; border: 2px solid var(--violet); background: white; box-shadow: 3px 3px #1b174420; }
.project-visual a:hover { border-color: var(--cobalt); }
.project-visual img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.project-visual figcaption { padding-top: 12px; font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.65; }
.rankaholic-visual { padding: 28px 28px 28px 0; }
.rankaholic-visual img { aspect-ratio: 2156 / 1044; object-fit: contain; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 26px; align-items: stretch; }
.project-grid .project { display: flex; flex-direction: column; }
.project-grid .project-titleplate h3 { font-size: 22px; }
.project-grid .project-copy { padding-top: 24px; }
.text-link { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; }
.project-copy .text-link { margin-top: 16px; }
.text-link:hover { color: var(--cobalt); }
.about-section { margin-top: 56px; }
.about-content { display: grid; grid-template-columns: 160px minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 32px; background: var(--ivory); color: var(--violet); border: 2px solid var(--violet); box-shadow: inset 3px 3px #ffffff80, inset -3px -3px #1b174420, 4px 4px var(--coral); }
.about-portrait { width: 160px; aspect-ratio: 1; border: 2px solid var(--violet); box-shadow: 3px 3px var(--coral); }
.about-lead { font-size: 28px; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; }
.outside-work { border-left: 1px solid var(--divider); padding-left: 32px; }
.outside-work .eyebrow { margin-bottom: 16px; }
.outside-work .text-link { margin-top: 16px; }
.contact-section { padding: 60px 0 54px; max-width: 660px; }
.contact-section h2 { font-family: Michroma, sans-serif; font-size: 30px; font-weight: 400; line-height: 1.5; letter-spacing: -.04em; margin-top: 16px; }
.contact-section > p:not(.eyebrow) { font-size: 18px; margin: 18px 0 24px; }
.email-address { display: inline-block; margin-left: 20px; font-size: 14px; overflow-wrap: anywhere; padding-block: 14px; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0 24px; border-top: 1px solid #fff2d450; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.site-footer small { font-size: inherit; }
.site-footer a { display: inline-block; padding-block: 10px; }
.photo-credit { display: none !important; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 10; padding: 12px 18px; background: var(--yellow); color: var(--violet); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
@media (min-width: 841px) and (max-height: 740px) { .identity-inner { position: static; } }
@media (max-width: 1100px) {
  .featured-content { grid-template-columns: 1fr; }
  .rankaholic-visual { padding: 0 28px 28px; }
  .project-grid { grid-template-columns: 1fr; }
  .about-content { grid-template-columns: 160px minmax(0, 1fr); }
  .project-grid { gap: 20px; }
  .outside-work { grid-column: 1 / -1; border-left: 0; padding-left: 0; padding-top: 24px; border-top: 1px solid var(--divider); }
  .about-content { gap: 26px; padding: 26px; }
  .project-titleplate { padding-inline: 18px; }
  .project-copy { padding: 24px; }
  .project-grid .project-titleplate h3 { font-size: 20px; }
}
@media (max-width: 840px) {
  .shell { grid-template-columns: 195px minmax(0, 1fr); }
  .identity { padding: 20px 15px; }
  .identity-inner { top: 20px; }
  .nameplate { font-size: 17px; padding: 16px 12px; }
  main { padding-inline: 24px; }
  .intro { padding-top: 36px; }
  h1 { font-size: 29px; }
  .intro-copy { font-size: 18px; }
  .about-content { grid-template-columns: 1fr; gap: 22px; }
  .about-portrait { width: 144px; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 18px; }
  .shell { display: block; }
  .identity { border-right: 0; padding: 16px; }
  .identity-inner { position: static; display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 0 18px; align-items: start; }
  .nameplate { grid-column: 1; width: fit-content; min-width: 166px; font-size: 15px; padding: 10px 18px; line-height: 1.5; }
  .identity-caption { display: none; }
  nav { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-between; gap: 8px; margin: 18px 0 0; }
  nav a { padding: 8px 0; font-size: 13px; min-height: 44px; gap: 6px; border: 0; }
  nav a:hover { background: transparent; text-decoration: underline; }
  nav a span { font-size: 11px; }
  .console-photo { grid-column: 2; grid-row: 1; }
  .console-photo img { height: 79px; aspect-ratio: auto; border-width: 3px; object-position: 52% 34%; }
  .console-photo figcaption { display: none; }
  main { padding-inline: 18px; border-left: 0; border-top: 2px solid #fff2d433; }
  .intro { padding: 32px 0 38px; }
  .intro .eyebrow { margin-bottom: 18px; font-size: 11px; }
  h1 { font-size: clamp(23px, 5.6vw, 34px); line-height: 1.5; letter-spacing: -.04em; }
  .intro-copy { margin-top: 18px; font-size: 17px; }
  .primary-link { font-size: 14px; gap: 22px; }
  .section-heading { margin-bottom: 18px; }
  .section-heading h2 { font-size: 13px; padding: 8px 13px; }
  .project-titleplate { min-height: 60px; padding: 13px 16px; gap: 10px; }
  .project-titleplate h3, .project-grid .project-titleplate h3 { font-size: 22px; }
  .project-category { display: none; }
  .project-copy { padding: 22px 20px; }
  .project-copy h4 { font-size: 22px; }
  .project-visual { padding: 20px 18px 0; }
  .rankaholic-visual { padding: 0 18px 22px; }
  .project-visual figcaption { font-size: 10px; }
  .project-grid { margin-top: 24px; gap: 24px; }
  .about-section { margin-top: 40px; }
  .about-content { padding: 24px 20px; }
  .about-lead { font-size: 25px; }
  .contact-section { padding: 42px 0 34px; }
  .contact-section h2 { font-size: 26px; }
  .contact-section > p:not(.eyebrow) { font-size: 17px; }
  .email-address { display: block; margin: 10px 0 0; }
  .site-footer { font-size: 10px; gap: 12px; flex-wrap: wrap; }
  .photo-credit { display: inline-block !important; order: 3; width: 100%; padding-top: 0 !important; }
}
@media (max-width: 340px) {
  main { padding-inline: 12px; }
  .identity { padding: 14px 12px; }
  .identity-inner { grid-template-columns: minmax(0, 1fr) 79px; gap: 0 12px; }
  .nameplate { min-width: 0; width: 100%; font-size: 14px; padding-inline: 14px; }
  h1 { font-size: 23px; }
  .project-titleplate h3, .project-grid .project-titleplate h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }