/* ==========================================================================
   Cole Sherman, portfolio
   A direct port of Portfolio.dc.html. Every value below is the value from
   the design file: the tokens it pulled from the "classical" design system,
   the base rules from that system's stylesheet that actually affect the
   render, and then the design's own inline styles, element by element.
   ========================================================================== */

/* --- tokens from _ds/classical-.../styles.css ---------------------------- */

:root {
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;

  /* Overridden by the design file, after the design system had set its own. */
  --font-heading: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Newsreader", Georgia, serif;
}

/* --- base, also from the design system's stylesheet ---------------------- */

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

body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}

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

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* --- the design file's own <style> block --------------------------------- */

html, body { margin: 0; padding: 0; background: #0c1030; }

a {
  color: #7d5411;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: #a06f24; }

::selection { background: #ffe3bf; }

/* --- layout -------------------------------------------------------------- */

.root {
  position: relative;
  min-height: 100vh;
  /* The small viewport, so a phone's collapsing URL bar cannot leave the card
     centred against space that is not on screen. */
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--color-text);
}

#noise {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  image-rendering: pixelated;
}

/* .root is a flex column and main takes `margin: auto`, which centres the card
   on both axes. Auto margins are used rather than justify-content because they
   never resolve negative: once the card is taller than the viewport they fall
   to 0, the article's own 64px margins take over, and the top of the card can
   still be scrolled to. */
.root {
  display: flex;
  flex-direction: column;
}

main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: auto;
  padding: 0 20px;
  box-sizing: border-box;
}

article {
  background: #fffefc;
  border: 1px solid rgba(32, 31, 29, 0.10);
  box-shadow: 0 18px 50px rgba(45, 43, 43, 0.16);
  padding: 76px 72px 56px;
  margin: 64px 0;
}

/* --- header -------------------------------------------------------------- */

header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
}

.tagline {
  margin: 0;
  font-size: 15.5px;
  color: var(--color-neutral-700);
  font-style: italic;
}
.tagline span { font-style: normal; }

/* --- nav ----------------------------------------------------------------- */

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 28px 0 32px;
  border-bottom: 1px solid var(--color-divider);
}

nav button {
  position: relative;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0 0 11px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  cursor: pointer;
}

nav button:hover { color: #201f1d; }

.marker {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #7d5411;
}

nav button.is-active .marker { display: block; }

/* --- panels -------------------------------------------------------------- */

section { min-height: 320px; }

section.about {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Wins over section.about's display:flex, so `hidden` behaves. */
section[hidden] { display: none; }

/* --- about --------------------------------------------------------------- */

.p1 { margin: 0; font-size: 16.5px; }

.p2 {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.72;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

.photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.slot {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* The pan stored for this slot in .image-slots.state.json, resolved to its
   object-position equivalent. */
.slot img.crop-right { object-position: 100% 50%; }

/* --- work ---------------------------------------------------------------- */

.roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.roles li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 24px;
  align-items: baseline;
}

.role-title { font-size: 16.5px; }
.role-title strong { font-weight: 600; }

.role-date {
  font-size: 14px;
  color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
}

.role-desc {
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-neutral-800);
}

.role-stack {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-neutral-600);
}

.resume { margin: 18px 0 0; font-size: 14.5px; }

/* --- projects ------------------------------------------------------------ */

/* Projects are the same kind of entry as a role, so they get the same grid:
   name and where it lives on the left, the dates on the right, then the
   description and the stack across the full width. */

.projects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.projects li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 24px;
  align-items: baseline;
}

.project-title { font-size: 16.5px; }
.project-title strong { font-weight: 600; }

.project-date {
  font-size: 14px;
  color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
}

.project-desc {
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-neutral-800);
}

.project-stack {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-neutral-600);
}

/* --- contact ------------------------------------------------------------- */

.contact { margin: 0; font-size: 16.5px; line-height: 1.8; }

/* --- footer -------------------------------------------------------------- */

footer {
  margin-top: 44px;
  padding-top: 16px;
  border-top: 1px solid var(--color-divider);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--color-neutral-600);
}

/* ==========================================================================
   The one block that is NOT in the design file.
   The design has no breakpoints, so on a phone the card keeps its 76/72px
   padding and leaves roughly 200px for text. This only shrinks that padding
   and the outer margin. Delete this block to get the design exactly as drawn
   at every width.
   ========================================================================== */

@media (max-width: 720px) {
  main { padding: 0 14px; }
  article { padding: 40px 26px 34px; margin: 28px 0; }
  h1 { font-size: 36px; }
  nav { gap: 20px; }
  .roles li,
  .projects li { grid-template-columns: 1fr; }
}