/* Adam Columbia portfolio. Values measured from Figma frame 27:3 "Portfolio / Desktop 1440" (960 px column). */

/* Palette (Figma styles Portfolio/Background, Text Primary, Text Body, Rule Fade) and layout sizes */
:root {
  --bg: #303234;            /* page background, light charcoal */
  --text-primary: #eceae4;  /* titles, taglines, CTA text, button fill */
  --text-body: #bdbbb5;     /* paragraphs, dates, links, ornament */
  --rule: #7a7d81;          /* fading entry rules */
  --media-slot: #26282a;    /* empty video slot (shows until the file exists) */
  --font: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --rule-fade: linear-gradient(90deg, rgba(122, 125, 129, 0) 0%, var(--rule) 12%, var(--rule) 88%, rgba(122, 125, 129, 0) 100%);

  /* Layout sizes from the Figma auto-layout frames */
  --column-width: 960px;    /* Column */
  --right-width: 380px;     /* Right column, fixed */
  --media-width: 360px;     /* portrait and videos */
  --portrait-height: 360px;
  --video-height: 203px;    /* 360 x 203 video slot */
  --inner-gap: 16px;        /* Header gap (title to date) and Body gap (Left to Right) */
  --inner-col-gap: 32px;    /* Entry Inner gap between Header and Body */
  --inner-pad-top: 36px;    /* Entry Inner top padding */
  --inner-pad-x: 20px;      /* Entry Inner left / right padding */
  --inner-pad-bottom: 32px; /* Entry Inner bottom padding */
  --entry-pad-bottom: 32px; /* Entry bottom padding */
  --left-gap: 32px;         /* Left column gap between blocks */
  --blurb-gap: 16px;        /* Blurb gap (also Experience Blurb) */
  --right-gap: 12px;        /* Right column gap between media */
  --links-indent: 32px;     /* Links left padding */
  --footer-gap: 60px;       /* Footer Gap Top and Footer Body padding */
}

/* Reset the few browser defaults that would shift the measured spacing */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

html { background: var(--bg); }

/* Body text: 16 px / 26 px everywhere (paragraphs, job detail, links, dates, CTA, copyright) */
body {
  margin: 0;
  padding-top: 17px;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* Centred 960 px column holding everything */
.column {
  width: var(--column-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Site title: 72 px top/bottom padding, 12 px between name and subtitle */
.site-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 72px 0;
  text-align: center;
}
.site-title__name {
  font-size: 48px;
  line-height: 60px;
  font-weight: 400;
  color: var(--text-primary);
  white-space: nowrap;
}
.site-title__subtitle {
  font-size: 20px;
  line-height: 30px;
  font-style: italic;
  color: var(--text-body);
}

/* Flourish rule: a fading 1 px line at y 9.5 with the 160 x 20 ornament centred on top */
.flourish {
  position: relative;
  height: 20px;
  width: 100%;
}
.flourish::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9.5px;
  height: 1px;
  background-image: var(--rule-fade);
}
.flourish__ornament {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}
.title-gap { height: 7px; }

/* Entries: 32 px bottom padding, a 1 px fading rule on top (not on About) */
.entry {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--entry-pad-bottom);
}
.entry__rule {
  height: 1px;
  width: 100%;
  background-image: var(--rule-fade);
}

/* Entry Inner: Header row on top, Body row under it, 32 px apart */
.entry__inner {
  display: flex;
  flex-direction: column;
  gap: var(--inner-col-gap);
  padding: var(--inner-pad-top) var(--inner-pad-x) var(--inner-pad-bottom);
}

/* Header: title fills the row, date hugs its text on the right, both sitting on the bottom line */
.entry__header {
  display: flex;
  align-items: flex-end;
  gap: var(--inner-gap);
  width: 100%;
}

/* Body: Left column (fills) + fixed 380 px Right column, 16 px gap, top aligned */
.entry__body {
  display: flex;
  align-items: flex-start;
  gap: var(--inner-gap);
  width: 100%;
}
.entry__left {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--left-gap);
}
/* Right column holds media only, right aligned */
.entry__right {
  flex: 0 0 var(--right-width);
  width: var(--right-width);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--right-gap);
}
/* Experience: empty spacer (Figma 380 x 1) that keeps Left at 524 px */
.entry__right--spacer { height: 1px; }

/* Entry titles: 30 px Bold, one line at desktop, takes all width the date leaves */
.entry__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 30px;
  line-height: 37px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Blurb: tagline and paragraphs stacked 16 px apart */
.blurb {
  display: flex;
  flex-direction: column;
  gap: var(--blurb-gap);
  width: 100%;
}
.tagline {
  font-size: 22px;
  line-height: 27px;
  font-weight: 700;
  color: var(--text-primary);
}
.paragraph { color: var(--text-body); }

/* Experience jobs: bold primary line 1, body grey line 2 (both 16 / 26) */
.job__title { font-weight: 700; color: var(--text-primary); }
.job__detail { color: var(--text-body); }

/* CTA row: full width, 24 px star box, 8 px gap, primary text that may wrap */
.cta {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}
.cta__star {
  display: block;
  flex: none;
  /* Star art fills 95.1% x 90.45% of the Figma 24 x 24 star box (point at the top, flat base) */
  width: 22.83px;
  height: 21.71px;
  margin: 0 0.585px 2.29px;
}

/* Downloads row: pill buttons, 7 px apart */
.downloads {
  display: flex;
  align-items: center;
  gap: 7px;
}
/* Button: 15 / 23 label, 5 px top/bottom and 16 px left/right padding, 4 px radius */
.button {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 4px;
  background: var(--text-primary);
  color: var(--bg);
  font-size: 15px;
  line-height: 23px;
  text-decoration: none;
  white-space: nowrap;
}
a.button:hover { background: #ffffff; }
/* Award badge: sits in the button slot of the Downloads row, 255 px wide like the Figma node */
.award {
  display: block;
  width: 255px;
  height: auto;
}

/* Links list: 32 px indent, underlined body text */
.links {
  display: flex;
  flex-direction: column;
  padding-left: var(--links-indent);
  white-space: nowrap;
}
.links a { text-decoration: underline; }
.links a:hover { color: var(--text-primary); }

/* Date: right end of the header row, hugs its text, never wraps */
.date {
  margin-left: auto;
  padding: 0;
  white-space: nowrap;
  text-align: right;
  color: var(--text-body);
}
.portrait {
  display: block;
  width: var(--media-width);
  height: var(--portrait-height);
  object-fit: cover;
}
.media {
  display: block;
  width: var(--media-width);
  height: var(--video-height);
  object-fit: cover;
  background: var(--media-slot);
}

/* Footer: 60 px gap, rule, 7 px gap, rule, then 60 px padded copyright */
.footer {
  display: flex;
  flex-direction: column;
  padding-top: var(--footer-gap);
}
.footer__rule {
  height: 1px;
  width: 100%;
  background-image: var(--rule-fade);
}
.footer__rule--second { margin-top: 7px; }
.footer__copyright {
  padding: var(--footer-gap) 0;
  text-align: center;
  color: var(--text-body);
  white-space: nowrap;
}

/* Narrower than the 960 px column plus gutters: fluid column with 16 px side padding */
@media (max-width: 1040px) {
  .column {
    width: 100%;
    max-width: var(--column-width);
    padding: 0 16px;
  }
}

/* Phones: stack Left above Right, media scale to the full width keeping aspect ratio */
@media (max-width: 760px) {
  .site-title__name { white-space: normal; }
  /* Column already supplies the 16 px gutter, so the entry drops its side padding */
  .entry__inner { padding: var(--inner-pad-top) 0 var(--inner-pad-bottom); }
  /* Header wraps: the date drops under the title, left aligned (title may wrap here only) */
  .entry__header {
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 4px;
  }
  .entry__title { flex: 1 1 100%; }
  .date {
    margin-left: 0;
    text-align: left;
    white-space: normal;
  }
  /* Body stacks: Left above Right, both full width */
  .entry__body {
    flex-direction: column;
    align-items: stretch;
    gap: var(--left-gap);
  }
  .entry__left { flex: none; width: 100%; }
  .entry__right {
    flex: none;
    width: 100%;
    align-items: stretch;
  }
  .entry__right--spacer { display: none; }
  .portrait,
  .media {
    width: 100%;
    height: auto;
  }
  .portrait { aspect-ratio: 1 / 1; }
  .media { aspect-ratio: 360 / 203; }
  /* Award never overflows a narrow phone column */
  .award { max-width: 100%; }
  .links,
  .button,
  .footer__copyright { white-space: normal; }
}