Toto — Andrew Mahon Photography

  
<head>
<meta charset=&quot;UTF-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>
<title>Puppy countdown</title>
<link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;>
<link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin>
<link href=&quot;https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&amp;family=Inter:wght@400;500;600&amp;display=swap&quot; rel=&quot;stylesheet&quot;>
<style>
  :root{
    --paper:#F4EEE3;
    --card:#FBF7EF;
    --ink:#322F28;
    --muted:#7A7363;
    --line:#E3DACB;
    --olive:#5C6B4C;
    --clay:#C97B4A;
    --clay-soft:#E8C9AD;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.5;
    padding:28px 20px 60px;
    display:flex;
    justify-content:center;
  }
  .wrap{width:100%;max-width:620px}

  .eyebrow{
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px;
  }
  h1{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:30px;
    line-height:1.1;
    letter-spacing:-.01em;
    margin-bottom:28px;
  }

  /* main countdown */
  .hero{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:30px 26px;
    margin-bottom:18px;
  }
  .hero .label{
    font-size:13px;
    color:var(--muted);
    margin-bottom:14px;
  }
  .clock{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }
  .unit{flex:1;min-width:64px}
  .unit .num{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:clamp(38px,12vw,56px);
    line-height:1;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
  }
  .unit .cap{
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:6px;
  }
  .hero .date{
    margin-top:22px;
    padding-top:16px;
    border-top:1px solid var(--line);
    font-size:14px;
    color:var(--muted);
  }
  .hero .date b{color:var(--ink);font-weight:600}

  .hero-bar{
    margin-top:22px;
    height:5px;
    background:var(--line);
    border-radius:999px;
    overflow:hidden;
  }
  .hero-bar span{
    display:block;
    height:100%;
    width:0;
    border-radius:999px;
    background:var(--olive);
    transition:width .6s ease;
  }
  .hero.visit .hero-bar span{background:var(--clay)}
  .hero-meta{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--muted);
    margin-top:8px;
  }
  .hero-meta b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

  /* visit countdown: smaller, clay accent */
  .hero.visit{padding:24px 26px}
  .hero.visit .num{font-size:clamp(30px,9vw,42px);color:var(--clay)}

  /* the two clocks bit */
  .twin{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:18px;
  }
  @media (max-width:460px){.twin{grid-template-columns:1fr}}
  .mini{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px 18px 16px;
  }
  .mini .k{font-size:12px;color:var(--muted);margin-bottom:8px}
  .mini .v{
    font-family:'Fraunces',serif;
    font-size:30px;
    font-weight:500;
    line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .mini .v small{font-size:14px;color:var(--muted);font-family:'Inter',sans-serif;font-weight:400}

  /* progress */
  .prog{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px 20px 18px;
    margin-bottom:18px;
  }
  .prog .row{margin-bottom:18px}
  .prog .row:last-child{margin-bottom:0}
  .prog .top{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    font-size:13px;
    margin-bottom:8px;
  }
  .prog .top .pct{font-weight:600;font-variant-numeric:tabular-nums}
  .bar{
    height:9px;
    background:var(--line);
    border-radius:999px;
    overflow:hidden;
  }
  .bar span{
    display:block;
    height:100%;
    border-radius:999px;
    background:var(--olive);
    transition:width .6s ease;
  }
  .bar.clay span{background:var(--clay)}

  /* timeline */
  .tl{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:8px 20px;
  }
  .tl h2{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:16px;
    padding:14px 0 4px;
  }
  .step{
    display:flex;
    gap:14px;
    padding:13px 0;
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .step:last-child{border-bottom:none}
  .dot{
    flex:none;
    width:11px;height:11px;
    border-radius:50%;
    margin-top:5px;
    background:var(--clay-soft);
    border:2px solid var(--card);
    box-shadow:0 0 0 2px var(--line);
  }
  .step.done .dot{background:var(--olive);box-shadow:0 0 0 2px var(--olive)}
  .step.now .dot{background:var(--clay);box-shadow:0 0 0 2px var(--clay)}
  .step .info{flex:1}
  .step .t{font-size:14px;font-weight:500}
  .step .d{font-size:13px;color:var(--muted);margin-top:1px}
  .step .tag{
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--clay);
    font-weight:600;
    margin-top:3px;
  }

  footer{
    text-align:center;
    font-size:12px;
    color:var(--muted);
    margin-top:26px;
  }
</style>
</head>
<body>
<div class=&quot;wrap&quot;>
  <div class=&quot;eyebrow&quot;>Toto Mahon · collection countdown</div>
  <h1>Bringing Toto home</h1>

  <section class=&quot;hero&quot;>
    <div class=&quot;label&quot;>Time until collection</div>
    <div class=&quot;clock&quot;>
      <div class=&quot;unit&quot;><div class=&quot;num&quot; id=&quot;d&quot;>–</div><div class=&quot;cap&quot;>days</div></div>
      <div class=&quot;unit&quot;><div class=&quot;num&quot; id=&quot;h&quot;>–</div><div class=&quot;cap&quot;>hours</div></div>
      <div class=&quot;unit&quot;><div class=&quot;num&quot; id=&quot;m&quot;>–</div><div class=&quot;cap&quot;>mins</div></div>
      <div class=&quot;unit&quot;><div class=&quot;num&quot; id=&quot;s&quot;>–</div><div class=&quot;cap&quot;>secs</div></div>
    </div>
    <div class=&quot;hero-bar&quot;><span id=&quot;hb1&quot;></span></div>
    <div class=&quot;hero-meta&quot;><span><b id=&quot;hp1&quot;>–</b> of the wait done</span><span><b id=&quot;hr1&quot;>–</b> to go</span></div>
    <div class=&quot;date&quot;>Collection day: <b>Sunday 6 September 2026</b>, around midday</div>
  </section>

  <section class=&quot;hero visit&quot;>
    <div class=&quot;label&quot;>Time until our visit</div>
    <div class=&quot;clock&quot;>
      <div class=&quot;unit&quot;><div class=&quot;num&quot; id=&quot;vd&quot;>–</div><div class=&quot;cap&quot;>days</div></div>
      <div class=&quot;unit&quot;><div class=&quot;num&quot; id=&quot;vh&quot;>–</div><div class=&quot;cap&quot;>hours</div></div>
      <div class=&quot;unit&quot;><div class=&quot;num&quot; id=&quot;vm&quot;>–</div><div class=&quot;cap&quot;>mins</div></div>
      <div class=&quot;unit&quot;><div class=&quot;num&quot; id=&quot;vs&quot;>–</div><div class=&quot;cap&quot;>secs</div></div>
    </div>
    <div class=&quot;hero-bar&quot;><span id=&quot;hb2&quot;></span></div>
    <div class=&quot;hero-meta&quot;><span><b id=&quot;hp2&quot;>–</b> of the wait done</span><span><b id=&quot;hr2&quot;>–</b> to go</span></div>
    <div class=&quot;date&quot;>Visit day: <b>Monday 6 July 2026</b></div>
  </section>


  <section class=&quot;twin&quot;>
    <div class=&quot;mini&quot;>
      <div class=&quot;k&quot;>Toto right now</div>
      <div class=&quot;v&quot; id=&quot;age&quot;>–</div>
    </div>
    <div class=&quot;mini&quot;>
      <div class=&quot;k&quot;>Age at collection</div>
      <div class=&quot;v&quot;>15 <small>weeks</small></div>
    </div>
  </section>

  <section class=&quot;prog&quot;>
    <div class=&quot;row&quot;>
      <div class=&quot;top&quot;><span>Since the deposit (10 Apr)</span><span class=&quot;pct&quot; id=&quot;p1&quot;>–</span></div>
      <div class=&quot;bar clay&quot;><span id=&quot;b1&quot; style=&quot;width:0&quot;></span></div>
    </div>
    <div class=&quot;row&quot;>
      <div class=&quot;top&quot;><span>Since Toto was born (24 May)</span><span class=&quot;pct&quot; id=&quot;p2&quot;>–</span></div>
      <div class=&quot;bar&quot;><span id=&quot;b2&quot; style=&quot;width:0&quot;></span></div>
    </div>
  </section>

  <section class=&quot;tl&quot;>
    <h2>The timeline</h2>
    <div id=&quot;steps&quot;></div>
  </section>

  <footer>Updates live. All figures worked out from the dates.</footer>
</div>

<script>
  // --- the fixed points ---
  const deposit    = new Date(2026, 3, 10, 0, 0, 0);   // 10 Apr 2026
  const born       = new Date(2026, 4, 24, 0, 0, 0);    // 24 May 2026
  const collection = new Date(2026, 8, 6, 12, 0, 0);    // 6 Sep 2026, midday
  const visit      = new Date(2026, 6, 6, 12, 0, 0);     // 6 Jul 2026, midday


  const DAY = 86400000;

  function pad(n){return String(n).padStart(2,'0')}

  function fmt(date){
    return date.toLocaleDateString('en-GB',{day:'numeric',month:'short',year:'numeric'});
  }

  function ageText(ms){
    const totalDays = Math.floor(ms/DAY);
    const weeks = Math.floor(totalDays/7);
    const days = totalDays%7;
    if(totalDays < 0) return 'not born yet';
    if(weeks === 0) return totalDays + (totalDays===1?' day':' days');
    let out = weeks + (weeks===1?' wk':' wks');
    if(days) out += ' ' + days + 'd';
    out += ' <small>(' + totalDays + ' days)</small>';
    return '<span>'+out+'</span>';
  }

  function clamp(x){return Math.max(0,Math.min(100,x))}

  const stepsEl = document.getElementById('steps');

  function buildSteps(now){
    const data = [
      {t:'Deposit placed',         d:deposit},
      {t:'Litter born',            d:born},
      {t:'Today',                  d:now,        marker:true},
      {t:'Halfway since deposit',  d:new Date((deposit.getTime()+collection.getTime())/2)},
      {t:'Our visit',              d:new Date(2026, 6, 6, 0, 0, 0)},
      {t:'Collection day',         d:collection}
    ];
    stepsEl.innerHTML = data.map(s=>{
      let cls = '';
      if(s.marker){cls='now'}
      else if(s.d <= now){cls='done'}
      return `<div class=&quot;step ${cls}&quot;>
        <div class=&quot;dot&quot;></div>
        <div class=&quot;info&quot;>
          <div class=&quot;t&quot;>${s.t}</div>
          <div class=&quot;d&quot;>${fmt(s.d)}</div>
          ${s.marker?'<div class=&quot;tag&quot;>You are here</div>':''}
        </div>
      </div>`;
    }).join('');
  }

  function tick(){
    const now = new Date();

    // countdown
    let diff = collection - now;
    if(diff < 0) diff = 0;
    const dd = Math.floor(diff/DAY);
    const hh = Math.floor((diff%DAY)/3600000);
    const mm = Math.floor((diff%3600000)/60000);
    const ss = Math.floor((diff%60000)/1000);
    document.getElementById('d').textContent = dd;
    document.getElementById('h').textContent = pad(hh);
    document.getElementById('m').textContent = pad(mm);
    document.getElementById('s').textContent = pad(ss);

    // visit countdown
    let vdiff = visit - now;
    if(vdiff < 0) vdiff = 0;
    document.getElementById('vd').textContent = Math.floor(vdiff/DAY);
    document.getElementById('vh').textContent = pad(Math.floor((vdiff%DAY)/3600000));
    document.getElementById('vm').textContent = pad(Math.floor((vdiff%3600000)/60000));
    document.getElementById('vs').textContent = pad(Math.floor((vdiff%60000)/1000));

    // slim hero bars (progress from the deposit toward each date)
    const hp1 = clamp((now - deposit)/(collection - deposit)*100);
    document.getElementById('hb1').style.width = hp1 + '%';
    document.getElementById('hp1').textContent = hp1.toFixed(2) + '%';
    document.getElementById('hr1').textContent = (100-hp1).toFixed(2) + '%';

    const hp2 = clamp((now - deposit)/(visit - deposit)*100);
    document.getElementById('hb2').style.width = hp2 + '%';
    document.getElementById('hp2').textContent = hp2.toFixed(2) + '%';
    document.getElementById('hr2').textContent = (100-hp2).toFixed(2) + '%';

    // age
    document.getElementById('age').innerHTML = ageText(now - born);

    // progress since deposit
    const p1 = clamp((now - deposit)/(collection - deposit)*100);
    document.getElementById('p1').textContent = p1.toFixed(2) + '%';
    document.getElementById('b1').style.width = p1 + '%';

    // progress since birth
    const p2 = clamp((now - born)/(collection - born)*100);
    document.getElementById('p2').textContent = p2.toFixed(2) + '%';
    document.getElementById('b2').style.width = p2 + '%';

    buildSteps(now);
  }

  tick();
  setInterval(tick, 1000);
</script>
  <script>
    (function(){
      function send(){ try{ parent.postMessage({totoHeight: document.documentElement.scrollHeight}, '*'); }catch(e){} }
      window.addEventListener('load', send);
      if(window.ResizeObserver){ new ResizeObserver(send).observe(document.body); }
      setInterval(send, 1000);
    })();
  </script>
</body>
</html>
">