/* ==========================================================================
   Scott Dory — Portfolio
   Palette and type are drawn from the resume:
   Phosphate Solid  -> Titan One (display: name, section labels)
   Avenir Next Condensed -> Barlow Condensed / Barlow Semi Condensed (everything else)
   ========================================================================== */

:root {
  /* Color */
  --orange: #E7802D;        /* the D block, accents */
  --orange-text: #B85E14;   /* orange that passes contrast for text on paper */
  --yellow: #EDB732;        /* the D letterform */
  --teal: #1D3E3B;          /* headings, primary ink */
  --teal-rule: #2A5F5B;     /* short rules under section labels */
  --teal-ui: #4A6562;       /* footer + buttons: --teal tinted 20% toward white */
  --stone: #DEDDD3;         /* resume sidebar gray */
  --stone-soft: #ECEBE4;    /* card backgrounds */
  --paper: #FAF9F5;         /* page background */
  --ink: #1D3E3B;
  --body: #4A524F;          /* supporting text */
  --muted: #6B716D;

  /* Type */
  --font-display: "Titan One", "Phosphate", system-ui, sans-serif;
  --font-head: "Barlow Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow Semi Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;

  /* Layout */
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --max: 1360px;
  --radius-big: clamp(80px, 12vw, 180px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3, h4 { color: var(--teal); margin: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--teal); color: #fff; padding: .6rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   The D mark — orange corner block from the resume
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 10;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: clamp(96px, 11vw, 150px);
}

/* Logo + wordmark lockup on wider screens; the monogram alone on phones */
.site-header { --logo-h: clamp(64px, 6.5vw, 92px); }

.d-mark {
  position: absolute;
  top: 0; left: 0;
  text-decoration: none;
}
.d-mark .logo-mono { display: block; width: clamp(84px, 9vw, 128px); height: auto; }
.d-mark .logo-full { display: none; height: var(--logo-h); width: auto; }

@media (min-width: 640px) {
  .site-header { --logo-top: clamp(20px, 2.6vw, 40px); }
  .d-mark { top: var(--logo-top); }
  .d-mark .logo-mono { display: none; }
  .d-mark .logo-full { display: block; }
  .site-header .wrap { min-height: calc(var(--logo-h) + var(--logo-top) * 2); }
  .site-header .nav { margin-left: calc(var(--logo-h) * 4.4); }
}
.d-mark:focus-visible { outline-color: var(--teal); }

.nav {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  margin-left: clamp(110px, 13vw, 170px);
}

.nav a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--teal);
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--orange); }
.nav a[aria-current="page"] { border-bottom-color: var(--teal-rule); }

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */

/* Section labels: Phosphate-style display with the short teal rule beneath */
.label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--orange-text);
  margin: 0 0 1.75rem;
}
.label::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  margin-top: .55rem;
  background: var(--teal-rule);
}

.eyebrow {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 1.0625rem;
  letter-spacing: .32em;
  text-transform: lowercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

/* Big headline — the large/small relationship borrowed from robin-noguier.com */
.display {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.6rem, 6.2vw, 6rem);
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--teal);
  max-width: 17ch;
}
.display em { font-style: normal; color: var(--orange-text); }

.lede {
  font-weight: 300;
  font-size: clamp(1.2rem, .8vw + 1rem, 1.5rem);
  line-height: 1.5;
  color: var(--body);
  max-width: 38em;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--teal-ui);
  padding: .9rem 1.5rem;
  border-radius: 999px;
  transition: background-color .2s;
}
.btn:hover { background: var(--teal); }
.btn--ghost { background: transparent; color: var(--teal-ui); box-shadow: inset 0 0 0 2px var(--teal-ui); }
.btn--ghost:hover { background: var(--teal-ui); color: #fff; }
.btn svg { width: 1em; height: 1em; }

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(3rem, 9vw, 8rem) clamp(3.5rem, 8vw, 7rem);
}

/* Circular photo beside the copy; its top lines up with the headline */
.photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.photo-circle {
  order: -1;
  width: clamp(160px, 40vw, 220px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--stone);
}
@media (min-width: 900px) {
  .photo-grid { grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 340px); }
  .photo-circle { order: 0; width: 100%; margin-top: .35em; }
}

.hero .display { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero .lede { margin-bottom: 2.25rem; }

/* Work list — clean, generous cards in the spirit of karoliskosas.com */
.work { padding-bottom: clamp(4rem, 9vw, 8rem); }

.work-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  border-top: 1px solid var(--stone);
  padding-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.work-head .label { margin: 0; }
.work-head .count {
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0; padding: 0;
}
@media (min-width: 760px) { .work-grid { grid-template-columns: 1fr 1fr; } }

.card a { display: block; text-decoration: none; color: inherit; }

.card-media {
  background: var(--stone-soft);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4%, 2.5rem);
  overflow: hidden;
  transition: background-color .25s;
}
.card-media img { width: 100%; height: 100%; object-fit: contain; }
.card a:hover .card-media { background: var(--stone); }

.card-body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1.1rem;
}
.card h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.6vw + .9rem, 2.1rem);
  line-height: 1.1;
}
.card h3 span {
  background-image: linear-gradient(var(--orange), var(--orange));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s;
}
.card a:hover h3 span, .card a:focus-visible h3 span { background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) {
  .card h3 span, .card-media, .btn { transition: none; }
}
.card p { margin: .35rem 0 0; color: var(--body); font-weight: 300; }
.card .tags {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: .9375rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .card-body { flex-direction: column; gap: .25rem; }
}

/* --------------------------------------------------------------------------
   Footer / call to action
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--teal-ui);
  color: #D9E1DE;
  border-top-right-radius: var(--radius-big);
  margin-top: clamp(2rem, 6vw, 5rem);
}
.site-footer .wrap { padding-block: clamp(3.5rem, 8vw, 7rem) 2rem; }
.site-footer .label { color: var(--yellow); }
.site-footer .label::after { background: var(--orange); }

.footer-mail {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.footer-mail:hover { color: #fff; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--yellow); }
.footer-links { display: flex; gap: 1.5rem; }

/* --------------------------------------------------------------------------
   About (resume)
   -------------------------------------------------------------------------- */

.about-intro { padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 6vw, 5rem); }
.about-intro .display { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.about-intro .lede + .lede { margin-top: 1.25rem; }
.about-intro .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

.resume {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--stone);
}
@media (min-width: 960px) {
  .resume { grid-template-columns: 300px minmax(0, 1fr); }
}

/* The gray sidebar from the resume */
.sidebar {
  background: var(--stone);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.25rem);
}
.sidebar section + section { margin-top: 2.5rem; }
.sidebar .label { font-size: 1.125rem; margin-bottom: 1.25rem; }
.sidebar dl, .sidebar ul { margin: 0; padding: 0; list-style: none; }
.sidebar dt, .sidebar .item-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--teal);
}
.sidebar dd, .sidebar .item-text {
  margin: 0 0 1.1rem;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: #3F4744;
}
.sidebar a { color: var(--teal); text-underline-offset: 3px; }
.sidebar a:hover { color: var(--orange-text); }

.resume-main { padding: clamp(2rem, 4vw, 3rem) 0 0 0; }
@media (min-width: 960px) { .resume-main { padding-left: clamp(2.5rem, 5vw, 5rem); } }

.competencies {
  columns: 2 180px;
  column-gap: 2rem;
  list-style: none;
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
  padding: 0;
  font-family: var(--font-head);
  font-size: 1.1875rem;
  color: var(--teal);
}
.competencies li { padding: .35rem 0; break-inside: avoid; border-bottom: 1px solid var(--stone); }
@media (min-width: 1200px) { .competencies { columns: 3; } }

.job { padding-bottom: 2.25rem; margin-bottom: 2.25rem; border-bottom: 1px solid var(--stone); }
.job:last-of-type { border-bottom: 0; }
.job-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: 1.25rem;
}
.job-head h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem);
  line-height: 1.15;
}
.job-head .where { font-weight: 300; color: var(--muted); }
.dates {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: .06em;
  color: var(--teal);
  white-space: nowrap;
}
.role + .role { margin-top: 1.75rem; }
.role-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .4rem; }
.role h4 { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; }
.role .dates { font-weight: 400; color: var(--muted); }
.role p { font-weight: 300; max-width: 46em; }
.role ul { margin: .75rem 0 0; padding: 0; list-style: none; max-width: 46em; }
.role li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; font-weight: 300; }
.role li::before { content: "–"; position: absolute; left: 0; color: var(--orange-text); }

.earlier { list-style: none; margin: 0; padding: 0; }
.earlier li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--stone);
}
.earlier strong { font-family: var(--font-head); font-weight: 600; color: var(--teal); font-size: 1.1875rem; }
.earlier span { font-weight: 300; color: var(--muted); }

/* --------------------------------------------------------------------------
   Case study
   -------------------------------------------------------------------------- */

.cs-hero { padding-block: clamp(3rem, 8vw, 7rem) clamp(2rem, 4vw, 3.5rem); }
.cs-hero .display { max-width: 14ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

.cs-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem clamp(2rem, 4vw, 4rem);
  border-top: 1px solid var(--stone);
  padding-top: 2rem;
}
@media (min-width: 860px) { .cs-meta { grid-template-columns: 1fr 1fr; } }
.cs-meta h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-text);
  margin-bottom: .6rem;
}
.cs-meta p { font-weight: 300; font-size: clamp(1.125rem, .5vw + 1rem, 1.3125rem); }

.cs-cover {
  background: #fff;
  margin-block: clamp(1.5rem, 4vw, 3rem);
}
.cs-cover img { margin-inline: auto; }

/* Full-bleed cover: runs edge to edge of the viewport */
.cs-cover--bleed img { width: 100%; }

.cs-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem clamp(2rem, 5vw, 5rem);
  padding-block: clamp(5rem, 11vw, 10rem) 0;
}
@media (min-width: 960px) {
  .cs-section { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .cs-section > .cs-section-head { position: sticky; top: 2rem; align-self: start; }
}
.cs-section h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.02;
}
.cs-section .num {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--orange-text);
  margin-bottom: .75rem;
}
/* On wide screens the number sits above the headline, so the headline and
   the copy beside it share a top edge */
@media (min-width: 960px) {
  .cs-section-head { padding-top: 0; }
  .cs-section .num { position: absolute; transform: translateY(calc(-100% - .75rem)); margin: 0; }
  .cs-section-body { padding-top: .2em; }
}
.cs-section-body > * + * { margin-top: 1.5rem; }
.cs-section h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.375rem;
  margin-bottom: .35rem;
}
.cs-section p { font-weight: 300; }
.cs-section-body > p { font-weight: 600; }

.step + .step { margin-top: 2rem; }

.cs-figure { margin: clamp(2rem, 5vw, 4rem) 0 0; }
.cs-figure img { width: 100%; background: var(--stone-soft); }
.cs-figure--half { width: 50%; margin-inline: auto; }
@media (max-width: 600px) { .cs-figure--half { width: 100%; } }
.cs-figure figcaption {
  margin-top: .9rem;
  font-weight: 300;
  font-size: 1.0625rem;
  color: var(--body);
  max-width: 44em;
}
.cs-figure figcaption strong {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--teal);
  letter-spacing: .02em;
}

.figure-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 760px) { .figure-pair { grid-template-columns: 1fr 1fr; } }
.figure-pair .cs-figure { margin: 0; }

.result {
  margin-top: clamp(4rem, 9vw, 8rem);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
  background: var(--orange);
  color: var(--teal);
  border-top-right-radius: var(--radius-big);
}
.result .label { color: var(--teal); }
.result .label::after { background: var(--teal); }
.result p {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  line-height: 1.08;
  max-width: 24ch;
  color: var(--teal);
}

.cs-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--stone);
}
.cs-next a {
  display: block;
  padding: 1.75rem 0;
  text-decoration: none;
}
.cs-next a:last-child { text-align: right; }
.cs-next small {
  display: block;
  font-family: var(--font-head);
  font-size: .9375rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .35rem;
}
.cs-next span {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  color: var(--teal);
  line-height: 1.1;
}
.cs-next a:hover span { color: var(--orange-text); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact { padding-block: clamp(3rem, 8vw, 7rem) clamp(2rem, 5vw, 4rem); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.contact .display { margin-bottom: 2rem; }

.contact-list { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--stone); }
.contact-list li { border-bottom: 1px solid var(--stone); }
.contact-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.35rem 0;
  text-decoration: none;
}
.contact-list small {
  display: block;
  font-family: var(--font-head);
  font-size: .9375rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-list strong {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2.25rem);
  color: var(--teal);
  overflow-wrap: anywhere;
}
.contact-list svg { flex-shrink: 0; width: 28px; height: 28px; color: var(--orange-text); transition: transform .2s; }
.contact-list a:hover strong { color: var(--orange-text); }
.contact-list a:hover svg { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) { .contact-list svg { transition: none; } }

.contact-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-top-right-radius: var(--radius-big);
}

.expertise { margin-top: 2.5rem; }
.expertise ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.expertise li {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  color: var(--teal);
  background: var(--stone);
  padding: .4rem .9rem;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .nav { gap: 1.1rem; }
  .nav a { font-size: 1rem; letter-spacing: .1em; }
  .footer-links { gap: 1rem; }
}

@media print {
  .site-header, .site-footer, .about-intro .actions { display: none; }
  body { background: #fff; }
}

/* --------------------------------------------------------------------------
   Tile grid (DCE design system artifacts): square tiles, 3 across
   -------------------------------------------------------------------------- */

.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(3rem, 7vw, 6rem);
}
@media (min-width: 600px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }

.tile { margin: 0; }
.tile a { display: block; background: #fff; box-shadow: 0 0 0 1px var(--stone); }
.tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  transition: opacity .2s;
}
.tile--contain img { object-fit: contain; object-position: center; }
.tile a:hover img { opacity: .88; }
@media (prefers-reduced-motion: reduce) { .tile img { transition: none; } }
.tile figcaption {
  margin-top: .9rem;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.tile figcaption strong {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--teal);
}