:root{
    --ink: #12141F;
    --night: #1B1F3B;
    --parchment: #F1E9D8;
    --brass: #D4A24C;
    --teal: #5E8B7E;
    --brass-dim: rgba(212,162,76,0.35);
    --ring-track: rgba(241,233,216,0.12);
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0;
    padding:0;
    background: radial-gradient(ellipse at 50% -10%, #262b52 0%, var(--night) 55%, #12142a 100%);
    color: var(--parchment);
    font-family: 'Space Grotesk', sans-serif;
    min-height:100vh;
  }

  a { color: var(--brass); }

  .wrap{
    max-width: 980px;
    margin: 0 auto;
    padding: 32px 24px 80px;
  }

  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(241,233,216,0.08);
    margin-bottom: 56px;
  }

  .wordmark{
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0;
  }
  .wordmark span{ color: var(--brass); }

  .tagline{
    font-size: 13px;
    color: rgba(241,233,216,0.5);
    letter-spacing: 0.04em;
  }

  /* --- Signature element: the instrument ring --- */
  .instrument{
    position: relative;
    width: min(420px, 82vw);
    aspect-ratio: 1;
    margin: 0 auto 28px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .instrument svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transform: rotate(-90deg);
  }

  .instrument .track{
    fill:none;
    stroke: var(--ring-track);
    stroke-width: 2;
  }

  .instrument .sweep{
    fill:none;
    stroke: var(--brass);
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.2s linear;
  }

  .instrument .ticks line{
    stroke: rgba(241,233,216,0.28);
    stroke-width: 1;
  }
  .instrument .ticks line.major{
    stroke: rgba(241,233,216,0.55);
    stroke-width: 1.6;
  }

  .center-face{
    position:relative;
    text-align:center;
    z-index:2;
  }

  .clock{
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: clamp(52px, 12vw, 84px);
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .clock .secs{
    font-size: 0.42em;
    color: var(--brass);
    font-weight: 500;
    margin-left: 4px;
  }

  .ampm{
    font-size: 15px;
    letter-spacing: 0.12em;
    color: var(--teal);
    text-transform: uppercase;
    margin-top: 6px;
  }

  .date-line{
    text-align:center;
    margin-top: 20px;
    font-size: 16px;
    color: rgba(241,233,216,0.75);
  }

  .location-line{
    text-align:center;
    margin-top: 6px;
    font-size: 14px;
    color: rgba(241,233,216,0.45);
  }
  .location-line b{ color: var(--parchment); font-weight:500; }

  /* Search / lookup box */
  .lookup{
    max-width: 480px;
    margin: 32px auto 0;
    position: relative;
  }

  .lookup-label{
    display:block;
    text-align:center;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(241,233,216,0.45);
    margin-bottom: 10px;
  }

  .lookup-box{
    position: relative;
  }

  #citySearch, #plannerSearch{
    width: 100%;
    background: rgba(18,20,31,0.6);
    border: 1px solid rgba(241,233,216,0.14);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    color: var(--parchment);
    outline: none;
    transition: border-color 0.15s ease;
  }
  #citySearch::placeholder, #plannerSearch::placeholder{ color: rgba(241,233,216,0.32); }
  #citySearch:focus, #plannerSearch:focus{ border-color: var(--brass); }

  .suggestions{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #1c2044;
    border: 1px solid rgba(241,233,216,0.14);
    border-radius: 10px;
    overflow: hidden;
    z-index: 10;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    display: none;
  }
  .suggestions.open{ display: block; }

  .suggestion-item{
    padding: 11px 16px;
    font-size: 14px;
    cursor: pointer;
    display:flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  .suggestion-item:hover,
  .suggestion-item.active{
    background: rgba(212,162,76,0.14);
  }
  .suggestion-item .s-name{ color: var(--parchment); }
  .suggestion-item .s-time{
    color: var(--teal);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    white-space: nowrap;
  }
  .suggestion-empty{
    padding: 14px 16px;
    font-size: 13px;
    color: rgba(241,233,216,0.4);
  }

  /* Searched city cards get a remove button */
  .city{ position: relative; }
  .city .remove-btn{
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(241,233,216,0.35);
    font-size: 15px;
    cursor: pointer;
    line-height: 1;
    padding: 2px;
  }
  .city .remove-btn:hover{ color: var(--brass); }

  .searched-grid:empty{ display:none; }

  /* City rail */
  .cities{
    margin-top: 72px;
  }

  .cities h2{
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(241,233,216,0.55);
    margin: 0 0 20px;
  }

  /* ---- Meeting time planner ---- */
  .planner{
    margin-top: 72px;
  }
  .planner h2{
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(241,233,216,0.55);
    margin: 0 0 8px;
    text-align: center;
  }
  .planner-sub{
    font-size: 13.5px;
    color: rgba(241,233,216,0.45);
    margin: 0 0 20px;
    text-align: center;
  }
  .planner-lookup{
    max-width: 480px;
    margin: 0 auto 28px;
    position: relative;
    text-align: center;
  }
  .planner-hint{
    font-size: 12px;
    color: rgba(241,233,216,0.35);
    margin-top: 8px;
  }
  .planner-grid-wrap{
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .planner-grid{
    display: table;
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0 6px;
  }
  .planner-axis{
    display: table-row;
  }
  .planner-axis .axis-spacer{
    display: table-cell;
    width: 150px;
  }
  .planner-axis .axis-cell{
    display: table-cell;
    font-size: 10.5px;
    color: rgba(241,233,216,0.35);
    font-variant-numeric: tabular-nums;
    padding-bottom: 6px;
  }
  .planner-row{
    display: table-row;
  }
  .planner-row .row-label{
    display: table-cell;
    width: 150px;
    vertical-align: middle;
    padding-right: 14px;
    font-size: 13px;
    color: var(--parchment);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
  }
  .planner-row .row-label .you-tag{
    color: rgba(241,233,216,0.4);
    font-size: 11px;
    margin-left: 4px;
  }
  .planner-row .row-remove{
    background: none;
    border: none;
    color: rgba(241,233,216,0.35);
    cursor: pointer;
    font-size: 13px;
    margin-left: 6px;
    padding: 0;
    line-height: 1;
    vertical-align: middle;
  }
  .planner-row .row-remove:hover{ color: var(--brass); }
  .planner-row .cell{
    display: table-cell;
    height: 26px;
    background: rgba(241,233,216,0.06);
    border-radius: 3px;
  }
  .planner-row .cell + .cell{ margin-left: 2px; }
  .planner-row .cell.business{
    background: var(--brass-dim);
  }
  .planner-row .cell.overlap{
    background: var(--brass);
    box-shadow: 0 0 0 1px rgba(212,162,76,0.5);
  }
  .planner-row .cell.now-col{
    box-shadow: inset 0 0 0 1.5px var(--teal);
  }
  .planner-summary{
    margin-top: 20px;
    font-size: 14px;
    color: rgba(241,233,216,0.75);
  }
  .planner-summary b{ color: var(--brass); font-weight: 500; }
  .planner-empty{
    font-size: 13.5px;
    color: rgba(241,233,216,0.4);
    padding: 18px 0;
  }
  .planner-legend{
    margin-top: 14px;
    display: flex;
    gap: 18px;
    font-size: 11.5px;
    color: rgba(241,233,216,0.4);
  }
  .planner-legend span{
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .planner-legend i{
    display:inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }
  .swatch-business{ background: var(--brass-dim); }
  .swatch-overlap{ background: var(--brass); }
  .swatch-now{ background: rgba(94,139,126,0.25); box-shadow: inset 0 0 0 1.5px var(--teal); }

  @media (max-width: 720px){
    .planner-row .row-label{ width: 108px; font-size: 12px; }
    .planner-axis .axis-spacer{ width: 108px; }
  }

  .city-grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: rgba(241,233,216,0.08);
    border: 1px solid rgba(241,233,216,0.08);
    border-radius: 10px;
    overflow: hidden;
  }

  .city{
    background: rgba(18,20,31,0.55);
    padding: 18px 20px;
  }

  .city .name{
    font-size: 13px;
    color: rgba(241,233,216,0.55);
    letter-spacing: 0.03em;
  }
  .city .time{
    font-family: 'Fraunces', serif;
    font-size: 24px;
    font-weight: 500;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
  }
  .city .offset{
    font-size: 11px;
    color: var(--teal);
    margin-top: 4px;
  }

  footer{
    margin-top: 64px;
    text-align:center;
    font-size: 12px;
    color: rgba(241,233,216,0.35);
  }
  footer .copyright{
    margin-top: 6px;
    font-size: 11px;
    color: rgba(241,233,216,0.25);
  }

  /* ---- Responsive: tablet ---- */
  @media (max-width: 720px){
    .wrap{ padding: 24px 18px 64px; }
    header{ padding-bottom: 28px; margin-bottom: 40px; }
    .cities{ margin-top: 56px; }
    .city{ padding: 16px; }
    .city-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  /* ---- Responsive: phone ---- */
  @media (max-width: 480px){
    header{
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    .wordmark{ font-size: 18px; }
    .instrument{ width: 88vw; margin-bottom: 20px; }
    .clock{ font-size: clamp(40px, 15vw, 60px); }
    .date-line{ font-size: 14px; }
    .location-line{ font-size: 12.5px; padding: 0 8px; }
    .city-grid{ grid-template-columns: repeat(2, 1fr); }
    .city .time{ font-size: 20px; }
    .cities h2{ font-size: 13px; }
  }

  /* ---- Responsive: very small phones ---- */
  @media (max-width: 340px){
    .city-grid{ grid-template-columns: 1fr; }
  }

  /* ---- Responsive: large desktop ---- */
  @media (min-width: 1200px){
    .wrap{ max-width: 1080px; }
    .instrument{ width: 460px; }
  }

  /* Touch-friendly tap targets */
  @media (hover:none) and (pointer:coarse){
    .city{ padding: 18px 16px; }
  }

  @media (prefers-reduced-motion: reduce){
    .instrument .sweep{ transition:none; }
  }