/* Import a sharp, condensed headline font */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');

:root {
  --blade-size:      40px;   /* ~30px ×1.3 */
  --blade-radius:    0px;    /* slightly bigger curve */
  --text-offset:     20%;    /* labels start 20% down */
  --transition-speed:400ms;  /* panel slide timing */
  --panel-padding:   20px;   /* shared horizontal/vertical padding for panels */
}

/* Between tablet-ish widths, slightly slim the blades to avoid crowding */
@media (min-width: 901px) and (max-width: 1200px) {
  :root { --blade-size: 32px; }
  .blade { font-size: 1.1rem; }
  .blade .blade-range { font-size: 0.8rem; }
}

/* reset & base */
* { margin:0; padding:0; box-sizing:border-box }
html, body { height:100%; }
body {
  position: relative;
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––
  Film‐strip panels
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.content {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;       /* full width; we'll mask via JS */
  overflow: hidden;
  perspective: 800px;
  z-index: 1;
}
.panels {
  display: flex;
  height: 100%;
  transition: transform var(--transition-speed) ease-in-out;
}
.panel {
  flex: 0 0 100%;
  height: 100%;
  padding: var(--panel-padding); /* panel padding; referenced by GSN footer for bleed */
  box-sizing: border-box;
  color: #fff;
  /* border-radius: var(--blade-radius); */
}

/* Desktop/tablet: clip panel internals so they don't bleed into neighbors */
@media (min-width: 901px) {
  .panel { overflow: hidden; }
}

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––
  Blade containers (above panels)
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.blade-list {
  position: absolute;
  top: 0; bottom: 0;
  width: var(--blade-size);
  pointer-events: none;    /* clicks through container */
  z-index: 2;              /* above .content */
  overflow: hidden;        /* prevent blade spill/bleed beyond container */
}
.blade-list-left  { left: 0; }
.blade-list-right { right:0; }

/*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––
  Blades: full-height, no clip-path, smooth curve
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.blade {
  position: absolute;
  top: 0;
  width: var(--blade-size);
  height: 100%;
  background: #333;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;    /* blade itself is clickable */
  transition: background .2s;
  overflow: hidden;        /* prevent label bleed into neighbor blades */

  /* 30% larger text */
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;         /* ~.8rem ×1.3 */
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: sideways;

  /* center title & range, offset down 20% */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--text-offset);
  justify-content: space-between;

  /* smooth right-edge curve only */
  border-radius: 0 var(--blade-radius) var(--blade-radius) 0;
  box-shadow: inset -2px 0 0 rgba(255,255,255,0.15);
}
.blade:hover  { background: #555; }
.blade.active { background: #777; }

/* mirror the inner highlight on the right stack */
.blade-list-right .blade {
  box-shadow: inset 2px 0 0 rgba(255,255,255,0.15);
}

/* blade text elements */
.blade .blade-title,
.blade .blade-range {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  text-align: center;
}
.blade .blade-range {
  font-size: .9rem;   /* ~.7rem ×1.3 */
  opacity: .8;
}
 
/* Mobile: switch to horizontal blades and enable scrolling */
@media (max-width: 900px) {
  body { 
    overflow: auto; 
    height: auto;
    min-height: 100vh;
  }
  .content {
    position: relative;
    left: 0 !important; 
    right: 0 !important;
    height: auto;
    min-height: calc(100vh - var(--blade-size));
    overflow: visible;
    padding-top: var(--blade-size); /* make room for the horizontal blades bar */
  }
  .panels { 
    display: block; 
    transform: none !important; 
    height: auto;
    overflow: visible;
  }
  .panel { 
    flex: 1 1 auto; 
    width: 100%; 
    height: auto;
    min-height: calc(100vh - var(--blade-size));
    overflow: visible;
  }
  .blade-list-left, .blade-list-right { display: none; }

  /* Horizontal blades bar at top */
  .blade-top-list {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--blade-size);
    z-index: 3;
    display: flex;
  align-items: center;      /* center tabs vertically */
  justify-content: center;  /* center the group when there is extra space */
    gap: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    background: #333;
    -webkit-overflow-scrolling: touch;
  }
  .blade-top-list .blade {
    position: relative;
    width: auto; height: var(--blade-size);
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 0;
    box-shadow: none;
  font-size: 0.95rem;      /* slightly smaller on mobile */
  padding: 0 10px;
  flex: 0 0 auto;           /* natural width per tab */
  min-width: max-content;    /* fit content width */
    border-right: 1px solid rgba(255,255,255,0.1);
  }
  .blade-top-list .blade .blade-title,
  .blade-top-list .blade .blade-range {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  white-space: nowrap;       /* keep on a single line */
  overflow: visible;         /* no clipping */
  text-overflow: clip;       /* no ellipses */
  }
  .blade-top-list .blade:last-child {
    border-right: none;
  }

  /* Extra-tight breakpoints to help long labels fit */
  @media (max-width: 600px) {
    .blade-top-list .blade { font-size: 0.9rem; padding: 0 8px; }
  }
  @media (max-width: 400px) {
    .blade-top-list .blade { font-size: 0.85rem; padding: 0 6px; }
  }
}