/* ==========================================================================
   MOSAIC — base.css
   Light theme / indie web
   Fonts: Alagard (titles), Caviar Dreams (body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS
   -------------------------------------------------------------------------- */

@font-face{
  font-family:"Alagard";
  src:url("/assets/fonts/alagard.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Caviar Dreams";
  src:url("/assets/fonts/CaviarDreams.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Caviar Dreams";
  src:url("/assets/fonts/CaviarDreams_Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Caviar Dreams";
  src:url("/assets/fonts/CaviarDreams_Italic.ttf") format("truetype");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Caviar Dreams";
  src:url("/assets/fonts/CaviarDreams_BoldItalic.ttf") format("truetype");
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */

:root{
  --bg:#f6f5ef;               /* paper */
  --ink:#171a18;              /* ink */
  --muted:rgba(23,26,24,.65);
  --border:rgba(23,26,24,.30);

  --orange:#f28c28;
  --orange-soft:rgba(242,140,40,.55);

  --paper:rgba(255,255,255,.96);

  --maxw:980px;
  --radius:10px;

  --title:"Alagard", monospace;
  --body:"Caviar Dreams", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease:cubic-bezier(.2,.8,.2,1);
  --t:220ms;

  /* label vertical positioning (Y axis) */
  --label-y: 20px;            /* how HIGH the label sits above the tab */
  --label-y-hover: 1px;      /* a bit higher on hover */
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }

.pixel{
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* --------------------------------------------------------------------------
   HEADER (MOSAIC)
   -------------------------------------------------------------------------- */

.header{
  max-width:var(--maxw);
  margin:28px auto 8px;
  padding:0 16px;
  text-align: center;
}

.header h1{
  margin:0;
  font-family:var(--title);
  font-weight:400;
  font-size:clamp(56px, 7vw, 96px);
  letter-spacing:2px;
  color:var(--orange);
  text-transform:uppercase;
  line-height: 0.9;
}

.header .subtitle{
  margin-top:6px;
  margin-bottom: 48px;
  font-family:var(--title);
  font-size:14px;
  letter-spacing:1.6px;
  color:var(--orange-soft);
  text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   STAGE / CARNET
   -------------------------------------------------------------------------- */

.stage{
  max-width:var(--maxw);
  margin:0 auto;
  padding:8px 16px 0;
  display:grid;
  place-items:center;
}

/* allow labels to overflow */
.book-wrap{
  width:100%;
  position:relative;
  padding-top:72px; /* headroom for tabs */
  overflow:visible;
}

/* Carnet ABOVE tabs */
.book{
  width:100%;
  border-radius:var(--radius);
  box-shadow:0 14px 36px rgba(0,0,0,.14);
  position:relative;
  z-index:20; /* IMPORTANT: above tabs */
}

/* --------------------------------------------------------------------------
   TABS (UNDER carnet-home)
   -------------------------------------------------------------------------- */

.tab{
  position:absolute;
  top:0;
  left:var(--x);
  top: calc(var(--y, 0px));
  width:var(--w);
  height:var(--h);
  transform:translateX(-50%);
  border-radius:10px;
  outline:none;

  /* Tabs are UNDER the book */
  z-index:5;

  transition:transform var(--t) var(--ease),
             filter var(--t) var(--ease);
  filter:drop-shadow(0 12px 18px rgba(0,0,0,0));
}

.tab img{
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  user-select:none;
  position:relative;
  z-index:1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* --------------------------------------------------------------------------
   LABELS (move UP on the Y axis)
   -------------------------------------------------------------------------- */

.tab .label{
  position:absolute;
  left:50%;

  /* place ABOVE the tab by using bottom:100% */
  bottom:100%;
  margin-bottom: var(--label-y);

  transform:translateX(-50%);
  opacity:0;

  padding:6px 10px;
  border-radius:12px;
  background:var(--paper);
  border:1px solid rgba(23,26,24,.15);
  box-shadow:0 10px 24px rgba(0,0,0,.12);

  font-family:var(--title);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink);

  transition:opacity 160ms var(--ease),
             margin-bottom 160ms var(--ease);

  pointer-events:none;

  /* Labels must be ABOVE everything */
  z-index:9999;
}

/* Hover/focus: tab lifts a bit (still under book), label goes higher (Y axis) */
.tab:hover,
.tab:focus-visible{
  transform:translateX(-60%) translateY(-10px);
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.18));
}

.tab:hover .label,
.tab:focus-visible .label{
  opacity:1;
  margin-bottom: var(--label-y-hover);
}

/* --------------------------------------------------------------------------
   UPDATES BOX
   -------------------------------------------------------------------------- */

.updates{
  width:min(720px, 100%);
  margin:26px auto 0;
  padding:18px 20px;
  border:2px dashed var(--border);
  background:transparent;
}

.updates h2{
  margin:0 0 12px;
  font-family:var(--title);
  font-weight:400;
  font-size:18px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.update{
  margin:0 0 14px;
  font-size:14px;
  color:rgba(23,26,24,.88);
}
.update:last-child{ margin-bottom:0; }

.update .date{ font-weight:700; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer {
  max-width: var(--maxw);
  margin: 18px auto 28px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;      
  font-size: 12px;           
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width:720px){
  .header{ text-align:center; }
  .book-wrap{ padding-top:64px; }
  .footer{ flex-direction:column; align-items:center; }

  :root{
    --label-y: 46px;
    --label-y-hover: 58px;
  }
}