jgf-register,jgf-cycle{all:unset;display:block}
body{margin:0}
*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--jgf-bg);
}

body{
  background:var(--jgf-bg);
  color:var(--jgf-ink);
  font-family:"Vazirmatn",system-ui,sans-serif;
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.66;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

a{
  color:var(--jgf-accent);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

a:focus-visible,
input:focus-visible{
  outline:2px solid var(--jgf-accent);
  outline-offset:3px;
}

/* ---- masthead ---------------------------------------------------- */

.jgf__top{
  padding:2.25rem 1.15rem 1.5rem;
  border-bottom:1px solid var(--jgf-surface);
}

.jgf__mark{
  line-height:0;
  margin-bottom:1rem;
}

.jgf__mark svg{display:block}

.jgf__wordmark{
  font-family:"Kanit",system-ui,sans-serif;
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:.02em;
  line-height:1.2;
  margin:0 0 .65rem;
  color:var(--jgf-ink);
}

.jgf__standfirst{
  margin:0;
  max-width:56ch;
  color:var(--jgf-accent2);
}

/* ---- frame: section list beside the running text ------------------ */

.jgf__frame{
  padding:0 1.15rem;
}

.jgf__sections{
  padding:1.6rem 0 .4rem;
  border-bottom:1px solid var(--jgf-surface);
}

.jgf__sections-lead{
  font-family:"Kanit",system-ui,sans-serif;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--jgf-accent2);
  margin:0 0 .6rem;
}

.jgf__sectionlist{
  margin:0;
  padding-left:1.4rem;
  list-style:decimal;
}

.jgf__sectionlist li{
  margin-bottom:.35rem;
  color:var(--jgf-accent2);
}

.jgf__sectionlist a{
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 180ms linear,color 180ms linear;
}

.jgf__sectionlist a:hover{
  border-bottom-color:var(--jgf-accent);
}

.jgf__body{
  padding:1.6rem 0 2.6rem;
  max-width:66ch;
}

.jgf__section{
  padding-bottom:2.1rem;
}

.jgf__section + .jgf__section{
  padding-top:.4rem;
}

.jgf__h{
  font-family:"Kanit",system-ui,sans-serif;
  font-weight:600;
  font-size:1.28rem;
  line-height:1.28;
  letter-spacing:.01em;
  margin:0 0 .85rem;
  color:var(--jgf-accent);
}

.jgf__body p{
  margin:0 0 1.05rem;
}

.jgf__mail{
  word-break:break-word;
}

/* ---- the frequency register --------------------------------------- */

.jgf__area{
  font-family:"Kanit",system-ui,sans-serif;
  font-weight:600;
  font-size:.94rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--jgf-accent2);
  margin:1.7rem 0 .55rem;
}

.jgf__line{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  padding:.22rem 0;
  cursor:pointer;
}

.jgf__line input{
  flex:0 0 auto;
  width:1rem;
  height:1rem;
  margin:0;
  accent-color:var(--jgf-accent);
  transform:translateY(.15rem);
  cursor:pointer;
}

.jgf__text{
  display:inline;
  background-image:linear-gradient(var(--jgf-accent2),var(--jgf-accent2));
  background-repeat:no-repeat;
  background-position:0 0.72em;
  background-size:0% 1px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  transition:background-size 300ms linear,color 300ms linear;
}

.jgf__line input:checked ~ .jgf__text{
  background-size:100% 1px;
  color:var(--jgf-accent2);
}

.jgf__freq{
  color:var(--jgf-accent);
}

.jgf__line--done .jgf__freq{
  color:var(--jgf-accent2);
}

.jgf__count{
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid var(--jgf-surface);
  color:var(--jgf-accent2);
}

.jgf__count output{
  font-family:"Kanit",system-ui,sans-serif;
  font-weight:600;
  font-size:1.05rem;
  color:var(--jgf-accent);
}

/* ---- the twelve-week planner --------------------------------------- */

.jgf__tasks{
  min-width:0;
  border:1px solid var(--jgf-surface);
  background:var(--jgf-surface);
  border-radius:2px;
  padding:.9rem 1rem 1rem;
  margin:0 0 1.4rem;
}

.jgf__legend{
  font-family:"Kanit",system-ui,sans-serif;
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--jgf-accent);
  padding:0 .35rem;
}

.jgf__task{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  padding:.18rem 0;
  cursor:pointer;
}

.jgf__task input{
  flex:0 0 auto;
  width:1rem;
  height:1rem;
  margin:0;
  accent-color:var(--jgf-accent);
  transform:translateY(.15rem);
  cursor:pointer;
}

.jgf__weeks{
  border-left:2px solid var(--jgf-surface);
  padding-left:1rem;
}

.jgf__week{
  margin:0 0 .5rem;
}

.jgf__weeks .jgf__week:last-child{
  margin-bottom:0;
}

/* ---- footer --------------------------------------------------------- */

.jgf__foot{
  border-top:1px solid var(--jgf-surface);
  padding:2rem 1.15rem 2.8rem;
  color:var(--jgf-accent2);
  font-size:.95rem;
}

.jgf__addr{
  font-style:normal;
  line-height:1.55;
  margin-bottom:1rem;
}

.jgf__reg{
  margin:0 0 .45rem;
}

/* ---- wider viewports ------------------------------------------------ */

@media (min-width:720px){
  .jgf__top{padding:3.2rem 2.4rem 1.9rem}
  .jgf__frame{padding:0 2.4rem}
  .jgf__foot{padding:2.4rem 2.4rem 3.4rem}
  .jgf__wordmark{font-size:1.7rem}
  .jgf__h{font-size:1.45rem}
}

@media (min-width:1040px){
  .jgf__frame{
    display:grid;
    grid-template-columns:16rem minmax(0,1fr);
    column-gap:3.4rem;
    align-items:start;
    max-width:74rem;
  }
  .jgf__sections{
    border-bottom:0;
    border-right:1px solid var(--jgf-surface);
    padding:2.2rem 1.6rem 2.2rem 0;
  }
  .jgf__body{padding-top:2.2rem}
  .jgf__top,.jgf__foot{max-width:74rem}
}

/* ---- the notice page ------------------------------------------------ */

.jgf__notice{
  max-width:64ch;
  padding:2.4rem 1.15rem 3.2rem;
  border-top:4px solid var(--jgf-surface);
}

.jgf__notice p{
  margin:0 0 1.15rem;
}

.jgf__notice p:first-child{
  font-size:1.14rem;
  line-height:1.6;
}

.jgf__notice p:first-child::first-line{
  font-family:"Kanit",system-ui,sans-serif;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--jgf-accent);
}

.jgf__return{
  margin-top:2rem;
  padding-top:1.2rem;
  border-top:1px solid var(--jgf-surface);
}

@media (min-width:720px){
  .jgf__notice{padding:3.4rem 2.4rem 4rem}
}

/* ---- motion is opt-out ---------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .jgf__text{
    transition:none;
  }
  .jgf__sectionlist a{
    transition:none;
  }
}