/* NKK Sakramentalia 1.0.0 */
html body.nkk-sacr-system{
    --sacr-ink:#171411;
    --sacr-muted:#6a625b;
    --sacr-accent:#8a1f2d;
    --sacr-line:#d7cec1;
    --sacr-line-strong:#bcb1a4;
    --sacr-paper:#f7f3ec;
    --sacr-paper-light:#fffdf8;
    --sacr-soft:rgba(138,31,45,.045);
    --sacr-serif:Georgia,"Times New Roman",serif;
    --sacr-sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    background:var(--sacr-paper);
    color:var(--sacr-ink);
}

html body.nkk-sacr-system *{box-sizing:border-box}

html body.nkk-sacr-system .nkk-sacr-shell{
    width:min(calc(100% - 56px),1380px);
    max-width:1380px;
    margin-inline:auto;
}

.nkk-sacr-main{background:var(--sacr-paper)}

.nkk-sacr-eyebrow{
    display:block;
    margin:0 0 8px;
    color:var(--sacr-accent);
    font-family:var(--sacr-sans);
    font-size:9px;
    font-weight:850;
    line-height:1.2;
    letter-spacing:.13em;
    text-transform:uppercase;
}

/* HERO */
.nkk-sacr-hero{
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(500px,1.08fr);
    gap:clamp(40px,5vw,76px);
    align-items:center;
    min-height:620px;
    padding-block:32px 44px;
    border-bottom:1px solid var(--sacr-line-strong);
}

.nkk-sacr-hero h1,
.nkk-sacr-ritualhero h1{
    margin:0;
    font-family:var(--sacr-serif);
    font-size:clamp(36px,4.1vw,56px);
    font-weight:400;
    line-height:1.02;
    letter-spacing:-.025em;
}

.nkk-sacr-hero__lead,
.nkk-sacr-ritualhero__lead{
    max-width:760px;
    margin:15px 0 0;
    color:#49433d;
    font-family:var(--sacr-serif);
    font-size:16.5px;
    line-height:1.66;
}

.nkk-sacr-hero__lead{text-align:justify}

.nkk-sacr-note{
    max-width:670px;
    margin-top:22px;
    padding:16px 17px;
    background:var(--sacr-soft);
    border-left:2px solid var(--sacr-accent);
}

.nkk-sacr-note p{
    margin:0;
    color:#575049;
    font-family:var(--sacr-serif);
    font-size:13.5px;
    line-height:1.62;
}

/* FIELD VISUAL */
.nkk-sacr-field{
    position:relative;
    min-height:550px;
    display:grid;
    place-items:center;
    isolation:isolate;
}

.nkk-sacr-field__ring{
    position:absolute;
    left:50%;
    top:50%;
    border-radius:50%;
    border:1px solid rgba(138,31,45,.10);
    transform:translate(-50%,-50%);
    pointer-events:none;
}

.nkk-sacr-field__ring--1{
    width:82%;
    aspect-ratio:1;
    animation:nkkSacrBreathe 7s ease-in-out infinite;
}

.nkk-sacr-field__ring--2{
    width:62%;
    aspect-ratio:1;
    border-style:dashed;
    border-color:rgba(138,31,45,.12);
    animation:nkkSacrTurn 44s linear infinite;
}

.nkk-sacr-field__ring--3{
    width:40%;
    aspect-ratio:1;
    border-color:rgba(188,177,164,.42);
}

.nkk-sacr-field__center{
    position:relative;
    z-index:5;
    width:194px;
    aspect-ratio:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px;
    border-radius:50%;
    background:#fffdf8;
    border:1px solid var(--sacr-line-strong);
    box-shadow:0 18px 48px rgba(35,26,22,.06);
    text-align:center;
}

.nkk-sacr-field__center::before,
.nkk-sacr-field__center::after{
    content:"";
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(138,31,45,.08);
}

.nkk-sacr-field__center::before{inset:13px}
.nkk-sacr-field__center::after{inset:28px;border-color:rgba(188,177,164,.28)}

.nkk-sacr-field__icon{
    position:relative;
    z-index:1;
    width:68px;
    height:68px;
    display:block;
    margin-bottom:8px;
    color:var(--sacr-accent);
}

.nkk-sacr-field svg,
.nkk-sacr-directory svg,
.nkk-sacr-ritualhero__symbol svg,
.nkk-sacr-other svg,
.nkk-sacr-relation svg{
    width:100%;
    height:100%;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.nkk-sacr-field__center strong{
    position:relative;
    z-index:1;
    font-family:var(--sacr-serif);
    font-size:18px;
    font-weight:400;
}

.nkk-sacr-field__center small{
    position:relative;
    z-index:1;
    margin-top:4px;
    color:var(--sacr-muted);
    font-family:var(--sacr-sans);
    font-size:8px;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.055em;
}

.nkk-sacr-field__point{
    position:absolute;
    z-index:4;
    width:142px;
    min-height:116px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:16px 12px;
    background:rgba(255,253,248,.94);
    border:1px solid var(--sacr-line);
    text-align:center;
}

.nkk-sacr-field__point > span{
    width:38px;
    height:38px;
    display:block;
    color:var(--sacr-accent);
}

.nkk-sacr-field__point strong{
    font-family:var(--sacr-serif);
    font-size:14px;
    font-weight:400;
    line-height:1.15;
}

.nkk-sacr-field__point--1{top:1%;left:50%;transform:translateX(-50%)}
.nkk-sacr-field__point--2{top:50%;right:1%;transform:translateY(-50%)}
.nkk-sacr-field__point--3{bottom:1%;left:50%;transform:translateX(-50%)}
.nkk-sacr-field__point--4{top:50%;left:1%;transform:translateY(-50%)}

/* NAV */
.nkk-sacr-mainnav,
.nkk-sacr-sectionnav{
    border-bottom:1px solid var(--sacr-line);
    background:rgba(255,253,248,.34);
}

.nkk-sacr-mainnav .nkk-sacr-shell,
.nkk-sacr-sectionnav .nkk-sacr-shell{
    display:flex;
    justify-content:center;
    gap:0 24px;
    overflow-x:auto;
    scrollbar-width:none;
}

.nkk-sacr-mainnav .nkk-sacr-shell::-webkit-scrollbar,
.nkk-sacr-sectionnav .nkk-sacr-shell::-webkit-scrollbar{display:none}

.nkk-sacr-mainnav a,
.nkk-sacr-sectionnav a{
    min-height:50px;
    display:inline-flex;
    align-items:center;
    color:#625a52;
    font-family:var(--sacr-sans);
    font-size:9px;
    font-weight:800;
    letter-spacing:.055em;
    text-decoration:none;
    text-transform:uppercase;
    white-space:nowrap;
}

/* MAIN CONTENT */
.nkk-sacr-section{
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    gap:clamp(34px,5vw,72px);
    padding-block:48px;
    border-bottom:1px solid var(--sacr-line);
    scroll-margin-top:120px;
}

.nkk-sacr-section__side span{
    display:block;
    margin:2px 0 7px;
    color:var(--sacr-accent);
    font-family:var(--sacr-sans);
    font-size:8.5px;
    font-weight:850;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.nkk-sacr-section__side p{
    margin:0;
    color:#847a72;
    font-family:var(--sacr-sans);
    font-size:10px;
    font-weight:700;
    line-height:1.45;
}

.nkk-sacr-section__content{max-width:980px}

.nkk-sacr-section__content > h2,
.nkk-sacr-other h2,
.nkk-sacr-relation h2{
    margin:0 0 17px;
    font-family:var(--sacr-serif);
    font-size:clamp(25px,2.35vw,34px);
    font-weight:400;
    line-height:1.1;
    letter-spacing:-.015em;
}

.nkk-sacr-source > p,
.nkk-sacr-source li,
.nkk-sacr-intro{
    color:#39342f;
    font-family:var(--sacr-serif);
    font-size:15.5px;
    line-height:1.7;
}

.nkk-sacr-source > p{
    margin:0 0 14px;
    text-align:justify;
}

.nkk-sacr-source h3,
.nkk-sacr-source h4{
    margin:25px 0 9px;
    font-family:var(--sacr-serif);
    font-size:19px;
    font-weight:400;
    line-height:1.2;
}

.nkk-sacr-source ul,
.nkk-sacr-source ol{
    margin:12px 0 18px;
    padding-left:24px;
}

.nkk-sacr-source li{margin-bottom:6px}

/* DIRECTORY */
.nkk-sacr-directory{
    margin-top:27px;
    border-top:1px solid var(--sacr-line-strong);
}

.nkk-sacr-directory__item{
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    gap:18px;
    align-items:center;
    padding:21px 4px;
    border-bottom:1px solid var(--sacr-line);
    color:inherit;
    text-decoration:none;
    transition:background .2s ease;
}

.nkk-sacr-directory__item:hover{
    background:rgba(255,253,248,.52);
}

.nkk-sacr-directory__icon{
    width:50px;
    height:50px;
    display:block;
    color:var(--sacr-accent);
}

.nkk-sacr-directory__meta{
    display:block;
    margin-bottom:4px;
    color:#91877e;
    font-family:var(--sacr-sans);
    font-size:8px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.nkk-sacr-directory__body > strong{
    display:block;
    margin-bottom:5px;
    font-family:var(--sacr-serif);
    font-size:21px;
    font-weight:400;
}

.nkk-sacr-directory__body > small{
    display:block;
    max-width:780px;
    color:var(--sacr-muted);
    font-family:var(--sacr-serif);
    font-size:13.5px;
    line-height:1.55;
}

.nkk-sacr-directory__link{
    display:inline-block;
    margin-top:8px;
    padding-bottom:2px;
    border-bottom:1px solid rgba(138,31,45,.22);
    color:#5a403f;
    font-family:var(--sacr-sans);
    font-size:9.5px;
    font-weight:700;
}

/* RELATION TO SACRAMENTS */
.nkk-sacr-relation{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    gap:clamp(32px,5vw,64px);
    align-items:center;
    padding-block:40px 64px;
    border-top:1px solid var(--sacr-line-strong);
}

.nkk-sacr-relation__symbol{
    width:120px;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid var(--sacr-line);
    background:#fffdf8;
    color:var(--sacr-accent);
}

.nkk-sacr-relation__symbol svg{width:65px;height:65px}

.nkk-sacr-relation p{
    max-width:840px;
    margin:0 0 13px;
    color:#4d4741;
    font-family:var(--sacr-serif);
    font-size:14.5px;
    line-height:1.65;
    text-align:justify;
}

.nkk-sacr-relation a{
    display:inline-block;
    padding-bottom:2px;
    border-bottom:1px solid rgba(138,31,45,.26);
    color:#5a403f;
    font-family:var(--sacr-sans);
    font-size:10px;
    font-weight:750;
    text-decoration:none;
}

/* RITUAL HERO */
.nkk-sacr-ritualhero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 270px;
    gap:clamp(36px,5vw,72px);
    align-items:center;
    padding-block:40px 38px;
    border-bottom:1px solid var(--sacr-line-strong);
}

.nkk-sacr-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    gap:5px 8px;
    margin-bottom:23px;
    color:#82786f;
    font-family:var(--sacr-sans);
    font-size:9px;
    font-weight:700;
}

.nkk-sacr-breadcrumb a{
    color:inherit;
    text-decoration:none;
}

.nkk-sacr-ritualhero__number{
    display:block;
    margin-bottom:7px;
    color:#a4988f;
    font-family:var(--sacr-sans);
    font-size:10px;
    font-weight:850;
    letter-spacing:.1em;
}

.nkk-sacr-ritualhero__lead{text-align:left;max-width:840px}

.nkk-sacr-ritualhero__meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 24px;
    margin-top:20px;
    padding-top:14px;
    border-top:1px solid var(--sacr-line);
    color:#847a72;
    font-family:var(--sacr-sans);
    font-size:9px;
}

.nkk-sacr-ritualhero__meta strong{
    color:#514a44;
    font-weight:750;
}

.nkk-sacr-ritualhero__symbol{
    width:230px;
    aspect-ratio:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    justify-self:end;
    padding:27px;
    border-radius:50%;
    background:#fffdf8;
    border:1px solid var(--sacr-line);
    color:var(--sacr-accent);
    text-align:center;
}

.nkk-sacr-ritualhero__symbol > span{
    width:72px;
    height:72px;
    display:block;
    margin-bottom:12px;
}

.nkk-sacr-ritualhero__symbol strong{
    color:var(--sacr-ink);
    font-family:var(--sacr-serif);
    font-size:20px;
    font-weight:400;
}

.nkk-sacr-ritualhero__symbol small{
    margin-top:6px;
    color:var(--sacr-muted);
    font-family:var(--sacr-sans);
    font-size:8px;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.05em;
}

/* RITUAL BAR */
.nkk-sacr-ritualbar{
    border-bottom:1px solid var(--sacr-line);
    background:rgba(255,253,248,.42);
}

.nkk-sacr-ritualbar .nkk-sacr-shell{
    display:flex;
    justify-content:center;
    overflow-x:auto;
    scrollbar-width:none;
}

.nkk-sacr-ritualbar .nkk-sacr-shell::-webkit-scrollbar{display:none}

.nkk-sacr-ritualbar a{
    position:relative;
    min-height:56px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding-inline:15px;
    color:#6e655d;
    font-family:var(--sacr-sans);
    font-size:9px;
    font-weight:750;
    text-decoration:none;
    white-space:nowrap;
}

.nkk-sacr-ritualbar a span{
    color:#a99c92;
    font-size:7px;
}

.nkk-sacr-ritualbar a.is-active{color:var(--sacr-ink)}

.nkk-sacr-ritualbar a.is-active::after{
    content:"";
    position:absolute;
    left:13px;
    right:13px;
    bottom:-1px;
    height:2px;
    background:var(--sacr-accent);
}

/* RITUAL LAYOUT */
.nkk-sacr-rituallayout{
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    gap:clamp(40px,6vw,84px);
    padding-block:48px 58px;
}

.nkk-sacr-ritualaside{
    align-self:start;
    position:sticky;
    top:110px;
}

.nkk-sacr-ritualaside__eyebrow{
    display:block;
    margin-bottom:7px;
    color:var(--sacr-accent);
    font-family:var(--sacr-sans);
    font-size:8px;
    font-weight:850;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.nkk-sacr-ritualaside > strong{
    display:block;
    margin-bottom:10px;
    font-family:var(--sacr-serif);
    font-size:21px;
    font-weight:400;
}

.nkk-sacr-ritualaside > p{
    margin:0 0 17px;
    color:var(--sacr-muted);
    font-family:var(--sacr-serif);
    font-size:12.5px;
    line-height:1.6;
}

.nkk-sacr-ritualaside__legend{
    margin:18px 0;
    padding:14px 0;
    border-top:1px solid var(--sacr-line);
    border-bottom:1px solid var(--sacr-line);
}

.nkk-sacr-ritualaside__legend span{
    display:block;
    margin:4px 0;
    color:#726960;
    font-family:var(--sacr-sans);
    font-size:8.5px;
    line-height:1.45;
}

.nkk-sacr-ritualaside__legend b{color:var(--sacr-accent)}

.nkk-sacr-ritualaside > a{
    display:inline-block;
    padding-bottom:2px;
    border-bottom:1px solid rgba(138,31,45,.22);
    color:#5a403f;
    font-family:var(--sacr-sans);
    font-size:9px;
    font-weight:700;
    text-decoration:none;
}

.nkk-sacr-ritual{max-width:930px}

.nkk-sacr-ritual__section{
    display:grid;
    grid-template-columns:210px minmax(0,1fr);
    gap:30px;
    padding:0 0 40px;
    margin-bottom:40px;
    border-bottom:1px solid var(--sacr-line);
    scroll-margin-top:120px;
}

.nkk-sacr-ritual__section > header span{
    display:block;
    margin-bottom:7px;
    color:var(--sacr-accent);
    font-family:var(--sacr-sans);
    font-size:8px;
    font-weight:850;
    letter-spacing:.1em;
}

.nkk-sacr-ritual__section > header h2{
    margin:0;
    font-family:var(--sacr-serif);
    font-size:21px;
    font-weight:400;
    line-height:1.2;
}

.nkk-sacr-ritual__body p,
.nkk-sacr-ritual__body li{
    color:#39342f;
    font-family:var(--sacr-serif);
    font-size:15px;
    line-height:1.72;
}

.nkk-sacr-ritual__body p{
    margin:0 0 15px;
    text-align:justify;
}

.nkk-sacr-ritual__body h3,
.nkk-sacr-ritual__body h4{
    margin:24px 0 9px;
    font-family:var(--sacr-serif);
    font-size:18px;
    font-weight:400;
    line-height:1.22;
}

.nkk-sacr-ritual__body ul,
.nkk-sacr-ritual__body ol{
    margin:12px 0 18px;
    padding-left:24px;
}

.nkk-sacr-ritual__body li{margin-bottom:6px}

.nkk-sacr-ritual__body .nkk-sacr-role{
    padding:10px 13px;
    margin-bottom:8px;
    text-align:left;
}

.nkk-sacr-ritual__body .nkk-sacr-role--celebrant{
    border-left:2px solid var(--sacr-accent);
    background:rgba(138,31,45,.035);
}

.nkk-sacr-ritual__body .nkk-sacr-role--assembly{
    border-left:2px solid rgba(95,83,73,.42);
    background:rgba(255,253,248,.52);
}

.nkk-sacr-ritual__body .nkk-sacr-rubric{
    color:#7d7168;
    font-size:13px;
    font-style:italic;
    text-align:left;
}

.nkk-sacr-ritual__body .nkk-sacr-prayer-intro{
    margin-top:22px;
    color:var(--sacr-accent);
    font-family:var(--sacr-sans);
    font-size:9px;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-align:left;
}

.nkk-sacr-ritual__body blockquote{
    margin:22px 0;
    padding:18px 20px;
    border-left:2px solid var(--sacr-accent);
    background:var(--sacr-soft);
}

/* OTHER RITUALS */
.nkk-sacr-other{
    padding-block:40px 58px;
    border-top:1px solid var(--sacr-line-strong);
}

.nkk-sacr-other__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:24px;
    border-top:1px solid var(--sacr-line);
    border-left:1px solid var(--sacr-line);
}

.nkk-sacr-other__grid a{
    min-height:150px;
    padding:20px;
    border-right:1px solid var(--sacr-line);
    border-bottom:1px solid var(--sacr-line);
    color:inherit;
    text-decoration:none;
}

.nkk-sacr-other__grid a > span{
    width:36px;
    height:36px;
    display:block;
    margin-bottom:10px;
    color:var(--sacr-accent);
}

.nkk-sacr-other__grid strong{
    display:block;
    margin-bottom:5px;
    font-family:var(--sacr-serif);
    font-size:18px;
    font-weight:400;
}

.nkk-sacr-other__grid small{
    color:var(--sacr-muted);
    font-family:var(--sacr-sans);
    font-size:8px;
    font-weight:750;
    text-transform:uppercase;
}

/* ANIMATION */
@keyframes nkkSacrTurn{
    from{transform:translate(-50%,-50%) rotate(0)}
    to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes nkkSacrBreathe{
    0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.98)}
    50%{opacity:1;transform:translate(-50%,-50%) scale(1.02)}
}

/* RESPONSIVE */
@media(max-width:1100px){
    .nkk-sacr-hero{grid-template-columns:1fr}
    .nkk-sacr-field{width:min(100%,760px);margin-inline:auto}
}

@media(max-width:900px){
    html body.nkk-sacr-system .nkk-sacr-shell{
        width:min(calc(100% - 32px),1380px);
    }

    .nkk-sacr-section,
    .nkk-sacr-rituallayout{
        grid-template-columns:1fr;
    }

    .nkk-sacr-ritualaside{
        position:static;
        padding-bottom:22px;
        border-bottom:1px solid var(--sacr-line);
    }

    .nkk-sacr-ritualhero{
        grid-template-columns:1fr 200px;
    }

    .nkk-sacr-ritualhero__symbol{width:180px}

    .nkk-sacr-ritual__section{
        grid-template-columns:180px minmax(0,1fr);
    }
}

@media(max-width:700px){
    html body.nkk-sacr-system .nkk-sacr-shell{
        width:min(calc(100% - 24px),1380px);
    }

    .nkk-sacr-hero{min-height:0;padding-top:28px}

    .nkk-sacr-hero__lead,
    .nkk-sacr-source > p,
    .nkk-sacr-relation p,
    .nkk-sacr-ritual__body p{
        text-align:left;
    }

    .nkk-sacr-field{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
        min-height:0;
        padding:22px 0;
    }

    .nkk-sacr-field__ring{display:none}

    .nkk-sacr-field__center{
        grid-column:1/-1;
        position:relative;
        width:160px;
        margin:0 auto 7px;
    }

    .nkk-sacr-field__point,
    .nkk-sacr-field__point--1,
    .nkk-sacr-field__point--2,
    .nkk-sacr-field__point--3,
    .nkk-sacr-field__point--4{
        position:relative;
        inset:auto;
        transform:none;
        width:auto;
        min-height:112px;
    }

    .nkk-sacr-ritualhero{
        grid-template-columns:1fr;
    }

    .nkk-sacr-ritualhero__symbol{
        width:155px;
        justify-self:start;
    }

    .nkk-sacr-ritual__section{
        grid-template-columns:1fr;
        gap:14px;
    }

    .nkk-sacr-other__grid{
        grid-template-columns:1fr;
    }

    .nkk-sacr-relation{
        grid-template-columns:1fr;
        gap:18px;
    }

    .nkk-sacr-relation__symbol{width:98px}

    .nkk-sacr-mainnav .nkk-sacr-shell,
    .nkk-sacr-sectionnav .nkk-sacr-shell,
    .nkk-sacr-ritualbar .nkk-sacr-shell{
        justify-content:flex-start;
    }
}

@media(prefers-reduced-motion:reduce){
    .nkk-sacr-field__ring{animation:none!important}
}