/* ==========================================================================
   START: ABOUT THE GAME PAGE (aboutthegame.html and devlog.html)
   Same identity as the game: dark storm sea, rusty metal, safety orange.
   Colors, fonts and spacing come from style.css. Mobile first.
   ========================================================================== */

/* START: SKIP LINK (only visible when it gets keyboard focus) */
.oc-about__skip{position:absolute;left:var(--space-4);top:-100px;z-index:10;padding:var(--space-2) var(--space-4);background:var(--brand);color:var(--bg);font-weight:600}
.oc-about__skip:focus{top:var(--space-4);color:var(--bg)}
/* END: SKIP LINK */

/* START: HEADER */
.oc-about__header{position:relative;z-index:2;padding:var(--space-4);background:var(--bg)}
.oc-about__back{display:inline-flex;align-items:center;gap:.5em;min-height:44px;font-weight:600;color:var(--brand);text-transform:uppercase;letter-spacing:.06em;text-decoration:none}
.oc-about__back:visited{color:var(--brand)}
.oc-about__back-arrow{text-decoration:none}
.oc-about__back-text{text-decoration:underline;text-underline-offset:.2em}
.oc-about__back:hover .oc-about__back-text,.oc-about__back:focus-visible .oc-about__back-text{text-decoration-thickness:2px}
/* END: HEADER */

/* START: HERO */
.oc-about__hero{position:relative;overflow:hidden;padding:24px var(--space-4) 0;
  min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--bg)}
.oc-about__hero-body{position:relative;z-index:1;width:100%;max-width:var(--content-max);margin:0 auto;padding-bottom:var(--space-6)}
.oc-about__title{margin:var(--space-2) 0 0;font:800 36px/0.95 var(--font-display);letter-spacing:.02em;text-transform:uppercase;color:var(--text)}
.oc-about__title span{display:block;color:var(--brand)}
.oc-about__hero .oc-hazard{position:relative;z-index:1;margin:0 calc(var(--space-4) * -1)}
/* END: HERO */

/* START: STORM SCENE (canvas drawn by js/storm-page.js) */
.oc-about__scene{position:absolute;inset:0;overflow:hidden}
.oc-about__scene canvas{display:block;width:100%;height:100%}
/* Dark veil over the drawing so the title keeps AAA contrast */
.oc-about__scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,25,.35) 0%,rgba(10,18,25,.75) 100%);pointer-events:none}
@media (min-width:1024px){.oc-about__scene::after{background:linear-gradient(90deg,rgba(10,18,25,.95) 0%,rgba(10,18,25,.85) 40%,rgba(10,18,25,0) 66%)}}
/* END: STORM SCENE */

/* START: CONTENT */
.oc-about{display:grid;gap:var(--space-4);max-width:var(--content-max);margin:0 auto;padding:var(--space-6) var(--space-4) 64px}
.oc-about:focus{outline:none}
.oc-about__card{padding:var(--space-5) var(--space-4);border:1px solid var(--border);border-left:4px solid var(--rust);border-radius:var(--radius-md);background:var(--surface)}
.oc-about__heading{margin:0 0 var(--space-3);font:800 28px/1.1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--brand)}
.oc-about__card p{max-width:65ch;margin:0 0 var(--space-3);color:var(--text)}
.oc-about__card p:last-child{margin-bottom:0}
/* END: CONTENT */

/* START: LARGER SCREENS */
@media (min-width:768px){
  .oc-about__hero{padding:32px var(--space-6) 0;min-height:240px}
  .oc-about__hero .oc-hazard{margin:0 calc(var(--space-6) * -1)}
  .oc-about__title{font-size:56px}
  .oc-about{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);padding:var(--space-6) var(--space-6) 80px}
  .oc-about__card{padding:var(--space-6)}
}
/* END: LARGER SCREENS */

/* ==========================================================================
   END: ABOUT THE GAME PAGE
   ========================================================================== */

/* START: WIDE CARD (takes the full row on larger screens) */
@media (min-width:768px){.oc-about__card--wide{grid-column:1 / -1}}
/* END: WIDE CARD */

/* START: DEV LOG (one entry per row, on every screen size) */
.oc-about--log{grid-template-columns:minmax(0,1fr)!important}
.oc-about--log .oc-about__card{max-width:820px}
/* END: DEV LOG */

/* ==========================================================================
   START: PHASE PAGE (phase1.html)
   ========================================================================== */
/* "PHASE 1" on one line: PHASE white, 1 orange */
.oc-about__title--inline span{display:inline}
/* Buttons above the dev log link; side by side when they fit */
.oc-phase-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-5) 0 var(--space-4)}
.oc-phase-actions .oc-btn{min-height:44px;display:inline-flex;align-items:center}
/* ==========================================================================
   END: PHASE PAGE
   ========================================================================== */

/* ==========================================================================
   START: BLOG POSTS (devlog.html, posts from Blogger)
   ========================================================================== */
.oc-posts{display:grid;gap:var(--space-4);max-width:820px}
.oc-posts__list{display:grid;gap:var(--space-4)}
.oc-posts__status:empty{display:none}
.oc-posts__status{margin:0;color:var(--text-2)}
.oc-posts__pages{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3)}
.oc-posts__pages[hidden]{display:none}
.oc-posts__pages .oc-btn{min-height:44px;display:inline-flex;align-items:center}
.oc-post__date{color:var(--text-2);font:500 15px/1.5 var(--font-mono)}
.oc-post__author{display:block;font-family:var(--font-sans)}
.oc-post__author:empty{display:none}
.oc-post__body{max-width:65ch;color:var(--text)}
.oc-post__body :is(p,ul,ol,blockquote){margin:0 0 var(--space-3)}
.oc-post__body h3{margin:var(--space-4) 0 var(--space-2);font:600 20px/1.3 var(--font-sans);color:var(--text)}
.oc-post__body img{display:block;max-width:100%;height:auto;margin:var(--space-3) 0;border-radius:var(--radius-sm)}
.oc-post__body a{word-break:break-word}

/* START: POST SIGNATURE (round photo + name at the end of every post) */
/* The signature row: photo on the left, name and role on the right */
.oc-post__sign {
  display: flex;                          /* photo and text side by side */
  align-items: center;                    /* photo centered with the two text lines */
  gap: 12px;                              /* space between the photo and the text */
  margin-top: var(--space-4);             /* space between the post text and the signature */
  padding-top: var(--space-4);            /* space between the thin line and the signature */
  border-top: 1px solid var(--border);    /* thin line separating it from the post */
}
/* The round photo, the size of a comment avatar, with a soft white glow */
.oc-post__sign-photo {
  width: 40px;                            /* photo size */
  height: 40px;
  flex: none;                             /* never squeezed on small screens */
  border-radius: 50%;                     /* makes it round */
  object-fit: cover;                      /* fills the circle without stretching */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .85),   /* thin white ring */
    0 0 8px 2px rgba(255, 255, 255, .45); /* soft white glow around it */
}
/* Name and role stacked on two lines */
.oc-post__sign-text {
  display: grid;                          /* one line under the other */
  line-height: 1.35;                      /* space between the two lines */
}
/* "Alessandra Brum" in the brand orange */
.oc-post__sign-name {
  font-weight: 600;
  font-size: 17px;
  color: var(--brand);
}
/* "Developer · Offshore Simulator" in the softer text color */
.oc-post__sign-role {
  font-size: 15px;
  color: var(--text-2);
}
/* END: POST SIGNATURE */
/* ==========================================================================
   END: BLOG POSTS
   ========================================================================== */