/* ===== Up the Pids — Global Styles ===== */

/* Root tokens */
:root{
    --maxw: 1320px;
    --pad-x: 28px;
    --gap-x: 64px;
    --rule: 1px;
  
    /* Palette */
    --burgundy: #862633;   /* Rapids Burgundy */
    --blue: #8bb8e8;       /* Rapids light blue */
    --blue-dark: #6fa4dc;  /* slightly darker blue for rules/lines */
  }
  
  /* Base */
  *{ box-sizing:border-box; }
  html, body{ height:100%; }
  body{
    margin:0;
    background:#fff;
    color:#0b0b0b;
    font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  
  /* Background wash */
  .wash{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(52vw 52vw at -8vw 12vh,
        rgba(139,184,232,.45),
        rgba(139,184,232,.14) 55%,
        rgba(139,184,232,0) 72%);
    filter:blur(16px);
  }
  
  /* Layout container + divider */
  .wrap{
    position:relative; z-index:1;
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 var(--pad-x) 120px;
  }
  .rule{ height:var(--rule); background:var(--blue-dark); margin:26px 0 18px; }
  
  /* Masthead */
  .mast{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:baseline;
    column-gap:24px;
    margin-bottom:2px;
  }
  .brand{
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:900;
    font-size:clamp(42px,3.9vw,58px);
    line-height:1.02;
    white-space:nowrap;
    color:var(--burgundy);
  }
  .tagline{
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:800;
    font-size:clamp(18px,1.9vw,25px);
    line-height:1.02;
    color:var(--blue);
  }
  .updated{
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:700;
    font-size:14px;
    color:var(--blue);
    white-space:nowrap;
  }

  .grid .row { border-top: var(--rule) solid var(--blue-dark); }
  
  /* Tabs */
  .tabs{
    margin-top:12px;
    border-top:var(--rule) solid var(--blue-dark);
    padding-top:12px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--gap-x);
  }
  .tab{
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:900;
    font-size:clamp(20px,2.25vw,30px);
    line-height:1.03;
    padding-bottom:7px;
    border-bottom:var(--rule) solid var(--blue-dark);
    color:var(--burgundy);
    transition:all .2s ease;
  }
  .tab:hover{
    text-decoration:underline;
    text-decoration-thickness:2px;
  }
  
  /* Grid (Home/Archive) */
  .grid{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--gap-x);
    align-items:start;
  }
  .cell{ margin:0; padding:16px 0 14px; }
  .row-1{ border-top:var(--rule) solid var(--blue-dark); }
  .row-2{ border-top:var(--rule) solid var(--blue-dark); }
  
  .cell a{ color:inherit; text-decoration:none; }
  .cell a:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
  
  .eyebrow{
    display:flex; justify-content:space-between; align-items:baseline;
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:800;
    font-size:12px;
    letter-spacing:.02em;
    text-transform:uppercase;
    margin:0 0 10px 0;
    color:var(--blue);
    transition:all .2s ease;
  }
  .cell:hover .eyebrow{
    text-decoration:underline dashed;
    text-underline-offset:2px;
  }
  .cell h3{
    margin:0;
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:900;
    font-size:clamp(27px,2.85vw,40px);
    line-height:1.02;
    letter-spacing:-0.02em;
    color:var(--burgundy);
  }

  /* Archive page controls */
.archive-controls{
    border-top: var(--rule) solid var(--blue-dark);
    margin-top: 18px;
    padding-top: 16px;
    display: grid;
    grid-template-columns: 1fr;
  }
  .search-input{
    width: 100%;
    font: inherit;
    color: #0b0b0b;
    background: transparent;
    border: none;
    border-bottom: var(--rule) solid var(--blue-dark);
    padding: 10px 0 9px;
    outline: none;
  }
  .search-input::placeholder{ opacity: .55; }
  .search-input:focus{ outline: 2px solid var(--blue); outline-offset: 2px; }
  
  /* Load more row */
  .archive-actions{
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 22px 0 6px;
  }
  .archive-count{
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:800;
    font-size:12px;
    color:var(--blue);
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  
  /* Accessibility helper */
  .sr-only{
    position:absolute!important; width:1px!important; height:1px!important;
    padding:0!important; margin:-1px!important; overflow:hidden!important;
    clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
  }
  
  
  /* Article page */
  .article-start{
    border-top:var(--rule) solid var(--blue-dark);
    margin-top:18px;
  }
  .article{
    max-width:960px;
    padding-left:var(--pad-x);
    padding-right:var(--pad-x);
    padding-top:16px;
    margin-top:0;
  }
  .article .eyebrow{
    display:flex; gap:16px; align-items:baseline;
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:800;
    font-size:12px;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:10px;
    transition:all .2s ease;
  }
  .article-header:hover .eyebrow{
    text-decoration:underline dashed;
    text-underline-offset:2px;
  }
  .article h1{
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:900;
    font-size:clamp(36px,4.2vw,58px);
    line-height:1.05;
    letter-spacing:-0.02em;
    margin:0 0 12px 0;
    color:var(--burgundy);
  }
  .meta{
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    opacity:.9;
    color:var(--blue);
    margin-bottom:24px;
  }
  .article p{
    font-size:18px;
    line-height:1.65;
    margin:0 0 20px 0;
    letter-spacing:-0.005em;
    color:#0b0b0b;
  }
  .article blockquote{
    border-left:3px solid var(--blue-dark);
    margin:24px 0;
    padding-left:20px;
    font-style:italic;
    opacity:.95;
    color:#0b0b0b;
  }

  .article blockquote p { margin: 0; }
  .article blockquote p + p { margin-top: 10px; }

  .article img{
    max-width:100%;
    margin:28px 0;
    border-radius:8px;
    display:block;
  }
  
  /* Engage (Like/Share) */
  .engage{
    display:flex; gap:12px; flex-wrap:wrap;
    align-items:center;
    margin:22px 0 6px;
  }
  .btn{
    appearance:none; -webkit-appearance:none;
    border:var(--rule) solid var(--blue-dark);
    background:#fff;
    color:var(--burgundy);
    padding:9px 14px;
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:800;
    letter-spacing:-0.01em;
    cursor:pointer;
    border-radius:0;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 2px 0 0 var(--blue-dark);
    text-decoration:underline;
    text-decoration-thickness:2px;
  }
  .like-count{
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:800;
    font-size:12px;
    color:var(--blue);
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  
  /* Comments */
  .comments{ margin-top:30px; }
  .comments h3{
    margin:0 0 10px 0;
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:900;
    font-size:clamp(20px,2.25vw,30px);
    line-height:1.03;
    color:var(--burgundy);
  }
  .comment-list{ list-style:none; padding:0; margin:0; }
  .comment{
    border-top:var(--rule) solid var(--blue-dark);
    padding:14px 0;
  }
  .comment .who{
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:800;
    color:var(--blue);
    margin-bottom:6px;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  .comment p{ margin:0; font-size:16px; line-height:1.55; }
  
  /* About page */
  .about{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--gap-x);
    align-items:start;
    border-top:var(--rule) solid var(--blue-dark);
    padding-top:18px;
  }
  .photo img{
    max-width:100%;
    border-radius:10px;
    display:block;
  }
  .bio{
    font-size:18px;
    line-height:1.65;
    color:#0b0b0b;
  }
  .section{
    margin-top:40px;
    border-top:var(--rule) solid var(--blue-dark);
    padding-top:18px;
  }
  .section h2{
    margin:0 0 14px 0;
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:900;
    font-size:clamp(27px,2.85vw,40px);
    line-height:1.02;
    letter-spacing:-0.02em;
    color:var(--burgundy);
  }
  .section p, .section li{
    font-size:18px;
    line-height:1.65;
    color:#0b0b0b;
  }
  .fun-facts ul, .top-moments ul{ padding-left:20px; }
  .fun-facts li, .top-moments li{ margin-bottom:10px; }
  
  /* Contact page */
  .contact{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--gap-x);
    align-items:start;
  }
  .contact .row-start{
    grid-column:1/-1;
    border-top:var(--rule) solid var(--blue-dark);
  }
  .form-wrap{ grid-column:1 / span 2; padding:16px 0 14px; }
  .info-wrap{ grid-column:3 / span 2; padding:16px 0 14px; }
  .section-title{
    margin:0 0 12px 0;
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:900;
    font-size:clamp(27px,2.85vw,40px);
    line-height:1.02;
    letter-spacing:-0.02em;
    color:var(--burgundy);
  }
  .field{ margin:16px 0; }
  .label{
    display:block;
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:800;
    font-size:14px;
    margin-bottom:8px;
    color:var(--blue);
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select{
    width:100%;
    font:inherit;
    color:#0b0b0b;
    background:transparent;
    border:none;
    border-bottom:var(--rule) solid var(--blue-dark);
    padding:10px 0 9px;
    outline:none;
  }
  textarea{ min-height:140px; resize:vertical; }
  input:focus, textarea:focus, select:focus{
    outline:2px solid var(--blue);
    outline-offset:2px;
  }
  .actions{
    margin-top:18px;
    display:flex; gap:16px; flex-wrap:wrap;
    align-items:center;
  }
  .subnote{ font-size:12px; opacity:.75; color:#0b0b0b; }
  .cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--gap-x);
  }
  .card{
    border-top:var(--rule) solid var(--blue-dark);
    padding-top:14px;
    transition:color .2s ease;
  }
  .card h4{
    margin:0 0 10px 0;
    font-family:"Inter Tight","Inter",system-ui;
    font-weight:900;
    font-size:clamp(18px,1.6vw,22px);
    line-height:1.05;
    color:var(--burgundy);
    transition:all .2s ease;
  }
  .card p{ margin:0 0 10px 0; line-height:1.55; font-size:16px; color:#0b0b0b; }
  .card a{ color:var(--blue); text-decoration:underline; }
  .card a:hover{ text-decoration:none; }
  .card:hover h4{
    text-decoration:underline dashed;
    text-underline-offset:2px;
  }
  
  /* Responsive */
  @media (max-width:1200px){
    :root{ --gap-x:56px; }
  }
  @media (max-width:980px){
    .tabs{ grid-template-columns:repeat(2,1fr); row-gap:12px; }
    .grid{ grid-template-columns:repeat(2,1fr); }
    .about{ grid-template-columns:1fr; }
    .contact{ grid-template-columns:repeat(2,1fr); }
    .form-wrap{ grid-column:1 / span 2; }
    .info-wrap{ grid-column:1 / span 2; }
    .cards{ grid-template-columns:1fr; }
    :root{ --gap-x:44px; }
  }
  @media (max-width:560px){
    .mast{ grid-template-columns:1fr auto; row-gap:6px; }
    .brand{ grid-column:1/-1; }
    .tagline{ grid-column:1/2; }
    .updated{ grid-column:2/3; justify-self:end; }
    .tabs{ grid-template-columns:1fr; }
    .grid{ grid-template-columns:1fr; }
    .contact{ grid-template-columns:1fr; }
    .form-wrap, .info-wrap{ grid-column:auto; }
    :root{ --gap-x:24px; }
  }