/* ==========================================================================
   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;min-height:44px;font-weight:600}
/* 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 */