@charset "utf-8";

/*
   grants.rocks V1

   Layout Style Sheet
   Author: Grant Cooper
   Date: 2026
*/

 /* General Styles */
    header {
       padding: 30px;
       text-align: center;
       }
    #titlearea {
       margin-bottom: 25px;
       }
    header h1 {
       font-size: 7em;
       letter-spacing: 6px;
       }
    header p {
       font-size: 1.8em;
       font-weight: normal;
       margin-top: 10px;
       }
    nav.toplinks {
       margin-top: 25px;
       }
    nav.toplinks ul {
       display: flex;
       justify-content: center;
       gap: 30px;
       flex-wrap: wrap;
       }
    nav.toplinks a {
       font-size: 1.625em;
       }
    nav.footernav ul {
       display: flex;
       justify-content: center;
       gap: 25px;
       flex-wrap: wrap;
       margin-top: 20px;
       }
    main {
       padding: 30px 40px;
       max-width: 1600px;
       margin: 0 auto;
       }
    footer {
       padding: 40px 20px;
       text-align: center;
       margin-top: 60px;
       }
    footer p {
       font-size: 1.4em;
       }

 /* Home Page */
    a.home-intro-link {
       display: block;
       color: inherit;
       text-decoration: none;
       }
    section#home-intro {
       margin-top: 30px;
       margin-bottom: 40px;
       overflow: hidden;
       }
    section#home-intro img {
       width: 100%;
       height: 320px;
       object-fit: cover;
       display: block;
       }
    article.introtext {
       text-align: center;
       }
    article.introtext p {
       padding: 1.6rem;
       font-size: 2em;
       line-height: 1.4em;
       max-width: 1200px;
       margin: 0 auto;
       }
    section#home-sections {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 36px;
       margin-top: 40px;
       }
    article.home-card {
       overflow: hidden;
       }
    article.home-card img {
       width: 100%;
       height: 320px;
       object-fit: cover;
       display: block;
       }
    article.home-card h2 {
       padding: 1.4rem 1.6rem 0.6rem 1.6rem;
       font-size: 2.4rem;
       line-height: 1.1;
       }
    article.home-card p {
       padding: 0 1.6rem 1.6rem 1.6rem;
       font-size: 1.35rem;
       line-height: 1.45;
       }

 /* Recent Finds Page */
    section#recentfinds-intro {
       text-align: center;
       max-width: 1400px;
       margin: 2rem auto 3rem auto;
       padding: 2rem 3rem;
       }
    section#recentfinds-intro p {
       font-size: 3.4rem;
       line-height: 1.15;
       font-weight: normal;
       max-width: 1000px;
       margin: 0 auto;
       }
    section#finds-feed {
       display: flex;
       flex-direction: column;
       gap: 2.5rem;
       margin-top: 3rem;
       }
    a.find-post-link {
       display: block;
       text-decoration: none;
       color: inherit;
       }
    article.find-post {
       display: grid;
       grid-template-columns: 1fr 1.2fr;
       gap: 2rem;
       padding: 2rem;
       }
    section.find-post-text {
       display: flex;
       flex-direction: column;
       justify-content: center;
       }
    p.find-date {
       margin-bottom: 0.5rem;
       font-size: 0.9rem;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       }
    article.find-post h2 {
       font-size: 2.4rem;
       line-height: 1.1;
       margin-bottom: 1rem;
       }
    article.find-post p {
       font-size: 1.2rem;
       line-height: 1.45;
       }
    section.find-post-images {
       display: flex;
       gap: 1rem;
       overflow-x: auto;
       padding-bottom: 0.75rem;
       }
    section.find-post-images img {
       width: 260px;
       height: 220px;
       object-fit: cover;
       flex-shrink: 0;
       }

 /* Recent Find Individual Pages */
    section#trip-page {
       max-width: 1450px;
       margin: 0 auto;
       padding: 30px 40px 80px 40px;
       }
    section#trip-page > p.find-date {
       text-align: center;
       margin-bottom: 0.75rem;
       }
    section#trip-page h2 {
       font-size: 4em;
       text-align: center;
       margin-bottom: 35px;
       letter-spacing: 1px;
       }
    section#trip-story-layout {
       display: grid;
       grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.35fr) minmax(180px, 0.55fr);
       gap: 1.5rem;
       align-items: start;
       }
    section.trip-side-images {
       display: flex;
       flex-direction: column;
       gap: 1rem;
       }
    section.trip-side-images img {
       width: 100%;
       height: 230px;
       object-fit: cover;
       }
    article.trip-article {
       padding: 2em 3em;
       }
    article.trip-article p {
       font-size: 1.6rem;
       line-height: 1.5;
       margin-bottom: 1.2rem;
       }
    article.trip-article p:last-child {
       margin-bottom: 0;
       }

 /* Specimens Section */

 /* Rocks and Fossils Intro Sections */
    section#rocks-intro,
    section#fossils-intro {
       text-align: center;
       max-width: 1400px;
       margin: 2rem auto 3rem auto;
       padding: 2rem 3rem;
       }
    section#rocks-intro p,
    section#fossils-intro p {
       font-size: 3.4rem;
       line-height: 1.15;
       font-weight: normal;
       max-width: 1000px;
       margin: 0 auto;
       }

 /* Rock and Fossil Card Grid */
    section#rock-grid,
    section#fossil-grid {
       column-count: 3;
       column-gap: 30px;
       align-items: start;
       margin-top: 40px;
       }
    article.specimen {
       display: inline-block;
       overflow: hidden;
       width: 100%;
       margin: 0 0 30px 0;
       break-inside: avoid;
       }
    section#rock-grid article.specimen[hidden],
    section#fossil-grid article.specimen[hidden] {
       display: none;
       }
    article.specimen img {
       width: 100%;
       height: 300px;
       object-fit: cover;
       display: block;
       }
    section#rock-grid article.specimen:nth-child(5n+2) img,
    section#fossil-grid article.specimen:nth-child(5n+2) img {
       height: 245px;
       }
    section#rock-grid article.specimen:nth-child(5n+3) img,
    section#fossil-grid article.specimen:nth-child(5n+3) img {
       height: 355px;
       }
    section#rock-grid article.specimen:nth-child(5n+5) img,
    section#fossil-grid article.specimen:nth-child(5n+5) img {
       height: 275px;
       }
    article.specimen h3 {
       padding: 1.2rem 1.2rem 0.5rem 1.2rem;
       font-size: 2rem;
       line-height: 1.1;
       }
    article.specimen p {
       padding: 0 1.2rem 1rem 1.2rem;
       font-size: 1.2rem;
       line-height: 1.45em;
       max-width: none;
       }
    article.specimen ul.tags {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       padding: 0px 20px 20px 20px;
       }
    section.catalog-tools {
       display: grid;
       grid-template-columns: minmax(260px, 1fr) 2fr auto;
       gap: 1rem;
       align-items: end;
       max-width: 1400px;
       margin: 0 auto 2rem auto;
       padding: 1.2rem 1.4rem;
       }
    label.catalog-search {
       display: grid;
       gap: 0.45rem;
       }
    label.catalog-search span {
       font-size: 1rem;
       letter-spacing: 0.14em;
       text-transform: uppercase;
       }
    label.catalog-search input {
       width: 100%;
       min-height: 42px;
       padding: 0.65rem 0.85rem;
       font-size: 1.05rem;
       }
    section.tag-filter-group {
       display: flex;
       flex-wrap: wrap;
       gap: 0.55rem;
       align-items: center;
       }
    button.tag-filter {
       min-height: 38px;
       padding: 0.55rem 0.85rem;
       font-size: 0.85rem;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       }
    p.catalog-count {
       align-self: center;
       min-width: 75px;
       font-size: 1rem;
       text-align: right;
       white-space: nowrap;
       }

 /* Individual Specimen Pages */
    section#specimen-page {
       max-width: 1300px;
       margin: 0 auto;
       padding: 30px 40px 80px 40px;
       }
    section#specimen-page h2 {
       font-size: 4em;
       text-align: center;
       margin-bottom: 35px;
       letter-spacing: 1px;
       width: 100%;
       display: block;
       }
    section#specimen-gallery {
       max-width: 1200px;
       margin: 0 auto;
       margin-bottom: 0;
       }
    img#main-image {
       width: 100%;
       margin-bottom: 20px;
       }
    section#thumbnail-row {
       display: flex;
       gap: 15px;
       overflow-x: auto;
       overflow-y: hidden;
       padding-bottom: 10px;
       margin-bottom: 0;
       scrollbar-width: auto;
       }
    section#thumbnail-row::-webkit-scrollbar {
       height: 22px;
       }
    img.thumbnail {
       width: 120px;
       height: 120px;
       object-fit: cover;
       flex-shrink: 0;
       }
    article.specimen-description {
       max-width: 1100px;
       margin: 1.5rem auto 0 auto;
       padding: 2em 3em;
       }
    article.specimen-description p {
       font-size: 2em;
       line-height: 1.5em;
       text-align: left;
       }

 /* Tags */
    ul.tags {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       list-style: none;
       max-width: 1100px;
       margin: 1rem auto 0 auto;
       padding: 0;
       padding-left: 1.5em;
       }
    ul.tags li {
       padding: 0.35rem 0.75rem;
       font-size: 0.85rem;
       letter-spacing: 0.2em;
       }

 /* Info Section */

 /* Main Info Page */
    section#info-intro {
       text-align: center;
       max-width: 1400px;
       margin: 2rem auto 3rem auto;
       padding: 2rem 3rem;
       }
    section#info-intro p {
       font-size: 3.4rem;
       line-height: 1.15;
       font-weight: normal;
       max-width: 1000px;
       margin: 0 auto;
       }
    section#info-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 36px;
       margin-top: 40px;
       }
    article.info-card {
       overflow: hidden;
       }
    article.info-card img {
       width: 100%;
       height: 380px;
       object-fit: cover;
       display: block;
       }
    article.info-card h2 {
       padding: 1.4rem 1.6rem 0.6rem 1.6rem;
       font-size: 2.4rem;
       line-height: 1.1;
       }
    article.info-card p {
       padding: 0 1.6rem 1.6rem 1.6rem;
       font-size: 1.35rem;
       line-height: 1.45;
       }

 /* Individual Info Article Pages */
    section#info-article-intro {
       text-align: center;
       max-width: 1400px;
       margin: 2rem auto 3rem auto;
       padding: 2rem 3rem;
       }
    section#info-article-intro p {
       font-size: 3.4rem;
       line-height: 1.15;
       font-weight: normal;
       max-width: 1000px;
       margin: 0 auto;
       }
    article.info-article {
       max-width: 1100px;
       margin: 0 auto;
       padding: 2em 3em;
       }
    article.info-article h2 {
       font-size: 3rem;
       margin-bottom: 1rem;
       }
    article.info-article p {
       font-size: 1.6rem;
       line-height: 1.5;
       margin-bottom: 1.2rem;
       }
    section#citations-bibliography,
    section#glossary-terms {
       max-width: 1100px;
       margin: 0 auto;
       }
    ol.citation-list,
    ol.glossary-list {
       display: grid;
       gap: 1.15rem;
       list-style: none;
       margin: 0;
       padding: 0;
       }
    li.citation-entry,
    li.glossary-entry {
       display: grid;
       grid-template-columns: 3rem minmax(0, 1fr);
       gap: 0.85rem;
       align-items: start;
       padding: 0.85rem 0;
       scroll-margin-top: 1rem;
       }
    a.citation-number,
    a.glossary-number {
       font-size: 1.2rem;
       text-align: right;
       text-decoration: none;
       }
    span.citation-text,
    section.glossary-body p {
       font-size: 1.3rem;
       line-height: 1.45;
       }
    section.glossary-body h2 {
       font-size: 1.75rem;
       line-height: 1.15;
       margin-bottom: 0.35rem;
       }
    section.glossary-body p {
       margin-bottom: 0;
       }
    span.citation-text a,
    section.glossary-body a {
       overflow-wrap: anywhere;
       }
    li.citation-entry ul.tags,
    li.glossary-entry ul.tags {
       grid-column: 2;
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin: 0.35rem 0 0 0;
       padding: 0;
       }
    li.citation-entry ul.tags li,
    li.glossary-entry ul.tags li {
       font-size: 0.75rem;
       letter-spacing: 0.14em;
       padding: 0.3rem 0.65rem;
       }
    a.citation-ref {
       font-size: 0.72em;
       line-height: 0;
       vertical-align: super;
       text-decoration: none;
       }
    a.citation-ref::before {
       content: "[";
       }
    a.citation-ref::after {
       content: "]";
       }
    aside.citation-popover {
       position: absolute;
       z-index: 20;
       width: min(420px, calc(100vw - 20px));
       padding: 1rem;
       }
    aside.citation-popover p {
       font-size: 1rem;
       line-height: 1.4;
       margin-bottom: 0.5rem;
       }
    aside.citation-popover p:last-child {
       margin-bottom: 0;
       }
    p.citation-popover-tags {
       font-size: 0.8rem;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       }
       padding: 0;
       margin-top: 0.5rem;
       }

 /* About Page */
    section#about-intro {
       text-align: center;
       max-width: 1400px;
       margin: 2rem auto 3rem auto;
       padding: 2rem 3rem;
       }
    section#about-intro p {
       font-size: 3.4rem;
       line-height: 1.15;
       font-weight: normal;
       width: 100%;
       max-width: none;
       margin: 0 auto;
       text-align: center;
       }
    section#contact-section {
       max-width: 1100px;
       margin: 3rem auto 4rem auto;
       padding: 2.2rem 3rem;
       }
    section.contact-copy {
       margin-bottom: 1.8rem;
       }
    section.contact-copy h2 {
       font-size: 2.6rem;
       line-height: 1.1;
       margin-bottom: 0.75rem;
       }
    section.contact-copy p,
    p.contact-email {
       font-size: 1.35rem;
       line-height: 1.45;
       }
    section.contact-copy p {
       max-width: 850px;
       }
    form#contact-form {
       display: grid;
       gap: 1.1rem;
       }
    div.contact-field-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 1rem;
       }
    form#contact-form label {
       display: grid;
       gap: 0.45rem;
       }
    form#contact-form label span {
       font-size: 0.95rem;
       letter-spacing: 0.14em;
       text-transform: uppercase;
       }
    form#contact-form input,
    form#contact-form textarea {
       width: 100%;
       padding: 0.75rem 0.9rem;
       font-size: 1.05rem;
       line-height: 1.35;
       }
    form#contact-form textarea {
       resize: vertical;
       min-height: 180px;
       }
    form#contact-form button {
       justify-self: start;
       min-height: 46px;
       padding: 0.75rem 1.1rem;
       font-size: 0.95rem;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       }
    p.hidden-field {
       display: none;
       }
    p.contact-email {
       margin-top: 1.6rem;
       }
    p.contact-email span {
       font-weight: bold;
       }

@media screen and (max-width: 1100px) {

 /* Tablet Specimen Tiles */
    section#rock-grid,
    section#fossil-grid {
       column-count: 2;
       }

}

 /* Mobile Layout */

@media screen and (max-width: 768px) {

 /* Mobile General Styles */
    main {
       padding: 20px 16px;
       }
    header {
       padding: 20px 10px;
       }
    header h1 {
       font-size: 3em;
       letter-spacing: 2px;
       }
    header p {
       font-size: 1.2em;
       }
    nav.toplinks ul {
       gap: 12px;
       }
    nav.toplinks a {
       font-size: 1.1em;
       }
    body {
       overflow-x: hidden;
       }

 /* Mobile Home Page */
    section#home-intro {
       margin-top: 20px;
       }
    article.introtext p {
       font-size: 1.1rem;
       }
    section#home-sections {
       grid-template-columns: 1fr;
       gap: 24px;
       }
    article.home-card img {
       height: 240px;
       }
    article.home-card h2 {
       font-size: 1.9rem;
       }
    article.home-card p {
       font-size: 1.1rem;
       }

 /* Mobile Recent Finds Page */
    section#recentfinds-intro p {
       font-size: 2rem;
       }
    article.find-post {
       grid-template-columns: 1fr;
       padding: 1.5rem;
       }
    section.find-post-images {
       overflow-x: auto;
       }
    section.find-post-images img {
       height: 240px;
       }
    article.find-post h2 {
       font-size: 1.8rem;
       }
    article.find-post p {
       font-size: 1.05rem;
       }
    section#trip-page {
       padding: 20px 12px 50px 12px;
       }
    section#trip-page h2 {
       font-size: 2.5em;
       margin-bottom: 20px;
       }
    section#trip-story-layout {
       grid-template-columns: 1fr;
       gap: 1rem;
       }
    article.trip-article {
       order: 1;
       padding: 1.5em;
       }
    article.trip-article p {
       font-size: 1.2rem;
       }
    section.trip-side-images {
       order: 2;
       }
    section.trip-side-images img {
       height: 240px;
       }

 /* Mobile Specimens Section */
    section#rocks-intro p,
    section#fossils-intro p {
       font-size: 2rem;
       }
    section#rock-grid,
    section#fossil-grid {
       column-count: 1;
       column-gap: 0;
       }
    article.specimen {
       margin-bottom: 20px;
       }
    article.specimen img {
       height: 220px;
       }
    article.specimen h3 {
       font-size: 1.7rem;
       }
    article.specimen p {
       font-size: 1.1rem;
       }
    article.specimen ul.tags {
       gap: 8px;
       }
    section.catalog-tools {
       grid-template-columns: 1fr;
       align-items: stretch;
       padding: 1rem;
       }
    p.catalog-count {
       text-align: left;
       }
    section#specimen-page {
       padding: 20px 12px 50px 12px;
       }
    section#specimen-page h2 {
       font-size: 2.5em;
       margin-bottom: 20px;
       }
    article.specimen-description {
       padding: 1.5em;
       }
    article.specimen-description p {
       font-size: 1.4em;
       }
    img.thumbnail {
       width: 95px;
       height: 95px;
       }

 /* Mobile Tags */
    ul.tags li {
       font-size: 0.75rem;
       letter-spacing: 0.1em;
       }

 /* Mobile Info Section */
    section#info-intro p,
    section#info-article-intro p {
       font-size: 2rem;
       }
    section#info-grid {
       grid-template-columns: 1fr;
       gap: 24px;
       }
    article.info-card img {
       height: 260px;
       }
    article.info-card h2 {
       font-size: 1.9rem;
       }
    article.info-card p {
       font-size: 1.1rem;
       }
    article.info-article {
       padding: 1.5em;
       }
    article.info-article h2 {
       font-size: 2rem;
       }
    article.info-article p {
       font-size: 1.2rem;
       }
    section#citations-bibliography,
    section#glossary-terms {
       gap: 1rem;
       }
    li.citation-entry,
    li.glossary-entry {
       grid-template-columns: 2.25rem minmax(0, 1fr);
       gap: 0.65rem;
       }
    a.citation-number,
    a.glossary-number {
       font-size: 1rem;
       }
    span.citation-text,
    section.glossary-body p {
       font-size: 1.05rem;
       }
    section.glossary-body h2 {
       font-size: 1.35rem;
       }
    li.citation-entry ul.tags li,
    li.glossary-entry ul.tags li {
       font-size: 0.7rem;
       }

 /* Mobile About Page */
    section#about-intro p {
       font-size: 2rem;
       }
    section#contact-section {
       padding: 1.5rem;
       margin-bottom: 3rem;
       }
    section.contact-copy h2 {
       font-size: 2rem;
       }
    section.contact-copy p,
    p.contact-email {
       font-size: 1.1rem;
       }
    div.contact-field-grid {
       grid-template-columns: 1fr;
       }
    form#contact-form button {
       width: 100%;
       }

}