:root{
  --page-bg:#000;

  --title:#fff;
  --desc:#c78647;

  --ring-size: min(560px, 92vw);

  /* Geometry */
  --gap-deg: 6;                 /* angular gap between sectors */
  --inner-r: 22;                /* % radius for inner cut (JS also uses this) */
  --outer-r: 47;                /* % radius for outer edge (JS also uses this) */
  --icon-r: 27.5;                 /* % radius for icon placement (JS also uses this) */

  /* Axln-like translucency feel */
  --idle-inner: rgba(199,134,71,0.34);  /* stronger near inner edge */
  --idle-outer: rgba(199,134,71,0.10);  /* fades outward */
  --active-inner: rgba(255,255,255,0.34);
  --active-outer: rgba(255,255,255,0.10);

  --edge-idle: rgba(255,255,255,0.10);
  --edge-active: rgba(255,255,255,0.22);

  /* Thin inner accent when selected */
  --accent: rgba(199,134,71,0.92);
  --accent-thickness: 1.7;      /* % radius thickness (visual only) */

  --icon: rgba(255,255,255,0.92);

  --hub-bg: rgba(0,0,0,0.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--page-bg);
  color:#fff;
}

.page{min-height:100%;display:flex;flex-direction:column}

.hub{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 32px 16px 10px;
}

.hub-wrap{
  position:relative;
  width: var(--ring-size);
  aspect-ratio:1/1;
}

/* Center */
.hub-center{
  pointer-events: none;
  position:absolute;
  inset: 32%;
  border-radius:50%;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.06), transparent 55%), var(--hub-bg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5) inset;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 18px;
  z-index: 5;
}

.hub-title{
  margin:0 0 10px 0;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height:1.15;
  font-weight:700;
  color: var(--title);
}

.hub-desc{
  margin:0;
  font-size: clamp(12px, 1.6vw, 14px);
  line-height:1.5;
  color: var(--desc);
}

/* Radial container */
.radial{
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index: 2;
}

/* Wedges are clipped by JS */
.wedge{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  background:transparent;
  border-radius:50%;
  cursor:pointer;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}

.wedge-layers{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;

  /* defaults (idle) */
  --fillInner: var(--idle-inner);
  --fillOuter: var(--idle-outer);
  --edge: var(--edge-idle);
  --accentOn: 0;

  /* Axln-like sector body:
     - translucent fill
     - stronger near inner edge
     - fades to outer edge
     - subtle inner/outer edge lines */
  background:
    /* inner accent ring only when selected */
    radial-gradient(circle,
      transparent 0 calc(var(--inner-r) * 1% - var(--accent-thickness) * 1%),
      rgba(199,134,71, calc(var(--accentOn) * 0.92)) calc(var(--inner-r) * 1% - var(--accent-thickness) * 1%) calc(var(--inner-r) * 1%),
      transparent calc(var(--inner-r) * 1%) 100%
    ),

    /* main wedge fill (inner strong -> outer faded) */
    radial-gradient(circle,
      transparent 0 calc(var(--inner-r) * 1%),
      var(--fillInner) calc(var(--inner-r) * 1%),
      var(--fillOuter) calc(var(--outer-r) * 1%),
      transparent calc(var(--outer-r) * 1%) 100%
    );

  /* subtle edge definition + soft depth */
  box-shadow:
    0 0 0 1px var(--edge) inset,
    0 20px 44px rgba(0,0,0,0.42);

  transition: filter .10s linear, background .10s linear, box-shadow .10s linear;
}

/* Hover */
.wedge.is-hover .wedge-layers{
  --fillInner: var(--active-inner);
  --fillOuter: var(--active-outer);
  --edge: var(--edge-active);
  filter: brightness(1.04);
}

/* Selected */
.wedge.is-selected .wedge-layers{
  --fillInner: var(--active-inner);
  --fillOuter: var(--active-outer);
  --edge: var(--edge-active);
  --accentOn: 1;
}

/* Icon */
.wedge-icon{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 3;
  pointer-events:none;
}

.wedge-icon svg path{
  fill: var(--icon);
}

.wedge-icon svg,
.wedge-icon img{
  width: 40px;
  height: 40px;
  fill: var(--icon);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}

/* Instructions */
.hub-instructions{
  position: absolute;
  left: 50%;
  top: calc(100% + 14px);
  transform: translateX(-50%);
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  text-align: center;
  max-width: 72ch;
  z-index: 10;
  pointer-events: none;
}

/* Footer from /cv */
.bottom-container{background:#000;padding:6px 0;text-align:center}
.footer-link{font-size:1.2rem;margin:0 15px;color:#fff;text-decoration:none}
.footer-link:hover{color:#EAF6F6}
.copyright{color:#EAF6F6;font-size:.75rem;padding:5px 0}

@media (max-width:520px){
  :root{ --ring-size: min(460px, 94vw); }
  .wedge-icon svg, .wedge-icon img{ width:36px; height:36px; }
}