/* ============================================================
    Edit this file once and the
   change applies everywhere. You should not need to touch this
   file to add poems, fights, artworks or shop items — see the
   comments at the top of each page's HTML file for that.
   ============================================================ */

:root{
    color-scheme: dark;
    --void:#120e0c;
    --void-2:#1b1512;
    --card:#211815;
    --field-orange:#8c1622;
    --field-orange-2:#671019;
    --field-violet:#3c0e16;
    --field-violet-2:#2a0a10;
    --field-blood:#b81f2f;
    --field-blood-2:#7d1420;
    --acid:#e0475a;
    --bone:#f1e6d6;
    --bone-dim:#caa89d;
    --line:#f1e6d6;
    --hair:#4d2724;
    --page-pink:#ffb6dc;   /* pale hot pink page background around the column */
    --blush:#f6b2c5;   /* pale pink glow on the noblae name */
    --pattern:url("images/pattern.jpg");
    /* main text font */
    --serif:'Cormorant', Georgia, 'Times New Roman', serif;
    /* font for the NOBLAE name (top bar + home page title). to try a
       different one, change this line and the Google Fonts link near the
       top of each page's HTML file */
    --title:'Playfair Display', Georgia, 'Times New Roman', serif;
  }

  /* anything hidden (e.g. entries on other pages) stays hidden */
  [hidden]{display:none !important;}

  *{box-sizing:border-box;}
  body{
    background-color:#2a2358;
    color:var(--bone);
    font-family:var(--serif);
    padding-inline:0;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }
  /* page background: the night-sky photo, filling the screen and staying
     still while the page scrolls. (the old pink clouds photo is still in
     images/sky.jpg: point the url below back at it to restore it) */
  body::after{
    content:"";
    position:fixed; inset:0;
    z-index:-1;
    pointer-events:none;
    /* sharp photo, fit to the screen height, with a dark pink-black wash over it */
    background:
      linear-gradient(rgba(40,0,24,.6), rgba(40,0,24,.6)),
      url("images/roses.jpg") center / auto 100% no-repeat;
  }
  /* the same photo, filled across the whole screen and blurred, behind the sharp one */
  html::before{
    content:"";
    position:fixed; inset:-60px;
    z-index:-2;
    pointer-events:none;
    background:url("images/roses.jpg") center / cover no-repeat;
    filter:blur(24px);
  }
  /* canvas grain */
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:200;
    opacity:.05;
    mix-blend-mode:overlay;
    background-image:
      radial-gradient(circle at 20% 30%, #fff 0, transparent 1px),
      radial-gradient(circle at 70% 60%, #fff 0, transparent 1px),
      radial-gradient(circle at 40% 80%, #fff 0, transparent 1px),
      radial-gradient(circle at 90% 15%, #fff 0, transparent 1px);
    background-size:3px 3px, 5px 5px, 4px 4px, 6px 6px;
  }
    a{color:inherit;}
  ::selection{background:var(--field-orange);color:var(--bone);}


  .mono{font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace;}
  .label{
    font-family:'IBM Plex Mono', monospace;
    font-size:.68rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--bone-dim);
  }

  /* ---------- Nav ---------- */
  header.top{
    position:sticky;
    top:env(safe-area-inset-top, 0px);
    z-index:50;
    background:var(--void);
    border-bottom:1px solid var(--hair);
  }
  .nav-inner{
    max-width:1080px;
    margin:0 auto;
    padding:16px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .wordmark{
    font-family:var(--title);
    font-weight:800;
    font-size:1.9rem;
    letter-spacing:.02em;
    text-transform:lowercase;
    line-height:.8;
    color:var(--bone);
    text-shadow: 2px 0 var(--blush), -2px 0 rgba(246,178,197,.6);
    text-decoration:none;
    cursor:pointer;
  }
  nav.links{
    display:flex;
    flex-wrap:wrap;
    gap:4px 20px;
    font-family:var(--title);
    font-weight:500;
    font-size:.95rem;
    letter-spacing:.04em;
    text-transform:lowercase;
  }
  nav.links button, nav.links a{
    background:none;border:none;color:var(--bone-dim);
    font:inherit;letter-spacing:inherit;text-transform:inherit;
    padding:6px 2px;position:relative;
    text-decoration:none;display:inline-block;
  }
  nav.links button.active, nav.links a.active{color:var(--bone);}
  nav.links button.active::after, nav.links a.active::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--field-orange);
  }
  nav.links button:hover, nav.links a:hover{color:var(--acid);}

  main{max-width:1080px;margin:0 auto;padding:0 20px 90px;position:relative;z-index:1;background:var(--void);box-shadow:0 0 0 1px var(--hair);}
  section.view{display:none;padding-block:0;}
  section.view.active{display:block;}
  #home{min-height:78vh;}

  /* ---------- shared bits ---------- */
  .field-band{
    padding:34px 24px;
    margin:0 -20px 36px;
    border-top:1px solid var(--hair);
    border-bottom:1px solid var(--hair);
    position:relative;
    overflow:hidden;
    background-repeat:no-repeat, repeat;
    background-size:100% 100%, 190px auto;
  }
  .field-band .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--bone);
    margin:0;
    opacity:.85;
  }
  .field-band h2.section-title{
    font-family:'Pirata One', cursive;
    font-weight:900;
    font-size:clamp(2.4rem, 8vw, 4.6rem);
    line-height:.84;
    text-transform:uppercase;
    margin:.1em 0 0;
    color:var(--bone);
    text-shadow:0 2px 14px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.5);
  }
  .field-band.field-violet{background-color:var(--field-violet);background-image:linear-gradient(rgba(60,14,22,.55),rgba(60,14,22,.55)), var(--pattern);}
  .field-band.field-blood{background-color:var(--field-blood);background-image:linear-gradient(rgba(184,31,47,.55),rgba(184,31,47,.55)), var(--pattern);}
  .field-band.field-orange{background-color:var(--field-orange);background-image:linear-gradient(rgba(140,22,34,.55),rgba(140,22,34,.55)), var(--pattern);}
  .field-band.field-void{background-color:var(--void-2);background-image:linear-gradient(rgba(27,21,18,.55),rgba(27,21,18,.55)), var(--pattern);}

  /* cage frame - Bacon-esque space frame overlay */
  .cage{display:none;position:absolute;inset:10px;pointer-events:none;}
  .cage svg{width:100%;height:100%;display:block;}

  .entry-date{
    font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;
    letter-spacing:.06em;
    color:var(--bone-dim);
  }

  /* ---------- Home ---------- */
  /* the Poetry, Essays and Images title bars share the home banner's look */
  .home-hero,
  .field-band.field-void{
    position:relative;
    padding:56px 26px 46px;
    margin:0 -20px 40px;
    background-color:#c8102e;   /* athletic red banner */
    background-image:none;
    overflow:hidden;
    border-top:none;
    border-bottom:1px solid var(--hair);
  }
  .home-hero::after,
  .field-band.field-void::after{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(ellipse at 75% 30%, rgba(58,24,48,.45), transparent 60%);
    pointer-events:none;
  }
  h1.hero-title,
  .field-band h2.section-title{
    font-family:var(--title);
    font-weight:900;
    font-size:clamp(2.16rem, 9.6vw, 5.7rem);
    line-height:.78;
    letter-spacing:.01em;
    text-transform:lowercase;
    margin:0;
    color:#0c0708;   /* black lettering with a pink edge */
    text-shadow:
      3px 0 0 var(--blush),
      -3px 0 0 rgba(246,178,197,.6),
      0 0 18px rgba(246,178,197,.35);
    position:relative;
    text-wrap:balance;
  }
  .home-hero p{
    font-family:'IBM Plex Mono',monospace;
    font-size:.85rem;
    color:var(--bone);
    max-width:44ch;
    margin:18px 0 0;
    position:relative;
    line-height:1.6;
  }

  .gallery-intro{
    max-width:58ch;
    font-family:'IBM Plex Mono',monospace;
    font-size:.85rem;
    line-height:1.6;
    color:var(--bone-dim);
    margin:0 0 26px;
  }

  @keyframes flashColorA{
    0%{ filter:grayscale(1) contrast(1.25) brightness(.68); }
    22%{ filter:sepia(1) saturate(4.5) hue-rotate(325deg) contrast(1.15) brightness(.72); }
    48%{ filter:sepia(1) saturate(4) hue-rotate(95deg) contrast(1.2) brightness(.65); }
    74%{ filter:sepia(1) saturate(4.5) hue-rotate(45deg) contrast(1.2) brightness(.8); }
    100%{ filter:grayscale(0) contrast(1.02) brightness(1); }
  }
  @keyframes flashColorB{
    0%{ filter:grayscale(1) contrast(1.1) brightness(.85); }
    22%{ filter:sepia(1) saturate(3.6) hue-rotate(255deg) contrast(1.2) brightness(.6); }
    48%{ filter:sepia(1) saturate(4) hue-rotate(95deg) contrast(1.2) brightness(.65); }
    74%{ filter:sepia(1) saturate(4.5) hue-rotate(45deg) contrast(1.2) brightness(.8); }
    100%{ filter:grayscale(0) contrast(1.02) brightness(1); }
  }
  @keyframes flashColorC{
    0%{ filter:grayscale(1) contrast(1.4) brightness(.5); }
    22%{ filter:sepia(1) saturate(5) hue-rotate(345deg) contrast(1.3) brightness(.85); }
    48%{ filter:sepia(1) saturate(4) hue-rotate(95deg) contrast(1.2) brightness(.65); }
    74%{ filter:sepia(1) saturate(4.5) hue-rotate(45deg) contrast(1.2) brightness(.8); }
    100%{ filter:grayscale(0) contrast(1.02) brightness(1); }
  }


  /* masonry via CSS columns: each tile flows into the shortest column, so it is gap-free by construction */
  .gallery{
    column-count:6;
    column-gap:10px;
  }
  .gallery figure{
    margin:0 0 10px;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    position:relative;
    overflow:hidden;
    background:var(--card);
    border:1px solid var(--hair);
    display:block;
  }
  .gallery img{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease, filter .35s ease;
  }
  .gallery .size-a{ height:150px; }
  .gallery .size-b{ height:230px; }
  .gallery .size-c{ height:310px; }
  .gallery .size-d{ height:190px; }
  .gallery .duo-a img{ filter:grayscale(1) contrast(1.25) brightness(.68); }
  .gallery .duo-b img{ filter:grayscale(1) contrast(1.1) brightness(.85); }
  .gallery .duo-c img{ filter:grayscale(1) contrast(1.4) brightness(.5); }
  .gallery figure:hover img{
    transform:scale(1.07);
  }
  .gallery figure.duo-a:hover img{ animation:flashColorA .3s ease-out forwards; }
  .gallery figure.duo-b:hover img{ animation:flashColorB .3s ease-out forwards; }
  .gallery figure.duo-c:hover img{ animation:flashColorC .3s ease-out forwards; }
  .gallery figcaption{
    position:absolute;
    left:0;right:0;bottom:0;
    padding:9px 10px;
    font-family:'IBM Plex Mono',monospace;
    font-size:.62rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--bone);
    background:linear-gradient(to top, rgba(10,6,7,.85), rgba(10,6,7,0));
    opacity:0;
    transition:opacity .25s ease;
  }
  .gallery figure:hover figcaption{opacity:1;}
  @media (max-width:800px){
    .gallery{column-count:3;}
  }
  @media (max-width:520px){
    .gallery{column-count:2;}
  }

  /* ---------- Images ---------- */
  .gallery.gallery-images{column-count:3;column-gap:14px;}
  .gallery-images figure{margin-bottom:14px;}
  .gallery-images a{display:block;}
  .gallery-images img{height:auto;}
  @media (max-width:800px){
    .gallery.gallery-images{column-count:2;}
  }
  @media (max-width:520px){
    .gallery.gallery-images{column-count:1;}
  }

  /* ---------- Poetry ---------- */
  .poem-list{display:flex;flex-direction:column;}
  .poem{
    padding:26px 0;
    border-bottom:1px solid var(--hair);
  }
  .poem:last-child{border-bottom:none;}
  .poem-head{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  }
  .poem-head h3{
    font-family:var(--serif);
    font-weight:500;
    font-size:1.4rem;
    margin:0;
    color:var(--bone);
  }
  .poem-date{font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:var(--bone-dim);}
  .poem-text{
    margin-top:16px;
    line-height:2;
    font-size:1.1rem;
    font-style:normal;
    text-indent:0;
    padding-left:0;
    color:var(--bone);
    white-space:pre-line;
  }

  /* ---------- Essays ---------- */
  .essay-list{display:flex;flex-direction:column;}
  .essay{
    display:flex;flex-direction:column;
    padding:22px 0;
    border-bottom:1px solid var(--hair);
  }
  .essay-list .essay:last-child{border-bottom:none;}
  .essay h3{
    font-family:var(--serif);
    font-weight:500;
    font-size:1.4rem;
    margin:0 0 10px;
    color:var(--bone);
  }
  .essay-text p{
    font-family:var(--serif);
    font-style:normal;
    font-weight:500;
    font-size:1.3rem;
    line-height:1.6;
    color:var(--bone);
    margin:0 0 .8em;
    max-width:62ch;
  }
  .essay-text p:last-child{margin-bottom:0;}
  .essay .entry-date{align-self:flex-end;margin-top:10px;}

  /* bold / italic / underline / strikethrough, added from the admin page */
  .poem-text strong, .essay-text strong{font-weight:700;color:var(--bone);}
  .poem-text em{font-style:italic;}
  .essay-text em{font-style:normal;}  /* essays are already italic, so emphasis there turns upright */
  .poem-text u, .essay-text u{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
  .poem-text s, .essay-text s{text-decoration:line-through;}

  /* ---------- Home feed ---------- */
  .feed{display:flex;flex-direction:column;}
  .feed-item{
    display:flex;flex-direction:column;
    padding-bottom:18px;
    border-bottom:1px solid var(--hair);
  }
  .feed-item:last-child{border-bottom:none;}
  .feed-item .poem,
  .feed-item .essay{border-bottom:none;padding-bottom:0;}
  .feed-item .fight-card{margin-top:26px;}
  .feed-date{align-self:flex-end;margin-top:8px;}

  .feed-image figure{margin:26px 0 0;}
  .feed-image a{display:inline-block;max-width:100%;}
  .feed-image img{
    display:block;
    max-width:min(100%, 560px);
    max-height:70vh;
    width:auto;height:auto;
    border:1px solid var(--hair);
  }
  .feed-image figcaption{
    margin-top:10px;
    font-family:var(--serif);
    font-style:italic;
    font-size:1rem;
    color:var(--bone-dim);
  }

  /* ---------- Pages (pager.js) ---------- */
  .pager-bar{
    display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
    margin:0 0 6px;
    padding-bottom:12px;
    border-bottom:1px solid var(--hair);
    font-family:var(--title);
    font-size:.92rem;letter-spacing:.03em;text-transform:lowercase;
    color:var(--bone-dim);
    scroll-margin-top:90px;
  }
  .gallery-images + .pager-nav, .pager-bar + .gallery-images{margin-top:14px;}
  .pager-size select{
    font:inherit;letter-spacing:.06em;
    color:var(--bone);
    background:var(--void-2);
    border:1px solid var(--hair);
    padding:6px 8px;margin:0 6px;
    cursor:pointer;
  }
  .pager-size select:focus{outline:1px solid var(--acid);outline-offset:1px;}
  .pager-nav{
    display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;
    margin-top:30px;
    font-family:var(--title);
    font-size:.9rem;
  }
  .pager-nav button{
    font:inherit;
    min-width:36px;height:36px;padding:0 8px;
    color:var(--bone-dim);
    background:none;
    border:1px solid var(--hair);
    cursor:pointer;
  }
  .pager-nav button:hover:not(:disabled){color:var(--bone);border-color:var(--acid);}
  .pager-nav button.current{color:var(--bone);background:var(--field-orange);border-color:var(--field-orange);}
  .pager-nav button:disabled{opacity:.35;cursor:default;}
  .pager-gap{color:var(--bone-dim);padding:0 4px;}

  /* ---------- Videos ---------- */
  .video-list{display:flex;flex-direction:column;}
  .video{
    display:flex;flex-direction:column;
    padding:22px 0;
    border-bottom:1px solid var(--hair);
  }
  .video-list .video:last-child{border-bottom:none;}
  .video h3{
    font-family:var(--serif);
    font-weight:500;
    font-size:1.4rem;
    margin:0 0 12px;
    color:var(--bone);
  }
  .video-frame{
    position:relative;
    width:100%;
    max-width:760px;
    aspect-ratio:16/9;
    background:#000;
    border:1px solid var(--hair);
    overflow:hidden;
  }
  .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .video-play{
    position:absolute;inset:0;width:100%;height:100%;
    padding:0;border:0;background:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .video-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .25s ease;}
  .video-play:hover img{filter:brightness(.8);}
  .video-play .play-badge{position:relative;z-index:1;}
  .video .entry-date{align-self:flex-end;margin-top:10px;}
  .feed-item .video{border-bottom:none;padding-bottom:0;}

  /* ---------- Fights ---------- */
  .fight-grid{display:flex;flex-direction:column;gap:28px;}
  .fight-card{
    border:1px solid var(--hair);
    background:var(--card);
  }
  .fight-frame{
    aspect-ratio:16/10;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--hair);
    display:flex;align-items:center;justify-content:center;
  }
  .fight-frame img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:grayscale(1) contrast(1.3) brightness(.45);
  }
  .fight-frame .veil{
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(124,29,29,.35), rgba(17,10,12,.75));
  }
  .play-badge{
    width:58px;height:58px;border-radius:50%;
    border:1.5px solid var(--bone);
    display:flex;align-items:center;justify-content:center;
    background:rgba(17,10,12,.4);
    position:relative;z-index:2;
  }
  .play-badge::after{
    content:"";
    border-left:15px solid var(--bone);
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    margin-left:4px;
  }
  .fight-meta{
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 18px;
    font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;
  }
  .fight-meta .tag{color:var(--acid);letter-spacing:.1em;text-transform:uppercase;}
  #fights.active{display:flex;flex-direction:column;min-height:60vh;}
  .yt-link{margin:auto 0 0;padding-top:30px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:.9rem;letter-spacing:.06em;}
  .yt-link a{color:var(--bone);text-decoration:underline;text-underline-offset:4px;}
  .yt-link a:hover{color:var(--acid);}

  /* ---------- Artwork ---------- */
  .art-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:26px;
  }
  .art-card{border:1px solid var(--hair);background:var(--card);}
  .art-canvas{
    aspect-ratio:4/3;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid var(--hair);
    background:var(--field-violet-2);
    overflow:hidden;
  }
  .art-canvas img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease, filter .35s ease;}
  .art-canvas.duo-a img{ filter:grayscale(1) contrast(1.25) brightness(.68); }
  .art-canvas.duo-b img{ filter:grayscale(1) contrast(1.1) brightness(.85); }
  .art-canvas.duo-c img{ filter:grayscale(1) contrast(1.4) brightness(.5); }
  .art-card:hover .art-canvas img{
    transform:scale(1.07);
  }
  .art-card:hover .art-canvas.duo-a img{ animation:flashColorA .3s ease-out forwards; }
  .art-card:hover .art-canvas.duo-b img{ animation:flashColorB .3s ease-out forwards; }
  .art-card:hover .art-canvas.duo-c img{ animation:flashColorC .3s ease-out forwards; }
  .art-cap{padding:12px 14px;}
  .art-cap .t{font-style:italic;font-family:var(--serif);font-size:1.02rem;color:var(--bone);}
  .art-cap .y{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--bone-dim);}

  /* ---------- Purchase ---------- */
  .shop-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:22px;
  }
  .shop-card{
    border:1px solid var(--hair);
    display:flex;flex-direction:column;
    background:var(--card);
  }
  .shop-thumb{
    aspect-ratio:1/1;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid var(--hair);
    overflow:hidden;
  }
  .shop-thumb svg{width:52%;height:52%;position:relative;z-index:2;color:var(--bone);}
  .shop-info{padding:14px 16px;display:flex;flex-direction:column;gap:4px;flex:1;}
  .shop-info .name{font-family:var(--serif);font-weight:500;font-size:1.05rem;color:var(--bone);}
  .shop-info .price{
    font-family:'IBM Plex Mono',monospace;
    font-size:.85rem;color:var(--acid);margin-top:auto;
  }
  .shop-btn{
    font-family:'IBM Plex Mono',monospace;
    font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
    border:none;border-top:1px solid var(--hair);
    background:var(--bone);color:var(--void);
    padding:11px;
  }
  .shop-btn:hover{background:var(--field-orange);color:var(--bone);}

  /* ---------- Footer ---------- */
  footer{
    border-top:1px solid var(--hair);
    padding:22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    position:relative;
    z-index:1;
    background:var(--void);
  }
  .footer-inner{
    max-width:1080px;margin:0 auto;
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  }
  .icon-row{display:flex;gap:16px;align-items:center;}
  .icon-row a{
    width:38px;height:38px;border:1px solid var(--hair);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s, color .15s, border-color .15s;
    color:var(--bone);
  }
  .icon-row a:hover{background:var(--field-orange);border-color:var(--field-orange);}
  .icon-row svg{width:17px;height:17px;}

  @media (max-width:560px){
    .nav-inner{flex-direction:column;align-items:flex-start;gap:10px;}
    nav.links{font-size:.68rem;gap:4px 14px;}
  }