:root{
    --ink:#182A3D;
    --ink-soft:#4C5B6B;
    --paper:#F5F3EE;
    --paper-raised:#FFFFFF;
    --line:#E1DDD3;
    --amber:#D9A441;
    --amber-deep:#B8832A;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:'Work Sans', sans-serif; font-weight:400;
    -webkit-font-smoothing:antialiased;
  }
  .serif{font-family:'Fraunces', serif;}

  header{
    padding:28px 24px 24px; border-bottom:1px solid var(--line);
  }
  .brand{
    display:flex; align-items:baseline; gap:2px;
    font-family:'Fraunces', serif; font-weight:700; font-size:1.7rem;
    letter-spacing:-.01em;
  }
  .brand .deg{
    display:inline-block; width:8px; height:8px; border:2px solid var(--amber-deep);
    border-radius:50%; margin:0 1px 18px 1px;
  }
  header p{
    margin:8px 0 0; color:var(--ink-soft); font-size:.92rem; max-width:46ch; line-height:1.5;
  }

  main{max-width:1060px; margin:0 auto; padding:36px 24px 80px;}

  .grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:22px;
  }

  .card{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:4px;
    overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit;
    transition:border-color .15s;
  }
  a.card:hover{border-color:var(--amber-deep);}

  .card-media{
    width:100%; aspect-ratio:4/3; background:#E9E5DA; overflow:hidden; position:relative;
  }
  .card-media img{width:100%; height:100%; object-fit:cover; display:block;}
  .card-media video{width:100%; height:100%; object-fit:cover; display:block; background:#111;}

  .open-mark{
    position:absolute; right:10px; bottom:10px; width:30px; height:30px; border-radius:50%;
    background:var(--paper-raised); display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
  }
  .open-mark svg{width:14px; height:14px;}

  .card-body{padding:14px 16px 17px;}
  .card-title{font-family:'Fraunces', serif; font-weight:600; font-size:1.02rem; line-height:1.35;}

  .empty{
    text-align:center; padding:90px 20px; color:var(--ink-soft);
  }
  .empty .mark{
    width:34px; height:34px; border:2px solid var(--amber-deep); border-radius:50%;
    margin:0 auto 18px;
  }
  .empty p{font-size:.95rem; max-width:40ch; margin:0 auto;}

  footer{
    text-align:center; padding:26px; color:var(--ink-soft); font-size:.78rem;
    border-top:1px solid var(--line);
  }
  footer a{color:var(--ink-soft);}