/* ==========================================================================
   baileynye.com
   Built to match the Canva mockup exactly at the design width of 1024.5px.

   HOW THE LAYOUT WORKS
   --------------------
   The mockup is a fixed-size canvas (1024.5 x 2946 for the home page,
   1024.5 x 3456 for the article). From 768px up, every element is placed on
   that canvas at its exact coordinate, and js/main.js scales the whole canvas
   down proportionally on narrower desktops/tablets - so the design stays
   pixel-for-pixel identical at any width.
   Below 768px the canvas is switched off and everything reflows into a
   single readable column.
   ========================================================================== */

:root{
  --blue:#225796;          /* the one brand blue, taken from the PDF */
  --video-bg:#1e1e1c;      /* the dark video placeholder on the home page */
  --ink:#000;
  --font-display:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-article:'Times New Roman', Times, serif;
}

/* --------------------------------------------------------- reset / base */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:#fff;
  color:var(--blue);
  font-family:var(--font-sans);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,p,figure,figcaption{margin:0;}

.stage-wrap{width:100%;overflow:hidden;}
.stage{position:relative;}

/* invisible scroll targets for the nav links */
.anchor{display:block;width:1px;height:0;}

/* ==========================================================================
   MOBILE / SMALL SCREEN  (base styles, < 768px)
   ========================================================================== */
.stage{padding:0 22px;max-width:620px;margin:0 auto;}
.page-article .stage{padding-top:28px;}

/* -- header ------------------------------------------------------------- */
.site-url{
  display:block;text-align:right;text-decoration:none;
  font-size:15px;letter-spacing:.1026em;padding:18px 0 10px;
}
.logo{width:min(100%,320px);height:auto;margin:6px 0 2px;}
.logo-link{display:block;}
.tagline{font-family:var(--font-serif);font-size:24px;letter-spacing:-.023em;margin-bottom:26px;}

.main-nav{display:flex;flex-wrap:wrap;gap:18px 26px;margin-bottom:26px;}
.nav-link{
  font-family:var(--font-serif);font-size:19px;letter-spacing:-.023em;
  text-decoration:none;border-bottom:1px solid var(--blue);padding-bottom:3px;
}
.hero-photo{margin-bottom:56px;}
.hero-photo img{width:100%;aspect-ratio:568.5/379.5;object-fit:cover;}

/* -- about -------------------------------------------------------------- */
.about-title{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.063em;line-height:1.4;margin-bottom:18px;}
.about-title span{display:block;}
.about-photo{margin-bottom:26px;}
.about-photo img{width:100%;aspect-ratio:2/3;object-fit:cover;}
.about-text p{font-size:17px;line-height:1.4;margin-bottom:22px;}
.about-photo-right{margin:8px 0 60px;}
.about-photo-right img{width:100%;aspect-ratio:16/9;object-fit:cover;}

/* -- work --------------------------------------------------------------- */
.work-title{font-family:var(--font-display);font-weight:700;font-size:52px;letter-spacing:-.063em;line-height:1;text-align:right;margin-bottom:26px;}
.video{background:var(--video-bg);aspect-ratio:407.6/229.3;margin-bottom:16px;}
.video iframe{width:100%;height:100%;border:0;display:block;}
.project{margin-bottom:46px;}
.project-title{font-family:var(--font-serif);font-weight:700;font-size:17px;letter-spacing:.1026em;line-height:1.4;margin-bottom:14px;}
.project-title a{text-decoration:none;}
.project-title a:hover{text-decoration:underline;}
.project-desc{font-size:13px;line-height:1.38;}
.project-link{font-size:13px;line-height:1.38;margin-top:14px;}
.project-link a{text-decoration:underline;}

.yt-cta{font-size:17px;line-height:1.4;text-align:center;margin-bottom:14px;}
.yt-button{display:block;width:58.5px;margin:0 auto 60px;}
.yt-button svg{display:block;width:100%;height:auto;fill:var(--blue);}
.yt-button:hover svg{opacity:.82;}

/* -- contact ------------------------------------------------------------ */
.contact-title{font-family:var(--font-display);font-weight:700;font-size:52px;letter-spacing:-.063em;line-height:1;margin-bottom:20px;}
.contact-email,.contact-social{font-size:16px;letter-spacing:.1026em;line-height:1.6;margin-bottom:14px;overflow-wrap:break-word;}
.ig{margin-left:11px;}
.contact-email a,.contact-social a{text-decoration:none;}
.contact-email a:hover,.contact-social a:hover{text-decoration:underline;}

/* -- footer ------------------------------------------------------------- */
.site-footer{
  background:var(--blue);color:#fff;text-align:center;
  font-size:16px;letter-spacing:.1026em;
  padding:22px 16px;margin:46px -22px 0;
}

/* ==========================================================================
   ARTICLE PAGE - mobile
   ========================================================================== */
.back-link{
  position:fixed;right:14px;bottom:14px;z-index:50;
  background:var(--blue);color:#fff;text-decoration:none;
  font-family:var(--font-sans);font-size:12px;letter-spacing:.08em;
  padding:9px 14px;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.back-link:hover{opacity:.88;}

.art-title{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.063em;line-height:1.05;color:var(--blue);margin-bottom:22px;}
.art-deck{font-family:var(--font-serif);font-weight:700;font-size:16px;letter-spacing:.1026em;line-height:1.4;text-transform:uppercase;text-align:center;color:var(--blue);margin-bottom:22px;}
.art-intro,.art-close-1,.art-close-2,.art-col p{
  font-family:var(--font-article);font-size:17px;line-height:1.48;color:var(--ink);
}
.art-intro{margin-bottom:24px;}
.art-rule{border:0;border-top:1px solid #000;margin:0 0 28px;}
.art-video{background:#000;aspect-ratio:408.1/219.5;margin-bottom:34px;}
.art-video iframe{width:100%;height:100%;border:0;display:block;}
.art-fig{margin:0 0 34px;}
.art-fig img{width:100%;aspect-ratio:2/3;object-fit:cover;}
.art-fig figcaption{
  font-family:var(--font-article);font-style:italic;font-size:13px;letter-spacing:.1027em;
  line-height:1.4;text-align:center;color:var(--ink);margin-top:10px;
}
.art-col{margin-bottom:34px;}
.art-col p{margin-bottom:22px;}
.art-close-1{margin-bottom:34px;}
.art-close-2{margin-bottom:60px;}
.art-close-2 a{color:var(--ink);}
.dbr{display:none;}          /* the mockup's hard line breaks: desktop only */

/* ==========================================================================
   DESKTOP CANVAS  (>= 768px) - exact 1024.5px mockup coordinates
   ========================================================================== */
@media (min-width:768px){

  .dbr{display:inline;}

  .stage{
    width:1024.5px;
    margin:0 auto;
    padding:0;
    max-width:none;
    transform-origin:top left;
  }
  .stage--home{height:2946px;}
  .stage--article{height:3456px;padding-top:0;}

  .stage > *,
  .stage .hero > *,
  .stage .about > *,
  .stage .work > *,
  .stage .contact > *{position:absolute;margin:0;}

  .hero,.about,.work,.contact{position:static;}

  .anchor{position:absolute;left:0;width:1px;height:1px;}
  #about{top:600px;}
  #work{top:1180px;}
  #contact{top:2660px;}

  /* ------------------------------------------------- header / hero ----- */
  .site-url{
    left:auto;right:52.9px;top:37.7px;
    display:inline;text-align:left;padding:0;
    font-size:17.19px;line-height:1;letter-spacing:.1026em;
    text-decoration:none;
  }
  .logo-link{left:31.6px;top:35px;width:364.2px;height:220.9px;}
  .logo{width:364.2px;height:220.9px;margin:0;}
  .tagline{left:31.2px;top:226.6px;font-size:26.77px;line-height:1;letter-spacing:-.023em;}

  .main-nav{position:absolute;left:624.2px;top:158.2px;display:block;gap:0;margin:0;}
  .nav-link{
    position:static;display:inline-block;text-align:center;vertical-align:top;
    font-size:19.96px;line-height:1;letter-spacing:-.023em;
    border-bottom:1px solid var(--blue);padding:0 0 2.2px;
  }
  .nav-link--about{width:104.6px;margin-right:32.9px;}
  .nav-link--work {width:104.6px;margin-right:31.0px;}
  .nav-link--contact{width:84.6px;}
  .nav-link:hover{opacity:.7;}

  .hero-photo{left:413.1px;top:191.4px;width:568.5px;height:379.5px;margin:0;}
  .hero-photo img{width:100%;height:100%;object-fit:cover;}

  /* ------------------------------------------------- about ------------- */
  .about-title{
    left:36.5px;top:620.5px;z-index:3;
    font-size:31.73px;line-height:44.25px;letter-spacing:-.063em;margin:0;
  }
  .about-photo{left:91.7px;top:662.6px;width:288px;height:432px;z-index:1;margin:0;}
  .about-photo img{width:100%;height:100%;object-fit:cover;}

  .about-text{left:399.3px;top:703.2px;width:250px;}
  .about-text p{font-size:17.19px;line-height:23.79px;margin:0 0 23.8px;letter-spacing:0;}
  .about-text p:last-child{margin-bottom:0;}

  /* right-hand photo is cropped by the page edge in the mockup */
  .about-photo-right{
    left:667.6px;top:730.6px;width:356.9px;height:411.2px;
    overflow:hidden;margin:0;
  }
  .about-photo-right img{
    width:731.2px;height:411.2px;max-width:none;
    margin-left:-176.6px;object-fit:cover;
  }

  /* ------------------------------------------------- my work ----------- */
  .work-title{left:664.1px;top:1200.3px;font-size:72.52px;line-height:1;letter-spacing:-.063em;text-align:left;margin:0;}

  .video{width:407.6px;height:229.3px;aspect-ratio:auto;margin:0;}
  .video--1{left:104.5px;top:1299.9px;}
  .video--2{left:104.5px;top:1613.3px;}
  .video--3{left:512.2px;top:1913.1px;}
  .video--4{left:512.2px;top:2225.6px;}

  .project{margin:0;}
  .project--1{left:534.7px;top:1304.6px;width:442px;}
  .project--2{left:534.7px;top:1646.0px;width:300px;}
  .project--3{left:104.5px;top:1934.4px;width:365px;}
  .project--4{left:104.5px;top:2321.0px;width:375px;}

  .project-title{font-size:17.19px;line-height:24px;letter-spacing:.1026em;margin:0;}
  .project-desc{font-size:12.71px;line-height:17.6px;letter-spacing:0;margin:0;}
  .project-link{font-size:12.71px;line-height:1;letter-spacing:0;margin:0;}
  .project-link a{text-decoration:none;}
  .project-link a:hover{text-decoration:underline;}

  /* exact vertical offsets of the copy inside each project block */
  .project--1 .project-title{position:absolute;left:.9px;top:0;white-space:nowrap;}
  .project--1 .project-desc {position:absolute;left:0;top:40.5px;width:442px;}
  .project--1 .project-link {position:absolute;left:0;top:201.3px;}
  .project--2 .project-title{position:absolute;left:0;top:0;}
  .project--2 .project-desc {position:absolute;left:0;top:94.7px;width:300px;}
  .project--3 .project-title{position:absolute;left:0;top:0;white-space:nowrap;}
  .project--3 .project-desc {position:absolute;left:0;top:67.4px;width:365px;}
  .project--4 .project-title{position:absolute;left:0;top:0;white-space:nowrap;}
  .project--4 .project-desc {position:absolute;left:0;top:55.2px;width:375px;}

  .yt-cta{left:169.8px;top:2539.1px;font-size:17.19px;line-height:1;text-align:left;margin:0;}
  .yt-button{left:601.1px;top:2528.7px;width:58.5px;height:38.8px;margin:0;}

  /* ------------------------------------------------- contact ----------- */
  .contact-title{left:37.7px;top:2681.2px;font-size:72.52px;line-height:1;letter-spacing:-.063em;margin:0;}
  .contact-email{left:367px;top:2698.3px;font-size:17.19px;line-height:1;letter-spacing:.1026em;margin:0;white-space:nowrap;}
  .contact-social{left:481.3px;top:2751.9px;font-size:17.19px;line-height:1;letter-spacing:.1026em;margin:0;white-space:nowrap;}
  /* exact word gaps from the mockup */
  .ig--1{margin-left:18.8px;}
  .ig--amp{margin-left:30.3px;}
  .ig--2{margin-left:36.2px;}

  /* ------------------------------------------------- footer ------------ */
  .site-footer{
    position:absolute;left:0;top:2880px;width:1024.5px;height:66px;margin:0;padding:0;
  }
  .site-footer span{
    position:absolute;left:0;top:23.4px;width:100%;
    font-size:17.19px;line-height:1;letter-spacing:.1026em;
  }

  /* ==================================================== article page ==== */
  .art-title{left:58.8px;top:61.6px;font-size:45.47px;line-height:1;letter-spacing:-.063em;margin:0;}
  .art-deck{left:57.6px;top:154.1px;width:909.3px;font-size:17.19px;line-height:24px;letter-spacing:.1026em;margin:0;}
  .art-intro{left:57.6px;top:226.0px;width:760px;font-size:17.19px;line-height:25.5px;margin:0;}
  .art-rule{position:absolute;left:593.4px;top:303.6px;width:336.7px;margin:0;}
  .art-video{left:282.2px;top:348.6px;width:408.1px;height:219.5px;aspect-ratio:auto;margin:0;}

  .art-fig{margin:0;}
  .art-fig img{width:100%;height:100%;object-fit:cover;}
  .art-fig figcaption{
    position:absolute;left:0;width:100%;
    font-size:13.34px;line-height:18.62px;letter-spacing:.1027em;margin:0;
  }
  .art-fig--1{left:57.6px;top:633.6px;width:288px;height:432px;}
  .art-fig--1 figcaption{top:441.7px;}
  .art-fig--2{left:683.2px;top:1152px;width:295.5px;height:443.3px;}
  .art-fig--2 figcaption{top:456.4px;}
  .art-fig--3{left:47.5px;top:1728px;width:288px;height:432px;}
  .art-fig--3 figcaption{top:446.8px;}
  .art-fig--4{left:689px;top:2216.3px;width:288px;height:432px;}
  .art-fig--4 figcaption{top:445.4px;}
  .art-fig--5{left:344.8px;top:2789.3px;width:335.2px;height:502.5px;}
  .art-fig--5 figcaption{top:516.5px;}

  .art-col{margin:0;text-align:justify;}
  .art-col p{font-size:17.19px;line-height:25.5px;margin:0;}
  /* in the mockup each paragraph of this column is its own text box,
     so the measures differ slightly from one another */
  .art-col--1{left:382.7px;top:630.6px;width:613px;}
  .art-col--1 p{margin-bottom:31.2px;}
  .art-col--1 p:nth-child(1){width:566px;text-align:left;}
  .art-col--1 p:nth-child(2){width:584.2px;}
  .art-col--1 p:nth-child(3){width:613px;text-align:left;}
  .art-col--1 p:nth-child(4){width:574.1px;}
  .art-col--2{left:57.6px;top:1196.0px;width:577.7px;}
  .art-col--2 p{margin-bottom:25.77px;}
  .art-col--3{left:373.5px;top:1725.0px;width:593.4px;}
  .art-col--3 p{margin-bottom:50.4px;}
  .art-col--4{left:47.5px;top:2252.5px;width:604.1px;}
  .art-col--4 p{margin-bottom:67.6px;}
  .art-col--4 p:nth-child(3){width:605.5px;}
  .art-col p:last-child{margin-bottom:0;}

  .art-close-1{left:47.5px;top:2711.5px;width:960px;font-size:17.19px;line-height:25.5px;margin:0;}
  .art-close-2{left:57.6px;top:3374.8px;width:930px;font-size:17.19px;line-height:25.5px;margin:0;}
}

/* --------------------------------------------------------- small tweaks */
@media (min-width:768px) and (max-width:1024px){
  .back-link{right:18px;bottom:18px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}