/* Quiet portfolio chrome; product screenshots retain their own brand colors. */
:root {
  --ink: #282d32;
  --paper: #faf9f6;
  --sand: #eeece8;
  --coral: #c4b9cb;
  --yellow: #d5cde4;
  --lime: #ded8ea;
}
.cursor-glow, .sun { display: none; }
.hero { background: #eeebf2; border-bottom: 1px solid #dfdbe4; }
.hero h1 em { color: #665778; }
.hero-index { color: #665778; }
.approach { background: #2c3036; }
.approach-stamp { display: none; }
.approach blockquote { margin-top: 48px; }
.discipline-grid { border-top-color: #62606c; }
.connect { background: #eeebf2; }
.live-products a:hover span { background: #ded8ea; }
.about.about-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px 7vw;
  align-items: start;
  padding: 104px 9.1vw;
  background: #f0efec;
}
.about-editorial h2 {
  font: 500 clamp(36px, 4.3vw, 64px)/1.18 var(--serif);
  letter-spacing: -.045em;
  margin: 28px 0 0;
}
.about-editorial h2 em { color: #665778; }
.about-signoff { margin: 36px 0 0; font: 600 14px/1.7 var(--sans); }
.about-signoff span { display: block; font: 11px/1.8 var(--mono); color: #64666b; margin-top: 4px; }
.about-story { padding-top: 42px; }
.about-story p { font: 400 15px/1.9 var(--sans); margin: 0 0 20px; max-width: 520px; }
.about-story .about-lead { font: 500 clamp(23px, 2.3vw, 32px)/1.4 var(--serif); letter-spacing: -.02em; margin-bottom: 24px; }
.about-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.35fr .8fr;
  gap: 48px;
  border-top: 1px solid #cccbd0;
  padding-top: 32px;
}
.about-details h3 { font: 400 10px/1.7 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #665778; margin: 0 0 24px; }
.about-details p { font: 400 12px/1.8 var(--sans); margin: 12px 0 0; }
.about-details .detail-title { font: 500 25px/1.3 var(--serif); letter-spacing: -.025em; margin-top: 0; }
.detail-secondary { color: #64666b; }
.about-details ul { list-style: none; padding: 0; margin: 0; }
.about-details li { font: 500 12px/1.65 var(--sans); margin-bottom: 18px; }
.about-details li:last-child { margin-bottom: 0; }
.about-details li span { display: block; color: #64666b; font-size: 11px; font-weight: 400; margin-top: 3px; }
.credential-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) 12px; align-items: start; gap: 10px; }
.credential-mark { display: block; width: 16px; height: 16px; margin-top: 2px; }
.credential-link { color: inherit; text-decoration: none; border-radius: 3px; }
.credential-link:hover { color: #665778; }
.credential-link:hover > div { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.credential-link:focus-visible { outline: 2px solid #665778; outline-offset: 5px; }
.credential-arrow { font-size: 12px; font-weight: 400; color: #665778; }
.about-details .credential-plain { padding-left: 26px; }
.experience-highlight { max-width: 530px; margin-top: 28px; padding: 22px 24px; border-left: 2px solid #c4b9cb; background: #eeebf2; border-radius: 0 8px 8px 0; }
.experience-highlight h4 { margin: 0 0 10px; font: 500 13px/1.5 var(--sans); }
.experience-highlight p { margin: 0; font: 400 13px/1.75 var(--sans); }
.experience-highlight a { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; padding: 4px 0; font: 500 11px/1.5 var(--sans); color: #665778; text-decoration: underline; text-underline-offset: 4px; }
.experience-highlight a:focus-visible { outline: 2px solid #665778; outline-offset: 4px; }
.about-details dl { margin: 0; }
.about-details dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #d9d8dc; font-size: 13px; line-height: 1.6; }
.about-details dl div:first-child { padding-top: 0; }
.about-details dd { margin: 0; color: #64666b; font-size: 11px; }
@media (max-width: 800px) {
  .about.about-editorial { grid-template-columns: 1fr; gap: 36px; padding: 72px 7vw; }
  .about-story { padding-top: 0; }
  .about-story p { max-width: none; }
  .about-details { grid-template-columns: 1fr; gap: 32px; }
  .about-details > section + section { border-top: 1px solid #d9d8dc; padding-top: 28px; }
  .about-details h3 { margin-bottom: 18px; }
  .about-signoff { margin-top: 24px; }
}
.portfolio-sequence { margin: 64px 0 88px; }
.portfolio-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: 64px 0;
  border-top: 1px solid rgb(23 58 56 / 20%);
}
.portfolio-feature .case-copy h3 { font-size: clamp(36px, 4.6vw, 64px); }
.project-preview { display: block; min-width: 0; border-radius: 16px; }
.screenshot-stage {
  --stage: #e9e1ec;
  background: var(--stage);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7%;
  padding: 9%;
  border-radius: 16px;
}
.screenshot-stage img {
  display: block;
  width: 40%;
  height: auto;
  min-width: 0;
  border-radius: clamp(8px, 1.5vw, 22px);
  box-shadow: 0 16px 32px rgb(0 0 0 / 13%);
}
.screenshot-stage img:nth-child(2) { margin-top: 12%; }
.theme-ohsnap { --stage: #ded8f0; }
.theme-glamx { --stage: #f2dee7; }
.theme-caloryze { --stage: #e0e8cf; }
.theme-pomodoro { --stage: #e8d8df; }
.theme-doterra { --stage: #e7e0ef; }
.theme-youngliving { --stage: #e2e5dc; }
.theme-doterra img { border-radius: 6px; }
.presentation-stage { padding: 7%; gap: 5%; }
.presentation-stage img { width: 47%; border-radius: 4px; }
.project-cta {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 14px 0;
  margin-top: 16px;
  color: var(--ink);
  font: 12px/1.6 var(--mono);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.project-cta:hover { color: #52615b; }
.project-coming { padding: 48px 0; border-top: 1px solid rgb(23 58 56 / 20%); }
.project-coming h3 { font: 500 36px/1.2 var(--serif); margin: 20px 0; }
.project-coming > p:last-child { font-size: 14px; line-height: 1.7; }
.project-intro { padding: 80px 9.1vw 56px; max-width: 1400px; margin: auto; }
.project-intro h1 { font: 500 clamp(48px, 8vw, 110px)/1.1 var(--serif); letter-spacing: -.05em; margin: 28px 0; }
.project-summary { font-size: clamp(16px, 1.6vw, 21px); line-height: 1.7; max-width: 740px; }
.project-intro .case-role { margin-top: 30px; }
.project-showcase { padding: 0 9.1vw; max-width: 1400px; margin: auto; }
.project-showcase .screenshot-stage { padding: 6% 19%; gap: 9%; }
.project-showcase .screenshot-stage img { width: 36%; }
.project-showcase .presentation-stage { padding: 7%; }
.project-showcase .presentation-stage img { width: 46%; }
.screen-collection { padding: 100px 9.1vw; max-width: 1500px; margin: auto; }
.collection-heading { margin-bottom: 56px; }
.collection-heading h2 { font: 500 clamp(36px, 5vw, 64px)/1.15 var(--serif); letter-spacing: -.04em; margin: 24px 0 0; }
.collection-heading em { font-weight: 500; }
.screen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 36px; align-items: start; }
.screen-grid figure { margin: 0; min-width: 0; }
.screen-grid img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  object-position: top;
  border-radius: 12px;
}
.screen-grid figcaption { display: flex; align-items: baseline; gap: 12px; font-size: 13px; line-height: 1.6; padding-top: 18px; }
.screen-grid figcaption span { font: 10px var(--mono); color: #52615b; }
.presentation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.presentation-grid img { aspect-ratio: 1; object-fit: contain; background: #e9ebe3; border-radius: 8px; }
.next-project { padding: 80px 9.1vw; background: var(--sand); }
.next-project > a:not(.project-cta) { display: block; width: fit-content; font: 500 clamp(36px, 5vw, 72px)/1.2 var(--serif); letter-spacing: -.04em; color: var(--ink); text-decoration: none; margin: 24px 0; }
.project-page footer .back-link { color: var(--paper); border-color: var(--paper); }
.linkedin-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 44px;
  color: inherit;
  font: 12px/1.5 var(--mono);
  text-decoration: none;
}
.linkedin-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  background: #0a66c2;
  color: #fff;
  border-radius: 3px;
  font: 700 21px/1 Arial, sans-serif;
  letter-spacing: -1px;
  text-transform: none;
}
.linkedin-link:hover > span:nth-child(2) { text-decoration: underline; text-underline-offset: 5px; }
.connect > .linkedin-link { margin-top: 24px; }
.site-header nav .linkedin-link { padding: 8px 0; }
footer .linkedin-link { font-size: 11px; }
/* Reuse the screenshot creator's physical frame and calibrated screen opening. */
.device-frame {
  position: relative;
  display: block;
  aspect-ratio: 1530 / 3036;
  width: 100%;
  filter: drop-shadow(0 12px 14px rgb(0 0 0 / 14%));
}
.device-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/devices/iphone-15-pro-max.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.device-screen {
  position: absolute;
  left: 7.843137%;
  top: 3.952569%;
  width: 84.313725%;
  height: 92.094862%;
  overflow: hidden;
  border-radius: 8% / 4%;
  background: #101010;
}
.screenshot-stage .device-screen img, .screen-grid .device-screen img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: fill;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.screenshot-stage > .device-frame, .screenshot-stage > .clean-capture {
  width: 40%; flex: 0 0 40%;
}
.screenshot-stage > .device-frame:nth-child(2),
.screenshot-stage > .clean-capture:nth-child(2) { margin-top: 12%; }
.project-showcase .screenshot-stage > .device-frame,
.project-showcase .screenshot-stage > .clean-capture { width: 36%; flex-basis: 36%; }
.clean-capture {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--crop-w) / var(--crop-h);
  /* Pale, flat device shell around a rounded, tightly cropped screen. */
  border-radius: 10% / 3.7%;
  background: #fff;
  isolation: isolate;
  box-shadow:
    0 0 0 5px #faf9fc,
    0 0 0 6px #cec7d7,
    0 14px 30px -14px rgb(55 42 70 / 24%);
}
/* Inset past the black surround, including antialiased boundary pixels. */
.crop-01 { --crop-w: 512; --crop-h: 1226; --source-w: 562; --source-h: 1258; --crop-x: 30; --crop-y: 18; }
.crop-02 { --crop-w: 577; --crop-h: 1482; --source-w: 606; --source-h: 1508; --crop-x: 20; --crop-y: 12; }
.crop-03 { --crop-w: 577; --crop-h: 1634; --source-w: 626; --source-h: 1650; --crop-x: 34; --crop-y: 0; }
.crop-04 { --crop-w: 577; --crop-h: 1588; --source-w: 622; --source-h: 1606; --crop-x: 30; --crop-y: 14; }
.crop-05 { --crop-w: 577; --crop-h: 1632; --source-w: 612; --source-h: 1656; --crop-x: 22; --crop-y: 12; }
.screenshot-stage .clean-capture img, .screen-grid .clean-capture img {
  position: absolute;
  width: calc(100% * var(--source-w) / var(--crop-w));
  height: calc(100% * var(--source-h) / var(--crop-h));
  left: calc(-100% * var(--crop-x) / var(--crop-w));
  top: calc(-100% * var(--crop-y) / var(--crop-h));
  max-height: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 1000px) {
  .portfolio-feature { grid-template-columns: 1fr; gap: 32px; }
  .portfolio-feature .case-copy { max-width: 660px; }
  .portfolio-feature .screenshot-stage { padding: 8% 17%; }
  .portfolio-feature .presentation-stage { padding: 7%; }
  .screen-grid { gap: 40px 24px; }
}
@media (max-width: 640px) {
  .portfolio-sequence { margin: 40px 0; }
  .portfolio-feature { padding: 40px 0; }
  .portfolio-feature .screenshot-stage { padding: 9%; }
  .screenshot-stage { border-radius: 10px; }
  .project-intro { padding: 48px 7vw 36px; }
  .project-intro h1 { font-size: clamp(38px, 11vw, 64px); }
  .project-showcase { padding: 0 7vw; }
  .project-showcase .screenshot-stage { padding: 9%; gap: 7%; }
  .project-showcase .screenshot-stage img { width: 40%; }
  .project-showcase .screenshot-stage > .device-frame,
  .project-showcase .screenshot-stage > .clean-capture { width: 40%; flex-basis: 40%; }
  .project-showcase .screenshot-stage .device-screen img { width: 100%; }
  .project-showcase .screenshot-stage .clean-capture img { width: calc(100% * var(--source-w) / var(--crop-w)); }
  .project-showcase .presentation-stage { flex-direction: column; gap: 24px; }
  .project-showcase .presentation-stage img { width: 100%; margin: 0; }
  .screen-collection { padding: 64px 7vw; }
  .screen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .screen-grid figcaption { font-size: 11px; gap: 7px; padding-top: 12px; }
  .screen-grid img { border-radius: 8px; }
  .presentation-grid { grid-template-columns: 1fr; }
  .next-project { padding: 56px 7vw; }
}