@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700&family=Mulish:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Inter&display=swap');
/* Document
 * ========================================================================== */
/**
 * Add border box sizing in all browsers (opinionated).
 */
*,
::before,
::after {
  box-sizing: border-box;
}
/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}
/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */
html {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent /* 4 */;
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}
/* Sections
 * ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}
/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */
dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}
/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */
ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}
/**
 * 1. Add the correct sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */
hr {
  overflow: visible; /* 2 */
}
/**
 * Add the correct display in IE.
 */
main {
  display: block;
}
/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
nav ol,
nav ul {
  list-style: none;
  padding: 0;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/* Embedded content
 * ========================================================================== */
/*
 * Change the alignment on media elements in all browsers (opinionated).
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
/**
 * Remove the border on iframes in all browsers (opinionated).
 */
iframe {
  border-style: none;
}
/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
svg:not([fill]) {
  fill: currentColor;
}
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Tabular data
 * ========================================================================== */
/**
 * Collapse border spacing in all browsers (opinionated).
 */
table {
  border-collapse: collapse;
}
/* Forms
 * ========================================================================== */
/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */
button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}
/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */
fieldset {
  border: 1px solid #a0a0a0; /* 1 */
}
/**
 * Show the overflow in Edge 18- and IE.
 */
input {
  overflow: visible;
}
/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */
legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}
/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
progress {
  display: inline-block; /* 1 */
}
/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */
textarea {
  overflow: auto; /* 2 */
  resize: vertical; /* 3 */
}
/* Interactive
 * ========================================================================== */
/*
 * Add the correct display in Edge 18- and IE.
 */
details {
  display: block;
}
/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */
dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: fit-content;
}
dialog:not([open]) {
  display: none;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Scripting
 * ========================================================================== */
/**
 * Add the correct display in IE.
 */
template {
  display: none;
}
/* User interaction
 * ========================================================================== */
/*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] { /* 1 */
  touch-action: manipulation; /* 2 */
}
/* Accessibility
 * ========================================================================== */
/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */
[aria-busy="true"] {
  cursor: progress;
}
/*
 * Change the cursor on control elements in all browsers (opinionated).
 */
[aria-controls] {
  cursor: pointer;
}
/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */
[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}
/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */
[aria-hidden="false"][hidden] {
  display: inline;
  display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}
/**
 * Use the default user interface font in all browsers (opinionated).
 */
html {
  font-family:
    system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
     "Segoe UI",
     "Roboto",
     "Ubuntu",
     "Cantarell",
     "Noto Sans",
     sans-serif,
     "Apple Color Emoji",
     "Segoe UI Emoji",
     "Segoe UI Symbol",
     "Noto Color Emoji";
}
/**
 * Use the default monospace user interface font in all browsers (opinionated).
 */
code,
kbd,
samp,
pre {
  font-family:
    /* macOS 10.10+ */ "Menlo",
    /* Windows 6+ */ "Consolas",
    /* Android 4+ */ "Roboto Mono",
    /* Ubuntu 10.10+ */ "Ubuntu Monospace",
    /* KDE Plasma 5+ */ "Noto Mono",
    /* KDE Plasma 4+ */ "Oxygen Mono",
    /* Linux/OpenOffice fallback */ "Liberation Mono",
    /* fallback */ monospace,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";
}
/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Add typography inheritance in all browsers (opinionated).
 */
button,
input,
select,
textarea {
  background-color: transparent; /* 1 */
  border: 1px solid WindowFrame; /* 1 */
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  letter-spacing: inherit; /* 2 */
  padding: 0.25em 0.375em; /* 1 */
}
/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
  border-radius: 0;
  padding-right: 1em;
}
/**
 * Change the inconsistent appearance in IE (opinionated).
 */
::-ms-expand {
  display: none;
}
/**
 * Correct the inconsistent appearance in IE (opinionated).
 */
:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.54);
}
/* Document
 * ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
 * ========================================================================== */
/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */
dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}
/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */
ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */
hr {
  overflow: visible; /* 2 */
}
/**
 * Add the correct display in IE.
 */
main {
  display: block;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/* Embedded content
 * ========================================================================== */
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Forms
 * ========================================================================== */
/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */
button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}
/**
 * Show the overflow in Edge 18- and IE.
 */
input {
  overflow: visible;
}
/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}
/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
progress {
  display: inline-block; /* 1 */
}
/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto; /* 2 */
}
/* Interactive
 * ========================================================================== */
/*
 * Add the correct display in Edge 18- and IE.
 */
details {
  display: block;
}
/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */
dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: fit-content;
}
dialog:not([open]) {
  display: none;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Scripting
 * ========================================================================== */
/**
 * Add the correct display in IE.
 */
template {
  display: none;
}
/* User interaction
 * ========================================================================== */
/* 320px */
/* 425px */
/* 768px */
/* defult is 1080 */
/* 2560px */
:root {
  --page-width: 80rem;
  --p-width: 42em;
  --page-width-3-grid: 92.6875rem; /* 1483px grid on Figma */
  --page-width-4-grid: 128.75rem; /* 2060px grid on Figma*/
  --page-width-2k: 150rem; /* 2400px */
  --content-width: 38.75rem; /* 640px */
}
:root {
  /* Signature Brand Hues — muted clay-rose, harmonized with warm linen bg */
  --pink: oklch(52% 0.11 5); /* Dusty rose, warm and grounded */
  --pink-2: oklch(62% 0.09 5); /* Softer secondary rose */
  
  /* Tinted Brand Neutrals (Banning raw #000 and #fff in favor of 353° tinted hues) */
  --black: oklch(15% 0.008 353); /* Off-black warm charcoal */
  --white: oklch(99.5% 0.004 353); /* Soft warm white */
  
  --grey-1: oklch(28% 0.008 353); /* Deep high-contrast charcoal for body text */
  --grey-2: oklch(42% 0.008 353); /* Muted slate for sub-headings */
  --grey-3: oklch(62% 0.006 353); /* Muted line gray for borders and metadata */
  --grey-7: oklch(97.5% 0.005 353); /* Soft warm wash color */

  /* Case Study Specific Semantics - highly harmonized */
  --wsbc-orange: oklch(68% 0.19 45); /* Refined WorkSafeBC orange */
  --cosha-pink: oklch(68% 0.17 12); /* Harmonized Cosha rose */
  --setsail-purple: oklch(48% 0.23 295); /* Deep rich indigo-purple for SetSail */
  --caltec-blue: oklch(32% 0.16 265); /* Elegant navy blue for Caltec */
  
  /* Surfaces & Backgrounds */
  --bg-color: oklch(98.8% 0.006 38); /* Exquisite warm linen neutral backdrop */
  --footer-color: oklch(82% 0.04 30); /* Sophisticated warm light terracotta/clay */
  --shadow: oklch(52% 0.04 5 / 6%);

  /* Semantic Spacing Scale (4pt Base for rhythmic visual alignments) */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Linear gradients — subtle warm wash, not attention-grabbing */
  --pink-orange-gradient: linear-gradient(270deg, oklch(88% 0.05 38 / 12%) 0%, oklch(72% 0.07 5 / 8%) 100%);
  --pink-orange-gradient-dark: linear-gradient(270deg, oklch(78% 0.08 38) 0%, oklch(55% 0.10 5) 100%);
}
html {
  scroll-behavior: smooth;
}
abbr {
  cursor: help;
}
body {
  font-family: 'Figtree', sans-serif;
  min-height: 100vh;
  color: oklch(28% 0.008 353);
  color: var(--grey-1);
  background-color: oklch(98.8% 0.006 38);
  background-color: var(--bg-color);
}
::selection {
  background-color: Linen;
}
a {
  text-decoration: none;
  color: unset
}
a:visited {
    color: unset; 
  }
a:focus {
    color: oklch(52% 0.11 5);
    color: var(--pink);
  }
a[target="_blank"]:after {
  content: '\00a0↗';
  font-size: 0.8em;
  /* margin-left: 0.1em; */
}
p {
  font-family: 'Figtree', sans-serif;
  font-size: 1.1em;
  line-height: 1.2em;
}
.container {
  margin: 0 auto
}
@media (min-width: 67.5rem) {
.container {
    max-width: 80rem;
    max-width: var(--page-width)
}
  }
@media (min-width: 160rem) {
.container {
    max-width: 80rem;
    max-width: var(--page-width)
}

  }
.gradient-text, .work-type, h2 {
  color: oklch(52% 0.11 5);
  color: var(--pink); /* Elegant solid deep rose/pink signature color */
}
/* header */
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 9.375rem;

  font-weight: 400
}
.header .header-logo {
    display: flex;
    align-items: center;
  }
.header .header-avatar {
    transition: transform .8s ease-in-out;
  }
.header .header-avatar:hover {
    transform: rotate(360deg)
  }
@media (min-width: 67.5rem) {
.header {
    font-size: 1.1em;
    padding: 0 4em
}
  }
@media (min-width: 160rem) {
.header {
    font-size: 2em;
    max-width: 150rem;
    max-width: var(--page-width-2k);
    margin: 0 3em
}
  }
.header-avatar {
  margin: 1rem;
  width: 3.2rem;
  border-radius: 4px;

  /* @media (--desktop-2k) {
    margin-left: 3rem;
  } */
}
.header-title {
  display: none
}
@media (min-width: 67.5rem) {
.header-title {
    display: inherit
}
  }
@media (min-width: 160rem) {
.header-title {
    display: inherit
}
  }
.header-nav ul {
  list-style-type: none;

  display: flex;
  flex-direction: column
}
@media (min-width: 48rem) {
.header-nav ul {
    flex-direction: row
}
  }
@media (min-width: 160rem){
.header-nav ul {
    /* margin-right: 5.4375rem; */
}
  }
.header-nav li {
  display: inline;
  padding: 0 1.25em;
  transition: transform 250ms
}
.header-nav li:hover {
    color: oklch(52% 0.11 5);
    color: var(--pink);
    transform: translateY(-4px);
  }
@media (min-width: 160rem) {
.header-nav li {
    font-size: 1.5em
}
  }
/* jumbotron */
.jumbotron {
  color: var(--text-regular)
}
.jumbotron h1 {
    font-size: 1.3em;
    font-weight: 500;
    margin: 0
  }
@media (min-width: 48rem) {
.jumbotron h1 {
      font-size: 2em
  }
    }
@media (min-width: 67.5rem) {
.jumbotron h1 {
      font-size: 3em
  }
    }
@media (min-width: 160rem) {
.jumbotron h1 {
      font-size: 4em
  }
    }
.jumbotron h1.tagline {
    line-height: 128%
  }
@media (min-width: 67.5rem) {
.jumbotron h1.tagline {
      font-size: 2em;
      max-width: 62.25rem
  }
    }
@media (min-width: 48rem) {
.jumbotron {
    margin-top: 2rem;
    margin-bottom: 6rem
}
  }
@media (min-width: 67.5rem) {
.jumbotron {
    margin-top: 2rem;
    margin-bottom: 6rem
}
  }
@media (min-width: 160rem) {
.jumbotron {
    margin-top: 10rem;
    margin-bottom: 14rem
}
  }
.jumbotron-highlight {
  color: oklch(62% 0.09 5);
  color: var(--pink-2);
}
.jumbotron a:hover {
  text-decoration: underline;
}
.taglines {
  margin: 3em 0 4em;
  max-width: 42em;
  max-width: var(--p-width)
}
.taglines p {
    margin: 0.2em 0;
  }
.taglines a {
    color: oklch(62% 0.09 5);
    color: var(--pink-2);
  }
@media (min-width: 160rem) {
.taglines {
    font-size: 2rem
}
  }
/* gallery */
.featured-cover {
  margin-bottom: 2em;
  object-fit: contain;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  background-color: oklch(97.5% 0.005 353);
  background-color: var(--grey-7) /* Light brand-tinted skeleton background */
}
@media (min-width: 67.5rem) {
.featured-cover {
    width: 70%;
    max-width: 65vw
}
  }
.featured-cover rtw {

  background-image: url(./return-to-work/thumbnail-rtw.png);
}
/* other works */
.works {
  color: var(--text-regular);
}
.work {
  margin-bottom: clamp(48px, 10vw, 96px);
  margin-bottom: clamp(var(--space-xxl), 10vw, var(--space-4xl));
  border-top: 1px solid oklch(52% 0.04 5 / 6%);
  border-top: 1px solid var(--shadow);
  content-visibility: auto;
  contain-intrinsic-size: auto 450px; /* Pre-size containment context */

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start
}
.work:first-child {
    border: 0;
  }
@media (min-width: 67.5rem) {
.work {
    flex-direction: row;
    align-items: center
}
  }
.work-text {
  height: 100%;
  margin-right: clamp(16px, 4vw, 24px);
  margin-right: clamp(var(--space-md), 4vw, var(--space-lg))
}
@media (min-width: 67.5rem) {
.work-text {
    flex: 1;
    min-width: 0;
    padding-left: clamp(16px, 4vw, 24px);
    padding-left: clamp(var(--space-md), 4vw, var(--space-lg))
}
  }
.work-type {
  letter-spacing: 0.03em;
  font-size: 0.9em;
}
h3.work-title {
  font-weight: 600
}
@media (min-width: 160rem) {
h3.work-title {
    font-size: 2rem
}
  }
/* work hover animation */
.work {
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.work:hover {
  transform: translateY(-4px);
}
.work.rtw:hover {
    color: oklch(68% 0.19 45);
    color: var(--wsbc-orange);;
  }
.work.setsail:hover {
    color: oklch(48% 0.23 295);
    color: var(--setsail-purple);;
  }
.work.caltec:hover {
    color: oklch(32% 0.16 265);
    color: var(--caltec-blue);;
  }
.work.cosha:hover {
    color: oklch(68% 0.17 12);
    color: var(--cosha-pink);;
  }
.work-title {
  margin: 0;
  font-size: 1.5em
}
@media (min-width: 48rem) {
.work-title {
    font-size: 2em
}
  }
.work-desc {
  margin-top: 12px;
  margin-top: var(--space-sm)
}
@media (min-width: 160rem) {
.work-desc {
    font-size: 2em
}
  }
.work-context {
  display: block;
  font-weight: 700;
  font-size: 0.85em;
  color: oklch(62% 0.09 5);
  color: var(--pink-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  margin-bottom: var(--space-xs);
}
.work-thumbnail {
  max-width: 80vw;
  height: auto;
}
.work-section {
  margin-bottom: 10em

}
@media (min-width: 48rem) {
.work-section {
    margin-bottom: 20em

}
  }
/* about */
.about {
  /*
  border-top: 3px solid transparent;
  border-image: var(--pink-orange-gradient);
  border-image-slice: 1;
  */

  padding-bottom: 5rem
  }
.about img {
    width: 100%;
    height: auto;
  }
.about h3, .about h4 {
    margin: 0;
  }
.about ul {
    padding: 0;
    list-style: none;
  }
.about li {
    margin: 1.05em 0;
    font-family: 'Figtree', sans-serif;
  }
.about h1 {
    font-weight: 600;
    font-size: 2rem
  }
@media (min-width: 48rem) {
.about h1 {
      font-size: 3rem
  }
    }
@media (min-width: 67.5rem) {
.about h1 {
      font-size: 5rem
  }
    }
@media (min-width: 160rem) {
.about h1 {
      font-size: 8rem
  }
    }
.about .about-my-name {
    display: inline;
    font-weight: 500;
    color: gainsboro
  }
@media (min-width: 48rem) {
.about .about-my-name {
      padding-left: 1.2rem;
      font-size: 1.4rem
  }
    }
@media (min-width: 67.5rem) {
.about .about-my-name {
      padding-left: 2.6rem;
      font-size: 1.6rem
  }
    }
@media (min-width: 160rem) {
.about .about-my-name {
      font-size: 3rem
  }
    }
.about #p-figure-1 {
    position: inherit
  }
@media (min-width: 67.5rem) {
.about #p-figure-1 {
      position: absolute;
      left: 53em;
      margin-top: -7.5em
  }
    }
.about #p-img-1 {
    max-width: 18.75em;
  }
.about #p-img-2 {
    padding: 3em;
  }
.about .about-content li {
      font-family: 'Figtree', sans-serif;
      font-size: 1.1em;
      line-height: 1.5em;
    }
@media (min-width: 67.5rem) {
.about .about-content h3 {
        font-size: 1.1em
    }
      }
@media (min-width: 67.5rem) {
.about .about-content h3 {
        font-size: 1.2em
    }
      }
@media (min-width: 160rem) {
.about .about-content h3 {
        font-size: 1.5em
    }
      }
@media (min-width: 67.5rem) {
.about .about-content h4 {
        font-size: 1em
    }
      }
@media (min-width: 67.5rem) {
.about .about-content h4 {
        font-size: 1.1em
    }
      }
@media (min-width: 160rem) {
.about .about-content h4 {
        font-size: 1.5em
    }
      }
@media (min-width: 67.5rem) {
.about .about-content {
      max-width: 92.6875rem;
      max-width: var(--page-width-3-grid)
  }
    }
.about p {
    margin: 0.5rem 0;
    line-height: 1.5em;
    padding-bottom: 1em
  }
@media (min-width: 67.5rem) {
.about p {
      font-size: 1.2rem
  }
    }
@media (min-width: 160rem) {
.about p {
      font-size: 1.5rem
  }
    }
.about span {
      white-space: nowrap;
    }
.skill-groups, .work-items, .education-items {
  display: flex;
  border-top: 1px solid #c4c4c4;
  padding-top: 48px;
  flex-wrap: wrap;
}
.skill-groups--item, .work-items--item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-right: 1.5em
}
@media (min-width: 48rem) {
.skill-groups--item, .work-items--item {
    width: 50%
}
  }
@media (min-width: 67.5rem) {
.skill-groups--item, .work-items--item {
    width: 25%
}
  }
.work-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 2rem
}
@media (min-width: 48rem) {
.work-item {
    flex-direction: row
}
  }
.work-item--title, .work-item--desc, .education-column--title {
  width: 100%
}
@media (min-width: 48rem) {
.work-item--title, .work-item--desc, .education-column--title {
    width: 50%
}
  }
.education-items {
  display: flex;
  flex-direction: column;
}
.education-item {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 48rem) {
.education-item {
    flex-direction: row
}
  }
.education-item--column {
  width: 100%;
}
/* footer */
.footer {
  color: var(--text-regular);
  background-image: linear-gradient(270deg, oklch(88% 0.05 38 / 12%) 0%, oklch(72% 0.07 5 / 8%) 100%);
  background-image: var(--pink-orange-gradient);
  margin: 0
}
.footer p {
    font-size: 0.95em;
  }
.footer {
  max-width: 100%;
  padding: 2em 0 2em 0
}
@media (min-width: 48rem) {
.footer {
    padding: 7em 0 5em 0
}
  }
@media (min-width: 160rem) {
.footer {
    padding: 4.375em 0 10em 0
}
  }
.contact {
  display: flex;
  flex-direction: row;
  grid-gap: 10px;
  gap: 10px;
  color: oklch(28% 0.008 353);
  color: var(--grey-1)
}
.contact a:visited {
    color: oklch(62% 0.09 5);
    color: var(--pink-2);;
  }
.contact span {
    color: oklch(62% 0.006 353);
    color: var(--grey-3);
  }
.footer-link {
  font-weight: 600;
  color: oklch(62% 0.09 5);
  color: var(--pink-2);
}
.footer-container {
  margin: 0 1em
}
@media (min-width: 48rem) {
.footer-container {
    margin: 0 6.8em
}
  }
.footer a:hover {
  text-decoration: underline;
}
/* function */
/*
https://moderncss.dev/pure-css-smooth-scroll-back-to-top
How far of a scroll travel within <main> prior to the link appearing 
*/
.back-to-top-wrapper {
  /* uncomment to visualize "track" */
  /* outline: 1px solid red; */
  position: absolute;
  top: 100vh;
  right: 0.25rem;
  /* Optional, extends the final link into the */
  /* footer at the bottom of the page */
  /* Set to `0` to stop at the end of `main` */
  bottom: -5em;
  /* Required for best support in browsers not supporting `sticky` */
  width: 3em;
  /* Disable interaction with this element */
  pointer-events: none;
}
/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* Accessibility: Instantly disable transitions/animations if user has OS-level reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.back-to-top-link {
  /* `fixed` is fallback when `sticky` not supported */
  position: fixed;
  /* preferred positioning, requires prefixing for most support, and not supported on Safari */
  /* @link https://caniuse.com/#search=position%3A%20sticky */
  position: sticky;
  /* reinstate clicks */
  pointer-events: all;
  /* achieves desired positioning within the viewport */
  /* relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used */
  top: calc(100vh - 5rem);

  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  width: 3rem;
  height: 3rem;
  /* border-radius: 50%; */

  color: linear-gradient(270deg, oklch(88% 0.05 38 / 12%) 0%, oklch(72% 0.07 5 / 8%) 100%);

  color: var(--pink-orange-gradient);
  border: 3px solid;
  border-image: linear-gradient(270deg, oklch(88% 0.05 38 / 12%) 0%, oklch(72% 0.07 5 / 8%) 100%);
  border-image: var(--pink-orange-gradient);
  border-image-slice: 1;

  background-color: oklch(99.5% 0.004 353);

  background-color: var(--white);

  /* emoji don't behave like regular fonts
     so this helped position it correctly */
  /* padding: 0.25rem; */
}
/* watch-face */
.face {
  position: absolute; 
  width: 320px;
  border: 10px solid white;
  margin: auto;
  z-index: 9999;
}
.carousel {
  background: url("http://www.sfu.ca/~chelll/iat235/watch-face/img/38mm.png");
  background-size: 320px 500px;
  position:relative;
  width:320px;

  margin:20px auto;
  z-index: 0;
}
.carousel > img {
  display:none;
  width:100%;
}
.carousel > input {
  position:absolute;
  left:-9999px;
}
.carousel > input:checked + label + img {
  display:block;
}
.carousel > label,
.carousel > input:checked ~ label ~ label ~ label ~ label {
  display:none;
}
.carousel > input:checked + label {
  display:block;
  left:0;
}
.carousel > input:checked ~ label ~ label ~ label {
  display:block;
  right:0;
}
.carousel > label {
  position:absolute;
  top:0;
  width:25%;
  height:100%;
  visibility:hidden;
}
.carousel > label:before {
  content:'';
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  visibility:visible;
}
.carousel > label:after {
  display:block;
  position:absolute;
  top:50%;
  width:25px;
  height:25px;
  line-height:22px;
  margin:-15px 10px 0 10px;
  background-color:black;
  color:white;


  text-align:center;
  visibility:hidden;
  border:2px solid white;
  border-radius:20px;
  box-shadow:0 3px 4px black;
}
.carousel > label:hover:after {
  visibility:visible;
}
.carousel > input:checked + label:after {
  left:0;
  content:'\27f8';
}
.carousel > input:checked ~ label ~ label ~ label:after {
  right:0;
  content:'\27f9';
}
main {
  /* leave room for the "scroll track" */
  /* required to make sure the `absolute` positioning of */
  /* the anchor wrapper is indeed `relative` to this element vs. the body */
  position: relative;
  margin: 2rem 1rem
}
@media (min-width: 67.5rem) {
main {
    margin: 2rem 1rem;
    /* max-width: var(--page-width); */
    /* margin: auto; */
    padding: 0 6em
}

  }
@media (min-width: 160rem) {
main {
    max-width: 150rem;
    max-width: var(--page-width-2k);
    margin: auto;
    padding: 0 6em
}
  }
main h2 {
    font-size: 1.5rem;
    margin-top: 4em;

    line-height: 1.4em
  }
@media (min-width: 67.5rem) {
main h2 {
      font-size: 1.8rem
  }
    }
@media (min-width: 160rem) {
main h2 {
      font-size: 3rem
  }
    }
/* assets/static/css/page.css */
/* ==========================================================================
   POST PAGE HEADER
   ========================================================================== */
.page-header {
  color: oklch(28% 0.008 353);
  color: var(--grey-1);
  font-family: 'Figtree', sans-serif;
  margin-bottom: 64px;
  margin-bottom: var(--space-3xl);
}
h1.title {
  font-size: 2.2em;
  font-weight: 700;
  margin-bottom: 0.15em;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1.subtitle {
  font-size: 1.125em;
  font-weight: 400;
  color: oklch(42% 0.008 353);
  color: var(--grey-2);
  margin: 0;
}
/* ==========================================================================
   PAGE BODY: Editorial Case Study Layout
   ========================================================================== */
/* 1. Reset & General Colors */
.page-body > :not(pre) {
  color: oklch(28% 0.008 353);
  color: var(--grey-1);
}
/* 2. Main Reading Column
   Centers the column but aligns text to the left.
   Max-width capped at ~70ch for comfortable reading. */
.page-body > p,
.page-body > ul,
.page-body > ol,
.page-body > h1,
.page-body > h2,
.page-body > h3,
.page-body > h4,
.page-body > h5,
.page-body > h6 {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  padding: 0 1rem;
  box-sizing: border-box;
}
/* 3. Body Text */
.page-body p {
  font-family: 'Figtree', sans-serif;
  font-size: 1.125rem;
  line-height: 1.75;
  color: oklch(28% 0.008 353);
  color: var(--grey-1);
  margin-bottom: 1.25em;
}
/* 4. Headings — clear hierarchy, generous top breathing room */
.page-body h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 3em;
  margin-bottom: 0.6em;
  line-height: 1.25;
  color: oklch(28% 0.008 353);
  color: var(--grey-1);
  letter-spacing: -0.01em;
}
.page-body h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2.5em;
  margin-bottom: 0.5em;
  line-height: 1.3;
  color: oklch(28% 0.008 353);
  color: var(--grey-1);
}
.page-body h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 2em;
  margin-bottom: 0.4em;
  line-height: 1.35;
  color: oklch(42% 0.008 353);
  color: var(--grey-2);
}
/* 5. Selection visibility */
.page-body h2::selection,
.page-body h3::selection,
.page-body h4::selection {
  -webkit-text-fill-color: oklch(62% 0.09 5);
  -webkit-text-fill-color: var(--pink-2);
  color: oklch(62% 0.09 5);
  color: var(--pink-2);
  background-color: oklch(92% 0.02 5 / 40%);
}
/* 6. Links */
.page-body a {
  color: oklch(52% 0.11 5);
  color: var(--pink);
  text-decoration: underline;
  text-decoration-color: oklch(52% 0.11 5 / 30%);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 500;
  transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1),
              text-decoration-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.page-body a:hover {
  color: oklch(28% 0.008 353);
  color: var(--grey-1);
  text-decoration-color: oklch(28% 0.008 353);
  text-decoration-color: var(--grey-1);
  text-decoration-thickness: 1.5px;
}
/* ==========================================================================
   LISTS — Proper bullet positioning, tighter line-height
   ========================================================================== */
.page-body ul,
.page-body ol {
  padding-left: 1.5em; /* Bullets sit flush inside reading column, not hanging left */
  margin-bottom: 1.5em;
}
.page-body li {
  font-family: 'Figtree', sans-serif;
  font-size: 1.125rem;
  line-height: 1.5; /* Tighter than body paragraphs for scannable lists */
  color: oklch(28% 0.008 353);
  color: var(--grey-1);
  margin-bottom: 0.5em;
  padding-left: 0.25em;
}
/* Nested lists */
.page-body li > ul,
.page-body li > ol {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
/* Unordered: small solid disc, brand-tinted */
.page-body ul {
  list-style-type: disc;
}
.page-body ul li::marker {
  color: oklch(52% 0.11 5);
  color: var(--pink);
  font-size: 0.7em;
}
/* Ordered: clean numerals */
.page-body ol {
  list-style-type: decimal;
}
.page-body ol li::marker {
  color: oklch(62% 0.006 353);
  color: var(--grey-3);
  font-weight: 600;
  font-size: 0.95em;
}
/* ==========================================================================
   BLOCKQUOTES — Editorial callout
   ========================================================================== */
.page-body blockquote {
  position: relative;
  background-color: oklch(97% 0.006 5 / 60%);
  border: 1px solid oklch(85% 0.03 5 / 30%);
  border-radius: 8px;
  margin: 2.5em auto;
  padding: 1.75em 2em;
  max-width: 48rem;

  font-family: 'Figtree', sans-serif;
  font-size: 1.1rem;
  font-style: italic;
  color: oklch(42% 0.008 353);
  color: var(--grey-2);
  line-height: 1.6;
}
/* Decorative quote mark */
.page-body blockquote::before {
  content: "\201C";
  position: absolute;
  top: -16px;
  left: 20px;
  font-size: 5rem;
  line-height: 1;
  font-family: Georgia, serif;
  color: oklch(52% 0.11 5);
  color: var(--pink);
  opacity: 0.15;
  pointer-events: none;
}
/* Remove extra margin from last child inside blockquote */
.page-body blockquote > :last-child {
  margin-bottom: 0;
}
/* ==========================================================================
   IMAGES & FIGURES
   ========================================================================== */
.page-body figure {
  margin: 3em auto;
  width: 100%;
  max-width: 60rem;
}
.page-body figcaption {
  color: oklch(62% 0.006 353);
  color: var(--grey-3);
  text-align: center;
  font-style: normal;
  font-size: 0.85rem;
  margin-top: 0.75em;
  letter-spacing: 0.01em;
}
.page-body img {
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid oklch(90% 0.005 5 / 40%);
  display: block;
  margin: 0 auto;
  cursor: zoom-in;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.page-body img:hover {
  transform: scale(1.005);
}
/* ==========================================================================
   CODE BLOCKS
   ========================================================================== */
.highlight {
  margin: 2em auto;
  max-width: 50rem;
}
.highlight pre {
  font-size: 0.875rem;
  width: 100%;
  padding: 1.25em 1.5em;
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid oklch(90% 0.005 5 / 40%);
  background-color: oklch(97.5% 0.003 38);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  line-height: 1.6;
  color: oklch(28% 0.008 353);
  color: var(--grey-1);
}
/* ==========================================================================
   LIGHTBOX OVERLAY
   ========================================================================== */
#custom-lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: oklch(10% 0.005 5 / 92%);
  backdrop-filter: blur(8px);
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
#custom-lightbox.active {
  display: flex;
  opacity: 1;
}
#custom-lightbox img {
  max-width: 90%;
  max-height: 90vh;
  box-shadow: 0 8px 60px oklch(10% 0.01 5 / 50%);
  border-radius: 4px;
  animation: zoomOpen 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  color: oklch(95% 0.005 5);
  font-size: 2rem;
  font-weight: 300;
  cursor: pointer;
  transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10000;
  font-family: 'Figtree', sans-serif;
  line-height: 1;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.lightbox-close:hover {
  color: oklch(99.5% 0.004 353);
  color: var(--white);
  background-color: oklch(30% 0.01 5 / 60%);
}
@keyframes zoomOpen {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* ==========================================================================
   VIDEO EMBEDS
   ========================================================================== */
.iframe-container {
  text-align: center;
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
  max-width: 50rem;
  margin: 2.5em auto;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}