/* Subdue The Sloth — placeholder home (a-ocean-v5 chrome). No external resources, no JS.
   Ocean plate source: 2440x1177 px (aspect 2.073). Derek sits in the left ~24% of the plate,
   head starting ~35% down, body running off the bottom edge (art's own crop). */
:root{
  --sloth:#FF680E; --navy:#080C16; --card:rgba(14,20,36,.92); --card-hi:rgba(18,26,46,.92);
  --line:#2A3650; --white:#fff; --dim:#96A2B8; --foot:#7A869E;
  --header-h:72px; --footer-h:44px;
  /* Plate caps */
  --plate-w:2440px;       /* native width  -> never shown wider (1x CSS px)  */
  --plate-h:1177px;       /* native height -> never shown taller             */
  --ar-max:2.8;           /* widest stage aspect; cover then crops <=26% of sky, never Derek's head */
  --stage-min-h:440px;
  --fade:48px;            /* edge fade into starfield when the stage is narrower/shorter than the window */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"DejaVu Sans",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
  background:var(--navy) url(../assets/starfield.png) repeat; color:var(--white);
  font-family:var(--font); -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}

/* Header: starfield, never ocean */
.site-header{
  height:var(--header-h); padding:0 48px; display:flex; align-items:center; justify-content:space-between;
  background:var(--navy) url(../assets/starfield.png) repeat; position:relative; z-index:2;
}
.brand img{height:34px;width:auto}
nav{display:flex;gap:36px}
nav a{color:var(--white);font-weight:700;font-size:16px;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
nav a.active{color:var(--sloth);border-bottom-color:var(--sloth)}
nav a:hover,nav a:focus-visible{color:var(--sloth)}
a:focus-visible{outline:2px solid var(--sloth);outline-offset:4px;border-radius:4px}

/* ---------- Desktop / landscape: capped stage, centered, starfield beyond ---------- */
.home{
  --avail-h:calc(100vh - var(--header-h) - var(--footer-h));
  --stage-h:clamp(var(--stage-min-h), var(--avail-h), var(--plate-h));
  container-type:inline-size;
  position:relative; flex:1 0 auto; min-height:var(--stage-h);
  display:flex; align-items:center; justify-content:center;
}
.stage{
  --sw:min(100cqw, var(--plate-w), calc(var(--stage-h) * var(--ar-max)));
  /* fades only where there is a gap to the window edge (0 when the stage is full-bleed) */
  --fx:clamp(0px, (100cqw - var(--sw)) / 2, var(--fade));
  --fy:clamp(0px, (var(--avail-h) - var(--stage-h)) / 2, var(--fade));
  position:relative; width:var(--sw); min-height:var(--stage-h);
  max-height:var(--plate-h);
  display:flex; justify-content:flex-end;
  padding:12px 36px 28px calc(var(--sw) * .46 - 10px);
}
.ocean{
  position:absolute; inset:0; overflow:hidden; z-index:0;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to right, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
          mask-composite:intersect;
}
.ocean picture,.ocean img{width:100%;height:100%;max-width:none}
/* cover, anchored bottom-left: wide windows lose sky (top) first, narrow ones lose the right-hand sea; Derek stays */
.ocean img{object-fit:cover;object-position:0% 100%}

.apps{
  position:relative; z-index:1; width:100%; max-width:760px;
  padding:22px 18px 24px; border-radius:22px;
  background:rgba(8,12,22,.46);
  scroll-margin-top:12px; display:flex; flex-direction:column;
  margin: 36px;
}
.apps h1{margin:0;font-size:22px;line-height:1.25;font-weight:700}
.apps .sub{margin:2px 0 14px;font-size:13px;color:var(--dim)}

.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:14px 16px;flex:1 1 auto}
.card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:24px 16px 20px;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
}
.card::before{ /* soft top sheen, as in comp */
  content:""; position:absolute; left:1px; right:1px; top:1px; height:32%;
  border-radius:16px 16px 0 0; background:rgba(255,255,255,.03); pointer-events:none;
}
.card.featured{background:var(--card-hi);border:2px solid rgba(255,104,14,.82)}
.icon{width:118px;height:118px;border-radius:23px;box-shadow:0 4px 12px rgba(0,0,0,.55)}
.card h2{margin:14px 0 0;font-size:17px;line-height:1.25;font-weight:700}
.card p{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--dim);max-width:30ch}
.soon{
  margin-top:14px; padding:3px 10px; border-radius:6px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sloth); background:rgba(255,104,14,.12); border:1px solid rgba(255,104,14,.67);
}

.site-footer{
  position:relative; z-index:1; text-align:center; height:var(--footer-h); padding:14px 20px 0;
  background:var(--navy) url(../assets/starfield.png) repeat;
}
.site-footer p{margin:0;font-size:12px;color:var(--foot)}

/* Narrower landscape: more room for the grid */
@media (max-width:1100px){
  .stage{padding-left:calc(var(--sw) * .38); padding-right:24px}
  .icon{width:96px;height:96px;border-radius:19px}
}
/* Short windows: compact header + cards so the 2x2 fits beside a fully visible Derek */
@media (max-height:820px){
  .icon{width:84px;height:84px;border-radius:17px}
  .card{padding:14px 12px}
  .card h2{margin-top:10px;font-size:16px}
  .soon{margin-top:10px}
  .apps{padding:16px 16px 18px}
}
@media (max-height:640px){
  :root{--header-h:56px; --footer-h:40px}
  .brand img{height:28px}
  .stage{padding-top:8px;padding-bottom:12px}
  .apps{padding:12px 14px 14px}
  .apps h1{font-size:19px}
  .apps .sub{margin-bottom:8px;font-size:12px}
  .grid{gap:10px 12px}
  .icon{width:60px;height:60px;border-radius:13px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
  .card{padding:8px 10px}
  .card h2{margin-top:6px;font-size:15px}
  .card p{margin-top:2px;font-size:12px;line-height:1.3}
  .soon{margin-top:6px;font-size:9.5px;padding:2px 8px}
  .site-footer{padding-top:12px}
}

/* Tall desktop windows (stage up to native 1177px): scale the grid up instead of stretching empty cards */
@media (min-height:1100px){
  .apps{max-width:920px;padding:28px 24px 30px}
  .apps h1{font-size:28px}
  .apps .sub{font-size:15px;margin-bottom:18px}
  .grid{gap:18px 20px}
  .icon{width:168px;height:168px;border-radius:34px}
  .card h2{font-size:21px;margin-top:18px}
  .card p{font-size:15px}
  .soon{font-size:12px;margin-top:18px;padding:4px 12px}
}

/* ---------- Stacked (locked mobile A): phones, and any portrait/tall-thin window ---------- */
@media (max-width:700px), (max-aspect-ratio:5/4){
  :root{--header-h:72px}
  .home{display:block;min-height:0}
  .stage{display:block;width:auto;min-height:0;max-height:none;padding:0}
  .ocean{
    position:relative; inset:auto; margin:0 auto;
    width:min(100%, var(--plate-w));
    /* comp: 300px tall at 390; wider windows show the whole plate at its own aspect, capped at native */
    height:min(max(300px, 100cqw * 1177 / 2440), var(--plate-h));
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);
            mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);
  }
  .ocean img{object-position:8% 100%}
  .apps{max-width:760px;margin:0 auto;background:none;border-radius:0;padding:10px 16px 20px;text-align:center}
  .apps h1{font-size:clamp(17px, 3vw, 22px)}
  .apps .sub{font-size:clamp(12px, 2vw, 14px);margin-bottom:10px}
  .grid{gap:10px;grid-template-rows:none;grid-auto-rows:auto}
  .card{padding:20px 8px 16px;border-radius:16px}
  .icon{width:clamp(84px, 16vw, 118px);height:clamp(84px, 16vw, 118px);border-radius:20%}
  .card h2{font-size:clamp(15px, 2.4vw, 17px);margin-top:10px}
  .card p{font-size:clamp(12px, 2vw, 13px)}
  .soon{margin-top:10px;font-size:9.5px}
  .site-footer{height:auto;padding:14px 20px 18px}
}
@media (max-width:700px){
  :root{--header-h:58px}
  .site-header{padding:0 20px}
  .brand img{height:28px}
  nav{gap:18px}
  nav a{font-size:14px}
}
@media (max-width:340px){ .grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }