/* Titi Rragam — base styles (grows in later tasks) */
:root{
  --green:#3a4a2f;
  --green-dark:#232b1c;
  --gold:#b7a06a;
  --cream:#f3efe6;
}
*{box-sizing:border-box;}
body{margin:0;font-family:Georgia,'Times New Roman',serif;color:var(--cream);}

/* ---- landing placeholder ---- */
.landing{background:var(--green-dark);}
.landing-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#2b3422,#151a10);text-align:center;padding:40px;}
.landing-inner{max-width:680px;}
.brand{font-size:34px;letter-spacing:1px;color:var(--gold);margin-bottom:30px;font-style:italic;}
.landing h1{font-size:clamp(30px,6vw,52px);line-height:1.15;margin:0 0 18px;font-weight:600;}
.landing .sub{font-size:18px;opacity:.85;font-family:system-ui,Arial,sans-serif;}
.landing .soon{margin-top:34px;color:var(--gold);font-family:system-ui,Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;font-size:13px;}
.landing .warn{margin-top:24px;background:#3a2020;color:#ffb4a8;padding:12px 16px;border-radius:8px;font-family:system-ui,Arial,sans-serif;font-size:14px;}
.landing code{background:#000;padding:2px 6px;border-radius:4px;}

/* ---- responsive media wrappers (used by MediaHandler::renderEmbed) ---- */
.media-embed{position:relative;width:100%;overflow:hidden;background:#000;border-radius:10px;}
.media-embed iframe,.media-embed video,.media-embed img{
  position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;}
.media-embed.ar-16x9{aspect-ratio:16/9;}
.media-embed.ar-9x16{aspect-ratio:9/16;max-width:360px;}
.media-embed.ar-1x1{aspect-ratio:1/1;}
/* fallback for very old browsers without aspect-ratio */
@supports not (aspect-ratio:1/1){
  .media-embed{height:0;}
  .media-embed.ar-16x9{padding-top:56.25%;}
  .media-embed.ar-9x16{padding-top:177.78%;}
  .media-embed.ar-1x1{padding-top:100%;}
}