/* Newman.css — phone-first, minimal, easy to extend */

:root{
  --page-width: 700px;
  --page-pad: 1rem;

  --text: #243040;
  --muted: #516173;
  --bg: #f3f7ff;

  --banner: #1f5fa8;
  --banner-text: #ffffff;
  --ns-blue: #1f4e8c;
  --card: #ffffff;
  --line: rgba(0,0,0,0.10); 
  --radius: 14px;
}

/* Base */
*{ box-sizing: border-box; }

html, body{ height: 100%; background: var(--bg);}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
}

/* Page container (chosen page width) */
.page{
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-pad) 2rem;
}

/* ***************** Blue strip banner: full width within the page container */
.banner{
  margin: 0 calc(-1 * var(--page-pad)); /* pulls banner to the page edges */
  background: var(--banner);
  color: var(--banner-text);
  padding: 1rem var(--page-pad);
}
.banner-inner{
  /* Keeps banner text aligned with the rest of the page content */
  max-width: var(--page-width);
  margin: 0 auto;
}

.banner-title{
  margin: 0 0 0.25rem 0;
  font-size: clamp(1.35rem, 6vw, 2rem);
  text-align:center;
  line-height: 1.1;
}

.banner-subtitle{
  margin: 0;
  font-size: clamp(0.95rem, 3.4vw, 1.05rem);
  opacity: 0.95;
}


/********************************* Footer ********************************/
.footer{
  margin-top: 1.5rem;
  padding: 1rem 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-copy{
  margin: 0 0 0.5rem 0;
}

.back-link{
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}

.back-link:hover{
  text-decoration: underline;
}

/* Tablet/desktop refinements (phone-first) */
@media (min-width: 700px){
  :root{ --page-pad: 1.25rem; }

  .banner{
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .section{
    padding: 1.25rem;
  }
}

/* Scrollable menu strip (touches banner, light blue) */

.scroll-nav{
  margin: 0 calc(-1 * var(--page-pad));     /* reach container edges */
  background: #c6e0ff;                      /* light blue band */
  border-bottom: 1px solid var(--line);
  position: relative;
  margin-bottom:0;
}

/* The only horizontal scroller */
.scroll-nav-inner{
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
 
  padding: 0.6rem var(--page-pad);
  padding-bottom: 10px;                      /* prevents scrollbar covering links on Safari */
}
.scroll-nav-inner{
  padding-right: calc(var(--page-pad) + 5.5rem);
}
/* Links */
.scroll-link{
  display: inline-block;
  margin-right: 0.5rem;
/*   padding: 0.45rem 0.7rem; */
   padding: 0.1rem 0.4rem;
  text-decoration: none;
  color: var(--text);
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 0; /*999px;*/
  line-height:1.2;
}

.scroll-link:hover{ text-decoration: underline; }
.scroll-link:focus{ outline: 2px solid rgba(0,0,0,0.35); outline-offset: 2px; }

/* “Swipe →” hint (subtle, doesn’t block clicks) */
.scroll-hint{
  position: absolute;
  right: 0;
  top: 0;

           /*   padding: 0.6rem 1rem;     */
 /* padding: 0.5rem 0.4rem; */
        padding:0;
  font-size: 0.9rem;
  font-weight: 600;

  color: #1f3f66;
  background: linear-gradient(
    to left,
    #c6e0ff 70%,
    rgba(198,224,255,0)
  );

  pointer-events: none;
  opacity: 0.25;                 /* clearly “faded” at rest */
  transition: opacity 0.25s ease;
  z-index: 2;
}
.scroll-nav:hover .scroll-hint{
  opacity: 1;
}

/* On wider screens, hide the hint (usually no need) 
@media (min-width: 700px){
  .scroll-hint{ display: none; }
} */
@media (min-width: 700px){
  .scroll-hint{ opacity: 0.18; }
  .scroll-nav:hover .scroll-hint{ opacity: 0.85; }
}



/* *****************************         Content sections       *****************/



/* ***********************Major Section (large top image (text under image) *****/

.major-section{
  margin: 1.25rem 0;
  margin: 1.25rem  calc(-1 * var(--page-pad)); /* pulls banner to the page edges */
  padding: 0;
  margin-top:0;
}
.major-link{
  color: var(--text);
  text-decoration: none;
}
.major-link:hover .minor-btn{ text-decoration: underline; }
.major-link:focus{ outline: 2px solid rgba(0,0,0,0.35); outline-offset: 3px; }
.major-media{
  display: block;
  width: 100%;
  height: auto;
}

.major-text{
  padding: 0.9rem var(--page-pad) 0;
}

.major-title{
  margin: 0 0 0.4rem 0;
  line-height: 1.2;
  color:var(--text);
}

.major-lede{
  text-align:justify;
  margin: 0;
  line-height: 1.45;
  color: var(--muted);
}


/**************************       Minor section (small right image + text left) */

.minor-section{
  margin: 1rem 0;
  padding: 0rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.minor-link{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.9rem;
  text-decoration: none;
  color:var(--text);
}

/* Put image on the right without changing HTML order */
.minor-link{ flex-direction: row; }
.minor-media{ order: 2; }
/* Hover/focus (accessible, calm) */
.minor-link:hover .minor-btn{ text-decoration: underline; }
.minor-link:focus{ outline: 2px solid rgba(0,0,0,0.35); outline-offset: 3px; }

/*.minor-text{ order: 1; flex: 1; min-width: 0; } */
.minor-text{flex: 1 1 auto; min-width: 0; }

.minor-title{
  margin: 0 0 0.35rem 0;
  font-size: clamp(1.05rem, 4.5vw, 1.25rem);
  line-height: 1.2;
  color: var(--text);
}

.minor-lede{
  text-align:justify;
  margin: 0 0 0.75rem 0;
  color: var(--muted);
  line-height: 1.45;
}

.minor-extra{
 text-align:justify;
  display: none;
  margin: 0 0 0.6rem 0;
  color: var(--muted);
  line-height: 1.45;
}

/* Small image to the right */
.minor-media{
  display: block;
  width: 100%;
  flex: 0 1 25%;        /* ≈ 1/4 of phone width */
  max-width: 110px;     /* keeps thumbnails sensible on phones */
  height: auto;
  border-radius: 12px;
}
@media (min-width: 600px){
  .minor-media{
    flex: 0 1 220px;    /* your current good tablet size */
    max-width: 250px;  /* hard cap */
  }
}
@media (min-width: 600px){
  .minor-extra{
    display: block;
  }
}

/**********************************.      Text only Section          ************/

.section{
  margin-top: 1rem;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.section h2{
  margin: 0 0 0.5rem 0;
  font-size: clamp(1.1rem, 4.5vw, 1.35rem);
  line-height: 1.2;
}

.section p{
  margin: 0.5rem 0 0 0;
  color: var(--muted);
}


/****************************       Buttons, Utilities          *****************/

/* “Read more” button look */
.minor-btn{
  display: inline-block;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.85);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
}
/* Read-more button */
.minor-btn {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.23rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--ns-blue);
  background: #ffffff;
  color: var(--ns-blue);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.section-divider{
  margin: 1.5rem 0;
  height: 2px;
  background: var(--banner);
}
/* ****************************** Article and Back Link ************************************/
.detail-nav{
  margin: 1rem 0;
}

.back-link{
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}
.detail-image{
  margin: 0;
}
/* ******************************* Article Full Width image ****************************/
.detail-image img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.detail-caption{
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted);
}


/* ******************************** Article Text *****************************************/
.detail-article{
  margin-top: 1rem;
}

.detail-header{
  margin-bottom: 1rem;
}

.detail-title{
  margin: 0 0 0.4rem 0;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  line-height: 1.2;
}

.detail-meta{
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.detail-body p{
  margin: 0 0 1rem 0;
  line-height: 1.55;
}

/* ****************************=== Reference grid section === **************************/
/* === Reference grid section (matches your :root tokens) === */
.ref-section{
  margin: 1.25rem 0;
}

.ref-title{
  margin: 0 0 0.75rem 0;
  font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  line-height: 1.25;
  color: var(--text);
}

.ref-grid{
  display: grid;
/*  grid-template-columns: repeat(4, minmax(0, 1fr));*/
/* Set the max number of columns */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

@media (max-width: 720px){
  .ref-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px){
  .ref-grid{ grid-template-columns: 1fr; }
}

.ref-col{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

.ref-col-title{
  margin: 0 0 0.55rem 0;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ns-blue);
}

.ref-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.ref-list li{
  margin: 0.35rem 0;
}

.ref-link{
  display: inline-block;
  text-decoration: none;
  color: var(--text);
  opacity:0.4;
}
.ref-link-2{
  display: inline-block;
  text-decoration: none;
  color: var(--text);
}

.ref-link-2:hover{
  text-decoration: underline;
}

.ref-link:focus{
  outline: 2px solid rgba(31,95,168,0.35);
  outline-offset: 3px;
  border-radius: 8px;
}